/* Project-wide styles. Target html[data-*] selectors for accessibility-aware
 * rules (guidelines §9) rather than relying solely on @media queries. */

/* ---------------------------------------------------------------------------
 * Theme — explicit override; "system" defers to the OS preference.
 * ------------------------------------------------------------------------- */
html[data-theme="dark"] {
  background-color: #0e1116;
  color: #e6e6e6;
}
html[data-theme="dark"] body {
  background-color: #0e1116;
  color: #e6e6e6;
}
html[data-theme="dark"] .footer {
  background-color: #11161c;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body {
    background-color: #0e1116;
    color: #e6e6e6;
  }
}

/* ---------------------------------------------------------------------------
 * Contrast.
 * ------------------------------------------------------------------------- */
html[data-a11y-contrast="high"] body {
  --bulma-text: #000;
  filter: contrast(1.25);
}
html[data-a11y-contrast="high"] a {
  text-decoration: underline;
}
html[data-a11y-contrast="low"] body {
  filter: contrast(0.85);
}

/* ---------------------------------------------------------------------------
 * Text size — scales the root font, Bulma rem units follow.
 * ------------------------------------------------------------------------- */
html[data-a11y-text="large"] {
  font-size: 112.5%;
}
html[data-a11y-text="extra-large"] {
  font-size: 131.25%;
}

/* ---------------------------------------------------------------------------
 * Motion — honour both the explicit pref and the OS setting.
 * ------------------------------------------------------------------------- */
html[data-a11y-motion="reduced"] *,
html[data-a11y-motion="reduced"] *::before,
html[data-a11y-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Keep the sticky footer at the bottom on short pages. */
html,
body {
  min-height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > .section {
  flex: 1 0 auto;
}

/* Passkey sign-in button: the label is long ("Sign in with passkey
 * (fingerprint / device PIN)"), and Bulma buttons are white-space: nowrap, so
 * it overflows its card. Cap it to the container and let the text wrap. */
#passkey_login {
  max-width: 100%;
  height: auto;
  min-height: 2.75em;
  white-space: normal;
  line-height: 1.3;
}
/* Two-line label: the main action, then a lighter hint beneath it. */
#passkey_login .passkey-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
#passkey_login .passkey-hint {
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.75;
}