/* ============================================================
   Site layer — composition only.
   All design tokens and primitives live in tokens.css.
   ============================================================ */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Every page vertically centers its content between header and footer */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* When main holds a single section (landing, contact, login, admin), main is
   already doing the vertical centering. Drop the section's internal padding
   and the first heading's top margin so the visual center matches the box
   center — otherwise brand defaults push content downward. */
main > section:only-of-type {
  padding-block: 0;
}
main > section:only-of-type .container > :first-child {
  margin-top: 0;
}

/* Landing hero — wordmark + two CTAs */
.hero {
  padding-block: var(--space-6);
}

.hero .container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
}

/* Wordmark + tagline sit tight together, then space-7 to the buttons below */
.wordmark-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.wordmark-group .tagline {
  margin: 0;
  max-width: none;
}

.hero .actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* Give the landing .btn pair a uniform width so they sit symmetrically
   under the wordmark without each sizing to its own text length. */
.hero .btn {
  min-width: 140px;
}

/* Subpage header: just a back-to-home wordmark link */
.site-header .home {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
}
.site-header .home:hover { color: var(--fg); }

/* Forms: label/input pairs */
.field {
  margin-bottom: var(--space-4);
}
.field .label {
  display: block;
  margin-bottom: var(--space-1);
}

.form-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-4);
}

/* Honeypot — hidden from humans, filled by naive bots. */
.honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status messages — monochrome per brand, differentiated by prefix + color weight */
.status {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  min-height: 1.4em;
  color: var(--fg-muted);
}
.status.ok { color: var(--fg); }
.status.ok::before { content: '✓  '; }
.status.err { color: var(--fg-subtle); font-style: italic; }
.status.err::before { content: '!  '; font-style: normal; }

/* Footer layout — single line, centered link */
.site-footer .container {
  display: flex;
  justify-content: center;
}
.site-footer a {
  color: var(--fg-faint);
  text-decoration: none;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.site-footer a:hover { color: var(--fg); }