/* Shared feedback for the app controls, independent of the reading paper color. */
:is(.reader-actions,.sidebar-actions,.sidebar-tools,.page-controls,.tools,.community-panel,.pdf-export-dialog,.community-auth,:where(#appearance)) button{transition:transform 120ms ease-out}
@media(hover:hover){
 :is(.reader-actions,.sidebar-actions,.sidebar-tools,.page-controls,.tools,.community-panel,.pdf-export-dialog,.community-auth,:where(#appearance)) button:hover:not(:disabled){background:color-mix(in srgb,var(--app-ink,#292720) 10%,transparent);color:var(--app-ink,#292720)}
 :is(.pdf-export-dialog .pdf-export-primary,.community-auth .community-auth-primary,.community-panel .community-empty button):hover:not(:disabled){background:color-mix(in srgb,var(--app-ink,#292720) 82%,var(--app-paper,#fffdf8));color:var(--app-paper,#fffdf8)}
 .community-auth .community-auth-google:hover:not(:disabled){background:#f2f3f5;color:#1f1f1f}
}
:is(.reader-actions,.sidebar-actions,.sidebar-tools,.page-controls,.tools,.community-panel,.pdf-export-dialog,.community-auth,:where(#appearance)) button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 0 0 100px #80808018;scale:1}
:is(.reader-actions,.sidebar-actions,.sidebar-tools,.page-controls,.tools,.community-panel,.pdf-export-dialog,.community-auth,:where(#appearance)) button:focus-visible{outline:2px solid var(--app-ink,#292720);outline-offset:3px}
:is(.pdf-export-dialog,.community-auth).motion-dialog{animation:none;opacity:0;transform:translateY(6px) scale(.985);transition:opacity 140ms ease-out,transform 140ms cubic-bezier(.2,.8,.2,1)}
:is(.pdf-export-dialog,.community-auth).motion-dialog[data-motion=open]{opacity:1;transform:translateY(0) scale(1);transition-duration:180ms}
:is(.pdf-export-dialog,.community-auth).motion-dialog::backdrop{backdrop-filter:none;background:#0005;transition:background-color 140ms ease-out}
:is(.pdf-export-dialog,.community-auth).motion-dialog[data-motion=closed]::backdrop{background:transparent}
@media(prefers-reduced-motion:reduce){
 :is(.reader-actions,.sidebar-actions,.sidebar-tools,.page-controls,.tools,.community-panel,.pdf-export-dialog,.community-auth,:where(#appearance)) button,.motion-dialog,.motion-dialog::backdrop{transition:none!important}
 :is(.pdf-export-dialog,.community-auth).motion-dialog{transform:none!important}
 :is(.reader-actions,.sidebar-actions,.sidebar-tools,.page-controls,.tools,.community-panel,.pdf-export-dialog,.community-auth,:where(#appearance)) button:active{transform:none!important}
}

/* Native dialogs share one entrance and exit, with no text scaling. */
dialog.motion-dialog[data-motion=open]{opacity:1;transform:none}
dialog.motion-dialog::backdrop{background:#0004;backdrop-filter:none;transition:background-color 160ms ease-out}
dialog.motion-dialog[data-motion=closed]::backdrop{background:transparent}
@starting-style{dialog.motion-dialog[data-motion=open]::backdrop{background:transparent}}
/* Small menus originate at their trigger and retain an exit transition. */
:is(.tractate-popover,.font-popover,.mobile-actions-menu){animation:none!important;opacity:0;transform:translateY(-4px);transform-origin:top right;transition:opacity 120ms ease-out,transform 160ms cubic-bezier(.22,1,.36,1),display 160ms allow-discrete,overlay 160ms allow-discrete}
:is(.tractate-popover,.font-popover,.mobile-actions-menu):popover-open{opacity:1;transform:none}
:is(.tractate-popover,.font-popover,.mobile-actions-menu)[data-popover-fallback]:not([hidden]){opacity:1;transform:none}
@starting-style{:is(.tractate-popover,.font-popover,.mobile-actions-menu):popover-open{opacity:0;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){dialog.motion-dialog::backdrop,:is(.tractate-popover,.font-popover,.mobile-actions-menu){transition:none!important;transform:none!important}}

/* Native dialogs share one focus layer on phones, including appearance settings.
   visualViewport keeps actions above the on-screen keyboard on iOS. */
body:has(dialog[open].motion-dialog){overflow:hidden}
@media(max-width:720px){
 dialog.motion-dialog[open]{box-sizing:border-box;position:fixed;inset:var(--dialog-top,0px) 0 auto;margin:8px auto;width:calc(100% - 16px);max-width:calc(100% - 16px);max-height:calc(var(--dialog-height,100dvh) - 16px);overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 #appearance.desktop-appearance[open]{inset:var(--dialog-top,0px) 0 auto;margin:8px auto;width:calc(100% - 16px);max-height:calc(var(--dialog-height,100dvh) - 16px);padding:20px;overflow-y:auto}
 #appearance .desktop-dialog-close{position:sticky;top:0;float:right;z-index:2;width:48px;height:48px;margin:-8px -8px 0 8px;background:var(--paper);border-radius:8px}
 .reading-editor.motion-dialog[open]{height:calc(var(--dialog-height,100dvh) - 16px);max-height:calc(var(--dialog-height,100dvh) - 16px);border-radius:12px;overflow:hidden}
 .reading-editor .editor-scroll,.pdf-export-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
 .reading-editor>header,.reading-editor>footer,.pdf-export-heading,.pdf-export-footer{flex-shrink:0}
 .reading-editor>footer{padding-bottom:max(12px,env(safe-area-inset-bottom));flex-wrap:wrap}
 dialog.motion-dialog input,dialog.motion-dialog textarea{font-size:16px}
 dialog.motion-dialog button{touch-action:manipulation}
}

/* Reading controls use a bottom sheet on phones and a dialog on desktop. */
#appearance{--control-radius:10px;--control-padding:4px}
#appearance .appearance-heading h2,#appearance .drawer-heading h2{font-weight:500;letter-spacing:-.025em}
#appearance .interface-theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;border-radius:10px;background:var(--soft);gap:0}
#appearance .interface-theme-options button{min-height:40px;border-radius:6px;font-weight:400}
#appearance .interface-theme-options button[aria-pressed=true]{background:var(--surface);color:var(--ink)}
#appearance .interface-theme-setting{margin-bottom:20px}
#appearance.vaul-appearance{inset:auto 0 0;width:100%;max-width:560px;max-height:calc(100dvh - 24px);padding:0 20px max(20px,env(safe-area-inset-bottom));border:0;border-radius:24px 24px 0 0;box-shadow:0 -1px 0 var(--rule);color:var(--ink);background:var(--surface);z-index:1000}
#appearance.vaul-appearance[data-state=open]{transform:none;will-change:auto}
.drawer-overlay{z-index:999;backdrop-filter:none;background:#0006}
#appearance .drawer-handle{height:5px;min-height:5px;width:36px;margin:12px auto 4px;border-radius:3px;opacity:.5}
#appearance .drawer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;min-height:56px;margin-bottom:4px}
#appearance .drawer-heading h2{font-size:20px;margin:0}
#appearance .drawer-close{display:grid;place-items:center;width:48px;height:48px;min-width:48px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--quiet);font:24px/1 var(--ui-font)}
#appearance.vaul-appearance .appearance-heading{display:none}
#appearance.vaul-appearance .drawer-controls{padding:0 2px 8px}
#appearance.vaul-appearance .setting-section{margin-top:16px}
#appearance.vaul-appearance .setting-section h3{font-size:14px;font-weight:400;margin:0 0 10px}
#appearance.vaul-appearance .modes button{min-height:44px;font-size:15px;font-weight:400}
#appearance.vaul-appearance .interface-theme-options button{min-height:44px;font-size:15px}
#appearance.vaul-appearance .size-row{margin-top:20px;padding:4px 0;background:transparent;grid-template-columns:100px minmax(0,1fr);gap:12px}
#appearance.vaul-appearance .size-adjuster{gap:4px}
#appearance.vaul-appearance .size-adjuster>button{width:40px;min-width:40px;height:48px;min-height:48px}
#appearance.vaul-appearance .size-caption,#appearance.vaul-appearance .font-setting-label{font-size:16px}
#appearance.vaul-appearance .theme-options{gap:12px;padding:4px}
#appearance.vaul-appearance .theme-options button>.theme-preview{height:56px}
#appearance.vaul-appearance .font-setting-row{min-height:52px}
:root[data-theme=dark] #appearance{--surface:#222;--paper:#222;--soft:#2c2c2c;--ink:#efefef;--quiet:#b3b3b3;--rule:#ffffff18;color-scheme:dark;box-shadow:none;border-color:#ffffff18}
:root[data-theme=dark] #appearance .segment-indicator,:root[data-theme=dark] #appearance .interface-theme-options button[aria-pressed=true]{background:#414141;box-shadow:none}
:root[data-theme=dark] #appearance .theme-preview{border-color:#ffffff30}
#appearance button:focus:not(:focus-visible){outline:none}