/* Force the desktop layout on phones and tablets. The page uses a fixed
   desktop viewport, so mobile browsers scale the same 1280px composition
   instead of switching to the responsive layouts from style.css. */
html,
body,
#app {
  min-width: 1280px !important;
}

body {
  overflow-x: auto;
}

.workspace {
  min-width: 1280px !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  grid-template-rows: none !important;
}

.sidebar {
  border-right: 1px solid #e2e6ee !important;
  border-bottom: 0 !important;
}

.editor-grid {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: none !important;
}

.markdown-body {
  border-left: 1px solid #e2e6ee !important;
  border-top: 0 !important;
}

.reading-body {
  border-left: 0 !important;
  border-top: 0 !important;
}

.editor-toolbar,
.reader-toolbar {
  align-items: center !important;
  flex-direction: row !important;
}

.toolbar-actions {
  justify-content: initial !important;
}

.trash-entry {
  display: flex !important;
}

.more-btn {
  opacity: 0 !important;
}

.note-row:hover .more-btn,
.note-row.active .more-btn,
.more-btn:focus-visible {
  opacity: 1 !important;
}

@media (prefers-color-scheme: dark) {
  .sidebar {
    border-right-color: #2a303d !important;
  }

  .markdown-body {
    border-left-color: #2a303d !important;
  }
}