/* ==========================================================================
   Sci-Bono Clubhouse — landing, login and signup components
   --------------------------------------------------------------------------
   Requires tokens.css. Load order:
     cssRest.css  →  tokens.css  →  auth.css

   This file REPLACES the auth-related rules currently spread across
   style.css, screenSizes.css and signUpStyles.css. Those three define
   .input_field and .btn with different values at the same breakpoints, so
   which one wins depends on <link> order. Delete the duplicates rather
   than layering this on top.
   ========================================================================== */

/* ==========================================================================
   1. FOCUS  — the single most important rule in this file
   --------------------------------------------------------------------------
   cssRest.css currently contains TWO blocks that remove focus indicators:

     button:focus, input:focus, select:focus, textarea:focus { outline: none; }
     @media (pointer: fine) { *:focus { outline: none; } }

   Delete both. The second is the dangerous one: it reads as "mouse users
   only", but a desktop keyboard user also reports `pointer: fine`, so it
   strips the ring from exactly the people who need it. WCAG 2.4.7, Level AA.

   :focus-visible is the correct primitive — the browser already suppresses
   the ring on pointer interaction and shows it for keyboard.
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Belt and braces for older engines without :focus-visible */
@supports not selector(:focus-visible) {
  :focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
}

/* ==========================================================================
   2. PAGE SHELL
   --------------------------------------------------------------------------
   NEVER use `height: 100vh` + `position: fixed` + `overflow: hidden` on a
   container that holds a form. The old #container-login did all three, which
   made the submit button unreachable in landscape and whenever the mobile
   keyboard opened. min-height + dvh is the fix.
   ========================================================================== */
body {
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  background: var(--navy-900);
  color: var(--text-strong);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100dvh;      /* min-height, not height */
  position: static;        /* not fixed              */
  overflow: visible;       /* not hidden             */
  padding: var(--space-8) var(--space-5) var(--space-16);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Skip link — first focusable element on every page */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--amber-500); color: var(--on-amber);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius);
  font-weight: var(--weight-semibold); z-index: 100;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   3. SITE HEADER
   --------------------------------------------------------------------------
   header.css currently does `.header { display: none !important; }` below
   1024px. Since the only <h1> on the login page lives inside the header
   partial, mobile users got a page with no heading and no branding at all.
   This version stays visible at every width and just gets more compact.
   ========================================================================== */
.site-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--navy-600);
  min-height: 56px;
}
.site-header__logo { display: flex; align-items: center; flex: none; }
.site-header__logo img { height: 32px; width: auto; }
.site-header__word {
  font-size: var(--step-0);
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
}
.site-header__partner { margin-left: auto; flex: none; }
.site-header__partner img { height: 28px; width: auto; }

@media (min-width: 48em) {
  .site-header { padding: var(--space-4) var(--space-6); gap: var(--space-4); }
  .site-header__logo img    { height: 44px; }
  .site-header__partner img { height: 38px; }
  .site-header__word        { font-size: var(--step-1); }
}

/* ==========================================================================
   4. BUTTONS
   --------------------------------------------------------------------------
   One primary, one secondary, one ghost. The old design used three different
   primary treatments across three consecutive screens (solid amber on the
   landing, transparent outline on login, solid #FF5722 on signup), which
   taught users a rule and then broke it twice.

   NOTE ON SPECIFICITY: cssRest.css contains
       button, [type="submit"] { background: none; border: none; }
   at specificity (0,1,0) — identical to `.btn`. If the reset is loaded
   AFTER this file, it silently wins and your buttons lose their borders.
   That is the bug that made the login submit render as bare serif text.
   Load the reset first.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch);          /* min-height, never height */
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  transition: background-color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--amber-500); color: var(--on-amber); }  /* 8.03:1 */
.btn--primary:hover { background: var(--amber-600); }

.btn--secondary {
  background: transparent;
  color: var(--text-strong);
  /* inset shadow rather than `border` so the reset can't strip it */
  box-shadow: inset 0 0 0 2px var(--text-strong);
}
.btn--secondary:hover { background: rgba(255, 255, 255, 0.10); }

.btn--ghost {
  background: transparent;
  color: var(--text-link);
  width: auto;
  min-height: auto;
  padding: var(--space-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed;
}

@media (min-width: 30em) {
  .btn--auto { width: auto; }
}

/* ==========================================================================
   5. FORM CONTROLS
   --------------------------------------------------------------------------
   - Labels sit ABOVE the field, never inside it as a placeholder.
     Placeholders vanish on focus and cannot be re-read.
   - No trailing colons ("Username" not "Username:").
   - min-height 48px. The old rules produced 36px (login) and 38px (signup).
   - Opaque fill. The old rgba(255,255,255,.1) glass over a *gradient* meant
     the same component's contrast changed depending on scroll position:
     3.76:1 at the top of the signup card, 5.85:1 at the bottom.
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: var(--space-5); }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > label {
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}
.field .hint { font-size: var(--step--1); color: var(--text-muted); }

.control {
  min-height: var(--touch);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--navy-700);
  color: var(--text-strong);
  border: 1px solid var(--border);       /* 4.14:1 — WCAG 1.4.11 wants 3:1 */
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: var(--step-0);
  transition: border-color var(--transition);
}
.control:hover { border-color: var(--border-hover); }
.control::placeholder { color: var(--text-muted); opacity: 1; }

select.control {
  appearance: none;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23A9ACD9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
}
/* Native option lists inherit the OS menu, not the page — set explicitly */
select.control option { background: var(--navy-700); color: var(--text-strong); }

.row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 36em) {
  .row--2 { grid-template-columns: 1fr 1fr; }
}
/* Never place a password and its confirmation side by side — it invites
   mistyping and halves the field width on the two fields that most need
   room. Keep .row--2 for name/surname only. */

/* ---- Password ---------------------------------------------------------- */
.pw-wrap { position: relative; display: flex; }
.pw-wrap .control { padding-right: 5.5rem; }
.pw-toggle {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  min-height: 36px;
  padding: 0 var(--space-3);
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-link);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.pw-toggle:hover { background: rgba(255, 180, 84, 0.14); }

.meter { display: flex; gap: 6px; margin-top: var(--space-1); }
.meter span {
  height: 5px; flex: 1; border-radius: 99px;
  background: var(--navy-700);
  box-shadow: inset 0 0 0 1px var(--border);
}
.meter span.on { background: var(--success); box-shadow: none; }

/* ==========================================================================
   6. VALIDATION & MESSAGING
   --------------------------------------------------------------------------
   Replaces the blocking alert() in legacy/login.php. Errors must be
   persistent, tied to their field, and never signalled by colour alone —
   hence the icon. Pair with aria-invalid + aria-describedby in the markup.
   ========================================================================== */
.field--error .control { border-color: var(--error); border-width: 2px; }

.field-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  color: var(--error);
}
.field-error::before {
  content: "";
  width: 16px; height: 16px; flex: none;
  background: var(--error);
  -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1 1 0 011 1v5a1 1 0 11-2 0V8a1 1 0 011-1zm0 10.5a1.25 1.25 0 110-2.5 1.25 1.25 0 010 2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1 1 0 011 1v5a1 1 0 11-2 0V8a1 1 0 011-1zm0 10.5a1.25 1.25 0 110-2.5 1.25 1.25 0 010 2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.alert {
  display: flex; gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-strong);
}
.alert--error   { background: rgba(255, 138, 128, 0.12); border: 1px solid var(--error); }
.alert--success { background: rgba(110, 231, 183, 0.12); border: 1px solid var(--success); }
.alert--error b   { color: var(--error); }
.alert--success b { color: var(--success); }
.alert ul { margin: 0; padding-left: var(--space-5); list-style: disc; }

/* ==========================================================================
   7. AUTH LAYOUT  (login + signup)
   ========================================================================== */
.auth {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 62em) {
  .auth { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

/* The illustration is decorative. It drops away below 62em rather than
   squeezing the form. Use alt="" on it and keep it out of the tab order. */
.auth__art { display: none; }
@media (min-width: 62em) {
  .auth__art {
    display: grid; place-items: center;
    background: linear-gradient(160deg, #FFFFFF, #EEF1FB);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    min-height: 420px;
  }
}

.auth__card {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  background: var(--navy-800);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.auth__inner { padding: var(--space-8) var(--space-6); }
@media (min-width: 36em) {
  .auth__inner { padding: var(--space-10) var(--space-8); }
}
.auth__inner h1 {
  font-size: var(--step-3);
  font-weight: var(--weight-extra);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.auth__sub {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.auth__inner .form { margin-top: var(--space-8); }

.auth__foot {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: var(--navy-700);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-align: center;
}
.auth__foot a {
  color: var(--text-link);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Step indicator (signup) ------------------------------------------- */
.steps {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-5); list-style: none; padding: 0;
}
.steps li {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--step--1); font-weight: var(--weight-semibold);
  color: var(--text-muted);
}
.steps .dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: var(--weight-bold);
  background: var(--navy-700); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
.steps li[aria-current="step"] { color: var(--text-strong); }
.steps li[aria-current="step"] .dot {
  background: var(--amber-500); color: var(--on-amber); box-shadow: none;
}
.steps .bar { flex: 1; height: 2px; background: var(--navy-700); border-radius: 99px; }

.legal { font-size: var(--step--1); color: var(--text-muted); line-height: 1.65; }
.legal a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   8. LANDING
   ========================================================================== */
.landing {
  max-width: 1180px; margin: 0 auto;
  background: var(--navy-800);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.landing__body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 62em) { .landing__body { grid-template-columns: 1fr 1fr; } }

.landing__art {
  background: linear-gradient(160deg, #FFFFFF 0%, #EEF1FB 100%);
  min-height: 280px;
  display: grid; place-items: center;
  padding: var(--space-8);
}
.landing__copy {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-5);
  padding: var(--space-10) var(--space-6);
}
@media (min-width: 48em) {
  .landing__copy { padding: var(--space-16) var(--space-12); }
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-link);
}
.landing__copy h1 {
  font-size: var(--step-4);
  font-weight: var(--weight-extra);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.landing__copy h1 em { font-style: normal; color: var(--amber-400); }
.lede {
  font-size: var(--step-1);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 46ch;
}

.cta-row { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 30em) {
  .cta-row { flex-direction: row; }
  .cta-row .btn { width: auto; flex: 1; }
}

.trust {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(169, 172, 217, 0.28);
  font-size: var(--step--1); font-weight: var(--weight-medium);
  color: var(--text-muted);
  list-style: none;
}
.trust li { display: flex; align-items: center; gap: var(--space-2); }
.trust li::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-radius: 50%; background: var(--amber-400);
}

/* Attendance register — a third, distinct action. Given its own tier so it
   stops competing with Sign up / Log in. */
.attend {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--navy-700);
  border-top: 1px solid rgba(169, 172, 217, 0.2);
}
.attend p { margin-right: auto; font-size: var(--step--1); color: var(--text-muted); }
.attend p strong {
  display: block; margin-bottom: 2px;
  color: var(--text-strong);
  font-size: var(--step-0); font-weight: var(--weight-semibold);
}
.attend .btn { width: auto; }

.live {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--step--1); font-weight: var(--weight-semibold);
  color: var(--success);            /* 8.50:1 on --navy-700 */
}
.live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.4; transform: scale(1.25); } }

/* ---- Below the fold ----------------------------------------------------- */
.below {
  max-width: 1180px; margin: var(--space-12) auto 0;
  display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@media (min-width: 48em) { .below { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--navy-800);
  border: 1px solid rgba(169, 172, 217, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card h2 {
  font-size: var(--step-1); font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.card p { font-size: var(--step--1); color: var(--text-muted); line-height: 1.7; }
.card .ico {
  width: 44px; height: 44px; margin-bottom: var(--space-4);
  border-radius: 12px;
  background: var(--amber-500); color: var(--on-amber);
  display: grid; place-items: center;
  font-size: 20px; font-weight: var(--weight-extra);
}

/* ==========================================================================
   9. MOTION
   --------------------------------------------------------------------------
   cssRest.css already honours this correctly — keep it.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}