/* /library — the shelf. DEVELOPMENT-PLAN.md §11.2.
 *
 * Its own file rather than a section of style.css, the way tree-page.css is: style.css
 * is the reader's stylesheet and every byte of it is downloaded to a phone by
 * build-bundle.ts. This page is not in any bundle and should not ride along in one.
 *
 * Colours are taken from style.css's vocabulary (#1a1a1a ground, #d8d8d8 text, #2a2a2a
 * rules) rather than from variables, because the reader's theme classes never reach this
 * page — there is no ⋮ panel here to set them.
 */

.lib {
  padding-bottom: 64px;
}

/* Every piece of chrome on this page is shown or hidden by the `hidden` attribute, and
 * almost every one of them is also a flex container. `[hidden]`'s UA rule is
 * `display: none` at author-agnostic specificity, so a plain `.lib-auth { display: flex }`
 * beats it and the element stays visible — which is how the signed-out page first
 * rendered with a Sign out button on it. This is the one place that settles it. */
.lib [hidden] {
  display: none !important;
}

/* ── The top-right corner ─────────────────────────────────────────────────────
 *
 * On every reader page the top right is where the account is (the ⋮ toolbar's avatar,
 * style.css). This page has no toolbar, so it says the same thing in its own header —
 * the corner means "account" site-wide, which is the point of doing it twice.
 * `.book-header` is already a flex row with a right-hand slot; this drops into it. */

.lib-corner {
  flex: 0 0 auto;
}

.lib-corner__out,
.lib-corner__in {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lib-corner__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #3a3a3a;
  border-radius: 50%;
  color: #b8b8b8;
}

.lib-corner__email {
  color: #9a9a9a;
  font-size: 0.88rem;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Account ──────────────────────────────────────────────────────────────── */

.lib-account {
  margin: 28px 0 40px;
  padding: 20px 22px;
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
}

.lib-account__status {
  margin: 0;
  color: #9a9a9a;
  font-size: 0.92rem;
}

.lib-auth {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

/* Google's own button colours — white on #dadce0 — rather than the shelf's, and the full
   width of the panel so it reads as an alternative to the form under it rather than as a
   third field in it. It will look like a foreign object on a dark page; it is one.

   Scoped through `.lib-auth` rather than left as a bare class: the generic
   `.lib-auth button` below is a class-plus-element selector and would otherwise out-weigh
   it, which is exactly what it did the first time — a grey Google button. */
.lib-auth .lib-btn--google {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border-color: #dadce0;
  color: #1f1f1f;
  text-align: center;
}

.lib-auth .lib-btn--google:hover {
  background: #f7f8f8;
  border-color: #c6c9cc;
}

/* A rule with a word in it. Same job as the divider on the phone's Account screen. */
.lib-auth__or {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #7a7a7a;
  font-size: 0.8rem;
  margin: -2px 0;
}

.lib-auth__or::before,
.lib-auth__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #2a2a2a;
}

.lib-auth__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 200px;
  min-width: 0;
}

.lib-auth__field span {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a7a7a;
}

.lib-auth__field input {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #d8d8d8;
  font: inherit;
  padding: 9px 11px;
  min-width: 0;
}

.lib-auth__field input:focus {
  outline: none;
  border-color: #4a4a4a;
}

.lib-auth__actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

/* Full width so an error never sits beside a field and gets clipped. */
.lib-auth__error {
  flex: 1 0 100%;
  margin: 0;
  color: #d98b7a;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* The same slot, for the things that are not failures — "check your inbox", "if that
   address has an account we have sent a link". They used to come through `__error` and
   arrive wearing its red, which told the reader something had gone wrong at the exact
   moment nothing had. Same geometry, so the box does not move when the answer changes. */
.lib-auth__note {
  flex: 1 0 100%;
  margin: 0;
  color: #9fb89f;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* "Send it again" — a button, because it does something rather than going somewhere.
   Dressed as prose so it cannot compete with the real ones; `.lib-auth button` is
   class-plus-element and would otherwise make this look like another door. It is the only
   control left on /signin once the mail has gone out, and it should read like an offer
   rather than an instruction. */
.lib-auth button.lib-auth__link {
  flex: 1 0 100%;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-align: left;
  color: #8a8a8a;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: normal;
}

.lib-auth button.lib-auth__link:hover {
  background: none;
  border: 0;
  color: #d8d8d8;
}

.lib-account__signed-in {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 0.92rem;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.lib-btn,
.lib-auth button {
  display: inline-block;
  background: #d8d8d8;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  color: #1a1a1a;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  padding: 9px 16px;
  text-decoration: none;
  white-space: nowrap;
}

.lib-btn:hover,
.lib-auth button:hover {
  background: #fff;
  border-color: #fff;
}

.lib-btn--quiet {
  background: transparent;
  border-color: #3a3a3a;
  color: #b8b8b8;
}

.lib-btn--quiet:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: #5a5a5a;
  color: #d8d8d8;
}

/* Purchase. The one button on the shelf that is meant to be pressed by somebody who has
   not paid, so it carries the shelf's only accent — and it is a link to the purchase
   page, not a checkout, which is why it is not louder than that. */
.lib-btn--buy {
  background: transparent;
  border-color: #7d9b70;
  color: #b6d0aa;
}

.lib-btn--buy:hover {
  background: rgba(157, 187, 144, 0.1);
  border-color: #9dbb90;
  color: #cfe4c5;
}

.lib-auth button:disabled,
.lib-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

/* ── The shelf ────────────────────────────────────────────────────────────── */

.lib-group {
  margin-top: 34px;
}

.lib-work {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #2a2a2a;
}

.lib-work:last-child {
  border-bottom: none;
}

.lib-work__cover img {
  display: block;
  width: 120px;
  height: auto;
  border-radius: 4px;
}

.lib-work__body {
  flex: 1 1 auto;
  min-width: 0;
}

.lib-work__testament {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a7a7a;
}

.lib-work__title {
  margin: 4px 0 8px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.lib-work__desc {
  margin: 0;
  color: #a8a8a8;
  font-size: 0.94rem;
  line-height: 1.55;
}

.lib-work__meta {
  margin: 10px 0 0;
  color: #7a7a7a;
  font-size: 0.84rem;
}

.lib-work__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  flex: 0 0 auto;
}

/* ── Purchased / trial ────────────────────────────────────────────────────────
 *
 * The same two colours the phone's shelf uses (apps/mobile/src/Library.tsx), because it
 * is the same fact about the same book and a reader moves between the two. Green is
 * yours; grey is the free chapters. A dot rather than a badge: the row already says
 * everything else in words. */

.lib-work__state {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lib-work__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.lib-work__state[data-state='owned'] {
  color: #9dbb90;
}

.lib-work__state[data-state='trial'] {
  color: #7a7a7a;
}

/* ── The honest note ──────────────────────────────────────────────────────── */

/* Now only on /paywall, where it is the §6.5 admission about image URLs. */
.lib-note {
  margin-top: 44px;
  padding: 14px 16px;
  background: rgba(217, 139, 122, 0.06);
  border-left: 2px solid #8a5548;
  color: #a8a8a8;
  font-size: 0.88rem;
  line-height: 1.6;
}

.lib-note strong {
  color: #d8d8d8;
  font-weight: 500;
}

.lib-note a {
  color: #b8b8b8;
}

/* ── The purchase page ──────────────────────────────────────────────────────
 *
 * Laid out to match apps/mobile/src/Purchase.tsx rather than the shelf above: cover,
 * centred title, what is free, the offer, one button, the small print. The shelf is a
 * list of works and reads as a row per book; this is one book being offered, and the
 * reader who sees it here may well have seen the phone's version first.
 *
 * Same 140px cover and same 800:1034 plate as the phone's `styles.coverFrame`. */

.pw-cover {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.pw-cover img {
  width: 140px;
  height: auto;
  aspect-ratio: 800 / 1034;
  object-fit: cover;
  border-radius: 4px;
  background: #262626;
}

.pw-head {
  margin-top: 22px;
  text-align: center;
}

/* `.book-header__title` is sized to be a book cover in type — `clamp(2rem, 7vw, 4rem)`,
   which is right for the word "Genesis" and absurd for a sentence about a lock. The
   phone sets 26px here; this is the same weight of statement at desktop widths. */
.pw-head .book-header__title {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* `.book-header__desc` is a left-aligned paragraph in a wide column everywhere else; on
   this page it is one line under a centred title. */
.pw-head .book-header__desc {
  margin-left: auto;
  margin-right: auto;
  max-width: 46ch;
}

/* Which account this is — who is buying (purchase.astro), and who was refused
   (paywall.astro). The same avatar-and-email the shelf puts in its top right corner, but
   neither page has a header row to sit in — both are centred columns — so the flex row is
   centred rather than pushed to an edge, and it reads as a caption under the offer rather
   than as chrome. Quieter than the shelf's copy on purpose: there it is the account
   control, on these two it is a statement of fact. */
.pw-account {
  margin-top: 18px;
}

.pw-account .lib-corner__in {
  justify-content: center;
}

.pw-account .lib-corner__email {
  max-width: 30ch;
}

.pw-offer-box {
  margin-top: 26px;
}

/* The phone stacks its actions full width and leads with the primary one. Below the
   phone's own breakpoint this does the same; above it they sit in a row, which is what a
   pointer wants. */
.pw-actions {
  flex-wrap: wrap;
}

/* The Purchase button on /purchase is a form submit, not a link — it posts to
   /api/stripe/checkout so that checkout survives JS being off. `display: contents` keeps
   the <form> out of the layout entirely, so the button stays a direct child of the flex
   row and of the stacked column below, and neither rule above had to learn about it. */
.pw-actions form {
  display: contents;
}

/* The offer, in the spec's own words. Bigger than the status line above it because on
   /paywall it IS the page. */
.lib-offer {
  margin: 0 0 18px;
  color: #d8d8d8;
  font-size: 1.05rem;
  line-height: 1.6;
}

.lib-hint {
  margin: 14px 0 0;
  color: #7a7a7a;
  font-size: 0.85rem;
  line-height: 1.55;
}

/* ── The sign-in page ───────────────────────────────────────────────────────
 *
 * Borrows the purchase page's centred head (`.pw-head`) and the shelf's form, because it
 * is the same two things: one statement, then one box to fill in. What it does not borrow
 * is the shelf's layout — here the form is the entire page, so the button gets its own
 * row instead of sitting in the gap beside the last field.
 */

.signin-box {
  margin-top: 26px;
}

.signin .lib-auth {
  margin-top: 0;
}

.signin .lib-auth__actions {
  flex: 1 0 100%;
}

/* `hidden` needs spelling out inside the form, and this is the rule that makes the
   sent-state possible at all.
 *
 * The UA's `[hidden] { display: none }` loses to any author rule that sets `display`, and
 * this file has several: `.lib-auth button` is `inline-block`, `.lib-auth__field` and
 * `.lib-auth__or` are `flex`. So hiding the Google button and the email field by setting
 * the attribute did nothing whatsoever until this existed — the fields simply stayed on
 * the page underneath "Check your inbox". Specificity, not `!important`:
 * `.lib-auth button[hidden]` is 0,2,1 against the 0,1,1 it has to beat. */
.lib-auth [hidden],
.lib-auth button[hidden] {
  display: none;
}

/* ── Phone ────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* The corner drops under the heading rather than squeezing beside it. */
  .book-header {
    flex-wrap: wrap;
    gap: 18px;
  }

  .lib-work {
    flex-wrap: wrap;
    gap: 16px;
  }

  .lib-work__cover img {
    width: 84px;
  }

  /* The cover and the text sit side by side; the actions drop to their own full-width
     row rather than squeezing a third column into 320px. */
  .lib-work__body {
    flex: 1 1 160px;
  }

  .lib-work__actions {
    flex: 1 0 100%;
    flex-direction: row;
    align-items: center;
  }

  .lib-auth__actions {
    flex: 1 0 100%;
  }

  /* Two buttons on one 320px row is two clipped buttons. */
  .signin .lib-auth__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* The purchase page, stacked exactly as the phone stacks it. */
  .pw-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .pw-actions .lib-btn {
    text-align: center;
    width: 100%;
  }
}