/* app/assets/stylesheets/layouts/auth.css
   ─────────────────────────────────────────────────────────────────────────────
   Centred single-column layout used for sign-in, invitation acceptance.
   ───────────────────────────────────────────────────────────────────────────── */

.auth-body {
  min-height:      100dvh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--bg-page);
  padding:         var(--space-6);
}

.auth-wrap {
  width:     100%;
  max-width: var(--max-width-form);
  display:   flex;
  flex-direction: column;
  gap:       var(--space-6);
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */

.auth-masthead {
  text-align:    center;
  padding-bottom: var(--space-6);
  border-bottom:  3px solid var(--color-black);
}

.auth-masthead__wordmark {
  font-family:    var(--font-serif);
  font-size:      var(--text-3xl);
  font-weight:    700;
  letter-spacing: var(--tracking-tight);
  color:          var(--color-black);
  margin-bottom:  var(--space-1);
}

.auth-masthead__tagline {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--text-secondary);
}

/* ── Auth card ────────────────────────────────────────────────────────────── */

.auth-main {
  background:    var(--bg-surface);
  border:        1px solid var(--border-color);
  border-top:    3px solid var(--color-blue-600);
  padding:       var(--space-8);
}

.auth-main h2 {
  font-family:    var(--font-serif);
  font-size:      var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  margin-bottom:  var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom:  1px solid var(--border-color);
}

/* ── Devise links strip ───────────────────────────────────────────────────── */

.devise-links {
  margin-top:  var(--space-6);
  padding-top: var(--space-4);
  border-top:  1px solid var(--border-color);
  display:     flex;
  flex-direction: column;
  gap:         var(--space-2);
}

.devise-links a {
  font-size: var(--text-sm);
  color:     var(--text-secondary);
}

.devise-links a:hover {
  color: var(--link-color);
}

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

.auth-footer {
  text-align:  center;
  font-size:   var(--text-xs);
  color:       var(--text-muted);
  font-family: var(--font-sans);
}

/* ── Invitation page specific ─────────────────────────────────────────────── */

.invitation-page {
  min-height:  100dvh;
  background:  var(--bg-page);
  display:     flex;
  flex-direction: column;
}

.invitation-masthead {
  background:    var(--color-black);
  border-bottom: 3px solid var(--color-blue-600);
  padding:       var(--space-4) var(--space-6);
}

.invitation-masthead__inner {
  max-width: var(--max-width-form);
  margin:    0 auto;
}

.invitation-masthead__wordmark {
  font-family:    var(--font-serif);
  font-size:      var(--text-xl);
  font-weight:    700;
  color:          var(--color-white);
  letter-spacing: var(--tracking-tight);
}

.invitation-masthead__tagline {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-gray-500);
  margin-top:     var(--space-1);
}

.invitation-body {
  flex:            1;
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  padding:         var(--space-10) var(--space-6);
}

.invitation-card {
  width:         100%;
  max-width:     var(--max-width-form);
  background:    var(--bg-surface);
  border:        1px solid var(--border-color);
  border-top:    3px solid var(--color-blue-600);
  padding:       var(--space-8);
}

.invitation-card__header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom:  1px solid var(--border-color);
}

.invitation-card__eyebrow {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-blue-600);
  margin-bottom:  var(--space-2);
}

.invitation-card__name {
  font-family:    var(--font-serif);
  font-size:      var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-black);
  margin-bottom:  var(--space-2);
}

.invitation-card__meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-wrap:   wrap;
}

.invitation-card__area {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
}

.invitation-card__intro {
  font-size:     var(--text-base);
  color:         var(--text-secondary);
  margin-bottom: var(--space-6);
  line-height:   var(--leading-normal);
}

.invitation-form {
  margin-top: var(--space-6);
}

.invitation-form__actions {
  margin-top: var(--space-6);
}

.invitation-card__expiry {
  margin-top:  var(--space-5);
  padding-top: var(--space-4);
  border-top:  1px solid var(--border-color);
  font-size:   var(--text-xs);
  color:       var(--text-muted);
  text-align:  center;
  font-family: var(--font-sans);
}