/* Presentation for the app layer only.
 *
 * Kept out of book.css because that file also ships to the file:// Dropbox
 * build, where none of this can happen. Everything here is scoped to a .pwa-
 * class or to html.standalone, so a page that never reaches these states is
 * rendered exactly as it was before this file existed.
 *
 * The colours are taken from each page's own custom properties where they
 * exist, with a literal fallback, so a toast on a chapter of the physics book
 * and a toast on the philosophy timeline each look like the page they are on.
 */

/* The top of the library's stacking scale (nav.css --lib-z-*): above the
 * folio bar, the drawer and the reference card. */
.pwa-toast,
.pwa-offline {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--lib-z-toast, 80);
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 13.5px;
  line-height: 1.45;
}

/* Above the home indicator, and above nothing at all on a device without one:
 * env() resolves to 0 where there is no inset, so the same rule is correct on
 * a desktop and on a notched phone. This only works because every page now
 * carries viewport-fit=cover. */
.pwa-toast {
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(30rem, calc(100vw - 24px));
  padding: 11px 12px 11px 15px;
  border-radius: 10px;
  background: var(--ink, #1b1b1d);
  color: var(--paper, #fbfaf7);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .3);
}

/* Where the folio bar holds the foot of the screen (below 1000px on a
 * chapter), the toast sits a clear gap above it rather than on it. */
@media (max-width: 1000px) {
  html.has-folio .pwa-toast { bottom: calc(3rem + env(safe-area-inset-bottom, 0px) + 1rem); }
}

.pwa-toast button {
  flex: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: rgba(255, 255, 255, .14);
  border: 0;
  border-radius: 7px;
  padding: 7px 12px;
  cursor: pointer;
}

.pwa-toast button:hover { background: rgba(255, 255, 255, .24); }

.pwa-toast button.x {
  background: none;
  padding: 4px 6px;
  font-size: 17px;
  line-height: 1;
  opacity: .6;
}

.pwa-offline {
  top: 0;
  width: 100%;
  max-width: none;
  left: 0;
  transform: none;
  padding: calc(6px + env(safe-area-inset-top)) 12px 6px;
  text-align: center;
  background: #6b5119;
  color: #fff;
  font-size: 12.5px;
  letter-spacing: .01em;
}

/* The install card. Only ever rendered into the hub, and only for an iOS
 * browser that is not already standalone -- there is no beforeinstallprompt on
 * iOS, so this is instructions rather than a button that could do the job. */
.pwa-install {
  margin: 1.6rem 0 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--rule, #dcdfe5);
  border-radius: 12px;
  background: rgba(127, 127, 127, .05);
  font-family: var(--sans, -apple-system, sans-serif);
  font-size: 13.5px;
  line-height: 1.5;
}

.pwa-install b { font-weight: 650; }
.pwa-install p { margin: .45rem 0 .8rem; color: var(--ink-soft, #565b66); }

.pwa-install button {
  font: inherit;
  font-weight: 600;
  padding: 9px 14px;
  min-height: 44px;          /* Apple's minimum; these are touch targets */
  border: 1px solid var(--rule, #dcdfe5);
  border-radius: 8px;
  background: var(--paper, #fff);
  color: inherit;
  cursor: pointer;
}

.pwa-install button:hover { border-color: currentColor; }

/* The hub's offline chips, its Continue strip and its storage line are
 * styled with the hub (webbuild.py HUB_CSS), the only page that has them.
 * The "Read offline" list these rules used to style is gone (NAV-13). */

/* ------------------------------------------------------------- last read
 * The contents page, for a returning reader (DESIGN.md section 6, Contents):
 * pwa.js marks the row with li[data-last] and a "Last read" tag, which
 * book.css styles, and puts this link above the first part. A second tag in
 * a row keeps to the right edge beside the first rather than splitting the
 * free space with it. */
.pwa-jump {
  margin: var(--sp-4, 1rem) 0 0;
  font: 600 var(--fs-ui, .8125rem)/1.3 var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}
.pwa-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--accent, #1b4b80);
  text-decoration: none;
}
.pwa-jump a::after { content: "\2192"; margin-left: .45rem; transition: transform .15s; }
.pwa-jump a:hover::after { transform: translateX(3px); }
.pwa-jump a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .pwa-jump a { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .pwa-jump a::after { transition: none; } }
.clist .tag + .tag.last { margin-left: .5rem; }

/* ---------------------------------------------------------------- standalone
 * Only when actually launched from the Home Screen. Keyed off a class rather
 * than @media (display-mode: standalone), which is unreliable on iOS; the boot
 * script sets it from navigator.standalone. */

/* Nothing behind the status bar or the home indicator. With viewport-fit=cover
 * the page owns the whole screen, which means it also owns keeping content out
 * of the parts the system draws over. */
html.standalone body { overscroll-behavior-y: none; }

/* The library bar only. The atlas's and the timeline's own headers (.top) are
   no longer at the top of the screen -- the bar is above them -- so they take
   no inset of their own (NAV-18). The bar's height grows by the same inset
   (nav.css, --lib-bar-h), so its row keeps its 44px. */
html.standalone .topnav {
  padding-top: env(safe-area-inset-top);
}

/* There is no browser back button in a standalone app, so anything that was
 * only reachable by the browser's chrome has to be reachable in the page. The
 * top bar's Library and Chapters links cover reaching a place. They do not
 * cover coming back from one, so pwa.js puts a back control at the head of the
 * bar, and only where there is somewhere to go back to. */

/* The same box as the slot nav.css holds open for it before it arrives
   (html.standalone .topnav::before): 2.25rem, or 44px under touch, and no
   margin. Any difference between the two moves the brand when the button
   appears. */
html.standalone .pwa-back {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-soft, #565b66);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (pointer: coarse) {
  html.standalone .pwa-back { width: 44px; height: 44px; }
}

html.standalone .pwa-back:hover,
html.standalone .pwa-back:focus-visible { color: var(--ink, #1b1b1d); }

/* The drawer's prev/next row (.mn-seq) is styled in nav.css now, with the
 * rest of the drawer: book.js builds it from the chapter foot, and pwa.js
 * adds it only to a page whose book.js is older than that. */

@media print {
  .pwa-toast, .pwa-offline, .pwa-install, .pwa-jump,
  .pwa-back { display: none !important; }
}