/* Badlands Time — sign in. Additions only.
   -------------------------------------------------------------------------
   The first screen anyone sees, and the only one they see signed out: no
   header, no bottom navigation, one field and one button. Everything here is
   built from the tokens in app.css — no new colour, no border over 1px, and
   nothing dimmed with opacity. */

/* Signed out there is no bottom navigation, so the 56px reserve app.css keeps
   for it is dead space above the footer. */
body { padding-bottom: 0; }

/* With no header band above it the title needs its own air. */
main > h1 { margin-top: var(--s8); }

/* The sentence that has to land: this form mails a link, it does not sign you
   in on the spot. */
.lead {
  margin: 0 0 var(--s5);
  max-width: 46ch;
  font-size: 13.5px; line-height: 1.5; color: var(--text-2);
}
.lead b { color: var(--text); font-weight: 650; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* .row supplies the 16px gutter; a field stacks instead of sitting on one
   baseline. */
.row--stack {
  display: block;
  padding-top: var(--s4);
  padding-bottom: var(--s4);
}

/* A placeholder is not a label. Every control on these pages has one of
   these above it. */
.fl {
  display: block; margin-bottom: var(--s2);
  font-size: 12px; font-weight: 650; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text-2);
}

.txt {
  display: block; width: 100%;
  min-height: 48px; padding: 0 var(--s3);
  font: inherit; font-size: 16px;   /* 16px or iOS zooms the page on focus */
  color: var(--text); background: var(--bg);
  border: 1px solid var(--line-firm); border-radius: var(--r-ctl);
  transition: border-color var(--ease);
}
.txt:hover { border-color: var(--text-2); }

/* Prose, not figures: app.css puts tabular-nums on .meta, which widens the
   comma and the full stop. */
.note {
  display: flex; gap: var(--s2); align-items: flex-start;
  margin: var(--s3) 0 0;
  font-size: 12.5px; line-height: 1.5; color: var(--text-2);
  max-width: 66ch;
}
.note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

.btn--full { width: 100%; }
.row--stack .btn--full { margin-top: var(--s4); }

/* ------------------------------------------------------- the other door */

/* A text link here is a 19px tap target on a phone held in the dark. The
   owner's route gets a real button, quieter than the primary one. */
.alt {
  margin-top: var(--s6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
}
.alt-q { margin: 0; font-size: 13px; color: var(--text-2); }
.btn--sm { min-height: 44px; padding: 0 var(--s3); font-size: 14px; gap: 6px; }
.btn--sm svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- desk */

/* app.css centres a 44rem column, which is right for a calendar and absurd
   for one field: at 1280px the button alone ran 704px wide. Signed out there
   is no header to align with, so the column narrows to a form's width. The
   footer follows it, or the two would centre on different axes. */
@media (min-width: 34rem) {
  main, footer { max-width: 26rem; }
}