/* ============================================================
   norrljus-home.css v2 — PILOT: ljus premium-myndighetsestetik på STARTSIDAN
   Laddas bara på index.html (body.page-home). Kräver tokens.css.

   v2 efter designgranskningen (docs/norrljus-designgranskning.md):
   SEKTIONSSCOPADE VARIABLER i stället för global vändning + vitlista —
   varje kontext (ljus bas / .section--dark) sätter sina egna text-/yt-
   variabler och komponenterna konsumerar dem. Därmed försvinner hela
   klassen "mörkt-på-mörkt"-fel by design. Exakt två mörka statement-
   sektioner. EN aurora (heron). Inga mörk-tema-rester.
   ============================================================ */

/* ---------- 1. LJUS BASKONTEXT ---------- */
body.page-home {
  /* Sajtens variabler → Norrljus ljusa kontext */
  --bg: var(--nl-paper);
  --bg-2: var(--nl-paper-2);
  --bg-3: var(--nl-paper-2);
  --surface: var(--nl-paper-2);
  --surface-2: var(--nl-paper);
  --card: var(--nl-card);
  --card-2: var(--nl-card);
  --card-3: var(--nl-card);
  --text: var(--nl-ink);
  --text-2: var(--nl-ink-2);
  --muted: var(--nl-ink-2);
  --ink: var(--nl-ink);
  --ink-soft: var(--nl-ink-2);
  --accent: var(--nl-accent-text);   /* text-säker accent (policy: aldrig #00947f som text) */
  --accent-2: var(--nl-accent-text);
  --line: var(--nl-line);
  --shadow: var(--nl-shadow-card);
  --radius: var(--nl-r-l); --radius-sm: var(--nl-r-m); --radius-xs: var(--nl-r-s);

  /* Kontextuella komponent-tokens (byts om i mörk kontext) */
  --ctx-heading: var(--nl-ink);
  --ctx-eyebrow: var(--nl-accent-text);
  --ctx-chip-bg: color-mix(in srgb, var(--nl-accent) 10%, transparent);
  --ctx-chip-text: var(--nl-accent-text);
  --ctx-chip-line: color-mix(in srgb, var(--nl-accent) 30%, transparent);
  --ctx-btn-primary-bg: var(--nl-ink);
  --ctx-btn-primary-fg: #fff;
  --ctx-btn-primary-hover: var(--nl-ink-hover);
  --ctx-card-bg: var(--nl-card);
  --ctx-card-line: var(--nl-line);

  background: var(--nl-paper);
  color: var(--nl-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 2. MÖRK STATEMENT-KONTEXT (sektionsscopad — rotorsaksfixen) ----------
   Allt inuti .section--dark ärver rätt färger via samma variabler. */
body.page-home .section--dark {
  --text: var(--nl-dark-text);
  --text-2: var(--nl-dark-muted);
  --muted: var(--nl-dark-muted);
  --ink: #ffffff;
  --ink-soft: var(--nl-dark-muted);
  --line: var(--nl-dark-line);
  --card: var(--nl-dark-elev);
  --card-2: var(--nl-dark-elev);
  --card-3: var(--nl-dark-elev);
  --shadow: none;

  --ctx-heading: #ffffff;
  --ctx-eyebrow: var(--nl-aur-cyan);
  --ctx-chip-bg: rgba(255, 255, 255, 0.08);
  --ctx-chip-text: var(--nl-dark-text);
  --ctx-chip-line: rgba(255, 255, 255, 0.14);
  --ctx-btn-primary-bg: #ffffff;
  --ctx-btn-primary-fg: var(--nl-ink);
  --ctx-btn-primary-hover: #dfe7f0;
  --ctx-card-bg: var(--nl-dark-elev);
  --ctx-card-line: var(--nl-dark-line);

  /* Ren mörk yta — auroran bor i heron, inte här (EN signatur) */
  background: linear-gradient(180deg, var(--nl-dark) 0%, var(--nl-dark-2) 100%);
  color: var(--text);
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}
/* Respektera modifieraren: platt mörk slut-CTA utan gradient */
body.page-home .section--dark.is-flat { background: var(--nl-dark); }

/* ---------- 3. GEMENSAMMA KOMPONENTREGLER (konsumerar kontexten) ---------- */
body.page-home h1, body.page-home h2, body.page-home h3 { color: var(--ctx-heading); }
body.page-home p { color: var(--text-2); }

body.page-home .eyebrow {
  color: var(--ctx-eyebrow);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* Knappar: solid, kontextuell — rosa gradienten är pensionerad */
body.page-home .button--primary {
  background: var(--ctx-btn-primary-bg);
  color: var(--ctx-btn-primary-fg);
  border: 1px solid var(--ctx-btn-primary-bg);
  box-shadow: 0 10px 24px -14px rgba(29, 38, 55, 0.45);
}
body.page-home .button--primary:hover { background: var(--ctx-btn-primary-hover); border-color: var(--ctx-btn-primary-hover); }
body.page-home .button--secondary,
body.page-home .button--ghost {
  background: color-mix(in srgb, var(--ctx-card-bg) 55%, transparent);
  color: var(--text);
  border: 1.5px solid var(--ctx-card-line);
  box-shadow: none;
}
body.page-home .button--secondary:hover { border-color: var(--text-2); }
/* Blockerare: rosa hover-glow på hero-CTA släcks */
body.page-home .button--glow::after { display: none !important; }

/* Kort/paneler — platta med kant (papperskänsla); timeline-card inkluderad */
body.page-home .light-card,
body.page-home .card,
body.page-home .metric-card,
body.page-home .checklist-card,
body.page-home .timeline-card,
body.page-home .faq details {
  background: var(--ctx-card-bg);
  color: var(--text);
  border: 1px solid var(--ctx-card-line);
  box-shadow: var(--nl-shadow-card);
}
body.page-home .card p, body.page-home .light-card p,
body.page-home .metric-card p, body.page-home .timeline-card p,
body.page-home details p { color: var(--text-2); }
body.page-home .faq summary { color: var(--text); }

/* CTA-panelen: ljus kontext = kort; mörk kontext = transparent del av sektionen */
body.page-home .cta-panel {
  background: var(--ctx-card-bg);
  border: 1px solid var(--ctx-card-line);
  box-shadow: var(--nl-shadow-panel);
}
body.page-home .section--dark .cta-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Chips/pills (kontextuella — blockeraren "osynliga pills" löst by design) */
body.page-home .pill {
  background: var(--ctx-chip-bg);
  color: var(--ctx-chip-text);
  border: 1px solid var(--ctx-chip-line);
  font-family: var(--font);
  font-weight: 600;
}
body.page-home .card-number {
  background: color-mix(in srgb, var(--nl-accent) 12%, transparent);
  color: var(--ctx-chip-text);
  font-family: var(--font);
  font-weight: 600;
}

/* Statistik: siffror i bläck/vitt (mono), etiketter dämpade, suffix följer siffran */
body.page-home .stat-item__number,
body.page-home .stat-item__suffix {
  color: var(--ctx-heading);
  font-family: var(--font);
  font-feature-settings: "tnum";
}
body.page-home .stat-item__label { color: var(--text-2); }
body.page-home .num, body.page-home td.num { font-family: var(--font); font-feature-settings: "tnum"; }

/* Prosalänkar: alltid identifierbara (WCAG 1.4.1) — accent-text + understrykning */
body.page-home main p a:not([class]),
body.page-home .faq p a,
body.page-home .card p a, body.page-home .light-card p a {
  color: var(--nl-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.page-home .section--dark p a:not([class]) { color: var(--nl-aur-cyan); }
body.page-home .news-card__link { color: var(--nl-accent-text); }

/* ---------- 4. SITE-CHROME: ljus header/nav/megameny (blockerare) ---------- */
body.page-home .site-header {
  background: var(--nl-paper); /* solid fallback för browsers utan color-mix */
  background: color-mix(in srgb, var(--nl-paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nl-line);
  box-shadow: none;
}
body.page-home .site-header.scrolled {
  background: var(--nl-paper);
  background: color-mix(in srgb, var(--nl-paper) 96%, transparent);
}
/* Nav-läsbarhet: fullt bläck + tydlig vikt (var ink-2, upplevdes svag) */
body.page-home .nav__link { color: var(--nl-ink); font-weight: 600; }
body.page-home .nav__link:hover, body.page-home .nav__link.is-active { color: var(--nl-accent-text); }
body.page-home .nav__login { color: var(--nl-ink-2); }
body.page-home .nav__login:hover { color: var(--nl-accent-text); }
body.page-home .menu-toggle span { background: var(--nl-ink); }
body.page-home .mega-menu {
  background: var(--nl-card);
  border: 1px solid var(--nl-line);
  box-shadow: var(--nl-shadow-panel);
  backdrop-filter: none;
}
body.page-home .mega-menu__heading { color: var(--nl-accent-text); border-bottom-color: var(--nl-line); font-family: var(--font); }
body.page-home .mega-menu__list a { color: var(--nl-ink); }
body.page-home .mega-menu__list a:hover { color: var(--nl-accent-text); }
body.page-home .mega-menu__list span { color: var(--nl-ink-2); }
@media (max-width: 920px) {
  body.page-home .nav__list { background: var(--nl-card); border: 1px solid var(--nl-line); }
  body.page-home .mega-menu { background: var(--nl-paper-2); }
  body.page-home .mega-menu.is-open { border: 1px solid var(--nl-line); }
}

/* ---------- 5. HERO: EN aurora-viskning i eget lager ---------- */
body.page-home .hero {
  position: relative;
  background: var(--nl-paper);
  color: var(--nl-ink);
  border-bottom: 1px solid var(--nl-line);
}
body.page-home .hero::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;                              /* idealets 18–20 % */
  filter: blur(44px);
  background:
    radial-gradient(52% 40% at 14% 12%, var(--nl-aur-green), transparent 66%),
    radial-gradient(46% 38% at 86% 6%, var(--nl-aur-cyan), transparent 66%),
    radial-gradient(38% 30% at 58% 34%, var(--nl-aur-violet), transparent 70%);
}
body.page-home .hero > .container { position: relative; z-index: 1; }
/* Blockerare: mörk-tema-glowen (sky-blå/indigo — den döda ljusblå familjen) släcks */
body.page-home .hero-bg-glow { display: none !important; }
body.page-home .gov-section__deco { display: none !important; }

/* Hero-typografi stramad mot mocken */
body.page-home .hero h1 {
  color: var(--nl-ink);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* Blockerare: taglinen — sajtens viktigaste mening — i fullt bläck */
body.page-home .hero-h1-sub { color: var(--nl-ink); display: block; margin-top: 0.35em; }
body.page-home .hero .eyebrow { font-size: 0.85rem !important; /* ersätter inline 1.1rem */ }
body.page-home .hero p, body.page-home .hero__subtitle { color: var(--nl-ink-2); }
body.page-home .hero__trust-line {
  color: var(--nl-ink-2);
  font-family: var(--font);
  font-size: 0.82rem;
}
body.page-home .hero__trust-line .trust-divider { background: var(--nl-accent); }

/* Karusellens paus/spela-knapp (WCAG 2.2.2) — synlig mono-pill i showcasens
   hörn (flik-navet är dolt; knappen får inte gömmas med det). */
body.page-home .hero-showcase { position: relative; }
body.page-home .hero-autoplay-toggle {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font);
  font-size: 0.72rem;
  color: var(--nl-ink-2);
  background: var(--nl-card);
  background: color-mix(in srgb, var(--nl-card) 85%, transparent);
  border: 1px solid var(--nl-line);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: var(--nl-shadow-card);
}
body.page-home .hero-autoplay-toggle:hover { color: var(--nl-ink); border-color: var(--nl-ink-2); }

/* Showcase = MÖRK produktpanel (app-UI med ljus text). Behåll dess egen
   mörka design (annars blir innehållet vit-på-vitt och osynligt) — ge den
   bara en premium-skugga så den svävar i den ljusa heron. */
body.page-home .appframe {
  box-shadow: 0 44px 90px -34px rgba(21, 27, 38, 0.45), 0 10px 28px -14px rgba(21, 27, 38, 0.22);
  border: 1px solid rgba(21, 27, 38, 0.10);
}

/* ---------- 6. ÖVRIGA SEKTIONER ---------- */
body.page-home .gov-card { background: var(--nl-dark-elev); border: 1px solid var(--nl-dark-line); }

/* Cursor-glow är struket i den nya riktningen */
body.page-home .cursor-glow { display: none !important; }

/* Fokusring alltid synlig (WCAG 2.4.7) */
body.page-home :focus-visible { outline: 2px solid var(--nl-accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- 7. RÖRELSE (WCAG 2.2.2) ---------- */
@media (prefers-reduced-motion: reduce) {
  body.page-home .hero::before,
  body.page-home [data-reveal], body.page-home .reveal {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   v5 SUBSTANS & LÄSBARHET — svar på "loggan syns inte, känslan är
   tunn, svårt att läsa". Lägre i filen = vinner via källordning.
   ============================================================ */

/* Loggan: vit SVG (fill:#fff) blev osynlig på papper → gör den mörk.
   UNDANTAG: sidfoten är mörk — där ska originalets vita logga behållas
   (denna regel är mer specifik än site-filens och laddas efter den). */
body.page-home .brand img { filter: brightness(0) saturate(0); }
body.page-home .site-footer .brand img { filter: none; }

/* Mörkare brödtext = tydligare läsning (var ink-2 grått, vikt 400) */
body.page-home { --text-2: #33415a; }               /* ~9,3:1, mörkare än ink-2 */
body.page-home .section--dark { --text-2: #c3cde0; } /* ljus kontext-brödtext */
body.page-home p,
body.page-home .light-card p, body.page-home .card p,
body.page-home .metric-card p, body.page-home .timeline-card p {
  color: var(--text-2);
  font-weight: 420;
}

/* Hero: mer tyngd i rubriken, tydligare ingress, starkare aurora */
body.page-home .hero h1 { font-weight: 650; letter-spacing: -0.028em; }
body.page-home .hero__subtitle {
  color: #2f3d54;
  font-weight: 450;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
}
body.page-home .hero::before { opacity: 0.32; filter: blur(50px); }
body.page-home .hero .eyebrow { font-size: 0.82rem !important; letter-spacing: 0.14em; }

/* Trust-line: läsbarare (större, mörkare, tydliga teal-avdelare) */
body.page-home .hero__trust-line {
  color: #33415a;
  font-size: 0.86rem;
  font-weight: 500;
  gap: 14px;
}
body.page-home .hero__trust-line .trust-divider {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--nl-accent);
}

/* Kort: definierad kant + djup i två lager (bort från "tunt vitt-på-vitt") */
body.page-home .light-card, body.page-home .card,
body.page-home .metric-card, body.page-home .checklist-card,
body.page-home .timeline-card {
  border: 1px solid #d3dde7;
  box-shadow: 0 1px 2px rgba(29,38,55,0.05), 0 14px 30px -20px rgba(29,38,55,0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body.page-home .light-card:hover, body.page-home .card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--nl-accent) 40%, var(--nl-line));
  box-shadow: 0 2px 4px rgba(29,38,55,0.06), 0 22px 44px -22px rgba(29,38,55,0.34);
}
body.page-home .light-card h3, body.page-home .card h3 { font-weight: 650; }

/* Sektionsrytm: tydligare skillnad ljus/dämpad så sidan inte blir platt */
body.page-home .section--muted { background: linear-gradient(180deg, #eef4f8 0%, #e7eef4 100%); }

/* Rollpanelens kort: lite mer närvaro (accent-kant vänster) */
body.page-home [aria-label*="roll"] .light-card { border-left: 3px solid var(--nl-accent); }

/* Högre specificitet: vinn över .hero .hero__subtitle i styles.css */
body.page-home .hero .hero__subtitle { color: #2f3d54; }
body.page-home main .section--light p,
body.page-home main .section--muted p { color: #33415a; }

/* ============================================================
   v8 HERO-MOCKUP RETEMA — Hubs kunddemo-blå/vit i stället för mörk.
   Panelerna (.appframe → .heromock, alla hm-, mm-, cm-, fl-, ca- och
   wk-prefixade selektorer i styles.css) är byggda för mörk botten: vit text
   (rgba(255,255,255,x)) på en mörk yta (.appframe bg #0b1526). Att bara
   ljusa upp bakgrunden räcker inte — varje textfärg och rgba-vit yta
   riktas här om till läsbart mörkblått bläck / Hubs-blå på vitt.
   Endast startsidan. Källordning: sist i filen vinner över den mörka
   originaldefinitionen i styles.css.

   Undantag: videosamtalsöverlägget (.cm-callui och dess barn) lämnas
   MEDVETET orört/mörkt. Det är redan ett eget, tätt lager
   (bg rgba(5,11,22,.95)) ovanpå panelen och har egen intern kontrast
   (vit text på mörkt, ljusa toasts) — precis som riktiga videomötes-UI:
   er (Teams/Meet/Talk) som är mörka oavsett värdappens tema. Att tvinga
   in ljust tema där hade sett fel ut, inte mer läsbart.
   ============================================================ */

body.page-home {
  --hubs-blue: #1a6fc4;          /* Hubs-blå: primär/aktiv/accent */
  --hubs-blue-bg: #e4eefb;       /* aktiv/vald rad */
  --hubs-surface: #eef4fb;       /* ytor/kort/chip-bakgrunder (var 0.05–0.08 vit) */
  --hubs-surface-line: #dce7f3;  /* kant på ytor/chips */
  --hubs-nav-bg: #f2f7fc;        /* sidebar/nav-kolumn */
  --hubs-line: #e2ebf5;          /* dividers/kanter */
  --hubs-ink: #1c2e4a;           /* primärtext (var rgba(255,255,255,.55-.92)) */
  --hubs-ink-2: #56668a;         /* sekundärtext (var rgba(255,255,255,.35-.54)) */
  --hubs-ink-3: #7c8aa6;         /* svag/meta-text (var rgba(255,255,255,<.35)) */
  --hubs-skel: #e3ecf6;          /* skeleton-staplar */
  --hubs-green-bg: #e0f2ea;
  --hubs-green-text: #1f7a52;
  --hubs-green-line: #b8e0cb;
  --hubs-yellow-bg: #fcf0dc;
  --hubs-yellow-text: #9a6b1e;
  --hubs-teal-bg: #dcf1f3;
  --hubs-teal-text: #0e7a80;
  --hubs-dot: #c9d6e6;           /* trafikljusprickar på vit topbar */
}

/* --- Panelram: vit huvudyta i stället för mörkblå (#0b1526) --- */
body.page-home .hero-panel .appframe,
body.page-home .appframe {
  background: #ffffff;
}
body.page-home .appframe__topbar {
  background: #ffffff;
  border-color: var(--hubs-line);
}
body.page-home .appframe__dot--r,
body.page-home .appframe__dot--y,
body.page-home .appframe__dot--g { background: var(--hubs-dot); }
body.page-home .appframe__title { color: var(--hubs-ink-2); }

/* --- Heromock-basen: mörkblått bläck i stället för vit text --- */
body.page-home .heromock { color: var(--hubs-ink-2); }

/* --- Gemensamt app-skal: toppbar --- */
body.page-home .hm-top {
  background: #ffffff;
  border-color: var(--hubs-line);
}
body.page-home .hm-top__grid i { background: var(--hubs-ink-3); }
body.page-home .hm-top__logo { color: var(--hubs-blue); }
body.page-home .hm-top__app { color: var(--hubs-ink); }
body.page-home .hm-top__ico,
body.page-home .hm-top__bell { color: var(--hubs-ink-2); }
/* Notis-prick röd + online-prick grön behålls (spec); bara ringens
   "kontrastfärg" mot bakgrunden byts från mörk till vit */
body.page-home .hm-top__user::after { border-color: #ffffff; }

/* --- Gemensamma byggstenar --- */
body.page-home .hm-pill { background: var(--hubs-blue); }
body.page-home .hm-tag--green { background: var(--hubs-green-bg); color: var(--hubs-green-text); }
body.page-home .hm-tag--yellow { background: var(--hubs-yellow-bg); color: var(--hubs-yellow-text); }
body.page-home .hm-tag--teal { background: var(--hubs-teal-bg); color: var(--hubs-teal-text); }
body.page-home .hm-chip {
  background: var(--hubs-surface);
  border-color: var(--hubs-surface-line);
  color: var(--hubs-ink-2);
}
body.page-home .hm-verif { background: var(--hubs-green-bg); color: var(--hubs-green-text); }
body.page-home .hm-skel { background: var(--hubs-skel); }
body.page-home .hm-dots i { background: var(--hubs-ink-2); }

/* ----------------------------------------
   Panel 1: Meddelanden (mm-*)
   ---------------------------------------- */
body.page-home .mm-side,
body.page-home .mm-detail {
  background: var(--hubs-nav-bg);
  border-color: var(--hubs-line);
}
body.page-home .mm-side__label,
body.page-home .mm-detail__label { color: var(--hubs-ink-3); }
body.page-home .mm-side__item { color: var(--hubs-ink-2); }
body.page-home .mm-side__item.is-active {
  background: var(--hubs-blue-bg);
  color: var(--hubs-blue);
  box-shadow: inset 2px 0 0 var(--hubs-blue);
}
body.page-home .mm-count { background: var(--hubs-blue); }
body.page-home .mm-list { border-color: var(--hubs-line); }
body.page-home .mm-search {
  background: var(--hubs-surface);
  border-color: var(--hubs-surface-line);
  color: var(--hubs-ink-3);
}
body.page-home .mm-group { color: var(--hubs-ink-3); }
body.page-home .mm-row { border-color: var(--hubs-line); }
body.page-home .mm-row__meta b { color: var(--hubs-ink); }
body.page-home .mm-row__meta i { color: var(--hubs-ink-3); }
body.page-home .mm-row.is-sel {
  background: var(--hubs-blue-bg);
  box-shadow: inset 2px 0 0 var(--hubs-blue);
}
body.page-home .mm-dot { background: var(--hubs-blue); }
body.page-home .mm-row--new { background: var(--hubs-surface); }
body.page-home .mm-read__title { color: var(--hubs-ink); }
body.page-home .mm-read__meta { color: var(--hubs-ink-3); }
body.page-home .mm-receipt {
  background: var(--hubs-green-bg);
  border-color: var(--hubs-green-line);
  color: var(--hubs-green-text);
}
body.page-home .mm-detail__val { color: var(--hubs-ink); }

/* ----------------------------------------
   Panel 2: Chatt (cm-*) — cm-callui* (videosamtal) undantaget, se filhuvud
   ---------------------------------------- */
body.page-home .cm-convs,
body.page-home .cm-people {
  background: var(--hubs-nav-bg);
  border-color: var(--hubs-line);
}
body.page-home .cm-convs__search {
  background: var(--hubs-surface);
  border-color: var(--hubs-surface-line);
  color: var(--hubs-ink-3);
}
body.page-home .cm-conv { color: var(--hubs-ink); }
body.page-home .cm-conv.is-active {
  background: var(--hubs-blue-bg);
  color: var(--hubs-blue);
  box-shadow: inset 2px 0 0 var(--hubs-blue);
}
body.page-home .cm-head { border-color: var(--hubs-line); }
body.page-home .cm-head__title { color: var(--hubs-ink); }
body.page-home .cm-doc__saved { color: var(--hubs-green-text); }
body.page-home .cm-note { color: var(--hubs-ink-3); }
body.page-home .cm-day {
  background: var(--hubs-surface);
  color: var(--hubs-ink-3);
}
/* Mottagen bubbla: mörk text på ljus yta */
body.page-home .cm-msg__body {
  background: #eef3fa;
  color: var(--hubs-ink);
}
body.page-home .cm-msg__body b { color: var(--hubs-ink-2); }
body.page-home .cm-msg__body i { color: var(--hubs-ink-3); }
/* Egen bubbla: Hubs-blå med vit text (inversen är avsiktlig — vit text
   är korrekt HÄR eftersom ytan under den är blå, inte vit) */
body.page-home .cm-msg--own .cm-msg__body {
  background: var(--hubs-blue);
  color: #ffffff;
}
body.page-home .cm-msg--own .cm-msg__body b { color: rgba(255, 255, 255, 0.85); }
body.page-home .cm-msg--own .cm-msg__body i { color: rgba(255, 255, 255, 0.72); }
body.page-home .cm-ticks { color: #b7f0d8; }
body.page-home .cm-react {
  background: #ffffff;
  border-color: var(--hubs-surface-line);
  color: var(--hubs-ink);
  box-shadow: 0 3px 8px rgba(28, 46, 74, 0.16);
}
body.page-home .cm-typing { color: var(--hubs-ink-2); }
body.page-home .cm-comp {
  background: var(--hubs-surface);
  border-color: var(--hubs-surface-line);
  color: var(--hubs-ink-3);
}
body.page-home .cm-people__head { color: var(--hubs-ink-3); }
body.page-home .cm-person { color: var(--hubs-ink); }
body.page-home .cm-person i { color: var(--hubs-ink-3); }

/* ----------------------------------------
   Panel 3: Filer (fl-*)
   ---------------------------------------- */
body.page-home .fl-side,
body.page-home .fl-act {
  background: var(--hubs-nav-bg);
  border-color: var(--hubs-line);
}
body.page-home .fl-side__item { color: var(--hubs-ink-2); }
body.page-home .fl-side__item.is-active {
  background: var(--hubs-blue-bg);
  color: var(--hubs-blue);
  box-shadow: inset 2px 0 0 var(--hubs-blue);
}
body.page-home .fl-quota { color: var(--hubs-ink-2); }
body.page-home .fl-quota b { color: var(--hubs-green-text); }
body.page-home .fl-quota__bar { background: var(--hubs-skel); }
body.page-home .fl-quota__bar i { background: var(--hubs-blue); }
body.page-home .fl-crumbs { color: var(--hubs-ink); }
body.page-home .fl-chips i {
  background: var(--hubs-surface);
  border-color: var(--hubs-surface-line);
  color: var(--hubs-ink-2);
}
body.page-home .fl-card { background: var(--hubs-surface); }
body.page-home .fl-card b { color: var(--hubs-ink); }
body.page-home .fl-card i,
body.page-home .fl-when { color: var(--hubs-ink-3); }
body.page-home .fl-card--file { background: #f5f9fc; }
body.page-home .fl-when u { color: var(--hubs-blue); }
body.page-home .fl-share {
  background: #ffffff;
  border-color: var(--hubs-surface-line);
  color: var(--hubs-ink);
  box-shadow: 0 3px 8px rgba(28, 46, 74, 0.16);
}
body.page-home .fl-act__head { color: var(--hubs-ink-3); }
body.page-home .fl-act__row { color: var(--hubs-ink-2); }
body.page-home .fl-act__row b { color: var(--hubs-ink); }
body.page-home .fl-act__row i { color: var(--hubs-ink-3); }

/* ----------------------------------------
   Panel 4: Kalender (ca-*)
   ---------------------------------------- */
body.page-home .ca-side {
  background: var(--hubs-nav-bg);
  border-color: var(--hubs-line);
}
body.page-home .ca-nav { color: var(--hubs-ink-2); }
body.page-home .ca-nav b { color: var(--hubs-ink); }
body.page-home .ca-side__label { color: var(--hubs-ink-3); }
body.page-home .ca-cb { color: var(--hubs-ink); }
body.page-home .ca-days { border-color: var(--hubs-line); }
body.page-home .ca-days span { color: var(--hubs-ink-2); }
body.page-home .ca-days .is-today b { background: var(--hubs-blue); }
body.page-home .ca-canvas {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(28, 46, 74, 0.06) 0,
    rgba(28, 46, 74, 0.06) 1px,
    transparent 1px,
    transparent 12.5%
  );
}
body.page-home .ca-hours span { color: var(--hubs-ink-3); }
body.page-home .ca-col { border-color: var(--hubs-line); }
body.page-home .ca-col--today { background: var(--hubs-surface); }
body.page-home .ca-ev--blue { background: #dbe9f8; color: #145a9e; }
body.page-home .ca-ev--blue::before { background: var(--hubs-blue); }
body.page-home .ca-ev--green { background: var(--hubs-green-bg); color: var(--hubs-green-text); }
body.page-home .ca-ev--orange { background: var(--hubs-yellow-bg); color: var(--hubs-yellow-text); }
body.page-home .ca-acc { color: var(--hubs-green-text); }
body.page-home .ca-talk { background: var(--hubs-teal-bg); color: var(--hubs-teal-text); }
body.page-home .ca-dialog {
  background: #ffffff;
  border-color: var(--hubs-surface-line);
  box-shadow: 0 14px 30px rgba(28, 46, 74, 0.2);
}
body.page-home .ca-dialog__title { color: var(--hubs-ink); }
body.page-home .ca-dialog__field {
  background: var(--hubs-surface);
  border-color: var(--hubs-surface-line);
  color: var(--hubs-ink);
}
body.page-home .ca-dialog__row { color: var(--hubs-ink-2); }
body.page-home .ca-dialog__row--secure { color: var(--hubs-teal-text); }

/* ----------------------------------------
   Panel 5: Kunskapsbank / wiki (wk-*)
   ---------------------------------------- */
body.page-home .wk-side {
  background: var(--hubs-nav-bg);
  border-color: var(--hubs-line);
}
body.page-home .wk-search {
  background: var(--hubs-surface);
  border-color: var(--hubs-surface-line);
  color: var(--hubs-ink-3);
}
body.page-home .wk-title { color: var(--hubs-ink); }
body.page-home .wk-item { color: var(--hubs-ink-2); }
body.page-home .wk-trash { color: var(--hubs-ink-3); }
body.page-home .wk-h1 { color: var(--hubs-ink); }
body.page-home .wk-members__link { color: var(--hubs-blue); }
body.page-home .wk-je::after { border-color: #ffffff; }
body.page-home .wk-ingress { color: var(--hubs-ink); }
body.page-home .wk-callout {
  background: var(--hubs-surface);
  border-left-color: var(--hubs-blue);
  color: var(--hubs-ink);
}
body.page-home .wk-recent { border-color: var(--hubs-line); }
body.page-home .wk-recent__row { color: var(--hubs-ink-2); }
body.page-home .wk-recent__row i { color: var(--hubs-ink-3); }
body.page-home .wk-recent__row--new i { color: var(--hubs-blue); }
body.page-home .wk-foot { border-color: var(--hubs-line); color: var(--hubs-ink-3); }
body.page-home .wk-version u { color: var(--hubs-ink); }

/* .wk-item--sel färgas via @keyframes wk-sel (inte en statisk regel) —
   måste om-definieras här. Ofarligt globalt: norrljus-home.css laddas
   bara på index.html, så denna @keyframes-omdefiniering syns bara där. */
@keyframes wk-sel {
  0%, 5% { background: transparent; color: var(--hubs-ink-2); }
  9%, 100% { background: var(--hubs-blue-bg); color: var(--hubs-blue); }
}