/* Every colour and font here is a tenant custom property with a neutral fallback.
   The middleware overrides :root with the club's values in an inline <style> in
   <head>, so first paint is already branded. Nothing in this file may name a club.

   The fallbacks below are what an UNMAPPED host gets - deliberately plain, not
   broken. If you are looking at grey, the tenant did not resolve. */
:root {
  --primary: #2b2b31;
  --dark: #16161a;
  --accent: #6c7cff;
  --display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Not tenant-controlled. The page chrome stays consistent across clubs so the
     product reads as one thing that has been branded, rather than three sites. */
  --surface: #ffffff;
  --ink: #16161a;
  --muted: #6b6b76;
  --line: #e3e3e8;
  --onbrand: #ffffff;
  --onbrand-dim: rgba(255, 255, 255, .72);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.55;
}

.wrap { max-width: 42rem; margin: 0 auto; padding: 4rem 1.25rem; }
.wrap--wide { max-width: 60rem; }

/* The banner is where a club is unmistakable at a glance: its two colours, its
   display face, its name. This is the block that must look different on every
   hostname off one deploy. */
.banner {
  background: var(--dark);
  background-image: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
  color: var(--onbrand);
  border-bottom: 4px solid var(--accent);
}
.banner .wrap { padding-block: 3.5rem 3rem; }
.banner h1 { color: var(--onbrand); }

.eyebrow {
  margin: 0 0 .4rem;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--onbrand { color: var(--accent); }

h1 {
  margin: 0 0 .6rem;
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--primary);
}

.lede { margin: 0 0 2rem; color: var(--muted); max-width: 34rem; }
.lede--onbrand { color: var(--onbrand-dim); margin-bottom: 0; }

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-bottom: 2rem;
}

.card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  padding: 1.25rem;
  background: var(--surface);
}
.card p { margin: 0; font-size: .9375rem; color: var(--muted); }

.card h2 {
  margin: 0 0 .75rem;
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--primary);
}

.tight { margin: 0; padding-left: 1.1rem; font-size: .9375rem; color: var(--muted); }
.tight strong { color: var(--primary); }

.cta-row { margin: 0 0 2.5rem; }
.btn {
  display: inline-block;
  padding: .7rem 1.4rem;
  border-radius: 8px;
  background: var(--primary);
  color: var(--onbrand);
  font-weight: 600;
  text-decoration: none;
}
.btn--disabled { opacity: .45; cursor: not-allowed; }

.card--diag { border-top-color: var(--line); background: transparent; }
.card--diag h2 { color: var(--muted); }

dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
dt { color: var(--muted); font-size: .875rem; }
dd { margin: 0; font-size: .875rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; min-width: 0; overflow-wrap: anywhere; }

.note { margin: 1rem 0 0; font-size: .8125rem; color: var(--muted); }

/* ---- forms ---------------------------------------------------------------- */

.banner--slim .wrap { padding-block: 2rem 1.75rem; }
.banner--slim h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); }

#step-email, #step-code, #step-name, #step-done, #step-off, #signed-in > .card, #signed-out {
  margin-bottom: 1rem;
}

.lbl {
  display: block;
  margin: 0 0 .3rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
}

input[type="email"], input[type="text"] {
  display: block;
  width: 100%;
  padding: .7rem .8rem;
  margin: 0 0 .9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  /* 16px minimum. Anything smaller makes iOS Safari zoom the page on focus, and
     the zoom is not undone on blur - the layout is left scrolled sideways. */
  font: inherit;
  font-size: 1rem;
}
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input:disabled { opacity: .55; cursor: not-allowed; }

.code-input {
  text-align: center;
  letter-spacing: .4em;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.turnstile { min-height: 65px; margin: 0 0 .9rem; }

.btn--full { display: block; width: 100%; text-align: center; border: 0; cursor: pointer; font: inherit; font-weight: 600; margin-bottom: .5rem; }
.btn--ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.btn--danger { background: transparent; color: #b3261e; border: 1px solid #b3261e; }
button:disabled { opacity: .55; cursor: not-allowed; }

.msg { min-height: 1.25rem; margin: .25rem 0 0; font-size: .875rem; color: var(--muted); }
.msg--err { color: #b3261e; }

.fine { margin: .9rem 0 0; font-size: .8125rem; color: var(--muted); }

.check { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 .7rem; font-size: .9375rem; cursor: pointer; }
.check input { margin-top: .25rem; flex: none; }
.check--sep { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.check--muted span { opacity: .5; }
.swatch { display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: .3em; vertical-align: -.05em; border: 1px solid rgba(0,0,0,.2); }

a { color: var(--accent); }

@media (prefers-color-scheme: dark) {
  :root { --surface: #16161a; --ink: #f2f2f5; --muted: #9a9aa6; --line: #2e2e36; }
  /* --primary is a club colour and must NOT be overridden here. Phase 0's
     stylesheet flipped it to near-white in dark mode, which would erase the
     club's identity on every device set to dark. Headings use --ink instead. */
  h1, .card h2, .tight strong { color: var(--ink); }
  .banner h1 { color: var(--onbrand); }
  .btn { color: #16161a; background: var(--accent); }
}
