/* The library (/library/, js/library.js), on top of pages.css: the same white page, Helvetica and 2px rules.
   Signed in it is the make page's checkout in miniature: a heading over a 2px box of rows, what a thing is on
   the left of its row and its state on the right. One oxblood button a page, the next thing to do. */
.lib [hidden] { display: none !important; }

/* The page's name, and who is signed in beside it. */
.lib-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.pg .lib-head h1 { margin: 0; }
.lib-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin: 0; font-size: 16px; }
.lib-who span { overflow-wrap: anywhere; }
.lib-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── Signed out: the email, then the link ── */
/* Signed out the page is a short one (pages.css, the proportions): one centred column, the heading and its
   sentence centred over a form 480 wide; the label is bold and 8 over a 48px field, the button the form's width. */
.pg .lib:has(> .lib-signin:not([hidden])) { max-width: calc(var(--w-read) + 2 * var(--gutter)); }
.lib:has(> .lib-signin:not([hidden])) .lib-head { justify-content: center; }
.lib-signin { text-align: center; }
.pg .lib-signin .lede { margin: var(--s-2) auto 0; }
.lib-signin form, .lib-signin [data-sent] { max-width: var(--w-form); margin-left: auto; margin-right: auto; text-align: left; }
.lib-signin form { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.lib-signin label { display: grid; gap: var(--s-1); font: 700 var(--t-small)/1.25 var(--f-head); letter-spacing: -0.01em; }
.lib-signin input { min-height: var(--ctl-h); padding: 0 12px; border: 2px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font: inherit; font-weight: 400; font-size: var(--t-body); letter-spacing: 0; }
.pg .lib-signin button.site-btn-large { --pg-btn: var(--oxblood); }
.lib-signin > .pg-fine { margin: var(--s-3) auto 0; }
.lib-signin input[name=code] { letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.lib-signin [data-sent] { margin-top: var(--s-4); }
.lib-signin h2 { margin-top: 0; }
.lib-signin [data-sent] p { margin: 10px 0 0; }
.pg .lib button.site-btn { border: 0; cursor: pointer; font-family: inherit; }
.pg .lib button.site-btn[disabled], .lib-link[disabled] { opacity: 0.5; cursor: default; }
/* The code is the way in from another device: folded under one line, since the emailed link signs in by itself. */
.lib-code-fold { margin: 18px 0 0; }
.lib-code-fold summary { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lib-code-fold[open] summary { margin-bottom: 6px; }

.lib-note { margin: 12px 0 0; font-size: 16px; }
.lib-note:empty { display: none; }
.lib-note.is-error { color: #a3141d; }

/* ── Signed in: the books on the left, what is paid, given and ordered beside them ── */
.lib-cols { display: flex; align-items: flex-start; gap: 0 var(--col-gap); margin-top: var(--s-3); padding-top: 4px; border-top: 2px solid var(--ink); }
.lib-main { flex: 1 1 0; min-width: 0; }
/* The 12 columns: the books take 7, what is paid, given and ordered takes 5. */
.lib-side { flex: 0 0 calc((100% - 11 * var(--col-gap)) / 12 * 5 + 4 * var(--col-gap)); min-width: 0; }
/* Nothing for the left column: the right one is the page. */
.lib-main:not(:has(> section:not([hidden]))) { display: none; }
.lib-main:not(:has(> section:not([hidden]))) + .lib-side { flex: 0 1 640px; }

.lib-sec { margin-top: var(--s-3); }
.pg .lib-sec > h2, .pg .lib-sec > h3 { margin: 0 0 12px; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.02em; }
.lib-sec > p { margin: 0; }
.lib-sec .actions { margin-top: 16px; align-items: center; }

.lib-rows { list-style: none; margin: 0; padding: 0; border: 2px solid var(--ink); }
.lib-row { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(48%); align-items: center; gap: 4px 18px; min-height: 52px; padding: 9px 14px; border-top: 1px solid var(--ink); }
.lib-row:first-child { border-top: 0; }
.lib-what { display: grid; gap: 2px; min-width: 0; }
.lib-what b, .pg .lib-what h3 { margin: 0; font: 700 16px/1.25 var(--f-head); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.lib-what small { font-size: var(--t-small); line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
/* The value at the right: its state in words, and under it the one way on. */
.lib-val { display: grid; gap: 6px; justify-items: end; text-align: right; font: 700 15px/1.25 var(--f-head); letter-spacing: -0.01em; }
.lib-val a:not(.site-btn) { text-underline-offset: 3px; }
.pg .lib-val .site-btn { min-height: 44px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
.lib-links { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 4px 0 0; font-size: var(--t-small); }
.lib-row > .lib-links, .lib-row > form, .lib-row > .lib-note { grid-column: 1 / -1; margin-top: 0; }
.lib-links .lib-danger { color: #a3141d; font-weight: 700; }

/* A book: its cover, then the row. */
.lib-book { grid-template-columns: 58px minmax(0, 1fr) fit-content(40%); gap: 4px 16px; padding-top: 12px; padding-bottom: 12px; }
.lib-cover { width: 58px; aspect-ratio: 2 / 3; object-fit: cover; background: var(--tile); border: 1px solid var(--rule); }
.pg .lib-book .lib-what h3 { font-size: 19px; letter-spacing: -0.025em; }

.lib-claim > p { max-width: 34em; }
.pg .lib-empty > p { font-size: var(--t-h3); max-width: 26em; }
.pg .lib .lib-empty .site-btn { --pg-btn: var(--oxblood); }

/* Nothing paid for and nothing given: no right column, the books take the page. */
.lib-side:not(:has(> section:not([hidden]))) { display: none; }

/* A gift's new address: one box and its button. */
.lib-code { display: flex; gap: 0; align-items: end; }
.lib-code label { display: grid; gap: 6px; flex: 1 1 0; min-width: 0; font-size: var(--t-small); color: var(--muted); }
.lib-code input { width: 100%; min-height: 48px; padding: 0 12px; border: 2px solid var(--ink); border-right: 0; border-radius: 0; background: #fff; color: var(--ink); font: inherit; font-size: 17px; }
.lib-code input[name=code] { letter-spacing: 0.04em; text-transform: uppercase; }
.pg .lib-code .site-btn { min-height: 48px; background: var(--ink); }

/* The account page (/account/, account/account.js): a short page, one 560 column (pages.css, the proportions), its
   three things as rows of the same 2px box, and the delete paragraph under them once asked. */
.pg .lib-account-page { max-width: calc(var(--w-read) + 2 * var(--gutter)); }
.lib-account-page .lib-rows, .lib-account-page .lib-sure { margin-top: var(--s-3); }
.lib-back { margin: var(--s-3) 0 0; font-size: var(--t-small); }
.lib-back a { text-underline-offset: 3px; }
.lib-who a.lib-link { display: inline-flex; align-items: center; min-height: 44px; }
.lib-sure { max-width: var(--w-read); color: var(--ink); font-size: 17px; }
.pg .lib-sure h2 { margin: 8px 0 8px; font-size: var(--t-h3); }
.lib-sure p { margin: 0; }
.lib-sure .actions { margin-top: 16px; }
.pg .lib .site-btn.lib-danger { background: #a3141d; color: #fff; }

@media (max-width: 900px) {
  .lib-cols { display: block; }
  .lib-who { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .lib-row { padding: 10px 12px; }
  .lib-book { grid-template-columns: 46px minmax(0, 1fr); gap: 4px 10px; }
  .lib-cover { width: 46px; }
  /* A row with a button: the state and the button go under its words, the state first and the button at the right. */
  .lib-row:has(.lib-val .site-btn) { grid-template-columns: minmax(0, 1fr); }
  .lib-book:has(.lib-val .site-btn) { grid-template-columns: 46px minmax(0, 1fr); }
  .lib-row:has(.lib-val .site-btn) > .lib-val { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; justify-items: start; align-items: center; text-align: left; gap: 12px; margin-top: 6px; }
  .lib-row:has(.lib-val > .site-btn:only-child) > .lib-val { display: block; }
  .pg .lib-val > .site-btn:only-child { display: flex; width: 100%; min-height: 50px; font-size: 16px; }
  .lib-links { gap: 0 14px; margin-top: 0; }
  .lib-links a, .lib-links .lib-link, .lib-val a:not(.site-btn) { display: inline-flex; align-items: center; min-height: 44px; }
}