/* sheets (§2). Bottom-sheet on mobile; centered modal ≥901px. */ dialog.sheet { position: fixed; margin: 0; padding: 0; border: none; background: transparent; max-width: 100%; width: 100%; left: 0; right: 0; bottom: 0; top: auto; color: var(--ink); } /* No `backdrop-filter: blur(...)` here on purpose: when a sheet sits over the animated aura orb (orb-spin 18s + orb-stars 22s + orb-float 3s), a blurred backdrop forces the compositor to re-rasterize the blur every frame, which stalls the share-sheet open + the 1200×630 thumbnail decode. A slightly darker solid scrim gets the same "modal" focus cue with no per-frame cost. */ dialog.sheet::backdrop { background: rgba(26,13,46,0.58); } /* While a sheet is open we also pause the underneath aura animations so the compositor has nothing extra to recomposite while the sheet's open animation + thumbnail are landing. JS toggles this class on on sheet open/close (sheet.js). */ body.sheet-open .aura-orb.animated, body.sheet-open .aura-orb.animated *, body.sheet-open .scan-glow, body.sheet-open .scan-orb { animation-play-state: paused; } .sheet-inner { background: var(--cream); border-radius: var(--r-28) var(--r-28) 0 0; box-shadow: var(--shadow-paper); /* Right padding bumped from 20 → 28 so the sticky `.sheet-head` close button isn't covered by iOS Safari's translucent overlay scrollbar (which appears flush with `.sheet-inner`'s right edge while scrolling). `scrollbar-gutter: stable` reserves the scrollbar gutter on browsers that support it so content doesn't shift when the scrollbar appears. */ padding: 8px 28px calc(24px + env(safe-area-inset-bottom)) 20px; scrollbar-gutter: stable; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } dialog.sheet.dark .sheet-inner { background: var(--ink); color: #fff; } /* detents */ .detent-medium .sheet-inner { max-height: 60vh; } .detent-large .sheet-inner { max-height: 92vh; } .detent-fraction-45 .sheet-inner { max-height: 48vh; } .detent-fixed .sheet-inner { max-height: 80vh; } /* `` makes the document inert for pointer + focus, but the body itself can still scroll under touch. Lock it while any sheet is open (the body.sheet-open class is toggled in sheet.js). */ body.sheet-open { overflow: hidden; } /* Note: the download/export flow on mobile no longer uses `` — it renders as a `.export-fs` full-bleed overlay (see openExportFullscreen in screens/export.js + the `.export-fs` rules in screens.css). The prior `dialog.sheet:has(.export-bar)` mobile-flex layout that lived here is gone with it. */ .sheet-content { animation: sheet-up 0.3s var(--ease-soft); } @keyframes sheet-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* The header (and its ✕) stays pinned to the top of the sheet as content scrolls, so the close button is always reachable. */ .sheet-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0 10px; margin-bottom: 6px; background: var(--cream); } dialog.sheet.dark .sheet-head { background: var(--ink); } .sheet-head [data-action="close-sheet"] { flex: 0 0 auto; } .sheet-head h2 { font-size: 24px; } .sheet-head h2.centered { flex: 1; text-align: center; } .sheet-actions { display: flex; gap: 10px; margin: 18px 0 0; padding: 0; } .sheet-actions .pill { flex: 1; } /* confirm / alert */ .confirm-body { text-align: center; padding: 8px 4px 4px; } .confirm-title { font-size: 24px; } .confirm-msg { color: var(--text-muted); margin-top: 8px; } /* action menu (overflow / long-press) */ .action-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .menu-eyebrow { margin-bottom: 8px; } .menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 8px; border: none; background: none; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; } .menu-item:active { background: var(--ink-06); border-radius: var(--r-10); } .menu-item.danger { color: var(--coral); } .menu-div { border: none; border-top: 1px solid var(--divider); margin: 4px 0; } /* form elements */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field input, .text-input { width: 100%; padding: 12px 14px; border: 1px solid var(--ink-10); border-radius: var(--r-12); background: var(--paper); font: inherit; font-size: 15px; } textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--ink-10); border-radius: var(--r-12); background: var(--paper); font: inherit; resize: vertical; } .field-error { color: var(--coral); font-size: 13px; font-weight: 600; } .set-help, .set-hint { color: var(--text-muted); font-size: 13px; } /* toggle switch */ .switch { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 999px; background: var(--ink-15); position: relative; cursor: pointer; flex: 0 0 auto; transition: background 0.2s; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--ease-pop); box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .switch:checked { background: var(--mint-dark); } .switch:checked::after { transform: translateX(20px); } /* desktop: centered modal + sidebar tab bar */ @media (min-width: 901px) { dialog.sheet { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(560px, 92vw); } .sheet-inner { border-radius: var(--r-22); max-height: 86vh; } #tabbar { top: 0; bottom: 0; left: 0; right: auto; width: 96px; border-top: none; border-right: 1px solid var(--ink-06); } .tablist { flex-direction: column; height: 100%; padding-top: 24px; gap: 8px; max-width: none; } .tab { flex: 0 0 auto; } /* #main stays centered (via #app align-items:center); the fixed sidebar sits in the left gutter, which is wider than 96px at any viewport ≥901px. */ }