:root {
  /* palette sampled from the club logo: navy wheel + blue anchor */
  --ink: #1b263f;
  --navy: #22304f;
  --navy-2: #2c3d63;
  --sea: #2c6296;
  --sea-deep: #1f4a75;
  --buoy: #e0632c;
  --sand: #d8c3a5;
  --paper: #f4f7f8;
  --card: #ffffff;
  --line: #e2e9ec;
  --muted: #566875;
  --shadow: 0 1px 2px rgba(10,36,50,.04), 0 8px 24px rgba(10,36,50,.06);
  --radius: 14px;
  --wrap: 1080px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--sea-deep); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 66px;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  font-size: 15px;
}
/* Real club logo: circular crop clips the white square corners,
   so it sits cleanly on both the light header and the navy footer. */
.brand .mark {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%; display: block;
}
.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 8px; color: var(--ink);
}
.menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block; text-decoration: none; color: var(--ink);
  padding: 9px 14px; border-radius: 8px; font-size: 14px; font-weight: 500;
  letter-spacing: .01em;
}
.menu a:hover { background: rgba(22,105,122,.08); color: var(--sea-deep); }

/* Login is an account action, not another page about the club, so it sits
   apart from the content nav. Styled DOWN rather than up: only twelve people
   can use it, and giving it button weight would put it above Medlemskab —
   the page that actually converts a prospective member. */
.menu .menu-login { margin-left: auto; }
.menu .menu-login a { color: var(--muted); }
.menu a[aria-current="page"] { color: var(--sea-deep); }
.menu a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 6px;
  background: var(--buoy); border-radius: 2px;
}
.has-sub { position: relative; }
.submenu {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: .16s ease;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff;
  background: var(--navy);
}
.hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,30,42,.35), rgba(9,30,42,.78));
}
.hero-inner {
  position: relative; z-index: 1;
  padding: clamp(72px, 14vw, 148px) 0 clamp(56px, 10vw, 104px);
  max-width: 620px;
}
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .2em;
  font-size: 12px; font-weight: 600; color: var(--sand);
  margin: 0 0 18px;
}
.hero h1 {
  margin: 0 0 18px; font-size: clamp(34px, 6vw, 56px); line-height: 1.05;
  font-weight: 700; letter-spacing: -.01em;
}
.hero p { margin: 0 0 28px; font-size: clamp(17px, 2.4vw, 20px); color: rgba(255,255,255,.9); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 15px; cursor: pointer; border: 0;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
}
/* Fandtes ikke. Eneste :focus-visible i filen var .regn-scroll, så alle knapper
   stod med browserens standardoutline -- og på ventelistens kommende svar-side
   ER de to knapper hele siden. */
.btn:focus-visible { outline: 2px solid var(--sea-deep); outline-offset: 3px; }
.btn-primary { background: var(--buoy); color: #fff; box-shadow: 0 6px 18px rgba(224,99,44,.28); }
.btn-primary:hover { transform: translateY(-1px); background: #d1571f; }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.2); }
.btn-line { background: transparent; color: var(--sea-deep); border: 1px solid var(--sea); }
.btn-line:hover { background: rgba(22,105,122,.08); }
/* Without this a submitting button looks identical to an idle one, so the only
   feedback for "I pressed Indsend" is the label swapping to "Sender...". */
.btn:disabled { opacity: .6; box-shadow: none; cursor: progress; }
.btn:disabled:hover { transform: none; }
.btn-primary:disabled:hover { background: var(--buoy); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Sections ---------- */
main { display: block; }
.section { padding: clamp(56px, 9vw, 96px) 0; }
.section.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 640px; margin: 0 auto clamp(36px, 6vw, 56px); text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.kicker {
  text-transform: uppercase; letter-spacing: .18em; font-size: 12px;
  font-weight: 600; color: var(--sea); margin: 0 0 12px;
}
h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; margin: 0 0 16px; letter-spacing: -.01em; }
h3 { font-size: 19px; margin: 0 0 10px; }
.lead { font-size: 19px; color: var(--muted); }
p { margin: 0 0 16px; }
.muted { color: var(--muted); }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 22px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
}
.card .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 16px;
  background: rgba(22,105,122,.1); color: var(--sea-deep); font-weight: 700;
}
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }

/* Split media + text */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 64px); align-items: center; }
.split.reverse .media { order: 2; }
.media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; height: 100%; object-fit: cover; }

/* ---------- Notice / banner ---------- */
.notice {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff7f2; border: 1px solid #f3d3c1; border-left: 4px solid var(--buoy);
  border-radius: var(--radius); padding: 22px 24px; margin: 0 auto; max-width: 640px;
}
.notice .dot { flex: 0 0 auto; font-size: 22px; line-height: 1; }
.notice h3 { margin: 0 0 4px; }
.notice p { margin: 0; color: var(--muted); }

/* ---------- Page header (interior) ---------- */
.page-head {
  background: var(--navy);
  color: #fff; padding: clamp(56px, 10vw, 92px) 0 clamp(36px, 6vw, 56px);
  position: relative; overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(22,105,122,.5), transparent 70%);
}
.page-head .wrap { position: relative; }
.page-head h1 { margin: 0 0 10px; font-size: clamp(30px, 5vw, 44px); letter-spacing: -.01em; }
.page-head p { margin: 0; color: rgba(255,255,255,.85); max-width: 620px; }
.crumbs { font-size: 13px; color: var(--sand); margin: 0 0 14px; letter-spacing: .04em; }
.crumbs a { color: var(--sand); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- FAQ (native details) ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 12px; box-shadow: var(--shadow); overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 24px;
  font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; gap: 16px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 22px; color: var(--sea); font-weight: 400; transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .answer { padding: 18px 24px 22px; color: var(--muted); }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- Bylaws ---------- */
.bylaws { max-width: 780px; margin: 0 auto; }
.bylaws .toolbar { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.bylaws section { margin-bottom: 34px; scroll-margin-top: 90px; }
.bylaws h2 {
  font-size: 20px; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--line); display: flex; gap: 12px; align-items: baseline;
}
.bylaws h2 .par { color: var(--sea); font-weight: 700; }
.bylaws .clause { display: flex; gap: 16px; margin-bottom: 12px; }
.bylaws .clause .no { flex: 0 0 46px; color: var(--sea-deep); font-weight: 600; font-variant-numeric: tabular-nums; }
.bylaws .clause p { margin: 0; }
.bylaws ol.roman { margin: 6px 0 0; padding-left: 22px; }
.bylaws ol.roman li { margin-bottom: 4px; }
.bylaws .closing { text-align: center; color: var(--muted); margin-top: 40px; font-style: italic; }

/* ---------- Login (minimal chrome, no site nav/page-head) ---------- */
.login-body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--paper); padding: 24px; }
.login-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 15px; margin-bottom: 32px; }
.login-logo img { border-radius: 50%; }
.login-card { width: 100%; max-width: 400px; }
.login-footer { margin-top: 24px; color: var(--muted); font-size: 13px; }
/* The second door on the login card. Given full button weight rather than a
   small link because for eleven of twelve members it is the ONLY door — see
   the comment in login.html. The hairline separates it from the login form so
   it reads as an alternative, not as fine print belonging to the password
   field. */
.login-alt { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.login-alt > p { font-size: 14px; color: var(--ink); margin: 0 0 14px; }
.login-alt .login-help { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
/* One field, not six boxes: six break paste and autofill and give an older
   user six focus traps. Oversized and letter-spaced because these digits get
   read off a phone and typed into another window. text-indent cancels the
   trailing gap letter-spacing adds, so the value stays optically centred. */
/* `.field input` is more specific than a bare `.code-input`, so it has to be
   qualified or the font-size silently stays at 15px. */
.field input.code-input {
  font-size: 26px; letter-spacing: .35em; text-indent: .35em; text-align: center;
  font-variant-numeric: tabular-nums; padding: 14px; min-height: 56px;
}

/* ---------- Forms ---------- */
.form-wrap { max-width: 640px; margin: 0 auto; }
form.styled { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }
.field .req { color: var(--buoy); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  /* 16px og ikke 15: Safari på iOS auto-zoomer ved fokus i et felt under 16px
     og zoomer ikke ud igen. Medlemmet trykker i det første felt, siden hopper
     til ~117 %, og resten af formularen udfyldes med vandret scroll. */
  font-family: inherit; font-size: 16px; background: #fbfcfd; color: var(--ink); transition: border .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(22,105,122,.14); background: #fff;
}
.field textarea { min-height: 140px; resize: vertical; }
.checkbox { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
/* 22px, ikke browserens ~16px. Samme begrundelse som .regn-aar længere nede:
   WCAG 2.5.5 vil have 44px, og et lille firkantet mål er en fejltryks-generator
   på en telefon. Labelen er koblet med for= og er tre-fire linjer høj, så det
   reelle mål er stort -- men det SER ikke trykbart ud, og tommelfingeren sigter
   efter firkanten. */
.checkbox input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; }
/* --ink, ikke --muted: de to attest-felter er de mest konsekvensfulde kontroller
   på siden og stod sat som den mindst vigtige tekst på den, lige under syv
   feltlabels i 600. */
.checkbox label { font-weight: 400; font-size: 14px; color: var(--ink); margin: 0; cursor: pointer; }

/* Bekræftelserne som egen sektion frem for et halehæng under sidste felt. */
/* Tolv rækker à tre talfelter. Egen rulleboks, så tabellen ikke trækker hele
   siden sidelæns på en telefon -- samme mønster som .regn-scroll, og med
   tabindex, fordi et rulbart område uden fokus er et WCAG 2.1.1-brud. */
.pm-scroll { overflow-x: auto; }
.pm-scroll:focus-visible { outline: 2px solid var(--sea-deep); outline-offset: 2px; }
.pm { width: 100%; min-width: 460px; border-collapse: collapse; }
.pm th[scope="col"] { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 0 8px 8px 0; font-weight: 700; }
.pm th[scope="row"] { text-align: left; font-weight: 600; font-size: 14px; padding: 6px 12px 6px 0; white-space: nowrap; }
.pm td { padding: 4px 8px 4px 0; }
.pm input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 16px; background: #fbfcfd; color: var(--ink); }
.pm input:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(22,105,122,.14); }
/* Opslaget mod grundejerforeningens adresser. */
/* Fire udfald, to farver: de to der peger på en liste er neutrale oplysninger,
   de to der kræver en beslutning er orange. */
.vl-omraade-intern, .vl-omraade-ekstern { color: var(--sea-deep); font-weight: 600; }
.vl-omraade-udenfor, .vl-omraade-usikker { color: #8a3310; font-weight: 600; }
/* Ansøgerens svar. Fremmed tekst, så den holdes visuelt adskilt fra
   foreningens egne noter på rækken. */
.vl-svar { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--sea); background: rgba(22,105,122,.05); border-radius: 0 8px 8px 0; }
.vl-svar-tekst { font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 6px; }
.vl-svar details { margin-top: 8px; }
.vl-advarsel { color: #8a3310; font-weight: 600; }

/* Bådens mål som egen sektion, samme mønster som .attest-blok. */
.baad-blok { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 4px; }
.baad-blok h2 { font-size: 17px; margin: 0 0 4px; }
.baad-blok > p.muted { font-size: 14px; margin: 0 0 14px; }
.attest-blok { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 4px; }
.attest-blok h2 { font-size: 17px; margin: 0 0 4px; }
.attest-blok p { font-size: 14px; margin: 0 0 14px; }
.hp { position: absolute; left: -9999px; }
/* Reserves the widget's height so the form does not jump when the iframe
   arrives. The placeholder is hidden by CSS alone once Turnstile injects its
   iframe into .cf-turnstile -- which also means a blocked script leaves a
   visible "indlæses" line instead of an invisible gap.
   overflow-x for the narrowest phones: the flexible widget will not go below
   300px, and a 375px viewport leaves ~279px inside .wrap and form padding.
   Same approach as .dock-wrap below. */
.turnstile-wrap { min-height: 65px; margin-bottom: 20px; overflow-x: auto; }
/* Turnstile's flexible widget will not render narrower than 300px, and a 375px
   phone leaves only ~277px inside .wrap plus the form's own padding. Measured,
   not guessed. Bleed it toward the card edge on the narrowest screens instead
   of shrinking the padding every other field depends on. */
@media (max-width: 430px) {
  .turnstile-wrap { margin-left: -12px; margin-right: -12px; }
}
.turnstile-loading { margin: 0; font-size: 13px; color: var(--muted); }
.cf-turnstile:not(:empty) ~ .turnstile-loading { display: none; }
/* On opdatering the widget follows the two attestation checkboxes. Without a
   break it reads as a third thing to confirm, which it is not. */
.turnstile-sep { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 4px; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 14px; }
.form-error {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 10px;
  background: #fdf1ec; border: 1px solid #f0c7b3; color: #8a3310; font-size: 14px;
}
.form-info { background: #eef4f6; border: 1px solid #d5e3e8; border-radius: 12px; padding: 18px 20px; margin-bottom: 28px; }
.form-info p:last-child { margin-bottom: 0; }
.dock-outer { max-width: 960px; margin: 0 auto 28px; }
.dock-wrap {
  overflow-x: auto; padding: 20px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.dock-diagram { display: block; width: 100%; min-width: 640px; }
.dock-diagram .flag { fill: var(--buoy); }
.dock-diagram .boat { fill: var(--navy); }
.dock-diagram .bar { fill: var(--buoy); }
.dock-diagram .dock { fill: #ccd3d8; }
.dock-diagram .col-divider { stroke: var(--ink); stroke-width: 1.5; opacity: .35; }
.dock-diagram .plads-num { font: 700 16px var(--font); fill: var(--ink); }
.dock-diagram .plads-name { font: 500 12.5px var(--font); fill: var(--sea-deep); }
.dock-diagram .marker-orange { fill: var(--buoy); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy); color: rgba(255,255,255,.72);
  padding: 56px 0 30px; margin-top: 0;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.site-footer .brand { color: #fff; margin-bottom: 14px; }
.site-footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,.55);
}

/* ---------- Dashboard chrome ---------- */
.dash-topbar { background: var(--card); border-bottom: 1px solid var(--line); }
.dash-topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 52px; flex-wrap: wrap; gap: 12px; padding: 8px 24px; }
.dash-tabs { display: flex; gap: 4px; }
.dash-tabs a { padding: 8px 14px; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; }
.dash-tabs a:hover { background: rgba(22,105,122,.08); color: var(--sea-deep); }
.dash-tabs a.active { background: var(--sea); color: #fff; }
/* Piller til ventelistens to undtagelsestilstande. IKKE var(--buoy): orange på
   papirfarve er 3,26:1, og en pille er 11px fed -- se regnestykket ved
   .udkast-band længere nede. #8a3310 på #fdf1ec er allerede kontrolleret i
   denne fil (.form-error). */
.status-pill.varsel { background: #fdf1ec; color: #8a3310; }
.status-pill.udloebet { background: #8a3310; color: #fff; }

/* Ventelisterækken er bygget TO-LINJERS fra starten og bruger ikke
   .member-row-main's gitter. Gitteret kollapser til én kolonne under 820px, og
   en ventelisterække har fem oplysninger -- fem etiketløse linjer under
   hinanden, hvor ingen kan se at 04.03.2019 er anciennitet og ikke
   ansøgningsdato. Anden linje bærer sine egne labels i teksten. */
.vl-row-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vl-rang { font-weight: 700; color: var(--sea-deep); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.vl-navn { font-weight: 600; }
.vl-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.vl-detalje { margin-top: 12px; }
/* Båndet er altid åbent, aldrig i <details>: det er rækken, der kræver en
   handling. */
.vl-baand { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #fdf1ec; color: #8a3310; font-size: 14px; line-height: 1.5; }
.vl-baand-udloebet { background: #8a3310; color: #fff; }
.vl-baand .btn { background: transparent; }
.vl-baand-udloebet .btn { color: #fff; border-color: rgba(255,255,255,.6); }

/* Ventelistens svar-side. .btn er inline-flex UDEN justify-content, så en knap
   strakt til fuld bredde ville få venstrestillet label.
   Stablet lodret på telefon: to knapper med reelle labels fylder omkring 405px
   mod 327px tilgængelige -- og to lige store knapper side om side inviterer til
   det fejlklik, hele designet forsøger at undgå. */
.svar-valg { display: flex; flex-direction: column; gap: 14px; margin: 28px 0 0; }
/* Begge knapper i fuld bredde i den stablede tilstand.
   Uden width:100% på formularen og knappen sizer accept-knappen efter sit
   indhold (213px), mens afvis-knappen -- et <a> og dermed direkte flex-barn --
   strækkes til 327px. Så fylder den SEKUNDÆRE handling mest, stik imod
   hensigten, og det er præcis det fejlklik, to trin på et nej findes for at
   forhindre. */
.svar-valg form { margin: 0; width: 100%; }
.svar-valg .btn { justify-content: center; min-height: 48px; width: 100%; }
@media (min-width: 560px) {
  .svar-valg { flex-direction: row; align-items: center; }
  .svar-valg form, .svar-valg .btn { width: auto; flex: 0 0 auto; }
}
.tilbud-fakta { width: 100%; border-collapse: collapse; }
.card + p { margin-top: 24px; }
.tilbud-fakta th { text-align: left; font-size: 13px; color: var(--muted); padding: 8px 16px 8px 0; width: 140px; vertical-align: top; }
.tilbud-fakta td { font-size: 15px; color: var(--ink); padding: 8px 0; font-weight: 600; }
/* .status-pill har margin-left: 8px betingelsesløst. Står pillen først på sin
   egen linje efter en ombrydning, er de 8px en indrykning, der ser ud som en
   fejl. */
.vl-row-top > .status-pill:first-child { margin-left: 0; }

.dash-user { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }

.status-pill { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.status-pill.active { background: rgba(44,98,150,.12); color: var(--sea-deep); }
.status-pill.disabled { background: var(--line); color: var(--muted); }

/* ---------- Member list (card-grid, not a table — see README) ---------- */
.member-grid { display: flex; flex-direction: column; gap: 12px; }
.member-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px; }
.member-row-main { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 16px; align-items: center; }
.member-plads { font-weight: 700; color: var(--sea-deep); }
.member-navn { font-weight: 600; }
.member-baad { color: var(--muted); }
.member-row details { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.member-row summary { cursor: pointer; font-size: 13px; color: var(--sea); font-weight: 600; list-style: none; }
.member-row summary::-webkit-details-marker { display: none; }
.member-row summary::before { content: "+ "; }
.member-row details[open] summary::before { content: "− "; }
.member-history-entry { padding: 12px 0; border-top: 1px solid var(--line); }
.member-history-entry:first-child { border-top: none; padding-top: 12px; }
.member-history-date { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.member-history-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 20px; font-size: 14px; }
.member-history-grid .dt { color: var(--muted); margin-right: 6px; }
.member-history-grid .dd { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .menu-toggle { display: inline-flex; }
  .menu {
    position: fixed; inset: 66px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--card); border-bottom: 1px solid var(--line); padding: 12px;
    gap: 2px; box-shadow: var(--shadow); display: none;
  }
  .menu.open { display: flex; }
  .menu a { padding: 12px 14px; }
  .menu a[aria-current="page"]::after { display: none; }
  /* margin-left:auto does nothing once the menu stacks, so the separation is
     restored on the axis that's actually available. */
  .menu .menu-login { margin-left: 0; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  /* Syv faner for admin. Ved 14px og 14px vandret padding fylder de omkring
     740px mod 327px tilgængelige, og flex-wrap giver så tre rækker faner plus
     topbjælken -- cirka 180px, før indholdet begynder. */
  .dash-tabs a { padding: 8px 10px; font-size: 13px; }
  .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 14px; }
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .media { order: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .member-row-main { grid-template-columns: 1fr; gap: 4px; }
  .member-history-grid { grid-template-columns: 1fr; }
  .dash-topbar-inner { padding: 8px 16px; }
}

/* ---------- Regnskab: tabeller og udskrift ----------
   Projektets første rigtige tabeller og dets første trykte dokument. Tætheden
   er med vilje: et regnskab bliver skimmet kolonnevis, ikke læst som brødtekst,
   så line-height er 1.4 her mod bodys 1.65. */
.regn-aar { margin: 0 0 20px; flex-wrap: wrap; }
.regn-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 24px; }
.regn-nav a { font-size: 14px; font-weight: 600; }

.udkast-band {
  margin: 0 0 20px; padding: 8px 14px; border: 1px solid var(--buoy); border-radius: 8px;
  /* Teksten er --sea-deep og ikke --buoy: orange på papirfarve giver 3,26:1,
     og 13px fed tæller ikke som stor tekst, så AA's 4,5 er ikke opfyldt.
     --sea-deep giver 8,50:1. Den orange ramme bliver, så det stadig læses som
     et advarselsbånd. */
  color: var(--sea-deep); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 13px;
}

/* Sidehoved, logo og fod skjules i udskriften, så uden denne linje bærer det
   trykte ark ikke foreningens navn. Den vises kun på papir. */
.print-only { display: none; }
.kolofon { font-size: 12px; color: var(--muted); margin: 0 0 14px; }

.regn-blok { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 24px; box-shadow: var(--shadow); }
.regn-blok h2 { margin: 0 0 12px; font-size: 20px; }

.regn { width: 100%; border-collapse: collapse; line-height: 1.4; }
.regn caption { text-align: left; font-weight: 700; font-size: 18px; padding: 0 0 14px; color: var(--ink); }
.regn th, .regn td { padding: 6px 10px; }
.regn thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.regn tbody th[scope="row"] { text-align: left; font-weight: 400; padding-left: 22px; }
.regn .gruppe th { padding-top: 16px; font-weight: 700; text-align: left; }

/* Cifrene skal stå under hinanden. Skriftstakken har proportionale tal, så
   højrestilling alene er ikke nok -- uden tabular-nums danser kolonnen. */
.regn .tal, .regn col.tal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.regn td.tal { width: 130px; }

/* Indekstal, ikke kroner. Står bevidst uden for tabellens beløbskolonne. */
.indeks-note { font-size: 13px; margin: 10px 0 0; }

.regn .subtotal th, .regn .subtotal td { font-weight: 600; border-top: 1px solid var(--line); }
.regn .total th, .regn .total td { font-weight: 700; border-top: 1px solid var(--line); }
.regn .total th[scope="row"] { padding-left: 10px; }
/* Dobbelt understregning under en slutsum er regnskabskonvention og læses
   øjeblikkeligt af enhver der har set et årsregnskab før. */
.regn .slutsum th, .regn .slutsum td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 3px double var(--ink); }
.regn .slutsum th[scope="row"] { padding-left: 10px; }
/* Kun her bruges farve: en balance der ikke går op er ikke en nuance. */
.regn .afvigelse th, .regn .afvigelse td { color: var(--buoy); }

@media print {
  @page { size: A4 portrait; margin: 18mm 16mm; }
  .no-print, .site-header, .dash-topbar, .site-footer, .skip { display: none !important; }
  body { background: #fff; line-height: 1.4; }
  .section { padding: 0; }
  .wrap { max-width: none; padding: 0; }
  /* .page-head skjules IKKE -- den bærer h1 og dermed året. Den nulstilles i
     stedet, ellers æder den mørkeblå fuldbredde-blok toppen af side 1. */
  .page-head { background: none; color: var(--ink); padding: 0 0 12px; }
  .page-head::before { display: none; }
  .page-head h1 { font-size: 22px; }
  .regn-blok { border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 18px; break-inside: avoid; }
  #balance, #indskudsbevis { break-before: page; }
  .regn thead { display: table-header-group; }
  .regn tbody { break-inside: avoid; }
  .print-only { display: block; }
  /* Et udkast bliver rundsendt. Uden fixed ville UDKAST kun stå på side 1, og
     balancen og indskudsbeviset (som tvinger sideskift) ville se ud som et
     godkendt regnskab når nogen river arkene fra hinanden. */
  .udkast-band {
    position: fixed; top: 0; left: 0; right: 0;
    border: 0; border-bottom: 1px solid #000; color: #000;
    margin: 0; padding: 0 0 4px; border-radius: 0;
  }
  .regn-blok:first-of-type { margin-top: 8mm; }
}

/* ---------- Regnskab: medlemsadgang og mobil ---------- */

/* Handlingsrække, adskilt fra ankernavigationen ovenover. */
.regn-handlinger { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.regn-handlinger form { margin: 0; }

/* Tabellen ruller inde i sit eget kort i stedet for at trække hele dokumentet
   sidelæns. Tre beløbskolonner à 130px med nowrap giver et minimum omkring
   520px; en telefon har 279px inde i kortet. Samme mønster som .dock-wrap. */
.regn-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.regn { min-width: 520px; }
/* Et rulbart område der ikke kan få fokus er et WCAG 2.1.1-brud: en
   tastaturbruger kan ikke nå kolonnerne til højre. */
.regn-scroll:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }

/* Ankrene i .regn-nav lander ellers under det klæbende sidehoved på 66px.
   Samme værdi som .bylaws section allerede bruger. */
.regn-blok { scroll-margin-top: 90px; }

/* Tre faner på 375px måler omkring 315px mod 343px tilgængelige. Uden ombrydning
   er der endnu en vandret scroll på en 320px-skærm. */
.dash-tabs { flex-wrap: wrap; }

/* Årvælgeren er medlemmets primære kontrol på siden. 36px høje mål med 4px
   imellem er en fejltryks-generator; WCAG 2.5.5 vil have 44px. */
.regn-aar { gap: 8px; }
.regn-aar a { min-height: 44px; display: inline-flex; align-items: center; }
.regn-nav a { min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

@media print {
  .regn-scroll { overflow: visible; }
  .regn { min-width: 0; }
}

/* Grundtalssiden: omkring tredive felter i én formular. To kolonner på
   skrivebordet halverer den lodrette afstand, uden at røre .field's fokusring
   eller feltstørrelse. */
.grundtal { max-width: none; }
.grundtal-felt { margin-bottom: 14px; }
.grundtal-felt input { font-variant-numeric: tabular-nums; text-align: right; }
@media (min-width: 700px) {
  .grundtal .grundtal-felt { display: grid; grid-template-columns: 1fr 200px; align-items: center; gap: 16px; }
  .grundtal .grundtal-felt label { margin: 0; }
}