/* ==========================================================================
   blirikare.se — designsystem (lane 1)
   Ren CSS, inga externa fonter, inga externa anrop.
   Mobil först. Designbredd 375 px. Ljust tema + mörkt via prefers-color-scheme.

   ORDNING I FILEN
   1.  Tokens (:root)
   2.  Mörkt tema
   3.  Reset och bas
   4.  Layout (wrap, section, grid)
   5.  Typografi
   6.  Header, varumärke, navigation
   7.  Horisontell scroll (kantfade + scroll-skugga)  <-- delas av chips och tabeller
   8.  Chips, flikar, ticker
   9.  Knappar och formulär
   10. Kort och innehållsblock
   11. Tabeller
   12. Verktygsbox, faktaruta, varningsruta, ansvarsrad
   13. Resultatrader (kalkylatorer)
   14. Annonsplatser
   15. Footer
   16. Hjälpklasser
   17. Reducerad rörelse och utskrift
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Typsnitt: systemstack, noll nedladdning, noll GDPR-läcka --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Segoe UI Mono",
               "Roboto Mono", Menlo, Consolas, monospace;

  /* --- Typografisk skala --- */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;      /* 16 px — även minsta storlek i formulärfält (iOS zoomar under 16) */
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.6;
  --lh-prose: 1.7;

  /* --- Spacing (4 px-bas) --- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  /* --- Radier --- */
  --r-sm: 0.375rem;
  --r-md: 0.625rem;
  --r-lg: 1rem;

  /* --- Mått --- */
  --wrap: 68rem;
  --wrap-narrow: 44rem;
  --tap: 44px;            /* minsta tap-yta — aldrig under detta */
  --header-h: 56px;

  /* --- Färg: ljust tema --- */
  --bg: #f6f6f3;
  --bg-elev: #ffffff;
  --bg-sunken: #ececeb;
  --text: #17191c;
  --text-muted: #555c66;
  /* --text-faint används på 14 px-text (.meta, .kicker, tabellhuvuden). Måste
     därför klara WCAG AA 4.5:1 mot bg, bg-elev OCH bg-sunken — inte bara vit. */
  --text-faint: #616974;
  --line: #dedcd6;          /* dekorativa avdelare (tabellrader, kortkanter) */
  --line-strong: #c1beb6;   /* tydligare avdelare, fortfarande dekorativ */
  /* Kantfärg för INTERAKTIVA kontroller (fält, knappar, chips). WCAG 1.4.11
     kräver 3:1 mot omgivande yta — därför mörkare än --line-strong. */
  --line-control: #868178;

  --brand: #123c5a;
  --brand-strong: #0c2b41;
  --brand-soft: #e6eef4;
  --on-brand: #ffffff;

  --accent: #8a5a12;
  --accent-soft: #f7efdd;

  --up: #16643d;
  --up-soft: #e3f0e8;
  --down: #a12a20;
  --down-soft: #f8e7e4;

  --warn-bg: #fdf4e4;
  --warn-line: #e0c188;
  --warn-text: #6a4711;

  --fact-bg: #e6eef4;
  --fact-line: #b7cede;
  --fact-text: #12384f;

  --focus: #1a6fb5;
  --shadow-c: rgba(20, 24, 30, 0.16);
  --shadow-card: 0 1px 2px rgba(20, 24, 30, 0.06);
}


/* ==========================================================================
   2. MÖRKT TEMA
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151a;
    --bg-elev: #191d23;
    --bg-sunken: #0d1015;
    --text: #e7eaee;
    --text-muted: #a3abb6;
    --text-faint: #7d8792;
    --line: #2b313a;
    --line-strong: #3d4550;
    --line-control: #697583;

    --brand: #7fb6dd;
    --brand-strong: #a9d0ec;
    --brand-soft: #16232e;
    --on-brand: #0c1218;

    --accent: #d9a94e;
    --accent-soft: #29210f;

    --up: #52bd88;
    --up-soft: #12281e;
    --down: #e8786b;
    --down-soft: #2c1a17;

    --warn-bg: #292013;
    --warn-line: #5d4820;
    --warn-text: #e9d5a7;

    --fact-bg: #16232e;
    --fact-line: #2f4759;
    --fact-text: #cfe2ef;

    --focus: #7cc0f5;
    --shadow-c: rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
}


/* ==========================================================================
   3. RESET OCH BAS
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  /* Skyddsnät: inget långt ord ska kunna spränga layouten på 375 px */
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

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

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s6) 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand);
  color: var(--on-brand);
  padding: var(--s3) var(--s4);
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: var(--on-brand);
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--s6); }
.section + .section { padding-top: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-bottom: var(--s4);
}
.section-head h2 { margin: 0; }
/* "Visa alla"-länken är en riktig tap-yta och måste nå 44 px. */
.section-head .section-more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Auto-grid som aldrig blir smalare än 260 px per kolumn */
.grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ==========================================================================
   5. TYPOGRAFI
   ========================================================================== */

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  margin: 0 0 var(--s3);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;   /* skyddsnät, se regel nedan */
}

/*  H1: golvet i clamp() är satt så att sajtnamnet ("blirikare.se") ryms
    på en rad inom 375 px minus sidmarginal. Bryt aldrig mitt i ord —
    overflow-wrap är bara skyddsnät, inte normalfall.  */
h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h2 { font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem); }
h3 { font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--fs-md);
  line-height: var(--lh-prose);
  color: var(--text-muted);
}

.kicker {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
  margin-bottom: var(--s2);
}

.meta {
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* Brödtext i artiklar och guider */
.prose { max-width: var(--wrap-narrow); line-height: var(--lh-prose); }
.prose h2 { margin-top: var(--s7); }
.prose h3 { margin-top: var(--s6); }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: 1.3em; }
.prose li { margin-bottom: var(--s2); }
.prose blockquote {
  margin: var(--s5) 0;
  padding: var(--s2) var(--s4);
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  font-style: italic;
}

.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li + li { border-top: 1px solid var(--line); }
.linklist a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--s2) 0;
  text-decoration: none;
  font-weight: 600;
}
.linklist a:hover { text-decoration: underline; }

/* Brödsmulor */
.crumbs {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  padding-top: var(--s4);
}
.crumbs a { color: var(--text-muted); }
.crumbs span[aria-hidden] { padding-inline: 0.4em; }


/* ==========================================================================
   6. HEADER, VARUMÄRKE, NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  min-height: var(--header-h);
}

/*  REGEL: varumärket får ALDRIG krympa, ellipseras eller klippas.
    flex: 0 0 auto + ingen text-overflow + overflow synligt.  */
.brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  text-decoration: none;
  color: var(--text);
  overflow: visible;
  text-overflow: clip;
}
.brand:hover { color: var(--text); }
.brand-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.brand-name {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand-tld { color: var(--text-faint); font-weight: 600; }

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  background: transparent;
  border: 1px solid var(--line-control);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.nav-list a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.nav-list a:hover { color: var(--text); }
.nav-list a[aria-current="page"] {
  color: var(--brand);
  box-shadow: inset 0 -2px 0 var(--brand);
}

/* --- Mobil: dolt menyblock som fälls ut under varumärket --- */
@media (max-width: 51.9375rem) {
  .site-nav {
    display: none;
    order: 3;
    width: 100%;
    border-top: 1px solid var(--line);
  }
  .site-header[data-nav="open"] .site-nav { display: block; }
  .nav-list { flex-direction: column; }
  .nav-list li + li { border-top: 1px solid var(--line); }
  .nav-list a { padding: var(--s2) var(--s1); font-size: var(--fs-base); }
  .nav-list a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); padding-left: var(--s3); }
}

/* --- Desktop: vågrät meny, ingen toggle --- */
@media (min-width: 52rem) {
  .nav-toggle { display: none; }
  .site-nav { margin-left: auto; }
  .nav-list { gap: var(--s5); align-items: center; }
}

/* Prototypremsa — tas bort när sajten går live */
.protobar {
  background: var(--warn-bg);
  color: var(--warn-text);
  border-bottom: 1px solid var(--warn-line);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--s2) var(--s4);
}


/* ==========================================================================
   7. HORISONTELL SCROLL — kantfade + scroll-skugga
   Tekniken: fyra bakgrunder. De två första målar ytfärgen och är
   background-attachment:local, dvs de följer innehållet och glider bort när
   man scrollat. De två sista är radiella skuggor med attachment:scroll och
   ligger stilla. Resultat: skugga syns BARA när det finns mer att scrolla.
   Sätt --scroll-bg till den yta elementet ligger på.
   ========================================================================== */

.scroll-x {
  --scroll-bg: var(--bg);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  background-color: var(--scroll-bg);
  background-image:
    linear-gradient(to right, var(--scroll-bg) 40%, transparent),
    linear-gradient(to left,  var(--scroll-bg) 40%, transparent),
    radial-gradient(farthest-side at 0% 50%,   var(--shadow-c), transparent),
    radial-gradient(farthest-side at 100% 50%, var(--shadow-c), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Ytmodifierare — använd när scrollern ligger på ett kort eller nedsänkt block */
.on-elev   { --scroll-bg: var(--bg-elev); }
.on-sunken { --scroll-bg: var(--bg-sunken); }


/* ==========================================================================
   8. CHIPS, FLIKAR, TICKER
   REGEL: en rad, aldrig wrap. Wrapar det till tre rader är det fel.
   ========================================================================== */

.chiprow,
.tabrow {
  display: flex;
  flex-wrap: nowrap;   /* aldrig wrap */
  gap: var(--s2);
  padding-block: var(--s2);
}
.chiprow > *,
.tabrow > * { flex: 0 0 auto; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line-control);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover { border-color: var(--brand); color: var(--text); }
.chip[aria-pressed="true"],
.chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.tab[aria-selected="true"],
.tab.is-active { color: var(--text); border-bottom-color: var(--brand); }

/* --- Indexticker --- */
.ticker { border-block: 1px solid var(--line); background: var(--bg-elev); }
.ticker .chiprow { --scroll-bg: var(--bg-elev); }
.ticker-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--tap);
  justify-content: center;
  padding: var(--s2) var(--s4) var(--s2) 0;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.ticker-item:last-child { border-right: 0; }
.ticker-name {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.ticker-value {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ticker-change { font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Obligatorisk märkning under tickern — demonstrationsdata ska aldrig kunna
   misstas för live-kurser. */
.ticker-note { padding-bottom: var(--s3); margin-bottom: 0; }
.ticker-note .badge { margin-right: var(--s1); vertical-align: baseline; }


/* ==========================================================================
   9. KNAPPAR OCH FORMULÄR
   REGEL: allt som går att trycka på är minst 44 px högt.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: var(--s2) var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--brand-strong); color: var(--on-brand); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.btn-secondary {
  background: var(--bg-elev);
  border-color: var(--line-control);
  color: var(--text);
}
.btn-secondary:hover { background: var(--bg-sunken); border-color: var(--brand); color: var(--text); }

.btn-ghost { background: transparent; color: var(--brand); padding-inline: var(--s3); }
.btn-ghost:hover { background: var(--brand-soft); color: var(--brand-strong); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

.field { display: block; margin-bottom: var(--s4); }
.field > label,
.field-label {
  display: block;
  margin-bottom: var(--s1);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.field-help { display: block; margin-top: var(--s1); font-size: var(--fs-xs); color: var(--text-faint); }

input[type="text"], input[type="number"], input[type="search"],
input[type="email"], input[type="date"], input[type="file"],
select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-control);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);   /* aldrig under 16 px — annars zoomar iOS in vid fokus */
}
textarea { min-height: 7rem; line-height: var(--lh-base); }
input[type="range"] { width: 100%; min-height: var(--tap); }

input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--brand); }
.check {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--tap);
  font-size: var(--fs-sm);
}

.field-row { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
/* [hidden] maste vinna over layoutklasser. .field-row satter display:grid, och
   utan den har raden fortsatte ett hidden-markt falt att visas -- bada mal-
   falten lag framme samtidigt i malkalkylen. */
[hidden] { display: none !important; }
@media (min-width: 34rem) { .field-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ==========================================================================
   10. KORT OCH INNEHÅLLSBLOCK
   ========================================================================== */

.card {
  position: relative;   /* krävs för den utsträckta rubriklänken nedan */
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.card-title { margin: 0; font-size: var(--fs-md); line-height: var(--lh-snug); }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--brand); text-decoration: underline; }

/*  Tap-yta på kort. En rubriklänk är bara ~22 px hög, vilket är för litet på
    mobil. I stället för att lufta ut rubriken sträcks länken ut över hela
    kortet — hela kortet blir träffytan, utseendet är oförändrat.
    Därför gäller: ETT kort = EN primär länk (rubriken).  */
/*  Övriga länkar i kortet lyfts till z-index 2 så de hamnar över den
    utsträckta ytan. Rubriklänken måste däremot förbli position:static —
    annars blir DEN det positionerade elementet och ::after täcker bara
    rubriktexten i stället för hela kortet.
    Medvetet bara enkla selektorer: :not() med efterföljarkombinator stöds
    inte i äldre Safari, och där hade hela regeln fallit bort tyst.  */
.card a { position: relative; z-index: 2; }
.card-title a { position: static; }
.card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.card:hover { border-color: var(--line-strong); }
.card-text { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.card-meta {
  margin-top: auto;
  padding-top: var(--s2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* Klickbart ingångskort */
.card-link { text-decoration: none; color: inherit; }
.card-link:hover { border-color: var(--brand); color: inherit; }
.card-link:hover .card-title { color: var(--brand); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s2);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Märkning av demonstrationsdata — ska synas, inte gömmas */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 2px var(--s2);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.hero { padding-block: var(--s6) var(--s5); }
.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 56ch; margin-top: var(--s4); }
.hero .btn-row { margin-top: var(--s5); }

/* Nyckeltal */
.stat-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .stat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  padding: var(--s3);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.stat-label { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.stat-value { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: var(--s1); }


/* ==========================================================================
   11. TABELLER
   REGEL: tabellen ska SCROLLA, inte klämmas. min-width över mobilbredd.
   ========================================================================== */

.table-wrap {
  --scroll-bg: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  /* ärver .scroll-x-tekniken — sätt båda klasserna i markup */
}

.data-table {
  min-width: 520px;      /* över mobilbredd, med flit */
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: transparent;
}
.data-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--s3) var(--s3) var(--s2);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.data-table th,
.data-table td {
  padding: var(--s3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table thead th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num,
.data-table td.num,
.data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table tbody tr:hover td { background: var(--bg-sunken); }


/* ==========================================================================
   12. VERKTYGSBOX, FAKTARUTA, VARNINGSRUTA, ANSVARSRAD
   ========================================================================== */

.tool {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.tool-head {
  padding: var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
}
.tool-head h2, .tool-head h3 { margin: 0; font-size: var(--fs-md); }
.tool-head p { margin: var(--s1) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.tool-body { padding: var(--s4); }
.tool-foot {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.factbox {
  padding: var(--s4);
  background: var(--fact-bg);
  border: 1px solid var(--fact-line);
  border-radius: var(--r-md);
  color: var(--fact-text);
  font-size: var(--fs-sm);
}
.factbox-title {
  margin: 0 0 var(--s2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.factbox a { color: inherit; }

.warnbox {
  padding: var(--s4);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-left-width: 4px;
  border-radius: var(--r-md);
  color: var(--warn-text);
  font-size: var(--fs-sm);
}
.warnbox-title {
  margin: 0 0 var(--s2);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.warnbox a { color: inherit; }

/*  Ansvarsraden. SPEC: varje verktyg och varje avsnitt bär den här raden.
    Diskret men läsbar — den ska inte gömmas som en fotnot.  */
.advice-note {
  margin-top: var(--s4);
  padding: var(--s3);
  border-left: 3px solid var(--line-strong);
  background: var(--bg-sunken);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-muted);
}
.advice-note strong { color: var(--text); }


/* ==========================================================================
   13. RESULTATRADER (kalkylatorer) — matchar BR.resultat() i app.js
   ========================================================================== */

.result-list {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.result-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.result-label { font-size: var(--fs-sm); color: var(--text-muted); }
.result-value {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: auto;
}
.result-help { flex: 1 0 100%; font-size: var(--fs-xs); color: var(--text-faint); }
.result-row.is-strong { background: var(--bg-sunken); padding-inline: var(--s3); border-radius: var(--r-sm); }
.result-row.is-strong .result-label { color: var(--text); font-weight: 700; }
.result-row.is-strong .result-value { font-size: var(--fs-lg); }

/* Riktningsfärger — används av ticker, tabeller och resultatrader */
.value-up { color: var(--up); }
.value-down { color: var(--down); }
.value-flat { color: var(--text-muted); }


/* ==========================================================================
   14. ANNONSPLATSER
   Platshållare för AdSense. Ska vara tydliga men diskreta och får ALDRIG
   kunna misstas för redaktionellt innehåll: streckad ram, nedsänkt yta,
   utskrivet mått, texten "Annonsplats".
   ========================================================================== */

.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  margin-block: var(--s5);
  padding: var(--s4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  background-color: var(--bg-sunken);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 10px,
    var(--line) 10px 11px
  );
  color: var(--text-faint);
  text-align: center;
}
.ad-slot-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.ad-slot-size {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.ad-slot[data-format="300x250"] { min-height: 250px; max-width: 300px; margin-inline: auto; }
.ad-slot[data-format="336x280"] { min-height: 280px; max-width: 336px; margin-inline: auto; }
.ad-slot[data-format="728x90"]  { min-height: 90px;  max-width: 728px; margin-inline: auto; }
.ad-slot[data-format="320x100"] { min-height: 100px; max-width: 320px; margin-inline: auto; }
.ad-slot[data-format="responsiv"] { min-height: 120px; }


/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.site-footer {
  margin-top: var(--s8);
  padding-block: var(--s6);
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.footer-col h2 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: var(--s2);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text-muted);
  text-decoration: none;
}
.footer-col a:hover { color: var(--brand); text-decoration: underline; }

.footer-legal {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  line-height: 1.6;
}
.footer-legal p { margin-bottom: var(--s2); }
.footer-legal strong { color: var(--text-muted); }


/* ==========================================================================
   16. HJÄLPKLASSER
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s6); }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--s4); }
.is-hidden { display: none !important; }


/* ==========================================================================
   17. REDUCERAD RÖRELSE OCH UTSKRIFT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header, .site-footer, .ad-slot, .nav-toggle, .protobar, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .tool, .table-wrap { break-inside: avoid; border-color: #999; }
  .scroll-x { overflow: visible; background: none; }
  .data-table { min-width: 0; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}

/* ==========================================================================
   14. MÅLKALKYLEN — hävstänger och målläge
   Hävstångskorten rangordnas av räknemotorn efter hur många år de faktiskt
   flyttar målet. Det översta kortet markeras — men markeringen får aldrig
   ensam bära budskapet, siffran står utskriven i varje kort.
   ========================================================================== */

.tool-sub {
  margin: var(--s5) 0 var(--s3);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 700;
}
.tool-sub:first-child { margin-top: 0; }

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line-control);
  border-radius: 999px;
  background: var(--bg-elev);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.radio:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  font-weight: 600;
}
.radio:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

.lever-list { display: grid; gap: var(--s3); margin-top: var(--s4); }

.lever {
  padding: var(--s4);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--r-md);
}
/* Största hävstången: markerad, men siffran i .lever-gain är det som bär. */
.lever-top { border-left-color: var(--brand); background: var(--brand-soft); }

.lever-title { margin: 0 0 var(--s1); font-weight: 700; }
.lever-desc { margin: 0 0 var(--s2); font-size: var(--fs-sm); color: var(--text-muted); }
.lever-gain { margin: 0; font-size: var(--fs-md); }
.lever-gain strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }