/* Focused mobile/PWA interaction fixes kept separate from the main design sheet. */ /* * The iOS installation dialog is appended to , outside #pc-root, so it * cannot inherit the application's theme variables. Give it an opaque theme * and constrain it to the visual viewport so page content never shows through * or overlaps the instructions. */ .pc-install-dialog { --install-dialog-bg: #1a232e; --install-dialog-ink: #ede7da; --install-dialog-ink-dim: #b9b2a2; --install-dialog-line: #2c3a48; --install-dialog-accent: #e8a33d; position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: min(420px, calc(100vw - 28px)); max-width: calc(100vw - 28px); max-height: calc( 100dvh - max(28px, env(safe-area-inset-top)) - max(28px, env(safe-area-inset-bottom)) ); margin: 0; padding: max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--install-dialog-line) !important; border-radius: 16px; background: var(--install-dialog-bg) !important; color: var(--install-dialog-ink) !important; box-shadow: 0 24px 70px rgb(0 0 0 / 55%); } .pc-install-dialog::backdrop { background: rgb(0 0 0 / 72%) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .pc-install-dialog h2 { color: var(--install-dialog-ink) !important; } .pc-install-dialog p { color: var(--install-dialog-ink-dim) !important; } .pc-install-dialog .pc-btn-primary { background: var(--install-dialog-accent) !important; color: #1a1305 !important; } body:has(#pc-root.pc-light) .pc-install-dialog { --install-dialog-bg: #ffffff; --install-dialog-ink: #241c13; --install-dialog-ink-dim: #756b5b; --install-dialog-line: #e3dcc8; --install-dialog-accent: #c97a1e; } /* Present the word add/edit form as an accessible modal card instead of opening at page top. */ #pc-word-form.open { position: fixed; z-index: 1200; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(920px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); margin: 0; overflow: auto; overscroll-behavior: contain; box-shadow: 0 0 0 100vmax rgb(0 0 0 / 58%), 0 22px 60px rgb(0 0 0 / 42%); } /* Confirmation dialogs must sit above the word editor modal. */ #pc-root > .pc-dialog-backdrop { z-index: 1400; } body:has(#pc-word-form.open) { overflow: hidden; } @media (max-width: 768px) { /* iOS zooms focused controls whose computed font size is below 16px. */ #pc-root input:not([type="checkbox"]):not([type="radio"]), #pc-root textarea, #pc-root select { font-size: 16px !important; } .pc-install-dialog { inset: 50% max(12px, env(safe-area-inset-right)) auto max(12px, env(safe-area-inset-left)); transform: translateY(-50%); width: auto; max-width: none; max-height: calc( 100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)) ); margin: 0; padding: 22px 22px max(22px, env(safe-area-inset-bottom)); } #pc-word-form.open { inset: auto 10px max(10px, env(safe-area-inset-bottom)) 10px; transform: none; width: auto; max-height: calc(100dvh - 20px - env(safe-area-inset-bottom)); border-radius: 16px; padding-bottom: max(18px, env(safe-area-inset-bottom)); } .pc-conversion-panel .pc-form, .pc-conversion-form { scroll-margin-bottom: 24px; } }