/* course.css — komponenter specifika för modul-sidor */

/* ─── Module step page ───────────────────────────────────── */

.module-step {
  max-width: var(--max-width-content);
  margin: 0 auto;
}

.module-step__header {
  margin-bottom: var(--space-lg);
}

.module-step__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-gold-dark);
  margin: 0 0 var(--space-xs) 0;
}

.module-step__title {
  margin: 0 0 var(--space-md) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-gold-primary);
}

/* Subtilt streck under sektionsrubriker (h3) i modulinnehållet,
   bara för rubriker direkt i flödet (HeadingBlock) — inte de inuti
   kort, callouts eller andra komponenter. */
.module-step__body > h3 {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(254, 186, 11, 0.35);
}

.module-step__body {
  margin: var(--space-xl) 0;
}

.module-step__body > * + * {
  margin-top: var(--space-lg);
}

.module-step__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
}

.module-step__nav .btn {
  min-width: 160px;
  flex: 1;
}

.module-step__complete-form {
  flex: 1;
  display: flex;
}

.module-step__complete-form .btn {
  width: 100%;
}

@media (max-width: 539px) {
  .module-step__nav {
    flex-direction: column-reverse;
  }

  .module-step__nav .btn {
    width: 100%;
  }
}

/* ─── Step indicator ─────────────────────────────────────── */

.step-indicator {
  margin: var(--space-md) 0 var(--space-xl) 0;
}

.step-indicator__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.step-indicator__item {
  padding: 0;
}

.step-indicator__item a,
.step-indicator__item > span {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-main);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.step-indicator__item a:hover {
  background: var(--color-gold-tint);
  color: var(--color-navy);
  border-color: var(--color-gold-primary);
}

.step-indicator__item--active > span {
  background: var(--color-gold-tint);
  border-color: var(--color-gold-primary);
  border-width: 2px;
  color: var(--color-navy);
  font-weight: var(--weight-semibold);
}

.step-indicator__item--past a {
  opacity: 0.65;
}

/* ─── Audio player ───────────────────────────────────────── */

.audio-player {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
}

.audio-player__heading {
  font-size: var(--font-size-small);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-navy);
  margin: 0 0 var(--space-sm) 0;
}

.audio-player audio {
  width: 100%;
  margin-bottom: var(--space-xs);
}

.audio-player__hint {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.audio-player__speed {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin: var(--space-xs) 0;
}

.audio-player__speed-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.audio-player__speed-btn {
  padding: 4px 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  background: #ffffff;
  font-family: inherit;
  font-size: var(--font-size-small);
  color: var(--color-navy);
  cursor: pointer;
  min-height: 32px;
  min-width: 44px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.audio-player__speed-btn:hover {
  border-color: var(--color-gold-primary);
  background: var(--color-gold-tint);
}

.audio-player__speed-btn--active {
  background: var(--color-navy);
  color: var(--color-text-inverted);
  border-color: var(--color-navy);
  font-weight: var(--weight-semibold);
}

.audio-player__transcript {
  margin-top: var(--space-sm);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-sm);
}

.audio-player__transcript summary {
  cursor: pointer;
  font-size: var(--font-size-small);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  padding: var(--space-xs) 0;
  list-style: none;
}

.audio-player__transcript summary::-webkit-details-marker {
  display: none;
}

.audio-player__transcript summary::before {
  content: "▸ ";
  color: var(--color-gold-dark);
  transition: transform var(--transition-fast);
  display: inline-block;
}

.audio-player__transcript[open] summary::before {
  content: "▾ ";
}

.audio-player__transcript summary:hover {
  color: var(--color-gold-dark);
}

.audio-player__transcript-body {
  margin-top: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: #ffffff;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-gold-primary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
  max-height: 400px;
  overflow-y: auto;
}

.audio-player__transcript-body p {
  margin: 0 0 var(--space-xs) 0;
}

.audio-player__transcript-body p:last-child {
  margin-bottom: 0;
}

/* ─── Content blocks ─────────────────────────────────────── */

.rich-text > p:first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }

/* InsightBlock — gul "glödlampa"-box porterat från v1 .insight-box.
   Mjuk gul gradient, gul vänsterkant, 💡 som ::before-pseudo-element
   så texterna slipper innehålla ikonen. */
.insight {
  position: relative;
  background: linear-gradient(135deg, #FEF8EE 0%, #FEF3D6 100%);
  border: 1px solid rgba(254, 186, 11, 0.15);
  border-left: 4px solid #E5A800;
  border-radius: 0 12px 12px 0;
  padding: 0.85rem 1.2rem 0.85rem 3rem;
  margin: var(--space-md) 0;
  font-size: 0.92rem;
  color: #5A4A20;
  line-height: 1.75;
  box-shadow: 0 2px 10px rgba(154, 107, 0, 0.06);
}

.insight::before {
  content: "💡";
  position: absolute;
  left: 1rem;
  top: 0.9rem;
  font-size: 1.15rem;
  line-height: 1;
}

.insight p {
  margin: 0;
  font-style: italic;
  color: inherit;
}

.callout {
  background: rgba(254, 186, 11, 0.06);
  border: 1px solid rgba(254, 186, 11, 0.22);
  border-left: 4px solid var(--color-gold-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: 0 2px 10px rgba(122, 101, 32, 0.05);
  line-height: 1.7;
}

.callout__body {
  line-height: 1.7;
}

.callout__body p + p,
.callout__body p + ul,
.callout__body p + ol,
.callout__body ul + p,
.callout__body ol + p,
.callout__body table + p,
.callout__body p + table {
  margin-top: var(--space-md);
}

.callout__body table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-small);
  margin: var(--space-md) 0;
  background: #FFFFFF;
  border-radius: 6px;
  overflow: hidden;
}

.callout__body table th,
.callout__body table td {
  padding: var(--space-sm) var(--space-md);
  vertical-align: top;
  text-align: left;
}

.callout__body table th {
  background: rgba(254, 186, 11, 0.18);
  border-bottom: 2px solid rgba(254, 186, 11, 0.5);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  letter-spacing: 0.02em;
}

.callout__body table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.callout__body table tbody tr:last-child {
  border-bottom: none;
}

.callout__body table tbody td:first-child {
  font-weight: var(--weight-semibold);
  color: var(--color-text-main);
  width: 28%;
}

.callout__body table td em {
  display: block;
  font-style: normal;
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  margin-top: 2px;
  line-height: 1.4;
}

/* ─── Definition list för "krav/skyldigheter"-mönstret ────────
   Lättare än upprepade <li><strong>...</strong> — em-dash mönster.
   Varje skyldighet: titel (dt) + förklaring (dd). */
.duty-list {
  margin: var(--space-md) 0;
  list-style: none;
  padding-left: 0;
}

.duty-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-light, #e8e4d9);
  line-height: var(--line-height-relaxed);
}

.duty-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.duty-list dt {
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  margin-top: var(--space-md);
  font-size: 1rem;
  line-height: 1.4;
}

.duty-list dt:first-child {
  margin-top: 0;
}

.duty-list dd {
  margin: var(--space-2xs) 0 0 0;
  padding-left: 0;
  color: var(--color-text-main);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.callout__title {
  font-weight: 800;
  color: var(--color-navy);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.callout__body > :first-child { margin-top: 0; }
.callout__body > :last-child { margin-bottom: 0; }

.callout__body ol,
.callout__body ul {
  padding-left: var(--space-lg);
  margin: 0;
}

.callout__body li + li {
  margin-top: var(--space-2xs);
}

/* ─── Callout — collapsed-variant (Lärandemål etc) ──────── */
/* Inspirerad av v1:s expander: vit bg, subtil skugga, grå text */

.callout.callout--collapsible {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  padding: 0;
  transition: box-shadow 0.18s ease;
}

.callout--collapsible[open] {
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}

.callout--collapsible summary.callout__title {
  padding: 0.7rem 1.1rem;
  color: #7a7a8c;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}

.callout--collapsible summary.callout__title::-webkit-details-marker {
  display: none;
}

.callout--collapsible summary.callout__title::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-gold-primary);
  transition: transform 0.2s ease;
}

.callout--collapsible[open] summary.callout__title::before {
  transform: rotate(90deg);
}

.callout--collapsible summary.callout__title:hover {
  color: #9a6b00;
  background: rgba(254, 186, 11, 0.04);
}

.callout--collapsible > .callout__body {
  padding: 0.2rem 1.3rem 1rem 2rem;
  font-size: 0.95rem;
}

/* ─── Pull-quote (Kursledarens perspektiv) ──────────────── */

.pull-quote {
  text-align: center;
  margin: var(--space-lg) auto;
  padding: var(--space-lg) var(--space-xl);
  background: rgba(26, 46, 30, 0.03);
  border-radius: var(--radius-md);
  max-width: 800px;
}

.pull-quote__text {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-main);
  margin: 0 0 var(--space-sm) 0;
}

.pull-quote__text p {
  margin: 0 0 var(--space-xs) 0;
}

.pull-quote__text p:last-child {
  margin-bottom: 0;
}

.pull-quote__attr {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.warning {
  background: var(--color-error-bg);
  border-left: 4px solid var(--color-error);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-md) var(--space-lg);
  color: #991b1b;
}

.warning p { margin: 0; }

.content-image {
  margin: var(--space-lg) 0;
}

.content-image img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.two-column__col .content-image img {
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

.content-image figcaption {
  margin-top: var(--space-xs);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
}

.content-image img.zoomable {
  cursor: zoom-in;
  transition: transform var(--transition-fast);
}

.content-image img.zoomable:hover {
  transform: scale(1.02);
}

/* ─── Tvåkolumnslayout (text + bild sida vid sida) ─────── */

.two-column {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
  margin: var(--space-lg) 0;
}

.two-column__col {
  min-width: 0;
}

.two-column__col--left {
  flex: var(--left-ratio, 1);
}

.two-column__col--right {
  flex: var(--right-ratio, 1);
}

/* Tight-gör child-margins så kolumnerna linjerar snyggt */
.two-column__col > *:first-child {
  margin-top: 0;
}

.two-column__col > *:last-child {
  margin-bottom: 0;
}

.module-step__body > ul + .two-column,
.module-step__body > ol + .two-column {
  margin-top: var(--space-sm);
}

.module-step__body > ul,
.module-step__body > ol {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .two-column {
    flex-direction: column;
    gap: var(--space-lg);
  }
}

/* ─── Video ─────────────────────────────────────────────── */

.content-video {
  margin: var(--space-lg) 0;
}

.content-video__player {
  width: 100%;
  max-width: 100%;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: #000;
}

.content-video__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(20, 35, 70, 0.04), rgba(20, 35, 70, 0.10));
  border: 1px dashed rgba(20, 35, 70, 0.22);
  color: var(--color-text-muted);
}

.content-video__placeholder-icon {
  font-size: 2.5rem;
  opacity: 0.55;
}

.content-video__placeholder-text {
  margin: 0;
  font-size: var(--font-size-small);
  font-style: italic;
}

.content-video figcaption {
  margin-top: var(--space-xs);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
}

/* ─── Lightbox ──────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 24, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  z-index: 1000;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-text-inverted);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox__close:focus-visible {
  outline: 2px solid var(--color-gold-primary);
  outline-offset: 2px;
}

.lightbox__figure {
  margin: 0;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lightbox__image {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  background: #ffffff;
  padding: var(--space-sm);
}

.lightbox__caption {
  color: var(--color-text-inverted);
  font-size: var(--font-size-small);
  text-align: center;
}

.lightbox__caption[hidden] {
  display: none;
}

body.lightbox-open {
  overflow: hidden;
}

/* ─── Talmanus-dialog (superuser/owner) ──────────────────── */

.talmanus-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 720px;
  width: min(90vw, 720px);
  max-height: 85vh;
  border-radius: var(--radius-md);
}

.talmanus-dialog::backdrop {
  background: rgba(10, 12, 24, 0.75);
}

.talmanus-dialog__frame {
  background: var(--color-bg-base);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  overflow: hidden;
}

.talmanus-dialog__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-navy);
  color: var(--color-text-inverted);
}

.talmanus-dialog__label {
  font-weight: var(--weight-semibold);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 1;
}

.talmanus-dialog__font-controls {
  display: flex;
  gap: 4px;
}

.talmanus-dialog__font-controls button {
  width: 36px;
  height: 32px;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-inverted);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--weight-semibold);
}

.talmanus-dialog__font-controls button:hover {
  background: rgba(255, 255, 255, 0.25);
}

.talmanus-dialog__close {
  width: 36px;
  height: 32px;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-inverted);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 1rem;
}

.talmanus-dialog__close:hover {
  background: rgba(255, 255, 255, 0.15);
}

#talmanus-dialog-body {
  padding: var(--space-md) var(--space-lg);
  overflow-y: auto;
  font-size: 15px;
  line-height: var(--line-height-relaxed);
}

.talmanus-dialog__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.talmanus-dialog__eyebrow {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gold-dark);
}

.talmanus-dialog__title {
  margin: 0 0 var(--space-xs) 0;
  font-size: 1.1rem;
  color: var(--color-navy);
}

.talmanus-dialog__key {
  display: inline-block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: var(--weight-normal);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  opacity: 0.55;
}

.talmanus-dialog__text {
  max-width: 60ch;
  margin: 0 auto;
}

.talmanus-dialog__audio-row {
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--color-border-subtle);
}

.talmanus-dialog__audio {
  width: 100%;
  height: 36px;
}

.talmanus-dialog__body p {
  margin: 0 0 var(--space-xs) 0;
}

.talmanus-dialog__body p:last-child {
  margin-bottom: 0;
}

.talmanus-dialog__empty {
  color: var(--color-text-muted);
}

.talmanus-dialog__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-subtle);
}

.talmanus-dialog__counter {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-semibold);
}

.talmanus-dialog__placeholder {
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-lg);
}

/* ─── Talmanus: ljudspelare ─────────────────────────────── */

.talmanus-dialog__audio {
  margin-top: var(--space-md);
  padding: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: #fafafc;
}

.talmanus-dialog__audio summary {
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  list-style: none;
}

.talmanus-dialog__audio summary::-webkit-details-marker { display: none; }

.talmanus-dialog__audio summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--color-gold-primary);
  transition: transform 0.2s ease;
}

.talmanus-dialog__audio[open] summary::before {
  transform: rotate(90deg);
}

.talmanus-dialog__audio audio {
  display: block;
  width: calc(100% - 1.5rem);
  margin: 0 0.75rem 0.75rem 0.75rem;
}

.talmanus-dialog__audio-missing {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin: var(--space-sm) 0 0 0;
}

/* ─── Talmanus: owner-verktyg ───────────────────────────── */

.talmanus-dialog__owner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(159, 18, 57, 0.04);
  border: 1px dashed rgba(159, 18, 57, 0.2);
  border-radius: var(--radius-sm);
}

.talmanus-dialog__owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  background: #9F1239;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.talmanus-dialog__action-group {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Edit-mode banner — visas när redigeringsläget är aktivt */
.talmanus-dialog__edit-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-sm) var(--space-lg) 0 var(--space-lg);
  padding: 0.6rem 0.9rem;
  background: rgba(254, 186, 11, 0.15);
  border: 1px solid rgba(254, 186, 11, 0.4);
  border-left: 4px solid #E5A800;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: #5A4A20;
  line-height: 1.4;
}

.talmanus-dialog__edit-banner[hidden] {
  display: none;
}

.talmanus-dialog__text[hidden],
.talmanus-dialog__edit[hidden] {
  display: none;
}

.talmanus-dialog__edit {
  width: 100%;
  box-sizing: border-box;
  min-height: 280px;
  padding: var(--space-sm);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: #faf8f4;
  color: var(--color-text-main);
  resize: vertical;
}

.btn--small {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  min-height: auto;
}

/* ─── Toast — feedback efter kopiera ────────────────────── */

.talmanus-dialog__toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 8px);
  background: #1f2937;
  color: #ffffff;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 2000;
}

.talmanus-dialog__toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Nav-btn i toppnav för talmanus (redan definierad generellt men
   säkerställ disabled-state) */
.site-header__nav-list .nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Decision block ─────────────────────────────────────── */

.decision {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-left: 4px solid var(--color-gold-primary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
}

.decision__eyebrow {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: var(--space-xs);
}

.decision__heading {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-h3);
}

.decision__scenario {
  margin-bottom: var(--space-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-main);
}

.decision__options {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.decision__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: #ffffff;
  min-height: var(--touch-target);
}

.decision__option:hover {
  border-color: var(--color-gold-primary);
  background: var(--color-gold-tint);
}

.decision__option:has(input:checked) {
  border-color: var(--color-navy);
  background: var(--color-gold-tint);
}

.decision__option input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--color-gold-primary);
}

.decision__feedback {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.decision__feedback-item {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: #ffffff;
}

.decision__feedback-item--chosen {
  border-color: var(--color-navy);
  border-left: 4px solid var(--color-navy);
  background: var(--color-gold-tint);
}

.decision__feedback-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}

.decision__feedback-badge {
  padding: 2px 8px;
  background: var(--color-role-su-bg);
  color: var(--color-role-su-text);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.decision__feedback-item--chosen .decision__feedback-badge {
  background: var(--color-navy);
  color: var(--color-text-inverted);
}

.decision__feedback-text {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-main);
  line-height: var(--line-height-relaxed);
}

.decision__feedback-recommended {
  margin: var(--space-xs) 0 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-gold-dark);
}

.decision__reset {
  margin: 0;
}

.content-divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-xl) 0;
}

/* ─── Card grid ──────────────────────────────────────────── */

.card-grid {
  display: grid;
  gap: var(--space-md);
  margin: var(--space-md) 0;
}

.card-grid--cols-1 { grid-template-columns: 1fr; }

.card-grid--cols-2 {
  grid-template-columns: 1fr;
}

.card-grid--cols-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .card-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .card-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.content-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-top: 4px solid var(--color-gold-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md) var(--space-lg);
}

.content-card--muted {
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: none;
}

.content-card--na {
  opacity: 0.45;
  filter: grayscale(60%);
  border-top-color: var(--color-border-subtle);
  box-shadow: none;
}

.content-card--na .content-card__heading::after {
  content: " — gäller ej offentliga";
  font-size: 0.75rem;
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
}

/* Compact-variant — för översiktssidor med många kort.
   Tar bort gula topkanten och minskar padding så sidan inte blir
   visuellt tung av 6+ guldband. */
.card-grid--compact {
  gap: var(--space-sm);
}

.content-card--compact {
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  padding: var(--space-sm) var(--space-md);
}

.content-card--compact .content-card__heading {
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.content-card--compact .content-card__body {
  font-size: 0.78rem;
  color: #7A7A8C;
  line-height: 1.4;
}

.content-card--compact .content-card__meta {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

/* ─── Numbered-variant — sekventiella processteg ───────────
   Opt-in via CardGridBlock(variant="numbered"). Tar bort den gula
   topkanten och placerar siffran (card.meta) som en stor navy-cirkel
   till vänster. Korten knyts ihop med en vertikal connector så att
   de visuellt läses som en sekvens, inte som 6 fristående kort. */
.card-grid--numbered {
  gap: 0;
  position: relative;
}

.card-grid--numbered .content-card {
  border-top: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  position: relative;
  background: var(--color-bg-card);
}

.card-grid--numbered .content-card + .content-card {
  margin-top: var(--space-sm);
}

/* Vertikal connector som binder ihop nummercirklarna.
   Stannar inom listan (sista kortet får ingen linje nedåt). */
.card-grid--numbered .content-card:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--space-lg) + 18px);
  top: calc(var(--space-md) + 36px);
  bottom: calc(var(--space-sm) * -1);
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(57, 61, 82, 0.25),
    rgba(57, 61, 82, 0.10)
  );
  z-index: 0;
}

.content-card__number {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(57, 61, 82, 0.25);
  position: relative;
  z-index: 1;
  margin-top: 2px;
}

.content-card__inner {
  min-width: 0;
  flex: 1;
}

.card-grid--numbered .content-card__heading {
  margin: 0 0 var(--space-2xs) 0;
  font-size: 1rem;
  color: var(--color-navy);
}

.card-grid--numbered .content-card__body {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* När numbered-listan ligger i en two-column tillsammans med en bild
   till höger: gör bilden "sticky" så cirkeldiagrammet följer med när
   man scrollar i listan istället för att hamna långt upp i tomrum. */
.two-column__col--right .content-image:has(+ *),
.two-column__col--right > .content-image:only-child {
  position: sticky;
  top: var(--space-lg);
}

/* ─── Numbered-list med integrerad bild (CSS Grid) ──────────
   Box 1 och box 6 spannar fullbredd, box 2-5 ligger bredvid bilden
   som är vertikalt centrerad. Mer integrerad än separat två-kolumn. */
.numbered-flow {
  display: grid;
  /* 3 kolumner ger en pyramid/diamantform: box 1 + 6 fullbredd (span 3),
     box 2 + 5 spannar 2 kolumner (lite bredare), box 3 + 4 spannar 1
     kolumn (smalast bredvid bilden). */
  grid-template-columns: 1fr 0.5fr 1.5fr;
  grid-template-rows: auto auto auto auto auto auto;
  gap: var(--space-sm) var(--space-lg);
  margin: var(--space-md) 0;
  align-items: stretch;
}

.numbered-flow > .content-card:first-child,
.numbered-flow > .content-card:last-child {
  grid-column: 1 / -1;
}

.numbered-flow > .content-card:nth-child(2),
.numbered-flow > .content-card:nth-child(5) {
  grid-column: 1 / span 2;
}

.numbered-flow > .content-card {
  grid-column: 1;
  /* Flex-layout så att texten hamnar bredvid nummercirkeln (inte under). */
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  /* Ta bort den gula border-top som .content-card har default. */
  border-top: 1px solid var(--color-border-subtle);
}

.numbered-flow > .content-card .content-card__inner {
  min-width: 0;
  flex: 1;
}

.numbered-flow__image {
  grid-column: 3;
  grid-row: 2 / span 4;
  place-self: center;
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
  cursor: zoom-in;
}

/* Vertikal connector mellan numrerade cirklarna i samma kolumn.
   Kopierar logik från .card-grid--numbered men anpassad för grid. */
.numbered-flow > .content-card {
  position: relative;
}

.numbered-flow > .content-card:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--space-lg) + 18px);
  top: calc(var(--space-md) + 36px);
  bottom: calc(var(--space-sm) * -1);
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(57, 61, 82, 0.25),
    rgba(57, 61, 82, 0.10)
  );
  z-index: 0;
}

@media (max-width: 768px) {
  .numbered-flow {
    grid-template-columns: 1fr;
  }
  .numbered-flow > .content-card,
  .numbered-flow > .content-card:first-child,
  .numbered-flow > .content-card:last-child {
    grid-column: 1;
  }
  .numbered-flow__image {
    grid-column: 1;
    grid-row: auto;
    width: 60%;
    margin: var(--space-md) auto;
  }
}

/* ─── Numbered-flow för faser med inbäddad confirmation ─────
   Variant av .numbered-flow där children är <details>-element istället
   för .content-card. Använder enklare 2-kolumners layout (inte diamant)
   eftersom utfällda dropdowns ger ojämn rad-höjd som spräcker pyramiden.
   Confirmation-formulären flyttas in i föregående <details> via JS
   (course-phases.js) så att "Läst"-checkboxen visas inuti den utfällda
   fasen. */
.numbered-flow--phases {
  grid-template-columns: 1fr 44%;
  align-items: start;
}

.numbered-flow--phases > details:first-of-type,
.numbered-flow--phases > details:last-of-type {
  grid-column: 1;
}

.numbered-flow--phases > details {
  grid-column: 1;
}

.numbered-flow--phases > details.content-details {
  margin: 0 !important;
}

.numbered-flow--phases > .numbered-flow__image {
  grid-column: 2;
  grid-row: 1 / -1;
  max-width: 460px;
  align-self: center;
}

/* Confirmation-form kan ligga som sibling efter details i HTML, men
   flyttas in via JS. Som fallback om JS inte körs: forma skicka och
   låt det ligga som vanligt i flow. */
.numbered-flow--phases > form.confirmation-block {
  grid-column: 1;
}

/* När formen har flyttats in i details (via JS): inom-details-styling */
details.content-details > form.confirmation-block {
  margin: 0 var(--space-md) var(--space-sm) calc(var(--space-md) + 18px);
  padding-top: var(--space-2xs);
  border-top: 1px dashed rgba(57, 61, 82, 0.18);
}

/* ─── Timeline-variant — tidsfrister i 3 kort på bredden ────
   Opt-in via CardGridBlock(variant="timeline"). Vit bg, gul border-top,
   stort tal som meta, rubrik, punktlista i body. Porterad från v1:s
   "Rapporteringens tidslinje". */
.card-grid--timeline .content-card {
  background: #ffffff;
  border: 1px solid #e8dcc8;
  border-top: 4px solid var(--color-gold-primary);
  border-radius: 10px;
  padding: var(--space-md) var(--space-md);
  text-align: center;
  box-shadow: 0 2px 8px rgba(254, 186, 11, 0.06);
}

.card-grid--timeline .content-card__meta {
  font-size: 1.6rem;
  font-weight: var(--weight-heavy);
  color: var(--color-navy);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--space-2xs);
  display: block;
}

.card-grid--timeline .content-card__heading {
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  margin: 0 0 var(--space-sm) 0;
}

.card-grid--timeline .content-card__body {
  text-align: left;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.card-grid--timeline .content-card__body ul {
  margin: 0 0 var(--space-xs) 0;
  padding-left: 1.1rem;
}

.card-grid--timeline .content-card__body li + li {
  margin-top: 2px;
}

.card-grid--timeline .content-card__body p {
  margin: var(--space-xs) 0 0 0;
}

.card-grid--timeline .content-card__highlight {
  display: block;
  margin-top: var(--space-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
}

/* ─── Question-variant — numrerade frågor på bredden ─────────
   Opt-in via CardGridBlock(variant="question"). Gul nummercirkel
   inline med rubrik. Använd när korten är korta påståenden eller
   frågor och bara `meta` + `heading` används (body tom). */
.card-grid--question .content-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: #ffffff;
  border: 1px solid #e8dcc8;
  border-top: 1px solid #e8dcc8;
  border-left: 4px solid var(--color-gold-primary);
  border-radius: 2px 10px 10px 2px;
  padding: 14px 16px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(254, 186, 11, 0.06);
  min-height: 56px;
}

.card-grid--question .content-card__meta {
  background: var(--color-gold-primary);
  color: #ffffff;
  font-weight: var(--weight-bold);
  font-size: 0.78rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

.card-grid--question .content-card__heading {
  font-size: 0.88rem;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  margin: 0;
  flex: 1;
}

.card-grid--question .content-card__body {
  display: none;
}

/* ─── Info-variant — listbaserade infokort ───────────────────
   Opt-in via CardGridBlock(variant="info"). Vit bg, gul border-top,
   rubrik + valfri sub-text + rubrikade `<ul>`-sektioner.
   Använd när korten innehåller flera punktlistor under egna rubriker. */
.card-grid--info .content-card {
  background: #ffffff;
  border: 1px solid #e8dcc8;
  border-top: 4px solid var(--color-gold-primary);
  border-radius: 10px;
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 2px 8px rgba(254, 186, 11, 0.06);
}

.card-grid--info .content-card__heading {
  font-size: 0.95rem;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  margin: 0 0 var(--space-2xs) 0;
}

.card-grid--info .content-card__sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm) 0;
}

.card-grid--info .content-card__label {
  font-size: 0.85rem;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  margin: var(--space-sm) 0 var(--space-2xs) 0;
}

.card-grid--info .content-card__body ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--color-text-main);
  line-height: 1.7;
}

.card-grid--info .content-card__body li + li {
  margin-top: 2px;
}

/* ─── Slate-variant — neutral blå/grå ────────────────────────
   Opt-in via CardGridBlock(variant="slate"). Kall slate-palett som
   bryter den gula dominansen på sidor med många boxar. Lämplig för
   strukturerande/definitionsboxar (t.ex. CIA-triaden) där guld vore
   för dramatiskt. */
.card-grid--slate .content-card {
  background: #f7f8fa;
  border: 1px solid rgba(57, 61, 82, 0.12);
  border-top: 3px solid #5C6480;
  border-radius: 10px;
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 2px 8px rgba(57, 61, 82, 0.04);
  text-align: center;
}

.card-grid--slate .content-card__heading {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  margin: 0 0 var(--space-2xs) 0;
}

.card-grid--slate .content-card__body {
  color: var(--color-text-main);
  font-size: var(--font-size-small);
}

.card-grid--slate .content-card__meta {
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  color: #5C6480;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2xs);
}

/* ─── Left-accent variant — kort med gul vänsterkant + vit bg ────
   Opt-in via CardGridBlock(variant="left-accent"). V1-stil för
   kompakta listor av ord+förklaring (Risklandskapet, Ledningens
   ansvar). */
.card-grid--left-accent {
  gap: var(--space-sm);
}

.card-grid--left-accent .content-card {
  background: #ffffff;
  border: 1px solid rgba(57, 61, 82, 0.08);
  border-left: 4px solid var(--color-gold-primary);
  border-radius: 2px 10px 10px 2px;
  border-top: none;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(57, 61, 82, 0.05);
}

.card-grid--left-accent .content-card__heading {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  margin: 0 0 var(--space-2xs) 0;
}

.card-grid--left-accent .content-card__body {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ─── Aim variant — numrerade målkort i mjuk gul ─────────────
   Opt-in via CardGridBlock(variant="aim"). Använd när ett par
   mål/syften ska radas upp i en kolumn (Block 6 "Effekten av
   kontinuitetshantering"). */
.card-grid--aim {
  gap: var(--space-sm);
}

.card-grid--aim .content-card {
  background: #faf6ef;
  border: 1px solid rgba(254, 186, 11, 0.18);
  border-left: 4px solid var(--color-gold-primary);
  border-top: none;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-sm);
  row-gap: 2px;
  align-items: start;
}

.card-grid--aim .content-card__meta {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: start;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #ffffff;
  font-weight: var(--weight-bold);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.card-grid--aim .content-card__heading {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  margin: 0 0 2px 0;
}

.card-grid--aim .content-card__body {
  font-size: 0.9rem;
  color: var(--color-text-main);
  margin: 0;
}

/* ─── Escalation-variant — eskalerande färgskala per kort ─────
   Opt-in via CardGridBlock(variant="escalation"). Per-kort accent
   ("known"/"uncertain"/"surprise") ger gul → orange → röd, som visar
   stigande grad av osäkerhet. Porterad från v1 Block 6 "Prioritera". */
.card-grid--escalation .content-card {
  border: 1px solid rgba(57, 61, 82, 0.06);
  border-top: none;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(57, 61, 82, 0.04);
}

.card-grid--escalation .content-card--known {
  background: #faf6ef;
  border-left: 4px solid var(--color-gold-primary);
}
.card-grid--escalation .content-card--known .content-card__heading {
  color: var(--color-navy);
}

.card-grid--escalation .content-card--uncertain {
  background: #FFFBEB;
  border-left: 4px solid #D97706;
}
.card-grid--escalation .content-card--uncertain .content-card__heading {
  color: #D97706;
}

.card-grid--escalation .content-card--surprise {
  background: #FEF2F2;
  border-left: 4px solid #DC2626;
}
.card-grid--escalation .content-card--surprise .content-card__heading {
  color: #DC2626;
}

.card-grid--escalation .content-card__heading {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-2xs) 0;
}

.card-grid--escalation .content-card__body {
  font-size: 0.92rem;
  color: var(--color-text-main);
  margin: 0;
}

/* ─── Top-numbered variant — gul topkant + stor bold siffra ─
   Opt-in via CardGridBlock(variant="top-numbered"). V1-stil för
   metod/process-kort där siffran ska vara visuellt dominant
   (t.ex. Block 6 "Metod"). Skiljer sig från numbered (vertikal
   sekvens) och aim (cream-bg + navy-cirkel). */
.card-grid--top-numbered .content-card {
  background: #ffffff;
  border: 1px solid rgba(254, 186, 11, 0.18);
  border-top: 4px solid var(--color-gold-primary);
  border-radius: 10px;
  padding: var(--space-lg);
  box-shadow: 0 2px 8px rgba(57, 61, 82, 0.05);
}

.card-grid--top-numbered .content-card__meta {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 4px 0;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
}

.card-grid--top-numbered .content-card__heading {
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  margin: 0 0 var(--space-sm) 0;
}

.card-grid--top-numbered .content-card__body {
  font-size: 0.92rem;
  color: var(--color-text-main);
}

.card-grid--top-numbered .content-card__sub {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm) 0;
}

.card-grid--top-numbered .content-card__label {
  font-size: 0.85rem;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  margin: var(--space-sm) 0 var(--space-2xs) 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card-grid--top-numbered .content-card__body ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--color-text-main);
  line-height: 1.7;
}

.card-grid--top-numbered .content-card__body li + li {
  margin-top: 2px;
}

/* ─── Course-parts (Del 1 / Del 2) — Block 7 STEP_2 ────────
   Två kort sida vid sida: grön = klar, gul = nästa. Porterat
   från v1 module_07._step_2. */
.course-parts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: var(--space-md) 0;
}

@media (min-width: 640px) {
  .course-parts { grid-template-columns: 1fr 1fr; }
}

.course-parts__card {
  text-align: center;
  border-radius: 12px;
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.course-parts__card--done {
  background: rgba(21, 128, 61, 0.08);
  border: 2px solid #16a34a;
}

.course-parts__card--next {
  background: rgba(254, 186, 11, 0.08);
  border: 2px solid var(--color-gold-primary);
}

.course-parts__icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 6px;
}

.course-parts__card--done .course-parts__icon { color: #16a34a; }

.course-parts__title {
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  font-size: 1rem;
  margin-bottom: 2px;
}

.course-parts__sub {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.course-parts__note {
  margin-top: 8px;
  font-size: 0.875rem;
  color: #7a5500;
}

/* ─── CTA-card (navy gradient + gold button) ─────────────────
   Slut-CTA på Block 7 STEP_2: "Redo för Del 2?". Porterat från
   v1 module_07._step_2 (kontakta kursledaren-knapp). */
.cta-card {
  background: linear-gradient(135deg, var(--color-navy) 0%, #4a4a5e 100%);
  border-radius: 12px;
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-md) 0;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.cta-card__heading {
  font-size: 1.05rem;
  font-weight: var(--weight-bold);
  color: #ffffff;
  margin-bottom: 6px;
}

.cta-card__body {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--space-md) 0;
  line-height: 1.6;
}

.cta-card__body strong {
  color: #ffffff;
}

.cta-card__button {
  display: inline-block;
  background: var(--color-gold-primary);
  color: var(--color-navy);
  font-weight: var(--weight-bold);
  font-size: 0.92rem;
  padding: 10px 24px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(254, 186, 11, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cta-card__button:hover,
.cta-card__button:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(254, 186, 11, 0.45);
  text-decoration: none;
}

/* ─── Area-mapping expander inuti GridCard.body ─────────────
   Används på Block 1 steg 7 för "Minimikrav i NIS2 som ofta hanteras här". */
.area-mapping {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px dashed rgba(57, 61, 82, 0.18);
}

.area-mapping summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  list-style: none;
  padding: 4px 0;
  user-select: none;
}

.area-mapping summary::-webkit-details-marker {
  display: none;
}

.area-mapping summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 0.7rem;
  color: var(--color-gold-primary);
  transition: transform 0.2s ease;
}

.area-mapping[open] > summary::before {
  transform: rotate(90deg);
}

.area-mapping summary:hover {
  color: #9a6b00;
}

.area-mapping ul {
  margin: var(--space-xs) 0 0 0;
  padding-left: 1.6rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.area-mapping li + li {
  margin-top: 2px;
}

.content-card__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2xs);
}

.content-card__heading {
  margin: 0 0 var(--space-xs) 0;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
}

.content-card__body {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* ─── Callout split-body (STEP_4 kort 1) ─────────────────────
   2-kol inuti callout__body: beslutslista vänster, roller-panel höger. */
.callout-body-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-md);
  align-items: start;
}

@media (max-width: 639px) {
  .callout-body-split { grid-template-columns: 1fr; }
}

.callout-body-split__roles {
  background: rgba(57, 61, 82, 0.06);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
  line-height: 1.6;
}

.callout-body-split__roles p {
  margin: 0 0 var(--space-xs) 0;
}

.callout-body-split__roles p:last-child {
  margin: 0;
}

.callout-body-split__roles strong {
  color: var(--color-navy);
}

/* ─── Decision-pair cards (STEP_6 Delegering) ─────────────────
   Kort 1 = röd (kan inte delegeras), Kort 2 = grön (kan delegeras). */
.card-grid--decision-pair .content-card:first-child {
  border-left: 4px solid #dc2626;
  background: rgba(220, 38, 38, 0.04);
}

.card-grid--decision-pair .content-card:first-child .content-card__meta {
  color: #b91c1c;
}

.card-grid--decision-pair .content-card:last-child {
  border-left: 4px solid #16a34a;
  background: rgba(22, 163, 74, 0.04);
}

.card-grid--decision-pair .content-card:last-child .content-card__meta {
  color: #15803d;
}

/* ─── Quiz ───────────────────────────────────────────────── */

.quiz {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
}

.quiz__eyebrow {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: var(--space-xs);
}

.quiz__heading {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-size-h3);
}

.quiz__intro {
  margin: 0 0 var(--space-md) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.quiz__question {
  margin: 0;
  padding: var(--space-md) 0;
  border: none;
}

.quiz__question:first-of-type {
  padding-top: 0;
}

.quiz__question-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
  width: 100%;
}

.quiz__question-number {
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.quiz__question-text {
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  font-size: 1rem;
  line-height: var(--line-height-normal);
}

.quiz__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(57, 61, 82, 0.15);
}

.quiz__question:last-of-type .quiz__options {
  border-bottom: none;
  padding-bottom: 0;
}

.quiz__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 2px var(--space-sm);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: transparent;
  transition: background var(--transition-fast);
  min-height: var(--touch-target);
}

.quiz__option:hover {
  background: var(--color-gold-tint);
}

.quiz__option input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--color-gold-primary);
  min-width: 18px;
  min-height: 18px;
}

.quiz__option:has(input:checked) {
  background: var(--color-gold-tint);
}

.quiz__form .btn {
  margin-top: var(--space-md);
}

.quiz__result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.quiz__result--pass {
  background: var(--color-success-bg);
  border-left: 4px solid var(--color-success);
  color: #166534;
}

.quiz__result--fail {
  background: var(--color-error-bg);
  border-left: 4px solid var(--color-error);
  color: #991b1b;
}

.quiz__result strong {
  font-size: 1.05rem;
}

.quiz__reset-form {
  margin: var(--space-md) 0 0 0;
}

/* ─── Quiz per-fråga-feedback ────────────────────────────── */

.quiz__feedback {
  list-style: none;
  margin: var(--space-md) 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.quiz__feedback-item {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  border-left-width: 4px;
  background: #ffffff;
}

.quiz__feedback-item--correct {
  border-left-color: var(--color-success);
  background: var(--color-success-bg);
}

.quiz__feedback-item--incorrect {
  border-left-color: var(--color-error);
  background: var(--color-error-bg);
}

.quiz__feedback-question {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-xs);
}

.quiz__feedback-number {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}

.quiz__feedback-text {
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
}

.quiz__feedback-status {
  font-size: var(--font-size-small);
  margin-bottom: var(--space-xs);
}

.quiz__feedback-status--correct {
  color: #166534;
}

.quiz__feedback-status--incorrect {
  color: #991b1b;
}

.quiz__feedback-explanation {
  font-size: var(--font-size-small);
  color: var(--color-text-main);
  padding: var(--space-xs) var(--space-sm);
  background: #ffffff;
  border-radius: var(--radius-xs);
  border-left: 3px solid var(--color-success);
}

.quiz__feedback-hint {
  font-size: var(--font-size-small);
  color: var(--color-text-main);
  padding: var(--space-xs) var(--space-sm);
  background: #ffffff;
  border-radius: var(--radius-xs);
  border-left: 3px solid var(--color-gold-primary);
}

/* ─── Reflection (renderas inuti .callout via _reflection.html) ──
   Designstandard: gul CalloutBlock-stil; bara själva frågorna
   ligger i lådan, "besvaras i mallen"-noten utanför. */

.callout--reflection .reflection__prompt {
  margin: 0 0 var(--space-md) 0;
  font-size: 1rem;
  color: var(--color-text-main);
  line-height: var(--line-height-relaxed);
}

.callout--reflection .reflection__support-label {
  margin: var(--space-md) 0 var(--space-xs) 0;
  font-size: var(--font-size-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-navy);
}

.callout--reflection .reflection__support-list {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--font-size-small);
  color: var(--color-text-main);
  line-height: 1.7;
}

.callout--reflection .reflection__support-list li + li {
  margin-top: var(--space-2xs);
}

.reflection__note {
  margin: var(--space-sm) 0 var(--space-lg) 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-style: italic;
}

.reflection__form textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  line-height: var(--line-height-relaxed);
  resize: vertical;
  min-height: 160px;
}

.reflection__form textarea:focus {
  outline: none;
  border-color: var(--color-gold-primary);
  box-shadow: 0 0 0 3px var(--color-gold-tint);
}

.reflection__footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.reflection__saved-indicator {
  font-size: var(--font-size-small);
  font-weight: var(--weight-semibold);
  color: var(--color-success);
}

.reflection__saved-indicator--muted {
  color: var(--color-text-muted);
  font-weight: var(--weight-normal);
}

/* ─── Completion banner (Block 7 steg 1) ────────────────── */

.completion-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-navy);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
}

.completion-banner__check {
  font-size: 1.2rem;
  color: var(--color-gold-primary);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.completion-banner__text {
  font-size: var(--font-size-body);
  font-weight: var(--weight-medium);
  color: #fff;
}

/* ─── Block checklist (Block 7 sammanfattning) ───────────── */

.block-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.block-checklist li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(92, 100, 128, 0.12);
  color: var(--color-text);
}

.block-checklist li:last-child {
  border-bottom: none;
}

.block-checklist__icon {
  color: var(--color-gold-primary);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  padding-top: 2px;
}

.block-checklist__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.block-checklist__title {
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  font-size: var(--font-size-body);
}

.block-checklist__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ─── Gate-notice ────────────────────────────────────────── */

.gate-notice {
  background: var(--color-gold-tint);
  border-left: 4px solid var(--color-gold-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
  color: var(--color-navy);
}

.gate-notice strong {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: var(--weight-semibold);
}

.gate-notice ul {
  margin: 0;
  padding-left: var(--space-lg);
  font-size: var(--font-size-small);
  color: var(--color-text-main);
}

.gate-notice li + li {
  margin-top: var(--space-2xs);
}

.gate-notice--hidden {
  display: none;
}

/* ─── ProcessStepsBlock — sekventiell processvisualisering ──────
   Gradient grå-blå navy från ljus (steg 1) till mörk (steg 5/sista),
   med små ›-pilar mellan stegen. Färgerna porterade exakt från v1
   (modules/module_04.py "Krav genom livscykeln"). */
.process-steps {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: var(--space-lg) 0 var(--space-md) 0;
}

.process-steps__item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}

.process-steps__header {
  padding: 12px 8px;
  font-weight: 600;
  font-size: 0.78rem;
  text-align: center;
  line-height: 1.3;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
}

.process-steps__body {
  background: #F5F6F8;
  padding: 10px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #163336;
  flex: 1;
}

.process-steps__arrow {
  display: flex;
  align-items: center;
  padding: 0 2px;
  color: #8B93A8;
  font-size: 1.4rem;
  font-weight: bold;
  user-select: none;
}

/* Gradient: ljus → mörk över upp till 6 steg.
   v1-paletten (5 steg). 6:e steget faller tillbaka på navy. */
.process-steps__item--s1 { border: 1px solid #C8CCD4; border-bottom: none; }
.process-steps__item--s1 .process-steps__header { background: #EAECF0; color: #2D3142; }
.process-steps__item--s1 .process-steps__body { border: 1px solid #C8CCD4; border-top: none; }

.process-steps__item--s2 { border: 1px solid #A8AEBE; border-bottom: none; }
.process-steps__item--s2 .process-steps__header { background: #C8CDD8; color: #2D3142; }
.process-steps__item--s2 .process-steps__body { border: 1px solid #A8AEBE; border-top: none; }

.process-steps__item--s3 { border: 1px solid #6E7690; border-bottom: none; }
.process-steps__item--s3 .process-steps__header { background: #8B93A8; color: #FFFFFF; }
.process-steps__item--s3 .process-steps__body { border: 1px solid #6E7690; border-top: none; }

.process-steps__item--s4 { border: 1px solid #48506A; border-bottom: none; }
.process-steps__item--s4 .process-steps__header { background: #5C6480; color: #FFFFFF; }
.process-steps__item--s4 .process-steps__body { border: 1px solid #48506A; border-top: none; }

.process-steps__item--s5,
.process-steps__item--s6 { border: 1px solid #1E2233; border-bottom: none; }
.process-steps__item--s5 .process-steps__header,
.process-steps__item--s6 .process-steps__header { background: #2D3142; color: #FFFFFF; }
.process-steps__item--s5 .process-steps__body,
.process-steps__item--s6 .process-steps__body { border: 1px solid #1E2233; border-top: none; }

/* Mobil/surfplatta: stapla vertikalt, rotera pilen ner */
@media (max-width: 720px) {
  .process-steps {
    flex-direction: column;
    gap: 4px;
  }
  .process-steps__arrow {
    transform: rotate(90deg);
    align-self: center;
    padding: 4px 0;
  }
}

/* ─── ConfirmationBlock — bekräftelse-checkbox ──────────────
   Pedagogisk markering: deltagaren bekräftar att hen läst/förstått/
   gjort något innan Nästa-knappen aktiveras. Persistent state per
   (deltagare, modul, steg, key) i tabellen step_confirmations. */
.confirmation-block {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  background: rgba(57, 61, 82, 0.04);
  border: 1px solid rgba(57, 61, 82, 0.12);
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.confirmation-block--checked {
  background: rgba(57, 61, 82, 0.08);
  border-color: rgba(57, 61, 82, 0.25);
}

.confirmation-block__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: var(--color-text-main);
  user-select: none;
}

.confirmation-block__checkbox {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: var(--color-navy, #393D52);
}

.confirmation-block__text {
  flex: 1;
}

/* Disabled-stil för Nästa-knappen när confirmation saknas */
.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── HookBlock — dramatiskt case ('Det här hände på riktigt') ──
   Mörk navy gradient, guldband i topp, intern 💡-poäng i botten.
   Porterat från v1 .hook-box. */
.hook {
  background: linear-gradient(135deg, #2D3045 0%, #393D52 60%, #44485E 100%);
  color: #E8E6E0;
  border-radius: 12px;
  padding: 1.6rem 1.8rem;
  margin: var(--space-lg) 0;
  font-size: 0.95rem;
  line-height: 1.85;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}

.hook::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #C48800 0%, #FEBA0B 40%, #FFE07A 70%, #FEBA0B 100%);
  opacity: 0.9;
}

.hook__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #D0C8B8;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.hook__title {
  color: #FFFFFF;
  font-size: 1.15rem;
  margin: 0 0 0.9rem 0;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hook__body {
  color: #D8D5CC;
}

.hook__body p,
.hook__body strong,
.hook__body em {
  color: inherit;
}

.hook__body strong { color: #E8E6E0; font-weight: 700; }
.hook__body em { color: #D0C8B8; font-style: italic; }

.hook__point {
  background: rgba(254,186,11,0.12);
  border: 1px solid rgba(254,186,11,0.25);
  border-radius: 10px;
  padding: 0.8rem 1.1rem;
  margin-top: 1.1rem;
  font-size: 0.9rem;
  color: #E8DCC5;
  font-weight: 500;
}

/* ─── CalloutBlock sektor-varianter ────────────────────────
   När callout används inuti AdaptiveBlock (per org_type) så markerar
   sektorfärgen vilken sektor texten gäller. Default (utan sector)
   förblir gul/guld. Porterat från v1 callout-statlig/region/kommun/foretag. */
.callout--sector-statlig {
  background: rgba(29,91,168,0.06);
  border: 1px solid rgba(59,130,246,0.18);
  border-left: 4px solid #3B82F6;
  color: #1D5BA8;
  box-shadow: 0 2px 10px rgba(29,91,168,0.05);
}
.callout--sector-statlig .callout__title { color: #1D5BA8; }

.callout--sector-region {
  background: rgba(122,101,32,0.06);
  border: 1px solid rgba(254,186,11,0.18);
  border-left: 4px solid #9A6B00;
  color: #7A6520;
  box-shadow: 0 2px 10px rgba(122,101,32,0.05);
}
.callout--sector-region .callout__title { color: #7A6520; }

.callout--sector-kommun {
  background: rgba(146,64,14,0.06);
  border: 1px solid rgba(217,119,6,0.18);
  border-left: 4px solid #D97706;
  color: #92400E;
  box-shadow: 0 2px 10px rgba(146,64,14,0.05);
}
.callout--sector-kommun .callout__title { color: #92400E; }

.callout--sector-foretag {
  background: rgba(91,33,182,0.06);
  border: 1px solid rgba(124,58,237,0.18);
  border-left: 4px solid #7C3AED;
  color: #5B21B6;
  box-shadow: 0 2px 10px rgba(91,33,182,0.05);
}
.callout--sector-foretag .callout__title { color: #5B21B6; }

/* ─── CalloutBlock tone-variant: slate ────────────────────
   Neutral blå/grå-tonalitet för callouts som behöver bryta gul
   dominans utan att kopplas till en specifik sektor. Används
   t.ex. för "Den centrala frågan"-boxar på sidor som annars är
   gulttunga. */
.callout--tone-slate {
  background: #f7f8fa;
  border: 1px solid rgba(57, 61, 82, 0.12);
  border-left: 4px solid #5C6480;
  color: var(--color-text-main);
  box-shadow: 0 2px 10px rgba(57, 61, 82, 0.04);
}
.callout--tone-slate .callout__title {
  color: #5C6480;
}
.callout--tone-slate .callout__body table th {
  background: rgba(92, 100, 128, 0.10);
  border-bottom: 2px solid rgba(92, 100, 128, 0.35);
}

/* ─── CalloutBlock highlight-variant ──────────────────────
   När highlight=True markeras boxen extra tydligt — för att signalera
   "detta gäller specifikt er". Används bl.a. på Klassificering-sidan
   där båda klassificeringarna visas men deltagarens markeras. */
.callout--highlight {
  position: relative;
  border-width: 2px;
  border-color: var(--color-gold-primary);
  border-left-width: 4px;
  border-left-color: var(--color-gold-dark, #C48800);
  background: rgba(254, 186, 11, 0.10);
  box-shadow: 0 4px 18px rgba(254, 186, 11, 0.12), 0 1px 4px rgba(57, 61, 82, 0.06);
  padding-top: calc(var(--space-lg) + 0.4rem);
}

.callout__badge {
  position: absolute;
  top: -0.7rem;
  left: var(--space-lg);
  background: var(--color-gold-primary);
  color: var(--color-navy);
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(154, 107, 0, 0.18);
  white-space: nowrap;
}

/* ─── ThoughtSupportBlock — stödfrasrutor vid reflektion ────
   Mjuk grå-vit, lite skugga. Inte primärt pedagogisk — stödmaterial. */
.thought-support {
  background: #FAFAFA;
  border: 1px solid rgba(0,0,0,0.06);
  border-left: 3px solid #D4D4D4;
  border-radius: 0 10px 10px 0;
  padding: 0.9rem 1.2rem;
  margin: var(--space-md) 0;
  font-size: var(--font-size-small);
  color: #5A5A6E;
  line-height: 1.75;
  box-shadow: 0 1px 6px rgba(0,0,0,0.03);
}

.thought-support__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #5A5A6E;
  margin-bottom: 0.5rem;
}

.thought-support__list {
  margin: 0;
  padding-left: 1.2rem;
}

.thought-support__list li {
  margin-bottom: 4px;
}

/* ─── ForwardRefBlock — subtle hänvisning framåt ─────────── */
.forward-ref {
  background: rgba(92,100,128,0.06);
  border: 1px solid rgba(92,100,128,0.12);
  border-left: 3px solid #8B93A8;
  border-radius: 0 10px 10px 0;
  padding: 0.6rem 1.1rem;
  margin: var(--space-md) 0;
  font-size: 0.88rem;
  color: #5C6480;
  font-style: italic;
}

.forward-ref__arrow {
  font-style: normal;
  margin-right: 0.3rem;
  color: #8B93A8;
}

/* ─── WarningBlock — porterat från v1 .warning-box ─────────
   Orange/brun gradient. För juridiska eller konsekvensbärande varningar. */
.warning {
  background: linear-gradient(135deg, rgba(180,83,9,0.08) 0%, rgba(180,83,9,0.12) 100%);
  border: 1px solid rgba(180,83,9,0.22);
  border-left: 4px solid #D97706;
  border-radius: 0 12px 12px 0;
  padding: 0.7rem 1.2rem;
  margin: var(--space-md) 0;
  font-size: 0.92rem;
  color: #3D1E06;
  line-height: 1.75;
  box-shadow: 0 2px 10px rgba(180,83,9,0.06);
}

.warning__icon {
  margin-right: 0.3rem;
}

.two-column__col .warning {
  margin-top: var(--space-xl);
}

/* ─── Leverantörspyramid (Modul 4 steg 3, port från v1) ──────
   Tre nivåer (kritiska/viktiga/övriga) staplade i en triangel. */
.leverantor-pyramid {
  display: flex;
  justify-content: center;
}

.leverantor-pyramid__inner {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 7 / 6;
}

.leverantor-pyramid svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.leverantor-pyramid__tier {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 6px 14px;
  border-radius: 5px;
  font-weight: 600;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.3;
  z-index: 2;
}

.leverantor-pyramid__tier--1 {
  top: 16%;
  background: #B84242;
  min-width: 90px;
}

.leverantor-pyramid__tier--2 {
  top: 47%;
  background: #C47832;
  min-width: 120px;
  padding: 6px 16px;
}

.leverantor-pyramid__tier--3 {
  top: 77%;
  background: var(--color-gold-primary);
  min-width: 150px;
  padding: 6px 20px;
}

/* ─── Risk-pair card grid (Modul 4 steg 4) ──────────────────
   Två kontrasterande kort sida vid sida för att signalera intern
   sårbarhet (slate) vs extern attack (mörkröd). Bryter den gula
   dominansen på sidor som annars stackar callouts och insights.
   Korten innehåller en integrerad exempel-lista separerad med en
   tunn divider. */
.card-grid--risk-pair {
  gap: var(--space-lg);
  align-items: stretch;
}

.card-grid--risk-pair .content-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-top: none;
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: 0 2px 8px rgba(57, 61, 82, 0.06);
}

.card-grid--risk-pair .content-card--vuln {
  border-left-color: #5C6480;
}

.card-grid--risk-pair .content-card--threat {
  border-left-color: #B84242;
}

.card-grid--risk-pair .content-card__meta {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}

.card-grid--risk-pair .content-card--vuln .content-card__meta {
  background: #EAECF0;
  color: #2D3142;
}

.card-grid--risk-pair .content-card--threat .content-card__meta {
  background: #FBE9E9;
  color: #8A2E2E;
}

.card-grid--risk-pair .content-card__heading {
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

.card-grid--risk-pair .content-card__body {
  margin: 0;
  font-size: 0.95rem;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-main);
}

.card-grid--risk-pair .content-card__body p {
  margin: 0 0 var(--space-sm) 0;
}

.card-grid--risk-pair .content-card__body p:last-child {
  margin-bottom: 0;
}

.risk-card__examples {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px dashed rgba(57, 61, 82, 0.18);
}

.risk-card__examples-label {
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.risk-card__examples ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-main);
}

.risk-card__examples li + li {
  margin-top: 2px;
}

/* ─── Hidden-risks panel (Modul 4 steg 4) ───────────────────
   Mjuk slate-ruta för "övriga dolda risker" som varken är gul
   callout eller röd warning. Markerar fördjupning utan att
   konkurrera visuellt med risk-paret ovan. */
.hidden-risks {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  background: #F4F5F8;
  border: 1px solid #DDE0E6;
  border-radius: var(--radius-md);
}

.hidden-risks__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  margin: 0 0 var(--space-xs) 0;
}

.hidden-risks ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.92rem;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-main);
}

.hidden-risks li + li {
  margin-top: 4px;
}

/* ─── Tvåkolumns-lista ───────────────────────────────────────
   Opt-in via class="list--two-col" på en <ul>.
   Kollapsar till en kolumn på smala skärmar. */
.list--two-col {
  columns: 2;
  column-gap: var(--space-xl);
  padding-left: 1.2rem;
  margin: var(--space-sm) 0;
}

.list--two-col li {
  break-inside: avoid;
  margin-bottom: var(--space-2xs);
}

@media (max-width: 639px) {
  .list--two-col {
    columns: 1;
  }
}