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

/* ---------------------------------------------------------------------------
 * Brand (Ladderpunk) — carry the landing identity across the whole app.
 * Re-skins Bulma via its own CSS variables + a thin override layer, so every
 * page inherits the fonts, brand pink and button feel without per-page work.
 * ------------------------------------------------------------------------- */
:root {
  --lp-hot: #ff2e6e;
  --lp-acid: #d6ff3f;
  --lp-ink: #0b0a0c;
  --lp-font-display: "Anton", "Arial Narrow", sans-serif;
  --lp-font-body: "Hanken Grotesk", system-ui, sans-serif;
  --lp-font-mono: "Space Mono", ui-monospace, monospace;

  /* Bulma 1.x theming: brand pink primary, a contrast-safe pink link, the brand
     body font, and squarer corners to match the landing. */
  --bulma-primary-h: 342deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 59%;
  --bulma-link-h: 342deg;
  --bulma-link-s: 85%;
  --bulma-link-l: 45%;
  --bulma-family-primary: var(--lp-font-body);
  --bulma-radius: 0.25rem;
  --bulma-radius-small: 0.2rem;
}

/* Display type for page headings + the brand wordmark. */
.title,
.brand-mark {
  font-family: var(--lp-font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.brand-mark { font-size: 1.3rem; }
.brand-mark b { color: var(--lp-hot); font-weight: inherit; }

/* Buttons: mono + uppercase, with a brand press on the primary action (echoes
   the landing's brutalist offset-shadow buttons). */
.button {
  font-family: var(--lp-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}
.button.is-primary {
  box-shadow: 3px 3px 0 0 var(--lp-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.button.is-primary:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--lp-ink); }
.button.is-primary:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--lp-ink); }

/* ---------------------------------------------------------------------------
 * 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;
}
/* Bulma boxes/notifications keep a light background otherwise; theme them for
   dark mode. The console manages its own palette, so leave .console-box alone. */
html[data-theme="dark"] .box:not(.console-box),
html[data-theme="dark"] .notification {
  background-color: #1a2027;
  color: #e6e6e6;
  border-color: #2a313b;
}
html[data-theme="dark"] .notification.is-warning {
  background-color: #3a2f12;
  color: #ffe08a;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body {
    background-color: #0e1116;
    color: #e6e6e6;
  }
  html[data-theme="system"] .footer {
    background-color: #11161c;
  }
  html[data-theme="system"] .box:not(.console-box),
  html[data-theme="system"] .notification {
    background-color: #1a2027;
    color: #e6e6e6;
    border-color: #2a313b;
  }
  html[data-theme="system"] .notification.is-warning {
    background-color: #3a2f12;
    color: #ffe08a;
  }
}

/* ---------------------------------------------------------------------------
 * 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;
}