/* ÖrebroTech-profil. Diagramfärgerna är validerade med dataviz-skillens
   validate_palette.js (--pairs all) mot respektive kortyta. */
:root {
  color-scheme: light;
  --ot-turkos: #04D9C4;
  --ot-lila: #8739FA;
  --ot-rosa: #D93D76;
  --ot-vitish: #FBF7EC;
  --ot-mork: #052F41;
  --ot-gul: #F2C14E;

  --page: #FBF7EC;
  --surface: #FFFDF7;
  --text: #052F41;
  --text-2: #3D5966;
  --muted: #7A8B92;
  --grid: #ECE7DA;
  --axis: #CFC9BA;
  --border: rgba(5, 47, 65, 0.10);

  --s1: #8739FA;      /* Örebro / serie 1 */
  --s2: #0B9A8C;      /* serie 2 */
  --s3: #C98500;      /* serie 3 */
  --ref: #3D5966;     /* Riket */
  --ref-2: #93A3A9;   /* Riket utom Stockholm */
  --context: #D9D4C7; /* övriga län */

  --badge-styrka-bg: #D6F5F1;  --badge-styrka-fg: #0A6F65;
  --badge-utv-bg: #F9DDE7;     --badge-utv-fg: #A3254F;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #052F41;
  --surface: #0A3A4F;
  --text: #FBF7EC;
  --text-2: #C9D6D9;
  --muted: #8DA3AB;
  --grid: #164A60;
  --axis: #2A5D72;
  --border: rgba(251, 247, 236, 0.10);

  --s1: #9566FA;
  --s2: #12A595;
  --s3: #BF8214;
  --ref: #A9BCC2;
  --ref-2: #6B8791;
  --context: #2C566A;

  --badge-styrka-bg: rgba(4, 217, 196, 0.16); --badge-styrka-fg: #04D9C4;
  --badge-utv-bg: rgba(217, 61, 118, 0.20);   --badge-utv-fg: #F58DB2;
}

* { box-sizing: border-box; }
/* Mörkt bakom sidan, så att ytan under sidfoten (och vid överskroll) matchar sidfoten */
html { background: var(--ot-mork); }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: 'Lexend', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ot-mork);
  color: var(--ot-vitish);
  padding: 28px 0 48px;
}
/* Samma vänsterkant som innehållet i main (max 1200px inkl. 16px marginal) */
.hero-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.hero-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; }
/* Ordmärket som text: SVG:n har texten som <text>, och en SVG i <img> kan inte använda Lexend */
.wordmark {
  font-weight: 900; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1;
  color: #fff; text-decoration: none;
}
.hero h1 {
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.05;
  margin: 40px 0 12px;
  color: var(--ot-turkos);
}
.lede { max-width: 640px; font-size: 1.1rem; margin: 0 0 8px; }
.meta { font-size: .85rem; color: #9FB6BF; margin: 0; }
.hero-circle { position: absolute; border-radius: 50%; }
.hero-circle.c1 { width: 420px; height: 420px; right: -140px; top: -180px; background: var(--ot-lila); opacity: .55; }
.hero-circle.c2 { width: 220px; height: 220px; right: 180px; bottom: -150px; background: var(--ot-turkos); opacity: .45; }

.theme-switch { display: flex; background: rgba(255,255,255,.08); border-radius: 999px; padding: 3px; }
.theme-switch button {
  font: 600 .8rem 'Lexend', sans-serif; color: var(--ot-vitish);
  background: none; border: 0; padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.theme-switch button[aria-pressed="true"] { background: var(--ot-vitish); color: var(--ot-mork); }
.hero-switches { display: flex; align-items: center; gap: 10px; }
.lang-switch {
  font: 600 .8rem 'Lexend', sans-serif; color: var(--ot-vitish); text-decoration: none;
  padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
}
.lang-switch:hover { border-color: var(--ot-turkos); color: var(--ot-turkos); }

.toc {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 4px; overflow-x: auto;
  /* länkarnas text (12px inre marginal) linjerar med innehållet i main */
  padding: 10px max(4px, calc((100% - 1200px) / 2 + 4px)); background: var(--page);
  border-bottom: 1px solid var(--border);
}
.toc a {
  white-space: nowrap; text-decoration: none; color: var(--text-2);
  font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
}
.toc a:hover { background: var(--border); color: var(--text); }

main { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }
section { margin-top: 40px; }

.section-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.section-head h2, .about h2 { font-weight: 700; font-size: 1.6rem; margin: 0; }
.badge {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 12px; border-radius: 12px;
}
.badge-styrka { background: var(--badge-styrka-bg); color: var(--badge-styrka-fg); }
.badge-utveckling { background: var(--badge-utv-bg); color: var(--badge-utv-fg); }
.badge-bakgrund { background: var(--grid); color: var(--text-2); }
.card-tag { display: inline-block; font-size: .66rem; padding: 3px 10px; margin-bottom: 8px; }
.section-head h2 { flex-basis: 100%; }
.section-intro { margin: 0; color: var(--text-2); max-width: 720px; }

/* Översikt */
.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.summary-col { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.summary ul { margin: 14px 0 0; padding-left: 18px; }
.summary li { margin-bottom: 10px; line-height: 1.45; }
.summary li:last-child { margin-bottom: 0; }
.summary a { color: var(--text); font-weight: 600; text-decoration-color: var(--border); text-underline-offset: 3px; }
.summary a:hover { text-decoration-color: currentColor; }

/* KPI-rad */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 0; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.kpi .v { font-weight: 900; font-size: 2.2rem; line-height: 1.1; }
.kpi .l { font-weight: 600; font-size: .9rem; margin-top: 4px; }
.kpi .s { font-size: .8rem; color: var(--text-2); margin-top: 6px; }
.kpi .flag { display: inline-block; margin-top: 8px; }

/* Kort */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px; min-width: 0;
}
.card.wide { grid-column: 1 / -1; }
.card h3 { font-weight: 700; font-size: 1.1rem; margin: 0 72px 4px 0; }
.takeaway { color: var(--text-2); margin: 0 0 12px; font-size: .95rem; }
.takeaway strong { color: var(--text); }
.chart { position: relative; height: 300px; }
.chart.tall { height: 480px; }
.source { font-size: .75rem; color: var(--muted); margin: 12px 0 0; }

.controls, .filterbar { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.controls label, .filterbar label { font-size: .8rem; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
/* Långa alternativ får inte göra rullgardinen bredare än kortet på mobil.
   Procent fungerar inte (etiketten storleksätts av sitt innehåll), så utgå från
   skärmbredden minus sidans och kortets marginaler och etikettens text. */
.controls select { max-width: calc(100vw - 150px); text-overflow: ellipsis; }
select {
  font: 400 .85rem 'Lexend', sans-serif; color: var(--text);
  background: var(--surface); border: 1px solid var(--axis); border-radius: 8px; padding: 5px 8px;
}
.filterbar { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; }
.filterbar .check { font-weight: 400; }
.filterbar label { min-width: 0; max-width: 100%; }
select { max-width: 100%; text-overflow: ellipsis; }

.card-actions { position: absolute; top: 16px; right: 16px; display: flex; gap: 4px; }
.card-actions button {
  font: 600 .7rem 'Lexend', sans-serif; color: var(--text-2);
  background: none; border: 1px solid var(--axis); border-radius: 8px; padding: 4px 8px; cursor: pointer;
}
.card-actions button:hover { background: var(--border); color: var(--text); }

.data-table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-top: 8px; }
.data-table th, .data-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--grid); }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { max-height: 360px; overflow: auto; }

.mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 12px 0 16px; }
.mini-kpis .kpi .v { font-size: 1.6rem; }

.about { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 12px; }
.about h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.about p { font-size: .88rem; color: var(--text-2); margin: 0; }

/* Önskemål om statistik */
.request {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  background: var(--ot-mork); color: var(--ot-vitish); border-radius: 16px; padding: 28px;
}
.request > div { flex: 1 1 420px; }
.request h2 { font-weight: 700; font-size: 1.4rem; margin: 0 0 6px; }
.request p { margin: 0; font-size: .95rem; line-height: 1.5; color: rgba(251, 247, 236, .8); max-width: 62ch; }
.request-btn {
  flex: none; font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap;
  background: var(--ot-turkos); color: var(--ot-mork); padding: 12px 22px; border-radius: 999px;
  border: 2px solid var(--ot-turkos);
}
.request-btn:hover { background: transparent; color: var(--ot-turkos); }
.request-btn:focus-visible { outline: 2px solid var(--ot-vitish); outline-offset: 3px; }

.foot {
  background: var(--ot-mork); color: var(--ot-vitish);
  display: flex; align-items: center; gap: 16px; padding: 24px 16px; justify-content: center;
}
.foot-logo { width: 48px; }
.foot p { margin: 0; font-size: .85rem; }
.foot a { color: var(--ot-turkos); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* Vid PNG-export */
.exporting .card-actions, .exporting .controls { display: none; }

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .summary { grid-template-columns: 1fr; }
  .chart.tall { height: 520px; }
  .wordmark { font-size: 1.3rem; }
}
.filterbar label select { min-width: 0; flex: 1 1 auto; width: 0; }
@media (min-width: 761px) { .filterbar label select { width: auto; } }

/* Namnlistor */
.list-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.list-table th { text-align: left; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--axis); }
.list-table td { padding: 9px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.list-table td.num, .list-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.list-table .namn { font-weight: 600; }
.list-table .dim { color: var(--text-2); }
.pill { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.pill-ny { background: var(--badge-styrka-bg); color: var(--badge-styrka-fg); }
.pill-fler { background: var(--grid); color: var(--text-2); }
.list-wrap { overflow-x: auto; }
.list-more {
  display: block; margin: 10px 0 4px; padding: 6px 14px;
  font: 600 .8rem 'Lexend', sans-serif; color: var(--s1);
  background: none; border: 1px solid var(--axis); border-radius: 999px; cursor: pointer;
}
.list-more:hover { background: var(--border); }
.list-more:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }
.exporting .list-more { display: none; }

/* Pipeline-flöde */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin: 8px 0 4px; }
.step { position: relative; background: var(--page); border-radius: 16px; padding: 18px; }
.step:not(:last-child)::after {
  content: '→'; position: absolute; right: -22px; top: 50%; transform: translateY(-50%);
  font-weight: 700; font-size: 1.2rem; color: var(--muted);
}
/* Smal skärm: flödet går neråt, pilen pekar ner mellan stegen */
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 26px; }
  .step:not(:last-child)::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -24px; transform: translateX(-50%); }
}
.step .etapp { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--s1); }
.step .v { font-weight: 900; font-size: 2rem; line-height: 1.1; margin-top: 6px; }
.step .l { font-weight: 600; font-size: .88rem; }
.step .s { font-size: .8rem; color: var(--text-2); margin-top: 8px; }
.step .kv { font-size: .8rem; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--grid); color: var(--text-2); }
.step .kv strong { color: var(--text); }

/* Uppräkning av det som ligger i "Övriga" */
.ovriga { font-size: .8rem; color: var(--text-2); margin: 10px 0 0; }
.ovriga strong { color: var(--text); }

/* Utskrift/PDF: samma layout som på skärm, utan knappar och navigering.
   Sidbredden motsvarar skärmlayouten så att diagrammen inte ritas om. */
@page { size: 340mm 480mm; margin: 12mm; }
@media print {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card.wide { grid-column: 1 / -1; }
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .summary-col { break-inside: avoid; }
  .chart-img { width: 100%; height: 100%; object-fit: contain; object-position: left top; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .toc, .theme-switch, .lang-switch, .card-actions, .list-more, .request { display: none !important; }
  .card, .kpi, .step, .about { break-inside: avoid; }
  .section-head { break-after: avoid; }
  section { break-before: auto; }
  select { appearance: none; -webkit-appearance: none; border-color: var(--grid); }
}
.chart-img { display: block; width: 100%; height: 100%; }
.list-table .under { font-weight: 400; font-size: .8rem; color: var(--text-2); }
.list-table .nowrap { white-space: nowrap; }
/* Utskrift: visa hela listorna även om de är hopfällda på skärmen */
@media print { .list-table tr[hidden] { display: table-row !important; } }