/*
  Friskiskompassen – Design System v2
  ────────────────────────────────────
  Brand: Friskis&Svettis
  Red: #e31836 (confirmed)
  Font: DM Sans (stand-in for Apercu)
  Aesthetic: Friskis brand confidence + Tufte data minimalism
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ─── Tokens ─────────────────────────────────────────── */
:root {
  /* Friskis brand */
  --red:        #e31836;
  --red-dark:   #b81129;
  --red-faint:  rgba(227, 24, 54, 0.07);
  --black:      #111111;   /* Tufte ink-black */
  --white:      #fffff8;   /* Tufte paper-white */
  --paper:      #fffff8;   /* alias for white, used in cards and nav */

  /* Cluster palette */
  --cl1:        #e31836;   /* Stora föreningar */
  --cl2:        #1A6B3C;   /* Medelstora–stora */
  --cl3:        #1A4F96;   /* Medelstora–små */
  --cl4:        #B86800;   /* Små */

  /* Surfaces */
  --bg:         #fffff8;   /* Tufte paper-white throughout */
  --surface:    #fffff8;
  --border:     #E8E4DE;
  --border-mid: #CECAC2;

  /* Text */
  --text:       #111111;
  --muted:      #777777;
  --faint:      #AAAAAA;

  /* Chart */
  --chart-grid: #EFECE7;   /* very light horizontal grid lines */

  /* KPI status */
  --on-target:    #1A6B3C;
  --near-target:  #B86800;
  --below-target: #e31836;

  /* Typography */
  --font: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --max-w:  760px;
  --radius: 2px;
  --gap:    1.75rem;
}

/* ─── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 116px; /* site-nav 72px + page-nav ~44px */
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Layout ─────────────────────────────────────────── */
.page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.75rem;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ─── Navigation ─────────────────────────────────────── */
.site-nav {
  background: var(--red);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 72px;
}

.site-nav__logo {
  display: block;
  flex-shrink: 0;
  height: 48px;
  width: auto;
}

.site-nav__logo img {
  height: 48px;
  width: auto;
  display: block;
  /* White logo on red bg — if image has white bg, blend it out */
  mix-blend-mode: screen;
}

.site-nav__spacer { flex: 1; }

.site-nav__meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.8rem;
}

.site-nav__assoc {
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}

.site-nav__assoc-label {
  color: rgba(255,255,255,0.55);
  font-weight: 400;
  margin-right: 0.3rem;
}

.site-nav__logout {
  color: rgba(255,255,255,0.75);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius);
  padding: 0.25rem 0.7rem;
  background: transparent;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s;
}

.site-nav__logout:hover {
  background: rgba(255,255,255,0.15);
  color: white;
  border-color: rgba(255,255,255,0.6);
}

/* ─── Dashboard hero ─────────────────────────────────── */
.dashboard-hero {
  position: relative;
  overflow: hidden;
  height: 380px;
  border-bottom: 1px solid var(--border);
}

.dashboard-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.dashboard-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.60) 0%,
    rgba(0,0,0,0.35) 60%,
    rgba(0,0,0,0.08) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}

.dashboard-hero__content {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.75rem 2.75rem;
  box-sizing: border-box;
}

.dashboard-hero__lead {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 0.75rem;
  max-width: 620px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

.dashboard-hero__body {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  margin: 0;
  max-width: 520px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.dashboard-hero__pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.dashboard-hero__pdf-link::before {
  content: '>';
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
}
.dashboard-hero__pdf-link:hover {
  color: var(--red-dark);
  text-decoration: none;
}

@media (max-width: 720px) {
  .dashboard-hero {
    height: 360px;
  }
  .dashboard-hero__img {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
  }
  .dashboard-hero__overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.35) 55%,
      rgba(0,0,0,0.10) 100%
    );
  }
  .dashboard-hero__lead { font-size: 1.75rem; }
  .dashboard-hero__body { font-size: 0.9rem; }
  .dashboard-hero__content { padding: 0 1.25rem 1.75rem; }
}

/* ─── Scorecard strip ────────────────────────────────── */
.scorecard-strip {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 2rem 1.5rem 2.25rem;
  text-align: center;
}
.scorecard-strip__inner {
  max-width: 600px;
  margin: 0 auto;
}
.scorecard-strip__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.75rem;
}
.scorecard-strip__body {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  line-height: 1.6;
  color: var(--black);
}

/* ─── Page header (replaces old dark intro) ──────────── */
.page-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
}

.page-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.75rem;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.page-header__assoc {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.page-header__meta {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-header__sep {
  color: var(--border);
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-dot::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.status-dot--on   { color: var(--on-target); }
.status-dot--near { color: var(--near-target); }
.status-dot--off  { color: var(--below-target); }
.status-dot--on::before   { background: var(--on-target); }
.status-dot--near::before { background: var(--near-target); }
.status-dot--off::before  { background: var(--below-target); }

/* ─── Main ───────────────────────────────────────────── */
.main { padding: 2.75rem 0 5rem; }

/* ─── Section ────────────────────────────────────────── */
.section {
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--border);
}

.section:last-child {
  border-bottom: none;
}

.section__header {
  margin-bottom: 2rem;
}

.section__pillar {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-left: 3px solid var(--red);
  padding-left: 0.5rem;
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.section__title {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.section__intro {
  font-size: 0.78rem;
  color: var(--black);
  max-width: 38rem;
  line-height: 1.7;
}

/* ─── KPI block ──────────────────────────────────────── */
.kpi-block {
  margin-bottom: 3rem;
}

.kpi-block:last-child { margin-bottom: 0; }

.kpi-tag {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.1rem;
}

/* ─── Narrative text ─────────────────────────────────── */
.narrative {
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--muted);
}

.narrative p { margin-bottom: 0.8rem; }
.narrative p:last-child { margin-bottom: 0; }
.narrative strong { font-weight: 600; }

.narrative ul {
  padding-left: 1.1rem;
  margin: 0.4rem 0 0.8rem;
  color: var(--muted);
}

.narrative ul li { margin-bottom: 0.25rem; }

/* ─── Tangle hint ────────────────────────────────────── */
.tangle-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.65rem;
  font-style: normal;
  color: var(--faint);
  letter-spacing: 0.03em;
}

/* ─── Callout ────────────────────────────────────────── */
.callout {
  border-left: 2px solid var(--red);
  padding: 0.55rem 0.8rem;
  background: var(--red-faint);
  font-size: 0.85rem;
  margin: 0.75rem 0;
}

/* ─── Chart panel (right column) ────────────────────── */
.chart-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 820px) {
  .chart-panel {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
  }
}

/* ─── Chart float (Tufte: no box, no background) ─────── */
.chart-float {
  /* No border, no background, no shadow — just the chart */
}

.chart-float__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}

.chart-float__title {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 0.2rem; /* sit at the bottom of the header row */
}

.chart-float__right {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-shrink: 0;
}

.chart-float__value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

.chart-float__value--assoc {
  color: var(--red);
}

/* Observable Plot renders an <svg> directly into the div container.
   Width is controlled by charts.js (el.offsetWidth); height by Plot's
   height option. We just need overflow:visible so end-labels can spill
   past the right margin, and block display so no extra inline gap. */
.chart-float div > svg,
.chart-float > svg {
  display: block;
  overflow: visible;
  max-width: 100%;
}

.chart-float__caption {
  margin-top: 0.35rem;
  font-size: 0.68rem;
  color: var(--faint);
  line-height: 1.5;
}

/* ─── KPI status tag ─────────────────────────────────── */
.status-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  white-space: nowrap;
}

.status-tag--on   { background: #EBF5F0; color: var(--on-target); }
.status-tag--near { background: #FEF3E2; color: var(--near-target); }
.status-tag--off  { background: var(--red-faint); color: var(--below-target); }

/* ─── "Din förening" indicator ───────────────────────── */
.you-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--red);
  margin-bottom: 0.4rem;
}

.you-indicator::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ─── Cluster legend ─────────────────────────────────── */
.cluster-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 0.6rem;
}

.cluster-legend__item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

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

/* ─── Skeleton sections ──────────────────────────────── */
.skeleton-section {
  border: 1px dashed var(--border);
  border-radius: 2px;
  padding: 1.75rem;
  text-align: center;
  color: var(--faint);
  font-size: 0.82rem;
  background: var(--white);
}

.skeleton-section strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ─── KPI coming-soon list placeholder ──────────────────── */
.kpi-todo {
  background: #EDEAE4;
  border: 1px solid #D8D4CC;
  border-radius: 2px;
  padding: 1.5rem 2rem;
}
.kpi-todo__lead {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  margin: 0 0 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #D8D4CC;
}
.kpi-todo__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kpi-todo__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  font-size: 0.85rem;
  color: var(--muted);
  border-bottom: 1px solid #D8D4CC;
}
.kpi-todo__list li:last-child { border-bottom: none; }
.kpi-todo__list .kpi-todo__target {
  white-space: nowrap;
  color: var(--faint);
  font-size: 0.8rem;
}

/* ─── Skeleton chart placeholder (inside chart-float) ─── */
.skeleton-chart {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-mid);
  border-radius: 2px;
  color: var(--faint);
  font-size: 0.8rem;
  font-style: italic;
  background: var(--red-faint);
  padding: 1.5rem;
  text-align: center;
}

.econ-kpi__chart .skeleton-chart {
  min-height: 320px;
}

/* ─── Chapter header (large section divider) ──────────── */
.section--chapter {
  border: none;
  padding: 3.5rem 0 1rem;
  margin-top: 2rem;
  border-top: 3px solid var(--black);
}

.chapter-header {
  max-width: 720px;
}

.chapter-header__number {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}

.chapter-header__title {
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.chapter-header__lead {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--black);
  max-width: 640px;
}

@media (max-width: 640px) {
  .chapter-header__title { font-size: 1.8rem; }
}

/* ═══════════════════════════════════════════════════════
   ECONOMIST-STYLE KPI BLOCK  (prototype – only used on
   the Omsättningstillväxt reference section for now)
═══════════════════════════════════════════════════════ */
.econ-kpi {
  margin: 0 0 4.5rem;
  font-feature-settings: 'ss01', 'tnum';
}

.econ-kpi__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.9rem;
}

.econ-kpi__eyebrow::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--red);
  display: inline-block;
}

.econ-kpi__title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 0.65rem;
  max-width: 32ch;
}

.econ-kpi__dek {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  max-width: 58ch;
  margin-bottom: 1.75rem;
}

/* Dynamic values driven by chart hover — subtly highlighted, monospaced-lookalike */
.econ-kpi [data-dyn] {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-block;          /* so animations / background apply cleanly */
}
.econ-kpi .dyn-assoc { color: var(--red); }
.econ-kpi .dyn-riks  { color: #8A847D; }

/* Soft pulse when the value changes on hover-scrub */
.econ-kpi [data-dyn].is-updated {
  animation: dynPulse 0.35s ease-out;
}
@keyframes dynPulse {
  0%   { background: rgba(227, 24, 54, 0.12); }
  100% { background: transparent; }
}

/* Projection state — when the pointer is past the last real data point */
.econ-kpi.is-projection .dyn-assoc {
  font-style: italic;
  opacity: 0.85;
}
.econ-kpi.is-projection .dyn-assoc::after {
  content: ' prognos';
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  opacity: 0.75;
  margin-left: 0.35em;
  font-style: normal;
}

/* ─── Economist-style stat summary block ─────────────── */
.econ-kpi__stat-block {
  margin-bottom: 1.75rem;
  max-width: 52ch;
}

.econ-kpi__stat-period {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.econ-kpi__stat-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

.stat-hi {
  color: var(--red);
  font-weight: 700;
}

.nki-hi { color: var(--red); }

/* The chart sits on its own, full column width, no box */
.econ-kpi__chart {
  margin-bottom: 0.7rem;
}

.econ-kpi__source {
  font-size: 0.7rem;
  color: var(--faint);
  letter-spacing: 0.02em;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
}

/* Commentary block below the chart — same typography as econ-kpi__dek */
.econ-kpi__note {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  max-width: 58ch;
}

.econ-kpi__note p { margin-bottom: 0.65rem; }
.econ-kpi__note p:last-child { margin-bottom: 0; }

.note-inset {
  background: var(--paper);
  border: 1.5px solid var(--border);
  border-radius: 3px;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
}
.note-inset p { margin-bottom: 0; }

/* ─── Sticky horizontal page nav ────────────────────── */
.page-nav {
  position: sticky;
  top: 72px;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

.page-nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.75rem;
  display: flex;
}

.page-nav__link {
  padding: 0.7rem 1.2rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.page-nav__link:hover {
  color: var(--black);
  text-decoration: none;
}

.page-nav__link.is-active {
  color: var(--black);
  border-bottom-color: var(--black);
}

@media (max-width: 560px) {
  .page-nav__inner {
    flex-wrap: wrap;
    padding: 0;
  }
  .page-nav__link {
    flex: 0 0 50%;
    text-align: center;
    padding: 0.6rem 0.5rem 0.5rem;
    font-size: 0.72rem;
    white-space: normal;
  }
  .page-nav__link.is-active {
    color: var(--red);
    font-weight: 600;
    border-bottom-color: transparent;
  }
}

.econ-kpi__note .tangle-hint {
  display: inline;
  font-size: 0.78rem;
  color: var(--faint);
  margin-left: 0.25rem;
}

/* ─── Chapter nav ────────────────────────────────────── */

/* Base — hidden for now, implementation in progress (se todo.md) */
.chapter-nav {
  display: none;
}

.chapter-nav__link {
  display: flex;
  text-decoration: none;
  color: var(--faint);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.chapter-nav__link:hover { text-decoration: none; }

/* ── Desktop ≥ 1280px: fixed side nav ── */
@media (min-width: 1280px) {
  .chapter-nav {
    position: fixed;
    /* stays in left margin without overlapping inner content at any width ≥ 1280px */
    left: max(4px, calc(50vw - 660px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    flex-direction: column;
    width: 80px;
  }

  .chapter-nav__link {
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 0 0.85rem 0.8rem;
    border-left: 2px solid var(--border);
  }

  .chapter-nav__link:hover {
    color: var(--muted);
    border-left-color: var(--border-mid);
  }

  .chapter-nav__link.is-active {
    color: var(--red);
    border-left-color: var(--red);
  }

  .chapter-nav__num {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
    line-height: 1;
  }

  .chapter-nav__link.is-active .chapter-nav__num { opacity: 1; }

  .chapter-nav__label {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* ── Narrow / mobile < 1280px: sticky horizontal tab bar ── */
@media (max-width: 1279px) {
  .chapter-nav {
    position: sticky;
    top: 72px;
    z-index: 99;
    flex-direction: row;
    height: 44px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
  }

  .chapter-nav__link {
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 0.5rem;
    color: var(--muted);
    font-size: 0.78rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
  }

  .chapter-nav__link + .chapter-nav__link {
    border-left: 1px solid var(--border);
  }

  .chapter-nav__link:hover { color: var(--text); }

  .chapter-nav__link.is-active {
    color: var(--red);
    border-bottom-color: var(--red);
  }

  .chapter-nav__num {
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    opacity: 0.5;
  }

  .chapter-nav__link.is-active .chapter-nav__num { opacity: 1; }

  .chapter-nav__label {
    font-size: 0.78rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Very narrow: numbers only */
@media (max-width: 400px) {
  .chapter-nav__label { display: none; }
  .chapter-nav__num   { font-size: 0.9rem; opacity: 1; }
}

/* ─── Mobile (≤ 600px) ───────────────────────────────── */
@media (max-width: 600px) {

  /* 1. Nav: label on own line so association name isn't split */
  .site-nav__assoc-label {
    display: block;
    margin-right: 0;
    font-size: 0.7rem;
  }

  /* 2. Hero: text overlays image on small screens */
  .dashboard-hero {
    height: 320px;
    display: block;
  }
  .dashboard-hero__img {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    height: 100%;
    width: 100%;
    object-position: center 30%;
  }
  .dashboard-hero__overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.40) 55%,
      rgba(0,0,0,0.12) 100%
    );
    padding: 0;
  }
  .dashboard-hero__content {
    padding: 0 1.25rem 1.75rem;
    max-width: none;
  }
  .dashboard-hero__lead {
    font-size: 1.45rem;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  }
  .dashboard-hero__body {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.88);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
  /* 3. Bleed the whole article to viewport width so the separator line,
        chart, and source caption all share the same width. Text elements
        get their own padding to stay aligned with other page content. */
  .econ-kpi {
    margin-left: -1.75rem;
    margin-right: -1.75rem;
  }
  .econ-kpi__title,
  .econ-kpi__dek,
  .econ-kpi__source,
  .econ-kpi__note {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  /* 4. Skeleton "Graf kommer" rectangles live inside the bled chart area —
        give them the same side padding as text so they don't touch screen edges. */
  .econ-kpi__chart .skeleton-chart {
    margin-left: 1.75rem;
    margin-right: 1.75rem;
  }

  /* 5. KPI todo list: let long name + target wrap to separate lines so text
        doesn't overflow the grey box on narrow screens. */
  .kpi-todo__list li {
    flex-wrap: wrap;
  }
  .kpi-todo__list .kpi-todo__target {
    white-space: normal;
  }
}

/* ─── Footer ─────────────────────────────────────────── */
/* ─── Outro block ────────────────────────────────────── */
.outro-block {
  background: var(--red);
  color: var(--bg);
  padding: 4.5rem 1.5rem 5rem;
  text-align: center;
}
.outro-block__inner {
  max-width: 580px;
  margin: 0 auto;
}
.outro-block__overline {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 1.25rem;
}
.outro-block__figure {
  font-size: clamp(3.5rem, 12vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.outro-block__heading {
  font-size: clamp(1.1rem, 2.8vw, 1.45rem);
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.92;
  margin-bottom: 1.75rem;
}
.outro-block__body {
  font-size: 0.93rem;
  line-height: 1.7;
  opacity: 0.82;
  max-width: 440px;
  margin: 0 auto;
}
.outro-block__body em {
  font-style: italic;
  opacity: 1;
}

.site-footer {
  background: var(--black);
  color: var(--bg);
  font-size: 0.72rem;
  padding: 1.25rem 0;
  text-align: center;
  letter-spacing: 0.04em;
}
.site-footer a {
  color: var(--bg);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════════════════════ */
body.login-page {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

.login-wrap {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* Brand panel */
.login-brand {
  flex: 1;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

.login-brand__logo {
  width: min(260px, 60%);
  /* White logo on red — blend white transparent */
  mix-blend-mode: screen;
}

/* Form panel */
.login-form-panel {
  width: 400px;
  flex-shrink: 0;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2.75rem;
  border-left: 1px solid var(--border);
}

/* Mobile-only red brand header inside the form panel */
.login-mobile-brand {
  display: none;
}

/* ── Base login form styles (must come BEFORE responsive overrides) ── */

.login-form__product {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}

.login-form__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.75rem;
  letter-spacing: -0.01em;
}

.field {
  margin-bottom: 1rem;
}

.field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.field input {
  display: block;
  width: 100%;
  padding: 0.65rem 0.8rem;
  font-family: var(--font);
  font-size: 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}

.field input:focus {
  border-color: var(--red);
  background: var(--white);
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 0.75rem 1.25rem;
  margin-top: 0.25rem;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary:hover { background: var(--red-dark); }

.login-form__help {
  margin-top: 1.75rem;
  font-size: 0.75rem;
  color: var(--faint);
  line-height: 1.6;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* ── Responsive overrides (after base styles so they win the cascade) ── */

/* Explicit desktop guard — ensures mobile strip never shows above 700px */
@media (min-width: 701px) {
  .login-mobile-brand { display: none !important; }
}

@media (max-width: 700px) {
  .login-brand      { display: none; }
  .login-form-panel {
    width: 100%;
    border-left: none;
    padding: 0;
    justify-content: flex-start; /* red strip must reach the very top */
  }

  .login-mobile-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    padding: 2.5rem 2rem 2rem;
    flex-shrink: 0;              /* never let the red block compress */
    margin-bottom: 2rem;
  }

  .login-mobile-brand img {
    width: 120px;
    mix-blend-mode: screen;
  }

  .login-form__product,
  .login-form__title,
  .field,
  #login-error,
  .btn-primary,
  .login-form__help {
    margin-left: 1.75rem;
    margin-right: 1.75rem;
  }

  .field       { margin-left: 1.75rem; margin-right: 1.75rem; }
  .btn-primary { width: calc(100% - 3.5rem); } /* narrows to match fields */
  .login-form__help { padding-left: 0; margin-left: 1.75rem; margin-right: 1.75rem; }
}

/* ═══════════════════════════════════════════════════════
   RIKS-GRID  — Riksgemensamma KPI-kort
═══════════════════════════════════════════════════════ */

.section--riks {
  /* Same base as section--chapter but no top border on the very first section */
  border: none;
  padding: 3.5rem 0 1rem;
  margin-top: 0;
}

.riks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 0 0 4.5rem;
}

@media (max-width: 820px) {
  .riks-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}


.riks-kpi-card {
  background: var(--paper);
  border: 1.5px solid var(--border);
  border-radius: 3px;
  padding: 1.5rem 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.riks-kpi-card__tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.5rem;
}

.riks-kpi-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 1.25rem;
}

.riks-kpi-card__value {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.riks-kpi-card__value--pending {
  color: var(--faint);
  font-size: 2rem;
}

/* Thin progress bar — CSS only, value set via inline width style */
.riks-kpi-card__bar-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.riks-kpi-card__bar-fill {
  height: 100%;
  background: var(--red);
  border-radius: 2px;
  opacity: 0.55;
}

.riks-kpi-card__period {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.riks-kpi-card__target {
  font-size: 0.78rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.riks-kpi-card__note {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 0.75rem;
}

.riks-kpi-card__source {
  font-size: 0.68rem;
  color: var(--faint);
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
  margin-top: 0.75rem;
}