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

/* Quiet icon button (e.g. the inbox Archive control): no chrome until hover. */
.inbox-icon-btn {
  background: none;
  border: none;
  padding: 0 0.1rem;
  cursor: pointer;
  color: var(--bulma-text-weak, #7a7a7a);
  line-height: 1;
  transition: color 0.12s ease;
}
.inbox-icon-btn:hover,
.inbox-icon-btn:focus-visible {
  color: var(--lp-hot);
  outline: none;
}

/* ---------------------------------------------------------------------------
 * Switch — a branded on/off slider toggle (Bulma has no native one). Wrap an
 * <input type="checkbox"> + <span class="lp-switch-track"> in a <label
 * class="lp-switch">; the whole label is the hit target. Brand pink when on.
 * ------------------------------------------------------------------------- */
.lp-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
/* The real checkbox stays in the DOM (so forms + a11y work) but is visually
   replaced by the track/thumb below. */
.lp-switch > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.lp-switch-track {
  position: relative;
  flex: none;
  width: 2.4rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #c8ccd4;
  transition: background-color 0.18s ease;
}
.lp-switch-track::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}
.lp-switch > input:checked + .lp-switch-track {
  background: var(--lp-hot);
}
.lp-switch > input:checked + .lp-switch-track::after {
  transform: translateX(1.05rem);
}
.lp-switch > input:focus-visible + .lp-switch-track {
  outline: 2px solid var(--lp-hot);
  outline-offset: 2px;
}
.lp-switch > input:disabled + .lp-switch-track {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Dark mode: lift the off-state track so it reads against the dark surface. */
html[data-theme="dark"] .lp-switch-track { background: #3a424d; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .lp-switch-track { background: #3a424d; }
}

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