:root {
  --bg: #eef1f3;
  --surface: #ffffff;
  --surface-alt: #e4e8eb;
  --border: #d3dade;
  --text: #1d2529;
  --text-muted: #5c6a72;
  --accent: #3c5a99;
  /* Derived from --accent (same color-mix() pattern already used for
     per-tag soft backgrounds below) rather than a fixed hex, so it stays in
     sync with whichever accent color the user has picked — see the accent
     theme picker in the Profile tab, which only ever overrides --accent
     itself via an inline style on <html>. */
  --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --danger: #b3432b;
  --danger-soft: #f4ddd4;
  --code-keyword: #6b46a3;
  --code-string: #2f7a4f;
  --code-number: #a86a1f;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --font-display: "Inter Variable", "Inter", var(--font-ui);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14181b;
    --surface: #1c2226;
    --surface-alt: #242b30;
    --border: #303a40;
    --text: #e7ebec;
    --text-muted: #8b979c;
    --accent: #86a4e3;
    --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface));
    --danger: #d97a5f;
    --danger-soft: #3a2620;
    --code-keyword: #b79eea;
    --code-string: #7fc99a;
    --code-number: #d9a15c;
  }
}

:root[data-theme='dark'] {
  --bg: #14181b;
  --surface: #1c2226;
  --surface-alt: #242b30;
  --border: #303a40;
  --text: #e7ebec;
  --text-muted: #8b979c;
  --accent: #86a4e3;
  --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface));
  --danger: #d97a5f;
  --danger-soft: #3a2620;
  --code-keyword: #b79eea;
  --code-string: #7fc99a;
  --code-number: #d9a15c;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
}

button,
input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.app {
  display: flex;
  height: 100vh;
  height: 100dvh;
}

/* ---------- sidebar ---------- */

.sidebar {
  width: 280px;
  flex: 0 0 280px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 8px;
  /* Installed-PWA edge-to-edge rendering (viewport-fit=cover) means this is
     now responsible for clearing the status bar itself — env() is 0 in a
     normal browser tab, so this is a no-op there. */
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
}

.sidebar-header h1 {
  display: flex;
  align-items: center;
  font-family: 'Havana', var(--font-display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  letter-spacing: 0;
}

.icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* ---------- new note / import menu ---------- */

.new-menu {
  position: relative;
}

.new-menu-group {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.new-menu-btn,
.new-menu-more-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.new-menu-btn:hover,
.new-menu-more-btn:hover {
  background: var(--accent);
  color: #fff;
}

.new-menu-more-btn {
  padding: 6px 8px;
  border-left: 1px solid var(--border);
}

.new-menu-more-btn .icon {
  width: 14px;
  height: 14px;
}

.new-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  padding: 4px;
  min-width: 190px;
}

.new-menu-dropdown.hidden {
  display: none;
}

.new-menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.new-menu-dropdown button:hover {
  background: var(--surface-alt);
}

.new-menu-dropdown button.active {
  color: var(--accent);
  font-weight: 600;
}

/* Single shared per-row "more actions" menu, repositioned via JS to sit
   under whichever row's more-button was clicked. Lives outside .app in the
   DOM and uses position:fixed so it stays viewport-relative even on mobile,
   where .app has a transform (which would otherwise make it the containing
   block for fixed descendants). */
.note-actions-menu {
  position: fixed;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  padding: 4px;
  min-width: 170px;
}

.note-actions-menu.hidden {
  display: none;
}

.note-actions-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.note-actions-menu button:hover {
  background: var(--surface-alt);
}

.note-actions-menu-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}

.note-actions-menu button.danger-item {
  color: var(--danger);
}

.note-actions-menu button.danger-item:hover {
  background: var(--danger-soft);
}

/* ---------- sidebar footer / user ---------- */

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  /* In an installed PWA (standalone display mode), the page renders
     edge-to-edge with no browser chrome to create a buffer — without this,
     Android's system gesture nav bar can sit right on top of this row.
     env() resolves to 0 in a normal browser tab / on desktop, so this is a
     no-op there. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex: 0 0 auto;
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-preview {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

.user-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-toggle-btn,
.close-note-btn,
.archive-filter-btn,
.locked-filter-btn,
.trash-filter-btn,
.settings-btn,
.logout-btn,
.sort-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.theme-toggle-btn .icon,
.close-note-btn .icon,
.archive-filter-btn .icon,
.locked-filter-btn .icon,
.trash-filter-btn .icon,
.settings-btn .icon,
.logout-btn .icon,
.sort-btn .icon {
  width: 16px;
  height: 16px;
}

.theme-toggle-btn:hover,
.close-note-btn:hover,
.archive-filter-btn:hover,
.locked-filter-btn:hover,
.trash-filter-btn:hover,
.settings-btn:hover,
.sort-btn:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.logout-btn:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.archive-filter-btn.active,
.locked-filter-btn.active,
.trash-filter-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 16px 10px;
}

#search {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  outline: none;
}

#search:focus {
  border-color: var(--accent);
}

.archive-filter-btn,
.locked-filter-btn,
.trash-filter-btn,
.settings-btn,
.logout-btn,
.sort-btn {
  width: 34px;
  height: 34px;
}

.sort-menu {
  position: relative;
}

.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}

.tag-filter:empty {
  padding: 0;
}

.tag-pill {
  border: 1px solid var(--tag-color, var(--border));
  background: var(--surface-alt);
  color: var(--tag-color, var(--text-muted));
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.5;
}

.tag-pill:hover {
  border-color: var(--tag-color, var(--accent));
  color: var(--text);
}

.tag-pill.active {
  background: var(--tag-color, var(--accent));
  border-color: var(--tag-color, var(--accent));
  color: #fff;
}

.note-list {
  list-style: none;
  margin: 0;
  padding: 0 8px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}

.note-item {
  position: relative;
  padding: 10px 12px 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
}

.note-item:last-child {
  border-bottom: none;
}

.note-item:hover {
  background: var(--surface-alt);
}

.note-item.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.note-item .note-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-pin-badge {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--accent);
}

.note-pin-badge .icon {
  width: 12px;
  height: 12px;
}

.note-lock-badge {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 4px;
  color: var(--text-muted);
}

.note-lock-badge .icon {
  width: 12px;
  height: 12px;
}

.note-item .note-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.note-item .note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.note-item .note-tag {
  font-size: 10.5px;
  color: var(--tag-color, var(--accent));
  background: color-mix(in srgb, var(--tag-color, var(--accent)) 18%, var(--surface));
  border-radius: 999px;
  padding: 1px 8px;
}

.note-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 6px;
}

.note-split-btn,
.note-edit-btn,
.note-delete-btn,
.note-more-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
}

.note-split-btn .icon,
.note-edit-btn .icon,
.note-delete-btn .icon,
.note-more-btn .icon {
  width: 14px;
  height: 14px;
}

.note-split-btn:hover,
.note-more-btn:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.note-edit-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.note-delete-btn:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.note-list-empty {
  color: var(--text-muted);
  padding: 12px 16px;
  font-size: 13px;
}

/* ---------- editor area ---------- */

.editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.title-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  outline: none;
  color: var(--text);
}

.title-input::placeholder {
  color: var(--text-muted);
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.toolbar-buttons {
  display: flex;
  gap: 8px;
}

.view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
}

.mode-btn {
  border: none;
  background: var(--surface);
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
}

.mode-btn:last-child {
  border-right: none;
}

.mode-btn.active {
  background: var(--accent);
  color: #fff;
}

.save-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
}

.save-btn:hover {
  background: var(--accent);
  color: #fff;
}

.danger {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--danger);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
}

.readonly-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.readonly-toggle-btn:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.readonly-toggle-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.note-lock-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.note-lock-btn:hover:not(:disabled) {
  border-color: var(--text-muted);
  color: var(--text);
}

.note-lock-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.note-lock-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.note-history-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.note-history-btn:hover:not(:disabled) {
  border-color: var(--text-muted);
  color: var(--text);
}

.note-history-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.history-entry {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text);
}

.history-entry:hover {
  border-color: var(--accent);
}

.history-entry-title {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-entry-time {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.history-preview {
  max-height: 40vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 10px 0;
}

.save-status {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 70px;
  text-align: right;
}

.tags-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--tag-color, var(--accent)) 18%, var(--surface));
  color: var(--tag-color, var(--accent));
  border-radius: 999px;
  padding: 3px 6px 3px 8px;
  font-size: 12.5px;
}

.tag-chip-swatch {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tag-color, var(--accent));
  border: 1px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.tag-chip-swatch:hover {
  transform: scale(1.15);
}

.tag-chip-swatch::after,
.note-split-btn::after,
.note-edit-btn::after,
.note-delete-btn::after,
.note-more-btn::after,
.theme-toggle-btn::after,
.close-note-btn::after,
.archive-filter-btn::after,
.locked-filter-btn::after,
.trash-filter-btn::after,
.settings-btn::after,
.logout-btn::after,
.format-btn::after,
.sort-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 30;
}

.tag-chip-swatch::before,
.note-split-btn::before,
.note-edit-btn::before,
.note-delete-btn::before,
.note-more-btn::before,
.theme-toggle-btn::before,
.close-note-btn::before,
.archive-filter-btn::before,
.locked-filter-btn::before,
.trash-filter-btn::before,
.settings-btn::before,
.logout-btn::before,
.format-btn::before,
.sort-btn::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--surface-alt);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 30;
}

.tag-chip-swatch:hover::after,
.tag-chip-swatch:hover::before,
.note-split-btn:hover::after,
.note-split-btn:hover::before,
.note-edit-btn:hover::after,
.note-edit-btn:hover::before,
.note-delete-btn:hover::after,
.note-delete-btn:hover::before,
.note-more-btn:hover::after,
.note-more-btn:hover::before,
.theme-toggle-btn:hover::after,
.theme-toggle-btn:hover::before,
.close-note-btn:hover::after,
.close-note-btn:hover::before,
.archive-filter-btn:hover::after,
.archive-filter-btn:hover::before,
.locked-filter-btn:hover::after,
.locked-filter-btn:hover::before,
.trash-filter-btn:hover::after,
.trash-filter-btn:hover::before,
.settings-btn:hover::after,
.settings-btn:hover::before,
.logout-btn:hover::after,
.logout-btn:hover::before,
.format-btn:hover::after,
.format-btn:hover::before,
.sort-btn:hover::after,
.sort-btn:hover::before {
  opacity: 1;
}

/* .close-note-btn sits at the very top of the page, so its tooltip is
   flipped to open downward instead of upward — the usual upward placement
   has no room above it and gets clipped by the viewport edge. */
.close-note-btn::after {
  bottom: auto;
  top: calc(100% + 7px);
}

.close-note-btn::before {
  bottom: auto;
  top: calc(100% + 3px);
  border-top-color: transparent;
  border-bottom-color: var(--surface-alt);
}

.tag-chip button:not(.tag-chip-swatch) {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px;
  border-radius: 50%;
  opacity: 0.7;
}

.tag-chip button:not(.tag-chip-swatch):hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

.tag-input-wrap {
  position: relative;
  flex: 1;
  min-width: 100px;
}

.tag-input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  padding: 4px 2px;
  color: var(--text);
}

.tag-input::placeholder {
  color: var(--text-muted);
}

#tag-suggestions {
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: 160px;
}

.tag-add-btn {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12.5px;
  cursor: pointer;
}

.tag-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

#add-user-toggle-btn {
  margin-bottom: 12px;
}

.format-toolbar.is-html-format {
  display: none;
}

.format-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.format-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
}

.format-btn .icon {
  width: 15px;
  height: 15px;
}

.format-btn:hover:not(:disabled) {
  background: var(--surface-alt);
  color: var(--text);
}

.format-btn:disabled {
  cursor: default;
  opacity: 0.4;
}

.format-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--border);
}

.emoji-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-width: 260px;
  max-height: 220px;
  overflow-y: auto;
}

/* The heading/alert/emoji dropdowns live outside .format-toolbar (and
   outside .app) in the DOM — same reasoning as #note-actions-menu: an
   ancestor with overflow (the toolbar) or a mobile transform (.app) would
   otherwise clip or mis-position a descendant using position:fixed. Position
   is computed in JS from the trigger button's bounding rect. */
.toolbar-dropdown {
  position: fixed;
  z-index: 40;
}

.emoji-picker .emoji-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  border-radius: 6px;
  padding: 0;
  font-size: 16px;
  cursor: pointer;
}

.emoji-picker .emoji-option:hover {
  background: var(--surface-alt);
}

.panes {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

.editor-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.editor {
  flex: 1;
  min-height: 0;
  border: none;
  outline: none;
  resize: none;
  padding: 24px 28px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  background: var(--surface);
  color: var(--text);
  background-image: linear-gradient(to right, transparent 0, transparent calc(100% - 1px), var(--border) calc(100% - 1px));
}

.preview {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 32px;
  background: var(--bg);
  font-family: var(--font-display);
  line-height: 1.7;
}

.history-preview {
  font-family: var(--font-display);
  line-height: 1.7;
}

.preview h1,
.preview h2,
.preview h3,
.history-preview h1,
.history-preview h2,
.history-preview h3 {
  font-family: var(--font-display);
  line-height: 1.3;
}

.preview code,
.preview pre,
.history-preview code,
.history-preview pre {
  font-family: var(--font-mono);
  font-size: 13px;
}

.preview pre,
.history-preview pre {
  background: var(--surface-alt);
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
}

.preview code,
.history-preview code {
  background: var(--surface-alt);
  padding: 1px 5px;
  border-radius: 4px;
}

.preview pre code,
.history-preview pre code {
  background: none;
  padding: 0;
}

/* A small custom syntax palette built on the app's own tokens, rather than
   vendoring a third-party hljs theme — keeps highlighted code visually
   consistent with the rest of the app and swaps light/dark for free through
   the existing theme mechanism. */
.hljs-keyword,
.hljs-tag,
.hljs-selector-tag {
  color: var(--code-keyword);
  font-weight: 600;
}

.hljs-string,
.hljs-attr,
.hljs-attribute,
.hljs-regexp {
  color: var(--code-string);
}

.hljs-number,
.hljs-literal {
  color: var(--code-number);
}

.hljs-title,
.hljs-title.function_,
.hljs-built_in,
.hljs-name {
  color: var(--accent);
}

.hljs-comment,
.hljs-quote {
  color: var(--text-muted);
  font-style: italic;
}

.preview blockquote,
.history-preview blockquote {
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
}

.md-alert {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--surface-alt);
}

.md-alert > :last-child {
  margin-bottom: 0;
}

.md-alert-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--accent);
}

.md-alert-title .icon {
  width: 16px;
  height: 16px;
}

.md-alert-warning,
.md-alert-caution {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.md-alert-warning .md-alert-title,
.md-alert-caution .md-alert-title {
  color: var(--danger);
}

.preview a,
.history-preview a {
  color: var(--accent);
}

.note-link {
  text-decoration: underline;
  cursor: pointer;
}

.note-link-missing {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--text-muted);
  cursor: default;
}

.preview img,
.history-preview img {
  max-width: 100%;
}

/* view modes */

.panes.mode-edit .preview {
  display: none;
}

.panes.mode-edit .editor {
  background-image: none;
}

.panes.mode-preview .editor-col {
  display: none;
}

.panes.mode-split .editor-col,
.panes.mode-split .preview {
  width: 50%;
}

.panes.mode-wysiwyg .preview {
  display: none;
}

.panes.mode-wysiwyg .editor {
  display: none;
}

.wysiwyg-editor {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.panes.mode-wysiwyg .wysiwyg-editor {
  display: block;
}

.wysiwyg-editor .ProseMirror {
  padding: 24px 32px;
  min-height: 100%;
  outline: none;
  font-family: var(--font-display);
  line-height: 1.7;
  color: var(--text);
}

.wysiwyg-editor .ProseMirror > * + * {
  margin-top: 0.75em;
}

.wysiwyg-editor .ProseMirror h1,
.wysiwyg-editor .ProseMirror h2,
.wysiwyg-editor .ProseMirror h3 {
  line-height: 1.3;
  font-weight: 700;
}

.wysiwyg-editor .ProseMirror code {
  font-family: var(--font-mono);
  background: var(--surface-alt);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

.wysiwyg-editor .ProseMirror pre {
  font-family: var(--font-mono);
  background: var(--surface-alt);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
}

.wysiwyg-editor .ProseMirror pre code {
  background: none;
  padding: 0;
}

.wysiwyg-editor .ProseMirror blockquote {
  border-left: 3px solid var(--border);
  padding-left: 14px;
  color: var(--text-muted);
}

.wysiwyg-editor .ProseMirror table {
  border-collapse: collapse;
  width: 100%;
}

.wysiwyg-editor .ProseMirror th,
.wysiwyg-editor .ProseMirror td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}

.wysiwyg-editor .ProseMirror th {
  background: var(--surface-alt);
}

.empty-state {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 16px;
}

.app.no-note .panes,
.app.no-note .editor-toolbar,
.app.no-note .tags-editor {
  display: none;
}

.app.no-note .empty-state {
  display: flex;
}

@media (prefers-reduced-motion: no-preference) {
  .note-item,
  .new-menu-dropdown button,
  .mode-btn,
  .danger {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
}

/* ---------- login page ---------- */

.login-body {
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-card {
  width: 100%;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
}

.login-card h1 {
  font-family: 'Havana', var(--font-display);
  font-weight: 400;
  font-size: 44px;
  margin: 0 0 24px;
  text-align: center;
}

.login-card form {
  display: flex;
  flex-direction: column;
}

.login-label {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 12px 0 6px;
}

.login-card input[type='text'],
.login-card input[type='password'] {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  border-radius: 8px;
  padding: 9px 11px;
  outline: none;
}

.login-card input[type='text']:focus,
.login-card input[type='password']:focus {
  border-color: var(--accent);
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}

.login-remember input {
  cursor: pointer;
}

.login-notice {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--accent);
}

.login-notice:empty {
  display: none;
}

.login-error {
  min-height: 18px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--danger);
}

.login-forgot-link {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
}

.login-card button[type='submit'] {
  margin-top: 8px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  padding: 10px;
  font-weight: 600;
  cursor: pointer;
}

.login-card button[type='submit']:disabled {
  opacity: 0.7;
  cursor: default;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  font-size: 12px;
  color: var(--text-muted);
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.sso-login-btn {
  display: block;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.sso-login-btn:hover {
  background: var(--surface-alt);
}

/* ---------- account modal ---------- */

.account-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 50;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.hidden {
  display: none;
}

.modal-card {
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

/* The account modal grew tabbed sections (Profile, Backup, Users) that need
   more breathing room than the 420px shared by the smaller confirm/password
   prompt modals — widened just for this one rather than globally. */
.account-modal-card {
  max-width: 520px;
}

.account-tabs {
  display: flex;
  width: 100%;
  margin: 8px 0 4px;
  border-bottom: 1px solid var(--border);
  gap: 4px;
}

.account-tab-btn {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 12px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.account-tab-btn:hover {
  color: var(--text);
}

.account-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* All three panels stack in the same grid cell, so the tallest one sets the
   card's height and switching tabs never resizes the modal. The inactive
   panels use visibility (not display:none) to hide, specifically so they
   still take up layout space and count toward that height. */
.account-tab-panels {
  display: grid;
}

.modal-tab-panel {
  grid-column: 1;
  grid-row: 1;
}

.modal-tab-panel.hidden {
  visibility: hidden;
  pointer-events: none;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0;
}

.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}

.modal-close-btn:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.modal-section {
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.modal-section:first-of-type {
  border-top: none;
}

.modal-section.hidden {
  display: none;
}

.modal-section h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.accent-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.accent-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--border) inset;
}

.accent-swatch.active {
  border-color: var(--text);
}

.accent-swatch[data-accent='blue'] {
  background: #3c5a99;
}

.accent-swatch[data-accent='green'] {
  background: #3a7d4a;
}

.accent-swatch[data-accent='purple'] {
  background: #6b46a3;
}

.accent-swatch[data-accent='rose'] {
  background: #b3436a;
}

.accent-swatch[data-accent='teal'] {
  background: #1f7a72;
}

.accent-swatch[data-accent='amber'] {
  background: #a86a1f;
}

.accent-swatch[data-accent='indigo'] {
  background: #4b4a9e;
}

.accent-swatch[data-accent='cyan'] {
  background: #127a8c;
}

.accent-swatch[data-accent='lime'] {
  background: #5f7a1f;
}

.accent-swatch[data-accent='magenta'] {
  background: #9c3f96;
}

.accent-swatch[data-accent='slate'] {
  background: #556270;
}

.modal-label {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 10px 0 6px;
}

.modal-label.hidden {
  display: none;
}

.modal-card input[type='text'],
.modal-card input[type='password'],
.modal-card input[type='email'] {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
}

.modal-card input[type='text']:focus,
.modal-card input[type='password']:focus,
.modal-card input[type='email']:focus {
  border-color: var(--accent);
}

.modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.modal-warning {
  font-size: 12.5px;
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 12px;
}

.modal-warning-danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger);
  font-size: 13.5px;
}

.modal-warning-danger strong {
  color: var(--text);
}

.modal-remove-protection-btn {
  display: block;
  border: none;
  background: none;
  color: var(--danger);
  font-size: 12.5px;
  padding: 0;
  margin-top: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.modal-remove-protection-btn.hidden {
  display: none;
}

.avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.user-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface-alt);
}

.user-list .user-avatar {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.user-list-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.user-list-name strong {
  font-size: 13px;
  font-weight: 600;
}

.user-list-name span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.add-user-section {
  margin-bottom: 14px;
  padding: 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.add-user-section.hidden {
  display: none;
}

.add-user-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* Narrow desktop windows (a laptop screen, or a browser not maximized) fall
   between full desktop and the phone layout below — compact the editor
   header's buttons without triggering the phone-specific slide-nav/single-
   pane restructuring, which only makes sense at genuinely mobile widths. */
@media (max-width: 900px) {
  .save-btn .btn-label,
  .danger .btn-label {
    display: none;
  }

  .save-btn,
  .danger,
  .readonly-toggle-btn,
  .note-lock-btn,
  .note-history-btn {
    padding: 8px;
  }

  .editor-toolbar {
    gap: 8px;
    padding: 10px 14px;
  }

  .toolbar-actions {
    gap: 8px;
  }

  .toolbar-buttons {
    gap: 4px;
  }

  .mode-btn {
    padding: 6px 8px;
    font-size: 13px;
  }

  .title-input {
    font-size: 17px;
  }

  .save-status {
    min-width: 0;
  }
}

@media (max-width: 720px) {
  html,
  body {
    overflow-x: hidden;
  }

  /* On mobile there's no side-by-side desktop layout for this message to
     make sense in — if a note somehow isn't selected, showing the sidebar
     (the default) is enough; an empty editor pane with placeholder text
     is just confusing on a single-pane phone layout. */
  .app.no-note .empty-state {
    display: none;
  }

  .btn-label {
    display: none;
  }

  .new-menu-btn,
  .save-btn,
  .danger,
  .readonly-toggle-btn,
  .note-lock-btn,
  .note-history-btn {
    padding: 8px;
  }

  .note-split-btn,
  .note-edit-btn,
  .note-delete-btn,
  .note-more-btn {
    width: 30px;
    height: 30px;
  }

  .app {
    flex-direction: row;
    width: 200vw;
    height: 100vh;
    height: 100dvh;
    transition: transform 0.25s ease;
    transform: translateX(0);
  }

  .app.note-open {
    transform: translateX(-100vw);
  }

  .sidebar,
  .editor-area {
    width: 100vw;
    flex: 0 0 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
  }

  .modal-overlay {
    padding: 0;
  }

  .modal-card {
    max-width: none;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    overflow-y: auto;
  }

  .sidebar {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .close-note-btn {
    order: -2;
  }

  .panes.mode-split {
    flex-direction: column;
  }

  .panes.mode-split .editor-col,
  .panes.mode-split .preview {
    width: 100%;
  }

  .editor-toolbar {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px 16px;
  }

  .title-input {
    flex: 1 1 auto;
    min-width: 0;
    order: -1;
    font-size: 17px;
  }

  .toolbar-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 8px;
  }

  .save-status {
    flex: 1 1 100%;
    min-width: 0;
    text-align: left;
  }

  .tags-editor {
    padding: 6px 16px;
  }

  .format-toolbar {
    padding: 6px 16px;
  }

  .tag-input {
    font-size: 16px; /* iOS zooms in on focus if an input is smaller than this */
    padding: 8px 4px;
    min-width: 120px;
  }

  .tag-add-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}