/* Drikkerloftet – mobile-first. Basisstilene er til telefon; bredere skærme
   får tilføjelser i min-width-media queries nederst i hver sektion. */

/* Skrifter (selvhostet, Fontsource, SIL OFL 1.1, kun latin-delmængden). Ingen kald til Google Fonts,
   så CSP'en forbliver stram. Licenser står i public/fonts/LICENSE.txt. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/cinzel-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/cinzel-latin-800-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}

/* Plex findes ikke tykkere end 700, så font-weight 800 og 900 vises med dette snit. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2');
}

:root {
  --ink: #13294b;
  --ink-2: #1f3b73;
  --brand: #13294b;
  --brand-2: #1f3b73;
  --brand-3: #0b1a31;
  --brand-edge: #13294b;
  --btn: #13294b;
  --on-brand: #fff;
  --on-amber: #13294b;
  --amber: #e3a82b;
  --amber-2: #b9811a;
  --focus: #8a5a0b;
  --foam: #f6efdd;
  --paper: #f7f4ec;
  --card: #ffffff;
  --line: #e4ddcc;
  --field: #ffffff;
  --field-line: #877e66;
  --subtle: #f1eee4;
  --faint: #b7ae99;
  --grid: #c8cfe0;
  --grid-2: #b9c1d6;
  --text: #1b1f2a;
  --muted: #616875;
  --ok: #1d7a45;
  --ok-bg: #e5f4ea;
  --ok-line: #bfe3cc;
  --warn: #9a6200;
  --warn-bg: #fff2d6;
  --warn-line: #f1d9a6;
  --bad: #b3261e;
  --bad-bg: #fbe6e4;
  --bad-line: #f2c4bf;
  --success: #1d7a45;
  --danger: #b3261e;
  --zone-ok: #145c33;
  --zone-ok-bg: #d8f0df;
  --zone-warn: #7a5600;
  --zone-warn-bg: #fff0bf;
  --zone-bad: #8e1d16;
  --zone-bad-bg: #f9d6d2;
  --stamp: #2a3f94;
  --stamp-bg: rgb(42 63 148 / 4%);
  --stamp-admin-bg: rgb(179 38 30 / 4%);
  --shadow: 0 1px 2px rgb(19 41 75 / 6%), 0 4px 16px rgb(19 41 75 / 6%);
  --radius: 14px;
  --tabbar-h: 64px;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-accent: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}

/* Mørk tilstand. Tokens står to gange, så den virker uden JavaScript:
   systemets præference (medmindre brugeren har valgt lys) og et eksplicit valg
   fra theme.js. Kun på skærm, så print altid er lyst. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink: #eef1f8;
    --ink-2: #9bb6ff;
    --brand: #0b1a31;
    --brand-2: #1f3b73;
    --brand-3: #060f1d;
    --brand-edge: #243a62;
    --btn: #2b4a8c;
    --on-brand: #fff;
    --on-amber: #13294b;
    --amber: #e3a82b;
    --amber-2: #d19a2c;
    --focus: #e3a82b;
    --foam: #1d2a44;
    --paper: #0c1626;
    --card: #152238;
    --line: #2b3c5c;
    --field: #0a1220;
    --field-line: #5b6b96;
    --subtle: #27334d;
    --faint: #6f7b9c;
    --grid: #35446a;
    --grid-2: #3f4e75;
    --text: #e7eaf2;
    --muted: #a6b0c6;
    --ok: #6fd69a;
    --ok-bg: #13301f;
    --ok-line: #25593b;
    --warn: #f2c15b;
    --warn-bg: #3a2c0b;
    --warn-line: #6b5217;
    --bad: #ff9a91;
    --bad-bg: #3d1a17;
    --bad-line: #70302b;
    --success: #1d7a45;
    --danger: #b3261e;
    --zone-ok: #8fe0ae;
    --zone-ok-bg: #15341f;
    --zone-warn: #f2c15b;
    --zone-warn-bg: #3a2c0b;
    --zone-bad: #ff9a91;
    --zone-bad-bg: #3d1a17;
    --stamp: #a9b8ff;
    --stamp-bg: rgb(169 184 255 / 8%);
    --stamp-admin-bg: rgb(255 154 145 / 8%);
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px rgb(0 0 0 / 25%);
    color-scheme: dark;
  }
}

@media screen {
  :root[data-theme='dark'] {
    --ink: #eef1f8;
    --ink-2: #9bb6ff;
    --brand: #0b1a31;
    --brand-2: #1f3b73;
    --brand-3: #060f1d;
    --brand-edge: #243a62;
    --btn: #2b4a8c;
    --on-brand: #fff;
    --on-amber: #13294b;
    --amber: #e3a82b;
    --amber-2: #d19a2c;
    --focus: #e3a82b;
    --foam: #1d2a44;
    --paper: #0c1626;
    --card: #152238;
    --line: #2b3c5c;
    --field: #0a1220;
    --field-line: #5b6b96;
    --subtle: #27334d;
    --faint: #6f7b9c;
    --grid: #35446a;
    --grid-2: #3f4e75;
    --text: #e7eaf2;
    --muted: #a6b0c6;
    --ok: #6fd69a;
    --ok-bg: #13301f;
    --ok-line: #25593b;
    --warn: #f2c15b;
    --warn-bg: #3a2c0b;
    --warn-line: #6b5217;
    --bad: #ff9a91;
    --bad-bg: #3d1a17;
    --bad-line: #70302b;
    --success: #1d7a45;
    --danger: #b3261e;
    --zone-ok: #8fe0ae;
    --zone-ok-bg: #15341f;
    --zone-warn: #f2c15b;
    --zone-warn-bg: #3a2c0b;
    --zone-bad: #ff9a91;
    --zone-bad-bg: #3d1a17;
    --stamp: #a9b8ff;
    --stamp-bg: rgb(169 184 255 / 8%);
    --stamp-admin-bg: rgb(255 154 145 / 8%);
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px rgb(0 0 0 / 25%);
    color-scheme: dark;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Ankerlinks (#id) må ikke lande under den sticky topbar. */
  scroll-padding-top: calc(72px + env(safe-area-inset-top));
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--paper);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}

body.public {
  padding-bottom: 0;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--ink-2);
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1,
h2 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

/* Cinzel er bred. På telefoner under ca. 370 px følger h1 og h2 skærmbredden, så lange
   sammensatte ord som »Uddannelsesbestemmelser« kan stå på én linje ned til 320 px
   i stedet for at knække midt i ordet. Derover er størrelserne faste. */
h1 {
  font-size: clamp(1.35rem, 7vw, 1.6rem);
}

/* Udstedelses-, fornyelses- og inddragelsessiden har katalognavnet i h1, og nogle af navnene har ord på
   ca. 15 em som »Senioroplæggeruddanner« og »Cocktailformation+video«. Den h1 er lidt mindre på telefoner
   og når den fulde størrelse ved ca. 440 px. test/brand.test.js måler alle navne i kataloget. */
.h1-item {
  font-size: clamp(1.1rem, 5.8vw, 1.6rem);
}

h2 {
  font-size: clamp(1rem, 7vw - 0.375rem, 1.25rem);
}

h3 {
  font-size: 1.05rem;
}

p {
  margin: 0 0 0.75em;
}

small,
.muted {
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

/* På marineblå flader er ravgul bedre end den mørke fokusfarve. */
.topbar :focus-visible {
  outline-color: var(--amber);
}

.icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ───────────── Topbar og navigation ───────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--brand);
  border-bottom: 1px solid var(--brand-edge);
  color: var(--on-brand);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--on-brand);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: 1.05rem;
}

.brand img {
  width: 34px;
  height: 34px;
}

.topnav {
  display: none;
}

.topbar .me {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--on-amber);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  flex: none;
}

.avatar.lg {
  width: 72px;
  height: 72px;
  font-size: 1.6rem;
}

img.avatar-photo {
  display: block;
  object-fit: cover;
  background: var(--line);
}

.photo-current {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.photo-current p {
  margin: 0;
}

.photo-crop {
  margin-bottom: 12px;
}

.photo-crop canvas {
  display: block;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
}

.photo-zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 240px;
  margin-top: 8px;
}

.photo-zoom input {
  flex: 1;
}

.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--card);
  border-top: 1px solid var(--line);
}

.tabbar a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
}

.tabbar a .icon {
  width: 24px;
  height: 24px;
}

.tabbar a[aria-current='page'] {
  color: var(--ink);
}

.tabbar a[aria-current='page'] .icon {
  color: var(--amber-2);
}

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--danger);
  color: var(--on-brand);
  font-size: 0.72rem;
  font-weight: 800;
}

.tabbar .badge {
  position: absolute;
  top: 6px;
  left: calc(50% + 6px);
}

@media (min-width: 900px) {
  body {
    padding-bottom: 0;
  }

  .tabbar {
    display: none;
  }

  /* Menuen må aldrig skubbe avataren ud af skærmen: den krymper og kan som nødløsning rulles sidelæns.
     overflow klipper alt uden for padding-boksen, så paddingen giver plads til fokusrammen
     (3 px + 2 px afstand), og den negative margin udligner, så menuen står samme sted. */
  .topnav {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    gap: 2px;
    padding: 5px;
    margin: -5px -5px -5px 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topnav::-webkit-scrollbar {
    display: none;
  }

  .topnav a {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 8px 9px;
    white-space: nowrap;
    border-radius: 999px;
    color: #dfe5f2;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
  }

  /* 900–1359 px: kun ikoner (den aktive side beholder sin tekst), så menuen ikke flyder over.
     Bestyrelsen har ni punkter og et badge, og med tekst kræver de ca. 1330 px plus en evt. rullebjælke. */
  .topnav a:not([aria-current='page']) .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .topnav a:hover {
    background: rgb(255 255 255 / 8%);
  }

  .topnav a[aria-current='page'] {
    background: var(--amber);
    color: var(--on-amber);
  }
}

@media (min-width: 1360px) {
  .topnav {
    gap: 4px;
    margin-left: 11px; /* 16 px minus de 5 px til fokusrammen */
  }

  .topnav a:not([aria-current='page']) .nav-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .topnav a {
    padding: 8px 12px;
  }
}

/* ───────────── Layout ───────────── */

.page {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 4px 0 16px;
}

.page-head h1 {
  margin: 0;
}

.page-head .actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stack > * + * {
  margin-top: 16px;
}

.grid {
  display: grid;
  /* minmax(0, 1fr): lange navne/tabeller må ikke strække kolonnen ud over skærmen. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 700px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tiles {
    grid-template-columns: repeat(4, 1fr);
  }

  .page {
    padding: 24px;
  }

  h1,
  .h1-item {
    font-size: 2rem;
  }
}

@media (min-width: 1000px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-main {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.card > h2:first-child,
.card > h3:first-child {
  margin-top: 0;
}

/* Er der ikke plads, rykker en chip eller knap ned under overskriften i stedet for at klemme den. */
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.card-head h2 {
  margin: 0;
}

.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.tile .label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.tile .value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.tile .sub {
  font-size: 0.85rem;
  color: var(--muted);
}

.tile.ok {
  border-color: var(--ok-line);
  background: var(--ok-bg);
}

.tile.bad {
  border-color: var(--bad-line);
  background: var(--bad-bg);
}

.tile.warn {
  border-color: var(--warn-line);
  background: var(--warn-bg);
}

/* ───────────── Flash-beskeder ───────────── */

.flash {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.flash-success {
  background: var(--ok-bg);
  color: var(--ok);
}

.flash-error {
  background: var(--bad-bg);
  color: var(--bad);
}

.flash-info {
  background: var(--warn-bg);
  color: var(--warn);
}

/* Fast notits på en side (fx UDKAST). Til forskel fra .flash ligger den i sidens flow og kommer med på print. */
.notice {
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--warn-line);
  border-radius: 10px;
  background: var(--warn-bg);
  color: var(--warn);
  overflow-wrap: anywhere;
}

/* ───────────── Formularer og knapper ───────────── */

label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 4px;
}

.field {
  margin-bottom: 14px;
}

.field .hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 4px;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='date'],
input[type='tel'],
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* undgår zoom på iOS */
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 10px;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted); /* browserens standard (#757575) når kun 3,96:1 på mørke felter */
  opacity: 1; /* Firefox dæmper ellers pladsholderen yderligere */
}

textarea {
  min-height: 90px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ink-2);
  outline: 3px solid rgb(227 168 43 / 35%);
  outline-offset: 0;
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 500;
  padding: 8px 0;
}

.check input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--ink);
  flex: none;
}

.form-row {
  display: grid;
  gap: 0 12px;
}

@media (min-width: 600px) {
  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-row.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  background: var(--btn);
  color: var(--on-brand);
  white-space: nowrap;
}

.btn:hover {
  filter: brightness(1.08);
}

.btn-primary {
  background: var(--amber);
  color: var(--on-amber);
}

.btn-ghost {
  background: transparent;
  border-color: var(--field-line);
  color: var(--ink);
}

.btn-danger {
  background: var(--danger);
  color: var(--on-brand);
}

.btn-ok {
  background: var(--success);
  color: var(--on-brand);
}

.btn-sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.85rem;
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.inline-form {
  display: inline;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ───────────── Chips og status ───────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--subtle);
  color: var(--muted);
  white-space: nowrap;
}

.chip-ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.chip-warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.chip-bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.chip-ink {
  background: var(--btn);
  color: var(--on-brand);
}

.chip-amber {
  background: var(--amber);
  color: var(--on-amber);
}

.bar {
  height: 10px;
  border-radius: 5px;
  background: var(--subtle);
  overflow: hidden;
}

.bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--amber-2), var(--amber));
  border-radius: 5px;
}

/* ───────────── Stempler ───────────── */

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 5px;
  border: 2px solid var(--stamp);
  border-radius: 4px;
  color: var(--stamp);
  font-family: var(--mono);
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1.3;
  transform: rotate(-3deg);
  background: var(--stamp-bg);
  white-space: nowrap;
}

.stamp svg {
  width: 16px;
  height: 16px;
}

.stamp.admin {
  border-color: var(--bad);
  color: var(--bad);
  background: var(--stamp-admin-bg);
}

/* Certifikatstigen A–G som runde segl. */
.seals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seal {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px dashed rgb(255 255 255 / 35%);
  color: rgb(255 255 255 / 45%);
  font-weight: 900;
  font-size: 1.15rem;
  text-decoration: none;
  position: relative;
}

.seal.on {
  border: 3px double var(--on-amber);
  background: radial-gradient(circle at 35% 30%, #ffd75e, var(--amber) 60%, var(--amber-2));
  color: var(--on-amber);
  box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
}

.seal.expired {
  filter: grayscale(0.8);
  opacity: 0.7;
}

.seals.light .seal {
  border-color: var(--field-line);
  color: var(--faint);
}

.seals.light .seal.on {
  border-color: var(--on-amber);
  color: var(--on-amber);
}

/* ───────────── Certifikatkortet ───────────── */

.license {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 18px;
  color: var(--on-brand);
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(227 168 43 / 35%), transparent 55%),
    linear-gradient(145deg, var(--brand) 0%, var(--brand-2) 100%);
  box-shadow: 0 10px 30px rgb(19 41 75 / 25%);
}

.license::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -50px;
  width: 200px;
  height: 200px;
  background: url('/static/logo.svg') center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}

.license-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd75e;
  font-weight: 800;
}

.license-top img {
  width: 26px;
  height: 26px;
}

.license-body {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 14px 0;
}

.license-name {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.15;
}

.license-meta {
  font-size: 0.85rem;
  color: #c9d3ea;
}

.license-meta b {
  color: var(--on-brand);
}

.license .chip {
  background: rgb(255 255 255 / 14%);
  color: var(--on-brand);
}

.license .chip-amber {
  background: var(--amber);
  color: var(--on-amber);
}

/* ───────────── Faner (som i DFU-registret) ───────────── */

.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs a {
  flex: none;
  padding: 10px 14px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.tabs a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--amber);
}

@media (min-width: 700px) {
  .tabs {
    margin: 0 0 16px;
    padding: 0;
  }
}

/* ───────────── Certifikatrækker (Type, #, Udstedt, Fornyet, Udløber) ───────────── */

.certs {
  display: grid;
  gap: 10px;
}

.cert-head {
  display: none;
}

.cert {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.cert.held {
  border-left: 4px solid var(--ok);
}

.cert.held.expired {
  border-left-color: var(--warn);
}

.cert.held.revoked {
  border-left-color: var(--bad);
}

.cert-type {
  grid-column: 1 / -1;
}

.cert-type summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}

.cert-type summary::-webkit-details-marker {
  display: none;
}

.cert-type summary::after {
  content: ' ⓘ';
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85em;
}

.cert-type .sub {
  color: var(--muted);
  font-weight: 500;
}

.cert-info {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--foam);
  border-radius: 10px;
  font-size: 0.9rem;
}

.cert-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.85rem;
  color: var(--muted);
}

.cert-dates b {
  color: var(--text);
  font-weight: 600;
}

.cert-no {
  font-family: var(--mono);
  font-weight: 800;
  color: var(--ink);
}

.cert-status {
  justify-self: end;
}

.cert-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cert-actions:empty {
  display: none;
}

.history summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
}

.history ol {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.85rem;
}

@media (min-width: 900px) {
  .certs {
    gap: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .cert-head,
  .cert {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) 90px 104px 104px 104px 100px minmax(0, 1.6fr);
    align-items: start;
    gap: 12px;
    padding: 10px 16px;
  }

  .cert-head {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: var(--foam);
    border-bottom: 1px solid var(--line);
  }

  .cert {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }

  .cert:last-child {
    border-bottom: 0;
  }

  .cert-type,
  .cert-actions {
    grid-column: auto;
  }

  .cert-dates {
    display: contents;
  }

  .cert-dates .lbl {
    display: none;
  }

  .cert-status {
    justify-self: start;
  }

  .cert-actions {
    justify-content: flex-end;
  }
}

/* ───────────── Tjeklister ───────────── */

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

.checklist li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.93rem;
}

.checklist li:last-child {
  border-bottom: 0;
}

.checklist .mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 900;
  background: var(--bad-bg);
  color: var(--bad);
}

.checklist li.ok .mark {
  background: var(--ok-bg);
  color: var(--ok);
}

.checklist .detail {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ───────────── Lister og tabeller ───────────── */

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

.list > li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.list > li:last-child {
  border-bottom: 0;
}

.member-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

.member-card:hover {
  border-color: var(--amber);
}

.member-card .info {
  min-width: 0;
  flex: 1;
}

.member-card .name {
  font-weight: 800;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.82rem;
  color: var(--muted);
}

.member-card .level {
  flex: none;
  text-align: right;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th,
td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--foam);
  white-space: nowrap;
}

/* Drukbogen: kort på mobil, tabel på desktop. */
.logtable thead {
  display: none;
}

.logtable,
.logtable tbody,
.logtable tr,
.logtable td {
  display: block;
}

.logtable tr {
  position: relative;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.logtable td {
  border: 0;
  padding: 2px 0;
}

.logtable td[data-label]::before {
  content: attr(data-label) ': ';
  font-weight: 700;
  color: var(--muted);
  font-size: 0.8rem;
}

.logtable td.nr {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ink);
}

.logtable td.nr::before {
  content: '#';
  color: var(--muted);
  font-size: 1rem;
}

.logtable td:empty {
  display: none;
}

@media (min-width: 900px) {
  .logtable {
    display: table;
  }

  .logtable thead {
    display: table-header-group;
  }

  .logtable tbody {
    display: table-row-group;
  }

  .logtable tr {
    display: table-row;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }

  .logtable td,
  .logtable td:empty {
    display: table-cell;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
  }

  .logtable td[data-label]::before,
  .logtable td.nr::before {
    content: none;
  }

  .logtable td.nr {
    font-size: 1rem;
  }
}

/* ───────────── Elevbeviset ───────────── */

.elev-grid {
  display: grid;
  gap: 16px;
  align-items: start;
}

@media (min-width: 900px) {
  .elev-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.elevtable {
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 6px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--card);
}

.elevtable caption {
  caption-side: top;
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0 8px;
  font-size: 1rem;
}

.elevtable th {
  background: var(--card);
  border-bottom: 1px solid var(--ink);
}

.elevtable td {
  border-bottom: 1px solid var(--grid);
  vertical-align: middle;
}

.elevtable tr:last-child td {
  border-bottom: 0;
}

.elevtable td.type {
  text-align: center;
}

.elevtable td.type .sub {
  display: block;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--muted);
}

.elevtable td.att {
  width: 34%;
  text-align: center;
  border-left: 1px solid var(--grid);
}

.elevtable td.dato {
  width: 22%;
  text-align: center;
  border-left: 1px solid var(--grid);
  font-family: var(--mono);
  font-size: 0.85rem;
}

/* ───────────── Login og offentlige sider ───────────── */

.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgb(227 168 43 / 30%), transparent 60%),
    linear-gradient(180deg, var(--brand) 0%, var(--brand-3) 100%);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border-radius: 20px;
  padding: 28px 22px;
  box-shadow: 0 20px 60px rgb(0 0 0 / 35%);
}

.auth-card .logo {
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 auto 12px;
}

/* Seglet (views/partials/segl.ejs): skrifterne på ringene kommer fra @font-face ovenfor. */
.segl-top {
  font-family: var(--font-display);
  font-weight: 700;
}

.segl-year {
  font-family: var(--font-accent);
  font-weight: 600;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}

.segl-motto {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
}

.segl-navi {
  font-family: var(--font-display);
  font-weight: 800;
}

.auth-card h1 {
  text-align: center;
  margin-bottom: 4px;
}

.auth-card .tagline {
  text-align: center;
  color: var(--muted);
  margin-bottom: 20px;
}

.auth-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ───────────── Bestemmelser / håndbog ───────────── */

.prose {
  max-width: 72ch;
}

.prose li {
  margin-bottom: 4px;
}

.rule {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.rule:last-child {
  border-bottom: 0;
}

.rule h3 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-bottom: 4px;
}

.rule dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin: 8px 0 0;
  font-size: 0.9rem;
}

.rule dt {
  font-weight: 700;
  color: var(--muted);
}

.rule dd {
  margin: 0;
}

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lesson {
  break-inside: avoid;
}

.lesson h3 {
  margin-bottom: 2px;
}

.zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.zones div {
  padding: 12px 6px;
  border-radius: 10px;
}

.zone-green {
  background: var(--zone-ok-bg);
  color: var(--zone-ok);
}

.zone-yellow {
  background: var(--zone-warn-bg);
  color: var(--zone-warn);
}

.zone-red {
  background: var(--zone-bad-bg);
  color: var(--zone-bad);
}

.empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
}

.site-foot {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 16px 24px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.theme-select {
  width: auto;
  min-height: 36px;
  margin-top: 8px;
  padding: 4px 10px;
}

.copy {
  display: flex;
  gap: 8px;
}

.copy input {
  font-family: var(--mono);
  font-size: 0.85rem;
}

/* ───────────── Print (elevbevis og bestemmelser) ───────────── */

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  body {
    background: #fff;
    padding: 0;
    font-size: 11pt;
  }

  .topbar,
  .tabbar,
  .no-print,
  .site-foot,
  .flash {
    display: none !important;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  .card {
    box-shadow: none;
    border-color: #999;
  }

  .print-page {
    break-after: page;
  }

  .stamp {
    background: none;
  }
}

.public .page {
  max-width: none;
  padding: 0;
}

.public .flash {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 30;
  width: min(420px, calc(100% - 32px));
  transform: translateX(-50%);
}

/* En almindelig tekstside, der også kan ses logget ud (fx privatlivspolitikken), får appens sidemargen. */
.public .page-gutter {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px;
}

@media print {
  .public .page-gutter {
    padding: 0;
  }
}

/* Placering af certifikatrækkens felter på mobil. */
@media (max-width: 899.98px) {
  .cert-no {
    grid-column: 1;
    grid-row: 2;
  }

  .cert-status {
    grid-column: 2;
    grid-row: 2;
  }

  .cert-dates {
    grid-column: 1 / -1;
  }
}

/* ───────────── Elevbevis (print) ───────────── */

/* Elevbeviset er et papirdokument og ser altid lyst ud, også i mørk tilstand:
   de lyse tokens gentages her og arves af alt indeni. */
.eb {
  --ink: #13294b;
  --ink-2: #1f3b73;
  --brand: #13294b;
  --brand-2: #1f3b73;
  --brand-3: #0b1a31;
  --brand-edge: #13294b;
  --btn: #13294b;
  --on-brand: #fff;
  --on-amber: #13294b;
  --amber: #e3a82b;
  --amber-2: #b9811a;
  --focus: #8a5a0b;
  --foam: #f6efdd;
  --paper: #f7f4ec;
  --card: #ffffff;
  --line: #e4ddcc;
  --field: #ffffff;
  --field-line: #877e66;
  --subtle: #f1eee4;
  --faint: #b7ae99;
  --grid: #c8cfe0;
  --grid-2: #b9c1d6;
  --text: #1b1f2a;
  --muted: #616875;
  --ok: #1d7a45;
  --ok-bg: #e5f4ea;
  --ok-line: #bfe3cc;
  --warn: #9a6200;
  --warn-bg: #fff2d6;
  --warn-line: #f1d9a6;
  --bad: #b3261e;
  --bad-bg: #fbe6e4;
  --bad-line: #f2c4bf;
  --success: #1d7a45;
  --danger: #b3261e;
  --zone-ok: #145c33;
  --zone-ok-bg: #d8f0df;
  --zone-warn: #7a5600;
  --zone-warn-bg: #fff0bf;
  --zone-bad: #8e1d16;
  --zone-bad-bg: #f9d6d2;
  --stamp: #2a3f94;
  --stamp-bg: rgb(42 63 148 / 4%);
  --stamp-admin-bg: rgb(179 38 30 / 4%);
  --shadow: 0 1px 2px rgb(19 41 75 / 6%), 0 4px 16px rgb(19 41 75 / 6%);
  color: var(--text);
  color-scheme: light;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.eb h3 {
  margin: 14px 0 6px;
  font-size: 1rem;
}

.eb-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.eb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: 1.15rem;
  color: var(--ink);
}

.eb-brand img {
  width: 48px;
  height: 48px;
}

.eb-fields {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}

.eb-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eb-photo {
  display: grid;
  place-items: center;
  flex: none;
  width: 90px;
  height: 110px;
  border: 1px solid var(--ink);
  color: var(--muted);
  font-size: 0.8rem;
}

.eb-fields dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 10px;
  margin: 0;
  flex: 1;
}

.eb-fields dt {
  font-weight: 700;
}

.eb-fields dd {
  margin: 0;
  border-bottom: 1px solid var(--ink);
  min-height: 1.4em;
}

.eb-years {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink);
}

.eb-years > div {
  min-height: 64px;
  padding: 6px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
}

.eb-years > div:nth-child(3n) {
  border-right: 0;
}

.eb-years > div:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.eb-logtable {
  font-size: 0.78rem;
  border: 1px solid var(--ink);
}

.eb-logtable th,
.eb-logtable td {
  border: 1px solid var(--grid-2);
  padding: 4px 5px;
}

.eb-logtable td {
  height: 2.2em;
}

.eb-logtable td:nth-child(2) {
  white-space: nowrap;
}

@media (min-width: 1000px) {
  .eb-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }
}

/* Elevbeviset printes på liggende A4 ligesom det fysiske kort. */
@page elevbevis {
  size: A4 landscape;
  margin: 10mm;
}

@media print {
  .eb {
    page: elevbevis;
    border: 0;
    padding: 0;
  }

  .eb-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }

  .elev-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .elevtable {
    font-size: 9pt;
    break-inside: avoid;
  }
}

.more-fields {
  margin: 4px 0 16px;
  padding: 10px 14px;
  border: 1px dashed var(--field-line);
  border-radius: 12px;
}

.more-fields summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  padding: 4px 0;
}

.more-fields[open] summary {
  margin-bottom: 10px;
}

/* ───────────── Årets stempler ───────────── */

.stamp-year-item {
  margin-top: 12px;
}

.stamp-year-item h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

@media print {
  /* Overskrifter følger deres indhold til næste side. Lange lister må gerne deles mellem rækkerne. */
  .stamp-year-section > h2,
  .stamp-year-item h3 {
    break-after: avoid;
  }

  /* Et bevis med højst tre medlemmer holdes samlet. Chromium lader ellers af og til
     en overskrift stå alene, når kun én kort række er tilbage. Større lister deles stadig. */
  .stamp-year-item:not(:has(.list > li:nth-child(4))) {
    break-inside: avoid;
  }

  .stamp-year-item .list > li {
    break-inside: avoid;
    padding: 4px 0;
  }

  .tiles {
    grid-template-columns: repeat(4, 1fr);
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}