/* Shared brand radii. Account pages get the beige landing language below. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #4155ff;
  outline-offset: 2px;
}

.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: 10px;
}

.rounded-full,
.analytics-insight-priority,
.payments-status,
body.klarte-account button.rounded,
body.klarte-account button.rounded-sm,
body.klarte-account button.rounded-md,
body.klarte-account button.rounded-lg,
body.klarte-account button.rounded-xl,
body.klarte-account input[type="button"].rounded-md,
body.klarte-account input[type="submit"].rounded-md,
body.klarte-account input[type="reset"].rounded-md,
body.klarte-account a.inline-flex.rounded-md.bg-accent,
body.klarte-account a.inline-flex.rounded-md.bg-ink,
body.klarte-account .settings-control-btn,
body.klarte-account .klarte-oauth-btn,
body.klarte-account .klarte-account-btn {
  border-radius: 999px;
}

/* Account guest flows — same beige language as index (no light blue) */
body.klarte-account {
  --ac-beige: #FDFCFA;
  --ac-beige-dark: #F7F5F0;
  --ac-line: #E8E4DC;
  --ac-blue: #4155ff;
  --ac-blue-hover: #3144e6;
  background: var(--ac-beige) !important;
  color: #000000;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Kort midtstilt i viewport — ingen ekstra topp-padding */
body.klarte-account > main,
body.klarte-account > main.klarte-account-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 1.5rem !important;
}

body.klarte-account,
body.klarte-account .font-sans,
body.klarte-account button,
body.klarte-account input,
body.klarte-account select,
body.klarte-account textarea {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

body.klarte-account .font-serif,
body.klarte-account .klarte-account-title {
  font-family: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif !important;
}

body.klarte-account ::selection {
  background: #000000;
  color: #FFFFFF;
}

body.klarte-account a:focus-visible,
body.klarte-account button:focus-visible,
body.klarte-account input:focus-visible,
body.klarte-account select:focus-visible,
body.klarte-account textarea:focus-visible,
body.klarte-account summary:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

body.klarte-account .bg-surface {
  background-color: var(--ac-beige) !important;
}

body.klarte-account .bg-surface-warm {
  background-color: var(--ac-beige-dark) !important;
}

body.klarte-account .klarte-account-back,
body.klarte-account .klarte-account-logout,
body.klarte-account .klarte-lang-menu > summary {
  color: #000000 !important;
  font-size: 16px !important;
  font-weight: 500;
}

/* Ingen lyseblå — lenker og pale er svart / beige */
body.klarte-account .bg-accent-pale {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

body.klarte-account .text-accent,
body.klarte-account a.text-accent,
body.klarte-account .font-medium.text-accent,
body.klarte-account .hover\:text-accent-light:hover {
  color: #000000 !important;
}

body.klarte-account a.text-accent:hover,
body.klarte-account .hover\:text-accent-light:hover {
  opacity: 0.7;
}

body.klarte-account .bg-accent {
  background-color: var(--ac-blue) !important;
}

body.klarte-account .hover\:bg-accent-light:hover,
body.klarte-account button.bg-accent:hover,
body.klarte-account a.bg-accent:hover,
body.klarte-account .klarte-account-btn:hover {
  background-color: var(--ac-blue-hover) !important;
  border-color: var(--ac-blue-hover) !important;
}

body.klarte-account .text-ink,
body.klarte-account .text-ink-muted,
body.klarte-account .text-ink-faint {
  color: #000000 !important;
}

body.klarte-account .border-border {
  border-color: var(--ac-line) !important;
}

body.klarte-account .border-border-strong {
  border-color: #000000 !important;
}

body.klarte-account .klarte-account-card,
body.klarte-account .klarte-account-panel,
body.klarte-account .workspace-card,
body.klarte-account #waitlistModal > div,
body.klarte-account #sharedAccessRenameModal > div,
body.klarte-account #sharedAccessDetachModal > div {
  border: 0 !important;
  border-radius: 2rem !important;
  background: #F7F5F0 !important;
  box-shadow: none !important;
  color: #000000;
}

body.klarte-account .klarte-account-card {
  padding: 2rem 1.75rem;
}

@media (min-width: 640px) {
  body.klarte-account .klarte-account-card {
    padding: 2.5rem 2.25rem;
  }
}

body.klarte-account .klarte-account-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #000000 !important;
}

body.klarte-account .klarte-account-title {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #000000 !important;
}

body.klarte-account .klarte-account-lede,
body.klarte-account .klarte-account-lede-spacer {
  margin: 0 0 2.25rem;
}

body.klarte-account .klarte-account-lede {
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: #000000 !important;
  opacity: 1;
}

body.klarte-account .klarte-account-card label {
  font-size: 0.875rem !important;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #000000 !important;
  opacity: 1;
}

body.klarte-account .klarte-account-input,
body.klarte-account .klarte-account-card input:not([type="checkbox"]):not([type="hidden"]):not(.klarte-otp__digit),
body.klarte-account .klarte-account-card textarea,
body.klarte-account .klarte-account-card select,
body.klarte-account #waitlistModal input[type="email"],
body.klarte-account #waitlistModal input[type="text"],
body.klarte-account #sharedAccessRenameInput,
body.klarte-account #sharedAccessDetachInput {
  box-sizing: border-box;
  min-height: 52px;
  padding: 0 1.25rem;
  border-radius: 999px !important;
  font-size: 1rem !important;
  font-weight: 500;
  line-height: 1.25;
}

body.klarte-account .klarte-account-btn,
body.klarte-account .klarte-oauth-btn {
  box-sizing: border-box;
  min-height: 52px;
  padding: 0 30px;
  font-size: 1rem !important;
  font-weight: 500;
  line-height: 1.25;
}

body.klarte-account .klarte-oauth .text-\[12px\],
body.klarte-account .klarte-oauth span.uppercase {
  font-size: 0.75rem !important;
  letter-spacing: 0.12em;
  color: #000000 !important;
}

body.klarte-account .klarte-oauth .bg-white {
  background-color: #F7F5F0 !important;
}

body.klarte-account .klarte-account-card .text-sm,
body.klarte-account .klarte-account-card p.text-sm,
body.klarte-account .klarte-account-card a.text-sm {
  font-size: 1rem !important;
  font-weight: 500;
  line-height: 1.5;
  color: #000000 !important;
}

body.klarte-account .klarte-account-card input.klarte-otp__digit,
body.klarte-account .klarte-otp__digit {
  border-radius: 10px !important;
  min-height: 3rem;
  padding: 0;
  font-size: 1.25rem !important;
}

body.klarte-account .workspace-card:hover {
  background: #F7F5F0 !important;
}

body.klarte-account .shared-access-menu-panel {
  border: 1px solid #000000 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  outline: none;
  background: #FFFFFF !important;
}

body.klarte-account .shared-access-menu-panel button:hover {
  background: #F7F5F0 !important;
}

/* ===== Account pages use the dashboard's components (docs/DESIGN.md): same fields, labels, cards and
   primary button as inside Klarte, so logging in feels like the same product. The beige page stays. ===== */
body.klarte-account .klarte-account-card,
body.klarte-account .klarte-account-panel,
body.klarte-account .workspace-card {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  box-shadow: inset 0 0 0 1px #E8E5DD !important;
}
body.klarte-account .klarte-account-card label {
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 0;
  color: #0B0B0C !important;
}
body.klarte-account .klarte-account-input,
body.klarte-account .klarte-account-card input:not([type="checkbox"]):not([type="hidden"]):not(.klarte-otp__digit),
body.klarte-account .klarte-account-card textarea,
body.klarte-account .klarte-account-card select,
body.klarte-account #waitlistModal input[type="email"],
body.klarte-account #waitlistModal input[type="text"] {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px !important;
  border: 1px solid #D9D9D9 !important;
  background: #FFFFFF;
  font-size: 16px !important;
  font-weight: 400;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.klarte-account .klarte-account-input:hover,
body.klarte-account .klarte-account-card input:not([type="checkbox"]):not([type="hidden"]):not(.klarte-otp__digit):hover {
  border-color: #9A9AA2 !important;
}
body.klarte-account .klarte-account-input:focus,
body.klarte-account .klarte-account-card input:not([type="checkbox"]):not([type="hidden"]):not(.klarte-otp__digit):focus,
body.klarte-account .klarte-account-card textarea:focus,
body.klarte-account .klarte-account-card select:focus {
  border-color: #4155FF !important;
  box-shadow: 0 0 0 3px rgba(65, 85, 255, .18) !important;
  outline: none;
}
body.klarte-account .klarte-account-btn,
body.klarte-account .klarte-oauth-btn {
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px !important;
}
body.klarte-account .klarte-account-btn { background: #4155FF; border-color: #4155FF; }
body.klarte-account .klarte-account-btn:hover { background: #3042E6; border-color: #3042E6; }
body.klarte-account .klarte-oauth-btn { border: 1px solid #D9D9D9 !important; background: #FFFFFF !important; }
body.klarte-account .klarte-oauth-btn:hover { border-color: #9A9AA2 !important; }
/* On the white card: the "eller" label and the Google button are white too. */
body.klarte-account .klarte-account-card .klarte-oauth .bg-white,
body.klarte-account .klarte-account-card .klarte-oauth-btn { background-color: #FFFFFF !important; }
body.klarte-account .klarte-account-card .klarte-oauth-btn:hover { background-color: #FDFCFA !important; }