/* account/ — sign in, and the one box for a pass or a key.
   Phone width first: one column, thumb-sized controls, nothing wider than
   the screen.  Everything else comes from ../shared/css/base.css. */

.wrap.narrow { max-width: 34em }

h1 { font-size: 2em; margin: .2em 0 1em }
h2 { font-size: 1.15em; margin: 0 0 .4em }

.card {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1em 1.1em 1.3em; margin: 0 0 1.1em;
}
.card .lead { font-size: 1.05em; margin: 0 0 1em }
.card p { margin: 0 0 1em }
.card p:last-child { margin-bottom: 0 }
.quiet-card { background: var(--soft); border-color: transparent }

label {
  display: block; font-weight: 700; font-size: .95em; margin: 0 0 .35em;
}
input[type=email], input[type=text] {
  display: block; width: 100%; font: inherit; color: var(--ink);
  padding: .75em .8em; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; margin: 0 0 .9em;
}
input:focus { outline: 2px solid var(--red); outline-offset: 1px }
input.digits {
  font-family: var(--mono); font-size: 1.6em; letter-spacing: .35em;
  text-align: center; padding: .5em .2em;
}
button.cta { width: 100% }
button.cta[disabled] { opacity: .55; cursor: default }

.who { font-size: 1.1em }
.fine { color: var(--muted); font-size: .9em; margin: .8em 0 0 }
.fine button + button { margin-left: 1em }

.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--red);
  text-decoration: underline; cursor: pointer;
}

/* The two promises on the pass box, said as plainly as the spec says them. */
.promise { font-size: .97em }

/* Download my stuff: two links side by side, thumb-sized (same shape as
   the buttons on subjects/, kept here because base.css has no .btn). */
.row { display: flex; gap: .6em; align-items: stretch; flex-wrap: wrap }
.row > .btn { flex: 1 }
.btn {
  font: inherit; font-weight: 600; padding: .6em 1em; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; min-height: 2.8em;
}
.btn:hover { background: var(--soft) }

/* Delete my account: marked out, never alarming.  The button is the only
   red thing in the card, and it does nothing until the email matches. */
.danger-card { border-color: var(--red) }
.cta.danger { background: var(--ink); box-shadow: none }
.cta.danger:hover { background: var(--red) }

.note {
  border-left: 4px solid var(--red); background: var(--soft);
  padding: .7em .9em; border-radius: 0 8px 8px 0; margin: 0 0 1.2em;
}
.note.good { border-left-color: #2e7d32; background: #f1f8f2 }

@media (min-width: 40em) {
  button.cta { width: auto; min-width: 12em }
}

.books { margin: 0; padding-left: 1.2em }
.books li { margin: .35em 0; font-size: 1.05em }