/* hygg-pwa — touch reader styling. Optimized for iPad Pro 10.5" (1112×834 CSS px) but fluid across phones/tablets. */ :root { --bar-h: 52px; --reader-fg: #e8e6e0; --reader-bg: #0b0b0b; --muted: #8a8a8a; --accent: #c8a26a; --card-bg: #161616; --border: #262626; --danger: #ff867a; --danger-ink: #180302; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; } /* Themes (class on ). */ .theme-dark { --reader-fg: #e8e6e0; --reader-bg: #0b0b0b; --muted: #8a8a8a; --card-bg: #161616; --border: #262626; --danger: #ff867a; --danger-ink: #180302; } .theme-light { --reader-fg: #1b1b1b; --reader-bg: #fbfbf9; --muted: #6b6b6b; --card-bg: #ffffff; --border: #e2e2dc; --danger: #b42318; --danger-ink: #ffffff; } .theme-sepia { --reader-fg: #4a3f33; --reader-bg: #f4ecd8; --muted: #8a795f; --card-bg: #efe6cf; --border: #ddcfae; --danger: #a4402a; --danger-ink: #f7efdd; } * { box-sizing: border-box; } /* The viewport is zoomable (maximum-scale=5), so WebKit holds every tap ~350ms to disambiguate a double-tap zoom. Buttons and links are never zoom targets — drop the delay so taps (e.g. the jump toast) act immediately. */ button, a { touch-action: manipulation; } html, body { margin: 0; padding: 0; height: 100%; background: var(--reader-bg); color: var(--reader-fg); font-family: system-ui, -apple-system, sans-serif; -webkit-text-size-adjust: 100%; overscroll-behavior: none; } .hidden { display: none; } .pad { padding: 24px; color: var(--muted); } /* Reader load failure (document not downloaded and the server fetch failed). */ .reader__error { color: var(--accent); } /* The link a server offers alongside a refusal to convert a format. Both the link's text and its target come from the server. */ .reader__action { display: inline-block; margin-top: 0.75rem; padding: 0.4rem 0.9rem; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); text-decoration: none; } /* ---------- Top bar ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--bar-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); display: grid; grid-template-columns: 96px 1fr 96px; align-items: center; background: color-mix(in srgb, var(--reader-bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); z-index: 20; transition: transform 0.25s ease; } .topbar--hidden { transform: translateY(-110%); } .topbar__title { text-align: center; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; } .topbar__left, .topbar__right { display: flex; align-items: center; gap: 4px; } .topbar__left { justify-content: flex-start; } .topbar__right { justify-content: flex-end; } .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--reader-fg); text-decoration: none; border-radius: 12px; -webkit-tap-highlight-color: transparent; /* Neutralize the UA button chrome so the class works for both the gear (an ) and the read-aloud toggle (a