/* Approved concepts 1–14. Editing pages deliberately have no entry or reflow animation. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1);--slider-track:#b6b6b6;--slider-fill:#737373;--slider-thumb:#f6f6f6;--slider-ring:#666}
:root[data-theme=dark]{--slider-track:#555;--slider-fill:#b7b7b7;--slider-thumb:#dedede;--slider-ring:#aaa}
button,.menu summary{transition:background-color 120ms,border-color 120ms,color 120ms}button:not(:disabled):active{transform:translateY(1px)}
.menu[open] .menu-content,.custom-dropdown.open .dropdown-menu,.editor-context-menu{animation:menu-arrive 160ms var(--motion-ease)}
#save-status[data-save-state=saved]::before{content:'';display:inline-block;width:12px;height:10px;margin-right:5px;background:currentColor;clip-path:polygon(0 48%,15% 34%,40% 65%,86% 0,100% 15%,41% 100%);animation:check-reveal 300ms var(--motion-ease)}
.book-card .cover{transition:transform 220ms var(--motion-ease),box-shadow 220ms var(--motion-ease)}.book-card:hover .cover,.book-card:focus-visible .cover{transform:translateY(-3px);box-shadow:0 8px 16px #00000016}.books.list .book-card:hover .cover{transform:translateY(-2px)}
.right-sidebar{animation:panel-arrive 220ms var(--motion-ease)}.note-card,.comment-card,[data-comment-card]{animation:content-arrive 180ms var(--motion-ease)}.comment-anchor{transition:background-color 160ms}.comment-anchor:hover{background-color:var(--sage)}
.welcome-arrival .start-book{animation:welcome-arrive 300ms var(--motion-ease) both}.welcome-arrival .start-book:nth-child(2){animation-delay:40ms}.welcome-arrival .start-book:nth-child(3){animation-delay:80ms}.welcome-arrival .start-book:nth-child(n+4){animation-delay:120ms}
[data-command-results] button{animation:command-arrive 140ms var(--motion-ease)}[data-command-results] button.active{transition:background-color 120ms;border-color:var(--line)}.toolbar [aria-pressed=true]{transition:background-color 120ms,color 120ms}.toolbar button:focus-visible{outline-color:var(--slider-ring)}
/* Flat pages, including reader, format sample, and PDF preview. */
.editor-paper,.editor-page,.reader-page,.pdf-preview-page,.format-sample-page{box-shadow:none!important}
body,.topbar,.menubar,.toolbar,.sidebar,.reader,.reader-page,.editor-paper,.editor-page{transition:background-color 260ms,color 260ms,border-color 260ms}
.draft-arrival{animation:content-arrive 180ms var(--motion-ease)}.version-diff ins{animation:draft-emphasis 600ms ease-out}
.outline-sub{animation:outline-arrive 180ms var(--motion-ease)}.outline-item{transition:background-color 120ms}.note-tabs button,.designer-tabs button,.settings-nav button{transition:background-color 200ms,color 200ms}.note-tabs button,.designer-tabs button{min-height:44px}
.pdf-dialog[open]{animation:export-arrive 240ms var(--motion-ease)}.pdf-controls{animation:content-arrive 180ms var(--motion-ease)}[data-pdf-status]{transition:color 140ms}
.import-feedback{position:fixed;bottom:24px;right:24px;z-index:80;max-width:calc(100vw - 32px);width:320px;padding:16px;background:var(--surface);color:var(--ink);box-shadow:0 6px 22px #0002;border-radius:8px;animation:content-arrive 180ms var(--motion-ease)}.import-feedback strong,.import-feedback span{display:block}.import-feedback span{font-size:12px;margin-top:4px}.import-feedback progress{width:100%;height:6px;margin-top:12px;accent-color:var(--slider-fill)}
/* Keep the semantic range input and native keyboard/touch behavior, replace all of its paint. */
input[type=range].bookie-slider{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:0;padding:0;margin:0;min-width:60px;height:32px;cursor:pointer;touch-action:pan-y;accent-color:var(--slider-fill)}
input[type=range].bookie-slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--slider-fill) 0 var(--range-fill,0%),var(--slider-track) var(--range-fill,0%) 100%)}
input[type=range].bookie-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;border:2px solid var(--slider-ring);background:var(--slider-thumb);box-shadow:none}
input[type=range].bookie-slider::-moz-range-track{height:4px;border-radius:2px;background:var(--slider-track)}input[type=range].bookie-slider::-moz-range-progress{height:4px;background:var(--slider-fill)}input[type=range].bookie-slider::-moz-range-thumb{width:12px;height:12px;border:2px solid var(--slider-ring);border-radius:50%;background:var(--slider-thumb)}
input[type=range].bookie-slider:focus-visible{outline:2px solid var(--slider-ring);outline-offset:3px}input[type=range].bookie-slider:disabled{opacity:.45;cursor:default}
@keyframes menu-arrive{from{opacity:.6;transform:translateY(-4px)}to{opacity:1;transform:none}}@keyframes check-reveal{from{opacity:0;transform:scaleX(.4)}to{opacity:1;transform:scaleX(1)}}@keyframes panel-arrive{from{opacity:.6;transform:translateX(8px)}to{opacity:1;transform:none}}@keyframes content-arrive{from{opacity:.6}to{opacity:1}}@keyframes welcome-arrive{from{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes command-arrive{from{opacity:.7;transform:translateY(2px)}to{opacity:1;transform:none}}@keyframes outline-arrive{from{opacity:.7;clip-path:inset(0 0 12% 0)}to{opacity:1;clip-path:inset(0)}}@keyframes draft-emphasis{from{filter:brightness(.85)}to{filter:none}}@keyframes export-arrive{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:none}}
:root[data-motion=reduce] *, :root[data-motion=reduce] *::before,:root[data-motion=reduce] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}:root[data-motion=reduce] .book-card:hover .cover,:root[data-motion=reduce] .book-card:focus-visible .cover,:root[data-motion=reduce] button:active{transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.book-card:hover .cover,.book-card:focus-visible .cover,button:active{transform:none}}
@media(max-width:700px){.import-feedback{bottom:16px;right:16px}.reader-footer input[type=range]{min-height:44px}}

.slider-value{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.designer-inspector input[type=range]{width:100%}

.note-tabs button{position:relative}.note-tabs button.active::after,.designer-tabs button.active::after{content:"";display:block;height:2px;background:var(--slider-fill);animation:tab-confirm 200ms var(--motion-ease)}@keyframes tab-confirm{from{transform:scaleX(.6)}to{transform:scaleX(1)}}
/* Reserve the desktop margin so opening Notes/Comments does not move the page. */
@media(min-width:1051px){.workspace.hide-right{grid-template-columns:240px minmax(0,1fr) 230px}.workspace.hide-left.hide-right{grid-template-columns:0 minmax(0,1fr) 230px}.workspace>.canvas{grid-column:2}}

/* Inverted call to action: dark on light themes, white on dark themes. */
.sign-in-button{background:var(--ink)!important;color:var(--surface)!important;border-color:var(--ink)!important;font-weight:600;padding-inline:16px}.sign-in-button:hover{opacity:.88}.sign-in-button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Sharing */
.share-button{font-weight:500}.role-chip,.role-badge{font-size:11px;color:var(--muted)}.role-chip{padding:1px 6px;border:1px solid var(--line);border-radius:4px}
.share-panel{margin-top:12px}.share-people{border-top:1px solid var(--line)}.share-person{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.share-person select{max-width:190px}
.readonly-role .outline-cover,.readonly-role [data-add-section],.readonly-role [data-section-menu]{display:none!important}
@media(max-width:700px){.share-button{display:none}}

/* Hide the one-frame unpaged draft while pages are measured on load. */
#editor.paging-pending{visibility:hidden}
/* Collaborator cursors, selections and labels. */
.canvas{position:relative}
.presence-layer{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}
.presence-selection{position:absolute;opacity:.22;border-radius:2px}
.presence-caret{position:absolute;width:2px;margin-left:-1px;background:var(--peer);transition:left 80ms linear,top 80ms linear}
.presence-caret span{position:absolute;left:-1px;bottom:100%;white-space:nowrap;background:var(--peer);color:#fff;font:600 11px/1 var(--ui);padding:3px 6px;border-radius:3px 3px 3px 0;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.presence-chips{display:flex;margin-right:6px}.presence-chips[hidden]{display:none}
.presence-chip{display:grid;place-items:center;width:28px;height:28px;margin-left:-6px;border:2px solid var(--surface);border-radius:50%;background:var(--peer);color:#fff;font:600 12px var(--ui)}
.presence-chips .presence-chip:first-child{margin-left:0}
@media(prefers-reduced-motion:reduce){.presence-caret{transition:none}}
/* Color buttons and palette popover. */
.color-button{position:relative;display:grid;place-items:center;min-width:36px;padding:4px 6px}
.color-button .color-letter{font:700 15px/1 var(--ui)}.color-button .icon{width:18px;height:18px}
.color-bar{position:absolute;left:8px;right:8px;bottom:4px;height:3px;border-radius:1px;background:var(--picked,var(--muted));box-shadow:0 0 0 1px var(--line)}
.color-popover{position:fixed;z-index:300;width:292px;padding:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.color-none{width:100%;text-align:left;margin-bottom:10px;font-size:13px}
.color-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.color-swatch{aspect-ratio:1;min-height:0;padding:0;border:1px solid #0003;border-radius:50%}
.color-swatch:hover,.color-swatch:focus-visible{outline:2px solid var(--focus);outline-offset:1px}.color-swatch[aria-current=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.color-recent{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:12px;align-items:center}.color-recent span{grid-column:1/-1;font-size:11px;color:var(--muted)}
.color-custom{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:13px}.color-custom input{width:48px;height:30px;padding:2px}
@media(max-width:700px){.color-popover{width:min(292px,calc(100vw - 16px))}.color-swatch{min-width:22px}}
.danger-link{align-self:flex-start;background:none;border:0;padding:6px 0;color:var(--danger);text-decoration:underline;min-height:0}.account-links a{color:inherit}
/* Loading state while an account's books are fetched. */
.library-sync{display:flex;align-items:center;gap:12px;padding:16px 4px;color:var(--muted);font-size:14px}.library-sync[hidden]{display:none}
.spinner{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.library-sync:not([hidden])~.books .library-empty{display:none}
@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}