/* Reader pages: plain CSS 2.1 plus min-height, for e-reader and old browsers.
   Pure black on white (e-ink shows no greys well), large type, targets at
   least 44px tall, nothing that depends on hover, colour or script. */
header, main, footer, nav, section { display: block; }
html { background: #fff; color: #000; font-family: Georgia, "Times New Roman", serif; font-size: 20px; }
body { max-width: 34em; margin: 0 auto; padding: 0 16px; line-height: 1.45; }
a { color: #000; text-decoration: underline; }
h1 { font-size: 1.6em; line-height: 1.2; margin: .6em 0 .5em; }
h2 { font-size: 1.1em; line-height: 1.3; margin: 0 0 .2em; }
p { margin: .5em 0; }
h1, h2, p, .who { word-wrap: break-word; }
header { border-bottom: 3px solid #000; padding: 10px 0; overflow: hidden; }
.brand { float: left; margin: 0; font-weight: bold; font-size: 1.2em; line-height: 44px; }
.signout { float: right; text-align: right; }
.who { font-size: .8em; margin-right: .4em; }
label { display: block; font-weight: bold; margin: 16px 0 6px; }
input, select, button { font: inherit; font-size: 1em; min-height: 44px; border: 2px solid #000; border-radius: 0; background: #fff; color: #000; -webkit-box-sizing: border-box; box-sizing: border-box; }
input, select { display: block; width: 100%; padding: 6px 8px; }
button { padding: 6px 18px; margin: 16px 0 0; font-weight: bold; cursor: pointer; }
header button { margin: 0; padding: 4px 12px; }
a:focus, input:focus, select:focus, button:focus { outline: 3px solid #000; outline-offset: 2px; }
/* A link on its own line is a target, not text. */
main p a, footer a, .clear { display: inline-block; min-height: 44px; line-height: 44px; }
.notice { border: 3px solid #000; padding: 10px 12px; }
.book { border-top: 2px solid #000; padding: 14px 0; }
.book button { margin-top: 8px; }
.meta, .count, .small { font-size: .85em; }
.pages { border-top: 2px solid #000; padding-top: 8px; }
.pages a { margin-right: 16px; }
footer { border-top: 3px solid #000; margin-top: 24px; padding: 8px 0 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; display: inline-block; min-height: 44px; line-height: 44px; }
@media (max-width: 480px) { html { font-size: 18px; } button { width: 100%; } .brand, .signout { float: none; text-align: left; } header button { width: auto; } }
.plans { border-top: 2px solid #000; margin-top: 20px; padding-top: 12px; }

/* Library: a compact toolbar and one row per book, the button on the right.
   CSS table layout lines columns up in every browser, old e-reader WebKit
   included, without flexbox or grid. */
.hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.toolbar { display: table; width: 100%; margin: 12px 0 4px; }
.toolbar .cell { display: table-cell; vertical-align: middle; padding-right: 8px; }
.toolbar .cell.grow { width: 100%; }
.toolbar .cell:last-child { padding-right: 0; }
.toolbar input, .toolbar select { font-size: .9em; }
.toolbar button { margin: 0; padding: 6px 14px; font-size: .9em; }
.toolbar select { width: auto; }
.count { margin: 10px 0 0; }
.count a { min-height: 0; line-height: inherit; }
.book { display: table; width: 100%; padding: 12px 0; }
.book .info, .book .action { display: table-cell; vertical-align: middle; }
.book .action { width: 1%; white-space: nowrap; padding-left: 16px; text-align: right; }
.book .action button { margin: 0; font-size: .9em; }
.book h2 { margin: 0; }
.book .meta { margin: 2px 0 0; }
@media (max-width: 480px) {
  .toolbar, .toolbar .cell, .book, .book .info, .book .action { display: block; width: auto; padding: 0; }
  .toolbar .cell { margin-bottom: 8px; }
  .toolbar select { width: 100%; }
  .book { padding: 12px 0; }
  .book .action { text-align: left; margin-top: 8px; white-space: normal; }
}

/* The book list is a real table: Project, Updated, Created, Size, Download,
   like the full library. Tables draw the same in every browser. */
.books { width: 100%; border-collapse: collapse; margin-top: 6px; }
.books th { text-align: left; font-size: .8em; border-bottom: 3px solid #000; padding: 6px 8px 6px 0; }
.books td { border-bottom: 2px solid #000; padding: 10px 8px 10px 0; vertical-align: middle; }
.books h2 { margin: 0; font-size: 1em; }
.books .date, .books .size { font-size: .85em; white-space: nowrap; }
.books .action { text-align: right; white-space: nowrap; padding-right: 0; }
.books .action button { margin: 0; font-size: .9em; }
.books .meta { display: block; }
@media (max-width: 480px) {
  .books, .books thead, .books tbody, .books tr, .books td { display: block; width: auto; }
  .books thead { position: absolute; left: -9999px; }
  .books tr { border-bottom: 2px solid #000; padding: 12px 0; }
  .books td { border: 0; padding: 2px 0; }
  .books td.date .meta { display: inline; }
  .books td.date br { display: none; }
  .books td[data-label]:before { content: attr(data-label) ": "; font-weight: bold; }
  .books .action { text-align: left; margin-top: 8px; }
  .books .action button { width: 100%; }
}

/* A book being prepared keeps its note on a full-width line beneath it, under
   "Preparing" on whichever side that sits, with no rule between them, so the
   two read as one entry. */
.books tr.waiting td { border-bottom: 0; padding-bottom: 2px; }
.books .waiting-note td { padding-top: 0; padding-right: 0; font-size: .85em; font-style: italic; text-align: right; }
@media (max-width: 480px) {
  .books tr.waiting { border-bottom: 0; padding-bottom: 0; }
  .books .waiting-note { padding-top: 6px; }
  .books .waiting-note td { text-align: left; }
}

/* A queued download: a small turning ring beside "Preparing". Old browsers
   and e-ink show it still, which the text beside it makes clear either way. */
.preparing { white-space: nowrap; font-size: .9em; }
.spinner { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; border: 3px solid #000; border-right-color: transparent; border-radius: 50%; -webkit-animation: reader-spin 1s linear infinite; animation: reader-spin 1s linear infinite; }
@-webkit-keyframes reader-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes reader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { -webkit-animation: none; animation: none; } }