/* ============================================================================
   Sign-in page — layout only. Brand tokens come from /tokens.css.

   The page is deliberately a dark hero rather than the workspace's light
   chrome. It is the one screen a participant meets before they are inside
   anything, and it does the job the marketing site's hero does: say whose this
   is. The workspace behind it stays light, because that is a room people sit in
   for five days.

   The decorative background is the marketing site's own visual system — a
   hairline grid with drifting polygon groups in the green/aqua/lime graphic
   set — rebuilt here as static inline SVG. Stock photography was the obvious
   alternative and is the wrong call twice over: the CSP is `default-src 'self'`
   with `img-src 'self' data:`, so a hotlinked photo would need it widened and
   would put a third-party request on the one page that has not yet earned any
   trust; and a self-hosted photo is a licence to track and a few hundred KB, to
   say something the brand already says in 2 KB of vectors.
   ========================================================================== */

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background: var(--ink);
  color: #ffffff;
  position: relative;
  overflow-x: hidden;
}

/* ── Decorative ground ───────────────────────────────────────────────────── */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg svg { width: 100%; height: 100%; }

/* Darkens the centre band the content column occupies, and leaves the corners
   — where the polygons and glows actually live — alone. An overall opacity drop
   would have cost the artwork everywhere to fix a problem in one strip. */
.scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 78% at 50% 45%,
      color-mix(in srgb, #04180f 88%, transparent) 0%,
      color-mix(in srgb, #04180f 72%, transparent) 45%,
      transparent 100%);
}

/* Blurred glows sit behind the grid. Large, low-opacity, and off to the
   corners so the centre column stays legible. */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.glow-a {
  width: 520px; height: 520px;
  top: -180px; left: -140px;
  background: radial-gradient(circle, #009540 0%, transparent 70%);
}
.glow-b {
  width: 460px; height: 460px;
  bottom: -200px; right: -120px;
  background: radial-gradient(circle, #176d6d 0%, transparent 70%);
}

/* Motion is transform/opacity only, and stops entirely under reduced-motion.
   Same rule the marketing site holds itself to. */
@keyframes ifDriftA {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(18px, -22px) rotate(2deg); }
}
@keyframes ifDriftB {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-22px, 16px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bg g { animation: none !important; }
}

/* ── Content column ──────────────────────────────────────────────────────── */

main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}
/* Sized by height: the mark is taller than it is wide, so a square box would
   letterbox it. */
.brand img { height: 40px; width: auto; }

.kicker {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aqua);
}

h1 {
  font-size: clamp(38px, 7vw, 54px);
  color: #ffffff;
  margin-bottom: 14px;
}

.lede {
  font-size: 17px;
  line-height: 1.5;
  color: color-mix(in srgb, #ffffff 78%, transparent);
  margin-bottom: 30px;
  max-width: 46ch;
}

/* ── Sign-in ─────────────────────────────────────────────────────────────── */

.btn-gh {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 15px 26px;
  text-decoration: none;
  border: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-gh:hover {
  background: var(--lime);
  text-decoration: none;
  transform: translateY(-1px);
}
.btn-gh:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }

.after-btn {
  margin-top: 15px;
  font-size: 14px;
  color: color-mix(in srgb, #ffffff 62%, transparent);
}
.after-btn a { color: var(--aqua); text-decoration: underline; }

/* ── Panels on the dark ground ───────────────────────────────────────────── */

.panel {
  margin-top: 34px;
  padding: 22px 24px;
  background: color-mix(in srgb, #ffffff 6%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 15%, transparent);
}

.panel h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 12px;
}

.panel p {
  font-size: 14.5px;
  line-height: 1.55;
  color: color-mix(in srgb, #ffffff 74%, transparent);
  margin-bottom: 14px;
}
.panel p:last-child { margin-bottom: 0; }

/* The documents. A list of links, not a wall of checkboxes — see the comment
   in index.html for why there is no tick-box here. */
.docs {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, #ffffff 12%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
}
.docs li { background: var(--ink); }
.docs a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 15px;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
}
.docs a:hover { background: color-mix(in srgb, #ffffff 8%, transparent); text-decoration: none; }
.docs a:focus-visible { outline: 2px solid var(--aqua); outline-offset: -2px; }
.docs .what { flex: 1; min-width: 0; }
.docs .why {
  display: block;
  font-size: 13px;
  color: color-mix(in srgb, #ffffff 60%, transparent);
  margin-top: 2px;
}
.docs .arrow { color: var(--aqua); flex: none; font-size: 14px; }

/* ── Error banner ────────────────────────────────────────────────────────── */

.err {
  margin-bottom: 24px;
  padding: 15px 18px;
  background: color-mix(in srgb, #f0834f 16%, transparent);
  border-left: 3px solid #f0834f;
  font-size: 15px;
  line-height: 1.5;
  color: #ffffff;
}

/* ── Footer line ─────────────────────────────────────────────────────────── */

.foot {
  margin-top: 30px;
  font-size: 13px;
  color: color-mix(in srgb, #ffffff 52%, transparent);
}
.foot a { color: color-mix(in srgb, #ffffff 72%, transparent); text-decoration: underline; }

@media (max-width: 560px) {
  .panel { padding: 18px 17px; }
  .btn-gh { width: 100%; justify-content: center; }
}