/* The hub's own pages (shelf, pairing) on top of style.css; the reading view is the
   instance's (reader.css). */

.hub-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem 16px 3rem;
}

.hub-page h1 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}

.hub-page h2 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.5rem;
}

.hub-page .error {
  color: var(--error);
}

/* The terms of use keep the line breaks of their text file. */
.hub-terms p {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.hub-books {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hub-book {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.hub-book a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* The library a book came from, its percentage and its buttons (hub.js, bookActions:
   the finished toggle, style.css's .finished-toggle, and Remove from the Bookshelf):
   a line of their own under the title, the buttons at the right. */
.hub-book-row {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* The library the book came from: at the left of that line. */
.hub-book-row .hub-book-from {
  margin-right: auto;
  overflow-wrap: anywhere;
}

.hub-book-actions {
  display: inline-flex;
  gap: 0.25rem;
}

.hub-book-actions .icon-button {
  border-radius: 4px;
  cursor: pointer;
}

.hub-book-actions .hub-remove:hover {
  color: var(--error);
}

.hub-sync {
  font-size: 0.9rem;
}

/* The message in place of a book's text (not paired, gone, offline). */
.reader .text .hub-status {
  color: var(--muted);
}

/* The download view in place of a book's text before its first opening (and where
   it stopped): plain paragraphs, not the book's indented ones. */
.text .hub-download p {
  text-indent: 0;
}

.hub-download progress {
  display: block;
  width: 100%;
  max-width: 24rem;
  accent-color: var(--accent);
}

.hub-download .hub-download-count {
  margin-top: 0.4rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The app's logo in the top bar: before the name, alone on a phone (base.html); in
   color (logo.html) with the books in the theme's profile colors, as the avatar. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.brand-logo {
  flex: none;
  width: 1.4em;
  height: 1.4em;
}

/* The outline logo of the reading view: the size of its other icons, a little larger. */
.icon.brand-logo {
  width: 1.25em;
  height: 1.25em;
}

.logo-book-0 {
  fill: var(--pcolor-0);
}

.logo-book-1 {
  fill: var(--pcolor-1);
}

.logo-book-2 {
  fill: var(--pcolor-7);
}

.logo-shelf {
  fill: currentColor;
}

/* "Open file" for book files (.sgbook): a button in the Bookshelf's top bar (hub.js);
   on the page only the status line of opening one. */
.hub-open {
  margin: 0;
}

.hub-file-status {
  margin: 0 0 1rem;
}

.hub-file-status:empty {
  display: none;
}

.hub-book .hub-file-hint {
  font-size: 0.85rem;
}

/* My account in the top bar: the account's initials on its color (hub.js,
   showAccountAvatar), as the library's profile avatar; the button keeps the size it
   has with the person icon. */
.device-link:has(.avatar) {
  padding: 2px;
  border-radius: 50%;
}

.device-link .avatar {
  width: 26px;
  height: 26px;
}

/* The top bar's way to My account, at its right end. */
.topbar:not(:has(.search)) > .theme-select {
  margin-left: auto;
}

@media (max-width: 48rem) {
  /* The theme select is hidden there. */
  .topbar:not(:has(.search)) > .device-link,
  .topbar:not(:has(.search)) > .hub-open-file {
    margin-left: auto;
  }

  .topbar > .hub-open-file + .device-link {
    margin-left: 0;
  }

  /* The name with its logo is hidden there (style.css; this file's inline-flex comes
     later): the home link shows the logo alone. */
  .brand {
    display: none;
  }
}

/* "This device" (`/device`). */
.hub-device-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hub-device-title .icon {
  flex: none;
  color: var(--muted);
}

.hub-device-actions {
  margin: 0.75rem 0 0;
}

.hub-device-status,
.hub-device-local-status,
.hub-device-forget-status {
  margin: 0.5rem 0 0;
}

.hub-device-status:empty,
.hub-device-local-status:empty,
.hub-device-forget-status:empty {
  display: none;
}

/* Phase 30: notices, the library switcher, small forms of sign-in, invites and My account. */
.hub-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.hub-libraries {
  margin: 0.5rem 0 1rem;
}

.hub-book .hub-book-library {
  font-size: 0.85em;
}

.hub-form {
  display: grid;
  gap: 0.5rem;
  max-width: 28rem;
  margin: 0.75rem 0 1.25rem;
}

.hub-form h3 {
  margin: 0;
}

.hub-form .field {
  display: grid;
  gap: 0.25rem;
}

.hub-form button {
  justify-self: start;
}

.hub-form-status:empty {
  display: none;
}

.hub-device-choice label {
  display: block;
  margin: 0.25rem 0;
}

.hub-account {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

/* The page tabs Bookshelf | Showcase (hub.js, pageTabs): the library's Authors |
   Folders switch (`.modes`, style.css) at the top of the page. */
.hub-tabs {
  margin: 0 0 1rem;
}

/* The library's Showcase (showcase.js): the library's lists and book card. */

.hub-showcase-search {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.hub-showcase-search input {
  flex: 1;
  min-width: 0;
}

/* The Showcase's lists: the same tabs, a little smaller, as the reader's sidebar
   tabs (reader.css); a narrow screen wraps them. */
.hub-showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
}

.hub-showcase-tabs a {
  flex: 1 1 auto;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
  border-radius: var(--radius);
}

.hub-showcase-tabs a:hover {
  text-decoration: none;
  background: var(--hover);
}

.hub-showcase-tabs a.active {
  color: var(--fg);
  font-weight: 600;
  background: var(--active-bg);
}

.hub-back {
  margin: 0 0 0.75rem;
}

.hub-waiting {
  margin-top: 0.75rem;
}

@media (pointer: coarse) {
  /* One tab per finger. */
  .hub-tabs a,
  .hub-showcase-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
  }

  /* One finger wide. */
  .hub-book-actions .icon-button {
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* The library's computer is online (the Showcase). */
.hub-online {
  margin: -0.5rem 0 1rem;
}

.hub-online-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #2da44e;
  vertical-align: 0.05rem;
}