/* Copyright (c) 2024-2026 Kilotronic LLC. All rights reserved. */

/* shared.css (loaded first by landing.html) declares the Bricolage @font-face. */

/* Override shared.css's app-wide `:root { color-scheme: dark }` for this one
   cream-on-ink marketing page. UA chrome (scrollbars, form-control chrome)
   takes color-scheme from the ROOT element's resolved value, not any
   descendant's — a `color-scheme: light` on body.landing alone does not
   propagate upward and is silently ignored by the UA, so this has to target
   :root itself. :has() is an accepted selector here (already used
   extensively in host.css/play.css/shared.css) — reaching for it lets this
   live beside the rest of the page's rules instead of a second, easy-to-miss
   declaration in shared.css keyed off a page-specific body class. */
:root:has(body.landing) {
  color-scheme: light;
}

body.landing {
  margin: 0;
  min-height: 100vh;
  padding-bottom: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  text-align: center;
}
/* Auto block margins centre the splash in whatever height is left over, which
   also pushes the footer to the bottom on a tall viewport — the job
   `position: fixed` used to do, but in flow. On a short viewport (a landscape
   phone) there is no free space to absorb, the body grows past 100vh, and the
   footer lands below the join card instead of on top of it. */
.landing-card {
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}
.landing-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.75rem;
  margin: 0;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.landing-tagline {
  margin: 0 0 0.25rem;
  opacity: 0.7;
}
.landing-explainer {
  margin: 0;
  max-width: 32rem;
  line-height: 1.5;
}
.landing-explainer .landing-learn-more {
  color: inherit;
}
.landing-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(20rem, 80vw);
}
.landing-btn {
  display: block;
  padding: 0.9rem 1.5rem;
  /* Radius token shared with the in-app .btn system (ui-style backlog #1) —
     marketing keeps its own colors/font/sizing, only the mechanics converge. */
  border-radius: var(--radius-btn);
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-decoration: none;
  font-weight: 600;
}
.landing-btn:hover,
.landing-btn:active {
  filter: brightness(1.1);
}
.landing-welcome {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.landing-welcome[hidden] {
  display: none;
}
.landing-cta-note {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  opacity: 0.65;
}
.landing-guest-note {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  opacity: 0.75;
  line-height: 1.4;
}
.landing-guest-note[hidden] {
  display: none;
}
.landing-guest-note a {
  color: inherit;
  font-weight: 600;
}
.landing-join {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
  max-width: 24rem;
}
.landing-join-prompt {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.landing-join-line {
  display: block;
}
.landing-join-form {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
#join-code {
  /* 7rem, not 8ch: `ch` measures the *zero* glyph, but the field's content is
     uppercase 600-weight with 0.08em tracking, so 8ch clipped the leading
     character of a fully typed code. */
  width: 7rem;
  text-align: center;
  text-transform: uppercase;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.65rem 0.5rem;
  border-radius: var(--radius-btn);
  border: 1.5px solid color-mix(in srgb, var(--color-ink) 40%, transparent);
  background: var(--color-surface);
  color: var(--color-ink);
}
/* shared.css dims every placeholder with --text-dim, which is tuned for the
   app's dark chrome and lands at 1.59:1 on this light splash surface. Keep the
   italic treatment, but derive the color from the landing ink instead. */
#join-code::placeholder {
  color: color-mix(in srgb, var(--color-ink) 65%, transparent);
  font-style: italic;
}
.landing-join-btn {
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.landing-join-error {
  margin: 0;
  font-size: 0.85rem;
}
/* The footer is a plain flow item — .landing-card's auto block margins bottom
   it out on a tall viewport. It must NOT be position: fixed: on a short
   landscape viewport that put it on top of the join card, covering the one
   control an invited player came to use. */
body.landing site-footer {
  width: 100%;
}