/* theme: dashboard */
:root {
  --color-bg: #f7f3ec;
  --color-surface: #ffffff;
  --color-text: #1f1b16;
  --color-text-muted: #5c5248;
  --color-border: #e4dccf;
  --color-focus: #1d4ed8;
  --color-accent: #8a3b12;
  --color-accent-subtle: #f6e3d3;
  --color-on-accent: #ffffff;
  --color-success: #166534;
  --color-success-subtle: #dcfce7;
  --color-on-success: #ffffff;
  --color-danger: #b91c1c;
  --color-danger-subtle: #fee2e2;
  --color-on-danger: #ffffff;
  --color-info: #1d4ed8;
  --color-info-subtle: #dbeafe;
  --color-on-info: #ffffff;
  --color-warning: #854d0e;
  --color-warning-subtle: #fef3c7;
  --color-on-warning: #ffffff;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-weight-heading: 600;
  --line-height: 1.5;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.1875rem;
  --text-2xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --text-3xl: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --radius: 0.5rem;
  --border-width: 1px;
  --content-width: 72rem;
  --color-menu-bg: #231813;
  --color-menu-rail: #1a110d;
  --color-menu-surface: #3a2a22;
  --color-menu-text: #e9ded3;
  --color-menu-text-muted: #b8a79a;
  --color-menu-rail-text: #d9ccbf;
  --color-menu-active: #fbf3ea;
  --color-menu-on-active: #231813;
  --color-menu-accent: #f3b38f;
  --color-menu-lys-bg: #ffffff;
  --color-menu-lys-rail: #f1ece4;
  --color-menu-lys-surface: #f3eee6;
  --color-menu-lys-text: #1f1b16;
  --color-menu-lys-text-muted: #5c5248;
  --color-menu-lys-rail-text: #3d342c;
  --color-menu-lys-active: #231813;
  --color-menu-lys-on-active: #ffffff;
  --color-menu-lys-accent: #8a3b12;
  --color-menu-varm-bg: #f3e3cf;
  --color-menu-varm-rail: #e6cfb3;
  --color-menu-varm-surface: #fbf5ee;
  --color-menu-varm-text: #2b1d12;
  --color-menu-varm-text-muted: #6b5541;
  --color-menu-varm-rail-text: #4a3323;
  --color-menu-varm-active: #8a3b12;
  --color-menu-varm-on-active: #ffffff;
  --color-menu-varm-accent: #8a3b12;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /*
   * Plass til rullefeltet selv når siden ikke ruller (eier 2026-09-19: «Maude-
   * inndelingen flytter seg litt til siden når jeg veksler fane»). Uten dette
   * blir vinduet 15 piksler bredere på korte sider, og alt hopper sidelengs.
   */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height);
}

header,
main,
footer {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  /* Et langt ord («Hudpleieklinikken») bryter heller enn å stikke ut av en smal
     skjerm — særlig med «Tekststørrelse: Større» (2.2b). Virker bare når ordet
     ellers ikke får plass, så det endrer ingenting der det allerede passer. */
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
}

a {
  color: var(--color-accent);
}

img {
  max-width: 100%;
  height: auto;
}

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

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

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

/* ── dashboard ────────────────────────────────────────────── */

body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;

  /*
   * Myk kant og myk feltbakgrunn (eier 2026-09-19: «mykere»). Blandinger av
   * dashbordets egne farger, ikke nye: kanten er mørk nok til å se hvor et felt
   * er (kontrast for skjemakontroller), men ikke svart.
   */
  --color-line: color-mix(in srgb, var(--color-text-muted) 62%, var(--color-border));
  --color-field: color-mix(in srgb, var(--color-bg) 40%, var(--color-surface));
  accent-color: var(--color-accent);
}

body > header,
body > main {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Sidemenyen. Øverst på mobil, egen kolonne på bred skjerm. */
body > header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 1.5rem 1rem 1rem;
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

.app-brand {
  margin: 0;
  padding-inline: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
}

.app-brand small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

body > header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

body > header nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border-radius: 0.625rem;
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

body > header nav a:hover {
  background: var(--color-bg);
}

body > header nav a[aria-current="page"] {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 700;
}

.icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.app-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: auto;
  padding: var(--space-2) var(--space-3) 0;
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--text-sm);
}

.app-account form {
  margin: 0;
}

/* Begge er dempede tekstlenker: Logg ut er en knapp, men skal ikke se ut som en. */
.app-account a,
.app-account button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.app-account a:hover,
.app-account button:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/*
 * Kundens sidemeny: ett mørkt, flytende kort delt i to (eiers referanse
 * design-referanser/sidemeny-nr14-referanse.html, 2026-09-20). Skinnen til
 * venstre bytter modul; panelet til høyre viser modulens meny, med Maude
 * nederst. Fargene er menyens egne (--color-menu-…, colors.ts). Super Admin
 * har ikke kortet og beholder den lyse menyen over.
 *
 * På smal skjerm ligger kortet øverst: skinnen som en rad, menyen under.
 */
body > header:has(> .app-menu) {
  gap: 0;
  padding: var(--space-3);
  background: none;
  border: 0;
}

.app-menu {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--color-menu-bg);
  color: var(--color-menu-text);
  border-radius: 1.25rem;
  box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--color-text) 18%, transparent);
}

.app-rail {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-menu-rail);
}

/* «Bytt bedrift»: bedriftens forbokstav på aksenten. */
.app-switch {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--color-menu-accent);
  color: var(--color-menu-on-active);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}

.app-switch:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-menu-accent) 40%, transparent);
}

/* På smal skjerm står modulene på én rad, og rulles sidelengs om de ikke får plass. */
.app-rail nav {
  display: flex;
  flex-grow: 1;
  min-width: 0;
  gap: var(--space-1);
  overflow-x: auto;
}

.app-rail nav ul {
  flex-wrap: nowrap;
  gap: var(--space-1);
}

.app-rail-foot {
  margin-left: auto;
}

/* Modulene: ikon over navn. */
.app-rail nav a {
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  width: 3.5rem;
  min-height: 3.5rem;
  padding: 0.25rem;
  border-radius: 0.75rem;
  color: var(--color-menu-rail-text);
  font-size: 0.75rem;
  text-align: center;
}

.app-rail nav a:hover {
  background: var(--color-menu-surface);
}

.app-rail nav a[aria-current="page"] {
  background: var(--color-menu-active);
  color: var(--color-menu-on-active);
}

.app-rail .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.app-rail .badge {
  background: var(--color-menu-accent);
  color: var(--color-menu-on-active);
}

/*
 * Menyens farger er kundens valg (eier 2026-09-22). Reglene peker bare tokens om
 * til tokens — fargene selv ligger i :root (colors.ts, dashboardMenuPalettes).
 */
.app-menu[data-meny="lys"] {
  --color-menu-bg: var(--color-menu-lys-bg);
  --color-menu-rail: var(--color-menu-lys-rail);
  --color-menu-surface: var(--color-menu-lys-surface);
  --color-menu-text: var(--color-menu-lys-text);
  --color-menu-text-muted: var(--color-menu-lys-text-muted);
  --color-menu-rail-text: var(--color-menu-lys-rail-text);
  --color-menu-active: var(--color-menu-lys-active);
  --color-menu-on-active: var(--color-menu-lys-on-active);
  --color-menu-accent: var(--color-menu-lys-accent);
  border: var(--border-width) solid var(--color-border);
}

.app-menu[data-meny="varm"] {
  --color-menu-bg: var(--color-menu-varm-bg);
  --color-menu-rail: var(--color-menu-varm-rail);
  --color-menu-surface: var(--color-menu-varm-surface);
  --color-menu-text: var(--color-menu-varm-text);
  --color-menu-text-muted: var(--color-menu-varm-text-muted);
  --color-menu-rail-text: var(--color-menu-varm-rail-text);
  --color-menu-active: var(--color-menu-varm-active);
  --color-menu-on-active: var(--color-menu-varm-on-active);
  --color-menu-accent: var(--color-menu-varm-accent);
}

/* Velgeren i konto-popoveren: tre prøver, én valgt. */
.app-meny-valg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.app-meny-valg button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.app-meny-valg button[aria-pressed="true"] {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.app-meny-valg .prove {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-border);
}

.app-meny-valg .prove--mork {
  background: var(--color-menu-bg);
}

.app-meny-valg .prove--lys {
  background: var(--color-menu-lys-bg);
}

.app-meny-valg .prove--varm {
  background: var(--color-menu-varm-bg);
}

.app-konto-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-menu-surface);
  color: var(--color-menu-active);
  cursor: pointer;
}

.app-konto-button:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-menu-accent) 40%, transparent);
}

/* Konto: hvem du er, og «Logg ut». Åpner seg fra knappen, uten skript. */
.app-konto {
  position: fixed;
  inset: var(--space-3) var(--space-3) auto auto;
  margin: 0;
  width: min(18rem, calc(100vw - var(--space-3) * 2));
  padding: var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--color-text) 18%, transparent);
}

.app-konto p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

.app-konto form {
  margin: 0;
}

.app-panel {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-3);
}

.app-panel .app-brand {
  color: var(--color-menu-active);
}

.app-panel .app-brand small {
  color: var(--color-menu-text-muted);
}

.app-panel nav {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Modulnavnet over listen. */
.app-panel-title {
  margin: 0 0 var(--space-2);
  padding-inline: var(--space-3);
  color: var(--color-menu-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-panel nav ul {
  gap: 2px;
}

.app-panel nav a {
  border-radius: 0.75rem;
  color: var(--color-menu-text);
  font-weight: 500;
}

.app-panel nav a:hover {
  background: var(--color-menu-surface);
}

.app-panel nav a[aria-current="page"] {
  background: var(--color-menu-surface);
  color: var(--color-menu-accent);
  font-weight: 600;
}

.app-panel nav .icon {
  opacity: 0.75;
}

.app-panel nav a[aria-current="page"] .icon {
  opacity: 1;
}

/* Maude-kortet i panelet: samme kort som før, på menyens mørke flate. */
.app-panel .maude-topp {
  background: var(--color-menu-surface);
  border-color: var(--color-menu-surface);
  border-radius: 1rem;
  color: var(--color-menu-active);
}

.app-panel .maude-topp:hover {
  border-color: var(--color-menu-accent);
}

.app-panel .maude-role {
  color: var(--color-menu-text-muted);
}

.app-panel .maude-hint {
  background: var(--color-menu-accent);
  color: var(--color-menu-on-active);
}

/* Hovedflaten. */
body > main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-4);
  padding-block: var(--space-4) var(--space-6);
}

body > main > * {
  max-width: var(--content-width);
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.page-head-text {
  min-width: 0;
}

/*
 * Veien ett steg opp står OVER overskriften, ikke under den (eier 2026-09-20).
 * Den ligger inne i «.page-head», ikke som et eget element i hovedflaten —
 * ellers ville luften over overskriften blitt en annen her enn på «Sider og
 * innhold», og de to sidene ville startet på hver sin høyde.
 */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.back-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.page-head h1 {
  margin: 0;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}

.page-head p {
  max-width: 60ch;
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

/*
 * Siden med en høyrespalte (eier 2026-09-18, tegnebrettet «Maude i dashbordet»).
 * Én kolonne på smal skjerm — da havner spalten under innholdet, som er riktig
 * rekkefølge: det du jobber med, først. Spalten følger med når du blar.
 */
/*
 * Spalten skal stå ved høyre KANT, ikke klistret inntil innholdet (eier
 * 2026-09-19: «Maude er limt helt inntil det som står på midten … veldig mye
 * luft til høyre»). Alt annet i dashbordet har en lesebredde på 72 rem; denne
 * raden slipper den, og bruker hele flaten — som sidemenyen til venstre.
 */
body > main > .with-aside {
  max-width: none;
}

.with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/*
 * Innholdet fyller sin egen kolonne. Lesebredden ligger allerede i at
 * spalten til høyre tar 21 rem — en ekstra begrensning her ga bare et bredt,
 * hvitt felt mellom innholdet og Maude (eier 2026-09-19: «masse hvitt, masse
 * plass … er det noe som mangler?»).
 */
.with-aside-main > * {
  max-width: none;
}

.with-aside-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
}

@media (min-width: 64rem) {
  .with-aside {
    grid-template-columns: minmax(0, 1fr) 21rem;
  }

  .with-aside-side {
    position: sticky;
    top: var(--space-4);
  }
}

/*
 * Høyrespalten når den viser siden din (tavle C2, eiers valg). Fanen øverst
 * bytter mellom forhåndsvisningen og Maude — det er én spalte, ikke to, og
 * man ser sjelden på begge i samme sekund.
 */
.side-panel {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.side-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
}

.side-tabs .tab {
  flex: 1 1 0;
  justify-content: center;
}

/*
 * Vinduet: siden rendres i 1280 piksler og skaleres ned, så proporsjonene er
 * som på en laptop. Uten det ville spalten vist mobilutgaven og løyet om hva
 * kunden faktisk ser.
 */
.side-preview {
  position: relative;
  height: 22rem;
  overflow: hidden;
  background: var(--color-bg);
}

.side-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 1500px;
  border: 0;
  transform: scale(0.25);
  transform-origin: top left;
}

.side-note {
  margin: 0;
  padding: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/*
 * Maude: kortet i menyen og panelet som åpner seg fra det (tegning C fra Fable,
 * eier 2026-09-19). Kortet er en knapp; panelet er et popover, så Escape, klikk
 * utenfor og fokus er nettleserens jobb — ingen skript.
 */
.maude-float {
  position: fixed;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 20;
  width: min(22rem, calc(100vw - var(--space-2) * 2));
}

/* Kortet: bandet med henne selv. Tynn ramme; aktiv ring mens panelet er åpent. */
.maude-topp {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  width: 100%;
  height: 8.5rem;
  padding: var(--space-3) var(--space-3) 0;
  background: var(--color-accent-subtle);
  border: var(--border-width) solid var(--color-border);
  border-radius: 1rem;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}

.maude-topp:hover {
  border-color: var(--color-accent);
}

body:has(.maude-panel:popover-open) .maude-trigger {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/*
 * Figuren er en helfigur, og her vises toppen av den: object-position holder
 * hodet i bildet uansett hvor høyt feltet er.
 */
.maude-figur {
  flex: none;
  width: 5.25rem;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.maude-who {
  padding-bottom: var(--space-3);
}

.maude-name {
  display: block;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.1;
}

.maude-role {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Merket på kortet. Vises ikke når det ikke er noe å se på. */
.maude-hint {
  display: inline-block;
  height: 1.5rem;
  margin-top: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: 0.75rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5rem;
}

/*
 * Panelet (godkjent skjermbilde 2026-09-22). Klassen maude-panel er RAMMEN: på
 * mobil ingenting, på desktop den mørke menyen utvidet ut til panelets kant.
 * Klassen maude-panel-sheet er den hvite flaten inni, med hale ned mot kortet.
 * Fast makshøyde: toppen og feltet står, listen i midten scroller.
 */
.maude-panel {
  position: fixed;
  inset: auto var(--space-2) 11rem auto;
  margin: 0;
  padding: 0;
  width: min(23.75rem, calc(100vw - var(--space-2) * 2));
  max-height: calc(100vh - 13rem);
  overflow: visible;
  background: transparent;
  color: var(--color-text);
  border: 0;
}

.maude-panel:popover-open {
  display: flex;
  flex-direction: column;
}

.maude-panel-sheet {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 1rem;
  box-shadow:
    0 1rem 2.5rem color-mix(in srgb, var(--color-text) 18%, transparent),
    0 2px 6px color-mix(in srgb, var(--color-text) 8%, transparent);
}

.maude-panel-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.maude-panel-head > div {
  flex: 1 1 auto;
  min-width: 0;
}

.maude-full {
  flex: none;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.maude-full:hover {
  color: var(--color-text);
}

.maude-panel-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.maude-panel-where {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* Midten scroller; toppen og feltet står fast. */
.maude-panel-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-5);
  overflow-y: auto;
}

.maude-panel-body > * {
  max-width: 100%;
}

/* «Trenger deg nå»: det ene som bare du kan avgjøre. Mørkt, som menyen. */
.maude-now {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  background: var(--color-menu-bg, var(--color-text));
  color: var(--color-menu-text, var(--color-bg));
  border-radius: 0.875rem;
  text-decoration: none;
}

.maude-now:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.maude-now-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.maude-now-label {
  color: var(--color-menu-accent, var(--color-accent-subtle));
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.maude-now-title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Varsler: hvite rader med en prikk, klikk går til kilden. */
.maude-rows {
  display: grid;
  align-self: stretch;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.maude-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.625rem 0.875rem;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
  color: var(--color-text);
  text-decoration: none;
}

.maude-row:hover {
  border-color: var(--color-accent);
}

.maude-row-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.maude-row-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.maude-row-when {
  flex: none;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.maude-more-link {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Forslag: lukket som standard, og aldri i merket på kortet. */
.maude-forslag {
  align-self: stretch;
  background: color-mix(in srgb, var(--color-bg) 40%, var(--color-surface));
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
}

.maude-forslag summary {
  padding: 0.625rem 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.maude-forslag .maude-notes {
  padding: 0 var(--space-4) var(--space-3) var(--space-5);
}

/* Det hun sier, som en snakkeboble med skarpt hjørne opp mot henne. */
.maude-bubble {
  margin: 0;
  padding: 0.875rem 1.125rem;
  background: var(--color-accent-subtle);
  border-radius: 4px 16px 16px 16px;
}

/* Hovedknappen og den stille knappen ved siden av. */
.maude-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.maude-quiet-button {
  white-space: nowrap;
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  background: none;
  border: 0;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.maude-quiet-button:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.maude-notes {
  margin: 0;
  padding-left: var(--space-4);
}

.maude-notes li + li {
  margin-top: var(--space-2);
}

/* Skrivefeltet: ett felt som vokser, med sendeknappen inni. */
.maude-panel-foot {
  padding: var(--space-3) var(--space-5) var(--space-4);
  background: color-mix(in srgb, var(--color-bg) 40%, var(--color-surface));
  border-top: var(--border-width) solid var(--color-border);
  border-radius: 0 0 1rem 1rem;
}

/*
 * Spørrefeltet til Maude: ÉN komponent (maude-composer.tsx) i popupen, på
 * Maude-siden og på Oversikten. PILLEN er rammen og bærer fokusringen
 * (:focus-within), i aksentfargen. Tekstområdet inni har ingen egen ring: den
 * globale :focus-visible tegnet en blå firkant inni den avrundede pillen, og den
 * kom tilbake hver gang et felt fikk sine egne stiler (eier 2026-09-21 og
 * 2026-09-22). Ringen er ikke fjernet, bare flyttet ut til kanten, så
 * tastaturfokus synes på hele feltet.
 *
 * Vokser fra én til fem linjer, deretter scroll (field-sizing er ny; eldre
 * nettlesere får én linje som kan skrolles). Langt ord brytes, aldri bredden.
 */
.maude-composer {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0.25rem 0.25rem 0.25rem var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-radius: 1.625rem;
}

.maude-composer:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.maude-composer textarea {
  /*
   * Ringen ligger på PILLEN (over), ikke her: grunnregelens fokusring (core/themes/
   * stylesheet.ts) tegnes alltid via variabelen --color-focus, og skal aldri fjernes —
   * bare gjøres usynlig akkurat her, ved å style variabelen om til gjennomsiktig. Samme
   * mønster som Oversiktens store felt fikk 2026-09-21, som farger ringen om i stedet for å slå den av.
   */
  --color-focus: transparent;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 2.75rem;
  max-height: 8.75rem;
  padding: 0.6rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-text);
  field-sizing: content;
  font: inherit;
  line-height: 1.45;
  overflow-y: auto;
  overflow-wrap: anywhere;
  resize: none;
}

.maude-composer textarea::placeholder {
  color: var(--color-text-muted);
}

/* Oversiktens store felt: samme komponent, tre linjer å skrive på og litt skygge. */
.maude-composer--stor {
  padding-left: 1.5rem;
  box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--color-text) 8%, transparent);
}

.maude-composer--stor:focus-within {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent),
    0 0.5rem 1.5rem color-mix(in srgb, var(--color-text) 8%, transparent);
}

.maude-composer--stor textarea {
  min-height: 5rem;
  max-height: 10rem;
  padding-block: 0.875rem;
  font-size: 1.0625rem;
}

.maude-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  cursor: pointer;
}

.maude-honest {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* Luft under innholdet, så det siste aldri havner bak kortet i hjørnet på mobil. */
.maude-float-luft {
  height: 11rem;
}

/*
 * Med sidemeny (fra 56 rem) står kortet nederst i menyen, og panelet åpner seg
 * 16 px til høyre for menyen. Uten sidemeny (mobil) står kortet i hjørnet og
 * panelet over det.
 */
.maude-float + .app-account {
  margin-top: 0;
}

@media (min-width: 56rem) {
  .maude-float {
    position: static;
    width: auto;
    margin-top: auto;
  }

  /* Kortet i menyen, etter tegningen (oversikt-*.html): 104 px høyt, figuren 76 px bred. */
  .maude-topp {
    align-items: stretch;
    gap: 0.875rem;
    height: 6.5rem;
    padding: 0;
    border-radius: 0.875rem;
  }

  .maude-figur {
    width: 4.75rem;
  }

  .maude-who {
    align-self: center;
    padding-bottom: 0;
  }

  .maude-name {
    font-size: 1.0625rem;
    line-height: 1.375rem;
  }

  .maude-float-luft {
    height: 0;
  }

  /*
   * Rammen på desktop: den mørke menyen utvides ut til panelets kant mens det er
   * åpent. Venstre kant ligger mot skinnen (Hjem, E-post, Nettside står fortsatt
   * synlige og klikkbare), og nederste kant over kortet, så panelet aldri dekker
   * knappen. 6.5rem er kortets høyde; 5.25rem er skinnens bredde.
   */
  .maude-panel {
    inset: auto auto calc(var(--space-3) * 2 + 6.5rem + var(--space-2))
      calc(var(--space-3) + 5.25rem);
    width: 25rem;
    max-height: calc(100vh - var(--space-3) * 3 - 6.5rem - var(--space-2));
    box-sizing: border-box;
    padding: var(--space-2) var(--space-2) var(--space-4) var(--space-3);
    background: var(--color-menu-bg);
    /*
     * Bare toppen er en ekte ytterkant (rundet). Bunn-høyre er IKKE et hjørne av
     * formen — der fortsetter samme farge rett ned i ::after (kolonnen som
     * strekker seg ned til kortet). Var den avrundet her, curvet flaten bort fra
     * hjørnet på det siste hakket før ::after tok over, og et lite stykke av
     * siden bak lyste gjennom — akkurat der eier pekte 2026-09-22 kveld.
     */
    border-radius: 0 1.25rem 0 0;
    box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--color-text) 25%, transparent);
  }

  /* Mørk flate ved siden av kortet, så kolonnen ser utvidet ut helt ned. */
  .maude-panel::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 15rem;
    right: 0;
    height: calc(var(--space-2) + 6.5rem + var(--space-3));
    background: var(--color-menu-bg);
    border-radius: 0 0 1.25rem 0;
  }

  .maude-panel-sheet {
    border: 0;
    box-shadow: none;
  }

  /* Halen ned mot kortet. */
  .maude-panel-sheet::after {
    content: "";
    position: absolute;
    left: 2.25rem;
    bottom: -0.4rem;
    width: 0.875rem;
    height: 0.875rem;
    background: var(--color-surface);
    transform: rotate(45deg);
  }
}


h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
}

h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 1rem;
}

.card > :last-child {
  margin-bottom: 0;
}

/*
 * Innlogging og «velg passord» (funn 2026-09-16, eier: «login-feltet tar 70 % av
 * skjermen»). Sidene hadde ingen egen ramme, så skjemaet arvet
 * --content-width (72rem) fra body > main > *, og et e-postfelt ble over
 * tusen piksler bredt. Et innloggingsskjema har to felt — det skal være en
 * smal, sentrert boks, ikke en side i full bredde.
 */
/*
 * Banneret for impersonering (1.6). Det skal ikke gaa an aa overse: egen
 * flate, kraftig kantlinje, og oeverst foer alt annet. Fargene er roller, som
 * ellers — ingen egen fargeverdi (0.8a).
 */
.impersonation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  background: var(--color-accent-subtle);
  color: var(--color-text);
  border: calc(var(--border-width) * 3) solid var(--color-accent);
  border-radius: var(--radius);
}

.impersonation p {
  margin: 0;
  flex: 1 1 18rem;
  font-size: var(--text-sm);
}

.impersonation form {
  margin: 0;
}

.auth {
  max-width: 24rem;
  margin-inline: auto;
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
}

.auth h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
}

.auth form p:last-child {
  margin-bottom: 0;
}

.auth button {
  width: 100%;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat {
  display: block;
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Lister med rader: tjenester, sider, seksjoner, åpningstider. */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Eier 2026-09-18: «masse mellomrom» mellom teksten og knappene. Årsaken var
 * ikke at knappene står til høyre, men at raden er like bred som hele skjermen.
 * Lister med ikonhandlinger får derfor sin egen, smalere bredde. Alternativet —
 * å sette knappene rett etter teksten — ble forkastet: da hopper de fram og
 * tilbake etter hvor langt navnet er, og kolonnen blir rufsete.
 *
 * Bare lister med de korte ikonknappene får dette. Lister med ord i knappene
 * («Opptre som», «Ny lenke for glemt passord» i sysadmin) trenger bredden.
 */
/*
 * Seksjonene på «Rediger side» (eiers skisse 2026-09-20).
 *
 * **Hvert kort er et helt kort, som Sideinnstillinger over dem.** Før var de en
 * «rows»-liste: kortene sto inntil hverandre, det første manglet topp-padding,
 * og nummereringen «1.» «2.» fortalte det plasseringen allerede sier. Nå er det
 * en kolonne med 12 px mellom, og alt du gjør med en seksjon ligger i tittelraden
 * — flytt og slett lå tidligere nederst, under Lagre-knappen.
 */
.sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.section-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-card {
  /* Kortets egen luft ligger på raden og på innholdet, så skillelinjen mellom
     dem kan gå helt ut til kanten. */
  padding: 0;
}

/* På smal skjerm faller knappene ned under navnet i stedet for å klemmes sammen. */
.section-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.section-card-icon {
  display: inline-flex;
  flex: none;
  color: var(--color-text-muted);
}

.section-card-text {
  flex: 1 1 10rem;
  min-width: 0;
}

.section-card-text h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
}

.section-card-text p {
  margin: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-card-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.section-card-actions form {
  margin: 0;
}

/* «Endre på siden» er en knapp, ikke en understreket lenke midt i teksten. */
.section-card-edit {
  margin-right: var(--space-2);
}

.icon-button--fold .icon {
  transition: transform 120ms ease;
}

.icon-button--open .icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .icon-button--fold .icon {
    transition: none;
  }
}

/* Valgene ligger inne i kortet, under en tynn strek, med samme sidepadding. */
.section-card-body {
  padding: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

/*
 * «Legg til seksjon»: full bredde, stiplet ramme — en åpen plass som venter på
 * noe, ikke en handling som konkurrerer med «Lagre».
 */
.add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3.5rem;
  padding: var(--space-3);
  border: var(--border-width) dashed var(--color-line);
  border-radius: 1rem;
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}

.add-card:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  border-style: solid;
}

/* «Hva vil du ha på siden?»: hele kortet er lenken, med typens eget ikon. */
.type-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.type-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 1rem;
  color: var(--color-text);
  text-decoration: none;
}

.type-card:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
}

.type-card-icon {
  display: inline-flex;
  flex: none;
  color: var(--color-accent);
}

.type-card-name {
  display: block;
  font-weight: 700;
}

.type-card-note {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.rows--tight {
  max-width: 46rem;
}

.rows > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.rows > li:first-child {
  border-top: 0;
  padding-top: 0;
}

/*
 * Flaten under en rad man peker på, og luften rundt den, gjelder BARE korte
 * rader. Funn 2026-09-18 (eier: «sånn rar hover som gjør alt helt merkelig»):
 * seksjonene under «Sider og innhold» er også en rows-liste, men hver rad er et
 * helt kort med skjema inni. Da la flaten seg over hele kortet, og innrykket
 * dyttet kortet sidelengs. Derfor rows--tight, ikke rows.
 */
.rows--tight > li {
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-radius: var(--radius);
}

.rows--tight > li:first-child {
  padding-top: var(--space-2);
}

@media (hover: hover) {
  .rows--tight > li:hover {
    background: var(--color-bg);
  }
}

.row-main {
  flex: 1 1 16rem;
  min-width: 0;
}

.row-main p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
}

.row-actions form {
  margin: 0;
}

/*
 * Handlingene på en rad: ikon uten ramme (eier valgte «A» 2026-09-18).
 * Flaten er fortsatt 2,75 rem — like lett å treffe med finger som knappene
 * var — selv om den er usynlig til man peker på den.
 */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.icon-button:hover {
  background: var(--color-accent-subtle);
  color: var(--color-text);
}

/* «Endre» er handlingen folk leter etter, og er den eneste som bærer farge. */
.icon-button--primary {
  color: var(--color-accent);
}

/*
 * Pilen som ikke kan brukes, blir stående — blek, men på plass. Fjernes den,
 * flytter de andre knappene seg fra rad til rad, og kolonnen blir urolig.
 */
.icon-button[disabled] {
  color: var(--color-border);
  cursor: default;
}

.icon-button[disabled]:hover {
  background: transparent;
  color: var(--color-border);
}

/* Skillet mellom «flytt» og «endre/slett»: to ulike slags handlinger. */
.row-actions hr {
  width: var(--border-width);
  height: 1.5rem;
  margin: 0 var(--space-1);
  border: 0;
  background: var(--color-border);
}

/* Skjemaer. */
.form {
  display: grid;
  gap: var(--space-3);
}

.field {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

/*
 * Etiketten over feltet. Rammetittelen sto tidligere som «.field legend» — men
 * ingen fieldset i produktet har klassen «field», så regelen traff aldri noe.
 * Følgen: hver eneste rammetittel («Hvordan prisen vises», «Utseende», «Bilder i
 * galleriet», «Hvilken MVA-grense gjelder?») ble stående tynnere enn etikettene
 * rundt seg, som om den var mindre viktig. Funnet av eier 2026-09-18.
 */
.field label,
legend {
  font-weight: 600;
}

.field-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Hintet som forklarer hvor innholdet kommer fra: et lite i-ikon foran. */
.field-hint--info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.field-hint--info .icon {
  flex: none;
  margin-top: 0.05rem;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.field-row > .field {
  flex: 1 1 10rem;
}

/*
 * Eier 2026-09-18: «se på hvor lange tekstfeltene er». Samme årsak som på
 * innloggingssiden lenger oppe: skjemaet arver --content-width (72rem) fra
 * body > main > *, og feltene er «width: 100%» — så et felt for «450» ble over
 * tusen piksler bredt. Skjemainnhold får derfor sin egen lesebredde.
 *
 * Bredden ligger på selve feltraden, ikke på «.form» eller «.card»: «.form» står
 * også på kort (section.card.form i Kontaktinfo) og på bildekortene under
 * Bilder, og de skal fortsatt bruke hele flaten. Overskrifter, lister og
 * knapper i samme kort er heller ikke berørt.
 */
.field,
.field-row,
.form > fieldset,
.form > .check {
  max-width: 34rem;
}

/*
 * Felt der verdien i praksis er kort — et beløp, et postnummer. Bare selve
 * feltet krymper; etiketten og hjelpeteksten under beholder lesebredden, ellers
 * ville hintet brutt over seks linjer.
 */
.field--short > input {
  max-width: 12rem;
}

fieldset {
  margin: 0;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.875rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="time"],
input[type="number"],
input[type="password"],
input[type="file"],
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-field);
  color: var(--color-text);
  font: inherit;
  border: var(--border-width) solid var(--color-line);
  border-radius: 0.625rem;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-weight: 500;
}

.check input {
  width: 1.25rem;
  height: 1.25rem;
}

/*
 * «Utseende» på en seksjon: valgene side om side, hvert med en liten skisse av
 * formen (eiers skisse 2026-09-20).
 *
 * **Rammen på fieldset er borte.** Valgene er allerede kort med hver sin ramme,
 * så feltrammen rundt dem ble en ramme utenpå en ramme. Rammetittelen står
 * igjen som en vanlig etikett.
 *
 * Tidligere sto de to under hverandre som «.choice»-rader (eier 2026-09-18:
 * beskrivelsen «er liksom trykt sammen»). Den formen er borte herfra; ingen
 * annen flate brukte den.
 */
.variants {
  max-width: 46rem;
  padding: 0;
  border: 0;
}

.variants > legend {
  padding: 0;
  margin-bottom: var(--space-1);
}

.variant-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.variant-card {
  display: block;
  flex: 1 1 14rem;
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.875rem;
  cursor: pointer;
}

/*
 * Radioen er skjult for øyet, men står igjen for tastaturet og skjermleseren.
 * Den klippes bort med clip-path, ikke tas ut av visningen: en kontroll som
 * fjernes helt, kan verken få fokus eller leses opp. Ringen flyttes til kortet.
 */
.variant-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.variant-card:hover {
  border-color: var(--color-accent);
}

.variant-card:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

/*
 * Fokusmerket flyttes til kortet, siden radioen selv er én piksel stor. Det er
 * en box-shadow: grunnreglene i stylesheet.ts eier fokusmarkeringen, og
 * dashbordets eget stilark skal ikke røre den (tests/unit/theme-dashboard).
 * Ringen er like tykk og har samme farge som den grunnreglene tegner.
 */
.variant-card:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--color-focus);
}

.variant-sketch {
  display: block;
  width: 100%;
  height: 2.75rem;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: 0.5rem;
}

.variant-sketch rect {
  fill: currentColor;
}

.variant-card:has(input:checked) .variant-sketch {
  color: var(--color-accent);
}

.variant-card-name {
  display: block;
  font-weight: 700;
}

.variant-card-note {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

/*
 * «Måter å endre siden på» (eier 2026-09-19). To kort i dag — rediger selv,
 * eller hent inspirasjon i de ferdige stilene. Det tredje, Maude, settes inn
 * her når hun kan gjøre jobben.
 */
.ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-3);
}

.way {
  display: block;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 1rem;
  color: var(--color-text);
  text-decoration: none;
}

a.way:hover {
  border-color: var(--color-accent);
}

/* Den man allerede står i, er merket — og er ikke en lenke til seg selv. */
.way--here {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
}

.way-title {
  display: block;
  font-weight: 700;
}

.way-text {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/*
 * Et valg i en rad: stil eller fane. Det valgte er merket med kant, vekt OG
 * flate — aldri farge alene (§10.2).
 */
.chip,
.tab {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.chip:hover,
.tab:hover {
  border-color: var(--color-text-muted);
}

.chip[aria-current],
.tab[aria-current] {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* Knapper. */
.button {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  text-decoration: underline;
}

/*
 * Sekundærknappen slik Fable tegnet den (oversikt-oppstart-sjekkliste.html «ghost»):
 * hvit, myk kant, tekst i aksentfarge og fet. Aldri mørk tekst på en hvit knapp
 * som ser ut som en vanlig lenke i en ramme. Én stil, overalt.
 */
.button--secondary {
  background: var(--color-surface);
  color: var(--color-accent);
  font-weight: 700;
  border-color: var(--color-line);
}

.button--secondary:hover {
  border-color: var(--color-accent);
}

.button--danger {
  background: var(--color-surface);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.button--small {
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
}

/* Beskjeder. Tekst først, farge som forsterkning. */
.notice {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: 0.875rem;
  background: var(--color-success-subtle);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-success);
}

.notice--error {
  background: var(--color-danger-subtle);
  border-color: var(--color-danger);
}

.notice--info {
  background: var(--color-info-subtle);
  border-color: var(--color-info);
}

.notice--warning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-warning-subtle);
  border-color: var(--color-warning);
}

.notice--warning p {
  margin: 0;
}

.badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
}

.badge--muted {
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.next-steps {
  margin: 0;
  padding-left: var(--space-4);
}

.next-steps li + li {
  margin-top: var(--space-2);
}

/* Åpningstider: uka som sju rader, hele raden er lenken til dagen. */
.week {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Samme lesebredde som listene ellers (eier 2026-09-18: «åpningstider er
     fortsatt langt»). Uka har tre korte kolonner — dag, tid, «Endre» — og ble
     stående strukket over hele skjermen med tomrom i midten. */
  max-width: 46rem;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
}

.week li + li {
  border-top: var(--border-width) solid var(--color-border);
}

.week-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}

.week-day:hover {
  background: var(--color-accent-subtle);
}

.week-day strong {
  flex: 0 0 6.5rem;
}

.week-times {
  flex: 1 1 10rem;
  font-variant-numeric: tabular-nums;
}

.week-times--empty {
  color: var(--color-text-muted);
}

.week-edit {
  color: var(--color-accent);
  font-weight: 600;
}

/* Valgene i eksempelkortet på oversikten. */
.choices {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.choices form {
  margin-top: var(--space-2);
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) / 2);
  background: var(--color-bg);
}

@media (min-width: 56rem) {
  /* Bare sider med meny får sidekolonnen; innloggingen står alene. */
  body:has(> header) {
    grid-template-columns: 16.5rem minmax(0, 1fr);
  }

  body > header {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-bottom: 0;
    border-right: var(--border-width) solid var(--color-border);
  }

  body > header nav ul {
    flex-direction: column;
  }

  body > main {
    padding-inline: var(--space-5);
  }

  /* Kundens sidemeny: kortet fyller høyden, skinnen står som en kolonne. */
  body:has(> header > .app-menu) {
    grid-template-columns: 21.75rem minmax(0, 1fr);
  }

  body > header:has(> .app-menu) {
    padding-right: 0;
    border-right: 0;
  }

  .app-menu {
    flex-direction: row;
  }

  .app-rail {
    flex-direction: column;
    gap: var(--space-2);
    width: 5.25rem;
    padding: var(--space-3) var(--space-2);
  }

  .app-switch {
    margin-bottom: var(--space-2);
  }

  .app-rail nav {
    flex-direction: column;
    overflow-x: visible;
  }

  .app-rail nav a {
    width: 4.25rem;
  }

  .app-rail-foot {
    margin-top: auto;
    margin-left: 0;
  }

  .app-konto {
    inset: auto auto var(--space-3) calc(5.25rem + var(--space-3) + var(--space-2));
  }

  .app-panel {
    gap: var(--space-4);
    padding: var(--space-4) var(--space-3) var(--space-3);
    overflow-y: auto;
  }
}

/*
 * Maude-siden (alternativ B, eier 2026-09-19). Én innholdskolonne: alt står i
 * samme wrapper, med samme høyrekant. Fargene er dashbordets egne tokens.
 */
body > main:has(> .maude-wrap) {
  padding: 0;
}

body > main > .maude-wrap {
  width: 100%;
  max-width: 67.5rem;
  box-sizing: border-box;
  padding: 2.5rem 3rem;
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

/*
 * Bred skjerm, variant B (eier 2026-09-22, tillegget, skisse BredB.dc.html).
 * Venstre = det eier ber Maude om (hovedinnholdet, uendret bredde). Høyre
 * kolonne = det hun har sett og gjort: fast bredde, bare når det er plass til
 * den uten å trenge hovedinnholdet — under ca. 1500 px faller den ned under,
 * i vanlig flyt (ingen egen media-regel trengs for det: .maude-bred er en
 * kolonne som standard, og blir en rad først ved bredden under).
 */
@media (min-width: 93.75rem) {
  body > main > .maude-wrap {
    max-width: 90rem;
  }
}

.maude-bred {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.maude-hoved {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.maude-bred-kolonne {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 93.75rem) {
  .maude-bred {
    flex-direction: row;
    align-items: flex-start;
  }

  .maude-hoved {
    flex: 1 1 0;
  }

  .maude-bred-kolonne {
    flex: none;
    width: 25rem;
  }
}

.maude-idag-hode,
.maude-uken-hode {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.maude-idag-hode h2,
.maude-uken-hode h2,
.maude-ordnet h2 {
  margin: 0;
  font-size: 1.0625rem;
}

.maude-idag-dato {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.maude-idag-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.maude-idag-liste li {
  display: flex;
  gap: var(--space-3);
}

.maude-idag-tid {
  flex: none;
  width: 3rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.maude-idag-tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.maude-idag-tekst span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.maude-uken-tall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.maude-uken-tall div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.maude-uken-tall strong {
  font-size: 1.375rem;
}

.maude-uken-tall span {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.maude-uken-observasjon {
  margin: 0;
  padding: 0.75rem 0.875rem;
  background: var(--color-accent-subtle);
  border-radius: 0.75rem;
  font-size: var(--text-sm);
}

.maude-ordnet .maude-tom {
  margin: 0;
}

/* Ett kort: portrett til venstre, samtale til høyre, like høye. */
.maude-card {
  display: flex;
  align-items: stretch;
  gap: 1.75rem;
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 1rem;
}

/* Kompakt: 220×262 px (skjermbilde maude-bred-B.png, eier 2026-09-22), ned fra 240×322. */
.maude-card-figur {
  flex: none;
  width: 13.75rem;
  height: 16.375rem;
  border-radius: 0.75rem;
  background: var(--color-accent-subtle);
  object-fit: cover;
  object-position: center top;
}

.maude-card-venstre {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 13.75rem;
}

/* Bryterne har ingen tale-motor bak seg ennå (eier 2026-09-22, tillegget): viser
   slått av, med «Snart» — ikke en fungerende kontroll som lover noe hun ikke kan. */
.maude-card-verktoy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-bg) 40%, var(--color-surface));
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
}

.maude-card-bryter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.maude-card-bryter .badge {
  margin-left: auto;
}

.maude-svitsj {
  flex: none;
  width: 2rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--color-line);
}

.maude-svitsj--av::after {
  content: "";
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  margin: 0.1875rem;
  border-radius: 50%;
  background: var(--color-surface);
}

.maude-card-folger {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.maude-card-folger strong {
  color: var(--color-text);
}


/*
 * Blunk, bare i size="lg" (eier 2026-09-22 kveld, MaudeAvatar/maude-avatar.tsx).
 * Wrapperen er ren struktur: det VANLIGE bildet (ingen egen klasse her) ligger i
 * normal flyt og gir wrapperen sin størrelse — hvilken som helst klasse stedet
 * sender (i dag maude-card-figur), sitter på alle tre bildene likt, så
 * rammene alltid dekker akkurat det samme utsnittet som bildet under.
 *
 * opacity: 0 brukt med vilje her: to bilderammer som er usynlige til et blunk
 * skal vise dem — aldri innhold, en kontroll eller noe en skjermleser trenger
 * (begge har alt="" og aria-hidden, det synlige bildet er urørt). Ikke det
 * grunnreglene under vokter mot (skjult INNHOLD). tests/unit/theme-dashboard.test.ts
 * ser bort fra akkurat denne blokken.
 */
/* skjules-med-vilje:start */
.maude-avatar-blink {
  position: relative;
  display: inline-block;
}

.maude-blink-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/*
 * Et hardt bytte, ikke en glidende overtoning — et ekte blunk er raskt. Ett
 * runde-lag (12 s) med to blunk tett etter hverandre midtveis, resten spredt
 * 3 s fra hverandre — «litt random» uten skript: et tidsur i JavaScript hadde
 * krevd script-src åpnet på hver side som viser size="lg" (se maudeBlinkFrames).
 * steps(1, jump-end) holder hver verdi til neste prosent, i stedet for å blande
 * dem. Prøvd med to blunk tett etter hverandre (eier 2026-09-22 kveld): «så ikke
 * så bra ut» — bare enkeltblunk nå.
 */
@media (prefers-reduced-motion: no-preference) {
  .maude-blink-half {
    animation: maude-blink-half 12s steps(1, jump-end) infinite;
  }

  .maude-blink-closed {
    animation: maude-blink-closed 12s steps(1, jump-end) infinite;
  }
}

@keyframes maude-blink-half {
  0% {
    opacity: 0;
  }
  6.75% {
    opacity: 1;
  }
  10.25% {
    opacity: 0;
  }
  32.75% {
    opacity: 1;
  }
  36.25% {
    opacity: 0;
  }
  56.75% {
    opacity: 1;
  }
  60.25% {
    opacity: 0;
  }
  84.75% {
    opacity: 1;
  }
  88.25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes maude-blink-closed {
  0% {
    opacity: 0;
  }
  7.4% {
    opacity: 1;
  }
  8.6% {
    opacity: 0;
  }
  33.4% {
    opacity: 1;
  }
  34.6% {
    opacity: 0;
  }
  57.4% {
    opacity: 1;
  }
  58.6% {
    opacity: 0;
  }
  85.4% {
    opacity: 1;
  }
  86.6% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* skjules-med-vilje:slutt */

.maude-card-dialog {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Hilsenen som snakkeboble, bredde etter innholdet. */
.maude-card .maude-bubble {
  align-self: flex-start;
  margin: 0;
  padding: 0.875rem 1.125rem;
  background: var(--color-accent-subtle);
  border-radius: 4px 16px 16px 16px;
}

.maude-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.maude-card-help {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 56.25rem) {
  .maude-card {
    flex-direction: column;
  }

  .maude-card-venstre {
    width: 100%;
    max-width: 15rem;
    align-self: center;
  }

  .maude-card-figur {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

/* Funn og forslag ligger rett på sidebakgrunnen, uten kort rundt. */
.maude-section h2 {
  margin: 0 0 var(--space-1);
  font-size: 1.25rem;
  font-weight: 700;
}

.maude-section-help {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.maude-ideas-form {
  margin: 0;
}

/* To kolonner, kort og kompakt (skjermbilde maude-bred-B.png, eier 2026-09-22): bare
   tittel og en liten pil, ingen undertekst — hun sier hvorfor når du spør. Hele tittelen
   står, over flere linjer om den må (2.2c, eier: «ting du kan spørre om synes nesten ikke»). */
.maude-ideas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.maude-more {
  margin-top: var(--space-4);
}

.maude-more > summary {
  list-style: none;
  cursor: pointer;
}

.maude-more[open] > summary {
  margin-bottom: var(--space-4);
}

/* Hele forslaget er én knapp. Bunnlinjen havner likt fordi teksten vokser. */
.maude-idea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.875rem;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.maude-idea:hover {
  border-color: var(--color-accent);
}

.maude-idea-title {
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.maude-idea-go {
  flex: none;
  color: var(--color-accent);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 37.5rem) {
  .maude-ideas {
    grid-template-columns: minmax(0, 1fr);
  }

  body > main > .maude-wrap {
    padding: var(--space-5) var(--space-4);
  }
}

/*
 * Felles for Statistikk-siden, Oversikten, Kom i gang og Tips: full bredde,
 * merker, fremdriftslinjen, sirklene foran et steg, og tallkortene. Grønt er
 * dashbordets success-token og bæres bare av «ferdig» og «live».
 * (Var Oversikten med to faner, til 2026-09-21.)
 */
body > main:has(> .overview-wrap) {
  padding: 0;
}

/* Full bredde (sidemenyen, 2026-09-20). */
body > main > .overview-wrap {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 2rem 2.5rem;
  display: grid;
  gap: 1.75rem;
  align-content: start;
}

.pill {
  display: inline-flex;
  align-items: center;
  height: 1.625rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.pill--success {
  gap: 0.5rem;
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.pill--success::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-success);
}

.card-label {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Fremdriftslinjen er et ekte progress-element: grønn, og lest opp av skjermleser. */
.checklist-bar {
  display: block;
  width: 100%;
  height: 0.625rem;
  margin: var(--space-3) 0 var(--space-2);
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-bg) 70%, var(--color-border));
  accent-color: var(--color-success);
  appearance: none;
}

.checklist-bar::-webkit-progress-bar {
  background: color-mix(in srgb, var(--color-bg) 70%, var(--color-border));
}

.checklist-bar::-webkit-progress-value {
  background: var(--color-success);
  border-radius: 999px;
}

.checklist-bar::-moz-progress-bar {
  background: var(--color-success);
  border-radius: 999px;
}

.check-icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

.check-icon circle {
  fill: var(--color-surface);
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.check-icon--done circle {
  fill: var(--color-success);
  stroke: none;
}

.check-icon--done path {
  fill: none;
  stroke: var(--color-on-success);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.link-button {
  min-height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 56.25rem) {
  body > main > .overview-wrap {
    padding: var(--space-5) var(--space-4);
  }
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Eksempelkort: stiplet ramme i advarselsfargen og et merke med ekte tekst. */
.stat-card--example {
  position: relative;
  border: 2px dashed var(--color-warning);
}

.example-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-warning-subtle);
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: 700;
}

.stat-card .card-label {
  margin-bottom: var(--space-1);
}

.stat-number {
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stat-number--text {
  font-size: 1.5rem;
}

.stat-sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.stat-up {
  color: var(--color-success);
}

.stat-down {
  color: var(--color-danger);
}

.bars {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
}

.bar {
  fill: color-mix(in srgb, var(--color-accent) 22%, var(--color-surface));
}

.bar--today {
  fill: var(--color-accent);
}

.bar-label {
  fill: var(--color-text-muted);
  font-size: 9px;
}

.stat-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.stat-list li {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 56.25rem) {
  .stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * Oversikten (eier 2026-09-21, skisse G4 tegnet i 1440×900): alt på én skjerm
 * uten rulling ved 1440×900 og større. Høydene er budsjettert: topprad 2.75 rem,
 * hilsen 3 rem, felt 4 rem, forslag 2.5 rem, stripe 3.5 rem, og kolonnene med
 * inntil tre rader. Er vinduet lavere enn 900 px, forsvinner forslagene først,
 * så stripa (media-reglene nederst) — først etter det får siden rulle.
 * Utseendet før omleggingen: git-merket oversikt-for-omlegging-2026-09-21.
 */
body > main:has(> .hjem) {
  padding: 0;
  gap: 0;
}

body > main > .hjem {
  /*
   * Luften vokser med vinduet (eier 2026-09-21: «alt er trengt opp i øvre del»):
   * null ved 900 px høyde, der alt akkurat får plass, og opptil 4 rem på store
   * skjermer. Maude-feltet får det meste av den, og står da lenger ned på siden.
   */
  --hjem-luft: clamp(0rem, calc((100vh - 56.25rem) * 0.45), 4rem);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  display: grid;
  gap: calc(0.75rem + var(--hjem-luft) / 4);
  align-content: start;
  padding: 1.25rem 2.5rem 1rem;
}

/* Toppraden: merket til venstre, «Maude er klar» midt i, knappene til høyre. */
.hjem-topp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  max-width: none;
  margin: 0;
  padding: 0;
}

.hjem-klar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 0;
  margin: 0;
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
}

.hjem-klar .icon {
  width: 1rem;
  height: 1rem;
}

.hjem-topp-knapper {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.hjem-kig-knapp .ring {
  width: 1.375rem;
  height: 1.375rem;
}

/* Fremdriftsringen: sporet i kantfargen, det gjorte i grønt. */
.ring {
  flex: none;
  width: 2rem;
  height: 2rem;
}

.ring-spor {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 3;
}

.ring-fylt {
  fill: none;
  stroke: var(--color-success);
  stroke-width: 3;
  stroke-linecap: round;
}

.ring-tekst {
  fill: var(--color-text);
  font-size: 7px;
  font-weight: 700;
}

/* Maude-feltet, sentrert. */
.hjem-maude {
  display: grid;
  justify-items: center;
  gap: calc(0.75rem + var(--hjem-luft) / 4);
  max-width: none;
  margin: 0;
  padding-block: var(--hjem-luft) calc(var(--hjem-luft) / 2);
}

.hjem-maude h1 {
  margin: 0;
  font-size: 2.125rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: center;
}

/*
 * Rammen rundt Oversiktens spørrefelt. Selve feltet er MaudeComposer
 * (maude-composer), som bærer kant, skygge og fokusring.
 */
.hjem-felt {
  position: relative;
  width: min(100%, 42.5rem);
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

/* Ingen kolonne får vokse av innholdet sitt: et langt ord i feltet skjøv alt til høyre (eier 2026-09-21). */
body > main > .hjem > * {
  min-width: 0;
}

/* Forslagene: inntil fire på én linje. Knapper i et GET-skjema — ingen skript. */
.hjem-forslag {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
}

.hjem-forslag .chip {
  min-height: 2.5rem;
  cursor: pointer;
}

/* Kom i gang-stripa: én lav, grønn linje. */
.hjem-stripe {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.5rem;
  max-width: none;
  margin: 0;
  padding: 0.375rem 0.5rem 0.375rem 1rem;
  background: var(--color-success-subtle);
  border: var(--border-width) solid color-mix(in srgb, var(--color-success) 30%, var(--color-border));
  border-radius: 0.875rem;
}

.hjem-stripe-tekst {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0;
  min-width: 0;
}

.hjem-stripe-tekst span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.hjem-stripe-knapp {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-surface);
}

.hjem-stripe form {
  margin: 0;
}

.hjem-stripe .link-button {
  min-height: 2.75rem;
  padding: 0 var(--space-2);
  text-decoration: none;
}

.hjem-stripe .link-button:hover {
  text-decoration: underline;
}

/* To kolonner: 60 / 40. */
.hjem-kolonner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: start;
  max-width: none;
}

.hjem-venstre,
.hjem-hoyre {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

/* Kortene på Oversikten er tettere enn de vanlige. */
.hjem-venter,
.hjem-epost {
  padding: 0;
}

.hjem-kort-hode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3rem;
  padding: 0 1rem;
}

.hjem-venter .hjem-kort-hode,
.hjem-epost .hjem-kort-hode {
  border-bottom: var(--border-width) solid var(--color-border);
}

.hjem-kort-hode h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.0625rem;
}

.hjem-kort-hode h2 .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-accent);
}

.hjem-kort-hode .text-link {
  min-height: 2.25rem;
}

.hjem-antall {
  color: var(--color-text-muted);
  font-weight: 500;
}

.hjem-tom {
  margin: 0;
  padding: 1rem;
  color: var(--color-text-muted);
}

/* «Trenger deg nå»: rader med ikon, tekst og knappene under teksten. */
.venter-rader {
  margin: 0;
  padding: 0;
  list-style: none;
}

.venter-rad {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.625rem 1rem;
}

.venter-rad + .venter-rad {
  border-top: var(--border-width) solid var(--color-border);
}

.venter-ikon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.venter-ikon .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.venter-tekst {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.125rem;
}

.venter-type {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.venter-tittel {
  font-size: 1rem;
}

.venter-linje {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.venter-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.venter-fjern {
  margin: 0;
}

.venter-fjern .icon-button {
  width: 2.25rem;
  height: 2.25rem;
}

/* «La Maude hjelpe til»: myk aksentflate, samme høyde som sekundærknappen. */
.button--maude {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 700;
}

.button--maude:hover {
  border-color: var(--color-accent);
}

.button--maude .icon {
  width: 1rem;
  height: 1rem;
}

/* Én smal linje under lista: «Maude har N tips til nettsiden». */
.hjem-tipslinje {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  background: var(--color-accent-subtle);
  border-radius: 0.75rem;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.hjem-tipslinje:hover {
  text-decoration: underline;
}

.hjem-tipslinje .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent);
}

.hjem-tipslinje-tekst {
  flex: 1 1 auto;
}

.hjem-tipslinje-gaa {
  color: var(--color-accent);
}

/* «Siste 7 dager»: tre små kort på rad, ca. 84 px høye. */
.hjem-tall {
  display: grid;
  gap: 0.25rem;
}

.hjem-tall .hjem-kort-hode {
  min-height: 2.25rem;
  padding: 0;
}

.hjem-tallrad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.hjem-tallkort {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.125rem;
  min-height: 5.25rem;
  padding: 0.625rem 0.75rem;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
}

.hjem-tall-etikett {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.hjem-tallkort .stat-number {
  font-size: 1.5rem;
  line-height: 1.2;
}

.hjem-tallkort .stat-number--text {
  font-size: 1.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hjem-tall-verdi {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}

.mini-bars {
  flex: none;
  width: 3.875rem;
  height: 1.5rem;
}

.hjem-tallkort .stat-sub {
  font-size: 0.75rem;
}

.hjem-tallkort .example-badge {
  top: 0.25rem;
  right: 0.25rem;
  font-size: 0.6875rem;
}

.hjem-tall-note {
  margin: 0.25rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/*
 * Eksempelvisningen (eier 2026-09-21): hele Oversikten med eksempeldata. Stripa øverst sier
 * det i klartekst, og hvert tallkort har sitt eget merke — farge alene ville ikke vært nok.
 */
/* Hele toppraden blir gul mens eksempelvisningen er på. */
.hjem-topp--demo {
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  background: var(--color-warning-subtle);
  border: 2px dashed var(--color-warning);
  border-radius: 0.875rem;
}

.demo-stripe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-width: 0;
}

.demo-stripe form {
  margin: 0;
}

.demo-merke {
  flex: none;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--color-warning);
  color: var(--color-on-warning);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.demo-tekst {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-merke,
.demo-stripe .button {
  flex: none;
}

/* Knappen som slår eksempelvisningen på. Står der siden er tom, og ved tallene. */
.demo-start {
  display: inline;
  margin: 0;
}

.demo-start button {
  margin-left: 0.5rem;
}

.demo-valg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
}

.demo-valg form {
  margin: 0;
}

/* «I dag»: dagens dato og åpningstiden. Her kommer kalenderen senere. */
.hjem-idag {
  padding: 0;
}

.hjem-idag .hjem-kort-hode {
  border-bottom: var(--border-width) solid var(--color-border);
}

.hjem-idag-linje {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.875rem;
  margin: 0;
  padding: 0 1rem;
}

.hjem-idag-dato {
  font-weight: 700;
}

.hjem-idag-apning {
  font-size: var(--text-sm);
  font-weight: 700;
}

.hjem-idag-apning--apent {
  color: var(--color-success);
}

.hjem-idag-apning--stengt,
.hjem-idag-apning--mangler {
  color: var(--color-text-muted);
}

/* E-postkortet: én linje per e-post, når de finnes. */
.epost-rader {
  margin: 0;
  padding: 0;
  list-style: none;
}

.epost-rad {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0 1rem;
  font-size: var(--text-sm);
}

.epost-rad + .epost-rad {
  border-top: var(--border-width) solid var(--color-border);
}

.epost-avsender {
  font-weight: 700;
}

.epost-rad--ulest::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-accent);
}

.epost-emne {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.epost-tid {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/*
 * Lavere vinduer (eiers punkt 1.5, 2026-09-21): forslagene forsvinner først, så
 * stripa. Deretter ruller siden. Dette er det ENESTE stedet stilarket skjuler
 * noe, og det er med vilje: begge finnes et annet sted (forslagene på
 * Maude-siden, stripa som knappen «Kom i gang» i toppraden).
 * tests/unit/theme-dashboard.test.ts ser bort fra akkurat denne blokken.
 */
/* skjules-med-vilje:start */
@media (max-height: 56.1875rem) {
  .hjem-forslag {
    display: none;
  }
}

@media (max-height: 52.5rem) {
  .hjem-stripe {
    display: none;
  }
}
/* skjules-med-vilje:slutt */

@media (max-width: 62.5rem) {
  .hjem-kolonner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hjem-topp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  body > main > .hjem {
    padding: var(--space-4);
  }
}

/*
 * «Kom i gang» (skisse H2) og «Tips fra Maude» (skisse I2): samme form.
 * En liste med grupper til venstre, Maude-kortet til høyre.
 */
body > main > .kig {
  width: 100%;
  max-width: none;
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.page-eyebrow {
  margin: 0 0 0.25rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.page-head-action {
  flex: none;
}

.page-head-action form {
  margin: 0;
}

.kig-fremdrift {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.kig-fremdrift .checklist-bar {
  flex: 1 1 auto;
  margin: 0;
}

.kig-fremdrift-tall {
  flex: none;
  font-size: var(--text-sm);
  font-weight: 700;
}

.steg-kolonner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18.25rem;
  gap: var(--space-4);
  align-items: start;
}

.card--tett {
  padding: 0;
}

.steg-gruppe {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem 1.25rem;
  border-bottom: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.steg-gruppe + .steg-gruppe,
ul + .steg-gruppe,
p + .steg-gruppe {
  border-top: var(--border-width) solid var(--color-border);
}

.steg-gruppe-antall {
  color: var(--color-text);
  letter-spacing: 0;
}

.steg-rader {
  margin: 0;
  padding: 0;
  list-style: none;
}

.steg-rad {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 4rem;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
}

.steg-rad + .steg-rad,
.steg-rader + .steg-gruppe {
  border-top: var(--border-width) solid var(--color-border);
}

.steg-tekst {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.125rem;
}

.steg-tittel {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.steg-tittel .badge {
  font-size: 0.75rem;
}

.steg-rad--gjort .steg-tittel,
.steg-rad--fjernet .steg-tittel {
  color: var(--color-text-muted);
}

.steg-linje {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.steg-knapper {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.steg-knapper form {
  margin: 0;
}

.steg-knapper .button .icon {
  width: 1rem;
  height: 1rem;
}

.steg-note {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.steg-note .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-success);
}

.steg-fjern {
  margin: 0;
}

.steg-tom {
  margin: 0;
  padding: 0.875rem 1.25rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.steg-liste > :last-child {
  border-bottom: 0;
}

/* Maude-kortet i høyre kolonne: mørkt som menyen, med det hun tilbyr og én knapp. */
.maude-aside {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--color-menu-bg);
  color: var(--color-menu-text);
  border-radius: 1.25rem;
}

.maude-aside p {
  margin: 0;
}

.maude-aside-hvem {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-menu-active);
  font-weight: 700;
}

.maude-aside-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--color-menu-accent);
  color: var(--color-menu-on-active);
}

.maude-aside-ikon .icon {
  width: 1rem;
  height: 1rem;
}

.maude-aside-overskrift {
  color: var(--color-menu-active);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.maude-aside-tekst {
  color: var(--color-menu-text-muted);
  font-size: var(--text-sm);
}

.button--lys {
  background: var(--color-menu-accent);
  border-color: var(--color-menu-accent);
  color: var(--color-menu-on-active);
}

.button--lys .icon {
  width: 1rem;
  height: 1rem;
}

.kig-fotnote {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.kig-fotnote .icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* Tallet på «Tips fra Maude» i menyen. */
.app-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--color-menu-accent);
  color: var(--color-menu-on-active);
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 56.25rem) {
  .steg-kolonner {
    grid-template-columns: minmax(0, 1fr);
  }

  .steg-rad {
    flex-wrap: wrap;
  }

  .steg-knapper {
    width: 100%;
    justify-content: flex-start;
    padding-left: 2.375rem;
  }
}

/*
 * Det felles seksjonsskjemaet (redigeringsmodus 2, punkt 5 i INTEGRASJON.md): bildevelger,
 * delene i en seksjon med flere bokser, og utformingsvalgene. Samme regler som i
 * redigeringspanelet (themes/rediger.ts), bundet til dashbordets tokens — aldri
 * fargeverdier her (0.8a).
 */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.375rem;
  max-height: 18rem;
  margin-bottom: 0.375rem;
  padding: 2px;
  overflow-y: auto;
}

.asset-option {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--border-width) solid var(--color-line);
  border-radius: 0.5rem;
  background: var(--color-field);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.asset-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Radioen dekker hele kortet, men vises ikke: kortet selv (kanten, haken) er valget. */
.asset-option input[type="radio"] {
  position: absolute;
  inset: 0;
  margin: 0;
  clip-path: inset(50%);
  cursor: pointer;
}

.asset-option input[type="checkbox"] {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
}

.asset-option .badge {
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
}

.asset-option:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.asset-option:has(input:checked) img {
  opacity: 0.85;
}

.asset-option:has(input:disabled) {
  cursor: default;
}

.asset-option:has(input:disabled) img {
  opacity: 0.35;
}

/* Delene i en seksjon med flere bokser: hver del er et lite kort. */
.items {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.item {
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
  background: var(--color-surface);
}

.item-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  font-weight: 700;
}

.item-body {
  padding: var(--space-3) var(--space-3) 0;
}

.item-manage {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}

/* Utformingsvalgene: en rad med små knapper, det valgte markert med kant og flate. */
.look {
  margin: 0 0 var(--space-3);
}

.look-options {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.25rem;
}

.look--background .look-options,
.look--font .look-options {
  grid-auto-flow: row;
  grid-template-columns: repeat(4, 1fr);
}

.look-option {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.2rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.25rem;
  border: var(--border-width) solid var(--color-line);
  border-radius: 0.5rem;
  background: var(--color-surface);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.look-option input {
  position: absolute;
  inset: 0;
  margin: 0;
  clip-path: inset(50%);
  cursor: pointer;
}

.look-option:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.look-option:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--color-focus);
}

.look-sketch {
  width: 1.5rem;
  height: 1rem;
  fill: currentColor;
}

.look-swatch {
  width: 1.75rem;
  height: 1.125rem;
  border: var(--border-width) solid var(--color-line);
  border-radius: 0.25rem;
}

.look-swatch--auto {
  background: linear-gradient(135deg, transparent 46%, var(--color-danger) 46% 54%, transparent 54%);
}

.look-swatch--surface,
.look-swatch--white,
.look-swatch--text-light {
  background: var(--color-surface);
}

.look-swatch--subtle {
  background: var(--color-accent-subtle);
}

.look-swatch--accent,
.look-swatch--text-accent {
  background: var(--color-accent);
}

.look-swatch--text-dark {
  background: var(--color-text);
}

.look-swatch--text-auto {
  background: linear-gradient(90deg, var(--color-text) 50%, var(--color-surface) 50%);
}

.look-swatch--text-custom {
  background: conic-gradient(
    var(--color-danger),
    var(--color-warning),
    var(--color-success),
    var(--color-info),
    var(--color-accent),
    var(--color-danger)
  );
}

.look-target {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
  background: var(--color-field);
}

.look-target > h3 {
  margin: 0 0 var(--space-2);
}

.look-maal .look-options {
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
}

/*
 * «Hva vil du endre?» (seksjonen / alle boksene / boks N) viser én del om gangen —
 * de andre er ikke skjult innhold, de er de andre fanene. Samme sak for fargefeltet,
 * som bare finnes når «Egen farge» er valgt. Testen ser bort fra det merkede.
 */
/* skjules-med-vilje:start */
.look-target:has(.look-maal) .look-panel {
  display: none;
}

.look-target:has(.look-mal--1:checked) .look-panel--1,
.look-target:has(.look-mal--2:checked) .look-panel--2,
.look-target:has(.look-mal--3:checked) .look-panel--3,
.look-target:has(.look-mal--4:checked) .look-panel--4,
.look-target:has(.look-mal--5:checked) .look-panel--5,
.look-target:has(.look-mal--6:checked) .look-panel--6 {
  display: block;
}

.look-select {
  display: grid;
  grid-template-columns: 1fr 11rem;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.look-select + .look-color {
  display: none;
}
/* skjules-med-vilje:slutt */

.look-select:has(option[value="custom"]:checked) + .look-color {
  display: grid;
}

/* «Utforming» er lukket til man ber om den: skjemaet er langt nok fra før. */
.look-fold {
  margin: 0 0 var(--space-3);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
}

.look-fold > summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}

.look-fold[open] > summary {
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-3);
}

.type-card-icon--sketch {
  width: 2.5rem;
  height: 1.75rem;
  fill: currentColor;
}

/* Statistikk-siden. */
.stats-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.day-chart {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
}

.stat-list--ranked {
  padding-left: 0;
  list-style: none;
}

.shares {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.share-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

.share-bar {
  display: block;
  width: 100%;
  height: 0.5rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-bg) 70%, var(--color-border));
  appearance: none;
}

.share-bar::-webkit-progress-bar {
  background: color-mix(in srgb, var(--color-bg) 70%, var(--color-border));
}

.share-bar::-webkit-progress-value {
  background: var(--color-accent);
  border-radius: 999px;
}

.share-bar::-moz-progress-bar {
  background: var(--color-accent);
  border-radius: 999px;
}

@media (max-width: 56.25rem) {
  .stats-grid--two {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Bare for skjermlesere: ligger i siden, men er ikke synlig. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * Utseende (UTSEENDE-SPEC v3, 2026-09-20): galleri til venstre, fast forhåndsvisning til høyre, hele
 * bredden og nøyaktig én skjermhøyde. Bare to ting ruller: galleriet og nettsiden i forhåndsvisningen.
 * Fargene i miniatyrer og prikker settes av skriptet som --p-*; her står ingen fargekoder.
 */
body > main:has(> .utseende-wrap) {
  /* Ikke rutenett: da får innholdet auto-høyde og siden vokser forbi skjermen. */
  display: block;
  padding: 0;
  height: 100dvh;
  overflow: hidden;
}

body > main > .utseende-wrap {
  /* Slipper lesebredden (72 rem) som alle andre sider har: denne siden bruker hele flaten. */
  max-width: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  padding: var(--space-3) clamp(12px, 1.5vw, 24px) 0;
}

.uhead {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.utseende-title {
  margin: 0;
  font-size: 1.625rem;
}

.lb {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Modusbryter og valggrupper: to eller flere valg i en pille. */
.mode,
.dev,
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  justify-self: start;
  padding: 0.1875rem;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 999px;
}

.mode a,
.dev button,
.seg button {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.mode a {
  min-height: 2.5rem;
  padding: 0 1.125rem;
}

.mode a:hover,
.dev button:hover,
.seg button:hover {
  color: var(--color-text);
}

.mode a[aria-current],
.dev button[aria-pressed="true"],
.seg button[aria-pressed="true"],
.seg button[aria-checked="true"] {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 700;
}

.umain {
  display: grid;
  flex: 1;
  grid-template-columns: clamp(400px, 28vw, 500px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 0;
}

/* Venstre kolonne: valg øverst (fast), galleriet under (ruller). */
.uleft {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}

.ufixed {
  display: grid;
  flex: none;
  gap: var(--space-3);
}

.utwo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

.ugal {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.25rem 0.25rem var(--space-3);
}

/* Stilbokser og palettkort: hvile, hover og valgt (aldri farge alene: kant, hake og vekt). */
.themes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.375rem;
}

.opt {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0.3125rem;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.opt:hover,
.opt.peek,
.opt:focus-visible {
  border-color: var(--color-text);
}

.opt[aria-checked="true"] {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.opt .tick {
  position: absolute;
  top: -0.4375rem;
  right: -0.4375rem;
  z-index: 1;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: center;
  transform: scale(0);
}

.opt[aria-checked="true"] .tick {
  transform: scale(1);
}

.themes .opt .name {
  display: block;
  margin-top: 0.25rem;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.newcard {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.5rem;
  border-style: dashed;
  color: var(--color-text-muted);
  font-weight: 700;
  text-align: center;
}

.newcard small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 400;
}

.empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-text-muted);
}

/* Palettkortet: en liten forside tegnet 760 px bredt og skalert ned. */
.pcard .mini {
  display: block;
  position: relative;
  aspect-ratio: 760 / 470;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--color-bg);
}

.pcard .mini iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 760px;
  height: 470px;
  border: 0;
  transform-origin: top left;
  pointer-events: none;
}

.pcard .ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: 0.375rem;
}

.pcard .nm {
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Én linje under «Farger»: hva som kan slettes, og hvordan. */
.utseende-hint {
  margin: -0.25rem 0 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* Seksjoner med egne farger: én dempet linje over velgeren, ikke en boks. */
.utseende-egne {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.utseende-egne form {
  display: inline;
  margin: 0;
}

.utseende-egne form::before {
  content: " · ";
}

.utseende-egne a,
.utseende-egne .link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Dine paletter: merket, og slett rett på kortet (eier 2026-09-22). */
.pwrap {
  position: relative;
  display: block;
  min-width: 0;
}

.pwrap .pcard {
  width: 100%;
}

.pcard .own-tag {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  z-index: 1;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pdel {
  position: absolute;
  right: 0.375rem;
  bottom: 0.375rem;
  width: 1.75rem;
  height: 1.75rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.pdel:hover,
.pdel:focus-visible {
  border-color: var(--color-danger, var(--color-text));
  color: var(--color-danger, var(--color-text));
}

.chips {
  display: inline-flex;
}

.chips span {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: -0.25rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
}

/* Miniatyren av en stil: en skjematisk tegning i valgt palett. */
.thumb {
  display: flex;
  gap: 0.25rem;
  height: 3.25rem;
  padding: 0.375rem;
  overflow: hidden;
  background: var(--p-bg);
  border-radius: 0.375rem;
}

.thumb--v {
  flex-direction: column;
}

.thumb i {
  display: block;
  flex: none;
  background: var(--p-text);
  border-radius: 2px;
  opacity: 0.85;
}

.thumb i.a {
  background: var(--p-accent);
  opacity: 1;
}

.thumb i.s {
  background: var(--p-surface);
  opacity: 1;
}

.thumb .col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.1875rem;
  justify-content: center;
  min-width: 0;
}

.thumb .col--c {
  align-items: center;
}

.thumb .col--fixed {
  flex: none;
}

.thumb .col--top {
  justify-content: flex-start;
}

.thumb .rw {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.thumb .rw > .col {
  gap: 0.1875rem;
}

.thumb i.t-fill {
  flex: 1;
}

.thumb i.t-end {
  margin-left: auto;
}

.t-w16 { width: 16%; }
.t-w18 { width: 18%; }
.t-w36 { width: 36%; }
.t-w40 { width: 40%; }
.t-w44 { width: 44%; }
.t-w50 { width: 50%; }
.t-w55 { width: 55%; }
.t-w58 { width: 58%; }
.t-w60 { width: 60%; }
.t-w80 { width: 80%; }
.t-w82 { width: 82%; }
.t-w85 { width: 85%; }
.t-h4 { height: 3px; }
.t-h5 { height: 4px; }
.t-h6 { height: 4px; }
.t-h7 { height: 5px; }
.t-h8 { height: 5px; }
.t-h9 { height: 6px; }
.t-h16 { height: 10px; }
.t-h26 { height: 16px; }
.t-h30 { height: 18px; }
.t-px16 { width: 10px; height: 10px; }
.t-px26 { width: 16px; height: 16px; }
.tr0 { border-radius: 0; }
.tr2 { border-radius: 2px; }
.tr7 { border-radius: 5px; }
.tr-arch { border-radius: 14px 14px 2px 2px; }
.tr-circle { align-self: center; width: 26px; height: 26px; border-radius: 50%; }
.br0 { border-radius: 0; }
.br2 { border-radius: 2px; }
.br8 { border-radius: 4px; }
.br9 { border-radius: 6px; }

/* Høyre kolonne: verktøylinje, fargepanel og selve forhåndsvisningen. */
.uright {
  min-height: 0;
}

.frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.875rem;
}

.frame-bar {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 0.25rem 0.875rem;
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--text-sm);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
}

.tabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
}

.tabs button:hover {
  color: var(--color-text);
}

.tabs button[aria-pressed="true"] {
  color: var(--color-text);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.sp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.badge.show {
  padding: 0.125rem 0.625rem;
  background: var(--color-accent-subtle);
  border-radius: 999px;
  color: var(--color-accent);
  font-weight: 700;
}

.lock {
  width: 0.75rem;
  height: 0.75rem;
}

.ownp-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0.875rem;
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}

.ownp-in label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ownp-in input[type="color"] {
  width: 2.5rem;
  height: 2rem;
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.375rem;
}

.ownp-in .more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.ownrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  width: 100%;
}

.msg {
  width: 100%;
  margin: 0;
  font-size: var(--text-sm);
}

.msg.no {
  color: var(--color-danger);
  font-weight: 700;
}

.locked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-accent-subtle);
  border-bottom: var(--border-width) solid var(--color-border);
  color: var(--color-accent);
  font-size: 0.8125rem;
}

.locked .button {
  margin-left: auto;
}

.stage {
  display: flex;
  flex: 1;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  background: var(--color-bg);
}

.stage-frame {
  width: min(100%, 1400px);
  height: 100%;
  border: 0;
  background: var(--color-surface);
}

.stage--mobile .stage-frame {
  width: 360px;
  max-width: 100%;
}

/* Fast lagrelinje nederst i full bredde. */
.save {
  flex: none;
  padding: 0.75rem 0 1rem;
}

.save-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.875rem;
}

.save-in p {
  margin: 0;
  font-size: var(--text-sm);
}

.save-actions {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0 auto;
}

/* Ingen display her: elementet har hidden, og en display-regel ville overstyrt det. */
.save-btns .button {
  margin: 0 0 0 0.5rem;
}

/* Smal skjerm: forhåndsvisningen fast øverst, valgene ruller under. */
@media (max-width: 56.25rem) {
  .umain {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 42% minmax(0, 1fr);
  }

  .uright {
    order: -1;
  }

  .uleft {
    overflow-y: auto;
  }

  .ugal {
    flex: none;
    overflow: visible;
  }

  .themes {
    display: flex;
    overflow-x: auto;
    padding: 0.25rem;
  }

  .themes .opt {
    flex: none;
    width: 5.5rem;
  }

  .grid {
    display: flex;
    overflow-x: auto;
    padding: 0.25rem;
  }

  .grid .opt {
    flex: none;
    width: 9.5rem;
  }
}

/*
 * Maude-siden, runde 2 (skissene Side2 og Veivisere, 2026-09-22). Hilsenen og
 * forslagsknappene står i kortet ved siden av portrettet; under det kommer
 * «Viktigst akkurat nå» og varsler side om side, så påminnelsene, veiviserne,
 * forslagene og løftet. Bare tokens, ingen egne fargeverdier.
 */
.maude-hilsen {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Tydelig nok til å bli sett (2.2c): vanlig tekstfarge og brødtekststørrelse, ikke grå og liten. */
.maude-forslag-blokk h3 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}

/* Det hun sier tilbake etter en påminnelse, eller spørsmålet «Når?». */
.maude-flash {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--color-accent-subtle);
  border-radius: 0.75rem;
  font-weight: 600;
}

.maude-flash--spor {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.maude-flash-rad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.maude-flash-rad input {
  flex: 1 1 14rem;
  width: auto;
}

.maude-rad {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 56.25rem) {
  .maude-rad {
    grid-template-columns: minmax(0, 1fr);
  }
}

.maude-etikett {
  margin: 0 0 var(--space-2);
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.maude-viktigst h2,
.maude-varsler h2 {
  margin: 0 0 var(--space-1);
  font-size: 1.25rem;
}

.maude-viktigst p {
  margin: 0 0 var(--space-3);
}

.maude-tom {
  margin: 0;
  color: var(--color-text-muted);
}

.maude-viktigst-knapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.maude-ikke-na {
  margin: 0;
}

/* «Kom i gang»-stegene som en liten fremdriftsrad under kortet. */
.maude-steg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.maude-steg-rad {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 8rem;
  flex: 1 1 8rem;
  padding: 0.5rem 0.75rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
  font-size: var(--text-sm);
}

.maude-steg-nr {
  font-weight: 700;
}

.maude-steg-status {
  color: var(--color-text-muted);
}

.maude-steg-rad--done .maude-steg-status {
  color: var(--color-success);
  font-weight: 700;
}

.maude-varsler-hode {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.maude-varsel-liste {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.maude-varsel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.625rem 0.75rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
  color: var(--color-text);
  text-decoration: none;
}

.maude-varsel:hover {
  border-color: var(--color-accent);
}

.maude-varsel-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.maude-varsel-tekst {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.maude-varsel-tekst span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Påminnelser: kalenderen som liste, med «Gjort» på hver. */
.paminnelser {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.paminnelse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
}

.paminnelse form {
  margin: 0;
}

.paminnelse-tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.paminnelse-tid {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.paminnelse--forfalt {
  border-color: var(--color-accent);
}

.paminnelse--forfalt .paminnelse-tid {
  color: var(--color-accent);
  font-weight: 700;
}

/* Veiviserne: tre grupper med flater, og «Ferdig (n)» som én sammenslått rad. */
.veiviser-gruppe {
  margin-top: var(--space-4);
}

.veiviser-gruppe h3 {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
}

.veiviser-flater {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-2);
}

.veiviser-flis {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
  color: var(--color-text);
  text-decoration: none;
}

a.veiviser-flis:hover {
  border-color: var(--color-accent);
}

.veiviser-flis--snart {
  color: var(--color-text-muted);
}

.veiviser-navn {
  font-weight: 700;
}

.veiviser-status {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.veiviser-status--done {
  color: var(--color-success);
  font-weight: 700;
}

.veiviser-ferdig {
  margin-top: var(--space-4);
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.75rem;
}

.veiviser-ferdig summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: 700;
}

.veiviser-ferdig-liste {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: var(--text-sm);
}

.veiviser-ferdig .veiviser-flater {
  margin-top: var(--space-3);
}

.maude-forslag-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.maude-forslag-rad h2 {
  margin: 0 0 var(--space-1);
  font-size: 1.125rem;
}

.maude-forslag-rad p {
  margin: 0;
  color: var(--color-text-muted);
}

.maude-lofte {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Kalenderrader i popupen: samme rad som varsler, med et lite klokkeikon. */
.maude-row-ikon {
  display: inline-flex;
  flex: none;
  color: var(--color-text-muted);
}

.maude-row-ikon .icon {
  width: 1rem;
  height: 1rem;
}

/*
 * Veiviser-overlegget (BRIEF §8b, eier 2026-09-22): Maude peker på ting i
 * dashbordet. Elementet under er urørt — dette er et eget lag oppå, tegnet av
 * veiviser-skript.ts. Dim-laget har pointer-events: none, så alt på siden
 * forblir klikkbart, også elementet hun peker på.
 */
.maude-overlegg {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.maude-overlegg-dim {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.maude-overlegg-ramme {
  position: fixed;
  border: 3px solid var(--color-accent);
  border-radius: 0.75rem;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.maude-overlegg-boble {
  position: fixed;
  width: 320px;
  max-width: calc(100vw - 1.5rem);
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 1rem;
  box-shadow: 0 1.25rem 3rem color-mix(in srgb, var(--color-text) 30%, transparent);
  pointer-events: auto;
}

.maude-overlegg-hode {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0 0 var(--space-2);
}

.maude-overlegg-hode span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.maude-overlegg-tekst {
  margin: 0 0 var(--space-3);
  line-height: 1.5;
}

.maude-overlegg-knapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

/*
 * Intervjuet «Start nettside med Maude» (BRIEF §6, eier 2026-09-22): ett
 * spørsmål om gangen, store trykkbare svar, sidepanelet «Dette har jeg
 * forstått» ved siden av.
 */
.intervju-rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 56.25rem) {
  .intervju-rad {
    grid-template-columns: minmax(0, 1fr);
  }
}

.intervju-sporsmal h1 {
  margin: 0 0 var(--space-2);
  font-size: 1.5rem;
}

.intervju-hvorfor {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.intervju-valgliste {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.intervju-valg {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.875rem 1.125rem;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0.875rem;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

a.intervju-valg:hover,
.intervju-valg:has(input:hover) {
  border-color: var(--color-accent);
}

.intervju-valg:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.intervju-valg--boks {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.intervju-valg--boks input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.intervju-valg-navn {
  font-weight: 700;
}

.intervju-valg-sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.intervju-flervalg {
  display: contents;
}

.intervju-verktoy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
}

.intervju-bygg {
  margin: var(--space-2) 0;
}

.intervju-forstatt {
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 1rem;
}

.intervju-forstatt h2 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

.intervju-forstatt ul {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.intervju-forstatt li {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: var(--text-sm);
}

.intervju-forstatt li span {
  color: var(--color-text-muted);
}

.intervju-invitt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--color-accent-subtle);
  border-radius: 1rem;
}

.intervju-invitt p {
  margin: 0;
}