/* LiveQual2 project styles. Bulma variable overrides + landing-page polish.
   Palette: deep indigo-violet primary (the darkness of immersive-theatre research,
   the Darkfield pilot) with a warm coral accent (the human, inclusive element). */

:root {
  /* Bulma 1.x primary → indigo-violet */
  --bulma-primary-h: 258deg;
  --bulma-primary-s: 46%;
  --bulma-primary-l: 50%;
  /* At this lightness Bulma auto-derives a dark "invert" (button text), which is hard to read
     on the violet fill. Force white text on primary controls. */
  --bulma-primary-invert-l: 100%;
  /* Links → same family, a touch brighter */
  --bulma-link-h: 258deg;
  --bulma-link-s: 52%;
  --bulma-link-l: 52%;
  --lq-coral: #ff6f61;
  --lq-coral-soft: #ff8a7e;
  --lq-ink: #1a1626;
}

/* Legacy Django message classes retained from the scaffold. */
.alert-debug { color: black; background-color: white; border-color: #d6e9c6; }
.alert-error { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; }

/* --- Hero -------------------------------------------------------------------------------- */
/* The hero is theme-aware. Light is the default; the dark palette is applied for an explicit
   data-theme="dark" AND for OS-dark when the user hasn't overridden — mirroring how Bulma
   itself resolves the theme, so the hero never drifts out of step with the rest of the page.
   Everything is driven through the --lq-hero-* vars below, so a theme switch only re-declares
   the variables (plus the background gradient). */
.lq-hero {
  --lq-hero-text: #1a1626;
  --lq-hero-text-soft: #55506b;
  --lq-hero-eyebrow: #e2543f;
  --lq-hero-dot: rgba(90, 70, 180, 0.09);
  --lq-hero-preview-bg: rgba(255, 255, 255, 0.6);
  --lq-hero-preview-border: rgba(26, 22, 38, 0.1);
  --lq-hero-bubble-them-bg: rgba(120, 95, 220, 0.1);
  --lq-hero-bubble-them-text: #1a1626;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(255, 111, 97, 0.16), transparent 60%),
    radial-gradient(50rem 40rem at 0% 110%, rgba(120, 95, 220, 0.16), transparent 55%),
    linear-gradient(150deg, #efe9fb 0%, #f6f3fc 55%, #efeafc 100%);
  color: var(--lq-hero-text);
  position: relative;
  overflow: hidden;
  /* This hero isn't a Bulma .section, so it lacks the 1.5rem side gutter the rest of the
     page has. Add it here (background stays full-bleed; only the content is inset). */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.lq-hero__dark-vars,
:root[data-theme="dark"] .lq-hero {
  --lq-hero-text: #f4f1fb;
  --lq-hero-text-soft: #d9d3ec;
  --lq-hero-eyebrow: #ff8a7e;
  --lq-hero-dot: rgba(255, 255, 255, 0.06);
  --lq-hero-preview-bg: rgba(255, 255, 255, 0.06);
  --lq-hero-preview-border: rgba(255, 255, 255, 0.12);
  --lq-hero-bubble-them-bg: rgba(255, 255, 255, 0.1);
  --lq-hero-bubble-them-text: #f4f1fb;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(255, 111, 97, 0.28), transparent 60%),
    radial-gradient(50rem 40rem at 0% 110%, rgba(120, 95, 220, 0.35), transparent 55%),
    linear-gradient(150deg, #2a2340 0%, #1a1626 60%, #140f1f 100%);
}
/* OS-dark, only when the user hasn't explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lq-hero {
    --lq-hero-text: #f4f1fb;
    --lq-hero-text-soft: #d9d3ec;
    --lq-hero-eyebrow: #ff8a7e;
    --lq-hero-dot: rgba(255, 255, 255, 0.06);
    --lq-hero-preview-bg: rgba(255, 255, 255, 0.06);
    --lq-hero-preview-border: rgba(255, 255, 255, 0.12);
    --lq-hero-bubble-them-bg: rgba(255, 255, 255, 0.1);
    --lq-hero-bubble-them-text: #f4f1fb;
    background:
      radial-gradient(60rem 40rem at 85% -10%, rgba(255, 111, 97, 0.28), transparent 60%),
      radial-gradient(50rem 40rem at 0% 110%, rgba(120, 95, 220, 0.35), transparent 55%),
      linear-gradient(150deg, #2a2340 0%, #1a1626 60%, #140f1f 100%);
  }
}
/* Hero controls override Bulma's transparent-navbar / button colours with the hero text var. */
.lq-hero__brand { color: var(--lq-hero-text) !important; }
.lq-hero__ghost-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--lq-hero-text) 45%, transparent);
  color: var(--lq-hero-text);
}
.lq-hero__ghost-btn:hover,
.lq-hero__ghost-btn:focus {
  background: color-mix(in srgb, var(--lq-hero-text) 8%, transparent);
  border-color: var(--lq-hero-text);
  color: var(--lq-hero-text);
}
.lq-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lq-hero-eyebrow);
}
.lq-hero__title {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0.6rem 0 1rem;
  color: var(--lq-hero-text);
}
.lq-hero__title .lq-accent { color: var(--lq-coral); }
.lq-hero__lead {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  max-width: 42ch;
  color: var(--lq-hero-text-soft);
}
.lq-hero__tags { margin-top: 2rem; opacity: 0.85; font-size: 0.85rem; }
.lq-hero__tags span { margin-right: 1.25rem; white-space: nowrap; }

/* Ambient "sensory" dot field — decorative only. */
.lq-hero__glow {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--lq-hero-dot) 1px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(60% 60% at 70% 20%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 60% at 70% 20%, black, transparent 75%);
  pointer-events: none;
}

/* --- Feature cards ----------------------------------------------------------------------- */
.lq-card {
  height: 100%;
  border: 1px solid var(--bulma-border, #e3e0ea);
  border-radius: 1rem;
  padding: 1.75rem;
  background: var(--bulma-scheme-main, #fff);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lq-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2.5rem rgba(90, 75, 138, 0.16);
}
.lq-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  background: color-mix(in srgb, hsl(258deg 46% 50%) 14%, transparent);
}
.lq-card__title { font-weight: 700; font-size: 1.15rem; margin-bottom: 0.4rem; }

.lq-step-num {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--lq-coral);
}
.lq-section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.85rem;
  font-weight: 700;
  color: hsl(258deg 40% 55%);
}

:root[data-motion="reduced"] .lq-card { transition: none; }
:root[data-motion="reduced"] .lq-card:hover { transform: none; }

/* --- Landing utilities (kept out of markup to satisfy djlint H021) ----------------------- */
/* Alternating section band. Bulma's `has-background-light` is a fixed pale colour that does
   not follow data-theme="dark", so its dark-mode title text ended up light-on-light. These
   scheme vars flip with the theme (light: ~96% L, dark: ~11% L). */
.lq-section-alt { background-color: var(--bulma-scheme-main-bis, #fafafa); }
/* Footer accessibility trigger is a <button> but must read as a footer link. Reset the button
   chrome and inherit the column's alignment so it matches the sibling <a> links exactly. */
.lq-footer-link {
  display: block;
  width: 100%;
  margin-bottom: 0.25rem;
  padding: 0;
  border: 0;
  height: auto;
  background: transparent;
  color: var(--bulma-link-text);
  font: inherit;
  line-height: 1.5;
  text-align: inherit;
  cursor: pointer;
}
.lq-footer-link:hover { color: var(--bulma-link-text-hover); text-decoration: underline; }

.lq-nav-transparent { background: transparent !important; }
.lq-balance { text-wrap: balance; }
.lq-tracking { letter-spacing: 0.1em; }
.lq-cta-sub { max-width: 46ch; margin-inline: auto; }
.lq-preview {
  background: var(--lq-hero-preview-bg);
  border: 1px solid var(--lq-hero-preview-border);
  border-radius: 1.25rem;
  color: var(--lq-hero-text);
}
.lq-preview__muted { color: var(--lq-hero-text-soft); }
.lq-bubble { border-radius: 1rem 1rem 1rem 0.25rem; }
.lq-bubble--them {
  background: var(--lq-hero-bubble-them-bg);
  color: var(--lq-hero-bubble-them-text);
}

/* --- Logged-in dashboard ----------------------------------------------------------------- */
/* Soft welcome band. Uses a low-opacity tint of the primary so it reads in both themes
   (Bulma's scheme-main-bis gives the surface; the gradient adds the brand warmth). */
.lq-dash-welcome {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  border-radius: 1.25rem;
  border: 1px solid var(--bulma-border, #e3e0ea);
  background:
    radial-gradient(40rem 20rem at 100% -40%, rgba(255, 111, 97, 0.1), transparent 60%),
    radial-gradient(40rem 24rem at -10% 140%, rgba(120, 95, 220, 0.12), transparent 55%),
    var(--bulma-scheme-main-bis, #fafafa);
}
.lq-dash-welcome__text { min-width: 15rem; flex: 1 1 20rem; }

/* Stat tiles. */
.lq-stat {
  height: 100%;
  padding: 1.5rem 1.75rem;
  border-radius: 1rem;
  border: 1px solid var(--bulma-border, #e3e0ea);
  background: var(--bulma-scheme-main, #fff);
}
.lq-stat__num {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bulma-text-strong, #1a1626);
}
.lq-stat__label {
  margin-top: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-weight: 700;
  color: hsl(258deg 40% 55%);
}

/* Tool cards — whole card is the link. */
.lq-tool {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--bulma-border, #e3e0ea);
  background: var(--bulma-scheme-main, #fff);
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lq-tool:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, hsl(258deg 46% 50%) 40%, transparent);
  box-shadow: 0 1rem 2.5rem rgba(90, 75, 138, 0.16);
  color: inherit;
}
.lq-tool__icon { font-size: 1.75rem; margin-bottom: 0.6rem; }
.lq-tool__title { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.25rem; }
.lq-tool__desc { color: var(--bulma-text-weak, #55506b); font-size: 0.95rem; }

/* Study rows. */
.lq-study-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  border-radius: 0.85rem;
  border: 1px solid var(--bulma-border, #e3e0ea);
  background: var(--bulma-scheme-main, #fff);
}
.lq-study-row__name { font-weight: 700; font-size: 1.1rem; }
.lq-study-row__meta {
  color: var(--bulma-text-weak, #55506b);
  font-size: 0.9rem;
  margin-top: 0.15rem;
}
.lq-study-row__actions { margin-bottom: 0 !important; }

/* Empty state. */
.lq-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: 1rem;
  border: 1px dashed var(--bulma-border, #e3e0ea);
  background: var(--bulma-scheme-main-bis, #fafafa);
}
.lq-empty__icon { font-size: 2.5rem; margin-bottom: 0.5rem; }

/* allauth signup: make the email/password disclosure look clickable. */
.lq-summary { cursor: pointer; }

:root[data-motion="reduced"] .lq-tool { transition: none; }
:root[data-motion="reduced"] .lq-tool:hover { transform: none; }