/* Landing page at the site root. Shared tokens, buttons, panel and focus ring come from /shared/atp.css.
   A single centred column that fits 360x640 without scrolling and grows (scrolls) on shorter screens. */

:root {
  --landing-error: #A3261B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --landing-error: #F4A9A0; }
}
:root[data-theme="dark"] { --landing-error: #F4A9A0; }

body[data-page="landing"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.landing {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

.landing-head { text-align: center; }
.landing-head h1 {
  margin-top: 6px;
  font-size: 28px;
  line-height: 1.15;
}
.landing-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* The logo is a link: 44px tall tap target, centred. */
.landing-mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 8px;
}
.landing-logo { height: 36px; }

/* The logo's wordmark is dark; on the dark theme it sits on a small light chip. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing-logo {
    padding: 4px 8px;
    border-radius: 8px;
    background: #FFFFFF;
  }
}
:root[data-theme="dark"] .landing-logo {
  padding: 4px 8px;
  border-radius: 8px;
  background: #FFFFFF;
}

.landing-card {
  margin-top: 18px;
  padding: 20px;
}
.landing-card h2 { font-size: 19px; line-height: 1.25; }
.landing-lede {
  margin: 4px 0 14px;
  color: var(--muted);
  font-size: 14px;
}

.landing-form label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}
.landing-row {
  display: flex;
  gap: 8px;
}
.landing-row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 6px 12px;
  border: 1.5px solid var(--atp-line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  font-size: 20px; /* 16px or more stops iOS zooming on focus */
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.landing-row input[aria-invalid="true"] { border-color: var(--landing-error); }
.landing-row .btn {
  flex: none;
  min-height: 48px;
  padding: 10px 26px;
  font-size: 15px;
}

.landing-error {
  margin: 8px 0 0;
  color: var(--landing-error);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
/* Empty, the alert region is visually hidden rather than display:none, so screen readers keep it live and
   announce the message reliably when it appears. */
.landing-error:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The quieter block for facilitators. */
.landing-fac {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--atp-line);
}
.landing-fac h2 {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.landing-fac a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 4px;
}
@media (hover: hover) {
  .landing-fac a:hover { text-decoration-thickness: 2px; }
}

.landing-help {
  margin: 14px 4px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.landing-foot {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.landing-foot p { margin: 0 0 3px; }
.landing-foot-brand { color: var(--navy); }
.landing-foot-brand strong { font-weight: 700; }
.landing-foot-copy { font-size: 11px; }