/* Reko AI-index. Fargvarden fran den validerade paletten: seriefargen ar
   blastegen som klarar kontrastgransen mot bada ytorna. Morkt lage ar egna
   steg valda for den morka ytan, inte en automatisk invertering. */

:root {
  color-scheme: light;
  --surface: #fcfcfb;
  --plane: #f9f9f7;
  --ink: #0b0b0b;
  --ink-secondary: #52514e;
  --ink-muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.1);
  --series: #2a78d6;
  --series-track: #e9eef5;
  --accent-soft: #cde2fb;
  /* Delta ar text, inte serier. Egna steg som klarar textkontrast mot sin yta. */
  --delta-up: #006300;
  --delta-down: #b3302f;
  /* Egna steg for den markerade vaxlarknappen. Seriefargen ger bara 4,42:1
     mot vitt, precis under AA:s 4,5 for text i den har storleken. Ett steg
     morkare i samma ramp ger 5,39:1. */
  --switcher-bg: #256abf;
  --switcher-fg: #ffffff;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #1a1a19;
    --plane: #0d0d0d;
    --ink: #ffffff;
    --ink-secondary: #c3c2b7;
    --ink-muted: #898781;
    --grid: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.1);
    --series: #3987e5;
    --series-track: #232322;
    --accent-soft: #184f95;
    --delta-up: #0ca30c;
    --delta-down: #e66767;
    /* I morkt lage bar den ljusa blafargen mork text i stallet, vilket ger
       hogre kontrast an vitt pa samma yta. */
    --switcher-bg: #3987e5;
    --switcher-fg: #0b0b0b;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #1a1a19;
  --plane: #0d0d0d;
  --ink: #ffffff;
  --ink-secondary: #c3c2b7;
  --ink-muted: #898781;
  --grid: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.1);
  --series: #3987e5;
  --series-track: #232322;
  --accent-soft: #184f95;
  --delta-up: #0ca30c;
  --delta-down: #e66767;
  --switcher-bg: #3987e5;
  --switcher-fg: #0b0b0b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }

a { color: var(--series); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* Sidhuvud */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  padding-top: 18px;
  padding-bottom: 18px;
}
.brand { font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.brand span { color: var(--series); }
.site-header nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; }
.site-header nav a { color: var(--ink-secondary); text-decoration: none; }
.site-header nav a:hover { color: var(--ink); text-decoration: underline; }

/* Innehall */
main { padding: 40px 0 64px; }
h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; }
h2 { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; margin: 48px 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; color: var(--ink-secondary); font-weight: 600; }
.lead { font-size: 19px; color: var(--ink-secondary); margin: 0 0 8px; max-width: 62ch; }
p { max-width: 68ch; }
.meta { font-size: 14px; color: var(--ink-muted); margin: 0 0 32px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 24px 0;
}
.card h2 { margin-top: 0; }

/* Tabeller. Datan ar karnan, sa den ska ga att lasa aven utan diagram. */
.table-scroll { overflow-x: auto; margin: 20px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 520px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--grid); }
th { font-weight: 600; color: var(--ink-secondary); border-bottom: 1px solid var(--baseline); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--plane); }

/* Diagram. HTML-staplar, inte SVG: texten ska ha samma storlek pa 375 px
   som pa 1400 px. En viewBox skalar ner texten tillsammans med grafiken. */
.chart { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 8px; }
.chart-compact { gap: 6px; margin: 12px 0 0; }

.bar-row {
  display: grid;
  grid-template-columns: minmax(88px, 150px) 1fr 3.4em;
  align-items: center;
  gap: 12px;
}
.chart-compact .bar-row { grid-template-columns: minmax(80px, 130px) 1fr 3.4em; gap: 10px; }

.bar-label {
  font-size: 15px;
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.bar-value {
  font-size: 14px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.bar-track {
  display: block;
  background: var(--series-track);
  border-radius: 4px;
  height: 22px;
  overflow: hidden;
}
.chart-compact .bar-track { height: 18px; }
.bar-fill { display: block; height: 100%; background: var(--series); border-radius: 4px; }

.bar-row:hover .bar-label,
.bar-row:hover .bar-value { color: var(--ink); }
.bar-row:hover .bar-fill { background: var(--ink); }

/* Trend over manader. Staende staplar, en per matning. */
.trend {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  overflow-x: auto;
  padding-bottom: 4px;
}
.trend-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 46px;
}
/* Fast hojd har ar det som gor att stapelns procenthojd betyder nagot. */
.trend-track {
  height: 130px;
  width: 100%;
  max-width: 54px;
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
}
.trend-bar {
  width: 100%;
  background: var(--series);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
}
.trend-value {
  font-size: 13px;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trend-label {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}
.trend-col:hover .trend-bar { background: var(--ink); }
.trend-col:hover .trend-value, .trend-col:hover .trend-label { color: var(--ink); }
.trend-col:hover .trend-value, .trend-col:hover .trend-label { color: var(--ink); }

.delta { font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta-up { color: var(--delta-up); }
.delta-down { color: var(--delta-down); }
.delta-flat { color: var(--ink-muted); }

.facets { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); margin: 20px 0; }
.facet { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.chart-note, .empty { font-size: 14px; color: var(--ink-muted); }

/* Svarscitat. Sajtens starkaste illustration: riktiga svar, ordagrant. */
.quotes {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 20px 0;
}
.quote {
  margin: 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grid);
}
.quote figcaption strong { font-size: 16px; }
.quote figcaption span { font-size: 12px; color: var(--ink-muted); font-family: ui-monospace, monospace; }
.quote blockquote {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-secondary);
  border-left: 3px solid var(--accent-soft);
  padding-left: 14px;
}
.quote-brands {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
  max-width: none;
}

/* Listor av lankar */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 0; margin: 20px 0; list-style: none; }
.tiles a {
  display: block; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  text-decoration: none; color: var(--ink);
}
.tiles a:hover { border-color: var(--series); }
.tiles strong { display: block; font-size: 16px; }
.tiles span { font-size: 14px; color: var(--ink-muted); }

/* Doljs visuellt men lases fortfarande upp av skarmlasare. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Prenumeration */
.subscribe-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.subscribe-row input {
  flex: 1 1 240px;
  padding: 12px 15px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: var(--plane);
  border: 1px solid var(--baseline);
  border-radius: 8px;
}
.subscribe-row input:focus {
  outline: 2px solid var(--series);
  outline-offset: 1px;
  border-color: var(--series);
}
.subscribe-row button {
  padding: 12px 22px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  color: var(--switcher-fg);
  background: var(--switcher-bg);
  border: 1px solid var(--switcher-bg);
  border-radius: 8px;
  cursor: pointer;
}
.subscribe-row button:hover { filter: brightness(1.08); }
.subscribe-row button:disabled { opacity: 0.6; cursor: default; }

/* Varumarkessok. Det forsta man moter, eftersom det ar det vanligaste arendet. */
.brand-search {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 28px 0 40px;
  position: relative;
}
.brand-search label { display: block; font-size: 17px; margin-bottom: 10px; }
.brand-search input {
  width: 100%;
  padding: 13px 16px;
  font-size: 17px;
  font-family: inherit;
  color: var(--ink);
  background: var(--plane);
  border: 1px solid var(--baseline);
  border-radius: 8px;
}
.brand-search input:focus {
  outline: 2px solid var(--series);
  outline-offset: 1px;
  border-color: var(--series);
}
.brand-search .chart-note { margin: 8px 0 0; }

.brand-results {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.brand-results[hidden] { display: none; }
.brand-results li + li { border-top: 1px solid var(--grid); }
.brand-results a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 16px;
  text-decoration: none;
  color: var(--ink);
}
.brand-results a:hover { background: var(--plane); }
.brand-results small { color: var(--ink-muted); font-size: 13px; white-space: nowrap; }

/* Vaxlare hogst upp. Visar alla alternativ och markerar var man ar. */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 28px;
  list-style: none;
}
.switcher a,
.switcher-current {
  display: inline-block;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none;
  line-height: 1.3;
}
.switcher a {
  background: var(--surface);
  color: var(--ink-secondary);
}
.switcher a:hover {
  border-color: var(--series);
  color: var(--ink);
}
/* Den aktuella sidan ar inte en lank. Att kunna klicka sig till dar man redan
   ar sager att man inte ar dar. Bakgrunden bar markeringen, men den fetare
   texten gor att den lases som vald aven utan farg. */
.switcher-current {
  background: var(--switcher-bg);
  border-color: var(--switcher-bg);
  color: var(--switcher-fg);
  font-weight: 600;
  cursor: default;
}

.pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0; list-style: none; }
.pills a {
  display: inline-block; padding: 5px 12px; font-size: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; text-decoration: none; color: var(--ink-secondary);
}
.pills a:hover { border-color: var(--series); color: var(--ink); }

/* Annonsplats. Reglerna: aldrig ovanfor datatabellen, aldrig inuti den,
   aldrig utformad sa att den kan misstas for en datarad. Alltid markt,
   vilket marknadsforingslagen ocksa kraver. */
.ad-slot {
  margin: 40px 0;
  padding: 20px;
  border: 1px dashed var(--baseline);
  border-radius: 10px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 14px;
  background: transparent;
}
.ad-slot::before {
  content: "Annons";
  display: block;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.pull-quote {
  margin: 20px 0;
  padding: 18px 24px;
  border-left: 4px solid var(--series);
  background: var(--surface);
  border-radius: 0 10px 10px 0;
}
.pull-quote p {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}

.notice {
  border-left: 3px solid var(--series);
  background: var(--surface);
  padding: 14px 18px;
  margin: 24px 0;
  font-size: 15px;
  border-radius: 0 8px 8px 0;
}
.notice.warn { border-left-color: #d03b3b; }
.notice p { margin: 0; max-width: none; }

/* Sidfot */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 36px 0 28px;
  font-size: 14px;
  color: var(--ink-muted);
}
.site-footer a { color: var(--ink-secondary); }

/* Sajtkarta. Ger varje markessida en lank fran varje sida pa sajten. */
.site-map {
  display: grid;
  gap: 26px 32px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 32px;
}
.site-map h2 {
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 10px;
  font-weight: 600;
}
.site-map ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-map a { text-decoration: none; font-size: 14px; }
.site-map a:hover { text-decoration: underline; color: var(--ink); }

.footer-cta {
  border-top: 1px solid var(--grid);
  padding-top: 24px;
  margin-bottom: 24px;
  max-width: 62ch;
}
.footer-cta h2 { font-size: 18px; margin: 0 0 8px; color: var(--ink); }
.footer-cta p { margin: 0 0 8px; font-size: 14px; max-width: none; }
.footer-cta strong { color: var(--ink); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  border-top: 1px solid var(--grid);
  padding-top: 20px;
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .facets { grid-template-columns: 1fr; }
  /* Pa smala skarmar far etiketten en egen rad, sa att bade namnet och
     stapeln far verklig plats i stallet for att klamma ihop varandra. */
  .bar-row { grid-template-columns: 1fr 3.4em; gap: 4px 10px; }
  .bar-label { grid-column: 1 / -1; font-size: 14px; }
  .bar-track { height: 18px; }
}