/* Auth pages: login, signup, reset, confirm — CALM design (sage/zinc canon).
   2026-07-12: the old terracotta design was DELETED and the three JS-injected
   calm overlays (calm-login-polish / calm-signup-polish + calm-auth-card-polish /
   calm-reset-polish) were folded in as the ONE static base. Page scoping:
   .auth-page--login (logind), .auth-page--split (opret),
   .auth-page--reset (nulstil), .auth-page--confirm (bekraeft). */

/* ===== CANVAS =====
   iOS' overscroll (rubber-band) og toolbar-scroll maler området over/under
   dokumentet med html-elementets baggrund — er den kølig hvid, ser mobilen
   et hårdt skifte til "hvidt ingenting" under kortet (Morten 12/7, nulstil+
   opret-screenshots). Mal canvas i gradientens bundfarve. auth.css loades
   kun af de fem auth-sider, så html-reglen er scoped nok. */
html {
  background: #F0EAE4;
}

html[data-theme="dark"] {
  /* 17/7 craft: varm-sort canvas under køligt zinc-kort inverterede lysets
     temperatur-logik — canvas følger nu kortets zinc-familie. */
  background: #121214;
}

/* ===== TOKENS ===== */
.auth-page {
  --auth-accent: #4A7A68;            /* sage — links + primary */
  --auth-accent-hover: #3D6B57;
  --auth-accent-soft: rgba(74, 122, 104, 0.10);
  --auth-accent-border: rgba(74, 122, 104, 0.35);
  --auth-anchor: #3A2F26;            /* headings */
  --auth-text: #5C4D43;              /* body */
  /* 17/7 craft: muted var #9A8E82 = 3.17:1 på kortet — under AA for
     instruktionslinjen ordblinde skal læse. #786E62 = 4.95:1, stadig varm/muted. */
  --auth-text-muted: #786E62;
  --auth-border: rgba(228, 220, 212, 0.60);
  /* 17/7 craft: felt-grænsen lå på 1.30:1 mod kortet (sub-perceptuel).
     Varm-grå 0.65 = markant fastere uden at blive hård. */
  --auth-border-strong: rgba(154, 142, 130, 0.65);
  --auth-bg: #FFFEFB;                /* canvas */
  --auth-surface: #FBF8F2;
  --auth-caution: #A6594B;           /* errors keep the warm caution tone */
  --auth-placeholder: #786E62;
  --auth-radius-card: 14px;
  --auth-radius-pill: 999px;
  --auth-radius-icon: 12px;
  --auth-radius-chip: 10px;
}

[data-theme="dark"] .auth-page {
  --auth-accent: #b8c6c0;            /* sage-mist links; solid buttons stay #4A7A68 */
  /* 17/7 logind-craft: hover DAEMPEDE i dark (#b8c6c0 ~10:1 -> #4A7A68
     ~3.6:1) mens light korrekt vinder kontrast paa hover - retningen skal
     vaere ens: hover lysner i dark. Kun link-hovers forbruger tokenen;
     solide knapper har egne literals. */
  --auth-accent-hover: #cfd9d4;
  /* 17/7 craft: mørk accent-soft manglede — fokus-halo, success-disc og
     hover-tints var usynlige på #0a0a0a/#18181b (opret fik hånd-patch,
     nulstil aldrig). Mist-baseret tint virker på begge brønde. */
  --auth-accent-soft: rgba(184, 198, 192, 0.16);
  --auth-anchor: #e4e4e7;
  --auth-text: #a1a1aa;
  --auth-text-muted: #8E8E97;        /* 17/7: 3.67:1 → 5.46:1 (AA) */
  --auth-border: rgba(255, 255, 255, 0.08);
  --auth-border-strong: rgba(255, 255, 255, 0.12);
  --auth-bg: #18181b;
  --auth-surface: #26262b;
  --auth-placeholder: #8E8E97;
}

/* ===== PAGE SHELL ===== */
.auth-page {
  /* QA 9/7: height+overflow:hidden klippede kortet top/bund på lave desktop-
     viewports (laptop ~650px) UDEN scroll-mulighed. min-height + overflow-y:
     auto = centreret når der er plads, scroll når der ikke er. safe center
     forhindrer flex-centrering i at skubbe toppen uden for skærmen. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  align-items: safe center;
  justify-content: center;
  background: linear-gradient(180deg, #FAF7F3 0%, var(--pill-bg, #F0EAE4) 100%);
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--auth-text);
  -webkit-font-smoothing: antialiased;
}

.auth-page::before {
  content: '';
  position: fixed;
  top: -120px;
  right: -80px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 168, 154, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.auth-page::after {
  content: '';
  position: fixed;
  bottom: -100px;
  left: -60px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 197, 184, 0.09) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.auth-page--login {
  flex-direction: column;
}

.auth-header-actions {
  display: contents;
}

/* ===== CARD ===== */
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--auth-bg);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-card);
  padding: 28px 22px 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 2px rgba(58, 47, 38, 0.04),
    0 8px 28px rgba(58, 47, 38, 0.06),
    0 24px 60px rgba(58, 47, 38, 0.05);
  position: relative;
  z-index: 1;
}

/* Fuldt wordmark-logo (Morten 12/7: PC-versionen — ikon + «SkrivSikkert»
   under — også på mobil; erstattede logo-icon.webp på logind/nulstil) */
.auth-page .auth-logo-icon {
  display: block;
  width: 76px;
  height: auto;
  margin: 0 auto 14px;
}

.auth-title {
  text-align: center;
  font-family: system-ui, sans-serif;
  /* 23/800 = DEN fælles titel-skala på logind/opret/nulstil (micro-align 12/7) */
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--auth-anchor);
  margin: 0 0 22px 0;
  line-height: 1.2;
}

.auth-subtitle {
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--auth-text-muted);
  margin: 0 0 22px 0;
  line-height: 1.5;
  font-weight: 400;
  /* 17/7 craft: 61-tegns linje + ét-ords orphan («adgangskode») under en
     balanceret titel — progressive enhancement, nul regression. */
  text-wrap: balance;
}

/* ===== OAUTH BUTTONS ===== */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 16px;
  background: var(--auth-bg);
  border: 1px solid var(--auth-border-strong);
  border-radius: var(--auth-radius-pill);
  font-family: system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--auth-text);
  cursor: pointer;
  box-shadow: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.google-btn:hover {
  background: var(--auth-surface);
  border-color: var(--auth-accent-border);
  transform: translateY(-1px);
}

/* 17/7 logind-craft: tryk manglede - knappen blev haengende paa -1px under
   pres; samme 80ms press-in-asymmetri som CTA'en (#6043). */
.google-btn:active {
  transform: translateY(0);
  transition-duration: 80ms;
}

.google-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.google-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.google-btn + .google-btn {
  margin-top: 10px;
}

.apple-login-btn {
  background: #000;
  color: #fff;
  border-color: #000;
}

.apple-login-btn svg {
  width: 31px;
  height: 44px;
  flex-shrink: 0;
}

.apple-login-btn:focus-visible span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.apple-login-btn:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
}

.apple-login-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0;
  color: var(--auth-text-muted);
  font-family: system-ui, sans-serif;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--auth-border);
}

/* ===== FORM ===== */
.auth-form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--auth-text);
  line-height: 1.4;
  margin-bottom: 7px;
}

.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.form-label-row a {
  font-family: system-ui, sans-serif;
  font-size: 14px;
  color: var(--auth-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color 160ms ease;
}

.form-label-row a:hover {
  color: var(--auth-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%;
  height: 46px;
  padding: 10px 14px;
  font-family: system-ui, sans-serif;
  font-size: 16px; /* 16 = ingen iOS-fokus-zoom; .input-klassen (logind) er 15 */
  /* 17/7 craft: hvilende felt i creme-brønden (grænsen lå 1.30:1 mod kortet);
     fokus (312) løfter fortsat til hvid --auth-bg */
  background: var(--auth-surface);
  border: 1px solid var(--auth-border-strong);
  border-radius: var(--auth-radius-card);
  color: var(--auth-anchor);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-form input:hover {
  border-color: var(--auth-accent-border);
}

.auth-form input:focus,
.auth-form input:focus-visible {
  outline: none;
  border-color: var(--auth-accent);
  background: var(--auth-bg);
  box-shadow: 0 0 0 3px var(--auth-accent-soft);
}

.auth-form input::placeholder {
  color: var(--auth-placeholder);
  font-family: system-ui, sans-serif;
  font-style: normal;
  opacity: 1;
}

.password-wrap {
  position: relative;
}

.password-wrap input[type="password"],
.password-wrap input[type="text"] {
  padding-right: 54px;
}

.password-toggle {
  position: absolute;
  /* 17/7 i18n: logisk prop — flipper korrekt i RTL (ar) */
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  /* 17/7 craft: eneste kontrol under sitets 44px-kanon (var 36). Plads
     findes: padding-right 52 ≥ 6 + 44. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-radius: var(--auth-radius-icon);
  cursor: pointer;
  color: var(--auth-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 160ms ease, color 160ms ease;
}

.password-toggle:hover {
  background: var(--auth-accent-soft);
  color: var(--auth-accent);
}

/* Mortens dom 17/7: INGEN synlige fokus-ringe (AI-tell; "think Apple").
   De box-shadow-dobbeltringe der stod her er fjernet igen — genindfør dem
   aldrig. Felternes bløde accent-soft-glød er den eneste fokus-affordance. */
.password-toggle svg {
  width: 18px;
  height: 18px;
}

/* 36px-knapperne løftes til 44px effektivt touch-mål (opret-craft 17/7) */
.password-toggle::before,
.auth-page--split .auth-email-back::before {
  content: '';
  position: absolute;
  inset: -4px;
}

/* ===== FLOATING LABELS ===== */
.auth-field {
  position: relative;
  margin-bottom: 16px;
}

.auth-field input {
  width: 100%;
  height: 56px;
  padding: 26px 14px 7px;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
  /* 17/7 craft: felt-fyld == kort-fyld gjorde grænsen usynlig; hvilende
     felt ligger nu i creme-brønden og LØFTER til hvid ved fokus. */
  background: var(--auth-surface);
  border: 1px solid var(--auth-border-strong);
  border-radius: var(--auth-radius-card);
  color: var(--auth-anchor);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  box-sizing: border-box;
}

.auth-form .auth-field input {
  height: 56px;
  padding: 26px 14px 7px;
}

.auth-field input:hover {
  border-color: var(--auth-accent-border);
}

.auth-field input:focus,
.auth-field input:focus-visible {
  outline: none;
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px var(--auth-accent-soft);
}

.auth-field input::placeholder {
  color: transparent !important;
  font-style: normal !important;
}

.auth-field > label {
  position: absolute;
  /* 17/7 i18n: logisk prop - flipper korrekt i RTL (ar).
     17/7 logind-craft: 15+2px label-padding satte glyfen paa x=17 mod
     input-tekstens x=15 (1px kant + 14 padding) - stakken var 2px ude
     af lod. 13+2 = 15, label og vaerdi deler lodlinje i begge tilstande. */
  inset-inline-start: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-family: system-ui, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  color: var(--auth-placeholder);
  pointer-events: none;
  /* 17/7 craft: var `all 0.2s` + Material-kurven — `all` animerede font-weight
     (glyf-shimmer på variable systemfonte); ease-out-dominant kurve = roligere.
     Weight snapper nu usynligt inde i size-skiftet. */
  transition: top 180ms cubic-bezier(0.2, 0, 0, 1),
              transform 180ms cubic-bezier(0.2, 0, 0, 1),
              font-size 180ms cubic-bezier(0.2, 0, 0, 1),
              color 160ms ease;
  transform-origin: left center;
  background: transparent;
  padding: 0 2px;
  z-index: 1;
  line-height: 1;
}

.auth-field input:focus ~ label,
.auth-field input:not(:placeholder-shown) ~ label {
  top: 8px;
  transform: translateY(0);
  font-size: 11px;
  font-weight: 700;
  color: var(--auth-accent);
}

.auth-field input:-webkit-autofill ~ label {
  top: 8px;
  transform: translateY(0);
  font-size: 11px;
  font-weight: 700;
  color: var(--auth-accent);
}

/* 17/7 craft: Chromes stock-blå autofill-flod (#E8F0FE) var sidens mest
   almindelige live-tilstand (gemt email på en reset-side). Inset-fyld i
   sidens egne farver; fokus-varianten KOMBINERER ring + fyld, ellers
   taber den ene skygge til den anden. */
.auth-page input:-webkit-autofill,
.auth-page input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--auth-surface) inset;
  -webkit-text-fill-color: var(--auth-anchor);
  caret-color: var(--auth-anchor);
}
.auth-page input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 3px var(--auth-accent-soft),
                      0 0 0 1000px var(--auth-bg) inset;
  -webkit-text-fill-color: var(--auth-anchor);
  caret-color: var(--auth-anchor);
}
html[data-theme="dark"] .auth-page input:-webkit-autofill,
html[data-theme="dark"] .auth-page input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset;
  -webkit-text-fill-color: #e4e4e7;
  caret-color: #e4e4e7;
}
html[data-theme="dark"] .auth-page input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 3px var(--auth-accent-soft),
                      0 0 0 1000px #0a0a0a inset;
  -webkit-text-fill-color: #e4e4e7;
  caret-color: #e4e4e7;
}

.auth-field:has(.password-toggle) input {
  padding-inline-end: 52px;
}

.auth-form .auth-field:has(.password-toggle) input {
  padding-inline-end: 52px;
}

.auth-field .password-toggle {
  top: 28px;
}

/* ── TOTP floating label variant ── */
.auth-field--totp input {
  text-align: center;
  font-size: 24px;
  letter-spacing: 8px;
  font-weight: 650;
  padding-top: 26px;
}

.auth-field--totp > label {
  /* inline-start:auto — ellers strækker basens inset-inline-start:15px
     labelen mellem begge kanter i RTL (left+inline-start = to ankre) */
  inset-inline-start: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

.auth-field--totp input:focus ~ label,
.auth-field--totp input:not(:placeholder-shown) ~ label,
.auth-field--totp input:-webkit-autofill ~ label {
  top: 8px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 11px;
}

/* ── OTP code input — large centered text ── */
.auth-page .auth-field input.otp-code-input {
  height: auto;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 8px;
  text-align: center;
  /* 17/7 craft: trailing letter-spacing på sidste ciffer skubbede de 6
     cifre 4px venstre for ægte center — indent kompenserer. */
  text-indent: 8px;
  padding: 32px 14px 12px;
  line-height: 28px;
}
.auth-page .auth-field input.otp-code-input::placeholder {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
}
/* 19/7 (Mortens sweep-fund): -otp-labelen var PERMANENT shrunk (top:8 uden
   state-selector) → tomt kodefelt = høj tom boks med mini-label. Nu ægte
   floating som --totp-tvillingen (bekraeft): tom = placeholder i midten,
   fokus/udfyldt = mini-label top-center. inline-start:auto = RTL-ankerfixet
   (basens inset-inline-start + left = to ankre = stretch). Gælder BEGGE
   -otp-felter (nulstil + oprets confirm-view — verificeret i begge). */
.auth-page .auth-field.auth-field-otp label {
  inset-inline-start: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

.auth-page .auth-field.auth-field-otp input:focus ~ label,
.auth-page .auth-field.auth-field-otp input:not(:placeholder-shown) ~ label,
.auth-page .auth-field.auth-field-otp input:-webkit-autofill ~ label {
  top: 8px;
  transform: translate(-50%, 0);
  font-size: 11px;
  font-weight: 700;
  color: var(--auth-accent);
}
.auth-page .auth-otp-resend {
  text-align: center;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--auth-text-muted);
}
.auth-page .auth-otp-resend a {
  font-weight: 600;
  color: var(--auth-accent);
  margin-left: 4px;
  text-decoration: none;
  transition: color 160ms ease;
}
.auth-page .auth-otp-resend a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ── Password strength bar ── */
.password-strength {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.password-strength.is-visible {
  opacity: 1;
}

/* Keep the neutral track visible before typing. This connects the requirement
   to the password field while preserving the fixed height and avoiding reflow. */
.password-strength:not([data-strength]) {
  opacity: 1;
}

.password-strength-segment {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--auth-border-strong);
  transition: background 160ms ease;
}

.password-strength[data-strength="weak"] .password-strength-segment:nth-child(1) {
  background: #D4A89A;
}

.password-strength[data-strength="ok"] .password-strength-segment:nth-child(1),
.password-strength[data-strength="ok"] .password-strength-segment:nth-child(2) {
  background: #C4A46A;
}

.password-strength[data-strength="strong"] .password-strength-segment {
  /* opret-craft 17/7: #6B9E7D var hue ~141° mod accentens ~157° — to nabo-grønne
     der ikke stemte. #62907F = accent-hue, lysnet til 3px-baren. */
  background: #62907F;
}

.password-strength-label {
  font-family: system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  min-height: 16px;
  color: var(--auth-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ===== CONSENT CHECKBOX ===== */
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px 0 0;
  padding: 0;
  min-height: 0;
  height: auto;
  cursor: pointer;
}

.form-check-input {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  flex: 0 0 18px;
  /* opret-craft 17/7: border-strong komposit ~1.3:1 mod kortet — sub-perceptuel
     på en tom 18px-boks (WCAG non-text kræver 3:1). #9A8E82 = 3.2:1, stadig varm. */
  border: 1.5px solid #9A8E82;
  border-radius: 4px;
  background: var(--auth-bg);
  accent-color: var(--auth-accent);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
  position: relative;
}

/* Usynligt 44px-hitfelt (opret-craft 17/7): eneste PÅKRÆVEDE kontrol var sidens
   mindste mål (18px). ::after er optaget af fluebenet; ::before er ledig. */
.form-check-input::before {
  content: '';
  position: absolute;
  inset: -13px;
}

.form-check-input:checked {
  background: #4A7A68;
  border-color: #4A7A68;
}

/* The generic text-input focus rule above (.auth-form input:focus, written for email/password) also
   matches this checkbox — same form, same `input` type selector — and repaints it with
   background: var(--auth-bg) at (0,2,1), which out-ranks .form-check-input:checked at (0,2,0).
   A box that WAS checked therefore kept its unchecked cream fill for as long as it held focus, and
   the tick is white (:checked::after), so white-on-cream read as "the click did nothing"; it only
   appeared once the user moved focus to another field. Re-assert the checked fill for the focused
   states at a higher specificity. The focus RING from that rule still applies, so keyboard users
   keep their indicator; only fill and border are taken back. Dark mode overrides this later
   (line ~2460) at equal specificity and still wins. */
.auth-form .form-check-input:checked,
.auth-form .form-check-input:checked:focus,
.auth-form .form-check-input:checked:focus-visible {
  background: #4A7A68;
  border-color: #4A7A68;
}

.form-check-input:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #FFFEFB;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-check-label {
  font-family: system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--auth-text);
  line-height: 1.45;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.form-check-label a {
  color: var(--auth-accent);
  font-weight: 600;
  text-decoration: none;
}

.form-check-label a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.form-check-label a:focus-visible {
  outline: none;
}

/* ===== PRIMARY CTA ===== */
.auth-form .btn,
.auth-form .btn.btn-primary,
.auth-page .btn.btn-primary {
  width: 100%;
  height: 44px;
  min-height: 44px;
  border-radius: var(--auth-radius-pill);
  margin-top: 6px;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
  background: #4A7A68;
  background-image: none;
  color: #FFFFFF;
  border: 0;
  outline: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 6px 18px rgba(74, 122, 104, 0.25);
  /* 17/7: opacity med — disabled/loading-skiftet snappede i én frame */
  transition: background 160ms ease, transform 160ms ease,
              box-shadow 160ms ease, opacity 160ms ease;
}

.auth-form .btn:hover,
.auth-form .btn.btn-primary:hover,
.auth-page .btn.btn-primary:hover {
  background: #3D6B57;
  color: #FFFFFF;
  border: 0;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 10px 24px rgba(74, 122, 104, 0.30);
}

/* 17/7 craft: translateY(0) fra hvile = no-op → tryk var dødt på touch og
   hover-skyggen blev sidddende oppustet under pres (fysisk forkert).
   Hurtig press-in (80ms), normal 160ms release = korrekt asymmetri. */
.auth-page .btn.btn-primary:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 3px 10px rgba(74, 122, 104, 0.22);
  transition-duration: 80ms;
}

.auth-form .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 6px 18px rgba(74, 122, 104, 0.15);
}

/* Mortens dom 17/7: ring-lagene fjernet — kun knappens egne skygger. */
.auth-form .btn:focus-visible,
.auth-page .btn.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 6px 18px rgba(74, 122, 104, 0.25);
}

/* ===== MESSAGES ===== */
.auth-message {
  text-align: center;
  padding: 10px 14px;
  /* 17/7 logind-craft: 12px var eneste flade udenfor 14px-radius-familien
     (kort/felter/dropdown) - fejlboksen staar midt i felt-kolonnen. */
  border-radius: var(--auth-radius-card);
  font-family: system-ui, sans-serif;
  font-size: 13.5px;
  margin-top: 16px;
  display: none;
  line-height: 1.4;
}

/* 17/7 logind-craft: sidens mest stressede oejeblik var det eneste med
   0ms-motion (display-klip). display:none->block retriggr'er animationen
   pr. visning; reduced-motion-blokken draeber animationer globalt. */
@keyframes auth-msg-in {
  from { opacity: 0; transform: translateY(-2px); }
}

.auth-message.error,
.auth-message.success,
.auth-message.info,
.auth-message[data-type] {
  animation: auth-msg-in 180ms cubic-bezier(0.2, 0, 0, 1);
}

.auth-message.success,
.auth-message[data-type="success"] {
  display: block;
  border: 1px solid var(--auth-accent-soft);
  background: var(--auth-accent-soft);
  /* 17/7: accent på egen 10%-wash = 4.30:1 (under AA); hover-tonen = 5.37:1 */
  color: #3D6B57;
}

.auth-message.error,
.auth-message[data-type="error"] {
  display: block;
  border: 1px solid rgba(166, 89, 75, 0.25);
  background: rgba(166, 89, 75, 0.06);
  color: var(--auth-caution);
}

.auth-message.info,
.auth-message[data-type="info"] {
  display: block;
  border: 1px solid rgba(74, 122, 104, 0.18);
  background: rgba(74, 122, 104, 0.08);
  color: var(--auth-accent);
}

.auth-message.error a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Links i beskeder er ALTID sage — også inde i error (calm-injector-arven:
   overlayet slog error-inherit med !important; statisk = sidst + (0,2,1)). */
.auth-page .auth-message a {
  color: #4A7A68;
  font-weight: 600;
}

/* ── Aktiv «konto findes»-notice — klikbare handlinger (QA #3 / #5422 r2) ── */
.auth-msg-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.auth-msg-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  box-sizing: border-box;
  border-radius: var(--auth-radius-chip);
  background: #4A7A68;
  color: #FFFEFB;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.auth-msg-btn:hover { background: #3D6B57; }
.auth-msg-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--auth-accent);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== FOOTER LINKS ===== */
.auth-links {
  text-align: center;
  margin-top: 18px;
  font-family: system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--auth-text);
}

.auth-links a {
  color: var(--auth-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color 160ms ease;
}

.auth-links a:hover {
  color: var(--auth-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.auth-links a,
.form-label-row a {
  display: inline-flex;
  align-items: center;
  padding: 0;
  min-height: 44px;
  line-height: 1.2;
}

/* 17/7 logind-craft: dobbelt-daempning (ink .52 x opacity .78 = 1.96:1,
   mobil x.55 = 1.5:1) gjorde flugtvejen for gamle-platform-brugere reelt
   usynlig - een daempning (ink .80 = 4.55:1), stadig klart tertiaer mod
   broedtekstens 8:1. top/right 16 + 44px = samme midterlinje og indryk
   som sprogpillen (headeren delte foer to centerlinjer, 4px forskudt). */
.old-ss-link {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(92, 77, 67, 0.80);
  text-decoration: none;
  opacity: 1;
  line-height: 1.2;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color 160ms ease, opacity 160ms ease;
}

.old-ss-link:hover {
  color: #4A7A68;
  opacity: 1;
  background: transparent !important;
}

.old-ss-link:focus-visible {
  outline: 1px solid rgba(74, 122, 104, 0.45);
  outline-offset: 4px;
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== LANGUAGE PICKER ===== */
.auth-lang-picker {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 100;
}

/* ===== TEMA-CHIP (Mortens go 19/7) =====
   Ikon-chip i utility-hjørnet, deler .auth-lang-btn-stilen 1:1. Picker bliver
   en chip-klynge (flex) så alle varianternes hjørne-positionering bærer begge
   chips gratis. Måne i lys, sol i dark — swap er ren CSS på data-theme. */
.auth-lang-picker {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.auth-theme-btn {
  justify-content: center;
  padding: 8px;
}

.auth-theme-btn .theme-ic--sun { display: none; }
[data-theme="dark"] .auth-theme-btn .theme-ic--sun { display: block; }
[data-theme="dark"] .auth-theme-btn .theme-ic--moon { display: none; }

.auth-lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-chip);
  background: var(--auth-bg);
  cursor: pointer;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--auth-text);
  transition: background 160ms ease, border-color 160ms ease;
}

.auth-lang-btn:hover {
  background: var(--auth-surface);
  border-color: var(--auth-accent-border);
}

.auth-lang-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.auth-lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 170px;
  background: var(--auth-bg);
  border: 1px solid var(--auth-border-strong);
  border-radius: var(--auth-radius-card);
  box-shadow:
    0 8px 24px rgba(58, 47, 38, 0.08),
    0 24px 60px rgba(58, 47, 38, 0.06);
  padding: 6px;
  z-index: 101;
}

.auth-lang-dropdown.is-open {
  display: block;
  /* 17/7 craft: eneste overlay på siden teleporterede — enter-only motion
     (instant luk er korrekt for dismissal) */
  animation: authDropIn 160ms cubic-bezier(0.2, 0, 0, 1);
}

@keyframes authDropIn {
  from { opacity: 0; transform: translateY(-4px); }
}

.auth-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: none;
  border-radius: var(--auth-radius-chip);
  background: transparent;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--auth-text);
  text-align: start;
  transition: background 160ms ease;
}

/* 17/7 logind-craft: hover var stylet identisk med is-active (samme
   accent-tint) - svaev over "English" lignede valgt ved siden af det
   aegte valg. Hover = stille surface; kun valget baerer tinten. Aktiv-
   teksten loeftes 4.28:1 -> 5.37:1 (AA paa tintet raekke); dark
   genindsaetter mist. */
.auth-lang-option:hover {
  background: var(--auth-surface);
  color: var(--auth-text);
}

.auth-lang-option.is-active,
.auth-lang-option[aria-selected="true"] {
  background: var(--auth-accent-soft);
  color: #3D6B57;
}

.auth-lang-option:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--auth-accent);
}

.auth-lang-option.is-active {
  font-weight: 600;
}

/* ===== SHARED INPUT (.input on auth pages) ===== */
.auth-page .input {
  background: var(--auth-bg);
  border: 1px solid var(--auth-border-strong);
  border-radius: var(--auth-radius-card);
  height: 46px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--auth-anchor);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-page .input::placeholder {
  color: var(--auth-placeholder);
}

.auth-page .input:hover {
  border-color: var(--auth-accent-border);
}

.auth-page .input:focus,
.auth-page .input:focus-visible {
  border-color: var(--auth-accent);
  background: var(--auth-bg);
  box-shadow: 0 0 0 3px var(--auth-accent-soft);
  outline: none;
}

/* ===== SUCCESS VIEW (nulstil) ===== */
.auth-success-view {
  text-align: center;
  padding: 20px 0;
}

.auth-success-view svg {
  display: block;
  margin: 0 auto 16px;
}

.auth-success-view .auth-title,
.auth-success-view .auth-subtitle {
  text-align: center;
}

.auth-success-view .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  text-decoration: none;
}

.auth-page #view-success {
  text-align: center;
}

.auth-page #view-success svg {
  width: 56px;
  height: 56px;
  stroke: var(--auth-accent);
  color: var(--auth-accent);
  background: var(--auth-accent-soft);
  border-radius: 50%;
  padding: 12px;
  margin: 0 auto 14px;
  display: block;
  box-sizing: border-box;
}

/* 17/7 craft: flowets følelsesmæssige payoff — ét roligt draw-in af fluebenet
   (dash-setup KUN under no-preference, ellers efterlader animation:none
   offset=13 = usynligt flueben for reduced-motion-brugere). */
@media (prefers-reduced-motion: no-preference) {
  .auth-page #view-success polyline {
    stroke-dasharray: 13;
    stroke-dashoffset: 13;
    animation: authTick 280ms 140ms cubic-bezier(0.2, 0, 0, 1) forwards;
  }
}

@keyframes authTick {
  to { stroke-dashoffset: 0; }
}

.auth-page #view-success .auth-title {
  color: var(--auth-anchor);
}

.auth-page #view-success .auth-subtitle {
  margin-bottom: 18px;
}

/* ===== EXTENSION CTA (below login card) ===== */
/* 17/7 logind-craft: ~19px-hoej hitbox -> 44 (margin 24->12 holder
   tekst-centret +-0.5px); 12.5px funktionelt link paa gradient-bunden
   kraever egen ink (muted-token = 4.3:1 dér; #6E6255 = 5.0:1) - dark
   genbruger muted-tokenen (5.5:1 paa canvas). */
.auth-extension-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 12px;
  font-family: system-ui, sans-serif;
  font-size: 12.5px;
  color: #6E6255;
  text-decoration: none;
  text-align: center;
  transition: color 160ms ease;
}

.auth-extension-link:hover {
  color: var(--auth-accent);
}

.auth-extension-link .calm-chrome-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ═════════ LOGIN PAGE (.auth-page--login) ═════════ */

.auth-page--login .auth-card {
  /* 420 = samme kortbredde som nulstil (micro-align 12/7) */
  max-width: 420px;
}

/* «Glemt kodeord?» under kodeord-feltet, højrestillet (floating-labels
   afløste label-rækken der før bar linket) */
/* 17/7 logind-craft: panik-linket var sidens mindste maal (~18px hoej
   hitbox, 13px = eneste smaatekst udenfor 13.5-skalaen). 44px-boksen
   vokser ind i luften omkring glyfen: -19+22 == -6+9 = samme tekst-center,
   CTA-afstand uaendret. */
.auth-forgot-row {
  text-align: right;
  margin: -19px 2px 1px;
}

.auth-forgot-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--auth-accent);
  text-decoration: none;
}

.auth-forgot-row a:hover {
  text-decoration: underline;
}

/* Sprogvælgeren bor i SAMME hjørne på alle tre sider: øverst til højre
   (opret: fladens hjørne; logind+nulstil: viewport-hjørnet). Den gamle
   SkrivSikkert-genvej flytter til venstre. Kun desktop — mobil-logind
   beholder in-flow-headeren. */
@media (min-width: 641px) {
  .auth-page--login .auth-lang-picker {
    position: fixed;
    top: 16px;
    right: 16px;
    left: auto;
    z-index: 50;
  }

  .auth-page--login .auth-lang-picker .auth-lang-dropdown {
    left: auto;
    right: 0;
  }

  .auth-page--login .old-ss-link {
    /* 16 = pillens indryk spejlet (headeren delte foer 16/18) */
    left: 16px;
    right: auto;
  }
}

.auth-page--login .auth-privacy-note {
  display: none;
}

/* 17/7 logind-craft: "Logger ind..." stod i 50% hvid-paa-salvie over creme
   (= 1.5:1) - travlhed lignede doed knap. Login-CTA'en er kun disabled
   under selve submittet (bevist i logind.html), saa fuld ink + progress-
   cursor er sikker her; OAuth-knappernes 0.5 (parkeret = korrekt
   semantik) roeres ikke. */
.auth-page--login #login-btn:disabled,
.auth-page--split #email-form .btn.btn-primary:disabled,
.auth-page--split #signup-verify-btn:disabled {
  opacity: 1;
  cursor: progress;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 4px 14px rgba(74, 122, 104, 0.18);
}

/* ═════════ RESET + CONFIRM PAGES ═════════ */

.auth-page--reset,
.auth-page--confirm {
  padding: 24px;
}

.auth-page--reset > .auth-card,
.auth-page--confirm > .auth-card {
  max-width: 420px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Micro-align 12/7: reset/confirm arver nu BASENS felt-geometri (56px,
   padding 26/14/7, center-label → 8px/11px) og titel-skala (23/800) —
   de lokale 48px/22px-varianter var «det lidt underlige» Morten så.
   Kun margenen under titlen er sidespecifik (undertitlen står tæt). */
.auth-page--reset .auth-title,
.auth-page--confirm .auth-title {
  margin: 0 0 8px 0;
}

/* 17/7 craft: felt→CTA var 20px (16+4) = tredje nær-ved-værdi mod sidens
   to-trins-rytme (16 i form / 22 sektion). Form-scope så success-viewets
   egen 20px CTA-margin (før dræbt af denne regel) får sit designede luft. */
.auth-page--reset .auth-form .btn.btn-primary,
.auth-page--confirm .auth-form .btn.btn-primary {
  margin-top: 0;
}

/* 17/7 craft: hårlinjen var optisk limet til knappen (18 over / 38 til
   link-tekst under) — 22/22 og linjen tilhører linket den introducerer. */
.auth-page--reset .auth-links,
.auth-page--confirm .auth-links {
  margin-top: 22px;
  padding-top: 0;
  border-top: 1px solid var(--auth-border);
}

/* 17/7 craft: view-skift var fire én-frame display-klip på en side hvor
   alt andet easer. display:none→block retriggr'er animationen nativt.
   #view-request bevidst undtaget (racer boot-reveal). */
@keyframes authViewIn {
  from { opacity: 0; transform: translateY(6px); }
}

.auth-page--reset #view-otp,
.auth-page--reset #view-reset,
.auth-page--reset #view-success {
  animation: authViewIn 240ms cubic-bezier(0.2, 0, 0, 1);
}

.auth-page--reset .auth-links a,
.auth-page--confirm .auth-links a {
  gap: 6px;
}

/* 17/7 i18n/a11y: live-region PERMANENT i acc-træet — regioner der fødes
   display:none og vises+fyldes i samme tick oplæses upålideligt (VoiceOver).
   JS rydder nu med textContent='' (aldrig style.display); tom region
   kollapser visuelt via :empty i stedet for at forlade træet. */
.auth-page--reset .auth-message,
.auth-page--confirm .auth-message {
  display: block;
  margin-bottom: 14px;
}

.auth-page--reset .auth-message:empty,
.auth-page--confirm .auth-message:empty {
  padding: 0;
  margin: 0;
  border: 0;
  min-height: 0;
}

/* Højre-pinnet picker på reset/confirm — dropdown skal åbne MOD VENSTRE,
   ellers klippes menuen ~70px af viewport-kanten (QA 9/7). */
.auth-page--reset .auth-lang-picker,
.auth-page--confirm .auth-lang-picker {
  position: fixed;
  top: 16px;
  right: 16px;
  left: auto;
  z-index: 50;
}

.auth-page--reset .auth-lang-picker .auth-lang-dropdown,
.auth-page--confirm .auth-lang-picker .auth-lang-dropdown {
  left: auto;
  right: 0;
}

/* (17/7: død height:36px-regel fjernet — tabte til basens min-height:44px
   og pillen har altid shippet 44 ligesom logind) */

/* ═════════ SIGNUP SPLIT LAYOUT (.auth-page--split) ═════════ */

.auth-page.auth-page--split {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 64px;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 48px 32px;
  overflow-y: auto;
  overflow-x: visible;
  background: linear-gradient(180deg, #FAF7F3 0%, var(--pill-bg, #F0EAE4) 100%);
}

.auth-page--split .auth-value {
  flex: 1 1 540px;
  max-width: 540px;
  width: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 1;
}

.auth-value-content {
  max-width: 440px;
  width: 100%;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

/* Fuldt logo m. indbygget wordmark (Morten 12/7: kun logoet, ingen tekst ved siden af;
   88px = diskret afsender-mærke, ikke plakat — login-side-praksis er 32-64px høj) */
.auth-brand-logo {
  display: block;
  width: 88px;
  height: auto;
}

/* Mobil-ensretning 19/7: opret-kortet bærer et logind/nulstil-logo (.auth-logo-
   icon-kanonen) — men KUN ≤640; på tablet/desktop bærer panelet brandet. */
.auth-page--split .auth-card .auth-logo-icon {
  display: none;
}

.auth-value-heading {
  font-family: system-ui, sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--auth-anchor);
  margin: 0 0 14px 0;
}

.auth-value-accent {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  color: var(--auth-anchor);
}

.auth-value-body {
  font-family: system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--auth-text);
  max-width: 440px;
  margin: 0 0 28px 0;
}

/* Onboarding-videoen (selv-hostet, undertekster brændt ind) afløste de tre
   tekstrækker (Morten 12/7: vis produktet i stedet for at beskrive det —
   ordblinde-venligt; chips + trust-linje fjernet igen samme dag: støj). */
.auth-video {
  border: 1px solid var(--auth-border-strong);
  border-radius: var(--auth-radius-card);
  overflow: hidden;
  background: #141d19;
  margin: 0;
  box-shadow:
    0 1px 2px rgba(58, 47, 38, 0.04),
    0 8px 28px rgba(58, 47, 38, 0.06);
}

.auth-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.auth-side {
  flex: 0 0 420px;
  width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  z-index: 1;
}

.auth-page--split .auth-lang-picker {
  position: fixed;
  top: 16px;
  left: 16px;
  right: auto;
  z-index: 50;
}

.auth-page--split .auth-lang-btn {
  height: 36px; /* min-height 44 fra base klemmer til 44 — bevidst (touch target + injector-paritet) */
}

.auth-page--split .auth-card {
  margin: 0;
  width: 100%;
  max-width: 420px;
  padding: 28px 24px 22px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ═════ TO-PANEL-FLADEN — desktop (Morten 12/7: «he split it into two...
   that actually make sense»). Én samlet flade: venstre panel = varm sand
   m. logo/heading/undertekst/video, højre panel = kortet på hvid. Kun
   ≥961px — tablet-stakken og mobil-kort-alene er urørt, og basens
   .auth-side/.auth-lang-picker-regler består (kontrakt-pinnede). ═════ */
@media (min-width: 961px) {
  /* Grid frem for stretch-flex: fladen bliver kun så høj som det højeste
     panel (rækkehøjden) og centreres — stretch ville trække den til fuld
     viewport-højde pga. page'ns min-height:100dvh */
  .auth-page.auth-page--split {
    display: grid;
    /* minmax: fladen krymper roligt på 961-1060px-viewports i stedet for
       at flyde ud over page-paddingen */
    grid-template-columns: minmax(400px, 500px) minmax(380px, 460px);
    /* items SKAL stretche til rækkehøjden (basens align-items:center ville
       centrere dem hver for sig og bryde fladen); rækken selv centreres */
    align-items: stretch;
    align-content: center;
    justify-content: center;
    gap: 0;
  }

  .auth-page--split .auth-value {
    flex: none;
    max-width: none;
    width: auto;
    align-items: center;
    min-height: 620px;
    padding: 48px;
    background: #F5EEE4;
    border-radius: 24px 0 0 24px;
    box-shadow:
      0 1px 2px rgba(58, 47, 38, 0.04),
      0 8px 28px rgba(58, 47, 38, 0.06),
      0 24px 60px rgba(58, 47, 38, 0.05);
    /* Skyggen klippes ved sømmen — ellers overlapper panelernes skygger i
       zonen over/under fladen og tegner en mørk søm-sky (hostile r1 m2) */
    clip-path: inset(-120px 0 -120px -120px);
  }

  .auth-page--split .auth-value-content {
    max-width: 404px;
  }

  .auth-page--split .auth-side {
    flex: none;
    width: auto;
    align-items: stretch;
  }

  .auth-page--split .auth-card {
    max-width: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0;
    border-radius: 0 24px 24px 0;
    padding: 48px 40px 40px;
    box-shadow:
      0 1px 2px rgba(58, 47, 38, 0.04),
      0 8px 28px rgba(58, 47, 38, 0.06),
      0 24px 60px rgba(58, 47, 38, 0.05);
    clip-path: inset(-120px -120px -120px 0);
  }

  /* Pillen forankres i fladens hjørne i stedet for at hænge i viewporten */
  .auth-page--split .auth-lang-picker {
    position: absolute;
    top: 18px;
    right: 18px;
    left: auto;
  }

  [data-theme="dark"] .auth-page--split .auth-value {
    /* opret-craft 17/7: varm-brun #211E1A stod tilbage efter zinc-re-belysningen
       (#6058 kølede canvas+kort) → temperaturspring hen over fladens søm.
       #222225 = zinc-familien, panelet ét objekt med kortet igen. */
    background: #222225;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 36px rgba(0, 0, 0, 0.45);
  }
}

.auth-page--split .auth-card .auth-title {
  font-size: 23px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 22px 0;
}

/* opret-craft 17/7: titlen blev SLETTET i email-trinnet (visibility:hidden) →
   navnløs formular under en forældreløs tilbage-chip i et tomt 38px-bånd, og
   skærmlæsere landede i feltet uden overskrift. Behold den — mindre, centreret,
   friholdt for 36px-chippen. OTP-visningen skjuler stadig sin (senere regel). */
.auth-page--split .auth-card.is-email-active .auth-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  margin: 0;
  padding: 0;
}

.auth-page--split .auth-card.is-email-active .auth-card-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  min-height: 36px;
  margin-bottom: 16px;
}

.auth-page--split .auth-card.is-email-active .auth-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  text-align: center;
}

.auth-page--split .auth-card-header {
  position: relative;
  min-height: 38px;
}

.auth-page--split .auth-card:not(.is-email-active) .auth-card-header {
  margin-bottom: 12px;
}

.auth-page--split .auth-email-back {
  position: absolute;
  top: -7px;
  left: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: var(--auth-radius-icon);
  border: 1px solid var(--auth-border);
  background: var(--auth-bg);
  color: var(--auth-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.auth-page--split .auth-card.is-email-active .auth-email-back {
  position: static;
  grid-column: 1;
  grid-row: 1;
}

.auth-page--split .auth-email-back[hidden] {
  display: none;
}

.auth-page--split .auth-email-back svg {
  width: 18px;
  height: 18px;
}

.auth-page--split .auth-email-back:hover {
  background: var(--auth-accent-soft);
  border-color: var(--auth-accent-border);
  transform: translateX(-1px);
}

html[dir="rtl"] .auth-page--split .auth-email-back svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .auth-page--split .auth-email-back:hover {
  transform: translateX(1px);
}

.auth-page--split #signup-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── View-skift-motion (opret-craft 17/7) ──
   Kortets ENESTE rigtige tilstandsskifte (valg → email-form → bekræft) var et
   hårdt display-klip i samme frame — sidens mindst rolige øjeblik. display-flip
   genstarter keyframes, så entrance-only fade-up er ren CSS, nul JS. Husets
   kurve (0.2,0,0,1 — samme som auth-msg-in). Ingen fill-mode: forwards ville
   pinne transform og æde back-pilens translateX-hover. Reduced-motion-blokken
   (animation: none !important) dækker. */
@keyframes auth-view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#signup-options,
#email-form,
#signup-confirm-view,
.auth-page--split .auth-email-back:not([hidden]) {
  animation: auth-view-in 220ms cubic-bezier(0.2, 0, 0, 1);
}

.auth-page--split #more-oauth {
  margin-top: 0;
}

.auth-page--split .auth-divider {
  margin: 18px 0;
}

.auth-page--split .auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

/* opret-craft 17/7: translateY(0) fra hvile = dødt tryk på touch — husets
   press-in (scale 0.99, 80ms) fra logind-passet, release 160ms. */
.auth-page--split .auth-btn:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 80ms;
}

.auth-page--split .auth-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.auth-page--split .auth-btn--google,
.auth-page--split .auth-btn--microsoft {
  background: var(--auth-bg);
  border: 1px solid var(--auth-border-strong);
  border-radius: var(--auth-radius-pill);
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--auth-text);
  box-shadow: none;
}

.auth-page--split .auth-btn--google:hover,
.auth-page--split .auth-btn--microsoft:hover {
  background: var(--auth-surface);
  border-color: var(--auth-accent-border);
  transform: translateY(-1px);
}

.auth-page--split .auth-btn--apple {
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: var(--auth-radius-pill);
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 16px;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: none;
  margin-top: 10px;
}

.auth-page--split .auth-btn--apple svg {
  width: 31px;
  height: 44px;
  flex-shrink: 0;
}

.auth-page--split .auth-btn--apple:focus-visible span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-page--split .auth-btn--apple:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  transform: translateY(-1px);
}

.auth-page--split .auth-btn--apple:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.auth-page--split .auth-btn--email {
  background: #4A7A68;
  color: #FFFFFF;
  border: 0;
  border-radius: var(--auth-radius-pill);
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 6px 18px rgba(74, 122, 104, 0.25);
}

.auth-page--split .auth-btn--email:hover {
  background: #3D6B57;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 10px 24px rgba(74, 122, 104, 0.30);
}

.auth-page--split .auth-btn--email:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 80ms;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 3px 10px rgba(74, 122, 104, 0.22);
}

.auth-page--split #email-form .auth-field > label {
  top: 28px;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--auth-placeholder);
}

.auth-page--split #email-form .auth-field input:focus ~ label,
.auth-page--split #email-form .auth-field input:not(:placeholder-shown) ~ label,
.auth-page--split #email-form .auth-field input:-webkit-autofill ~ label {
  top: 8px;
  transform: translateY(0);
  font-size: 11px;
  font-weight: 700;
  color: var(--auth-accent);
}

.auth-page--split .password-toggle {
  top: 28px;
}

/* Hjælpeteksten deler venstre-akse med feltets indre tekst (1px kant + 14px
   padding = 15px) — før stod «Mindst 8 tegn» på feltets YDERkant, to
   konkurrerende akser 6px fra hinanden (opret-craft 17/7). Logical property
   så arabisk RTL følger med. Selve 3px-baren forbliver kant-til-kant. */
.auth-page--split .password-strength-label {
  padding-inline-start: 15px;
}

/* Kort-CTA'en på opret er blødt afrundet, ikke pill (calm-auth-card-arven).
   opret-craft 17/7: 48px — samme submit-spec som OTP-trinnet (før 44 dér / 48 her
   = spec-drift), og 44px sad optisk let mod 56px-felterne. Valg-rækkens pills
   (OAuth + «Opret med e-mail») bliver bevidst på 44. */
.auth-page--split .auth-card .btn.btn-primary {
  border-radius: 14px;
  margin-top: 12px;
  height: 48px;
  min-height: 48px;
}

.auth-page--split .auth-privacy-note {
  display: block;
}

.auth-page--split #signup-resend-link,
.auth-page--split #signup-confirm-login-link,
.auth-page--split #signup-confirm-reset-link {
  color: var(--auth-accent);
  font-weight: 600;
}

/* === Auth card — OTP confirmation state (opret) === */

.auth-page--split .auth-card.is-signup-confirm-active {
  padding-top: 20px;
}
.auth-page--split .auth-card.is-signup-confirm-active .auth-card-header {
  min-height: 28px;
  margin-bottom: 8px;
}
.auth-page--split .auth-card.is-signup-confirm-active > .auth-divider {
  display: none;
}
.auth-page--split .auth-card.is-signup-confirm-active .signup-confirm-actions {
  display: none;
}

.auth-page--split .auth-card.is-signup-confirm-active .auth-subtitle {
  margin: 6px 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(58, 47, 38, 0.78);
  text-align: center;
}

.auth-page--split .auth-card.is-signup-confirm-active .auth-form > .auth-field:not(.auth-field-otp) {
  margin-bottom: 14px;
}
.auth-page--split .auth-card.is-signup-confirm-active .auth-form > .auth-field:not(.auth-field-otp) input {
  background: rgba(92, 77, 67, 0.04);
  border-color: var(--auth-border);
  color: rgba(58, 47, 38, 0.82);
  padding-top: 20px;
  padding-bottom: 6px;
  font-size: 14px;
  cursor: default;
}
.auth-page--split .auth-card.is-signup-confirm-active .auth-form > .auth-field:not(.auth-field-otp) label {
  font-size: 12px;
  letter-spacing: 0.01em;
  color: rgba(58, 47, 38, 0.60);
}

.auth-page--split .auth-card.is-signup-confirm-active .auth-field-otp {
  margin-bottom: 18px;
}
.auth-page--split .auth-card.is-signup-confirm-active .auth-field-otp .otp-code-input {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.42em;
  padding: 22px 14px 14px;
  background: var(--auth-bg); /* #ffffff var sidens eneste kolde hvide (opret-craft 17/7) */
  border: 1px solid var(--auth-border-strong);
  border-radius: 14px;
  color: rgb(58, 47, 38);
  font-feature-settings: "tnum" 1;
}
.auth-page--split .auth-card.is-signup-confirm-active .auth-field-otp .otp-code-input:focus,
.auth-page--split .auth-card.is-signup-confirm-active .auth-field-otp .otp-code-input:focus-visible {
  border-color: rgba(92, 77, 67, 0.28);
  box-shadow: 0 0 0 4px rgba(92, 77, 67, 0.06);
  outline: none;
}
.auth-page--split .auth-card.is-signup-confirm-active .auth-field-otp .otp-code-input::placeholder {
  letter-spacing: 0.02em;
  font-weight: 400;
  font-size: 14px;
  color: rgba(58, 47, 38, 0.35);
}
.auth-page--split .auth-card.is-signup-confirm-active .auth-field-otp label {
  font-size: 12px;
  letter-spacing: 0.01em;
  color: rgba(58, 47, 38, 0.60);
}

.auth-page--split .auth-card.is-signup-confirm-active .auth-form > .btn-primary {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.1px;
  border-radius: 14px; /* 12 var drift — én submit-spec på tværs af states (opret-craft 17/7) */
  background: #4A7A68;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(74, 122, 104, 0.18);
  transition: background 150ms ease, box-shadow 150ms ease, transform 80ms ease;
}
.auth-page--split .auth-card.is-signup-confirm-active .auth-form > .btn-primary:hover {
  background: #3D6B57;
  box-shadow: 0 2px 6px rgba(74, 122, 104, 0.22);
}
.auth-page--split .auth-card.is-signup-confirm-active .auth-form > .btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(74, 122, 104, 0.18);
}
.auth-page--split .auth-card.is-signup-confirm-active .auth-form > .btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 122, 104, 0.35);
}

.auth-page--split .auth-card.is-signup-confirm-active #signup-confirm-msg {
  margin: 4px 0 0;
  text-align: center;
}

.auth-page--split .auth-card.is-signup-confirm-active .auth-otp-resend {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: rgba(58, 47, 38, 0.65);
}

.auth-page--split .auth-card.is-signup-confirm-active > .auth-privacy-note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(92, 77, 67, 0.08);
  font-size: 12px;
  line-height: 1.45;
  color: rgba(58, 47, 38, 0.55);
  text-align: center;
}
.auth-page--split .auth-card.is-signup-confirm-active > .auth-links {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
}

/* === Card fine-print === */

.auth-page--split .auth-card .auth-form {
  gap: 14px;
}
.auth-page--split .auth-card .auth-field {
  margin: 0;
}

.auth-privacy-note {
  font-family: system-ui, sans-serif;
  /* opret-craft 17/7: 11.5px muted var sidens mindste+svageste tekst — og det er
     TILLIDSLINJEN. 12px + brødtekstfarve (8:1); retter også omvendt emfase hvor
     linket «dine data» stod mørkere end sin egen sætning. Mikro-tier = 2 trin
     (12 støtte, 13.5 footer-nav). */
  font-size: 12px;
  color: var(--auth-text);
  text-align: center;
  /* 16px: promo-sektionen imellem CTA og noten røg 12/7 — 8px blev for tæt */
  margin: 16px 0 0;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}

.auth-privacy-note a {
  color: var(--auth-text);
  text-decoration: underline;
  text-decoration-color: var(--auth-accent-border);
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.auth-privacy-note a:hover {
  color: var(--auth-accent);
  text-decoration-color: var(--auth-accent);
}

.auth-page--split .auth-links {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--auth-border);
}

.auth-page--split .auth-links a {
  font-weight: 650;
  margin-left: 4px;
}

.auth-page--split .auth-message:empty {
  display: none;
}

/* ===== ACCESSIBILITY / MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .auth-page * {
    transition: none !important;
    animation: none !important;
  }
  .auth-page .btn.btn-primary:hover,
  .auth-page .google-btn:hover,
  .auth-page [class*="auth-btn"]:hover {
    transform: none !important;
  }
}

/* ===== MOBILE — shared shell ===== */
@media (max-width: 767px) {
  .auth-page--login {
    height: auto;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .auth-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
  }

  .auth-page--login .auth-lang-picker {
    position: relative;
    top: auto;
    left: auto;
  }

  .auth-page--login .old-ss-link {
    position: static;
    min-height: 44px;
    padding: 0 2px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: max(32px, calc(32px + env(safe-area-inset-bottom)));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  .auth-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .auth-page {
    padding-top: 16px;
  }

  .auth-page .auth-card {
    max-width: none;
    /* Vertical rhythm only — horizontal spacing is owned by .auth-page's
       20px/safe-area padding. A horizontal margin on a width:100% card
       overflows the content box, defeats safe-center and shoves the card
       16px right (36px left / 4px right gap on a 375px phone — Morten
       screenshot 2026-07-11). 20px lines the card up with the language pill. */
    margin: 16px 0;
    padding: 24px 18px 22px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .auth-page .auth-title {
    font-size: 21px;
  }

  .old-ss-link {
    /* 17/7 logind-craft: ekstra .55-daempning stablede oven paa basens ink
       (= 1.5:1 paa 375px - reelt usynlig). Basens ene daempning gaelder. */
    font-size: 12px;
  }
}

@media (max-width: 340px) {
  .auth-page--login .old-ss-link {
    flex-shrink: 0;
    padding-inline: 0;
    font-size: 11px;
    white-space: nowrap;
  }
}

/* --- Reset/confirm mobile: pinned picker needs headroom --- */
@media (max-width: 480px) {
  .auth-page--reset,
  .auth-page--confirm {
    padding: 72px 16px 24px;
    align-items: flex-start;
  }

  .auth-page--reset .auth-lang-picker,
  .auth-page--confirm .auth-lang-picker {
    top: 12px;
    right: 12px;
  }
}

/* --- Virtual keyboard: scroll form into view --- */
@media (max-width: 767px) and (max-height: 500px) {
  .auth-page {
    align-items: flex-start;
    padding-top: 16px;
    overflow-y: auto;
  }

  .auth-card {
    margin-bottom: 120px;
  }
}

/* --- Landscape phones --- */
@media (max-height: 500px) and (orientation: landscape) {
  .auth-page {
    min-height: auto;
    padding: 16px 24px;
    overflow-y: auto;
  }

  /* Skal matche basens (0,2,0)-specificitet — bar .auth-logo-icon taber
     width-mod-width til `.auth-page .auth-logo-icon` uanset rækkefølge */
  .auth-page .auth-logo-icon {
    width: 68px;
    margin-bottom: 12px;
  }
}

/* ===== MOBILE — split (opret) ===== */
@media (max-width: 960px) {
  .auth-page.auth-page--split {
    flex-direction: column;
    gap: 32px;
    padding: 24px 20px;
    max-width: 100%;
  }

  .auth-page--split .auth-value {
    flex: 0 0 auto;
    max-width: 460px;
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .auth-page--split .auth-brand {
    justify-content: center;
  }

  .auth-page--split .auth-side {
    flex: 0 0 auto;
    width: 100%;
    max-width: 420px;
  }

  /* opret-craft 17/7: pillen teleporterede til venstre hjørne ≤960 mens desktop-
     opret + nulstil-mobil holder HØJRE (filens egen kanon). */
  .auth-page--split .auth-lang-picker {
    left: auto;
    right: 16px;
  }

  .auth-page--split .auth-lang-picker .auth-lang-dropdown {
    left: auto;
    right: 0;
  }
}

@media (max-width: 640px) {
  .auth-page.auth-page--split {
    justify-content: flex-start;
    padding-top: 76px;
    gap: 16px;
  }

  .auth-page--split .auth-side {
    order: 1;
    /* opret-craft 17/7: auto-margener centrerer gruppen (logo+kort) i rest-
       pladsen og kollapser til 0 ved overflow (tastatur/lave viewports). */
    margin-bottom: auto;
  }

  /* Mortens ensretning 19/7 (omgør 17/7-r2): brandet flytter IND i kortet på
     telefonen — præcis samme logo-i-kort-mønster som logind/nulstil
     (.auth-logo-icon-kanonen: 76px/14px, 68px/12px ≤480). Hele panelet
     (pitch/video/panel-logo) er skjult ≤640; 641+ er urørt. */
  .auth-page--split .auth-value {
    display: none;
  }

  .auth-page--split .auth-card .auth-logo-icon {
    display: block;
  }
}

@media (max-width: 480px) {
  .auth-page--split .auth-card {
    padding: 24px 18px 20px;
  }

  /* opret-craft 17/7: højre-kanon + safe-area (før: left:12 = 8px off kortets akse) */
  .auth-page--split .auth-lang-picker {
    top: 12px;
    right: max(12px, env(safe-area-inset-right));
    left: auto;
  }

  /* Død regel-fix: basens 21px-mobiltitel tabte specificitet til splitens 23px —
     23px wrapper på ≤370px-Androids; 21px clearer alle 8 sprog (opret-craft 17/7) */
  .auth-page--split .auth-card .auth-title {
    font-size: 21px;
  }
}

/* ═════════ DARK MODE — zinc + sage canon (matches kontakt/bevilling) ═════════ */

[data-theme="dark"] .auth-page,
[data-theme="dark"] .auth-page.auth-page--split {
  /* 17/7: varm-sort → zinc-familien (kortet #18181b er zinc; canvas fulgte
     gammel varm palette = kort koldere end sin baggrund) */
  background: linear-gradient(180deg, #1b1b1e 0%, #121214 100%);
  color: var(--auth-text);
}

html[data-theme="dark"] .auth-page input:not([type="checkbox"]):not([type="radio"]) {
  background: #0a0a0a;
}

[data-theme="dark"] .auth-page .auth-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 36px rgba(0, 0, 0, 0.45);
}

/* === 17/7 logind-craft: dark blev aldrig RE-BELYST - kortet fik moerk
   skygge (#5666), men CTA/dropdown/dekor koerte lysets vaerdier paa sort:
   salvie-skyggen under pillen maaler LYSERE end kortet (= gloed, fysisk
   umulig skygge - 2 linsers "templated tell"), dropdownen svaevede
   skyggeloes, og lysets rosa/salvie-hjoerneblink staar som brune skjolder.
   Een lyskilde, sort-baserede skygger m. svagt salvie-kys, dekor halveret. */
[data-theme="dark"] .auth-page::before {
  background: radial-gradient(circle, rgba(212, 168, 154, 0.05) 0%, transparent 70%);
}

[data-theme="dark"] .auth-page::after {
  background: radial-gradient(circle, rgba(168, 197, 184, 0.045) 0%, transparent 70%);
}

[data-theme="dark"] .auth-page .btn.btn-primary {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset,
              0 6px 18px rgba(0, 0, 0, 0.40),
              0 2px 8px rgba(74, 122, 104, 0.12);
}

[data-theme="dark"] .auth-page .btn.btn-primary:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset,
              0 10px 24px rgba(0, 0, 0, 0.48),
              0 3px 10px rgba(74, 122, 104, 0.15);
}

[data-theme="dark"] .auth-page .btn.btn-primary:active {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset,
              0 3px 10px rgba(0, 0, 0, 0.35);
}

/* Fokus i dark = knappens egne MOERKE lag (ingen ringe, jf. #6052-dommen
   og ban-kontrakten) - lysets salvie-gloed maa ikke vende tilbage via
   fokus-reglen. */
[data-theme="dark"] .auth-page .btn.btn-primary:focus-visible {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset,
              0 6px 18px rgba(0, 0, 0, 0.40);
}

[data-theme="dark"] .auth-form .btn:disabled {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset,
              0 6px 18px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .auth-page--login #login-btn:disabled,
[data-theme="dark"] .auth-page--split #email-form .btn.btn-primary:disabled,
[data-theme="dark"] .auth-page--split #signup-verify-btn:disabled {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset,
              0 4px 14px rgba(0, 0, 0, 0.30);
}

[data-theme="dark"] .auth-lang-dropdown {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50),
              0 24px 60px rgba(0, 0, 0, 0.35);
}

/* Sektions-haarlinjen laa under perceptionstaersklen (hvid .08 paa
   #18181b) - lysets linje laeses tydeligt; .13 = samme relative naervaer */
[data-theme="dark"] .auth-page .auth-divider::before,
[data-theme="dark"] .auth-page .auth-divider::after {
  background: rgba(255, 255, 255, 0.13);
}

/* Aktiv sprograekke: lysets #3D6B57-loeft gaelder ikke paa moerk tint */
[data-theme="dark"] .auth-page .auth-lang-option.is-active,
[data-theme="dark"] .auth-page .auth-lang-option[aria-selected="true"] {
  color: var(--auth-accent);
}

/* Extension-linkets lyse #6E6255-ink hoerer til gradient-bunden - dark
   genbruger muted-tokenen (5.5:1 paa canvas) */
[data-theme="dark"] .auth-extension-link {
  color: var(--auth-text-muted);
}

[data-theme="dark"] .auth-extension-link:hover {
  color: var(--auth-accent);
}

[data-theme="dark"] .auth-page .google-btn,
[data-theme="dark"] .auth-page .microsoft-btn,
[data-theme="dark"] .auth-page .sso-btn,
[data-theme="dark"] .auth-page--split .auth-btn--google,
[data-theme="dark"] .auth-page--split .auth-btn--microsoft {
  background: #1f1f23;
}

[data-theme="dark"] .auth-page .google-btn:hover,
[data-theme="dark"] .auth-page .microsoft-btn:hover,
[data-theme="dark"] .auth-page .sso-btn:hover,
[data-theme="dark"] .auth-page--split .auth-btn--google:hover,
[data-theme="dark"] .auth-page--split .auth-btn--microsoft:hover {
  background: #26262b;
}

[data-theme="dark"] .auth-page .apple-login-btn,
[data-theme="dark"] .auth-page--split .auth-btn--apple {
  background: #fff;
  color: #000;
  border-color: #fff;
}

[data-theme="dark"] .auth-page .apple-login-btn:hover,
[data-theme="dark"] .auth-page--split .auth-btn--apple:hover {
  background: #e8e8ed;
  border-color: #e8e8ed;
}


[data-theme="dark"] .auth-page .btn.btn-primary,
[data-theme="dark"] .auth-page--split .auth-btn--email {
  background: #4A7A68;
  color: #FFFFFF;
}

[data-theme="dark"] .auth-page .btn.btn-primary:hover,
[data-theme="dark"] .auth-page--split .auth-btn--email:hover {
  background: #3D6B57;
  color: #FFFFFF;
}

/* opret-craft 17/7: --email-pillen arvede LYSETS grønne glød på sort (fysisk
   umulig skygge — samme klasse som logind-CTA'ens fund i #6058). Sort-baserede
   lag m. svagt salvie-kys, samme mønster som .btn.btn-primary-dark ovenfor. */
[data-theme="dark"] .auth-page--split .auth-btn--email {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset,
              0 6px 18px rgba(0, 0, 0, 0.40),
              0 2px 8px rgba(74, 122, 104, 0.12);
}

[data-theme="dark"] .auth-page--split .auth-btn--email:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset,
              0 10px 24px rgba(0, 0, 0, 0.48),
              0 3px 10px rgba(74, 122, 104, 0.15);
}

[data-theme="dark"] .auth-page--split .auth-btn--email:active {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset,
              0 3px 10px rgba(0, 0, 0, 0.35);
}

/* logo-dark-white (Mortens ordre 19/7, matcher public skrivsikkert.dk mkt#1106):
   skrivsikkert-logo-dark.png er nu HVID-ordmark-varianten (illustration urørt) —
   afløser 17/7-creme-varianten. Gælder hele auth-familien (logind/opret/nulstil). */
[data-theme="dark"] .auth-brand-logo,
[data-theme="dark"] .auth-page .auth-logo-icon {
  content: url('/assets/img/skrivsikkert-logo-dark.png?v=20260719-white1');
}

[data-theme="dark"] .auth-page .auth-message a {
  color: #b8c6c0;
}

[data-theme="dark"] .auth-page .auth-message.error {
  background: rgba(212, 168, 154, 0.1);
  color: #D4A89A;
  border-color: rgba(212, 168, 154, 0.2);
}

[data-theme="dark"] .old-ss-link {
  /* 17/7 logind-craft: #71717a = 3.56:1 - samme ene-daempnings-princip
     som light (#8a8a93 = 5.0:1, stadig tertiaer) */
  color: #8a8a93;
  opacity: 1;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .old-ss-link:hover {
  color: #b8c6c0;
  opacity: 1;
  background: transparent !important;
}

[data-theme="dark"] .auth-page .password-strength-segment {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .auth-page .password-strength[data-strength="weak"] .password-strength-segment:nth-child(1) {
  background: #D4A89A;
}

[data-theme="dark"] .auth-page .password-strength[data-strength="ok"] .password-strength-segment:nth-child(1),
[data-theme="dark"] .auth-page .password-strength[data-strength="ok"] .password-strength-segment:nth-child(2) {
  background: #C4A46A;
}

[data-theme="dark"] .auth-page .password-strength[data-strength="strong"] .password-strength-segment {
  background: #74A38F; /* accent-hue, mørk variant (opret-craft 17/7) */
}

[data-theme="dark"] .auth-page .form-check-input {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32); /* 0.2 var under 3:1 non-text (opret-craft 17/7) */
}

[data-theme="dark"] .auth-page .form-check-input:checked {
  background: #4A7A68;
  border-color: #4A7A68;
}

[data-theme="dark"] .auth-page .form-check-input:checked::after {
  border-color: #FFFFFF;
}

[data-theme="dark"] .auth-page .auth-privacy-note a {
  color: #b8c6c0;
}

[data-theme="dark"] .auth-page--split .auth-links {
  color: #71717a;
}

[data-theme="dark"] .auth-video {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 36px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .auth-page .auth-message.success {
  background: rgba(168, 197, 184, 0.1);
  /* 17/7: #6BCB8A var candy-mint udenfor sage-familien; afmættet sage-mint
     mellem #b8c6c0 og #6B9E7D, 7.5:1 */
  color: #9CC3AD;
  border-color: rgba(168, 197, 184, 0.2);
}

[data-theme="dark"] .auth-page--split .auth-card.is-signup-confirm-active .auth-subtitle,
[data-theme="dark"] .auth-page--split .auth-card.is-signup-confirm-active .auth-otp-resend,
[data-theme="dark"] .auth-page--split .auth-card.is-signup-confirm-active > .auth-privacy-note,
[data-theme="dark"] .auth-page--split .auth-card.is-signup-confirm-active > .auth-links {
  color: #a1a1aa;
}

[data-theme="dark"] .auth-page--split .auth-card.is-signup-confirm-active .auth-form > .auth-field:not(.auth-field-otp) input,
[data-theme="dark"] .auth-page--split .auth-card.is-signup-confirm-active .auth-field-otp .otp-code-input {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.12);
  color: #e4e4e7;
}

[data-theme="dark"] .auth-page--split .auth-card.is-signup-confirm-active .auth-form > .auth-field:not(.auth-field-otp) label,
[data-theme="dark"] .auth-page--split .auth-card.is-signup-confirm-active .auth-field-otp label {
  color: #a1a1aa;
}

[data-theme="dark"] .auth-page--split .auth-card.is-signup-confirm-active .auth-field-otp .otp-code-input:focus,
[data-theme="dark"] .auth-page--split .auth-card.is-signup-confirm-active .auth-field-otp .otp-code-input:focus-visible {
  border-color: #4A7A68;
  box-shadow: 0 0 0 4px rgba(74, 122, 104, 0.18);
}

[data-theme="dark"] .auth-page--split .auth-card.is-signup-confirm-active .auth-field-otp .otp-code-input::placeholder {
  color: #71717a;
}

[data-theme="dark"] .auth-page--split .auth-card.is-signup-confirm-active > .auth-privacy-note {
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* «konto findes»-notice i dark: knap forbliver solid sage m. hvid tekst */
[data-theme="dark"] .auth-msg-btn {
  background: #4A7A68 !important;
  color: #FFFFFF !important;
}
[data-theme="dark"] .auth-msg-btn:hover {
  background: #3D6B57 !important;
}
[data-theme="dark"] .auth-msg-link {
  color: #b8c6c0 !important;
}