/* Badlands Time — master admin sign-in. Additions only.
   -------------------------------------------------------------------------
   Three fields, one card, one divider between each: the same row rhythm the
   calendar uses, so the page that guards everything looks like the rest of
   the product rather than a bare browser form. */

/* Signed out there is no bottom navigation to reserve room for. */
body { padding-bottom: 0; }
main > h1 { margin-top: var(--s8); }

.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 divider and the gutter; fields stack rather than sitting
   on one baseline. */
.row--stack {
  display: block;
  padding-top: var(--s4);
  padding-bottom: var(--s4);
}

.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); }

/* Six digits, sized and spaced as figures. tabular-nums is safe here because
   nothing but digits is ever typed in it. */
.txt--code {
  width: 10rem; max-width: 100%;
  font-size: 19px; font-weight: 600;
  letter-spacing: .22em; font-variant-numeric: tabular-nums;
}

/* Prose, not figures. */
.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%; }

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

.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; }
}