/* Sentence case since the 2026-10 redesign. These rules were written for the
   brush face, which needed capitals to hold a line. Fraunces does not, and a
   serif set in caps at heading size reads as a conference banner. */

/* ============================================================================
   The book-code screen, and the library behind it.

   Written phone-first, because the main way anyone reaches this page is by
   pointing a camera at a QR code in a printed book. The base rules here are the
   phone; the one breakpoint at the bottom relaxes them for a desktop. That way
   round matters: the small screen gets the considered layout and the large one
   gets the afterthought, rather than the other way about.

   Things that are phone problems and are handled deliberately:
     * safe areas, so nothing hides under a notch or a home indicator
     * 16px minimum on the code field, under which iOS zooms the whole page
     * 52px tap targets, which is about a fingertip
     * the code set in a monospace face, since telling O from 0 is the entire
       difference between this working and not
   ========================================================================= */

.unlockshell {
  min-height: 100vh;
  min-height: 100dvh;         /* dvh, so a phone's shrinking toolbar cannot clip it */
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

#unlock-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding:
    1.75rem
    max(1.15rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1.15rem, env(safe-area-inset-left));
}

.unlock {
  width: 100%;
  max-width: 26rem;
}

/* ---- The pitch ------------------------------------------------------------------ */

.unlock__head { text-align: center; margin-bottom: 1.75rem; }
.unlock__head .eyebrow--flanked { justify-content: center; }

.unlock__title {
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 2.6rem);
  line-height: 1.05;
  margin-top: .6rem;
  letter-spacing: var(--display-tracking);
}
.unlock__lead {
  margin-top: .8rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---- What to do with your phone ---------------------------------------------------
   The instructions come before the fields, because the reader has to do
   something with an app before either field can be filled in. Numbered, because
   the order genuinely matters and because a reader holding a book in one hand
   needs to find their place again after looking away. */

.unlock__steps {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.unlock__steps li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: .75rem;
  align-items: start;
}
.unlock__stepN {
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 50%;
}
.unlock__steps p {
  margin: 0;
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.unlock__steps strong { color: var(--ink); }

/* ---- The code field --------------------------------------------------------------
   The one input on the page, so it gets the whole width and a size you can read
   at arm's length while holding a book open with the other hand. */

.unlock__form { display: grid; gap: 1rem; }

.unlock__field { display: grid; gap: .45rem; }
.unlock__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  text-align: center;
}

.unlock__code {
  width: 100%;
  min-height: 3.4rem;
  padding: .7rem .8rem;
  font-family: var(--mono);
  /* Never below 16px: any smaller and iOS Safari zooms the page on focus, which
     throws the layout about at the exact moment someone is typing. */
  font-size: 1.35rem;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1.5px solid var(--rule-strong);
  border-radius: 12px;
}
.unlock__code::placeholder { color: var(--ink-faint); opacity: .6; letter-spacing: .1em; }
.unlock__code:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.unlock__code:read-only {
  background: var(--paper-sunk);
  border-style: dashed;
}

/* The six digits: wider tracking than the id, because they are read off a phone
   in one glance and typed without looking back. */
.unlock__code--otp {
  font-size: 1.6rem;
  letter-spacing: .3em;
  /* The tracking adds space after the last digit too, which throws the string
     off centre. Push it back by half a step. */
  text-indent: .3em;
}

/* "Type it myself instead", for a scan that picked up the wrong book. */
.unlock__edit {
  justify-self: center;
  padding: .5rem .4rem;
  font-size: .78rem;
  color: var(--ink-faint);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.unlock__edit:hover { color: var(--ink); }

.unlock__status {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--danger);
  text-align: center;
}

.unlock__go { min-height: 3.25rem; font-size: .95rem; }

/* ---- The answer -------------------------------------------------------------------- */

.unlock__result {
  padding: 1.5rem 1.25rem;
  background: var(--paper-raised);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-align: center;
}
.unlock__result--good { border-top: 4px solid var(--accent); }
.unlock__result--bad  { border-top: 4px solid var(--danger); }

.unlock__resultTitle {
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: var(--display-tracking);
}
.unlock__resultBody {
  margin: .7rem 0 1.25rem;
  font-family: var(--serif);
  font-size: .98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* A refusal now carries a "try again" button of its own, so it keeps the same
   breathing room under the text as a success does. */
.unlock__result .btn { min-height: 3.25rem; }

.unlock__foot {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  font-size: .8rem;
}
.unlock__foot a {
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: .5rem;        /* a tappable area, not a 12px word */
  display: inline-block;
}
.unlock__foot a:hover { color: var(--ink); }

/* ---- The library behind the code ---------------------------------------------------- */

.lib__head { margin-bottom: 2rem; }
.lib__title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 7vw, 2.8rem);
  line-height: 1.06;
  margin-top: .5rem;
  letter-spacing: var(--display-tracking);
}
.lib__lead {
  margin-top: .9rem;
  max-width: 34rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.lib__empty {
  padding: 2rem 1.35rem;
  background: var(--paper-raised);
  border: 1.5px dashed var(--rule-strong);
  border-radius: 16px;
  text-align: center;
}
.lib__emptyTitle {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: var(--display-tracking);
}
.lib__emptyBody {
  margin: .7rem auto 0;
  max-width: 34rem;
  font-family: var(--serif);
  font-size: .98rem;
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.lib__cta { display: flex; }
.lib__cta .btn { flex: 1; min-height: 3.25rem; }

/* Access state on the account page. */
.access { font-family: var(--serif); color: var(--ink-soft); }
.access--on { color: var(--accent-ink); font-weight: 500; }

/* ---- Bigger screens ------------------------------------------------------------------
   Everything above is the phone. This is the only place that assumes room. */

@media (min-width: 40rem) {
  #unlock-body { align-items: center; padding: 3rem 1.5rem; }
  .unlock__title { font-size: 2.6rem; }
  .lib__cta { display: block; }
  .lib__cta .btn { flex: none; }
}