/* /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;
}

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

/* The fake checkout. Dashed, so it does not look like a thing that takes money. */
.lib-btn--dev {
  background: transparent;
  border-style: dashed;
  border-color: #5a6f52;
  color: #9dbb90;
}

.lib-btn--dev:hover {
  background: rgba(157, 187, 144, 0.08);
  border-color: #7d9b70;
  color: #b6d0aa;
}

.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 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 buttons get their own
 * row instead of sitting in the gap beside the password field.
 */

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

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

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

/* Both doors are always open — somebody who arrived at the wrong one should not have to
   find a switch — but only one of them is the answer to the question the page just asked,
   and the other should not compete with it.
 *
 * Specificity note: `.lib-auth button` above is a class-plus-element selector, so a bare
 * `.lib-btn--quiet` on these buttons loses to it and renders solid anyway. That is why the
 * quiet look is spelled out here through `[data-mode]` rather than reached for as a class. */
.lib-auth[data-mode='sign-in'] button[data-action='sign-up'],
.lib-auth[data-mode='sign-up'] button[data-action='sign-in'] {
  background: transparent;
  border-color: #3a3a3a;
  color: #b8b8b8;
}

.lib-auth[data-mode='sign-in'] button[data-action='sign-up']:hover,
.lib-auth[data-mode='sign-up'] button[data-action='sign-in']:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: #5a5a5a;
  color: #d8d8d8;
}

/* ── 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%;
  }
}