/* ---------- Design tokens ---------- */
:root {
  --accent: #f2994a;
  --accent-dark: #d97c1f;
  --success: #2f9e44;
  --success-dark: #248a37;
  --fare: #c0392b;
  --fare-dark: #9c2d21;
  --fare-lys: #f2d3ce;
  --ink: #16181f;
  --ink-soft: #4b4f58;
  --muted: #6b7280;
  --bg: #ffffff;
  --bg-soft: #f7f5f0;
  --border: #e8e6e0;
  --radius: 10px;
  --shadow: 0 20px 40px -20px rgba(20, 22, 31, 0.28);
  --container: 1180px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rollefarger (bugliste 2026-09-13 punkt 2) — --rolle-accent styrer .btn-accent/
     .funksjonsknapp osv. gjennom hele appen, satt per side av <body class="rolle-...">
     (se _Layout.cshtml). Uinnlogget/offentlige sider og Pasient beholder dagens varme
     oransje (allerede etablert merkevarefarge), se rolle-pasient under. */
  --rolle-accent: var(--accent);
  --rolle-accent-dark: var(--accent-dark);
  --rolle-accent-tekst: #1a1305;
}

body.rolle-superadmin {
  --rolle-accent: #8b5cf6;
  --rolle-accent-dark: #6d28d9;
  --rolle-accent-tekst: #ffffff;
}
body.rolle-admin {
  --rolle-accent: #3b82f6;
  --rolle-accent-dark: #1d4ed8;
  --rolle-accent-tekst: #ffffff;
}
body.rolle-behandler {
  --rolle-accent: #14b8a6;
  --rolle-accent-dark: #0d7d70;
  --rolle-accent-tekst: #ffffff;
}
body.rolle-pasient {
  --rolle-accent: var(--accent);
  --rolle-accent-dark: var(--accent-dark);
  --rolle-accent-tekst: #1a1305;
}

/* Rapport-fargekoding per kategori (bugliste 2026-09-13 punkt 27) — 16 faste,
   forhåndsdefinerte farger (ikke tilfeldig hashet ved kjøretid) satt som en
   aksent-stripe på rapport-headeren, se TestKategoriFarge.cs og Rapport.cshtml. */
.rapport-kategori-stripe { border-left: 6px solid var(--kategori-farge, var(--border)); padding-left: 0.85rem; }
.rapport-kategori-navn { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }

/* Gruppe-rapportgenerator (se GruppeService.HentEnkelttestAsync og
   Grupper/Aggregert.cshtml sitt enkelttest-visningsmodus) — stat-fliser +
   spredningsplott. Ett enkelt datasett (én test av gangen), derfor ingen
   kategorisk fargepalett/forklaring nødvendig — kun aksentfargen. */
.rapport-stat-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 1.5rem; }
.rapport-stat-tile { flex: 1 1 8rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; background: #fff; }
.rapport-stat-verdi { font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.rapport-stat-etikett { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.rapport-scatter { width: 100%; max-width: 620px; height: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.rapport-scatter-gitter { stroke: var(--border); stroke-width: 1; }
.rapport-scatter-akse { fill: var(--muted); font-size: 11px; }
.rapport-scatter-punkt { fill: var(--accent-dark); stroke: #fff; stroke-width: 2; }
.rapport-histogram { width: 100%; max-width: 620px; height: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.rapport-histogram-soyle { fill: var(--accent-dark); }
.rapport-histogram-etikett { fill: var(--muted); font-size: 11px; }
.rapport-histogram-antall { fill: var(--ink); font-size: 11px; font-weight: 700; }
.rapport-histogram-grenselinje { stroke: var(--fare-dark); stroke-width: 2; stroke-dasharray: 4 3; }
.rapport-histogram-grenseetikett { fill: var(--fare-dark); font-size: 10px; font-weight: 700; }
.kategori-kognisjon { --kategori-farge: #6366f1; }
.kategori-adhd { --kategori-farge: #f59e0b; }
.kategori-sovn { --kategori-farge: #0ea5e9; }
.kategori-rus { --kategori-farge: #78716c; }
.kategori-spiseforstyrrelser { --kategori-farge: #ec4899; }
.kategori-traumer { --kategori-farge: #dc2626; }
.kategori-angst { --kategori-farge: #eab308; }
.kategori-depresjon { --kategori-farge: #3b82f6; }
.kategori-psykose { --kategori-farge: #7c3aed; }
.kategori-personlighet { --kategori-farge: #14b8a6; }
.kategori-vold { --kategori-farge: #991b1b; }
.kategori-seksuell { --kategori-farge: #db2777; }
.kategori-barn { --kategori-farge: #22c55e; }
.kategori-funksjon { --kategori-farge: #f2994a; }
.kategori-somatisk { --kategori-farge: #84cc16; }
.kategori-diagnostikk { --kategori-farge: #64748b; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  color: var(--ink-soft);
  background: var(--bg);
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0 0 0.6rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

code {
  background: #f4f4f4;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn-accent {
  background: var(--rolle-accent);
  color: var(--rolle-accent-tekst);
}
.btn-accent:hover { background: var(--rolle-accent-dark); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.75rem; }
.btn-muted {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
.btn-muted:hover { background: var(--bg-soft); border-color: var(--muted); color: var(--ink-soft); }

/* Fane-knapper (se wwwroot/js/faner.js) — brukt på Min side, Grupper-oversikten,
   Hjemmeoppgaver/Programmer-oversiktene m.fl. Bugliste 2026-10-06 punkt 16: den gamle, nesten
   usynlige "flat tekst + tynn understrek"-stilen ga ingen tydelig knapp-affordance ("hard to
   understand it is a clickable button") — nå en pille/chip med synlig bakgrunn i hvile, tydeligere
   hover, og en fylt, rolle-farget pille for den aktive fanen. */
.fane-knapp {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.fane-knapp:hover { background: var(--border); color: var(--ink); }
.fane-knapp.fane-aktiv {
  background: var(--rolle-accent, var(--accent));
  border-color: var(--rolle-accent, var(--accent));
  color: var(--rolle-accent-tekst, #fff);
}
.fane-rad { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* Test-infoboks (se wwwroot/js/testinfo.js) — vises til høyre på desktop, under treet på mobil.
   Bugliste 2026-10-06 punkt 4-6: søkefeltet er nå et EGET fullbredde-element over denne raden
   (_TestKategoriVelger.cshtml sin .tildel-sok-rad), ikke lenger en flex-søsken av selve treet —
   og tre/infoboks er delt ca. 60/40 (ikke en fast px-bredde på infoboksen). */
.tildel-sok-rad { margin-bottom: 0.75rem; }
/* Grid (ikke flex) her: flex-basis-prosenter PLUSS en egen gap talte tidligere som ekstra bredde
   oppå de 60/40 — fikk kolonnene til uønsket å pakke om på hver sin linje (bugliste 2026-10-06
   punkt 5/6, "the unified look"-visningen var faktisk aldri 60/40 side om side i praksis). Grid sin
   gap trekkes IKKE fra kolonnebreddene, så 60%/1fr holder seg presist side om side. */
.tildel-med-info { display: grid; grid-template-columns: 60% 1fr; gap: 1.5rem; align-items: start; }
.tildel-med-info .tildel-kategori-tre { min-width: 0; }
.test-infoboks {
  min-width: 0;
  max-width: none;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem;
  background: var(--bg-soft);
  position: sticky;
  top: 1rem;
  align-self: flex-start;
}
.test-infoboks.skjult { display: none; }
@media (max-width: 720px) {
  .tildel-med-info { grid-template-columns: 1fr; }
  .test-infoboks { position: static; max-width: none; width: 100%; }
}

/* Tall-/beløpsfelt i prisings-tabeller — se Admin/Tester/Prising og
   Behandlerportal/MinPartner/Prising. Holdt smal med hensikt (ny runde av
   bugliste 2026-09-13, punkt 3) slik at Admin sin 4-kolonners prisingstabell
   får plass uten horisontal scrollbar på en vanlig skjermbredde. */
.tall-input { width: 4.5rem; text-align: right; }

/* Prisingstabellen (Admin/Tester/Prising) har 4 tall-kolonner + testnavn — la
   testnavn-kolonnen BRYTE linje (i stedet for tvunget nowrap som resten av
   tabellene i appen) siden lange testnavn ellers alene tvinger frem en
   horisontal scrollbar som tallkolonnene ikke trenger. */
.prising-tabell td:first-child,
.prising-tabell th:first-child {
  white-space: normal;
  max-width: 260px;
}

/* ---------- Pasientens betalingsside (Pasientportal/Tester/Betal) ---------- */
.checkout-card {
  max-width: 440px;
  margin: 3rem auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.25rem 2rem;
  text-align: center;
}
.checkout-card .kicker {
  color: var(--accent-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.checkout-card h1 { font-size: 1.35rem; margin-bottom: 0.15rem; }
.checkout-pris {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0.65rem 0 0.35rem;
  letter-spacing: -0.01em;
}
.checkout-pris span { font-size: 1rem; font-weight: 700; color: var(--muted); margin-left: 0.35rem; letter-spacing: 0; }
.checkout-info { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.75rem; }
.checkout-feilmelding { color: #c0392b; font-size: 0.88rem; margin-bottom: 1rem; }

.betalingsvalg { display: flex; flex-direction: column; gap: 1rem; text-align: left; }

.btn-vipps {
  display: block;
  width: 100%;
  background: #ff5b24;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  font-family: var(--font);
  border: none;
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-vipps:hover { background: #e34e1c; transform: translateY(-1px); }

.checkout-skille {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0.1rem 0;
}
.checkout-skille::before, .checkout-skille::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.betalingsvalg-kort {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.15rem 1.25rem;
}
.betalingsvalg-kort-tittel { font-weight: 700; color: var(--ink); margin-bottom: 0.85rem; }
.betalingsvalg-kort-metoder { font-size: 0.78rem; color: var(--muted); margin: 0.75rem 0 0; text-align: center; }
.btn-kort {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.9rem;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-kort:hover { background: #000; }
.btn-kort:disabled { opacity: 0.6; cursor: not-allowed; }

.checkout-vilkar { margin-top: 1.75rem; font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.checkout-vilkar a { color: var(--muted); text-decoration: underline; }

/* ---------- Dev bar ---------- */
.dev-bar {
  background: #fff3e2;
  color: #7a5416;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid #f0d9ad;
}
.dev-bar a { color: #7a5416; font-weight: 600; margin: 0 0.35rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--ink);
  white-space: nowrap;
}
.brand-wordmark > span { color: var(--accent); }
.brand:hover { text-decoration: none; }
.brand-logo { flex-shrink: 0; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.header-actions .nav-link {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}
.header-actions .innlogget-som {
  color: var(--muted);
  font-weight: 500;
}

/* "Innlogget som" + "Logg ut" — egen fargelagt region, samme grunntanke som
   footerens fargede bånd nederst på siden, bare mer kompakt/pille-formet
   siden den sitter inni selve headeren. */
.bruker-omrade {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
}

/* ---------- Funksjonsnav: store, oransje "app-knapper" for hovedfunksjonene
   per rolle — egen rad UNDER den kommersielle toppnavigasjonen, jf. ønske om
   å skille "appen" fra markedsføringsdelen av headeren. ---------- */
.funksjons-nav {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}
.funksjons-nav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem;
}
.funksjonsknapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--rolle-accent);
  color: var(--rolle-accent-tekst);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.65rem 1.15rem;
  border-radius: 8px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.funksjonsknapp:hover { background: var(--rolle-accent-dark); transform: translateY(-1px); }
.funksjonsknapp svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.funksjonsknapp .varsel-badge { background: var(--rolle-accent-tekst); color: var(--rolle-accent); }

/* Funksjonsnav-knapper fargelegges etter EGEN seksjon (admin/behandler/pasient), ikke
   etter den innloggede brukerens ENE rolle (bugliste 2026-09-13, ny runde punkt 1-2) —
   en Utvikler-konto ser flere seksjoner SAMTIDIG (erAdmin/erBehandler/erPasient er OR'et
   med Utvikler, se _Layout.cshtml), og fikk derfor alle knapper i samme (feilaktige)
   fallback-oransje uansett hvilken seksjon de faktisk tilhørte. display:contents fjerner
   wrapper-diven fra boks-treet (knappene flyter fortsatt fritt i .funksjons-nav-inner sin
   flex-wrap), men CSS-variabler arves likevel via DOM-treet. */
.funksjonsnav-seksjon { display: contents; }
.funksjonsnav-seksjon--admin {
  --rolle-accent: #3b82f6;
  --rolle-accent-dark: #1d4ed8;
  --rolle-accent-tekst: #ffffff;
}
.funksjonsnav-seksjon--behandler {
  --rolle-accent: #14b8a6;
  --rolle-accent-dark: #0d7d70;
  --rolle-accent-tekst: #ffffff;
}
.funksjonsnav-seksjon--pasient {
  --rolle-accent: var(--accent);
  --rolle-accent-dark: var(--accent-dark);
  --rolle-accent-tekst: #1a1305;
}

/* Login dropdown */
.login-dropdown { position: relative; }
.login-dropdown summary {
  list-style: none;
}
.login-dropdown summary::-webkit-details-marker { display: none; }
.login-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 0.5rem;
  min-width: 190px;
}
.login-dropdown-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.9rem;
}
.login-dropdown-menu a:hover {
  background: var(--bg-soft);
  text-decoration: none;
}

/* ---------- Hero ---------- */
body.home main.page { padding-top: 0; padding-bottom: 0; }

.hero, .features {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.hero {
  background: var(--bg-soft);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 2.5rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  position: relative;
}
.hero-text .kicker {
  color: var(--accent-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.hero-text h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  max-width: 15ch;
}
.hero-text .lead {
  font-size: 1.05rem;
  max-width: 46ch;
  margin-bottom: 1.6rem;
}
.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-media { position: relative; z-index: 1; }
.hero-photo {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
}

.hero-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.shape { position: absolute; }
.shape-blob {
  width: 420px;
  height: 420px;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--accent);
  opacity: 0.16;
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: 40px;
}
.shape-triangle {
  width: 0;
  height: 0;
  border-style: solid;
}
.shape-triangle-1 {
  left: 4%;
  top: 18%;
  border-width: 22px 0 22px 34px;
  border-color: transparent transparent transparent var(--accent);
  opacity: 0.5;
}
.shape-triangle-2 {
  left: 10%;
  bottom: 12%;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--ink);
  opacity: 0.15;
}

/* ---------- Features ---------- */
.features { padding: 4.5rem 0; }
.features .kicker {
  color: var(--accent-dark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}
.center { text-align: center; }
.features h2 { max-width: 40ch; margin: 0 auto 2.5rem; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.75rem;
}
.feature-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  color: inherit;
  text-decoration: none !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.feature-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.feature-card-mer {
  display: inline-block;
  margin-top: 0.6rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-dark);
}
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(242, 153, 74, 0.14);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.feature-card h3 { font-size: 1.05rem; }
.feature-card p { font-size: 0.92rem; margin-bottom: 0; }

.funksjon-detalj {
  max-width: 60ch;
  margin: 0 auto 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.funksjon-detalj:first-of-type { border-top: none; padding-top: 0; }
.funksjon-detalj h2 { margin-bottom: 0.5rem; }

.unike-funksjoner {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.2rem;
  margin: 2.5rem 0 0;
  padding: 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.unike-funksjoner li {
  position: relative;
  padding-left: 1.1rem;
}
.unike-funksjoner li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-dark);
  font-weight: 700;
}

.abonnement-banner {
  background: #fff4e0;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.75rem 1.25rem;
  margin: 1rem 0;
  color: var(--ink);
}
.abonnement-banner a { font-weight: 700; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #c7c9d1;
  margin-top: 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  padding: 3rem 0 2rem;
}
.footer-grid h4 {
  color: #fff;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.footer-grid a {
  color: #c7c9d1;
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.55rem;
}
.footer-grid a:hover { color: #fff; }
.footer-brand { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; font-size: 1.2rem; color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.25rem 0;
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- Generic page content (non-marketing pages) ---------- */
main.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

/* Sider med en bred oversiktstabell (f.eks. pasientlisten med 10 kolonner,
   se Pasienter/Index.cshtml under Areas/Admin og Areas/Behandlerportal) — samme prinsipp som
   form.skjema-bred over, bare på HELE siden: uten dette klipper tabellens
   egen overflow-x:auto av handlingskolonnen usynlig (ingen synlig
   scrollbar-hint i praksis), i stedet for at siden bare bruker mer av
   skjermbredden på en vanlig desktop. Faller uansett tilbake til tabellens
   egen scroll på smale/mobile skjermer siden 96vw fortsatt krymper der. */
main.page.page--bred {
  max-width: min(1600px, 96vw);
}

/* Pasientlistens handlingskolonne har kun 2-3 ikon-knapper (Rediger/Arkiver/
   Slett), ikke de opptil 5 den generiske td:last-child-regelen over er
   dimensjonert for (Admin/Behandlere) — den unødvendig store min-bredden var
   akkurat det som presset denne tabellen over kanten på vanlige
   bærbar-skjermbredder (1440px) selv etter page--bred over. */
#pasientTabell td:last-child {
  min-width: 150px;
}

main.page h1 { font-size: 1.7rem; }
main.page h2 { font-size: 1.25rem; margin-top: 2.5rem; }
main.page > h1:first-child, main.page > h2:first-child { margin-top: 0; }
main.page ul, main.page ol { padding-left: 1.25rem; }
main.page li { margin-bottom: 0.35rem; }

/* Data tables (Index/oversikt-sider) */
main.page table[border] {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border: none;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.92rem;
}
main.page table[border] th,
main.page table[border] td {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0.9rem;
  text-align: left;
  white-space: nowrap;
}
main.page table[border] thead th {
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
main.page table[border] tbody tr:hover { background: var(--bg-soft); }

/* Handlingskolonnen (siste celle: Rediger/Arkiver/Frys m.m.) — la innholdet
   bryte linje internt (som ren tekst ville gjort) i stedet for å tvinge HELE
   tabellen bredere, og dermed en unødvendig horisontal scrollbar, bare fordi
   den har flere knapper enn det er plass til på én linje. `min-width` sikrer
   likevel plass til opptil 5 ikon-knapper PÅ ÉN LINJE i det vanligste
   tilfellet (auto-tabell-layout ville ellers satt kolonnebredden ut fra
   FLERTALLET av rader, som gjerne har færre knapper enn den travleste raden
   — Admin/Behandlere kan vise Rediger+Frys+Arkiver+GodkjennHpr+ForlengHpr
   samtidig, se bugliste-runden "BIGBUTTONS"). 5×30px knapper + mellomrom +
   cellens eget padding krever i praksis rundt 200px. */
main.page table[border] td:last-child {
  white-space: normal;
  min-width: 260px;
}

/* Row-action forms embedded i tabellceller (Arkiver/Frys/Godkjenn m.m.) —
   reset til nøytralt for VANLIGE knapper i slike former. :not(.btn-icon) er
   nødvendig av samme grunn som button[type="submit"]:not(.btn-icon) lenger
   ned: denne regelens spesifisitet (main.page + attributtselektor + button)
   er høyere enn "main.page .btn-icon" alene, så uten unntaket vinner denne
   over ALLE btn-icon-knappenes egen background/border/padding — knappen ble
   usynlig (transparent bakgrunn) selv etter at button[type="submit"]-
   kollisjonen ble fikset. Selve utseendet for btn-icon-knapper kommer
   utelukkende fra .btn-icon selv. */
main.page form[style*="display:inline"] {
  display: inline-flex;
  margin: 0 0.35rem 0.2rem 0;
  vertical-align: middle;
}
main.page form[style*="display:inline"] button:not(.btn-icon) {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
}

/* Ensartet, kompakt ikon-knapp for radhandlinger (Rediger/Arkiver/Frys/Godkjenn m.m.) —
   samme avrunding/løft-på-hover som .btn-accent på forsiden, bare grønn og liten nok
   til at flere kan stå side ved side i én rad selv når det kommer flere handlinger. */
main.page .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 2px solid transparent;
  background: var(--success);
  color: #fff;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 0.15s ease, background-color 0.15s ease;
  vertical-align: middle;
  margin: 0 0.35rem 0.2rem 0;
}
main.page .btn-icon:last-child { margin-right: 0; }
main.page .btn-icon svg { display: block; pointer-events: none; }
main.page .btn-icon:hover { background: var(--success-dark); transform: translateY(-1px); }

/* Destruktive handlinger (permanent sletting, se bugliste 2026-09-13 punkt 17/18) —
   rødt, tydelig atskilt fra de reversible grønne handlingene (rediger/arkiver/gjenopprett). */
main.page .btn-icon--slett { background: var(--fare); }
main.page .btn-icon--slett:hover { background: var(--fare-dark); }
main.page .btn-icon--slett:disabled {
  background: var(--fare-lys);
  color: var(--fare-dark);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Partner-nivå-handlinger (bugliste 2026-09-13 punkt 16) — Rediger/Tester på
   Admin/Partnere er bevisst oransje (samme merkevarefarge som resten av
   partner-relaterte flater) i stedet for den innloggede Superadmin-ens egen
   lilla rollefarge, siden disse knappene handler om PARTNEREN, ikke brukeren selv. */
main.page .btn-icon--partner { background: var(--accent); }
main.page .btn-icon--partner:hover { background: var(--accent-dark); }

/* Bugliste 2026-10-05 punkt 15: en TOGGLE-handling (f.eks. "del med alle") vist som
   ikon-knapp trenger en synlig PÅ/AV-tilstand siden teksten som før fortalte dette er
   borte — en ring + mørkere bakgrunn når handlingen allerede er aktiv. */
main.page .btn-icon--aktiv { background: var(--rolle-accent-dark, var(--success-dark)); box-shadow: 0 0 0 2px var(--rolle-accent, var(--success)) inset; }
main.page .btn-icon--muted { background: var(--muted); }
main.page .btn-icon--muted:hover { background: var(--ink-soft); }

/* Primary forms (innlogging, opprett/inviter/fyll ut) -> card */
main.page form:not([style*="display:inline"]) {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
  max-width: 640px;
  margin: 1.5rem 0;
}
/* Skjemaer som wrapper en BRED tabell (f.eks. prisingstabellen med 4
   tallkolonner, se Admin/Tester/Prising) trenger mer enn 640px — den
   generiske kort-bredden over tvang tabellens EGEN overflow-x:auto til å
   scrolle mye tidligere enn nødvendig (ny runde av bugliste 2026-09-13,
   punkt "prising"/horisontal scrollbar). */
main.page form.skjema-bred {
  max-width: 100%;
}
main.page form:not([style*="display:inline"]) > div,
main.page form:not([style*="display:inline"]) > fieldset {
  margin-bottom: 1.1rem;
}
main.page form label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
main.page form label:has(input[type="checkbox"]),
main.page form label:has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  margin-bottom: 0;
  margin-right: 1rem;
  cursor: pointer;
}
main.page form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="hidden"]),
main.page form select,
main.page form textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
main.page form input:focus,
main.page form select:focus,
main.page form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(242, 153, 74, 0.18);
}
main.page form input[type="range"] { width: 100%; accent-color: var(--accent); }
main.page form input[type="checkbox"],
main.page form input[type="radio"] { accent-color: var(--accent); width: auto; }

/* :not(.btn-icon) er nødvendig — uten den vinner denne regelen (høyere spesifisitet enn
   "main.page .btn-icon") over knappens EGEN styling for enhver egenskap begge setter, siden
   radhandlings-knappene (Frys/Arkiver/Godkjenn/Slett m.m.) også har type="submit". Symptomet var
   knapper som ble brede rektangler (padding 0.75rem 1.5rem i stedet for btn-icon sin faste
   30×30px), med ikonet dyttet ned i hjørnet (display:inline-block i stedet for btn-icon sin
   inline-flex-sentrering) og feil farge (var(--accent) oransje i stedet for btn-icon sin egen
   bakgrunnsfarge) — se bugliste-runden "BIGBUTTONS".

   Bugliste 2026-10-05 punkt 23 — SAMME kollisjonsklasse, mye bredere: denne regelen's `background:
   var(--accent)` (literal oransje) vinner over `.btn-accent`/`.btn-muted`/`.btn-outline` sin EGEN
   farge på ETHVERT `<button type="submit" class="btn-accent">` som ikke OGSÅ har literal `.btn` i
   class-lista — de fleste steder i kodebasen skriver kun "btn-accent", ikke "btn btn-accent" (kun
   Tildel/Tester sine dialog-knapper hadde begge). En behandlers EGEN rollefarge (teal), en
   administrators (blått) og en superadmins (lilla) ble dermed alle den samme literale
   --accent-oransjen i stedet, på SAMTLIGE sider i appen med en type="submit".btn-accent-knapp,
   ikke bare Tildel/Tester. Strukturen (padding/uppercase/radius osv.) fra DENNE regelen er
   fortsatt riktig å beholde for disse knappene (mange har ALDRI hatt literal .btn, kun
   .btn-accent, og ville mistet all form uten den) — kun selve fargen må vinnes tilbake, se de tre
   spesifikke mot-reglene rett under (samme spesifisitet, men senere i fila + egen klasse). */
main.page form button[type="submit"]:not(.btn-icon) {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  border: 2px solid transparent;
  background: var(--accent);
  color: #1a1305;
  cursor: pointer;
  margin-top: 0.25rem;
  margin-right: 0.5rem;
}
main.page form button[type="submit"]:not(.btn-icon):hover { background: var(--accent-dark); }
main.page form button[type="submit"].btn-accent { background: var(--rolle-accent); color: var(--rolle-accent-tekst); }
main.page form button[type="submit"].btn-accent:hover { background: var(--rolle-accent-dark); }
main.page form button[type="submit"].btn-muted { background: transparent; border-color: var(--border); color: var(--muted); }
main.page form button[type="submit"].btn-muted:hover { background: var(--bg-soft); border-color: var(--muted); color: var(--ink-soft); }
main.page form button[type="submit"].btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
main.page form button[type="submit"].btn-outline:hover { background: var(--ink); color: #fff; }

/* Feilmeldinger (p style="color: darkred;") */
main.page p[style*="color: darkred"] {
  background: #fdecea;
  border: 1px solid #f3b7b0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  max-width: 640px;
}

/* Brukeravtale/samtykke-tekstblokker */
main.page pre {
  background: var(--bg-soft);
  border-radius: 8px;
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  main.page table[border] th,
  main.page table[border] td { white-space: normal; }
  main.page form:not([style*="display:inline"]) { padding: 1.25rem; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  /* Sticky header (.site-header, se over) blir et "ikke-skroll-område" som kan
     fylle mesteparten av en mobilskjerm når funksjonsnavet har mange knapper
     (vokser i antall etter hvert som roller får flere sider) og bryter om til
     mange linjer — brukeren opplevde at innholdet under aldri ble tilgjengelig
     ved vanlig scroll (ny runde av bugliste 2026-09-13, mobilrunde). Løst ved å
     slå av sticky på mobil: headeren/funksjonsnavet ruller da bort som et helt
     normalt element i stedet for å bli hengende fast øverst. */
  .site-header { position: static; }
  .funksjonsknapp {
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
  }
  .funksjonsknapp svg { width: 15px; height: 15px; }
  .funksjons-nav-inner { gap: 0.4rem; padding: 0.55rem 1rem; }

  /* Radhandlingsknappene (Rediger/Frys/Arkiver/Slett m.m.) — samme "litt
     mindre på mobil"-ønske som funksjonsnavet over, og gjør et 4-knappers
     wrap (en behandler med både Frys/Arkiver OG en ventende HPR-handling)
     mindre plasskrevende. */
  main.page .btn-icon {
    width: 26px;
    height: 26px;
    margin: 0 0.25rem 0.25rem 0;
  }
  main.page .btn-icon svg { width: 15px; height: 15px; }

  .header-inner { flex-wrap: wrap; }
  .brand { order: 1; }
  .header-actions { order: 3; margin-left: auto; }

  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    text-align: center;
  }
  .hero-text .lead { margin-left: auto; margin-right: auto; }
  .hero-text h1 { max-width: none; }
  .hero-cta { justify-content: center; }
  .hero-media { order: -1; max-width: 320px; margin: 0 auto 1rem; }
  .shape-blob { width: 260px; height: 260px; opacity: 0.12; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; text-align: center; }
  .hero-cta { flex-direction: column; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---------- Tildelingsflyt (Tildel/Pasienter og Tildel/Tester) ---------- */
main.page form#tildelForm { max-width: 760px; }
.tildel-kategori-tre details {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  margin-bottom: 0.6rem;
  background: #fff;
}
.tildel-kategori-tre summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 0.3rem 0; }
/* Bugliste 2026-10-05 punkt 20: mørk, rollefarget overskrift når minst én test i kategorien er valgt. */
.tildel-kategori-tre summary.tildel-kategori-valgt { color: var(--rolle-accent-dark, var(--success-dark)); }
.tildel-kategori-tre ul { list-style: none; padding-left: 0.5rem; margin: 0.4rem 0 0; }
.tildel-kategori-tre li { margin-bottom: 0.3rem; }
.tildel-kanal-ikon { opacity: 0.3; margin-right: 0.3rem; }
.tildel-kanal-ikon.tilgjengelig { opacity: 1; color: var(--accent-dark); }

/* Forklaringsikoner i testlisten (pris/kostnad/klinikerutfylling) — se docs/beslutningslogg.md
   "Forenkling av Tildel/Tester". */
.tildel-test-forklaring {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  font-size: 0.9rem;
  color: var(--muted, #666);
  margin: 0.4rem 0 1rem;
  align-items: center;
}
.tildel-test-forklaring span { display: inline-flex; align-items: center; gap: 0.3rem; }
.tildel-ikon { display: inline-flex; align-items: center; margin-left: 0.3rem; color: var(--accent-dark); vertical-align: middle; }
/* Bugliste 2026-10-05 punkt 16: ikonene lå som SØSKEN til <label>, utenfor dens inline-flyt — på
   et smalt vindu/langt testnavn kunne de derfor havne på en egen linje under navnet i stedet for
   rett ved siden av. Nå en inline-flex-gruppe INNI selve label-en (samme tekstenhet som navnet),
   slik at de alltid bryter sammen MED navnet, ikke uavhengig av det. */
.tildel-test-navn-rad { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.15rem; }
.tildel-test-klinikerutfylt { text-decoration: underline; text-decoration-color: var(--accent-dark); text-underline-offset: 3px; }

dialog#oppsummeringDialog, dialog#grupperapportDialog, dialog#honorarDialog {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
  max-width: 480px;
  width: 90%;
}
dialog#oppsummeringDialog::backdrop, dialog#grupperapportDialog::backdrop, dialog#honorarDialog::backdrop { background: rgba(22, 24, 31, 0.5); }
.tildel-honorar-rad { margin-bottom: 0.8rem; }

/* ---------- Testutfylling: Likert-skala/Ja-Nei som moderne knapperad ---------- */
/* Erstatter små radio-sirkler med hele, klikkbare "piller" på én horisontal
   linje — teksten ER selve knappen (label pakker input+span), ingen synlig
   radio. `:has()` (evergreen nettlesere, samme forutsetning som <dialog>
   ellers i appen) styler valgt tilstand uten JavaScript. */
.svar-rad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.5rem 0 1rem;
}
/* Stablet variant (bugliste 2026-09-13 punkt 24, brukt kun for MADRS-S sine lengre
   svaralternativer — se Fyll.cshtml) — en egen modifier-klasse i stedet for å endre
   .svar-rad globalt, siden korte WHO-5-lignende alternativer fungerer fint i rad. */
.svar-rad--stablet {
  flex-direction: column;
  margin-left: 1.25rem;
}
.svar-rad--stablet .svar-knapp {
  justify-content: flex-start;
  text-align: left;
  width: 100%;
}
/* main.page form label(:has(...)) rules earlier in this file are more
   specific (more element selectors) than a bare .svar-knapp class and would
   otherwise win the cascade for display/font-weight/color/margin — !important
   makes this component's overrides unambiguous rather than fighting specificity. */
.svar-knapp {
  position: relative;
  flex: 1 1 0;
  min-width: 5.5rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem 0.6rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-soft) !important;
  font-weight: 600 !important;
  font-size: 0.85rem;
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  margin: 0 !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.svar-knapp:hover { border-color: var(--accent); transform: translateY(-1px); }
.svar-knapp input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.svar-knapp:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1305 !important;
}
.svar-knapp:has(input:focus-visible) {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .svar-knapp { flex: 1 1 40%; }
}

/* Tiltet-tekst variant (bugliste punkt 3, 2026-10-04 — kun MADRS-S, se Fyll.cshtml): store,
   runde knapper på én horisontal rad, med svarteksten tiltet 45° og forankret til å "vokse ut"
   av knappens øvre venstre kant — som akseetiketter i et diagram. Løser at MADRS-S sine
   "mellomtrinn" (f.eks. en ubenevnt "2" mellom de tekstsatte "0" og "4") ble utydelige stablet
   vertikalt — her er alle seks gradene synlige side om side uansett tekstlengde. */
.svar-rad--tiltet-tekst {
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 1.75rem;
  margin: 3.75rem 0 2rem 0.75rem;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 0.25rem;
}
.svar-rad--tiltet-tekst .svar-knapp {
  position: relative;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  min-width: 0;
  border-radius: 50%;
  border-width: 3px;
  padding: 0;
}
.svar-rad--tiltet-tekst .svar-knapp span {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0.4rem;
  transform: rotate(-45deg);
  transform-origin: left bottom;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600 !important;
  color: var(--ink-soft) !important;
}
.svar-rad--tiltet-tekst .svar-knapp:has(input:checked) span {
  color: var(--accent-dark) !important;
}

/* ---------- Testutfylling: test-nivå intro-tekst (Fyll.cshtml sin
   Test.Beskrivelse, vist øverst på side 1) — større og med mer luft rundt,
   siden den ofte gir en instruksjon pasienten må lese nøye før de svarer
   (f.eks. ITQ sin "tenk på hendelsen som gir deg mest plager") og lett
   druknet i den vanlige avsnittsteksten. ---------- */
.test-intro {
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--bg-soft);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
}

/* ---------- Visuell analog skala (glidebryter) — se TestSvartype.VisuellAnalogSkala
   og Fyll.cshtml. Viser BEVISST ikke tallverdien mens pasienten drar i den —
   det ville gjort den om til en numerisk skala (NRS) i stedet for en ekte VAS,
   se kildehenvisning i docs/beslutningslogg.md. ---------- */
.vas-glidebryter { max-width: 480px; }
.vas-slider {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.vas-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rolle-accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.vas-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rolle-accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.vas-slider::-moz-range-track { background: var(--border); height: 6px; border-radius: 999px; }
.vas-endepunkter {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* ---------- Rapport: A4-"papir"-visning med sideflipping og handlingsrad ---------- */
/* Malen brukeren ga (report.png): stor to-linjers tittel, et dekorativt
   avrundet fargeblokk-hjørne øverst til høyre, seksjoner som fylte
   "pille"-overskrifter, og en fargebåndsidefot i bunnen — her i appens
   oransje aksentfarge i stedet for malens grønnfarge. */
.rapport-verktoylinje {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 21cm;
  margin: 0 auto 1.5rem;
}
.rapport-verktoylinje button {
  border: 2px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
}
.rapport-verktoylinje button:hover:not(:disabled) { border-color: var(--accent); }
.rapport-verktoylinje button:disabled { opacity: 0.35; cursor: default; }
.rapport-sideindikator { font-size: 0.85rem; color: var(--muted); font-weight: 600; min-width: 7rem; text-align: center; }

.rapport-dokument { max-width: 21cm; margin: 0 auto; }

/* Fast A4-ramme — hvit boks + skygge rundt HELE rapporten, uansett hvor lite
   innhold det er (jf. eksplisitt krav: omrisset skal alltid være et fullt ark). */
.rapport-ark {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 6px;
  width: 100%;
  min-height: 29.7cm;
  margin: 0 auto 2rem;
  padding: 2.6cm 2cm 3.4cm;
  box-sizing: border-box;
  color: var(--ink-soft);
}
.rapport-ark h1, .rapport-ark h2 { color: var(--ink); }

/* Dekorativt hjørneelement — kun første ark, ren pynt (matcher malen). */
.rapport-hjornedekor {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.1cm;
  height: 6.5cm;
  background: var(--accent);
  border-bottom-left-radius: 28px;
}

.rapport-tittelblokk { margin-bottom: 1.5rem; max-width: 80%; }
.rapport-tittel-stor {
  display: block;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.rapport-tittel-liten {
  display: block;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--ink-soft);
  line-height: 1.2;
  margin-top: 0.15rem;
}

.rapport-metarad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 3rem;
  margin: 0 0 2rem;
  font-size: 0.92rem;
}
.rapport-metarad strong { color: var(--ink); }
.rapport-pnr { font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; }

.rapport-introduksjon {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  padding: 0.75rem 1rem;
  border-radius: 0 6px 6px 0;
  margin-bottom: 1.75rem;
}

.rapport-seksjon { margin-bottom: 1.75rem; }
/* Bleeder helt ut til arkets venstre kant (jf. malen) — negativ margin lik
   .rapport-ark sin venstre padding, kompensert med tilsvarende padding-left
   slik at selve teksten fortsatt sitter pent innrykket. Flat venstrekant
   (border-radius kun på høyre side) siden pillen faktisk treffer arkkanten,
   fremfor en "svevende" full pille et stykke inn på siden. */
.rapport-seksjon-tittel {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 1.3rem 0.5rem 2cm;
  margin: 0 0 1rem -2cm;
  border-radius: 0 999px 999px 0;
}

.rapport-skaarboks { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 0.75rem; }
.rapport-skaartall { font-size: 2.2rem; font-weight: 800; color: var(--accent-dark); white-space: nowrap; }
.rapport-fremdrift { flex: 1; height: 0.6rem; border-radius: 999px; background: var(--bg-soft); position: relative; }
.rapport-fremdrift-fyll { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); }
/* white-space: pre-line lar en Fortolkning-streng med domene-/delskala-lister (f.eks. CORE-OM,
   EDE-Q, SCL-25) bruke ekte \n\n-avsnitt og "• "-punkter uten å måtte gjøre strengen om til HTML
   (Razor sin standard @-interpolering HTML-encoder automatisk — trygt, men betyr at linjeskift
   MÅ komme fra CSS, ikke fra <br>/<li>-tagger i selve teksten). Se bugliste punkt 6. */
.rapport-fortolkning { font-size: 0.96rem; white-space: pre-line; }
/* Bugliste 2026-10-06 punkt 14: antall ubesvarte spørsmål på resultatsiden. */
.rapport-ubesvart-tall { font-size: 0.88rem; color: #8a5a00; }

/* Cutoff-linjer over resultat-fremdriftsbaren (ITestSkaaringsberegner.Histogramgrenser,
   samme prinsipp som Grupper/Aggregert sitt histogram) — se Rapport.cshtml.cs (begge Areas). */
.rapport-cutoff-linje {
  position: absolute;
  top: -0.2rem;
  bottom: -0.2rem;
  width: 2px;
  background: var(--ink);
  transform: translateX(-1px);
}
.rapport-cutoff-forklaring { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--ink-muted, #666); }
.rapport-cutoff-label { margin-right: 1rem; white-space: nowrap; }

/* Navngitte kategoriske indikatorer (f.eks. WHO-5s "Velvære"/"Depresjon") —
   skal stå tydelig ut fra vanlig tekst: fylt bakgrunn, farge og understrek. */
.rapport-indikatorer { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.rapport-indikator {
  display: inline-block;
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0.25rem 0.7rem;
  border-radius: 5px;
}
.rapport-indikator-positiv { color: var(--success-dark); background: rgba(47, 158, 68, 0.12); }
.rapport-indikator-negativ { color: darkred; background: rgba(139, 0, 0, 0.08); }

.rapport-svartabell { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.rapport-svartabell th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
  padding: 0.5rem;
}
.rapport-svartabell td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--border); }
.rapport-svartabell tr:nth-child(even) td { background: var(--bg-soft); }

/* Periodiserte oppgjørsrapporter (Admin/Okonomi, Behandlerportal/Utbetaling,
   MinPartner/Utbetaling — se docs/beslutningslogg.md "Periodiserte oppgjør,
   del 2"). Gjenbruker .rapport-ark/.rapport-seksjon ovenfor; disse klassene
   dekker kun det som var nytt i designforslaget: tallkolonner, sum-rad,
   nøkkeltall-fliser og kontoplan-/oppsett-skjemaene. */
.rapport-tabellramme { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.rapport-tabellramme .rapport-svartabell { min-width: 28rem; }
.rapport-svartabell td.tall, .rapport-svartabell th.tall { text-align: right; white-space: nowrap; }
.rapport-svartabell td.ref { color: var(--muted); font-size: 0.82rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.rapport-svartabell tr.sum td { font-weight: 800; color: var(--ink); border-top: 2px solid var(--border); background: var(--bg-soft); }

.rapport-stat-rad { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1rem 0 0; }
.rapport-stat-tile { flex: 1 1 9rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 0.9rem; background: var(--bg-soft); }
.rapport-stat-tile .rapport-stat-verdi { font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.rapport-stat-tile .rapport-stat-etikett { font-size: 0.74rem; color: var(--muted); margin-top: 0.1rem; }
.rapport-stat-tile.rapport-stat-fremheving .rapport-stat-verdi { color: var(--accent-dark); }

.rapport-felt-gruppe { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.rapport-felt { display: flex; flex-direction: column; gap: 0.35rem; }
.rapport-felt label { font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.rapport-felt-hjelp { font-size: 0.76rem; color: var(--muted); margin-top: 0.4rem; }

.rapport-kontoplan-rad, .rapport-kontoplan-header {
  display: grid; grid-template-columns: 1fr 7rem 7rem; gap: 0.6rem; align-items: center;
}
.rapport-kontoplan-rad { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.rapport-kontoplan-header {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.rapport-kontoplan-type {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem; border-radius: 999px; text-align: center;
}
.rapport-kontoplan-type--inntekt { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success-dark); }
.rapport-kontoplan-type--kostnad { background: color-mix(in srgb, var(--fare) 20%, transparent); color: var(--fare); }

.rapport-periodevelger { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin-bottom: 1.4rem; }
.rapport-periodevelger label { font-size: 0.78rem; font-weight: 700; color: var(--ink); display: block; margin-bottom: 0.25rem; }

/* Flere .btn-knapper på rad (f.eks. MinPartner/_MinKlinikkNav.cshtml) — .btn er bevisst
   display:inline-block uten egen margin ellers, så flere stykker rett etter hverandre uten en
   eksplisitt gap klistrer seg visuelt sammen (ingen synlig fuge mellom dem), spesielt når
   Razor sin whitespace-trimming rundt en @if/@foreach fjerner mellomrommet mellom knappene i
   kildekoden. Bekreftet reelt skjermbilde, 2026-10-11. En eksplisitt flex-gap her er robust
   uavhengig av whitespace i selve .cshtml-kilden. */
.btn-rad { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.75rem 0 1.5rem; }

@media (max-width: 640px) {
  .rapport-felt-gruppe { grid-template-columns: 1fr; }
  .rapport-kontoplan-rad, .rapport-kontoplan-header { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* "Utvikling over tid"-grafen (se Pages/Shared/_UtviklingsGraf.cshtml og
   UtviklingsGrafBeregner) — generisk for ALLE tester med ≥2 fullførte
   besvarelser, ikke bare WHO-5 VAS. */
.utvikling-graf { width: 100%; height: auto; margin: 0.75rem 0 0.25rem; }
.utvikling-graf-rutenett { stroke: var(--border); stroke-width: 1; }
.utvikling-graf-akse-tekst { font-size: 9px; fill: var(--muted); }
.utvikling-graf-referanselinje { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
.utvikling-graf-referanse-tekst { font-size: 9px; fill: var(--muted); font-weight: 700; }
.utvikling-graf-linje { fill: none; stroke: var(--rolle-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.utvikling-graf-punkt { fill: var(--rolle-accent); stroke: #fff; stroke-width: 1.5; }

.rapport-sidefot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--accent);
  color: #1a1305;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.8rem 1rem;
}

/* Alle handlingsknapper i samme (oransje) stil, i én horisontal rad. */
.rapport-handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  max-width: 21cm;
  margin: 0 auto 3rem;
}
.rapport-handlinger form { margin: 0 !important; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; max-width: none !important; display: inline-block !important; }
.rapport-handlinger .btn { min-width: 9rem; text-align: center; }
.rapport-status-melding { text-align: center; max-width: 21cm; margin: 0 auto 1.5rem; }

@media (max-width: 900px) {
  .rapport-ark { min-height: auto; padding: 1.75rem 1.5rem 3.2rem; }
  .rapport-seksjon-tittel { padding-left: 1.5rem; margin-left: -1.5rem; }
  .rapport-tittel-stor { font-size: 1.9rem; }
  .rapport-tittel-liten { font-size: 1.2rem; }
  .rapport-tittelblokk { max-width: 100%; }
}

@media print {
  .site-header, .site-footer, .dev-bar, .cookie-banner,
  .rapport-verktoylinje, .rapport-handlinger, .rapport-status-melding,
  main.page > p:last-child { display: none !important; }
  main.page { padding: 0; max-width: none; }
  .rapport-ark {
    box-shadow: none;
    border-radius: 0;
    min-height: auto;
    page-break-after: always;
  }
  .rapport-ark:last-child { page-break-after: auto; }
  .rapport-ark[hidden] { display: block !important; }
  @page { size: A4; margin: 0; }
}

/* ---------- Varsel-badge (uleste meldinger/oppgaver i navigasjonen) ---------- */
.varsel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  margin-left: 0.3rem;
  border-radius: 999px;
  background: var(--accent);
  color: #1a1305;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.1rem;
  vertical-align: middle;
}

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  max-width: 720px;
  margin: 0 auto;
  background: var(--ink);
  color: #e7e8ec;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: 0.88rem; flex: 1 1 320px; }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-banner .btn { flex: 0 0 auto; }

@media (max-width: 560px) {
  .cookie-banner { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; flex-direction: column; align-items: stretch; }
  .cookie-banner .btn { width: 100%; }
}

/* Rammer manglende/ugyldige obligatoriske felt i rødt etter et forsøkt
   skjema-innsending — se wwwroot/js/validering.js. */
form.skjema-forsokt-sendt :invalid {
  border: 2px solid #c0392b;
  background: #fdecea;
}

/* Behandler-utfylte tester (FyllForPasient.cshtml): hvert ledd + en egen
   veiledningsboks til høyre (Test.Kode-avhengig innhold via TestLedd.Instruksjon)
   som fremheves når kommentarfeltet er fokusert — se autogrow.js/inline-scriptet
   i selve siden. Stables under hverandre på smale skjermer. */
.ledd-med-forklaring {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.ledd-innhold { flex: 1 1 60%; min-width: 0; }
.ledd-forklaring {
  flex: 1 1 40%;
  min-width: 0;
  background: #f7f7f5;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  font-size: 0.9em;
  color: #555;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ledd-forklaring-tittel {
  margin: 0 0 0.35rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  font-size: 0.78em;
  letter-spacing: 0.03em;
}
.ledd-forklaring-tom { font-style: italic; }
.ledd-forklaring.aktiv {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(242, 153, 74, 0.18);
  background: #fffdf8;
}
@media (max-width: 720px) {
  .ledd-med-forklaring { flex-direction: column; }
  .ledd-forklaring { order: 2; }
}

/* Kommentarfelt på behandler-utfylte tester: synlig dra-i-hjørnet-håndtak på
   PC (nativ resize: vertical) + auto-vekst forbi synlig høyde på både PC og
   mobil (se autogrow.js). */
textarea.kommentarfelt {
  width: 100%;
  min-height: 2.6rem;
  resize: vertical;
  overflow-y: hidden;
}

/* ---------- Flytende tilbakemeldingsknapp (se _TilbakemeldingWidget.cshtml +
   js/tilbakemelding-widget.js) ---------- */
.tbm-mini[hidden], .tbm-meny[hidden], .tbm-panel[hidden] { display: none; }

.tbm-mini {
  position: fixed;
  right: 0;
  bottom: 110px;
  z-index: 9999;
  width: 30px;
  height: 44px;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: var(--rolle-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: -2px 2px 10px rgba(20, 22, 31, 0.18);
}

.tbm-fab-wrap {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9999;
}

.tbm-fab {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  background: var(--rolle-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(20, 22, 31, 0.4);
  touch-action: none;
}
.tbm-fab:hover { background: var(--rolle-accent-dark); }

.tbm-skjul {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(20, 22, 31, 0.25);
  padding: 0;
}

.tbm-meny {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.tbm-meny-knapp {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--ink);
  text-align: left;
}
.tbm-meny-knapp:hover:not(:disabled) { background: var(--bg-soft); }
.tbm-meny-knapp:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.55; }

.tbm-panel {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 10000;
  width: min(380px, calc(100vw - 2rem));
  max-height: min(580px, calc(100vh - 2rem));
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}
.tbm-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.7rem; }
.tbm-panel-lukk { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); line-height: 1; }

#tbm-skjema label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.88rem; }
#tbm-melding {
  width: 100%;
  resize: vertical;
  min-height: 5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font-family: inherit;
  font-size: 0.92rem;
}

.tbm-feil-varsel {
  color: var(--fare-dark);
  background: var(--fare-lys);
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  font-size: 0.82rem;
  margin: 0.6rem 0;
}

.tbm-skjermbilde-status { font-size: 0.8rem; color: var(--muted); margin: 0.6rem 0; }
#tbm-skjermbilde-forhandsvisning {
  display: block;
  max-width: 100%;
  max-height: 90px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 0.4rem;
}

.tbm-teknisk-detaljer { font-size: 0.78rem; color: var(--muted); margin: 0.5rem 0; }
.tbm-teknisk-detaljer summary { cursor: pointer; }

#tbm-send { width: 100%; margin-top: 0.5rem; }
.tbm-kvittering { color: var(--success-dark); font-weight: 600; margin-top: 0.5rem; text-align: center; }
.tbm-feilmelding { color: var(--fare-dark); font-weight: 600; margin-top: 0.5rem; text-align: center; }

@media (max-width: 420px) {
  .tbm-fab { width: 54px; height: 54px; }
  .tbm-fab-wrap { right: 16px; bottom: 16px; }
  .tbm-panel { right: 16px; bottom: 16px; left: 16px; width: auto; }
}

/* ---------- Hjelp-panel (se _HjelpPanel.cshtml + js/hjelp-panel.js) ----------
   Bevisst IKKE modal: ingen bakgrunns-overlay, ingen fokus-felle, siden under
   forblir klikkbar/skrollbar mens panelet er åpent — kun transform avgjør om
   det er synlig, det fjernes aldri fra DOM-en eller skjules med [hidden]. */
.hjelp-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  max-width: 100vw;
  background: #fff;
  box-shadow: -6px 0 28px rgba(20, 22, 31, 0.2);
  z-index: 10002;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.hjelp-panel.hjelp-apen { transform: translateX(0); }

.hjelp-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.1rem 0.7rem;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.hjelp-panel-header strong { font-size: 1.05rem; }
.hjelp-panel-lukk { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--muted); line-height: 1; }

.hjelp-sok-wrap { padding: 0.8rem 1.1rem; flex: 0 0 auto; }
.hjelp-sok {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font-size: 0.92rem;
  font-family: inherit;
}

.hjelp-innhold { overflow-y: auto; flex: 1 1 auto; padding: 0 1.1rem 1.5rem; }

.hjelp-seksjon { margin-bottom: 1.2rem; }
.hjelp-seksjon[hidden] { display: none; }
.hjelp-seksjon-tittel {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.hjelp-seksjon-tittel-liten { font-size: 0.82rem; text-transform: none; letter-spacing: normal; color: var(--ink-soft); margin-top: 0.9rem; }

.hjelp-liste { list-style: none; margin: 0; padding: 0; }
.hjelp-artikkel { border-bottom: 1px solid var(--border); }
.hjelp-artikkel[hidden] { display: none; }
.hjelp-artikkel-tittel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.65rem 0.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.hjelp-chevron { flex: 0 0 auto; transition: transform 0.15s ease; color: var(--muted); }
.hjelp-artikkel-apen .hjelp-chevron { transform: rotate(90deg); }
.hjelp-artikkel-innhold { padding: 0 0.1rem 0.9rem; font-size: 0.88rem; color: var(--ink-soft); }
.hjelp-artikkel-innhold p { margin: 0 0 0.6rem; }
.hjelp-artikkel-innhold p:last-child { margin-bottom: 0; }

.hjelp-alle-emner summary {
  cursor: pointer;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.hjelp-ingen-treff { font-size: 0.88rem; color: var(--muted); text-align: center; margin-top: 1.5rem; }
.hjelp-lenke-knapp { background: none; border: none; padding: 0; color: var(--rolle-accent); text-decoration: underline; cursor: pointer; font-size: inherit; }

@media (max-width: 640px) {
  .hjelp-panel { width: 100vw; }
}

/* Hjemmeoppgaver (2026-10-04): et Bilde-ledd er rent visningsinnhold forfatteren la inn —
   "kan utvides" (bugliste-kravet) betyr her: klikk for å vise i full bredde i stedet for
   en begrenset forhåndsvisning. */
.hjemmeoppgave-bilde { max-width: 320px; transition: max-width 0.15s ease; cursor: zoom-in; }
.hjemmeoppgave-bilde.bilde-utvidet { max-width: 100%; cursor: zoom-out; }

/* ---------- Hjemmeoppgave-editor (bugliste 2026-10-05 punkt 1-14) ---------- */

/* Punkt 1: tett avstand mellom et felt og SIN EGEN etikett/plassholder, større avstand ned til
   neste felt-gruppe — løser forvirringen om hvilken etikett som "eier" hvilket felt. */
.hjo-felt-gruppe { margin-bottom: 1.1rem; }
.hjo-felt-gruppe label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: 0.92rem; }
.hjo-felt-gruppe input[type="text"],
.hjo-felt-gruppe input[type="url"],
.hjo-felt-gruppe select,
.hjo-felt-gruppe textarea { width: 100%; max-width: 480px; }

/* Punkt 3: to-kolonners oppsett — ledd-listen til venstre, en klebrig forklaringsboks til høyre. */
.hjo-editor-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.hjo-ledd-liste { flex: 1 1 auto; min-width: 0; }
.hjo-forklaring-panel {
  flex: 0 0 260px;
  position: sticky;
  top: 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}
.hjo-forklaring-panel h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.hjo-forklaring-panel p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 860px) {
  .hjo-editor-layout { flex-direction: column; }
  .hjo-forklaring-panel { position: static; flex-basis: auto; width: 100%; }
}

/* Ledd-rad + header (punkt 5/6/8/10) */
.hjo-ledd { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; margin-bottom: 1rem; background: var(--bg); }
.hjo-ledd--drar { opacity: 0.35; }
.hjo-ledd-header { display: flex; align-items: center; gap: 0.6rem; }
.hjo-drag-handle { cursor: grab; color: var(--muted); flex: 0 0 auto; display: inline-flex; }
.hjo-drag-handle:active { cursor: grabbing; }
.hjo-ledd-header-tekst { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hjo-ledd-knapper { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.hjo-ledd-innhold { margin-top: 0.85rem; }
.hjo-ledd--minimert .hjo-ledd-innhold { display: none; }

/* Punkt 4/6: ikon+tekst-knapper i behandlerens egen rollefarge. */
.hjo-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--rolle-accent, var(--success));
  color: var(--rolle-accent-tekst, #fff);
  border: none; border-radius: 999px; padding: 0.35rem 0.75rem;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}
.hjo-btn:hover { background: var(--rolle-accent-dark, var(--success-dark)); transform: translateY(-1px); }
.hjo-btn svg { flex: 0 0 auto; }
.hjo-btn-stor { padding: 0.55rem 1.1rem; font-size: 0.95rem; }
.hjo-fjern-knapp { background: var(--fare); }
.hjo-fjern-knapp:hover { background: var(--fare-dark); }

/* Punkt 9: ingen etikett over spørsmål/instruksjon-feltene — plassholder-tekst i stedet. */
.hjo-sporsmal-input { font-weight: 600; }
.hjo-instruksjon-input { resize: none; overflow: hidden; min-height: 2.2rem; } /* punkt 14: vokser automatisk, se autogrow-logikken i JS */

/* Punkt 12: visuell svaralternativ-bygger (ingen "verdi:tekst"-syntaks synlig). */
.hjo-svarbygger { margin-bottom: 1.1rem; }
.hjo-statement-liste { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.hjo-statement-rad { display: flex; gap: 0.4rem; align-items: center; }
/* Må vinne over den generelle "main.page form input { width: 100% }"-regelen (høyere
   spesifisitet der) — se docs/beslutningslogg.md for samme type kollisjon. */
main.page form .hjo-statement-rad input.hjo-statement-verdi { width: 3.2rem; flex: 0 0 3.2rem; text-align: center; }
main.page form .hjo-statement-rad input.hjo-statement-tekst { width: auto; flex: 1 1 auto; max-width: 380px; }
.hjo-fjern-statement { background: transparent; border: 1px solid var(--border); border-radius: 50%; width: 1.8rem; height: 1.8rem; cursor: pointer; color: var(--muted); flex: 0 0 auto; }
.hjo-fjern-statement:hover { color: var(--fare); border-color: var(--fare); }

.hjo-vas-rad { display: flex; align-items: center; gap: 0.6rem; max-width: 560px; }
main.page form .hjo-vas-rad input { width: auto; flex: 1 1 160px; }
.hjo-vas-linje { flex: 0 0 60px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--border), var(--rolle-accent, var(--accent))); }

.hjo-janei-forhandsvisning { display: flex; gap: 0.5rem; }
.hjo-janei-pille { display: inline-block; padding: 0.4rem 1.2rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--ink-soft); font-size: 0.88rem; }

.hjo-hjelpetekst-liten { font-size: 0.85rem; color: var(--muted); margin: 0; }

.hjo-bilde-felt .hjo-bilde-forhandsvisning { max-width: 200px; display: block; margin: 0.5rem 0; border-radius: 6px; }
.hjo-bilde-url-input { margin-top: 0.5rem; }

/* ---------- Program-kalender (bugliste 2026-10-05 punkt 28-35) ---------- */

/* Punkt 29: "kl."-boksen var bred fordi den ARVET "main.page form input { width: 100% }" — en
   klokkeslett-input trenger ikke mer enn ca. like bredt som selve nedtrekksvelgeren som åpnes. */
/* !important er nødvendig her: den generelle "main.page form input:not([type=...])×6"-regelen
   (linje 829) har EGENTLIG høyere spesifisitet enn denne (hver :not([type=...]) teller som en
   klasse i spesifisitetsberegningen — seks :not()-ledd gir klassetall 7, mot kun 2 her), så den
   tidligere versjonen av denne regelen UTEN !important vant aldri i praksis (bugliste 2026-10-06
   punkt 2 — klokkeslettboksene ble likevel 100% brede og pakket om på hver sin linje). Samme
   mønster som .rapport-handlinger form sin !important-bruk et annet sted i denne filen. */
main.page form input.program-klokkeslett-input { width: 7.5rem !important; display: inline-block; }

.program-kalender { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; max-width: 760px; }
.program-kalender-uke { display: flex; align-items: center; gap: 0.5rem; }
.program-kalender-ukenummer { flex: 0 0 4rem; font-size: 0.8rem; color: var(--muted); }
.program-kalender-rad { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; flex: 1 1 auto; }
.program-dag-celle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.15rem; min-height: 3rem; border: 1px solid var(--border); border-radius: 6px;
  background: #fff; cursor: pointer; padding: 0.3rem 0.2rem; font: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.program-dag-celle:hover { border-color: var(--rolle-accent, var(--accent)); }
.program-dag-nummer { font-size: 0.72rem; color: var(--muted); }
.program-dag-badge {
  font-size: 0.68rem; font-weight: 700; color: #fff; background: var(--rolle-accent, var(--accent));
  border-radius: 999px; padding: 0.1rem 0.45rem;
}
.program-dag-celle--har-drop { border-color: var(--rolle-accent-dark, var(--accent-dark)); background: var(--bg-soft); }
@media (max-width: 640px) {
  .program-kalender-ukenummer { flex-basis: 2.4rem; font-size: 0.7rem; }
  .program-dag-nummer { font-size: 0.62rem; }
}

#programDropDialog { max-width: 640px; width: 92vw; max-height: 85vh; overflow-y: auto; }