/* EmpowerMe pages. Colors, buttons and focus follow the EmpowerOS 2.0 design system
   (brand/visual.md, D-80); fonts self-hosted (D-17). Light and dark follow the device.
   Contrast (WCAG AA): primary buttons use dark text on Cerulean (7:1); links are Teal on
   light (6.4:1) and light blue on dark; red text uses the darker red. */

@font-face {
  font-family: "Poppins";
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/Poppins-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Inter-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/Inter-SemiBold.ttf") format("truetype");
}

:root {
  color-scheme: light dark;
  --emp-cerulean: #00b8f3; /* accent: buttons, rules, marks */
  --emp-accent-hover: #0093c4;
  --emp-accent-soft: #e0f6fe;
  --emp-on-accent: #0b1f2a;
  --emp-page: #f5f7f9;
  --emp-surface: #ffffff;
  --emp-surface-2: #fafbfc;
  --emp-border: #e4e9ed;
  --emp-border-strong: #cdd5db;
  --emp-field-border: #7d8a93; /* 3:1, so empty fields stay visible */
  --emp-heading: #0b1f2a;
  --emp-body: #28353d;
  --emp-muted: #5f6e78;
  --emp-link: #006b8d;
  --emp-link-hover: #00576f;
  --emp-focus: #0093c4;
  --emp-focus-ring: 0 0 0 3px rgba(0, 184, 243, 0.45);
  --emp-bad: #e5484d; /* borders and marks only; text uses --emp-bad-text */
  --emp-bad-text: #b42318;
  --emp-bad-100: #fde7e7;
  --emp-danger: #b42318; /* solid danger buttons */
  --emp-on-danger: #ffffff;
  --emp-danger-hover: #0b1f2a;
  --emp-qr-bg: #ffffff;
  --emp-radius-sm: 6px;
  --emp-radius: 12px;
  --emp-shadow: 0 1px 2px rgba(0, 65, 100, 0.06), 0 8px 24px rgba(0, 65, 100, 0.08);
}

/* Dark mode follows the device setting (EmpowerOS dark theme). */
@media (prefers-color-scheme: dark) {
  :root {
    --emp-accent-hover: #acebff;
    --emp-accent-soft: rgba(0, 184, 243, 0.14);
    --emp-on-accent: #111417;
    --emp-page: #111417;
    --emp-surface: #171b1f;
    --emp-surface-2: #1f2429;
    --emp-border: rgba(255, 255, 255, 0.1);
    --emp-border-strong: rgba(255, 255, 255, 0.22);
    --emp-heading: #f3f5f7;
    --emp-body: #c3cad1;
    --emp-muted: #9aa4ae;
    --emp-link: #5ccff5;
    --emp-link-hover: #acebff;
    --emp-focus: #5ccff5;
    --emp-focus-ring: 0 0 0 3px rgba(0, 184, 243, 0.5);
    --emp-bad: #ff8a80;
    --emp-bad-text: #ff8a80;
    --emp-bad-100: rgba(255, 138, 128, 0.2);
    --emp-danger: #ff8a80;
    --emp-on-danger: #111417;
    --emp-danger-hover: #ffc2bd;
    --emp-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--emp-page);
  color: var(--emp-body);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 440px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

/* The logo is a <picture>: the light wordmark, or the dark one in dark mode. */
.logo {
  display: block;
  margin: 0 0 24px;
}

.logo img {
  display: block;
  height: 32px;
  width: auto;
}

.card {
  background: var(--emp-surface);
  border: 1px solid var(--emp-border);
  border-radius: var(--emp-radius);
  box-shadow: var(--emp-shadow);
  padding: 24px;
}

h1 {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--emp-heading);
  margin: 0 0 8px;
}

p {
  margin: 0 0 16px;
}

.muted {
  color: var(--emp-muted);
  font-size: 14px;
}

label {
  display: block;
  font-weight: 600;
  color: var(--emp-heading);
  margin: 16px 0 4px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="date"] {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--emp-heading);
  background: var(--emp-surface);
  border: 1.5px solid var(--emp-field-border);
  border-radius: var(--emp-radius-sm);
  padding: 11px 12px;
}

input.code {
  font-size: 24px;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}

input[aria-invalid="true"] {
  border-color: var(--emp-bad);
}

/* Buttons (EmpowerOS): 44px tall, 12px corners. Primary is Cerulean; secondary is the
   surface colour with a grey border; solid red is kept for rare, high-impact actions. */
button {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 24px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--emp-on-accent);
  background: var(--emp-cerulean);
  border: 1.5px solid transparent;
  border-radius: var(--emp-radius);
  cursor: pointer;
  transition:
    background-color 0.15s,
    transform 0.1s;
}

button:hover {
  background: var(--emp-accent-hover);
}

button:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }

  button:active {
    transform: none;
  }
}

button.secondary,
.btn-soft {
  background: var(--emp-surface);
  border-color: var(--emp-border-strong);
  color: var(--emp-heading);
}

button.secondary {
  margin-top: 12px;
}

button.secondary:hover,
.btn-soft:hover {
  background: var(--emp-accent-soft);
  color: var(--emp-heading);
  text-decoration: none;
}

button.danger {
  background: var(--emp-danger);
  color: var(--emp-on-danger);
}

button.danger:hover {
  background: var(--emp-danger-hover);
}

/* Links: teal and semibold, no underline until hover or keyboard focus. */
a {
  color: var(--emp-link);
  font-weight: 600;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--emp-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Focus: the EmpowerOS glow plus a solid outline, so it shows on every background. */
:focus-visible {
  outline: 2px solid var(--emp-focus);
  outline-offset: 2px;
  box-shadow: var(--emp-focus-ring);
}

.error {
  color: var(--emp-bad-text);
  font-weight: 600;
  margin: 16px 0 0;
}

.notice {
  color: var(--emp-heading);
  background: var(--emp-accent-soft);
  border-left: 4px solid var(--emp-cerulean);
  border-radius: var(--emp-radius-sm);
  padding: 12px 16px;
  margin: 0 0 16px;
}

.turnstile {
  margin-top: 16px;
}

.help {
  margin-top: 24px;
  color: var(--emp-muted);
  font-size: 14px;
}

.help a {
  font-weight: 600;
}

/* QR codes stay dark-on-white in dark mode so phone cameras can read them. */
.qr {
  width: 220px;
  max-width: 100%;
  margin: 8px 0 16px;
  padding: 10px;
  background: var(--emp-qr-bg);
  border-radius: var(--emp-radius-sm);
}

.qr svg {
  display: block;
  width: 100%;
  height: auto;
}

code.key {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: var(--emp-heading);
  background: var(--emp-surface-2);
  border: 1px solid var(--emp-border);
  border-radius: var(--emp-radius-sm);
  padding: 2px 6px;
  word-break: break-all;
}

h2 {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--emp-heading);
  margin: 24px 0 8px;
}

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

.list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--emp-border);
}

.list form {
  margin: 0;
}

button.small {
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 6px 14px;
  font-size: 15px;
}

/* Wider pages on desktop (My account); phones are unchanged. */
.page.wide {
  max-width: 1040px; /* matches the admin console's content column */
}

strong.ink {
  color: var(--emp-heading);
}

.block {
  border-top: 1px solid var(--emp-border);
  padding-top: 20px;
  margin-top: 20px;
}

.block h2 {
  margin-top: 0;
}

.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.block-head h2 {
  margin: 0;
}

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

.rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--emp-border);
}

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

.rows form {
  margin: 0;
}

.row-text {
  display: flex;
  flex-direction: column;
}

.row-text .muted {
  font-size: 14px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Compact list buttons: the secondary style for everyday actions, soft red for
   removing and signing out. */
.btn-soft,
.btn-danger-soft {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 6px 14px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  border-width: 1.5px;
  border-style: solid;
  border-radius: var(--emp-radius-sm);
  text-decoration: none;
  cursor: pointer;
}

.btn-danger-soft {
  background: var(--emp-bad-100);
  border-color: transparent;
  color: var(--emp-bad-text);
}

.btn-danger-soft:hover {
  background: var(--emp-bad-100);
  border-color: var(--emp-bad);
  color: var(--emp-bad-text);
  text-decoration: none;
}

.block-end {
  display: flex;
  justify-content: flex-end;
}