/* Kun sidens egen opstilling — alt andet kommer fra i80 (components.css + theme-zplan.css). */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--i80-color-foreground-primary);
  font-family: var(--i80-typography-font-stack-text, system-ui, sans-serif);
  background: var(--i80-color-page-faint, #f4f5f8);
}

h1, h2, h3 { font-family: var(--i80-typography-font-stack-display, inherit); }

.page { max-width: 1120px; margin: 0 auto; padding: 40px 32px 72px; }

.card-body { padding: 24px; }

/* Dækningsstribe — token-baseret, samme tilgang som prototypens .swatch/.meter */
.coverage { display: grid; grid-template-columns: 56px repeat(7, 1fr); gap: 6px; }
.coverage__label { display: flex; align-items: center; }
.coverage__cell { height: 28px; background: var(--i80-color-surface-strong); border-radius: var(--i80-border-radius-small); }
.coverage__cell--low { background: var(--i80-color-palette-green-100); }
.coverage__cell--full { background: var(--i80-color-palette-green-200); }
.coverage__cell--gap { background: var(--i80-color-surface-warning); border: 1px solid var(--i80-color-border-warning); }

/* Nøgletal — mønster fra prototypens .stats/.stat */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.stat { padding: 20px; background: var(--i80-color-surface-primary); border: 1px solid var(--i80-color-border-primary); border-radius: var(--i80-border-radius-medium); }

@media (max-width: 700px) { .page { padding: 24px 16px 48px; } }