/* Diligence in its app for iPhone and Android (public/js/native.js): the PDF viewer on Android
   and the offline page's documents and presentations. Nothing here applies in a browser. */

/* The PDF viewer (Android; iPhones use Apple's own) */
.app-pdf { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; background: #3A4150; }
html.app-pdf-on, html.app-pdf-on body { overflow: hidden; }
.app-pdf-bar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: max(6px, env(safe-area-inset-top)) 10px 6px;
  background: #0D1A2B; color: #F4F1EA; font: 500 14px/1.2 "Poppins", system-ui, sans-serif; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.app-pdf-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.app-pdf-bar button { appearance: none; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #F4F1EA;
  height: 36px; min-width: 40px; padding: 0 12px; border-radius: 999px; font: 500 14px/1 "Poppins", system-ui, sans-serif; }
.app-pdf-close { background: linear-gradient(180deg, #D8C48A, #C2A961) !important; color: #0D1A2B !important; border-color: transparent !important; }
.app-pdf-zoom { display: flex; gap: 6px; }
.app-pdf-pages { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 8px 8px max(16px, env(safe-area-inset-bottom)); outline: none; }
.app-pdf-page { margin: 0 auto 8px; width: fit-content; min-width: 60%; background: #fff; box-shadow: 0 4px 18px -8px rgba(0, 0, 0, .5); }
.app-pdf-page canvas { display: block; }
.app-pdf-pages:not(.zoomed) .app-pdf-page { width: 100%; }
.app-pdf-pages:not(.zoomed) .app-pdf-page canvas { width: 100% !important; height: auto !important; }

/* The offline page, in the app: what's on the phone */
.app-offline { width: min(400px, 100%); margin-top: 26px; text-align: left; }
.app-offline[hidden] { display: none; }
.app-offline h2 { margin: 0 0 10px; font: 500 12px/1 "Poppins", system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #C9A14E; text-align: center; }
.app-offline .app-studio { width: 100%; margin-bottom: 18px; }
.app-offline ul { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow: auto; border-top: 1px solid rgba(255, 255, 255, .08); }
.app-offline li button { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 4px; text-align: left; cursor: pointer;
  appearance: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); background: none; color: #F4F1EA; font: 400 15px/1.35 "Lato", system-ui, sans-serif; }
.app-offline li small { color: #8E9BB0; font-size: 12.5px; }
.app-offline .app-none { color: #8E9BB0; font-size: 13.5px; text-align: center; margin: 6px 0 0; }
.app-offline-on body { overflow: auto; place-items: start center; }
.app-offline-on .box { margin-top: 6vh; }

/* In the app the page runs edge to edge: clear of the status bar, notch and home bar, with the
   status bar always on navy (its text is light). */
html.in-app body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #0D1A2B; z-index: 990; pointer-events: none; }
html.in-app .hero { padding-top: env(safe-area-inset-top, 0px); min-height: calc(var(--hero-h) + env(safe-area-inset-top, 0px)); }
html.in-app .foot { padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }
html.in-app .toasts { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
html.in-app .offline { top: calc(14px + env(safe-area-inset-top, 0px)); }
html.in-app .viewer { padding-top: env(safe-area-inset-top, 0px); }
html.in-app .palette { padding-top: calc(12vh + env(safe-area-inset-top, 0px)); }
html.in-app .gate { padding-top: calc(24px + env(safe-area-inset-top, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
html.in-app dialog { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); }

/* In the app, nothing about installing Diligence (it is installed). */
html.in-app [data-install], html.in-app .install-only { display: none !important; }