/* ==========================================================================
   Ridgeback Business Development · Komponenter
   Kräver tokens.css. Klassprefix: rbd-
   ========================================================================== */

/* --- Bas ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--rbd-bg);
  color: var(--rbd-text);
  font-family: var(--rbd-font);
  font-weight: var(--rbd-roman);
  font-size: var(--rbd-fs-brod);
  line-height: var(--rbd-lh-brod);
  text-align: left;                 /* vänsterställt och ojusterat, aldrig marginaljusterat */
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--rbd-steg-2); outline-offset: 3px; }

.rbd-ljus, .rbd-varm, .rbd-mork { background: var(--rbd-bg); color: var(--rbd-text); }

.rbd-wrap { max-width: var(--rbd-max); margin-inline: auto; padding-inline: var(--rbd-gutter); }
.rbd-sektion { padding-block: var(--rbd-sektion); }
.rbd-panel { background: var(--rbd-bg-panel); }

/* --- Typografisk hierarki (s. 18) ------------------------------------- */
.rbd-kicker {
  display: block;
  font-size: var(--rbd-fs-kicker);
  font-weight: var(--rbd-medium);
  text-transform: uppercase;        /* versaler bara i kickers */
  letter-spacing: var(--rbd-ls-kicker);
  line-height: 1.4;
  color: var(--rbd-kicker);
  margin: 0 0 20px;
}
h1, h2, h3, h4, .rbd-titel, .rbd-rubrik {
  font-family: var(--rbd-font);
  font-weight: var(--rbd-bold);
  letter-spacing: var(--rbd-ls-rubrik);
  line-height: var(--rbd-lh-rubrik);
  color: var(--rbd-text-rubrik);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1, .rbd-titel  { font-size: var(--rbd-fs-titel); }
h2, .rbd-rubrik { font-size: var(--rbd-fs-rubrik); }
h3 { font-size: 24px; line-height: 1.2; }
h4 { font-size: var(--rbd-fs-brod); line-height: 1.3; letter-spacing: 0; }

.rbd-ingress {
  font-size: var(--rbd-fs-underrubrik);
  font-weight: var(--rbd-light);
  line-height: var(--rbd-lh-ingress);
  color: var(--rbd-text);
  max-width: 34em;
  margin: 0 0 32px;
}
p { max-width: var(--rbd-matt); margin: 0 0 1em; }
.rbd-kalla, figcaption, small {
  font-size: var(--rbd-fs-kalla);
  line-height: 1.45;
  color: var(--rbd-text-sekundar);
}
em, i { font-style: italic; } /* bara verktitlar och citat i löptext, aldrig i rubriker */
h1 em, h2 em, h3 em { font-style: normal; }

a { color: var(--rbd-lank); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rbd-text-rubrik); }

/* --- Knappar (Medium, Djupblå) --------------------------------------- */
.rbd-knapp {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font: var(--rbd-medium) 15px/1 var(--rbd-font);
  letter-spacing: .01em;
  color: var(--rbd-knapp-text);
  background: var(--rbd-knapp-bg);
  border: 1px solid var(--rbd-knapp-bg);
  border-radius: var(--rbd-radie);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--rbd-ease), border-color .2s var(--rbd-ease);
}
.rbd-knapp:hover { background: var(--rbd-skiffer); border-color: var(--rbd-skiffer); color: var(--rbd-vit); }
.rbd-mork .rbd-knapp:hover { background: var(--rbd-vit); border-color: var(--rbd-vit); color: var(--rbd-natt); }
.rbd-knapp--sekundar { background: transparent; color: var(--rbd-text-rubrik); border-color: currentColor; }
.rbd-knapp--sekundar:hover { background: var(--rbd-text-rubrik); color: var(--rbd-bg); border-color: var(--rbd-text-rubrik); }
.rbd-textlank { font-weight: var(--rbd-medium); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.rbd-textlank::after { content: "→"; transition: transform .2s var(--rbd-ease); }
.rbd-textlank:hover::after { transform: translateX(3px); }

/* --- Sidhuvud: symbolen ensam, nivå 1 (s. 5, 40) ---------------------- */
.rbd-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--rbd-bg) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.rbd-header.is-scrolled { border-bottom-color: var(--rbd-linje); }
.rbd-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.rbd-header__symbol { display: block; width: 52px; flex: none; } /* höjd ≥ 32 px för tre lager */
.rbd-header__symbol svg { width: 100%; height: auto; }
.rbd-nav { display: flex; align-items: center; gap: 32px; }
.rbd-nav a { color: var(--rbd-text); text-decoration: none; font-size: 15px; }
.rbd-nav a:hover, .rbd-nav a[aria-current="page"] { color: var(--rbd-djupbla); }
.rbd-nav a[aria-current="page"] { font-weight: var(--rbd-medium); }
.rbd-nav .rbd-knapp { padding: 11px 20px; font-size: 14px; color: var(--rbd-knapp-text); }
.rbd-menyknapp { display: none; background: none; border: 0; padding: 8px; color: var(--rbd-text-rubrik); cursor: pointer; }
@media (max-width: 860px) {
  .rbd-menyknapp { display: block; }
  .rbd-nav { display: none; position: absolute; inset: 80px 0 auto 0; flex-direction: column; align-items: flex-start;
             gap: 20px; padding: 24px var(--rbd-gutter) 32px; background: var(--rbd-bg); border-bottom: 1px solid var(--rbd-linje); }
  .rbd-nav.is-open { display: flex; }
}

/* --- Hero: 3D-objektet på ljus botten (s. 40) ------------------------- */
.rbd-hero { position: relative; overflow: hidden; background: var(--rbd-hero-ljus); }
.rbd-hero.rbd-varm { background: var(--rbd-hero-varm); }
.rbd-hero.rbd-mork { background: var(--rbd-natt); }
.rbd-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 40px;
                  min-height: min(78vh, 760px); padding-block: 72px; }
.rbd-hero__text { position: relative; z-index: 2; }
.rbd-hero__objekt { position: relative; }
.rbd-hero__objekt img { width: 100%; /* objektet förskjutet åt höger, texten får fri yta */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 92%, transparent); }
@media (max-width: 860px) {
  .rbd-hero__grid { grid-template-columns: 1fr; min-height: 0; padding-block: 48px 104px; }
  .rbd-hero__objekt { order: -1; margin-inline: calc(var(--rbd-gutter) * -1); }
}

/* Lager i rörelse: vid scroll glider lagren isär något (s. 40) */
.rbd-lager { position: relative; aspect-ratio: 152 / 100; width: 100%; max-width: 440px; justify-self: end; }
.rbd-lager > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rbd-lager [data-lager] { transition: transform .1s linear; will-change: transform; }

/* --- Upphöjningsnivåer D · B · R (s. 22) ------------------------------ */
.rbd-niva-d { background: var(--rbd-dimma); box-shadow: var(--rbd-niva-d); }
.rbd-niva-b { background: var(--rbd-vit);   box-shadow: var(--rbd-niva-b); }
.rbd-niva-r { background: var(--rbd-vit);   box-shadow: var(--rbd-niva-r); }
.rbd-mork .rbd-niva-d { background: var(--rbd-skiffer); }

/* --- Kort ------------------------------------------------------------- */
.rbd-kort { display: flex; flex-direction: column; padding: 28px; border-radius: var(--rbd-radie);
            color: var(--rbd-skiffer); text-decoration: none; }
a.rbd-kort { transition: box-shadow .3s var(--rbd-ease), transform .3s var(--rbd-ease); }
a.rbd-kort.rbd-niva-b:hover { box-shadow: var(--rbd-niva-r); transform: translate(-1px, -2px); }
.rbd-kort h3 { font-size: 20px; margin-bottom: 8px; color: var(--rbd-skiffer); }
.rbd-kort p { font-size: 15px; line-height: 1.5; color: var(--rbd-gra); margin: 0; }

.rbd-case { display: block; padding: 0; overflow: hidden; }
.rbd-case__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--rbd-steg-4); }
.rbd-case__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--rbd-ease); }
a.rbd-case:hover .rbd-case__bild img { transform: scale(1.03); }
.rbd-case__text { padding: 20px 22px 24px; }
.rbd-case__text h3 { font-size: 17px; margin: 0 0 4px; }
.rbd-case__text span { font-size: 13px; color: var(--rbd-gra); }

.rbd-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.rbd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; }

/* Överlapp före ramar (s. 22): låt kort ligga en bit in över föregående yta */
.rbd-overlapp { margin-top: -96px; position: relative; z-index: 2; }
@media (max-width: 860px) { .rbd-overlapp { margin-top: -40px; } }

/* --- Väggen som band mellan sektioner (s. 40) ------------------------- */
.rbd-vaggband { position: relative; min-height: clamp(220px, 32vw, 420px); display: grid; align-items: end;
                color: var(--rbd-vit); overflow: hidden; }
.rbd-vaggband > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rbd-vaggband::before { content: ""; position: absolute; inset: 0;
                        background: linear-gradient(to top, rgb(12 26 35 / .85), rgb(12 26 35 / 0) 60%); } /* tonplatta nedifrån */
.rbd-vaggband__text { position: relative; width: 100%; padding-block: 32px; font-size: clamp(22px, 3vw, 34px);
                      font-weight: var(--rbd-bold); letter-spacing: var(--rbd-ls-rubrik); line-height: 1.1; }

/* --- Bildbehandlingar (s. 38) · en behandling per sektion ------------ */
.rbd-bild { position: relative; overflow: hidden; }
.rbd-bild img { width: 100%; height: 100%; object-fit: cover; }
/* Tonplatta: Natt från vänster, 85 → 0 % */
.rbd-tonplatta::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                        background: linear-gradient(90deg, rgb(12 26 35 / .85), rgb(12 26 35 / 0)); }
.rbd-tonplatta > .rbd-bild__text { position: absolute; z-index: 2; left: var(--rbd-gutter); bottom: 40px; max-width: 46%; color: var(--rbd-vit); }
.rbd-tonplatta .rbd-kicker { color: var(--rbd-massing); }
.rbd-tonplatta h2, .rbd-tonplatta h3 { color: var(--rbd-vit); }
/* Duoton: Natt och Ljusblå */
.rbd-duoton { background: var(--rbd-natt); }
.rbd-duoton img { filter: grayscale(1) contrast(1.05); mix-blend-mode: screen; opacity: .9; }
.rbd-duoton::after { content: ""; position: absolute; inset: 0; background: var(--rbd-ljusbla); mix-blend-mode: multiply; pointer-events: none; }
/* Djupledsramen: bilden främst, Mellanblå och Ljusblå bakom, förskjutna som i märket */
.rbd-djupled { position: relative; margin: 0 calc(var(--rbd-djupled-steg) * 2) calc(var(--rbd-djupled-steg) * 2) 0; }
.rbd-djupled::before, .rbd-djupled::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.rbd-djupled::before { background: var(--rbd-ljusbla);  transform: translate(calc(var(--rbd-djupled-steg) * 2), calc(var(--rbd-djupled-steg) * 2)); }
.rbd-djupled::after  { background: var(--rbd-mellanbla); transform: translate(var(--rbd-djupled-steg), var(--rbd-djupled-steg)); }
.rbd-djupled > img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Porträtt: samma ljus, mot Dimma, axlar och huvud */
.rbd-portratt img { aspect-ratio: 4 / 5; object-fit: cover; background: var(--rbd-dimma); }
.rbd-portratt h3 { font-size: 18px; margin: 16px 0 2px; }
.rbd-portratt p { font-size: 14px; color: var(--rbd-gra); margin: 0; }

/* --- Byggstenar (s. 47) ---------------------------------------------- */
/* Nyckeltal: stor siffra i Light, kort etikett under */
.rbd-nyckeltal { display: flex; flex-direction: column; gap: 6px; }
.rbd-nyckeltal__varde { font-size: var(--rbd-fs-nyckeltal); font-weight: var(--rbd-light); line-height: 1;
                        letter-spacing: -0.02em; color: var(--rbd-nyckeltal); font-variant-numeric: tabular-nums; }
.rbd-nyckeltal__etikett { font-size: 15px; color: var(--rbd-text-sekundar); }

/* Citat: citattecken i Djupblå, citatet i Light */
.rbd-citat { margin: 0; max-width: 40em; }
.rbd-citat::before { content: "\201D"; display: block; font-size: 72px; line-height: .8; font-weight: var(--rbd-bold);
                     font-style: italic; color: var(--rbd-djupbla); }
.rbd-mork .rbd-citat::before { color: var(--rbd-massing); }
.rbd-citat blockquote { margin: 8px 0 16px; font-size: clamp(22px, 2.6vw, 32px); font-weight: var(--rbd-light);
                        line-height: 1.3; color: var(--rbd-text-rubrik); }
.rbd-citat figcaption { font-size: 11px; font-weight: var(--rbd-medium); letter-spacing: var(--rbd-ls-kicker);
                        text-transform: uppercase; color: var(--rbd-text-sekundar); }

/* Tidslinje: punkter på en linje, nuläget i Mässing */
.rbd-tidslinje { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; }
.rbd-tidslinje::before { content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 2px; background: var(--rbd-steg-4); }
.rbd-tidslinje li { position: relative; padding-top: 32px; }
.rbd-tidslinje li::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--rbd-djupbla); }
.rbd-tidslinje li.is-nu::before { background: var(--rbd-massing); }
.rbd-tidslinje strong { display: block; font-weight: var(--rbd-bold); color: var(--rbd-text-rubrik); }
.rbd-tidslinje span { font-size: 13px; color: var(--rbd-text-sekundar); }
@media (max-width: 640px) {
  .rbd-tidslinje { grid-auto-flow: row; gap: 24px; }
  .rbd-tidslinje::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .rbd-tidslinje li { padding: 0 0 0 36px; }
}

/* Flöde: steg med pil, aktuellt steg markerat */
.rbd-flode { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rbd-flode li { position: relative; padding: 12px 18px; background: var(--rbd-dimma); font-weight: var(--rbd-medium); font-size: 15px; color: var(--rbd-skiffer); }
.rbd-flode li.is-aktiv { background: var(--rbd-djupbla); color: var(--rbd-vit); }
.rbd-flode li + li { margin-left: 28px; }
.rbd-flode li + li::before { content: "→"; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); color: var(--rbd-massing); }

/* Före och efter: efter-sidan på nivå R */
.rbd-fore-efter { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.rbd-fore-efter > div { padding: 24px; }
.rbd-fore-efter > div:first-child { background: var(--rbd-dimma); }
.rbd-fore-efter > div:last-child { background: var(--rbd-vit); box-shadow: var(--rbd-niva-r); }
.rbd-fore-efter .rbd-kicker { color: var(--rbd-massing); margin-bottom: 8px; }
@media (max-width: 560px) { .rbd-fore-efter { grid-template-columns: 1fr; } }

/* Insiktsruta: ikon, rubrik, en mening. Högst en per sektion. */
.rbd-insikt { display: grid; grid-template-columns: 24px 1fr; gap: 4px 16px; padding: 24px 28px; background: var(--rbd-dimma); max-width: 560px; }
.rbd-insikt .rbd-ikon { grid-row: span 2; color: var(--rbd-djupbla); }
.rbd-insikt strong { color: var(--rbd-skiffer); }
.rbd-insikt p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--rbd-skiffer); }

/* --- Ikoner (s. 45–46) · 24 × 24, 1,5 px linje, aldrig fyllda ------- */
.rbd-ikon { width: 24px; height: 24px; flex: none; color: var(--rbd-ikon); fill: none; stroke: currentColor;
            stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rbd-ikon--32 { width: 32px; height: 32px; }
.rbd-ikonrad { display: grid; grid-template-columns: 32px 1fr; gap: 4px 16px; align-items: start; }
.rbd-ikonrad .rbd-ikon { grid-row: span 2; width: 32px; height: 32px; }
.rbd-ikonrad h3 { font-size: 18px; margin: 4px 0 0; }
.rbd-ikonrad p { margin: 0; font-size: 15px; color: var(--rbd-text-sekundar); }
.rbd-ikoncirkel { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--rbd-vit); margin-bottom: 16px; }
.rbd-mork .rbd-ikon { color: var(--rbd-massing); }

/* --- Agenda / numrerade steg ---------------------------------------- */
.rbd-steg { list-style: none; margin: 0; padding: 0; counter-reset: steg; display: grid; gap: 0; }
.rbd-steg li { counter-increment: steg; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--rbd-linje); }
.rbd-steg li::before { content: counter(steg, decimal-leading-zero); font-weight: var(--rbd-light); font-size: 20px; color: var(--rbd-massing); }
.rbd-steg strong { display: block; color: var(--rbd-text-rubrik); }

/* --- Tabeller: siffror högerställs --------------------------------- */
.rbd-tabell { width: 100%; border-collapse: collapse; font-size: 15px; }
.rbd-tabell th { text-align: left; font-weight: var(--rbd-medium); font-size: 12px; letter-spacing: var(--rbd-ls-kicker);
                 text-transform: uppercase; color: var(--rbd-text-sekundar); padding: 10px 12px; border-bottom: 1px solid var(--rbd-steg-4); }
.rbd-tabell td { padding: 12px; border-bottom: 1px solid var(--rbd-linje); }
.rbd-tabell .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Formulär ---------------------------------------------------- */
.rbd-falt { display: grid; gap: 6px; margin-bottom: 20px; }
.rbd-falt label { font-size: 13px; font-weight: var(--rbd-medium); color: var(--rbd-text-rubrik); }
.rbd-falt input, .rbd-falt textarea, .rbd-falt select {
  font: inherit; font-size: 16px; color: var(--rbd-skiffer); background: var(--rbd-vit);
  border: 1px solid var(--rbd-steg-4); border-radius: var(--rbd-radie); padding: 13px 14px; }
.rbd-falt input:focus, .rbd-falt textarea:focus, .rbd-falt select:focus { outline: none; border-color: var(--rbd-djupbla); box-shadow: 0 0 0 3px var(--rbd-ljusbla-30); }

/* --- Sidfot med sidfotsbandet (s. 21) ------------------------------- */
.rbd-footer { padding-top: 80px; }
.rbd-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-bottom: 64px; font-size: 15px; }
.rbd-footer__grid h4 { font-size: 12px; font-weight: var(--rbd-medium); letter-spacing: var(--rbd-ls-kicker); text-transform: uppercase; color: var(--rbd-text-sekundar); margin-bottom: 14px; }
.rbd-footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rbd-footer__grid a { color: var(--rbd-text); text-decoration: none; }
.rbd-footer__grid a:hover { color: var(--rbd-djupbla); text-decoration: underline; }
.rbd-footer__legal { font-size: 13px; color: var(--rbd-text-sekundar); padding-bottom: 24px; }
@media (max-width: 760px) { .rbd-footer__grid { grid-template-columns: 1fr 1fr; } }

/* Bandet: 8 · 4 · 2 · 1, går ut i vänsterkanten, mynnar ut i symbolen
   som står på samma golv i högra hörnet. Ingen luft under. */
.rbd-band { display: flex; align-items: flex-end; height: var(--rbd-band-h); }
.rbd-band__steg { display: flex; flex: 1; height: 100%; }
.rbd-band__steg i { display: block; height: 100%; }
.rbd-band__steg i:nth-child(1) { flex: 8; background: var(--rbd-steg-1); }
.rbd-band__steg i:nth-child(2) { flex: 4; background: var(--rbd-steg-2); }
.rbd-band__steg i:nth-child(3) { flex: 2; background: var(--rbd-steg-3); }
.rbd-band__steg i:nth-child(4) { flex: 1; background: var(--rbd-steg-4); }
.rbd-band__symbol { flex: none; height: 100%; margin-left: calc(var(--rbd-band-h) / 2); margin-right: calc(var(--rbd-band-h) / 2); }
.rbd-band__symbol svg { height: 100%; width: auto; }
.rbd-band--hel .rbd-band__symbol { display: none; } /* full bredd som avslutning på mörka sektioner */

/* --- Liggande logotyp (nivå 2) · ENDAST som platshållare -----------
   Manualen: ordbilden ritas aldrig om. Byt mot originalfilen så snart den finns. */
.rbd-logo-liggande { display: inline-flex; align-items: center; gap: .55em; font-size: 20px; color: var(--rbd-skiffer); text-decoration: none; min-width: 180px; }
.rbd-logo-liggande svg { height: 1.6em; width: auto; }
.rbd-logo-liggande b { font-weight: var(--rbd-bold); }
.rbd-logo-staende { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: .6em; font-size: 22px; line-height: 1.12; color: var(--rbd-skiffer); min-width: 140px; }
.rbd-logo-staende svg { height: 3.36em; width: auto; }
.rbd-logo-staende b { font-weight: var(--rbd-bold); }
.rbd-mork .rbd-logo-liggande, .rbd-mork .rbd-logo-staende { color: var(--rbd-vit); }

/* --- Rörelse: lugn, utan effekter ---------------------------------- */
/* Döljs bara när JavaScript körs (klassen js sätts i <head>), så att innehållet alltid syns för sökmotorer och utan JS */
.js .rbd-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--rbd-ease), transform .7s var(--rbd-ease); }
.js .rbd-reveal.is-synlig { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .rbd-reveal { opacity: 1; transform: none; }
}

.rbd-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ytor i Dimma blir vita när de ligger på en Dimma-panel, så att de syns */
.rbd-panel .rbd-flode li:not(.is-aktiv),
.rbd-panel .rbd-fore-efter > div:first-child,
.rbd-panel .rbd-insikt,
.rbd-panel .rbd-niva-d { background: var(--rbd-vit); }

/* ==========================================================================
   Standardelement · HTML utan klasser ska se ut som Ridgeback
   ========================================================================== */
h5 { font-size: 15px; line-height: 1.3; letter-spacing: 0; margin: 0 0 .5em; font-weight: var(--rbd-bold); color: var(--rbd-text-rubrik); }
h6 { font-size: var(--rbd-fs-kicker); font-weight: var(--rbd-medium); text-transform: uppercase; letter-spacing: var(--rbd-ls-kicker);
     color: var(--rbd-kicker); margin: 0 0 .75em; line-height: 1.4; }
strong, b { font-weight: var(--rbd-bold); }
mark { background: var(--rbd-massing-30); color: var(--rbd-skiffer); padding: 0 .15em; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
sub, sup { font-size: .7em; line-height: 0; }
code, kbd, samp, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; }
code { background: var(--rbd-dimma); color: var(--rbd-skiffer); padding: .1em .35em; border-radius: var(--rbd-radie); }
kbd { border: 1px solid var(--rbd-steg-4); border-bottom-width: 2px; padding: .05em .4em; border-radius: var(--rbd-radie); background: var(--rbd-vit); color: var(--rbd-skiffer); }
pre { background: var(--rbd-natt); color: var(--rbd-krita); padding: 20px 24px; overflow-x: auto; line-height: 1.6; border-radius: var(--rbd-radie); }
pre code { background: none; color: inherit; padding: 0; }
hr { border: 0; border-top: 1px solid var(--rbd-linje); margin: 48px 0; }
address { font-style: normal; }
blockquote { margin: 0 0 1em; padding-left: 24px; border-left: 2px solid var(--rbd-massing); font-weight: var(--rbd-light);
             font-size: var(--rbd-fs-underrubrik); line-height: var(--rbd-lh-ingress); color: var(--rbd-text-rubrik); max-width: 34em; }
.rbd-citat blockquote { padding-left: 0; border-left: 0; }
figure { margin: 0; }
figcaption { margin-top: 10px; }

ul, ol { padding-left: 1.3em; margin: 0 0 1em; max-width: var(--rbd-matt); }
li { margin-bottom: .35em; }
ul li::marker { color: var(--rbd-steg-2); }
ol li::marker { color: var(--rbd-djupbla); font-weight: var(--rbd-medium); }
dl { margin: 0 0 1em; display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; max-width: var(--rbd-matt); }
dt { font-weight: var(--rbd-bold); color: var(--rbd-text-rubrik); }
dd { margin: 0; color: var(--rbd-text-sekundar); }

table:not([class]) { width: 100%; border-collapse: collapse; font-size: 15px; }
table:not([class]) caption { text-align: left; font-size: var(--rbd-fs-kalla); color: var(--rbd-text-sekundar); caption-side: bottom; padding-top: 10px; }
table:not([class]) th { text-align: left; font-weight: var(--rbd-medium); font-size: 12px; letter-spacing: var(--rbd-ls-kicker); text-transform: uppercase;
                        color: var(--rbd-text-sekundar); padding: 10px 12px; border-bottom: 1px solid var(--rbd-steg-4); }
table:not([class]) td { padding: 12px; border-bottom: 1px solid var(--rbd-linje); }
table:not([class]) tfoot td { font-weight: var(--rbd-bold); border-bottom: 0; border-top: 1px solid var(--rbd-steg-4); }
.rbd-tabell caption { text-align: left; caption-side: bottom; padding-top: 10px; font-size: var(--rbd-fs-kalla); color: var(--rbd-text-sekundar); }

/* Formulärkontroller */
fieldset { border: 1px solid var(--rbd-linje); padding: 20px 24px 8px; margin: 0 0 24px; border-radius: var(--rbd-radie); }
legend { padding: 0 8px; font-size: 12px; font-weight: var(--rbd-medium); letter-spacing: var(--rbd-ls-kicker); text-transform: uppercase; color: var(--rbd-kicker); }
input, select, textarea, button { font-family: var(--rbd-font); }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--rbd-djupbla); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; }
.rbd-val { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 16px; cursor: pointer; }
.rbd-falt .rbd-hjalp { font-size: 13px; color: var(--rbd-text-sekundar); }
.rbd-falt.is-fel input, .rbd-falt.is-fel textarea { border-color: var(--rbd-koral); }
.rbd-falt.is-fel .rbd-hjalp { color: var(--rbd-skiffer); }
.rbd-falt.is-fel .rbd-hjalp::before { content: "! "; color: var(--rbd-koral); font-weight: var(--rbd-bold); }
.rbd-falt input:disabled, .rbd-knapp:disabled, .rbd-knapp[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
input[type="range"] { width: 100%; }
input[type="file"] { font-size: 14px; color: var(--rbd-gra); }
input[type="file"]::file-selector-button { font: var(--rbd-medium) 14px var(--rbd-font); color: var(--rbd-djupbla); background: var(--rbd-dimma);
  border: 1px solid var(--rbd-steg-4); border-radius: var(--rbd-radie); padding: 9px 14px; margin-right: 12px; cursor: pointer; }
progress { width: 100%; height: 8px; }
meter { width: 100%; height: 12px; }

/* Utfällbart */
details { border-top: 1px solid var(--rbd-linje); max-width: var(--rbd-matt); }
details:last-of-type { border-bottom: 1px solid var(--rbd-linje); }
summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: var(--rbd-bold); color: var(--rbd-text-rubrik);
          display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: var(--rbd-light); font-size: 24px; line-height: .8; color: var(--rbd-djupbla); }
details[open] summary::after { content: "−"; }
details > *:not(summary) { margin-bottom: 18px; color: var(--rbd-text-sekundar); }

/* Etikett / tagg */
.rbd-tagg { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: var(--rbd-medium); letter-spacing: .02em;
            background: var(--rbd-dimma); color: var(--rbd-skiffer); border-radius: var(--rbd-radie); }
.rbd-tagg--accent { background: var(--rbd-massing-30); }
.rbd-tagg--bla { background: var(--rbd-ljusbla-30); color: var(--rbd-djupbla); }

/* Komponentlistor ska inte begränsas av radlängden för löptext */
.rbd-tidslinje, .rbd-flode, .rbd-steg { max-width: none; padding-left: 0; }
.rbd-tidslinje li, .rbd-flode li, .rbd-steg li { margin-bottom: 0; }
.rbd-nyckeltal__varde { white-space: nowrap; }