/* The signed-out pages: sign up, sign in, check your inbox, and the wall.
   Separate from app.css because these four are the only pages with a form,
   and the reader's pages should not carry styling they never use.
   Everything here is built from the same variables as the rest of the site —
   a sign-in page that looks borrowed is a sign-in page people distrust. */

.auth{max-width:27rem;margin:0 auto}
.auth h1{margin:0 0 6px}
.auth .lede{margin:0 0 22px}

.field{display:block;margin:0 0 16px}
.field span{display:block;font-size:13px;font-weight:600;color:var(--ink-2);
  margin:0 0 6px}
.field input,.field select{width:100%;box-sizing:border-box;font:inherit;
  font-size:16px;  /* 16px or iOS zooms the page on focus */
  padding:11px 13px;border:1px solid var(--rule);border-radius:9px;
  background:var(--surface);color:var(--ink)}
.field input:focus,.field select:focus{outline:2px solid var(--moss);
  outline-offset:1px;border-color:var(--moss)}
.field .hint{font-size:12.5px;font-weight:400;color:var(--ink-3);margin:6px 0 0}

.auth .cta{width:100%;text-align:center}
.auth .alt{font-size:13.5px;color:var(--ink-3);margin:18px 0 0;text-align:center}
.auth .alt a{color:var(--moss)}

.bad{background:var(--ochre-wash);border:1px solid var(--ochre);
  color:var(--ink);border-radius:9px;padding:11px 14px;font-size:14px;margin:0 0 18px}

/* The "we sent you a link" page. No spinner and no auto-refresh: nothing is
   happening on this page — the next step is in their inbox, and a page that
   looks busy suggests otherwise. */
.sent{text-align:center;padding:8px 0 4px}
.sent .mark{font-size:34px;line-height:1;margin:0 0 14px}
.sent strong{word-break:break-all}

/* The wall. Deliberately not a dead end: it says what was read, what the nine
   dollars buys, and leaves the Library reachable, because a reader who has
   read their trial story still owns the words they tapped in it. */
.wall .price{font-family:"Newsreader",Georgia,serif;font-size:40px;line-height:1;
  margin:0 0 2px}
.wall .price small{font-family:inherit;font-size:14px;font-weight:400;
  color:var(--ink-3);margin-left:8px}
.wall ul{margin:16px 0 22px;padding:0 0 0 20px;color:var(--ink-2);font-size:14.5px}
.wall li{margin:0 0 7px}