/* v20.8.21 Mobile UX Overhaul. Device layout only; schema and story content unchanged. */
.wd-mobile-writing-controls,.wd-mobile-tabbar,.wd-mobile-library-nav,.wd-mobile-context-close{display:none}
@media (max-width:670px){
  html,body{max-width:100%;overflow-x:clip}
  .app-shell,.main-area,.view,.page-content,.editor-frame{min-width:0;max-width:100%}
  button,input,textarea,select{touch-action:manipulation}
  .topbar{height:56px;min-height:56px;position:sticky;top:0;z-index:45;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));gap:6px;display:flex;align-items:center;justify-content:space-between;overflow:visible}
  .topbar-left,.topbar-right{min-width:0;gap:5px;flex:0 0 auto;display:flex;align-items:center}
  .topbar-left{flex:1 1 auto}
  .topbar-right{justify-content:flex-end}
  .topbar .crumbs,.topbar #globalNotesToggle,.topbar #referenceToggle,.topbar #focusModeBtn,.topbar #captureBtn,.topbar #wdAppearanceButton,.topbar #returnToWriting,#workspaceForward{display:none!important}
  .topbar #openSidebar,.topbar #workspaceBack,.topbar #quickSwitcherButton,.topbar #moreBtn{display:grid;place-items:center;width:42px;min-width:42px;height:42px;min-height:42px;padding:0;border-radius:12px}
  .topbar #quickSwitcherButton{font-size:21px}
  .topbar #quickSwitcherButton span,.topbar #wdCloudButton span{display:none!important}
  .topbar #wdCloudButton{display:flex;align-items:center;justify-content:center;height:42px;min-width:53px;padding:0 10px;border-radius:12px;gap:5px}
  .topbar .save-state{font-size:0;min-width:12px;padding:0;margin:0}
  .topbar .save-state .save-dot{width:9px;height:9px}
  body > #moreMenu{position:fixed;top:60px;right:8px;left:auto;width:min(315px,calc(100vw - 16px));max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;z-index:94;box-shadow:0 15px 35px #0007}
  .more-menu .wd-mobile-menu-action{display:flex;align-items:center;min-height:45px}
  body.wd-mobile-bottom-more-open > #moreMenu{top:auto!important;bottom:calc(67px + env(safe-area-inset-bottom));right:8px;max-height:calc(100dvh - 135px)}
  .sidebar{width:min(85vw,320px);max-width:320px;height:100dvh;max-height:100dvh;z-index:72;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  body.sidebar-open .drawer-scrim{z-index:70;position:fixed;inset:0}
  .close-sidebar,.sidebar .sidebar-head .icon-button{width:42px;min-width:42px;height:42px}
  .nav-item,.sidebar-create-menu button{min-height:42px}
  .wd-mobile-writing-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 5px;padding:0;max-width:100%}
  .wd-mobile-writing-controls button{min-height:40px;padding:8px 12px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:10px;background:var(--raised);color:var(--text);font:inherit;font-size:calc(12px * var(--wd-ui-scale,1))}
  .wd-mobile-writing-controls .wd-mobile-context-action{margin-left:auto}
  #writeView .editor-frame{box-sizing:border-box;width:100%;margin:0 auto;padding:12px max(18px,env(safe-area-inset-left)) calc(105px + env(safe-area-inset-bottom))!important;min-height:calc(100dvh - 57px)}
  #writeView .doc-top-row{margin:0 0 7px;min-width:0}
  #writeView .title-input{width:100%;min-width:0;font-size:clamp(23px,6.4vw,32px);line-height:1.23;padding:7px 0;white-space:normal;letter-spacing:-.02em}
  #writeView .editor{min-height:calc(62dvh - 35px);font-size:var(--writing-size,19px);line-height:var(--wd-reader-line,1.78);overflow-wrap:anywhere}
  #writeView .rich-manuscript-toolbar{position:relative;top:auto;margin:6px 0 11px;max-width:100%;z-index:4}
  #writeView .rich-manuscript-toolbar .rich-tool{min-width:36px;min-height:40px;flex:0 0 auto;padding:8px 10px}
  /* Context is a dedicated sheet, not a second floating formatting bar. */
  #writeView.context-side-open .fragment-context{display:block;position:fixed;z-index:81;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:100%;height:auto;max-height:min(74dvh,710px);overflow-y:auto;overscroll-behavior:contain;margin:0;border-radius:18px 18px 0 0;border:1px solid var(--line);padding-bottom:calc(15px + env(safe-area-inset-bottom));background:var(--raised);box-shadow:0 -15px 45px #0009}
  body.wd-mobile-context-open:before{content:"";position:fixed;inset:0;z-index:79;background:#0009}
  body.wd-mobile-context-open #writeView .rich-manuscript-toolbar,body.wd-mobile-context-open #writingToolbar{visibility:hidden;pointer-events:none}
  body.wd-mobile-context-open #writeView .wd-mobile-writing-controls{visibility:hidden;pointer-events:none}
  .wd-mobile-context-close{position:absolute;right:10px;top:7px;z-index:2;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--raised);color:var(--text);font-size:21px}
  #writeView.context-side-open .fragment-context>summary{padding:17px 61px 13px 17px;min-height:51px;font-size:calc(15px * var(--wd-ui-scale,1))}
  #writeView.context-side-open .fragment-context-inside{padding:0 14px 12px;display:block}
  #writeView.context-side-open .fragment-context-inside label{display:block;padding:4px 2px 9px}
  #writeView.context-side-open .fragment-context .rich-field{min-width:0;max-height:48dvh}
  #writeView.context-side-open .fragment-context .rich-toolbar{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;position:relative;top:auto;min-height:44px;max-width:100%;white-space:nowrap;scrollbar-width:thin}
  #writeView.context-side-open .fragment-context .rich-tool{flex:0 0 auto;min-width:39px;min-height:40px;padding:8px 9px}
  #writeView.context-side-open .fragment-context .rich-editable{min-height:100px;max-height:32dvh;font-size:calc(15px * var(--wd-ui-scale,1));overflow:auto}
  #writeView.context-side-open .fragment-context-status{font-size:calc(12px * var(--wd-ui-scale,1))}
  body.wd-mobile-keyboard-open .writing-toolbar,body.wd-mobile-keyboard-open .wd-mobile-tabbar{display:none!important}
  .writing-toolbar{box-sizing:border-box;left:0;right:0;bottom:0;height:calc(63px + env(safe-area-inset-bottom));padding:5px 9px calc(5px + env(safe-area-inset-bottom));display:flex;z-index:55;justify-content:space-around;align-items:center;background:var(--wd-topbar,var(--raised));border-top:1px solid var(--line)}
  .writing-toolbar .toolbar-tools{width:100%;max-width:100%;justify-content:space-around;gap:4px;flex:1;min-width:0}
  .writing-toolbar .toolbar-tools .format-button{flex:1 1 0;min-width:0;min-height:46px;gap:5px;padding:6px 3px;font-size:calc(11px * var(--wd-ui-scale,1))}
  .writing-toolbar .toolbar-tools .format-button svg{width:17px;height:17px}
  .writing-toolbar>.only-symbol,.writing-toolbar>.color-tool,.writing-toolbar .toolbar-right{display:none!important}
  .editor-end{overflow-wrap:anywhere}
  /* A single bottom navigation on browsing screens; writing has its own toolbar. */
  .wd-mobile-tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:52;min-height:calc(58px + env(safe-area-inset-bottom));padding:4px 8px calc(5px + env(safe-area-inset-bottom));background:var(--wd-topbar,var(--raised));border-top:1px solid var(--line);align-items:center;justify-content:space-around;gap:4px}
  body.wd-mobile-writing-active .wd-mobile-tabbar{display:none}
  .wd-mobile-tabbar button{flex:1;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:650;border-radius:10px;padding:4px 2px}
  .wd-mobile-tabbar button.active{background:var(--wd-action-bg);color:var(--wd-action-ink)}
  .wd-mobile-tabbar .wd-mobile-tab-icon{font-size:18px;line-height:20px}
  .view .page-content{max-width:100%;padding:19px 14px calc(100px + env(safe-area-inset-bottom));overflow-wrap:anywhere}
  .page-heading{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
  .page-heading h1{font-size:calc(27px * var(--wd-ui-scale,1));line-height:1.18}
  .page-heading>div:first-child{flex:1 1 190px;min-width:0}
  .section-heading-actions{display:flex;flex-wrap:wrap;gap:7px;margin-left:auto;max-width:100%!important;justify-content:flex-start}
  .section-heading-actions button,.list-controls button{min-height:42px}
  .list-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .list-controls input[type="search"],#libraryEntryControls input[type="search"],#librarySearch,#fragmentSearch{flex:1 1 100%;width:100%;max-width:100%;min-width:0;min-height:43px}
  .list-controls .segmented{margin-left:auto}
  .wd-mobile-library-nav{display:grid;gap:6px;margin:10px 0 12px}
  .wd-mobile-library-nav label{font-size:calc(12px * var(--wd-ui-scale,1));color:var(--muted);font-weight:700}
  .wd-mobile-library-nav select{appearance:auto;border:1px solid var(--line);background:var(--raised);color:var(--text);font:inherit;font-size:calc(15px * var(--wd-ui-scale,1));border-radius:10px;padding:10px;min-height:46px;max-width:100%;width:100%}
  .library-view-tabs{display:none!important}
  .bible-view-tabs:not(.library-view-tabs),.browse-mode-tabs,.character-toolkit-nav{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;max-width:100%;padding-bottom:3px}
  .bible-view-tabs:not(.library-view-tabs)>button,.browse-mode-tabs>button,.character-toolkit-nav>button{flex:0 0 auto;min-width:100px;min-height:42px}
  .story-bible-collection,.library-collection,.timeline-collection,.relationships-collection,.character-toolkit,#libraryCollection{min-width:0;max-width:100%}
  .library-hierarchy-row,.library-tree-entry,.character-group-heading,.bible-location-row{max-width:100%;overflow-wrap:anywhere;min-width:0}
  .library-hierarchy-row{margin-left:min(calc(var(--library-hierarchy-depth,0) * 10px),45px)!important}
  .library-tree-actions,.character-group-actions{flex-wrap:wrap;gap:5px}
  .relationship-graph{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%;overflow:hidden}
  .relationship-node-button{max-width:100%;min-width:0;overflow-wrap:anywhere}
  .relationship-add-form,.relationship-perspective-editor{grid-template-columns:1fr}
  .timeline-collection,.timeline-event,.timeline-event-summary,.timeline-event-actions,.timeline-toolbar,.timeline-tools,.timeline-filter-row{max-width:100%;min-width:0}
  .timeline-tools,.timeline-toolbar,.timeline-filter-row{flex-wrap:wrap}
  .timeline-event{overflow-wrap:anywhere}
  .timeline-event-actions{display:flex;flex-wrap:wrap;gap:6px}
  .timeline-event-actions button{min-height:38px;max-width:100%;white-space:normal}
  .vt-root,.vt-board{max-width:100%;min-width:0}
  .vt-canvas,.vt-year-strip,.vt-month-rail{overflow-x:auto;overscroll-behavior-x:contain}
  .chapter-assembly,.location-explorer,.location-explorer-pane,.character-toolkit-visuals,.character-toolkit-zodiac,.character-toolkit-blood{max-width:100%;min-width:0}
  .global-notes-panel,.reference-panel{position:fixed!important;left:0!important;right:0!important;top:56px!important;bottom:0!important;width:100%!important;max-width:100%;max-height:calc(100dvh - 56px);border-radius:0!important;z-index:64;overflow:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
  .desk-notes-layout{display:flex;flex-direction:column;min-height:0}
  .desk-notes-list{display:flex;flex-direction:row;gap:8px;max-height:104px;min-height:72px;overflow:auto;flex:0 0 auto}
  .desk-note-item{min-width:155px;max-width:230px;min-height:53px;flex:0 0 auto}
  .desk-notes-editor{min-height:260px;flex:1}
  .desk-notes-header,.reference-head{position:sticky;top:0;z-index:2;background:var(--raised);padding:10px}
  .desk-notes-header button,.reference-head button{min-height:40px}
  .modal-backdrop{padding:0!important;align-items:stretch!important;z-index:90}
  .modal{box-sizing:border-box;position:relative;width:100vw!important;max-width:100vw!important;min-height:100dvh;max-height:100dvh!important;height:100dvh!important;border-radius:0!important;margin:0!important;display:flex;flex-direction:column;overflow:hidden;padding:0 0 env(safe-area-inset-bottom)!important}
  .modal-head{position:sticky;top:0;z-index:5;background:var(--raised);padding:12px 14px;flex:0 0 auto;min-height:55px;box-sizing:border-box}
  .modal-head h2{font-size:calc(18px * var(--wd-ui-scale,1));line-height:1.25;max-width:100%;overflow-wrap:anywhere}
  #closeModal{min-width:44px;min-height:44px;flex:0 0 auto}
  .modal-content{overflow:auto!important;overscroll-behavior:contain;flex:1 1 auto;min-height:0;padding:14px 14px 22px!important}
  .modal .entry-save-actions{flex:0 0 auto;flex-wrap:wrap}
  .modal-content input,.modal-content textarea,.modal-content select{max-width:100%;box-sizing:border-box}
  .modal-content .button-row{display:flex;flex-wrap:wrap;gap:8px}
  .modal-content .button-row button{min-height:42px}
  .quick-switcher-backdrop{padding:7vh 8px 8px}
  .quick-switcher-dialog{width:100%;max-width:100%;max-height:87dvh}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom));max-width:calc(100vw - 30px)}
}
@media (max-width:370px){
  .topbar #openSidebar,.topbar #workspaceBack,.topbar #quickSwitcherButton,.topbar #moreBtn{width:39px;min-width:39px;height:41px}
  .topbar #wdCloudButton{min-width:44px;padding:0 6px}
  .topbar{gap:3px;padding-inline:5px}
  #writeView .editor-frame{padding-inline:14px!important}
  .wd-mobile-writing-controls{padding-inline:12px}
  .writing-toolbar .toolbar-tools .format-button{font-size:calc(10px * var(--wd-ui-scale,1))}
  .view .page-content{padding-inline:12px}
}
@media (prefers-reduced-motion:reduce){.wd-mobile-tabbar *,#writeView .fragment-sticky-controls *{transition:none!important}}