/* Shared light, flat interface for the library and embedded reader. */
/* haerle.de's paper texture, tiled like on the main site; the colour is its
   average, shown until the image has loaded. */
html { background: #f8e8c4 url("../images/haerle-paper.jpg"); }
body { background: transparent; }
:root { color-scheme: light; --ui-accent: #0f172a; --page-gutter: 24px; }
body { color: #1e293b; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #cbd5e1; color: #0f172a; }
.page-container { width: 100%; box-sizing: border-box; padding-inline: var(--page-gutter); }
.app-header { background: transparent; }
.app-brand { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 650; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; background: #0f172a; color: #fff; font-family: Georgia, serif; font-size: 26px; }
.brand-subtitle { display: block; color: #64748b; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
main { padding-top: 40px !important; padding-bottom: 64px !important; }
h1 { letter-spacing: -.035em; line-height: 1.15; }
.eyebrow { color: #64748b; font-size: 10px; font-weight: 650; letter-spacing: .16em; margin-bottom: 12px; }
.rounded, .rounded-md, .rounded-lg { border-radius: 2px; }
.book-card { border-radius: 2px; }
.book-card img { object-fit: contain; padding: 14px; }
.book-card > div:first-child { background: transparent; }
form.bg-white { border-radius: 2px; }
input[type=text], input[type=email], input[type=password], textarea { background: #f1f5f9; color: #1e293b; border: 0; padding: 11px 13px; border-radius: 2px; }
input::placeholder { color: #64748b; }
input[type=file] { padding: 16px; background: #f8fafc; border: 0; border-radius: 2px; }
input::file-selector-button { border: 0; border-radius: 2px; background: #e2e8f0; color: #1e293b; padding: 8px 12px; margin-right: 12px; cursor: pointer; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a.rounded-md { transition: background-color .15s, color .15s, border-color .15s; }
button:disabled { cursor: default; }
button.bg-slate-900, a.bg-slate-900 { font-weight: 600; }
button.bg-slate-900:hover, a.bg-slate-900:hover { background: #334155; }
:is(a, button, input, textarea):focus-visible { outline: 2px solid #475569; outline-offset: 4px; }
.viewer-toolbar { padding: 12px 0; }
#zoom-viewport { background: transparent; scrollbar-color: #94a3b8 transparent; }
#upload-overlay { padding: 24px; }
@media (max-width: 640px) {
    :root { --page-gutter: 16px; }
    main { padding-top: 24px !important; }
    .viewer-toolbar { gap: 12px; }
    .viewer-toolbar > div:last-child { width: 100%; justify-content: space-between; }
    #view-mode-toggle { font-size: 12px; }
    #view-mode-toggle button { padding-left: 8px; padding-right: 8px; }
    .book-card img { padding: 8px; }
    .brand-subtitle { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }