/* Still on the web: browser-only pieces (message boxes, the Dropbox panel) and room for the missing title bar. */
dialog.web-message{border:none;border-radius:16px;padding:22px 24px 18px;max-width:420px;width:calc(100vw - 48px);background:var(--panel,#fff);color:var(--text,#1c1b1f);box-shadow:0 20px 60px rgba(0,0,0,.25);font:14px/1.5 inherit}
dialog.web-message::backdrop{background:rgba(20,18,24,.28)}
dialog.web-message h2{font-size:16px;margin:0 0 8px}
dialog.web-message p{margin:0 0 14px;opacity:.8}
dialog.web-message .web-check{display:flex;gap:8px;align-items:center;margin:0 0 14px}
dialog.web-message .web-buttons{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
dialog.web-message button{border:1px solid rgba(0,0,0,.12);background:transparent;color:inherit;border-radius:10px;padding:7px 14px;font:inherit;cursor:pointer}
dialog.web-message button.primary{background:#1c1b1f;color:#fff;border-color:#1c1b1f}
body.dark dialog.web-message{background:#1f1d24;color:#ece8f2}
body.dark dialog.web-message button.primary{background:#ece8f2;color:#1c1b1f;border-color:#ece8f2}
.web-sync-status[data-state="error"]{color:#b4232c}
.web-sync-code{margin-top:10px}
.web-sync-code input{margin:6px 0 8px;max-width:320px}
.web-sync .settings-buttons{flex-wrap:wrap}

/* Phones: one column at a time. The note list (or the sidebar) first; a note or a view fills the screen, with a
   back button to the list. Wider screens keep the desktop layout. */
#web-back{display:none}
@media (max-width:700px){
 html,body{min-width:0!important}
 body,body:not(.narrow-sidebar):not(.layout-editor):not(.focus):not(.with-assistant):not([data-view=graph]),body.with-assistant:not(.narrow-sidebar):not(.layout-editor):not(.focus){grid-template-columns:minmax(0,1fr)!important}
 html:not(.phone-note) body:not(.narrow-sidebar)>main{display:none!important}
 html.phone-note body:not(.narrow-sidebar)>.note-list,html.phone-note body:not(.narrow-sidebar)>.sidebar{display:none!important}
 body.narrow-sidebar>.sidebar{display:flex!important}
 body.narrow-sidebar>main,body.narrow-sidebar>.note-list{display:none!important}
 body:not(.narrow-sidebar) #show-sidebar{display:inline-flex!important}
 #web-back{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;border-radius:50%;background:transparent;color:inherit;margin-right:4px;cursor:pointer}
 #web-back svg{width:22px;height:22px}
 main .toolbar{padding-left:10px!important}
 .list-header{padding-left:14px!important;padding-right:14px!important}
 #notes{padding-left:10px;padding-right:10px}
 .doc-column,.head-column{padding-left:18px!important;padding-right:18px!important}
 #view-pane{padding-left:12px;padding-right:12px}
 #modal{max-width:calc(100vw - 16px)}
 html.phone-view #note-head .toolbar,html.phone-view #formatting,html.phone-view #note-new{display:none!important}
 #formatting{max-width:calc(100vw - 20px);overflow-x:auto}
}