/* GSIM – stilmall enligt SKR:s grafiska profil (beslutad februari 2025, version 1.0).

   Färger: hela paletten från profilen. Textfärger är varm svart, oxid, petrol och marin.
   Bakgrundsfärger är beige, pastellrosa och pastellgrön (de kombinationer profilen anger som
   tillgängliga). Ljusrosa, ljusgrön och mörkbeige används som plattor med varm svart text.
   Korall används sparsamt som accent. Gul, orange och röd är symbolens färger och används
   inte i gränssnittet.

   Typografi: SKR:s identitetstypsnitt Rund är licensierat och ingår inte i repot. Stacken
   börjar med Rund så att det används om det finns installerat (eller läggs till via
   @font-face när licensen tillåter) och faller annars tillbaka på geometriska sans-serifer.
   All text är vänsterställd och rubriker är tydligt större än brödtext. */
:root {
  /* Palett */
  --varm-svart: #262422;
  --vit: #ffffff;
  --oxid: #9a3324;
  --petrol: #115e67;
  --marin: #154f80;
  --korall: #ff7c5d;
  --ljusgul: #f7f75f;
  --beige: #f7f2eb;
  --morkbeige: #f0d7bf;
  --pastellrosa: #ffebe8;
  --ljusrosa: #ffcec6;
  --pastellgron: #dfefeb;
  --ljusgron: #bddbd2;

  /* Perspektivens färglogik följer AG:s EA-ramverk. De ljusa webbnyanserna är
     lokalt valda för läsbarhet och ska inte tolkas som en officiell AG-hexpalett. */
  --perspective-strategy: #ece3f3;
  --perspective-business: #eee9b8;
  --perspective-information: #d8efec;
  --perspective-technology: #e4e7f4;
  --perspective-realisation: #f5dadd;
  --perspective-security: #e5e5e3;

  /* Roller i gränssnittet */
  --bg: var(--beige);
  --bg-alt: var(--beige);
  --plate: var(--pastellgron);
  --surface: var(--vit);
  --text: var(--varm-svart);
  --muted: #5f5a55;
  --brand: var(--oxid);
  --brand-dark: var(--varm-svart);
  --accent: var(--korall);
  --accent-light: var(--ljusrosa);
  --border: #e3dccf;
  --footer: var(--petrol);
  --radius: 8px;
  --wrap: 1100px;
  --font: "Rund", "Rund Text", "Avenir Next", "Avenir", "Century Gothic", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Rund Display", "Rund", "Avenir Next", "Avenir", "Futura", "Century Gothic", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Den fasta menyn får inte dölja det som har fokus eller det man hoppar till (WCAG 2.4.11). */
@media (min-width: 1001px) and (min-height: 701px) { html { scroll-padding-top: 150px; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Mycket långa ord bryts hellre än att ge sidled-scroll på smala skärmar (WCAG 1.4.10). */
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; text-align: left; }
/* Långa sammansatta ord i stora rubriker bryts i stället för att ge sidled-scroll på smala skärmar (WCAG 1.4.10). */
h1, h2 { overflow-wrap: break-word; hyphens: auto; }
h1 { color: var(--oxid); }
h2 { color: var(--petrol); }
a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 3px solid var(--marin); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--brand); color: #fff; padding: 8px 12px; border-radius: var(--radius);
}
.skip-link:focus { left: 8px; z-index: 100; }

/* Sidhuvud */
.site-header {
  background: var(--surface);
  border-bottom: 4px solid var(--accent);
  position: sticky; top: 0; z-index: 10;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-block: 12px;
}
.brand {
  display: inline-flex; align-items: center; gap: 16px;
  text-decoration: none; color: var(--text);
}
/* SKR:s färglogotyp: på vit bakgrund med fri yta runt om, enligt profilen. */
.brand__logo { display: block; width: auto; height: 52px; }
.brand__text {
  display: flex; flex-direction: column; line-height: 1.15;
  padding-left: 16px; border-left: 1px solid var(--border);
}
.brand__text strong { font-size: 1.25rem; letter-spacing: 0.04em; }
.brand__text span { font-size: 0.875rem; color: var(--muted); }

.site-nav { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; }
.site-nav a { color: var(--text); text-decoration: none; font-weight: 600; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--accent); }
.site-nav__logout { margin: 0; }
.site-nav__logout button {
  font: inherit; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--brand);
  border: 2px solid var(--brand); border-radius: 999px;
  padding: 6px 16px;
}
.site-nav__logout button:hover { background: var(--brand); color: #fff; }

/* Andra menyraden: allt som rör genomförandestödet samlas här, skilt från det GSIM-övergripande ovanför. */
.stod-bar { background: var(--bg); border-top: 1px solid var(--border); }
.stod-bar__inner {
  display: flex; align-items: center; gap: 4px 24px; flex-wrap: wrap;
  padding-block: 6px;
}
.stod-bar__label {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding-right: 24px; border-right: 1px solid var(--border);
}
.stod-bar--active .stod-bar__label { color: var(--brand); }
.stod-nav { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; }
.stod-nav a { color: var(--text); text-decoration: none; font-weight: 600; padding: 6px 0; border-bottom: 2px solid transparent; }
.stod-nav a:hover { border-bottom-color: var(--accent); }
.stod-nav a[aria-current="page"] { border-bottom-color: var(--brand); }

/* Hero */
.hero {
  background: var(--pastellrosa);
  padding-block: clamp(32px, 6vw, 64px);
}
.hero__kicker {
  margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.8125rem; font-weight: 700; color: var(--petrol);
}
.hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2.125rem, 5.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.hero__lead {
  margin: 0; max-width: 60ch;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--text);
}
.hero__text { margin: 12px 0 0; max-width: 65ch; }

/* Sektioner */
.section { padding-block: clamp(32px, 5vw, 56px); }
.section--alt { background: var(--plate); }
.section h2 {
  margin: 0 0 12px;
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  line-height: 1.15;
}
.section__intro { margin: 0 0 20px; font-weight: 600; }

/* Förmågor */
.legend { margin: 0 0 28px; padding: 0; display: grid; gap: 8px; }
.legend__row { display: flex; gap: 12px; align-items: flex-start; }
.legend dt { flex: 0 0 auto; min-width: 110px; margin: 0; }
.legend dd { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.badge {
  display: inline-block; white-space: nowrap;
  padding: 4px 10px; border-radius: 4px;
  border: 1.5px solid;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.4;
}
.badge--verksamhet { background: var(--pastellrosa); color: var(--oxid); border-color: var(--oxid); }
.badge--arkitektur { background: var(--pastellgron); color: var(--marin); border-color: var(--marin); }
.cluster__title {
  margin: 28px 0 4px; font-size: 1.375rem; line-height: 1.25; color: var(--marin);
}
.cluster__intro { margin: 0 0 12px; color: var(--muted); }
.capabilities { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.capabilities li { margin: 0; }
.cap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cap[open] { border-color: var(--accent); }
.cap summary {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px;
  padding: 14px 18px; cursor: pointer; list-style: none;
}
.cap summary::-webkit-details-marker { display: none; }
.cap summary::after {
  content: ""; flex: 0 0 auto; margin-top: 12px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.cap[open] summary::after { transform: rotate(-135deg); margin-top: 16px; }
.cap summary:hover { background: var(--bg-alt); }
.cap__nr {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-light); color: var(--brand-dark);
  font-weight: 800; font-size: 1rem;
}
.cap__name { font-weight: 600; padding-top: 5px; flex: 1 1 260px; }
.cap summary .badge { flex: 0 0 auto; margin-top: 4px; margin-left: auto; }
.cap__body { padding: 0 18px 16px 68px; font-size: 1rem; }
.cap__body p { margin: 0 0 10px; }
.cap__body p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .cap__body { padding-left: 18px; }
  .cap summary .badge { margin-left: 50px; }
  .legend__row { flex-direction: column; gap: 4px; }
}

/* Kort */
.cards {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 20px;
}
.card h3 { margin: 0 0 8px; font-size: 1.25rem; }
.card p { margin: 0 0 8px; }
.card__meta { color: var(--muted); font-size: 0.9375rem; font-style: italic; }

/* Länkar */
.links { margin: 0; padding-left: 1.2em; }
.links li { margin-bottom: 8px; }

/* Sidfot */
.site-footer {
  background: var(--footer); color: #fff;
  margin-top: 24px;
}
.site-footer a { color: #fff; }
.site-footer__inner { padding-block: 32px; }
.site-footer p { margin: 0 0 6px; max-width: 70ch; }
.site-footer p:last-of-type { color: #d5e6e8; font-size: 0.9375rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 16px 0 0; padding: 0; list-style: none; }

/* Löptext, t.ex. tillgänglighetsredogörelsen */
.prose { max-width: 75ch; }
.prose h2 { margin-top: 32px; }
.prose h2:first-child { margin-top: 0; }
.prose li { margin-bottom: 8px; }

/* Menyn är fast bara när skärmen är stor nog; vid zoom eller låg höjd skulle den täcka för mycket. */
@media (max-width: 1000px), (max-height: 700px) { .site-header { position: static; } }
@media (max-width: 600px) {
  .stod-bar__label { flex-basis: 100%; padding-right: 0; border-right: 0; }
  .brand__logo { height: 44px; }
}
/* Smal skärm eller kraftig förstoring (WCAG 1.4.10): logotyp och namn får radbrytas i stället för att
   sidan scrollar i sidled. */
.brand { max-width: 100%; min-width: 0; }
.brand__text { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .brand { flex-wrap: wrap; gap: 8px; }
  .brand__logo { height: 36px; }
  .brand__text { padding-left: 0; border-left: 0; }
  .brand__text strong { font-size: 1.0625rem; }
}

/* Arkitekturskiss */
.arch {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  margin: 8px 0 12px;
}
.arch__layers { display: flex; flex-direction: column; }
.arch__layer, .arch__national {
  border-radius: var(--radius);
  padding: 16px 18px;
  border: 1.5px solid var(--border);
  background: var(--surface);
}
.arch__layer p, .arch__national p { margin: 6px 0 0; font-size: 0.9375rem; }
.arch__title { font-weight: 700; font-size: 1.0625rem; }
.arch__layer--top { background: var(--pastellrosa); border-color: var(--oxid); }
.arch__layer--mid { background: var(--morkbeige); border-color: var(--korall); }
.arch__layer--base { background: var(--pastellgron); border-color: var(--marin); }
.arch__national { background: var(--bg-alt); border-style: dashed; border-color: var(--muted); }
.arch__national ul { margin: 8px 0 0; padding-left: 1.2em; font-size: 0.9375rem; }
.arch__national li { margin-bottom: 4px; }
.arch__arrow {
  align-self: center; width: 0; height: 14px;
  border-left: 2px solid var(--muted);
  position: relative;
}
.arch__arrow::after, .arch__arrow::before {
  content: ""; position: absolute; left: -5px; width: 8px; height: 8px;
  border-left: 2px solid var(--muted); border-top: 2px solid var(--muted);
}
.arch__arrow::before { top: 0; transform: rotate(45deg); }
.arch__arrow::after { bottom: 0; transform: rotate(225deg); }
.arch__caps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.arch__caps span {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--oxid);
  color: var(--oxid); font-weight: 800; font-size: 0.8125rem;
}
.cap__arch {
  margin-top: 10px; padding: 10px 12px;
  border-left: 4px solid var(--korall); background: var(--bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
}
@media (max-width: 760px) {
  .arch { grid-template-columns: 1fr; }
}

/* ---------- Mognadstrappa ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.subnav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
.subnav a { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--accent); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--brand); }
.cards--two { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); margin-top: 20px; }
.note {
  margin: 16px 0 0; padding: 12px 16px;
  background: var(--surface); border-left: 4px solid var(--morkbeige);
  border-radius: 0 var(--radius) var(--radius) 0; color: var(--muted); font-size: 0.9375rem;
}
.closing { margin: 28px 0 0; font-weight: 600; max-width: 70ch; }

/* Trappan med de fem nivåerna */
.stairs {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
}
.stair {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 14px 14px 16px; min-height: 100%;
  border-top: 6px solid var(--accent-light);
}
.stair--0 { padding-top: 14px; border-top-color: var(--border); }
.stair--1 { padding-top: 44px; border-top-color: var(--morkbeige); }
.stair--2 { padding-top: 74px; border-top-color: var(--ljusrosa); }
.stair--3 { padding-top: 104px; border-top-color: var(--korall); }
.stair--4 { padding-top: 134px; border-top-color: var(--oxid); }
.stair__nr {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 1.0625rem;
}
.stair__name { font-weight: 700; line-height: 1.25; }
.stair__desc { font-size: 0.9rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 900px) {
  .stairs { grid-template-columns: 1fr; align-items: stretch; }
  .stair { flex-direction: row; align-items: flex-start; flex-wrap: wrap; padding-top: 14px !important; border-top-width: 1.5px; border-left: 6px solid; }
  .stair--0 { border-left-color: var(--border); }
  .stair--1 { border-left-color: var(--morkbeige); }
  .stair--2 { border-left-color: var(--ljusrosa); }
  .stair--3 { border-left-color: var(--korall); }
  .stair--4 { border-left-color: var(--oxid); }
  .stair__name { padding-top: 6px; flex: 1 1 200px; }
  .stair__desc { flex: 1 1 100%; }
}

/* Faser */
.phases { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); margin-top: 16px; }
.phase { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.phase--start { border-color: var(--oxid); }
.phase--1 { border-color: var(--korall); }
.phase--2 { border-color: var(--marin); }
.phase--3 { border-color: var(--ljusgron); }
.phase__head h3 { margin: 6px 0 12px; font-size: 1.125rem; line-height: 1.3; }
.phase__tag, .tag {
  display: inline-block; white-space: nowrap; padding: 3px 10px; border-radius: 4px;
  border: 1.5px solid; font-size: 0.8125rem; font-weight: 700; line-height: 1.4;
}
.phase--start .phase__tag, .tag--start { background: var(--pastellrosa); color: var(--oxid); border-color: var(--oxid); }
.phase--1 .phase__tag, .tag--1 { background: var(--morkbeige); color: var(--varm-svart); border-color: var(--korall); }
.phase--2 .phase__tag, .tag--2 { background: var(--pastellgron); color: var(--marin); border-color: var(--marin); }
.phase--3 .phase__tag, .tag--3 { background: var(--ljusgron); color: var(--varm-svart); border-color: var(--ljusgron); }
.phase__caps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.phase__caps li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.phase__caps .cap__nr { width: 30px; height: 30px; font-size: 0.9rem; }
.phase p { margin: 0 0 8px; font-size: 0.9375rem; color: var(--muted); }
.phase p:last-child { margin-bottom: 0; }

/* Översiktstabell */
.table-wrap { overflow-x: auto; margin-top: 8px; position: relative; }
.levels { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 0.9375rem; }
.levels th, .levels td { text-align: left; padding: 10px 12px; border: 1px solid var(--border); vertical-align: top; }
.levels thead th { background: var(--morkbeige); font-weight: 700; }
.levels tbody th { font-weight: 600; }

/* Nulägesbildens skattning */
.assess { display: grid; gap: 10px; margin-top: 20px; }
.assess__head, .assess__row {
  display: grid; gap: 10px 14px; align-items: start;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
}
.assess__head { padding: 0 18px; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.assess__row { background: var(--surface); border: 1.5px solid var(--border); border-left-width: 6px; border-radius: var(--radius); padding: 14px 18px; }
.assess__row--critical, .assess__row--develop { border-left-color: var(--morkbeige); }
.assess__row--ok { border-left-color: var(--petrol); }
.assess__row--later { border-left-color: var(--ljusgron); }
.assess__cap { display: flex; gap: 10px; align-items: flex-start; }
.assess__cap .cap__nr { width: 30px; height: 30px; font-size: 0.9rem; }
.assess__name { font-weight: 600; padding-top: 3px; }
.assess__rec { font-size: 0.875rem; color: var(--muted); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.assess__field { display: flex; flex-direction: column; gap: 4px; }
.assess__field label { font-size: 0.875rem; font-weight: 700; color: var(--muted); }
.assess__field select {
  font: inherit; font-size: 0.9375rem; width: 100%;
  padding: 8px 10px; border: 1.5px solid #8c8680; border-radius: var(--radius); background: #fff; color: var(--text);
}
.assess__field select:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.assess__missing { font-size: 0.875rem; color: var(--muted); }
.assess__missing[hidden] { display: none; }
.assess__status { font-size: 0.9rem; font-weight: 600; color: var(--muted); padding: 6px 10px; border-radius: 4px; background: var(--bg-alt); }
.assess__status--critical, .assess__status--develop { background: var(--bg-alt); color: var(--text); }
.assess__status--ok { background: var(--pastellgron); color: var(--petrol); }
.assess__status--later { background: var(--ljusgron); color: var(--varm-svart); }
@media (max-width: 900px) {
  .assess__head { display: none; }
  .assess__row { grid-template-columns: 1fr 1fr; }
  .assess__cap, .assess__rec, .assess__status { grid-column: 1 / -1; }
  .assess__rec { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 480px) { .assess__row { grid-template-columns: 1fr; } }

.assess__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--brand); color: #fff; border: 2px solid var(--brand); border-radius: 999px; padding: 8px 20px;
}
/* Vit text även vid hover: länkknappar ärver annars a:hover (mörk text på mörk bakgrund). */
.btn:hover, .btn:focus-visible { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--brand); }
.btn--ghost:hover { background: var(--brand); color: #fff; }

/* Sammanfattning */
.summary { margin-top: 28px; background: var(--surface); border: 1.5px solid var(--border); border-top: 4px solid var(--brand); border-radius: var(--radius); padding: 20px 22px; }
.summary h3 { margin: 0 0 14px; font-size: 1.25rem; }
.summary h4 { margin: 0 0 4px; font-size: 1.0625rem; }
.summary__counts { margin: 0 0 20px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.summary__count { display: flex; flex-direction: column-reverse; gap: 2px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-alt); border-left: 5px solid var(--border); }
.summary__count dt { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.summary__count dd { margin: 0; font-size: 1.75rem; font-weight: 800; line-height: 1; }
.summary__count--critical { border-left-color: var(--oxid); }
.summary__count--develop { border-left-color: var(--korall); }
.summary__count--ok { border-left-color: var(--petrol); }
.summary__count--later { border-left-color: var(--ljusgron); }
.summary__lists { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.summary__hint { margin: 0 0 8px; font-size: 0.875rem; color: var(--muted); }
.summary__list { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.summary__list li { margin-bottom: 6px; }
.summary__list span { color: var(--muted); }
.summary__empty { color: var(--muted); font-style: italic; }

@media print {
  .site-header, .site-footer, .subnav, .assess__actions, .skip-link { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .section { padding-block: 12px; }
  .hero { background: none; padding-block: 8px; }
  .assess__row, .phase, .summary, .stair { break-inside: avoid; }
  .assess__row { grid-template-columns: 1.9fr 1.1fr 1.4fr 1.4fr 1.4fr 1.3fr; }
  .assess__head { display: grid; }
  .assess__field select { border: none; padding: 0; appearance: none; background: none; }
}

/* ---------- Införandeguide (steg 1) ---------- */
.site-nav__who { font-size: 0.9rem; color: var(--muted); padding: 6px 4px; }
.loop { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: loop; }
.loop li { counter-increment: loop; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px 6px 10px; font-size: 0.9375rem; font-weight: 600; }
.loop li::before { content: counter(loop); display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: var(--brand); color: #fff; margin-right: 8px; font-size: 0.8rem; }
.hero--cap .hero__lead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hero__rec { color: var(--muted); font-size: 0.9375rem; }
.capgrid { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.capcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.capcard--guide { border-left: 4px solid var(--accent); }
.capcard__link { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: var(--text); font-weight: 600; }
.capcard__link:hover .capcard__name { text-decoration: underline; }
.capcard__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.status { display: inline-block; font-size: 0.875rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--bg-alt); border: 1px solid var(--border); }
.status--klar { background: var(--pastellgron); border-color: var(--petrol); color: var(--petrol); }
.status--pagar { background: var(--morkbeige); border-color: var(--korall); color: var(--varm-svart); }
.status--foreslagen { background: var(--bg-alt); color: var(--muted); }
/* Förmågans status från nulägesbilden (levelStatus i lib/nulage.js) */
.status--niva-ok { background: var(--pastellgron); border-color: var(--petrol); color: var(--petrol); }
.status--niva-develop, .status--niva-critical { background: var(--bg-alt); border-color: var(--morkbeige); color: var(--text); }
.status--niva-later { background: var(--ljusgron); color: var(--varm-svart); }
.status--niva-unrated { background: var(--bg-alt); color: var(--muted); }
.status--planerad { background: var(--pastellgron); border-color: var(--marin); color: var(--marin); }
.status--guide { background: var(--accent-light); border-color: var(--accent); color: var(--brand-dark); }
.status--kommer { color: var(--muted); font-style: italic; }
.status--borttagen { text-decoration: line-through; color: var(--muted); }
.status-line { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.save-state { font-size: 0.9rem; color: var(--muted); }
.save-state--error { color: var(--oxid); font-weight: 600; }
.card__big { font-size: 2rem; font-weight: 700; margin: 0; }
.cards--three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.assessment__actions { margin: 0; }
.notice { padding: 10px 14px; border-radius: var(--radius); border: 1px solid; margin: 0 0 16px; }
.notice--ok { background: var(--pastellgron); border-color: var(--petrol); }
.notice--error { background: var(--pastellrosa); border-color: var(--oxid); }
.notice--code { background: var(--morkbeige); border-color: var(--korall); }
.notice .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.4rem; letter-spacing: 0.05em; user-select: all; }

.startpreview { list-style: decimal; margin: 0 0 12px; padding-left: 1.4em; display: grid; gap: 12px; }
.startpreview__item p { margin: 4px 0 0; }
.reco__role { font-size: 0.875rem; color: var(--muted); }
.tag--prio-hog { background: var(--pastellrosa); color: var(--oxid); border-color: var(--oxid); }
.tag--prio-medel { background: var(--morkbeige); color: var(--varm-svart); border-color: var(--korall); }
.tag--prio-lag { background: var(--bg-alt); color: var(--muted); border-color: var(--border); }
.tag--kind { background: var(--morkbeige); color: var(--text); border-color: var(--morkbeige); text-transform: capitalize; }

/* Koppling till målarkitekturen */
.relations { margin-top: 24px; }
.relations h3 { margin: 0 0 8px; }
.relations__list { list-style: none; margin: 0; padding: 0; }
.integration-ma { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.875rem; overflow-wrap: anywhere; }
.integration-ma p { margin: 0 0 8px; }
.integration-ma .relations__list li { margin-bottom: 6px; }
.integration-ma .relations__meta { font-size: inherit; }

/* Arkitekturkartan: tre gemensamma lager, följda av en separat lokal miljö. */
.foundation { overflow-wrap: anywhere; }
.foundation-map {
  margin: 28px 0 48px;
  padding: clamp(10px, 2vw, 18px);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: var(--bg-alt);
}
.foundation-map__layer {
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.foundation-map__layer--environment { background: var(--beige); }
.foundation-map__heading h3 { margin: 0 0 2px; font-size: clamp(1rem, 2vw, 1.2rem); }
.foundation-map__heading p { margin: 0 0 12px; color: var(--muted); font-size: 0.9rem; }
.foundation-map__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 19%); gap: 12px; }
.foundation-map__content--full { grid-template-columns: minmax(0, 1fr); }
.foundation-map__tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foundation-map__tiles li {
  display: grid;
  place-content: center;
  min-height: 64px;
  padding: 8px;
  border: 1px solid var(--ljusgron);
  border-radius: var(--radius);
  background: var(--pastellgron);
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.25;
}
.foundation-map__tiles a {
  display: grid;
  place-content: center;
  min-height: 100%;
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.foundation-map__tiles a:hover { color: var(--petrol); }
.foundation-map__tiles a:focus-visible { border-radius: calc(var(--radius) - 2px); outline-offset: 4px; }
.foundation-map__tiles--environment { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.foundation-map__tiles--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.foundation-map__tiles--catalogue { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.foundation-map__tiles span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.75rem; }
.foundation-map__questions { padding: 12px; border-radius: var(--radius); background: var(--pastellrosa); }
.foundation-map__questions h4 { margin: 0 0 6px; font-size: 0.875rem; }
.foundation-map__questions ul { margin: 0; padding-left: 18px; font-size: 0.8125rem; }
.foundation-map__arrow { margin: 2px 0; color: var(--petrol); text-align: center; font-size: 1.6rem; line-height: 1; }
.foundation-map__principle {
  margin: 12px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--ljusgron);
  border-radius: var(--radius);
  background: var(--pastellgron);
  color: var(--marin);
  text-align: center;
}
.foundation__details-title { margin-top: 0; }
.foundation__layer, .foundation__environment {
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--border);
  border-left: 5px solid var(--petrol);
  border-radius: var(--radius);
  background: var(--surface);
}
.foundation__environment { background: var(--beige); border: 2px dashed var(--oxid); }
.foundation h3 { margin: 0 0 8px; }
.foundation h4 { margin: 0 0 8px; font-size: 1rem; }
.foundation__subtitle { margin: 0 0 16px; color: var(--petrol); font-weight: 600; }
.foundation__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 24%); gap: 16px; }
.foundation__tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 8px; list-style: none; margin: 0; padding: 0;
}
.foundation__tiles li { padding: 12px; background: var(--pastellgron); border: 1px solid var(--ljusgron); border-radius: var(--radius); font-size: 0.9375rem; }
.foundation__tiles span { display: block; margin-top: 6px; font-size: 0.875rem; }
.foundation__questions { background: var(--beige); padding: 16px; border-radius: var(--radius); }
.foundation__questions ul { padding-left: 20px; margin: 0; font-size: 0.9375rem; }
.foundation__arrow { text-align: center; color: var(--petrol); font-size: 1.75rem; margin: 4px 0; }
.foundation__principle { margin: 24px 0 0; padding: 20px; background: var(--pastellgron); border-left: 5px solid var(--petrol); border-radius: var(--radius); }
.foundation__principle p:last-child { margin-bottom: 0; }
.foundation-application {
  margin-top: 32px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--ljusgron);
  border-left: 5px solid var(--petrol);
  border-radius: var(--radius);
  background: var(--surface);
}
.foundation-application h2 { margin-top: 0; }

/* Tillämpning av arkitekturkartan på Mina ärenden. */
.reference-status {
  max-width: 76ch;
  margin: 24px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--petrol);
  border-radius: var(--radius);
  background: var(--beige);
}
.reference-boundary { max-width: 80ch; border-left-color: var(--petrol); color: var(--text); }
.reference-logic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.reference-logic-grid section,
.reference-responsibilities section {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.reference-logic-grid h4,
.reference-responsibilities h3 { margin: 0 0 6px; }
.reference-logic-grid p,
.reference-responsibilities p { margin: 0; }
.reference-flow-group { margin-top: 32px; }
.reference-flow-label {
  display: inline-block;
  margin: 0 0 6px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--pastellgron);
  color: var(--petrol);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.reference-flow-group h3 { margin: 0 0 12px; }
.reference-flow-scroll {
  overflow-x: auto;
  padding: 4px 4px 14px;
  border-radius: var(--radius);
}
.reference-flow {
  display: flex;
  align-items: stretch;
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reference-flow li {
  position: relative;
  display: grid;
  place-content: center;
  width: 170px;
  min-height: 92px;
  margin-right: 38px;
  padding: 12px;
  border: 1px solid var(--ljusgron);
  border-radius: var(--radius);
  background: var(--pastellgron);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}
.reference-flow li:last-child { margin-right: 0; }
.reference-flow li:not(:last-child)::after {
  content: "→";
  position: absolute;
  left: calc(100% + 9px);
  top: 50%;
  width: 20px;
  color: var(--petrol);
  font-size: 1.5rem;
  line-height: 1;
  transform: translateY(-50%);
}
.reference-flow small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; }
.reference-flow--long li { width: 155px; }
.reference-catalogue {
  margin-top: 32px;
  padding: 18px 20px;
  border: 2px dashed var(--petrol);
  border-radius: var(--radius);
  background: var(--beige);
}
.reference-catalogue h3 { margin: 0 0 8px; }
.reference-catalogue p:last-child { margin-bottom: 0; }
.reference-example-table { min-width: 620px; }
.reference-responsibilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.reference-responsibilities section { border-top: 5px solid var(--petrol); }
.reference-open-questions { max-width: 82ch; padding-left: 1.5em; }
.reference-open-questions li { margin-bottom: 12px; }
.reference-links { max-width: 84ch; padding-left: 1.3em; }
.reference-links li { margin-bottom: 12px; }
@media (max-width: 700px) {
  .foundation-map__content { grid-template-columns: minmax(0, 1fr); }
  .foundation-map__tiles, .foundation-map__tiles--environment, .foundation-map__tiles--five, .foundation-map__tiles--catalogue { grid-template-columns: minmax(0, 1fr); }
  .foundation-map__tiles li { min-height: 0; text-align: left; place-content: initial; }
  .foundation-map__tiles a { place-content: initial; }
  .foundation__row { grid-template-columns: minmax(0, 1fr); }
  .reference-logic-grid, .reference-responsibilities { grid-template-columns: minmax(0, 1fr); }
  .reference-flow-scroll { overflow-x: visible; padding-inline: 0; }
  .reference-flow { flex-direction: column; min-width: 0; }
  .reference-flow li, .reference-flow--long li { width: 100%; min-height: 0; margin: 0 0 38px; text-align: left; place-content: initial; }
  .reference-flow li:last-child { margin-bottom: 0; }
  .reference-flow li:not(:last-child)::after { left: 50%; top: calc(100% + 8px); transform: translateX(-50%); content: "↓"; }
}
.relations__list li { margin-bottom: 10px; }
.relations__meta { display: block; color: var(--muted); font-size: 0.9375rem; }
.tag--rel-motsvarar { background: var(--pastellgron); color: var(--marin); border-color: var(--marin); }
.tag--rel-overlappar { background: var(--morkbeige); color: var(--varm-svart); border-color: var(--korall); }
.tag--rel-tillampar { background: var(--bg-alt); color: var(--muted); border-color: var(--border); }
.roles { margin: 0; padding: 0; display: grid; gap: 8px; }
.roles__row { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 12px; }
.roles dt { font-weight: 700; margin: 0; }
.roles dd { margin: 0; }
.support { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.support__desc { font-size: 0.9rem; color: var(--muted); }
.indicators { padding-left: 1.2em; display: grid; gap: 6px; }
.next-step { font-size: 1.125rem; font-weight: 600; max-width: 70ch; }

.quick-feedback { display: grid; gap: 10px; max-width: 640px; }
.quick-feedback fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; }
.field__label { font-weight: 600; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; }
.field { display: grid; gap: 4px; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field--wide { grid-column: 1 / -1; }
.field--actions { align-self: end; }
input[type="text"], input:not([type]), input[type="date"], select, textarea { font: inherit; padding: 8px 10px; border: 1px solid #8c8680; border-radius: 4px; background: #fff; width: 100%; box-sizing: border-box; }
textarea { resize: vertical; }

/* Handlingsplanen: namn, Vad ni gör, Klar när och fälten för status, ansvar och datum är tydligast.
   Roller, logg, stöd och sparstatus är sekundära och tonas ned. */
.plan-group__title { margin: 48px 0 8px; font-size: 1.375rem; line-height: 1.3; }
.plan-group__title a { color: inherit; }
.plan-group__meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 16px; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.plan-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
.plan-item--klar { border-left: 4px solid var(--petrol); }
.plan-item--pagar { border-left: 4px solid var(--korall); }
.plan-item--planerad { border-left: 4px solid var(--marin); }
.plan-item--foreslagen { border-left: 4px solid var(--border); }
.plan-item__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.plan-item__title { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.35; }
.plan-item__desc { margin: 0 0 8px; max-width: 75ch; color: var(--text); }
.plan-item__roles { margin: 0 0 4px; max-width: 75ch; color: var(--muted); font-size: 0.9375rem; }
.plan-item__roles strong { font-weight: 600; }
.plan-group__offer { margin: 0; }
.plan-item__fields {
  display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  margin-top: 16px; padding: 16px; background: var(--bg); border-radius: var(--radius);
}
.plan-item__fields label { display: grid; gap: 4px; font-size: 0.9375rem; font-weight: 600; }
.plan-item__fields select, .plan-item__fields input { font-weight: 400; min-height: 44px; }
.plan-item__note { grid-column: 1 / -1; }
.plan-item__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.plan-item__meta { font-size: 0.875rem; color: var(--muted); margin-left: auto; }
.plan-item__actions .btn--small { min-height: 40px; min-width: 40px; }
@media (max-width: 600px) {
  .plan-item { padding: 16px; }
  .plan-item__fields { padding: 12px; }
  .plan-item__meta { margin-left: 0; flex-basis: 100%; }
}
.plan-summary { margin-bottom: 20px; }
.plan-removed { margin-top: 24px; }
.plan-removed summary { cursor: pointer; }
.btn--small { padding: 6px 12px; font-size: 0.9rem; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; }
.inline { display: inline; }
.actions { margin: 16px 0 0; }
.pre { white-space: pre-wrap; }
.cap__link { margin-top: 8px; font-size: 0.9375rem; }
@media (max-width: 640px) { .roles__row { grid-template-columns: 1fr; gap: 2px; } }
@media print {
  .site-header, .site-footer, .plan-item__actions, .plan-item__fields select, .actions, .hero__lead, .hero__text, .section--alt form { display: none !important; }
  .plan-item { break-inside: avoid; }
  .table-wrap { overflow: visible; }
}
.capcard > .status { align-self: flex-start; }
.capcard .badge, .capcard .tag { white-space: normal; }

/* ---------- Teknisk dokumentation ---------- */
.doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.doccard { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 14px 18px; }
.doccard h3 { margin: 0 0 6px; }
.doccard p { margin: 0 0 6px; }
.doccard__meta { font-size: 0.875rem; color: var(--muted); }
.doc__meta { font-size: 0.9rem; color: var(--muted); margin: 0; }
.doc h2 { margin-top: 28px; }
.doc h2:first-child { margin-top: 0; }
.doc table { margin-bottom: 8px; }
.doc code, .note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--bg-alt); padding: 1px 5px; border-radius: 3px; word-break: break-all; }
.doc pre { background: var(--bg-alt); padding: 12px 16px; border-radius: 4px; overflow-x: auto; font-size: 0.9em; }
.doc pre code { background: none; padding: 0; word-break: normal; }
.doc .tabs { margin: 28px 0 0; gap: 0 28px; border-bottom: 1px solid var(--border); font-size: 1.0625rem; }
.doc .tabs a { padding: 8px 0; margin-bottom: -1px; border-bottom-width: 3px; }
.doc [data-tab-panel] > h2:first-child { margin-top: 24px; }
.wrap--swagger { max-width: var(--wrap); }
#swagger { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 0; margin-top: 12px; }
#swagger .swagger-ui .info { margin: 20px 0; }

/* ---------- GSIM:s sex arkitekturperspektiv ---------- */
.perspective-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.perspective-card {
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-left: 6px solid var(--petrol);
  border-radius: var(--radius);
  color: var(--text);
}
.perspective-card h3 { margin: 0 0 10px; font-size: 1.45rem; color: var(--varm-svart); }
.perspective-card p { margin: 0; }
.perspective-card__question { font-weight: 700; font-size: 1.0625rem; }
.perspective-card--strategy { background: var(--perspective-strategy); }
.perspective-card--business { background: var(--perspective-business); }
.perspective-card--information { background: var(--perspective-information); }
.perspective-card--technology { background: var(--perspective-technology); }
.perspective-card--realisation { background: var(--perspective-realisation); }
.perspective-card--security { background: var(--perspective-security); }
.perspective-summary { max-width: 78ch; margin: 24px 0 0; font-weight: 600; }
.perspective-concepts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.perspective-concepts div {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.perspective-concepts dt { margin-bottom: 6px; color: var(--petrol); font-size: 1.2rem; font-weight: 700; }
.perspective-concepts dd { margin: 0; }
.perspective-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.perspective-detail {
  scroll-margin-top: 96px;
  padding: 20px;
  border: 1px solid var(--border);
  border-top: 5px solid var(--petrol);
  border-radius: var(--radius);
  background: var(--surface);
}
.perspective-detail h3 { margin: 0 0 8px; color: var(--marin); }
.perspective-detail p { margin: 0 0 12px; }
.perspective-detail__links { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.perspective-detail__pending { color: var(--muted); font-style: italic; }
.perspective-detail--strategy { background: var(--perspective-strategy); }
.perspective-detail--business { background: var(--perspective-business); }
.perspective-detail--information { background: var(--perspective-information); }
.perspective-detail--technology { background: var(--perspective-technology); }
.perspective-detail--realisation { background: var(--perspective-realisation); }
.perspective-detail--security { background: var(--perspective-security); }
@media (max-width: 700px) {
  .perspective-grid, .perspective-concepts, .perspective-details { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Kommunyta (steg 2) ---------- */
.muted { color: var(--muted); font-size: 0.9375rem; }
.cols { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.card--next { border-top: 4px solid var(--brand); }
.kommun-status td, .kommun-status th { vertical-align: middle; }
.kommun-status a { font-weight: 600; }
.open-list, .prio-list { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; }
.open-item__meta { display: block; font-size: 0.875rem; color: var(--muted); margin-top: 2px; }
.open-item--forsenad > a strong { color: var(--oxid); }
.owners { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.owners li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
.checklist-progress { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist-progress li { display: grid; gap: 4px; }
.checklist-progress meter { width: 100%; height: 10px; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 80ch; }
.feed li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.feed__time { display: inline-block; min-width: 9.5em; color: var(--muted); font-size: 0.875rem; }
.status--blockerad, .status--forsenad { background: var(--pastellrosa); border-color: var(--oxid); color: var(--oxid); }
.plan-item--blockerad { border-left: 4px solid var(--oxid); }
.plan-item--forsenad .plan-item__title::after { content: " ⚠"; color: var(--oxid); }
.summary__count--blockerad { border-left-color: var(--oxid); }
.summary__count--klar { border-left-color: var(--petrol); }
.summary__count--pagar { border-left-color: var(--korall); }
.summary__count--planerad { border-left-color: var(--marin); }
.plan-log, .plan-support { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.9375rem; }
.plan-support + .plan-log { margin-top: 0; }
.plan-support summary, .plan-log summary { cursor: pointer; font-weight: 600; color: var(--brand); padding: 4px 0; }
.plan-support summary:hover, .plan-log summary:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.plan-support .support { margin-top: 8px; }
.plan-support .checklist { margin-top: 12px; }
.plan-deepening { margin: 16px 0 0; }
.plan-deepening summary { cursor: pointer; font-weight: 600; color: var(--brand); padding: 6px 0; }
.plan-deepening ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.plan-deepening__item { padding: 14px 18px; border: 1px dashed #c9bfae; border-radius: var(--radius); background: var(--surface); }
.plan-deepening__item .plan-item__desc { margin-top: 4px; }
.plan-log__list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.plan-log__list li { padding-left: 12px; border-left: 3px solid var(--border); }
.plan-log__meta { font-size: 0.875rem; color: var(--muted); }
.plan-log__empty { margin: 8px 0; color: var(--muted); }
.plan-log__form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 8px; }
.plan-log__form label { grid-column: 1 / -1; font-size: 0.875rem; font-weight: 600; }

.checklist { margin-top: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.checklist h3 { margin: 0 0 6px; }
.checklist__intro { margin: 0 0 10px; color: var(--muted); }
.checklist__progress { margin: 0 0 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.checklist__form { display: grid; gap: 14px; }
.checklist__group { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.checklist__group legend { font-weight: 700; margin-bottom: 4px; }
.checklist__item { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 6px 4px; border-radius: 4px; cursor: pointer; }
.checklist__item:hover { background: var(--bg-alt); }
.checklist__item input { margin: 0; }
.checklist__item--done .checklist__text { color: var(--muted); text-decoration: line-through; }
.checklist__meta { grid-column: 2; font-size: 0.8125rem; color: var(--muted); }
.checklist__meta:empty { display: none; }

.roles-field { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; display: grid; gap: 6px; }
.roles-field legend { font-weight: 600; padding: 0 6px; }
.check { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; font-weight: 400; }
.check .muted { grid-column: 2; font-size: 0.875rem; }
.check input { margin: 0; }
tr.me th { background: var(--pastellrosa); }
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form input { width: auto; min-width: 12em; }
.inline-form label { font-size: 0.875rem; display: grid; gap: 4px; }
.inline-form select { width: auto; }
.login-access { display: grid; gap: 14px; justify-items: start; margin-bottom: 12px; }
.login-access fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin: 0; display: grid; gap: 8px; }
.login-access legend { font-weight: 600; padding: 0 6px; }
.login-access label { display: flex; gap: 8px; align-items: baseline; font-weight: 400; }
.login-access__groups { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-left: 26px; }
.nowrap { white-space: nowrap; }
.danger { margin-top: 8px; font-size: 0.875rem; }
.danger summary { cursor: pointer; color: var(--oxid); padding-block: 2px; }
.danger form { margin-top: 6px; }
.factory-reset { max-width: 75ch; padding: 14px 18px; background: var(--surface); border: 2px solid var(--oxid); border-radius: var(--radius); }
.factory-reset p, .factory-reset ul { margin: 0 0 8px; }
.factory-reset .danger { font-size: 1rem; }
.factory-reset .danger summary { font-weight: 700; }
.factory-reset__btn { background: var(--oxid); border-color: var(--oxid); }
.report__summary { padding-left: 1.2em; }
.report__cap { margin-top: 24px; }
.report__cap h3 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.report__qa td:first-child { width: 60%; }
.report__plan { margin-top: 10px; }
.report__members { padding-left: 1.2em; }
@media print {
  .report .section, .report { padding-block: 0; }
  .report__cap { break-inside: avoid; }
  .actions { display: none !important; }
  .hero h1 { font-size: 20pt; }
}

/* ---------- Ingångar och roller (steg 3) ---------- */
.start-form { display: grid; gap: 16px; max-width: 760px; }
.sitlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.sitcard { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 16px 18px; }
.sitcard--mine { border-left-color: var(--brand); }
.sitcard h2 { margin: 0 0 8px; font-size: 1.25rem; padding: 0; border: 0; }
.sitcard p { margin: 0 0 8px; }
.sitcard__meta { font-size: 0.875rem; color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 80ch; }
.step { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
.step--klar { border-left-color: var(--petrol); }
.step--pagar { border-left-color: var(--korall); }
.step--ej { border-left-color: var(--accent); }
.step__head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.step__head h2 { margin: 0; font-size: 1.25rem; padding: 0; border: 0; flex: 1 1 auto; }
.step__nr { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; }
.step p { margin: 0 0 8px; }
.step__cap, .step__tpl { font-size: 0.9375rem; }
.step__acts { margin: 0 0 8px; padding-left: 1.4em; display: grid; gap: 6px; font-size: 0.9375rem; }
.status--step-klar { background: var(--pastellgron); border-color: var(--petrol); color: var(--petrol); }
.status--step-pagar { background: var(--morkbeige); border-color: var(--korall); color: var(--varm-svart); }
.status--step-ej { background: var(--bg-alt); color: var(--muted); }
.tag--mine { background: var(--accent-light); color: var(--brand-dark); border-color: var(--accent); }
.rolebar { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.9375rem; }
.rolebar__label { font-weight: 600; }
.rolebar a { text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; background: var(--surface); color: var(--text); }
.rolebar a:hover { border-color: var(--accent); }
.rolebar a[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.rolebar__intro { margin: 10px 0 0; max-width: 70ch; color: var(--muted); }
.section--fold { padding-block: 12px; }
.section--fold > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; list-style: none; }
.section--fold > summary::-webkit-details-marker { display: none; }
.section--fold > summary h2 { margin: 0; font-size: 1.25rem; color: var(--muted); }
.section--fold > summary .muted { text-decoration: underline; }
.section--fold[open] > summary h2 { color: var(--text); }
.section--fold > .wrap { padding-top: 16px; }
.roles__row--mine dt::after { content: " ★"; color: var(--brand); }

/* ---------- Stegvis genomförandestöd: process, nuläge, fokus och inriktning ---------- */
.process { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.process__step { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.process__step--current { border-top-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.process__step--klar { border-top-color: var(--petrol); }
.process__step--pagar { border-top-color: var(--korall); }
.process__step > .status { align-self: flex-start; }
.process__link { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: var(--text); }
a.process__link:hover strong { text-decoration: underline; }
.process__nr { flex: 0 0 auto; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; }
.process__body { display: grid; gap: 4px; }
.process__text { font-size: 0.9375rem; color: var(--muted); font-weight: 400; }
.process--compact .process__step { padding: 10px 12px; }
.process__loop { margin: 16px 0 0; padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: var(--radius); max-width: 80ch; }

.areas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); margin-bottom: 24px; }
.area { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.area h3 { margin: 0 0 6px; }
.area > p { margin: 0 0 10px; color: var(--muted); font-size: 0.9375rem; }
.area__caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.area__caps li { display: flex; gap: 6px 10px; align-items: flex-start; }
.area__caps .cap__nr { flex: 0 0 auto; }

/* Steg 1: primär användarresa och process. */
.journey { display: grid; gap: 20px 28px; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); align-items: start; }
.journey__field { display: grid; gap: 6px; }
.journey__field > label { font-weight: 700; }
.journey__hint, .journey__count, .journey__chosen { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.journey__chosen { color: var(--text); font-weight: 600; }
.journey__search { font: inherit; padding: 8px 10px; border: 1px solid #8c8680; border-radius: 4px; background: #fff; width: 100%; box-sizing: border-box; }
.journey--questions { margin-top: 20px; }
.journey select[size] { padding: 4px; }
.journey select[size] optgroup { font-style: normal; font-weight: 700; color: var(--petrol); }
.journey select[size] option { font-weight: 400; color: var(--text); padding: 4px 6px; white-space: normal; }

/* Förmågor i fokus på Välj fokus för en process, utan inbördes rangordning. */
.startpack__context { margin: 0 0 20px; display: grid; gap: 8px; max-width: 80ch; }
.startpack__context > div { display: grid; grid-template-columns: minmax(0, 14rem) 1fr; gap: 4px 16px; }
.startpack__context dt { color: var(--muted); font-size: 0.9375rem; }
.startpack__context dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.startpack { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.startpack__item { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; min-width: 0; }
.startpack__body { min-width: 0; }
.startpack__body h4 { margin: 0 0 6px; font-size: 1.125rem; }
.startpack__rating { margin: 0 0 8px; font-size: 0.9375rem; color: var(--muted); }
.startpack__rating strong { color: var(--text); }
.startpack__body p { margin: 0 0 6px; }
.startpack__plan { margin-left: 12px; font-size: 0.9375rem; }
@media (max-width: 560px) { .startpack__context > div { grid-template-columns: 1fr; } }

/* Nulägesbild och Välj fokus för en process. */
.subnav--section { padding-top: 4px; }
.subnav--section a[aria-current="page"], .tabs a[aria-selected="true"] { border-bottom-color: var(--brand); color: var(--brand-dark); }
.tabs a[aria-selected="false"] { border-bottom-color: transparent; }
.stage { margin: 28px 0 8px; color: var(--petrol); }
.cards--fit { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.cards--fit .card h2 { margin: 0 0 10px; font-size: 1.375rem; }
.journey--questions + .assessment__actions, .assess + .assessment__actions { margin-top: 16px; }
#status { padding-bottom: 8px; }
.baseline { margin: 0 0 16px; max-width: 80ch; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--brand); border-radius: var(--radius); padding: 16px 18px; }
.baseline p { margin: 0 0 8px; }
.baseline__progress { font-size: 1.125rem; }
.baseline__title { margin: 0 0 8px; font-size: 1.5rem; color: var(--petrol); }
.baseline__bar { display: block; width: 100%; height: 10px; margin: 4px 0 12px; accent-color: var(--petrol); }
.baseline__action { margin: 12px 0 0 !important; }
.potential { margin: 12px 0 4px; padding: 12px 14px; background: var(--pastellgron); border-left: 4px solid var(--petrol); border-radius: 4px; }
.potential__title { margin: 0 0 6px; font-size: 1.125rem; color: var(--petrol); }
.potential__parts { margin: 8px 0 0; display: grid; gap: 4px; font-size: 0.9375rem; }
.potential__parts > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 10px; padding-top: 4px; border-top: 1px solid var(--ljusgron); }
.potential__parts dt { font-weight: 700; }
.potential__delivery { font-size: 0.9375rem; }
.potential__part { margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--ljusgron); }
.potential__subtitle { margin: 0 0 4px; font-size: 1rem; color: var(--petrol); }
.potential__part > p { margin: 0 0 6px; font-size: 0.9375rem; }
.potential__part > p.potential__explain { color: var(--muted); }
.potential__parts dd { margin: 0; }
@media (max-width: 600px) { .potential__parts > div { grid-template-columns: 1fr; gap: 0; } }
.area__count { margin-left: 8px; font-size: 0.9375rem; font-weight: 400; color: var(--muted); }
.card--done { border-top: 4px solid var(--petrol); }
.guide-back { max-width: 80ch; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--brand); border-radius: var(--radius); padding: 18px 20px; }
.guide-back h2 { margin: 0 0 8px; font-size: 1.375rem; }
.guide-back p { margin: 0 0 10px; }
.baseline-line { margin: 0; max-width: 80ch; }
.field-nr { display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: 0.875rem; font-weight: 700; margin-right: 6px; vertical-align: 2px; }
.explain { padding: 12px 16px; border-left: 4px solid var(--petrol); background: var(--surface); border-radius: var(--radius); font-weight: 400; }
.startpack__early > summary { cursor: pointer; font-weight: 600; color: var(--brand); margin-bottom: 12px; }
.section .stage-title--next { margin-top: 36px; }
.stage-title { margin: 0 0 12px; }
@media print { [data-tab-panel][hidden] { display: block !important; } }

/* Handlingsplanen: flödet som ledde fram till planen, och tomt läge. */
.flowpath { background: var(--surface); border-bottom: 1px solid var(--border); padding-block: 10px; }
.flowpath__title { margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8125rem; font-weight: 700; color: var(--petrol); }
.flowpath__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); counter-reset: flowpath; }
.flowpath__step { counter-increment: flowpath; position: relative; padding-left: 28px; }
.flowpath__step::before { content: counter(flowpath); position: absolute; left: 0; top: 0; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: var(--petrol); color: #fff; font-size: 0.75rem; font-weight: 700; }
.flowpath__label { display: block; color: var(--muted); font-size: 0.875rem; }
.flowpath__value { font-weight: 600; overflow-wrap: anywhere; }
.flowpath__link { font-size: 0.875rem; white-space: nowrap; }
.empty-state { max-width: 70ch; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--brand); border-radius: var(--radius); padding: 24px; }
.empty-state h2 { margin-top: 0; }
@media print { .flowpath__link { display: none; } }

/* Vald användarresa och process högst upp på stöd och kommunsidan. */
.focusarea { background: var(--surface); border-bottom: 1px solid var(--border); padding-block: 14px; }
.focusarea__inner { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; }
.focusarea__title { margin: 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8125rem; font-weight: 700; color: var(--petrol); }
.focusarea__list { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; flex: 1 1 520px; }
.focusarea__row { display: flex; gap: 8px; align-items: baseline; }
.focusarea__row dt { color: var(--muted); font-size: 0.9375rem; white-space: nowrap; }
.focusarea__row dd { margin: 0; font-weight: 600; }
.focusarea__area { font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.focusarea__missing { margin: 0; flex: 1 1 520px; }
.focusarea__link { margin: 0; white-space: nowrap; }
@media print { .focusarea__link { display: none; } }

.sitchoice { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.sitoption { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; }
.sitoption:hover { border-left-color: var(--accent); }
.sitoption--chosen { border-left-color: var(--brand); background: var(--accent-light); }
.sitoption input { margin-top: 4px; }
.sitoption__body { display: grid; gap: 4px; }
.sitoption__body > span { font-size: 0.9375rem; }
.sitoption__meta { color: var(--muted); font-size: 0.875rem !important; }

.howtos { display: grid; gap: 8px; margin: 0 0 20px; }
.howtos[hidden] { display: none; }
.howto { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; }
.howto summary { cursor: pointer; font-weight: 600; }
.howto__body { padding-top: 12px; }
.assess__name { color: var(--text); }

.suggest { margin: 20px 0; }
.suggest h3 { margin: 0 0 8px; }
.suggest__list { margin: 0 0 12px; padding-left: 1.4em; display: grid; gap: 8px; }
.focus-field { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px; display: grid; gap: 4px; background: var(--surface); }
.focus-field legend { font-weight: 700; padding: 0 6px; }
.focus-option { padding: 6px 4px; border-radius: 4px; }
.focus-option:hover { background: var(--bg-alt); }
.focus-option--on { background: var(--accent-light); }

.focuslist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.focuscard { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--brand); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.focuscard p { margin: 0; }
.focuscard__head { display: flex; gap: 10px; align-items: flex-start; }
.focuscard__head h3 { margin: 0; font-size: 1.125rem; }
.focuscard__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.focuscard__actions { margin-top: auto !important; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pathcard { margin-bottom: 24px; max-width: 80ch; }
.focusbar { margin-top: 12px; }
.others > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; list-style: none; }
.others > summary::-webkit-details-marker { display: none; }
.others > summary h2 { margin: 0; }
.others > summary .muted { text-decoration: underline; }
.others[open] > summary { margin-bottom: 16px; }
.others[open] > summary .muted { display: none; }

.direction__caps { padding-left: 1.2em; display: grid; gap: 6px; }
.direction__form { display: grid; gap: 12px; align-content: start; }
.direction__form p { margin: 0; }
.direction--single .direction__form { max-width: 640px; }
.plan-section__title { margin-top: 8px; }
.plan-other { margin-top: 28px; }
.plan-other > summary { cursor: pointer; font-weight: 700; font-size: 1.125rem; }
@media print {
  .process { display: none !important; }
  .plan-other { display: block; }
}

/* ---------- Arkitekturbilder i den tekniska dokumentationen (inline-SVG, stylas via klasser) ---------- */
.doc__toc { margin: 0 0 8px; }
.dia-figure { margin: 20px 0 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.dia-figure figcaption { margin-top: 10px; font-size: 0.9375rem; color: var(--muted); max-width: 80ch; }
.dia { display: block; width: 100%; height: auto; font-family: var(--font); }
.dia-figure--scroll { overflow-x: auto; }
.dia-figure--scroll > a { display: block; }
.dia-pair { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.dia-pair h3 { margin: 0 0 8px; font-size: 1.0625rem; }
.dia__box { fill: var(--beige); stroke: var(--varm-svart); stroke-width: 1.2; }
.dia__box--hub { fill: var(--petrol); stroke: var(--petrol); }
.dia__box--own { fill: var(--ljusrosa); stroke: var(--oxid); stroke-width: 1.6; }
.dia__box--ext { fill: var(--pastellgron); stroke-dasharray: 5 3; }
.dia__frame { fill: none; stroke: var(--oxid); stroke-width: 2; }
.dia__port { fill: var(--vit); stroke: var(--varm-svart); stroke-width: 2; }
.dia__label { font-size: 15px; font-weight: 700; fill: var(--varm-svart); }
.dia__small { font-size: 12.5px; fill: var(--muted); }
.dia__label--inv, .dia__small--inv { fill: var(--vit); }
.dia__label--sm { font-size: 13.5px; }
.dia__text { font-size: 13.5px; fill: var(--varm-svart); }
.dia__text--code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.dia-scroll { overflow-x: auto; }
.dia-scroll .dia--wide { min-width: 560px; }
.dia__col { font-size: 13px; font-weight: 700; fill: var(--petrol); text-transform: uppercase; letter-spacing: 0.06em; }
.dia__flow { stroke: var(--varm-svart); stroke-width: 1.5; fill: none; }
.dia__flow--live { stroke-dasharray: 6 4; }
.dia__flow--sync { stroke-dasharray: 2 4; stroke-linecap: round; stroke-width: 2; }
.dia__head { fill: var(--varm-svart); }
@media print { .dia-figure { break-inside: avoid; } }
@media (max-width: 700px) {
  .dia-figure--scroll > a { min-width: 900px; }
}
.dia__life { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
.model-definitions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.model-definitions div { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.model-definitions .model-definition--business { background: var(--perspective-business); }
.model-definitions .model-definition--information { background: var(--perspective-information); }
.model-definitions .model-definition--technology { background: var(--perspective-technology); }
.model-definitions dt { margin-bottom: 4px; color: var(--petrol); font-weight: 700; }
.model-definitions dd { margin: 0; }
.model-text-alt { margin: 20px 0; padding: 16px 20px; border-left: 5px solid var(--petrol); border-radius: var(--radius); background: var(--pastellgron); }
.model-text-alt h3 { margin: 0 0 8px; }
.model-text-alt p, .model-text-alt ul { margin-top: 0; }
.model-text-alt li + li { margin-top: 6px; }
.model-principles, .model-questions { max-width: 80ch; display: grid; gap: 10px; }
@media (max-width: 700px) { .model-definitions { grid-template-columns: minmax(0, 1fr); } }

/* Förmågornas informationsrader (Ordning, GSIM:s roll), faktaruta och fullständig beskrivning. */
.capinfo { margin: 0 0 4px; font-size: 0.9375rem; color: var(--text); }
.capinfo__label { color: var(--muted); font-weight: 600; }
.capinfo__text { margin: 0 0 12px; max-width: 75ch; }
span.capinfo { display: block; margin: 4px 0 0; font-size: 0.875rem; }
.captags { margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.area__cap { display: block; flex: 1; min-width: 0; padding-top: 3px; }
.assess__capbody { display: flex; flex-direction: column; gap: 4px; }
.assess__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.assess__meta span.capinfo { margin: 0; }
.hero__capinfo { margin: 8px 0 12px; }
.infobox { margin: 0 0 24px; max-width: 80ch; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--petrol); border-radius: var(--radius); }
.infobox h3 { margin: 0 0 8px; }
.infobox p { margin: 0; }
.infobox h2 { margin: 0 0 8px; font-size: 1.25rem; }
.infobox p + p, .infobox ol + p { margin-top: 8px; }
.infobox ol { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.plan-why p + ol, .plan-why ol + p { margin-top: 8px; }
.plan-why ol { margin: 8px 0 0; padding-left: 1.4em; display: grid; gap: 4px; }
.capdetail { display: grid; gap: 18px; margin: 16px 0 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.capdetail__part > :last-child { margin-bottom: 0; }
.capdetail__title, .capdetail .relations h5 { margin: 0 0 6px; font-size: 1rem; color: var(--petrol); }
.capdetail p { max-width: 75ch; }
.capdetail .relations { margin: 0; padding: 0; border: 0; background: none; }
.startpack__process { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.startpack__process .startpack__label { margin: 12px 0 6px; }

/* ---------- Huvudflödet: introduktion, nulägesbild, process och handlingsplan ---------- */
.fordjupning { padding-bottom: 0; border-top: 1px solid var(--border); }
.fordjupning .muted { margin: 0; max-width: 70ch; }
.assess-help { max-width: none; }
.assess-help h2 { margin: 0 0 8px; font-size: 1.25rem; }
.assess-parts tbody th { white-space: nowrap; }
.howto-table { margin-top: 4px; }
.howto-table tbody th { width: 34%; }
.worksteps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.worksteps a { font-weight: 600; text-decoration: none; color: var(--text); }
.worksteps a:hover { text-decoration: underline; }
.hero__lead + .hero__lead { margin-top: 12px; }

/* Välj fokus för en process: stegmarkering, sammanfattning av steg 1 och nästa handling. */
.worksteps__step--kommande a { color: var(--muted); font-weight: 400; }
.worksteps__step--aktiv a { text-decoration: underline; text-underline-offset: 4px; }
.worksteps__done { font-size: 0.8125rem; font-weight: 700; color: var(--petrol); }
.step__summary { margin-bottom: 8px; }
.step__edit > summary { cursor: pointer; font-weight: 600; color: var(--brand); width: fit-content; }
.step__edit[open] > summary { margin-bottom: 16px; }
.process-next { margin-top: 28px; }

/* Steg 2: kompakta förmågekort med namn, etiketter, nuläge och valet. Fördjupningen finns på förmågesidan. */
.startpack__count { margin: 0 0 12px; font-weight: 600; }
.startpack__count + p { margin: 0 0 16px; }
.startpack__choice { margin: 12px 0 0; }
.startpack__more { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.startpack__more > summary { cursor: pointer; font-weight: 600; color: var(--brand); width: fit-content; }
.startpack__more[open] > summary { margin-bottom: 12px; }
.startpack__more[open] .startpack__show, .startpack__more:not([open]) .startpack__hide { display: none; }
.startpack__more .startpack__label { margin: 4px 0 6px; font-size: 1rem; color: var(--petrol); }
.startpack__more .startpack__question { max-width: 75ch; }
.startpack { gap: 12px; }
.startpack__item { padding: 16px 20px; }

/* Trappa: teknisk mognadsgrad (/integrationsarkitekturer). Listan är i ordning nerifrån och upp
   och vänds visuellt med column-reverse; varje steg flyttas ett trappsteg åt höger. */
.archstair { --rise: clamp(12px, 6vw, 72px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
.archstair__axis {
  margin: 0; writing-mode: vertical-rl; transform: rotate(180deg);
  text-align: right;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--petrol);
  border-left: 3px solid var(--petrol); padding-left: 6px; position: relative;
}
.archstair__axis::after {
  content: ""; position: absolute; left: -9px; bottom: -2px;
  border: 7px solid transparent; border-top: 10px solid var(--petrol); border-bottom: 0;
}
.archstair__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; }
.archstair__step {
  display: flex; gap: 16px; align-items: flex-start;
  margin-left: calc(var(--rise) * var(--n, 0));
  padding: 20px 24px;
  background: var(--surface);
  border-top: 6px solid var(--step);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}
.archstair__step:first-child { border-bottom: 1px solid var(--border); }
.archstair__step--1 { --n: 0; --step: var(--morkbeige); --step-text: var(--varm-svart); }
.archstair__step--2 { --n: 1; --step: var(--ljusgron); --step-text: var(--varm-svart); }
.archstair__step--3 { --n: 2; --step: var(--petrol); --step-text: var(--vit); }
.archstair__step--4 { --n: 3; --step: var(--marin); --step-text: var(--vit); }
.archstair__nr {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--step); color: var(--step-text);
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
}
.archstair__body { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.archstair__body h3 { margin: 4px 0 8px; font-size: 1.25rem; line-height: 1.25; color: var(--marin); }
.archstair__body p { margin: 0 0 8px; max-width: 70ch; }
.archstair__body p:last-child { margin-bottom: 0; }
.archstair__ex { font-size: 0.9375rem; color: var(--muted); }
.archstair__lead { margin: 0 0 24px; max-width: 70ch; }
.principles__title { margin: 16px 0 8px; font-size: 1rem; color: var(--petrol); }
.principles { margin: 0; display: grid; gap: 6px; font-size: 0.9375rem; line-height: 1.5; }
.principles__row { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 12px; padding-top: 6px; border-top: 1px solid var(--border); }
.principles dt { margin: 0; font-weight: 700; }
.principles dd { margin: 0; }
.level {
  display: inline-block; min-width: 4.25rem; margin-right: 4px; padding: 0 8px; border-radius: 4px;
  border: 1.5px solid; text-align: center; font-size: 0.8125rem; font-weight: 700; line-height: 1.5;
}
.level--god { background: var(--pastellgron); color: var(--petrol); border-color: var(--petrol); }
.level--delvis { background: var(--beige); color: var(--varm-svart); border-color: var(--morkbeige); }
.level--svag { background: var(--pastellrosa); color: var(--oxid); border-color: var(--oxid); }
@media (max-width: 600px) {
  .archstair { --rise: 10px; gap: 8px; }
  .archstair__step { flex-direction: column; padding: 14px; gap: 6px; }
  .archstair__nr { width: 2rem; height: 2rem; font-size: 1rem; }
  .principles__row { grid-template-columns: 1fr; gap: 2px; }
}
@media print {
  .archstair__steps { flex-direction: column; }
  .archstair__step { break-inside: avoid; margin-left: 0; border: 1px solid var(--border); border-top: 6px solid var(--step); }
}

/* Självskattning (/integrationsarkitekturer): svaren tänder ett steg i trappan med .is-match. */
.sa { display: grid; gap: 12px; }
.sa-q { margin: 0; min-width: 0; padding: 14px 18px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.sa-q legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; font-weight: 700; line-height: 1.4; }
.sa-q legend + * { clear: both; }
.sa-q__nr { color: var(--petrol); }
.sa-q__topic {
  display: inline-block; margin: 0 6px 2px 2px; padding: 0 8px; border-radius: 4px; background: var(--pastellgron);
  color: var(--petrol); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px;
}
.sa-q__opt { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; font-size: 0.9375rem; cursor: pointer; }
.sa-q__opt input { margin-top: 0.3em; flex: 0 0 auto; accent-color: var(--petrol); }
.sa-q:has(input:checked) { border-color: var(--petrol); }
.sa-q--lead { border: 2px solid var(--petrol); border-left-width: 8px; }
.sa-q--lead .sa-q__topic { background: var(--petrol); color: var(--vit); }
.sa__result { padding: 14px 18px; background: var(--surface); border: 1.5px solid var(--petrol); border-radius: var(--radius); }
.sa__result p { margin: 0 0 8px; }
.sa__result p:last-child { margin-bottom: 0; }
.sa__progress { font-weight: 600; }
.sa__outcome { font-size: 1.0625rem; font-weight: 700; color: var(--marin); }
.sa__scale { margin: 4px 0 12px; max-width: 640px; }
.sa__track {
  position: relative; height: 14px; border-radius: 7px;
  background: linear-gradient(to right, var(--morkbeige) 0 25%, var(--ljusgron) 25% 50%, var(--petrol) 50% 75%, var(--marin) 75% 100%);
}
.sa__marker {
  position: absolute; top: -5px; width: 6px; height: 24px; margin-left: -3px; border-radius: 3px;
  background: var(--varm-svart); box-shadow: 0 0 0 2px var(--ljusgul);
}
.sa__bands { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 6px; font-size: 0.8125rem; color: var(--muted); }
.sa__band { padding: 2px 4px; border-radius: 4px; text-align: center; }
.sa__band small { display: block; font-size: 0.75rem; }
.sa__band.is-match { background: var(--ljusgul); color: var(--varm-svart); }
.sa__band.is-target { outline: 2px dashed var(--varm-svart); outline-offset: -2px; color: var(--varm-svart); }
.sa__band.is-target small::after { content: " · troligt mål"; }
.sa__caps { margin: 12px 0; }
.sa__caps h3, .sa__caps h4 { margin: 0 0 6px; font-size: 1rem; color: var(--petrol); }
/* Helhetsbedömning i nulägesbilden (/nulage#tekniska-forutsattningar): följsamhet per styrande princip. */
.techresult { margin: 0 0 20px; padding: 16px 20px; background: var(--surface); border: 1.5px solid var(--petrol); border-radius: var(--radius); }
.techresult h3 { margin: 0 0 6px; font-size: 1.25rem; }
.techresult > p { margin: 0 0 10px; max-width: 75ch; }
.techresult__principles { margin: 0 0 14px; }
/* Strategins påverkan ligger före principerna och går ut till rutans kant, som tabellen. */
.techresult > p.sa__forecast { max-width: none; margin: 0 0 14px; }
.sa__how { margin: 0 0 14px; }
.sa__how-rules { margin: 4px 0 12px; padding-left: 1.4em; display: grid; gap: 4px; }
.sa__how-table caption { text-align: left; font-weight: 700; padding: 0 0 6px; }
.sa__how-table { min-width: 860px; }
.sa__how-table td:nth-child(4), .sa__how-table td:nth-child(5), .sa__how-table td:last-child { white-space: nowrap; }
.sa__how-table td, .sa__how-table th { font-size: 0.875rem; }
.sa__caps-intro { margin: 0 0 8px; max-width: 75ch; }
.sa__caps ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sa__caps li { padding-left: 12px; border-left: 3px solid var(--border); }
.sa__caps a { font-weight: 700; }
.sa__caps-why { display: block; font-size: 0.9375rem; color: var(--muted); }
.archcap { margin: 20px 0; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-width: 80ch; }
.archcap__title { margin: 0 0 6px; font-size: 1.125rem; color: var(--petrol); }
.archcap > p { margin: 0 0 10px; }
.archcap__steps { margin: 0; display: grid; gap: 8px; }
.archcap__row { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.archcap__row dt { margin: 0; font-weight: 700; }
.archcap__row dd { margin: 0; }
.archcap__nr {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: 4px; border-radius: 50%;
  font-size: 0.8125rem; background: var(--step); color: var(--step-text);
}
.archcap__row--1 { --step: var(--morkbeige); --step-text: var(--varm-svart); }
.archcap__row--2 { --step: var(--ljusgron); --step-text: var(--varm-svart); }
.archcap__row--3 { --step: var(--petrol); --step-text: var(--vit); }
.archcap__row--4 { --step: var(--marin); --step-text: var(--vit); }
@media (max-width: 600px) { .archcap__row { grid-template-columns: 1fr; gap: 2px; } }
.sa__forecast { padding: 8px 12px; border-left: 4px solid var(--petrol); background: var(--pastellgron); max-width: 75ch; }
.sa__warning { max-width: 75ch; border-left-width: 4px; }
.sa__warning p { margin: 0; }
.sa__warning p + p { margin-top: 4px; }
.techresult > .sa__warning { max-width: none; margin: 0 0 14px; }
.archstair__step { transition: opacity 0.3s, box-shadow 0.3s; }
.archstair__step.is-match { position: relative; z-index: 1; border: 3px solid var(--step); border-top-width: 8px; box-shadow: 0 0 0 4px var(--ljusgul), 0 6px 18px rgba(38, 36, 34, 0.18); }
.archstair__step.is-match .archstair__body h3::after {
  content: "Ert steg enligt självskattningen"; display: block; width: fit-content; margin-top: 6px; padding: 1px 10px; border-radius: 999px;
  background: var(--ljusgul); color: var(--varm-svart); font-size: 0.8125rem; font-weight: 700;
}
.archstair__step.is-dim { opacity: 0.55; }
@media (max-width: 600px) { .sa-q { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .archstair__step { transition: none; } }

/* Processbeskrivningar (/processbeskrivningar och undersidorna). Kommunens steg är marinblå och räddningstjänstens
   oxidröda med kraftig ram; övriga aktörer är dämpade så att kontakterna i fokus syns först. */
.pm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pm-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--muted);
}
.pm-badge--kommun { background: var(--marin); border-color: var(--marin); color: #fff; }
.pm-badge--raddning { background: var(--oxid); border-color: var(--oxid); color: #fff; }
.pm-badge--foretagare { background: var(--surface); border-color: var(--varm-svart); color: var(--varm-svart); }
.pm-badge--remiss { background: var(--ljusgul); border-color: var(--varm-svart); color: var(--varm-svart); font-weight: 600; }
.pm-chip { display: inline-block; padding: 0 8px; border-radius: 4px; background: var(--morkbeige); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pm-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 20px; }
/* Översikten, företagarens processer och delprocesserna: två nivåer, kort och flikrad. */
.pm-badge--sub { background: var(--petrol); border-color: var(--petrol); color: #fff; text-decoration: none; }
.pm-badge--sub:hover, .pm-badge--sub:focus-visible { background: var(--varm-svart); border-color: var(--varm-svart); }
.pm-crumbs ol { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.9375rem; }
.pm-crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--muted); }
.pm-tabbar { padding-block: 24px 16px; }
.pm-tabbar .subnav { margin-top: 16px; font-size: 1.0625rem; }
.pm-tabbar .pm-focus__summary { margin: 12px 0 0; }
.pm-tabbar h2 { margin: 0 0 8px; font-size: 1.375rem; }
.pm-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.pm-level { background: var(--surface); border: 1px solid var(--border); border-top: 6px solid var(--petrol); border-radius: var(--radius); padding: 18px 20px; }
.pm-level--sub { border-top-color: var(--marin); }
.pm-level h3 { margin: 0 0 8px; font-size: 1.375rem; }
.pm-level p { margin: 0 0 8px; }
.pm-card__kicker { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--petrol); }
.pm-cards { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.pm-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-top: 6px solid var(--marin); border-radius: var(--radius); padding: 16px 18px; }
.pm-card--process { border-top-color: var(--petrol); }
.pm-card h4 { margin: 0 0 4px; font-size: 1.25rem; line-height: 1.3; }
.pm-card p { margin: 0 0 8px; }
.pm-card__owner { font-weight: 600; color: var(--muted); }
.pm-card__used { font-size: 0.9375rem; }
.pm-area { margin: 0 0 28px; }
.pm-area > h3 { margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--border); color: var(--marin); }
.pm-todo > summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.pm-todo ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.pm-subs { max-width: 90ch; }
.pm-badge--missing { background: var(--surface); border-color: var(--varm-svart); border-style: dashed; color: var(--varm-svart); text-transform: none; letter-spacing: 0; }
.pm-card--missing { border-top-color: var(--muted); border-style: dashed; border-top-style: solid; }
.pm-subs__list li.pm-subs--missing { border-left-color: var(--muted); }
.pm-caveat.pm-caveat--missing { background: var(--surface); border-left-color: var(--korall); }
.pm-caveat { max-width: 75ch; margin: 12px 0 0; padding: 10px 14px; background: var(--ljusgul); border-left: 6px solid var(--varm-svart); border-radius: 4px; }
.pm-subs__list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.pm-subs__list li { background: var(--surface); border-left: 6px solid var(--marin); border-radius: 4px; padding: 8px 12px; }
.pm-subs__name { font-weight: 700; font-size: 1.0625rem; }
.pm-subs__via { font-size: 0.9375rem; }
.pm-subs > p { margin: 0; }

.pm-focus { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.pm-focus__col { background: var(--surface); border-radius: var(--radius); border: 2px solid var(--border); border-top-width: 8px; padding: 18px 20px; }
.pm-focus__col h3 { margin: 0 0 4px; font-size: 1.375rem; }
.pm-focus__col--kommun { border-color: var(--marin); }
.pm-focus__col--kommun h3 { color: var(--marin); }
.pm-focus__col--raddning { border-color: var(--oxid); }
.pm-focus__col--raddning h3 { color: var(--oxid); }
.pm-focus__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.pm-focus__item { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border); }
.pm-focus__title { font-weight: 600; flex: 1 1 260px; }
.pm-focus__item--always .pm-focus__title { font-weight: 700; }
.pm-focus__cond { font-size: 0.8125rem; color: var(--muted); }
.pm-focus__item--always .pm-focus__cond { color: var(--varm-svart); font-weight: 700; }
.pm-focus__summary { font-weight: 700; color: var(--marin); }

.pm-choices { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }
.pm-choices > p { grid-column: 1 / -1; margin: 0; }
.pm-qgroup { background: var(--surface); border-radius: var(--radius); padding: 12px 16px; }
.pm-qgroup h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.pm-q { border: 0; margin: 0; padding: 8px 0 0; min-width: 0; }
.pm-q legend { font-weight: 600; font-size: 0.9375rem; padding: 0; margin-bottom: 4px; }
.pm-q label { display: inline-flex; gap: 4px; align-items: center; margin-right: 12px; font-size: 0.9375rem; }

.pm-flowchart { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pm-phase { position: relative; padding: 0 0 28px 34px; border-left: 4px solid var(--morkbeige); margin-left: 12px; }
.pm-phase::before {
  content: ""; position: absolute; left: -14px; top: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: 4px solid var(--petrol);
}
.pm-phase:last-child { border-left-color: transparent; padding-bottom: 0; }
.pm-phase--edge::before { background: var(--petrol); }
.pm-phase > h3 { margin: 0 0 12px; font-size: 1.375rem; color: var(--petrol); }
.pm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.pm-step { min-width: 0; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 12px 14px; font-size: 0.9375rem; color: var(--muted); }
.pm-step h4 { margin: 6px 0 2px; font-size: 1.0625rem; color: var(--varm-svart); line-height: 1.3; }
.pm-step p { margin: 0 0 6px; }
.pm-step__actor { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.pm-step__who { font-weight: 600; }
.pm-step__when { font-size: 0.875rem; }
.pm-step__when--always { font-weight: 700; color: var(--petrol); }
.pm-step__status:empty { display: none; }
.pm-step__status { font-weight: 700; color: var(--varm-svart); }
.pm-step--focus { color: var(--varm-svart); border-width: 2px; border-left-width: 8px; box-shadow: 0 2px 6px rgba(38, 36, 34, 0.12); }
.pm-step--kommun { border-color: var(--marin); background: #eef4fa; }
.pm-step--raddning { border-color: var(--oxid); background: var(--pastellrosa); }
.pm-step--focus .pm-step__who { color: var(--varm-svart); }
.pm-step--ovriga { background: var(--beige); }
.pm-step--foretagare { border-color: var(--varm-svart); color: var(--varm-svart); }
.is-off { opacity: 0.35; }
.pm-step.is-off, .pm-focus__item.is-off { filter: grayscale(1); }
.pm-step.is-unsure { outline: 3px dashed var(--korall); outline-offset: 2px; }
.pm-good { padding-left: 1.2em; }
.pm-good li { margin-bottom: 4px; }

.pm-bpmn__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pm-diagram { overflow: auto; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 8px; max-height: 80vh; }
.pm-diagram--fit { max-height: none; }
.pm-diagram--fit svg { width: 100%; height: auto; }
.pm-diagram:fullscreen { max-height: none; border: 0; border-radius: 0; padding: 16px; }
.pm-diagram:-webkit-full-screen { max-height: none; border: 0; border-radius: 0; padding: 16px; }
.pm-bpmn { display: block; font-family: var(--font); }
.pm-pool { fill: none; stroke: var(--varm-svart); stroke-width: 1.5; }
.pm-pool__label { font-size: 15px; font-weight: 700; fill: var(--varm-svart); }
.pm-lane rect { fill: var(--surface); stroke: var(--varm-svart); stroke-width: 1; }
.pm-lane .pm-lane__head { fill: var(--beige); }
.pm-lane__label { font-size: 13px; font-weight: 700; fill: var(--varm-svart); }
.pm-lane__focus { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.pm-lane--kommun rect { fill: #eef4fa; }
.pm-lane--kommun .pm-lane__head { fill: var(--marin); }
.pm-lane--kommun .pm-lane__label, .pm-lane--kommun .pm-lane__focus { fill: #fff; }
.pm-lane--raddning rect { fill: var(--pastellrosa); }
.pm-lane--raddning .pm-lane__head { fill: var(--oxid); }
.pm-lane--raddning .pm-lane__label, .pm-lane--raddning .pm-lane__focus { fill: #fff; }
.pm-group rect { fill: none; stroke: var(--petrol); stroke-width: 1.5; stroke-dasharray: 8 5; }
.pm-group__label { font-size: 15px; font-weight: 700; fill: var(--petrol); }
.pm-flow { fill: none; stroke: var(--varm-svart); stroke-width: 1.4; }
.pm-arrowhead { fill: var(--varm-svart); }
.pm-flow__label { font-size: 11.5px; fill: var(--varm-svart); font-weight: 600; }
.pm-task rect { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; }
.pm-task__label { font-size: 12.5px; fill: var(--varm-svart); }
.pm-task--kommun rect { fill: #dce9f5; stroke: var(--marin); stroke-width: 3.5; }
.pm-task--raddning rect { fill: var(--ljusrosa); stroke: var(--oxid); stroke-width: 3.5; }
.pm-task--kommun .pm-task__label, .pm-task--raddning .pm-task__label { font-weight: 700; }
.pm-task--ovriga rect { fill: var(--beige); }
.pm-task--remiss rect { stroke-dasharray: 7 4; }
.pm-task__tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; fill: var(--varm-svart); }
.pm-gateway path { fill: var(--surface); stroke: var(--varm-svart); stroke-width: 2; }
.pm-gateway circle { fill: none; stroke: var(--varm-svart); stroke-width: 2.5; }
.pm-event circle { fill: var(--surface); stroke: var(--varm-svart); stroke-width: 2; }
.pm-event--end circle { stroke-width: 5; }
.pm-event__label { font-size: 12px; fill: var(--varm-svart); }
.pm-path { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; border-radius: 4px; border: 1.5px solid var(--border); font-size: 0.875rem; }
.pm-path--kommun { border-color: var(--marin); background: #eef4fa; font-weight: 700; }
.pm-path--raddning { border-color: var(--oxid); background: var(--pastellrosa); font-weight: 700; }
.pm-gateway--x path + path { fill: none; stroke-width: 3.5; }
.pm-gateway--plus path + path { fill: none; stroke-width: 3.5; }
.pm-task__sub { cursor: pointer; }
.pm-task__sub rect { fill: var(--surface); stroke: var(--varm-svart); stroke-width: 1.5; }
.pm-task__sub path { fill: none; stroke: var(--varm-svart); stroke-width: 2; }
.pm-task__sub:hover rect { fill: var(--ljusgul); }
.pm-step__sub { font-weight: 700; }
.pm-steps--sub { margin-top: 12px; }

/* Förmågans beskrivning i en dialogruta på nulägesbilden */
.capdialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); }
.capdialog[open] { display: flex; flex-direction: column; }
.capdialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.capdialog__bar { display: flex; justify-content: flex-end; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.capdialog__close { font: inherit; font-weight: 600; padding: 6px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); color: var(--text); cursor: pointer; }
.capdialog__close:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.capdialog__body { overflow-y: auto; padding: 16px 24px 24px; }
.capdialog__kicker { margin: 0; font-size: 0.875rem; color: var(--muted); }
.capdialog__content h2 { margin: 4px 0 8px; }
.capdialog__meta { margin: 0 0 8px; }
.capdialog__more { margin: 20px 0 0; font-weight: 600; }

/* Om genomförandestödet (/omgenomforandet): modellbild och filtrerbara frågor. */
.omg__hint { margin: 0 0 12px; color: var(--muted); }
.omg__figure { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; overflow-x: auto; max-width: 760px; }
.omg__svg { display: block; width: 100%; min-width: 560px; height: auto; }
.omg__svg text { font-family: var(--font); }
.omg__t { font-size: 14px; font-weight: 700; }
.omg__s { font-size: 12px; }
.omg__node, .omg__node text { text-decoration: none; }
.omg__node rect { stroke-width: 1; }
.omg__node:hover rect, .omg__node:focus-visible rect { stroke-width: 2.5; }
.omg__node:focus { outline: none; }
.omg__node:focus-visible { outline: 3px solid var(--marin); outline-offset: 3px; }
.omg__node--dev rect { fill: #e6eef6; stroke: var(--marin); }
.omg__node--dev text { fill: var(--marin); }
.omg__node--stod rect { fill: var(--pastellgron); stroke: var(--petrol); }
.omg__node--stod text { fill: var(--petrol); }
.omg__node--kommun rect { fill: var(--pastellrosa); stroke: var(--oxid); }
.omg__node--kommun text { fill: var(--oxid); }
.omg__ram { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 4; }
.omg__t--ram { fill: var(--text); }
.omg__linje { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.omg__linje--retur { stroke-dasharray: 4 4; }
.omg__pilhuvud { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.omg__s--fot { fill: var(--muted); }
.omg__caption { margin: 12px 0 0; font-size: 0.875rem; color: var(--muted); max-width: 70ch; }
.omg__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.omg__chips[hidden] { display: none; }
.omg__chip { font: inherit; font-size: 0.9375rem; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.omg__chip[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--vit); }
.omg__faq { max-width: 80ch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.omg__q { border-top: 1px solid var(--border); padding: 0 16px; }
.omg__q:first-child { border-top: 0; }
.omg__q[hidden] { display: none; }
.omg__q > summary { cursor: pointer; padding: 14px 0; font-weight: 700; }
.omg__q > p { margin: 0 0 12px; }
.omg__q > p:last-child { margin-bottom: 16px; }
.omg__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.omg__tags span { font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); }

/* Ett samlat invånarmöte: gemensamma inv__-klasser (tidigare sidan Invånarmötet) */
.inv__text { max-width: 70ch; margin: 0 0 20px; }
.inv__compare { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.inv__side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.inv__side--idag { border-top: 4px solid var(--morkbeige); }
.inv__side--samlat { border-top: 4px solid var(--petrol); }
.inv__side h3 { margin: 0 0 8px; font-size: 1.125rem; }
.inv__need { margin: 0 0 12px; font-weight: 600; color: var(--muted); }
.inv__split { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 8px; }
.inv__result { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); }
.inv__behov { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.inv__behov li { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--morkbeige); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.inv__behov li.inv__behov--fokus { border-top-color: var(--petrol); background: var(--pastellgron); }
.inv__behov em { font-style: normal; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--petrol); }
.inv__behov span { color: var(--muted); font-size: 0.9375rem; }
.inv__exempel { margin: 0; max-width: 80ch; display: grid; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.inv__exempel > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 16px; padding: 12px 16px; border-top: 1px solid var(--border); }
.inv__exempel > div:first-child { border-top: 0; }
.inv__exempel dt { font-weight: 700; color: var(--petrol); }
.inv__exempel dd { margin: 0; }
@media (max-width: 480px) { .inv__exempel > div { grid-template-columns: 1fr; gap: 4px; } }
.inv__nyttor { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.omg__version { margin: 24px 0 0; }

/* Ett samlat invånarmöte (/ett-samlat-invanarmote) */
.sim__korthet { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--petrol); border-radius: var(--radius); padding: 20px; }
.sim__korthet h3 { margin: 0 0 6px; font-size: 1.125rem; color: var(--petrol); }
.sim__korthet p { margin: 0; }
.sim__subhead { margin: 32px 0 12px; font-size: 1.25rem; }
.sim__list { max-width: 75ch; margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.sim__exempel { margin: 20px 0 0; max-width: 80ch; }
.sim__exempel > summary { cursor: pointer; font-weight: 700; color: var(--brand); padding: 6px 0; }
.sim__exempel[open] > summary { margin-bottom: 12px; }
.sim__nyttor { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.sim__nyttor .sim__subhead { margin-top: 0; }
.sim__nyttolista { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.sim__nyttolista > div { padding: 12px 16px; border-top: 1px solid var(--border); }
.sim__nyttolista > div:first-child { border-top: 0; }
.sim__nyttolista dt { font-weight: 700; }
.sim__nyttolista dd { margin: 4px 0 0; color: var(--muted); }
.sim__omraden { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.sim__kraft { margin: 24px 0 0; max-width: 75ch; font-size: 1.125rem; font-weight: 600; }

/* Leveransområden (/ett-samlat-invanarmote/leveransomraden). Nivåernas färger följer modellbilden på
   Om genomförandestödet: gemensamt marin, process för process petrol, hos er oxid. */
.lev__nivaer { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 28px; max-width: 760px; }
.lev__nivaer > li { position: relative; }
.lev__nivaer > li + li::before { content: "↓"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 1.125rem; line-height: 1.4; }
.lev__niva { display: block; padding: 14px 18px; border: 1px solid; border-radius: var(--radius); text-decoration: none; color: inherit; }
.lev__niva strong { display: block; font-size: 1.125rem; margin-bottom: 4px; }
.lev__niva span { display: block; color: var(--text); }
.lev__niva:hover, .lev__niva:focus-visible { border-width: 2px; padding: 13px 17px; }
.lev__niva:focus-visible { outline: 3px solid var(--marin); outline-offset: 3px; }
.lev__niva--gemensamt { background: #e6eef6; border-color: var(--marin); }
.lev__niva--gemensamt strong { color: var(--marin); }
.lev__niva--process { background: var(--pastellgron); border-color: var(--petrol); }
.lev__niva--process strong { color: var(--petrol); }
.lev__niva--lokalt { background: var(--pastellrosa); border-color: var(--oxid); }
.lev__niva--lokalt strong { color: var(--oxid); }

.lev__steg { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.lev__steg > li { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--petrol); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; }
.lev__stegnr { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--petrol); color: var(--vit); font-weight: 700; margin-bottom: 10px; }
.lev__steg h3 { margin: 0 0 8px; font-size: 1.0625rem; }
.lev__steg p { margin: 0 0 8px; }
.lev__till { display: flex; flex-wrap: wrap; gap: 6px; }
.lev__steg p.lev__till { margin: auto 0 0; padding-top: 4px; }
.lev__till a, .lev__vem a { font-size: 0.8125rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.lev__till a:hover, .lev__vem a:hover { border-color: var(--text); }
.lev__parallellt { background: var(--varm-svart); color: var(--vit); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 20px; }
.lev__parallellt h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.lev__parallellt p { margin: 0 0 10px; max-width: 75ch; }
.lev__parallellt .lev__till a { background: transparent; color: var(--vit); border-color: rgba(255, 255, 255, 0.5); }

.lev__lager { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 22px; max-width: 860px; }
.lev__lagerrad { position: relative; display: grid; gap: 4px 20px; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: start; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: var(--radius); padding: 14px 16px; }
.lev__lagerrad + .lev__lagerrad::before { content: "↑"; position: absolute; top: -21px; left: 50%; transform: translateX(-50%); color: var(--muted); line-height: 1.2; }
.lev__lagerrad--lokalt { border-left-color: var(--oxid); }
.lev__lagerrad--blandat { border-left-color: var(--marin); box-shadow: inset 4px 0 0 var(--oxid); }
.lev__lagernamn strong { display: block; }
.lev__lagernamn span { display: block; color: var(--muted); font-size: 0.9375rem; }
.lev__lagerrad > p { margin: 0; grid-column: 2; }
.lev__vem { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lev__vem span { font-size: 0.8125rem; color: var(--muted); }
.lev__vem span + span::before { content: "· "; }
@media (max-width: 600px) {
  .lev__lagerrad { grid-template-columns: 1fr; }
  .lev__lagerrad > p { grid-column: 1; }
}

.lev__omrade { margin: 0 0 28px; max-width: 900px; }
.lev__omradesrubrik { margin: 0 0 10px; font-size: 1.125rem; color: var(--petrol); }
.lev__lo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 8px; scroll-margin-top: 16px; }
.lev__lo > summary { cursor: pointer; display: grid; grid-template-columns: 4.5em 1fr auto; gap: 2px 12px; padding: 14px 16px; list-style: none; }
.lev__lo > summary::after { content: "Visa"; grid-column: 3; grid-row: 1; font-size: 0.875rem; color: var(--muted); text-decoration: underline; }
.lev__lo[open] > summary::after { content: "Dölj"; }
.lev__lo > summary::-webkit-details-marker { display: none; }
.lev__nr { grid-row: span 2; font-weight: 700; color: var(--petrol); }
.lev__namn { font-weight: 700; }
.lev__vad { grid-column: 2; color: var(--muted); }
.lev__lo[open] > summary { border-bottom: 1px solid var(--border); }
.lev__lo--utan { opacity: 0.55; }
.lev__rader { margin: 0; padding: 4px 16px 0; }
.lev__rad { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--border); }
.lev__rad:first-child { border-top: 0; }
.lev__rad[hidden] { display: none; }
.lev__rad dt { font-weight: 700; }
.lev__rad--gemensamt dt { color: var(--marin); }
.lev__rad--process dt { color: var(--petrol); }
.lev__rad--lokalt { background: var(--pastellrosa); margin: 0 -16px; padding: 10px 16px; }
.lev__rad--lokalt dt { color: var(--oxid); }
.lev__rad dd { margin: 0; }
@media (max-width: 480px) { .lev__rad { grid-template-columns: 1fr; } }

.lev__lista { max-width: 80ch; margin: 0 0 24px; padding-left: 1.2em; display: grid; gap: 8px; }
.lev__lista a { font-weight: 700; margin-right: 4px; }
.lev__ensam p a { font-weight: 700; }
.lev__niva--resa { background: var(--surface); border-color: var(--muted); }
.lev__niva--resa strong { color: var(--text); }
div.lev__niva:hover { border-width: 1px; padding: 14px 18px; }
.lev__till span { font-size: 0.8125rem; color: var(--muted); align-self: center; }
.lev__parallellt .lev__till span { color: rgba(255, 255, 255, 0.75); }
.lev__over { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 900px; }
.lev__over li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--marin); border-radius: var(--radius); padding: 12px 16px; }
.lev__over strong { flex: 1 1 100%; }
.lev__over span { flex: 1 1 320px; }
.lev__over a { font-size: 0.8125rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.hero--lev h1 { hyphens: manual; }
.lev__over a.lev__textlank { font-size: inherit; font-weight: 700; padding: 0; border: 0; background: none; color: var(--brand); text-decoration: underline; }

/* Om initiativet: vilka gör arbetet. Samordningsgruppen ligger i mitten som kitt, inte överst, så att bilden inte läses som en hierarki. */
.org { margin: 0; max-width: 1000px; padding: 16px; border: 1px solid var(--muted); border-radius: 14px; background: var(--surface); }
.org__rubrik { font-weight: 700; font-size: 1.125rem; text-align: center; margin: 0 0 14px; }
.org__grid { display: grid; grid-template-columns: 1fr 210px 1fr; gap: 24px; align-items: stretch; }
.org__grupp { border: 1px solid; border-radius: var(--radius); padding: 14px 16px; }
.org__grupp h3, .org__samordning h3, .org__piloter h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.org__grupp p { margin: 0 0 8px; }
.org__grupp ul { margin: 0 0 8px; padding-left: 1.2em; display: grid; gap: 4px; }
.org__grupp a, .org__piloter a { color: var(--brand); font-weight: 700; }
.org__grupp--tema { background: var(--pastellgron); border-color: var(--petrol); }
.org__grupp--tema h3 { color: var(--petrol); }
.org__grupp--ark { background: #e6eef6; border-color: var(--marin); }
.org__grupp--ark h3 { color: var(--marin); }
.org__ansvar { background: var(--surface); border: 1px solid var(--marin); border-radius: 6px; padding: 8px 10px; }
.org__senare { display: inline-block; font-size: 0.8125rem; padding: 0 6px; border-radius: 4px; border: 1px dashed var(--muted); color: var(--muted); margin-left: 4px; }
.org__fot { font-size: 0.9375rem; color: var(--muted); margin-bottom: 0 !important; }
.org__samordning { position: relative; align-self: center; text-align: center; background: var(--morkbeige); border: 1px solid var(--oxid); border-radius: var(--radius); padding: 14px 12px; }
.org__samordning h3 { color: var(--oxid); hyphens: auto; overflow-wrap: anywhere; }
.org__samordning p { margin: 0 0 4px; }
.org__samordning p:last-child { margin: 0; }
.org__samordning::before, .org__samordning::after { content: ""; position: absolute; top: 50%; width: 24px; border-top: 2px solid var(--oxid); }
.org__samordning::before { right: 100%; }
.org__samordning::after { left: 100%; }
.org__pil { text-align: center; max-width: 1000px; margin: 6px 0; color: var(--muted); font-size: 1.25rem; line-height: 1; }
.org__piloter { max-width: 1000px; background: var(--pastellrosa); border: 1px solid var(--oxid); border-radius: 14px; padding: 14px 16px; }
.org__piloter h3 { color: var(--oxid); }
.org__piloter p { margin: 0; max-width: 80ch; }
@media (max-width: 760px) {
  .org__grid { grid-template-columns: 1fr; gap: 14px; }
  .org__samordning::before, .org__samordning::after { display: none; }
}
.lev__lagerrad--utanfor { background: transparent; border: 1px dashed var(--muted); border-left: 4px dashed var(--muted); }
.lev__utanfor { display: inline-block; margin-right: 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 4px; background: var(--varm-svart); color: var(--vit); vertical-align: 1px; }

/* Startsidan: information om GSIM och, för den som inte är inloggad, inloggningsrutan. */
.start { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.start__box { order: -1; }
@media (min-width: 900px) { .start { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; } .start__box { order: 0; } }
.start__info { max-width: 65ch; }
.start__info h2 + p { margin-top: 0; }
.start__info h2:not(:first-child) { margin-top: 32px; }
.start__box {
  display: flex; flex-direction: column; gap: 20px;
  background: var(--surface); border-radius: 12px; padding: 28px 24px;
  border-top: 6px solid var(--accent, #ff7c5d);
}
.start__box .login__title { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--brand); line-height: 1.2; }
.login__form { display: flex; flex-direction: column; gap: 12px; }
.login__label { font-size: 1.125rem; font-weight: 600; }
.login__input {
  font: inherit; padding: 10px 12px; border: 1px solid #8c8680; border-radius: 8px;
  background: #fff; color: var(--text);
}
.login__input:focus-visible, .login__button:focus-visible { outline: 3px solid #154f80; outline-offset: 2px; }
.login__button {
  font: inherit; font-weight: 600; padding: 10px 20px; border: 2px solid var(--brand); border-radius: 999px;
  background: var(--brand); color: #fff; cursor: pointer;
}
.login__button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.login__hint { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.45; }
.login__access { margin: 0; padding: 14px 16px; border: 2px solid var(--brand); border-left-width: 8px; border-radius: 8px; background: #fdeeea; display: grid; gap: 6px; }
.login__access-title { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--brand); }
.login__access-text { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--text, #262422); }
.login__error { margin: 0; font-size: 0.9375rem; color: var(--brand); font-weight: 600; }
.login__error:empty { display: none; }
.start__box .login__text { margin: 0; }
.lev__tidplan { margin-top: 28px; }
.lev__tidplan h3 { margin: 24px 0 8px; font-size: 1.125rem; }
.lev__tidplan > p, .lev__tidplan ul { max-width: 75ch; }
.lev__tidplan ul { padding-left: 20px; }
.lev__tidplan li { margin-bottom: 8px; }
.lev__tidplan-tabell { min-width: 720px; }
.lev__tidplan-tabell td { white-space: nowrap; }