:root {
  --bg: #0b0f17;
  --card: #121c2e;
  --text: #e7eefc;
  --muted: rgba(231, 238, 252, 0.65);
  --border: rgba(231, 238, 252, 0.12);
  --accent: #7aa2ff;
  --danger: #ff6b6b;
  --shadow: 0 10px 22px rgba(0,0,0,0.25);
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1400px 700px at 20% 0%, rgba(122,162,255,0.18), transparent 60%),
              radial-gradient(1200px 700px at 100% 30%, rgba(255,107,107,0.10), transparent 60%),
              var(--bg);
  color: var(--text);
  max-width: 100%;
  overflow-x: hidden;
}


/* v5.10.r: iPhone Safari notepad viewport shell + scroll-chain lock.
   Keep the browser/root page pinned and force all movement into the editor/page lists so
   the lower Safari address bar stops bouncing while editing. */
html.supnote-ios-notepad,
body.supnote-ios-notepad {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.supnote-ios-notepad {
  position: relative;
  width: 100%;
}

html.supnote-ios-notepad .app-shell {
  position: fixed;
  top: var(--supnote-ios-viewport-top, 0px);
  left: var(--supnote-ios-viewport-left, 0px);
  right: auto;
  bottom: auto;
  width: min(100%, var(--supnote-ios-viewport-w, 100vw));
  max-width: var(--supnote-ios-viewport-w, 100vw);
  height: var(--supnote-ios-viewport-h, 100%);
  min-height: var(--supnote-ios-viewport-h, 100%);
  overflow: hidden;
}

html.supnote-ios-notepad .main {
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  padding-top: 0;
}

html.supnote-ios-notepad .topbar,
html.supnote-ios-notepad .notepad-layout,
html.supnote-ios-notepad .sidebar,
html.supnote-ios-notepad .editor-area,
html.supnote-ios-notepad .editor-header {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

html.supnote-ios-notepad .notepad-page-shell {
  margin-top: 0;
}

@media (max-width: 900px) {
  html.supnote-ios-notepad .notepad-layout {
    height: 100%;
    min-height: 0;
    align-content: stretch;
    grid-template-rows: auto minmax(0, 1fr);
  }

  html.supnote-ios-notepad .sidebar,
  html.supnote-ios-notepad .editor-area,
  html.supnote-ios-notepad .door-split,
  html.supnote-ios-notepad .door-split-parent,
  html.supnote-ios-notepad .rte {
    min-height: 0;
    height: 100%;
  }

  html.supnote-ios-notepad .rte {
    flex: 1 1 auto;
  }

  html.supnote-ios-notepad .sidebar,
  html.supnote-ios-notepad .editor-area {
    overflow: hidden;
  }

  html.supnote-ios-notepad .page-list,
  html.supnote-ios-notepad .door-split-child,
  html.supnote-ios-notepad .rte-surface {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.supnote-ios-notepad .rte-surface {
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }
}
a { color: inherit; }
.app-shell { min-height: 100%; display: flex; flex-direction: column; }
.app-shell.app-shell-notepad {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}
.main { flex: 1 1 auto; padding: 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); max-width: 1200px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; min-height: 0; }
.main.main-notepad {
  overflow: hidden;
}
.main.main-notepad > .notepad-page-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.footer { padding: 14px 22px; border-top: 1px solid var(--border); color: var(--muted); text-align: center; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  background: rgba(11, 15, 23, 0.55);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
}

.brand {
  min-width: 0;
}

.topbar.topbar-menu-open {
  /* Keep Goodies/Settings menus above the full-screen backdrop without jumping ahead of modal dialogs. */
  z-index: 10910;
}

.topbar-center {
  min-width: 0;
  display: flex;
  justify-content: center;
}

.topbar-notebook-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(100%, 560px);
  min-height: 28px;
  padding: 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  pointer-events: auto;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  justify-self: end;
}
.topbar-version {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}
.brand-link {
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.2px;
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
}
.brand-family-name {
  color: #38bdf8;
  font-size: 0.9em;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.brand-meta {
  font-weight: 650;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(16, 24, 39, 0.55);
}

.brand-link:hover { text-decoration: underline; }
.pill {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(16, 24, 39, 0.80);
  color: var(--muted);
  font-size: 12px;
}

button.pill {
  font-family: inherit;
}

.pill-btn {
  cursor: pointer;
  color: var(--text);
}

.pill-btn:hover {
  border-color: rgba(231, 238, 252, 0.22);
}


.main.main-page-overlay-open {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.topbar-menu-backdrop {
  position: fixed;
  inset: 0;
  /* Sit above editor overlays, but below the active topbar/menu so Goodies buttons remain clickable. */
  z-index: 10900;
  /* v5.9aa: use a nearly-transparent fill so iOS reliably treats it as a tap target */
  background: rgba(0,0,0,0.01);
  pointer-events: auto;
  touch-action: auto;
}

.settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-width: calc(100vw - 24px);
  background: rgba(18, 28, 46, 0.96);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 20;
  overflow-wrap: anywhere;
}

.goodies-entry-btn {
  border-width: 3px;
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 0 10px rgba(96,165,250,0.18);
  font-weight: 800;
  letter-spacing: 0;
}

.settings-entry-btn {
  border-width: 3px;
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 0 10px rgba(96,165,250,0.18);
  font-weight: 800;
  letter-spacing: 0;
}

.goodies-entry-btn:hover,
.settings-entry-btn:hover {
  border-color: #ffffff;
}

.goodies-page-overlay {
  position: fixed;
  inset: 0;
  z-index: 10950;
  background: rgba(2, 6, 23, 0.90);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(18px + env(safe-area-inset-top))
           calc(18px + env(safe-area-inset-right))
           calc(18px + env(safe-area-inset-bottom))
           calc(18px + env(safe-area-inset-left));
}

.goodies-page-card {
  width: min(900px, 100%);
  max-height: calc(100vh - 36px);
  background: rgba(18, 28, 46, 0.98);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.goodies-page-divider {
  flex: 0 0 auto;
}

.goodies-page-title-line {
  flex: 0 0 auto;
  padding-top: 10px;
  padding-bottom: 8px;
}

/* v6.7.hf: Settings/Goodies managed page titles are navigation headers, not editable page titles. */
.settings-page-title-line,
.goodies-page-overlay .settings-page-title-line {
  font-size: clamp(20px, 4.2vw, 28px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  padding: 8px 12px 6px !important;
  margin: 0 0 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer;
}

.settings-page-title-line .title-text,
.goodies-page-overlay .settings-page-title-line .title-text {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 760px) {
  .settings-page-title-line,
  .goodies-page-overlay .settings-page-title-line {
    font-size: clamp(22px, 7vw, 34px) !important;
    padding-top: 6px !important;
    padding-bottom: 4px !important;
    margin-bottom: 6px !important;
  }
}

.goodies-page-body {
  padding: 12px 16px 16px;
  overflow-y: auto;
}

.goodies-home-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  width: 100%;
}

.goodies-page-door-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.goodies-page-door-row-home {
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
  margin-top: 0;
}

.goodies-page-door {
  padding: 8px 12px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: rgba(16, 24, 39, 0.80);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
}

.goodies-page-door:hover {
  border-color: rgba(231, 238, 252, 0.92);
}

.goodies-page-door:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}



/* v6.7.fi: Find button turns blue while the Find page search is running. */
.find-submit-button.find-submit-button-searching,
.find-submit-button.find-submit-button-searching:disabled {
  opacity: 1;
  cursor: wait;
  color: #ffffff;
  border-color: rgba(122, 162, 255, 0.98);
  background: rgba(59, 108, 255, 0.92);
  box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.22), 0 0 22px rgba(59, 108, 255, 0.35);
}


/* v6.7.fi: Goodies Find direction radios use identical thin white rings.
   Unselected = thin white ring with black center; selected = same ring with blue center. */
.find-direction-row {
  gap: 14px;
}

.find-direction-option {
  user-select: none;
  cursor: pointer;
}

.find-direction-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #05070b;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.70);
  display: inline-grid;
  place-content: center;
  flex: 0 0 20px;
  margin: 0;
}

.find-direction-radio::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);
  background: #2563eb;
}

.find-direction-radio:checked {
  background: #05070b;
  border-color: #ffffff;
}

.find-direction-radio:checked::before {
  transform: scale(1);
}

.find-direction-radio:focus-visible {
  outline: 3px solid rgba(122, 162, 255, 0.75);
  outline-offset: 3px;
}

.find-text-input {
  background: rgba(8, 16, 32, 0.98) !important;
  border-color: rgba(231, 238, 252, 0.30) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.find-text-input:focus {
  border-color: rgba(122, 162, 255, 0.74) !important;
  box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

.goodies-dev-cache-item {
  justify-self: end;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


@media (max-width: 760px) {
  .goodies-home-row {
    flex-direction: column;
    align-items: stretch;
  }

  .goodies-dev-cache-item {
    justify-self: end;
    align-self: flex-end;
  }
}

.goodies-section {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.goodies-section.goodies-section-wide {
  max-width: 100%;
}

.goodies-section + .goodies-section {
  margin-top: 16px;
}

.goodies-section-compact {
  padding-bottom: 4px;
}


.settings-title {
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 8px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.settings-label {
  font-size: 13px;
  color: var(--text);
}

.settings-notebook-block {
  min-width: 0;
  margin-bottom: 10px;
}

.settings-notebook-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.settings-crc32 {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.settings-notebook-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-top: 2px;
  padding-bottom: 8px;
}

.settings-notebook-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.settings-rename-btn {
  margin-left: auto;
  white-space: nowrap;
  align-self: flex-start;
}

.settings-version-stamp {
  margin-top: 14px;
  text-align: right;
}

.settings-create-block {
  margin-top: 0;
  margin-bottom: 0;
}

.settings-underline {
  border-bottom: 1px solid rgba(231, 238, 252, 0.22);
}

.settings-menu .settings-input.settings-underline {
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}

.settings-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
h1 { margin: 0 0 12px; font-size: 34px; letter-spacing: -0.4px; }
h2 { margin: 0 0 8px; }
.muted { color: var(--muted); }
.card {
  background: rgba(18, 28, 46, 0.88);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.card-title { font-weight: 750; font-size: 16px; margin-bottom: 4px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.row { display: flex; align-items: center; }
.gap { gap: 10px; }
.field { display: grid; gap: 8px; margin-bottom: 12px; }
.label { font-size: 12px; color: var(--muted); }
.input, .title-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(16, 24, 39, 0.95);
  color: var(--text);
  outline: none;
  touch-action: manipulation;
}
.input:focus, .title-input:focus {
  border-color: rgba(122, 162, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.14);
}

.home-strong-input {
  background: rgba(8, 14, 24, 0.98);
  border-color: rgba(231, 238, 252, 0.24);
  box-shadow: inset 0 0 0 1px rgba(231, 238, 252, 0.04);
}

.home-strong-input::placeholder {
  color: rgba(231, 238, 252, 0.58);
}

.home-strong-input:focus {
  border-color: rgba(122, 162, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.18), inset 0 0 0 1px rgba(231, 238, 252, 0.05);
}
.btn {
  border: 3px solid rgba(255, 255, 255, 0.86);
  background: rgba(16, 24, 39, 0.95);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 90ms ease, border-color 120ms ease, background 120ms ease;
  user-select: none;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.98); }
.btn:active { transform: translateY(0px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { border-color: rgba(255, 255, 255, 0.92); background: rgba(122, 162, 255, 0.14); }
.btn.danger { border-color: rgba(255, 255, 255, 0.92); background: rgba(255, 107, 107, 0.12); }
.btn.full { width: 100%; justify-content: center; }
.loading { display: grid; place-items: center; height: 100vh; gap: 14px; }
.spinner { width: 34px; height: 34px; border-radius: 999px; border: 3px solid rgba(231, 238, 252, 0.20); border-top-color: rgba(122, 162, 255, 0.75); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.notepad-layout { display: grid; grid-template-columns: 260px 1fr; gap: 14px; flex: 1 1 auto; min-height: 0; max-width: 100%; }
.main.main-notepad .notepad-layout {
  height: 100%;
  align-content: stretch;
}
.notepad-page-shell { margin-top: -22px; overflow-x: hidden; }
.main.main-notepad .notepad-page-shell {
  overflow: hidden;
}
.sidebar { background: rgba(18, 28, 46, 0.75); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column;
  min-height: 0;
}
.main.main-notepad .sidebar,
.main.main-notepad .editor-area {
  height: 100%;
}
.sidebar-top { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.sidebar-top-left { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.main.main-notepad .sidebar-top {
  flex: 0 0 auto;
}
.page-list { list-style: none; padding: 0; margin: 10px 0 12px; display: flex; flex-direction: column; gap: 0; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.main.main-notepad .page-list {
  min-height: 0;
}
.page { padding: 10px 10px; border: 1px solid var(--border); background: rgba(16, 24, 39, 0.72); border-radius: 0; cursor: pointer; }
.page:hover { border-color: rgba(231, 238, 252, 0.22); }
.page.active { border-color: rgba(122, 162, 255, 0.65); background: rgba(122, 162, 255, 0.12); }
.page.sidebar-entry-highlight { border-color: rgba(255, 255, 255, 0.88); background: rgba(21, 94, 239, 0.20); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.72), 0 0 0 5px rgba(21, 94, 239, 0.24); }
.page.active.sidebar-entry-highlight { background: rgba(21, 94, 239, 0.28); }
.page-btn { width: 100%; display: block; text-align: left; -webkit-appearance: none; appearance: none; font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.page-title { font-weight: 650; font-size: 14px; pointer-events: none; -webkit-user-select: none; user-select: none; }
.page-title.sidebar-entry-title-highlight { color: #fff; -webkit-text-fill-color: currentColor; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.editor-area { background: rgba(18, 28, 46, 0.75); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
}

/* v6.4.ao: Account Management and Notebook Management do not render the RichTextEditor,
   so the editor-area itself must scroll while the outer notepad shell stays fixed. */
.editor-area.diagnostics-management-area {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.editor-area.diagnostics-management-area > .card {
  flex: 0 0 auto;
}

.editor-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.editor-header-title-row { display: contents; }
.editor-header .title-prefix { white-space: nowrap; }
.editor-header-mode-buttons { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap; min-width: 0; }
.editor-title-page-door-toggle { justify-self: end; }

.sidebar-mode-buttons-mobile { display: none; }
html.supnote-windows .sidebar-mode-buttons .sidebar-page-door-toggle,
html.supnote-windows .sidebar-mode-buttons-mobile .sidebar-page-door-toggle { display: none !important; }
.title-input { min-width: 0; width: 100%; font-size: 16px; font-weight: 700; border-radius: 0; -webkit-appearance: none; appearance: none; }
/* v6.7.hs: The Notepad title field is an ordinary editable text input.
   Keep editor/tap handlers from making it feel like part of the rich-text page. */
.notepad-title-input {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
  touch-action: auto;
}

.notepad-title-input:disabled {
  cursor: not-allowed;
}

.status { justify-self: end; white-space: nowrap; font-size: 12px; margin-left: 0; }
.rte { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; min-height: 0; max-width: 100%; position: relative; }
.rte-toolbar-wrap { display: flex; align-items: center; gap: 8px; width: 100%; }
.rte-toolbar-toggle {
  margin-left: auto;
  min-width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(16, 24, 39, 0.70);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.rte-toolbar-toggle:hover { border-color: rgba(122, 162, 255, 0.55); }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.rte-toolbar .sep { width: 1px; height: 28px; background: var(--border); margin: 0 4px; }

/* If the editor JS module fails to load, show a visible warning so troubleshooting is obvious. */
.rte-js-warning {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.55);
    background: rgba(239, 68, 68, 0.10);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9rem;
}
.rte-surface { flex: 1 1 auto; min-height: 420px; max-width: 100%; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(16, 24, 39, 0.70); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; overscroll-behavior-x: none; outline: none; line-height: 1.5; white-space: pre-wrap;
  /* iOS Safari: disable the native press-and-hold callout so we can show the SupNote context menu */
  -webkit-touch-callout: none;
  touch-action: pan-y;
 }

/*
  Keep text readable in dark mode even when pasted HTML carries inline colors.
  (Inline styles can set black text, which becomes nearly invisible.)
*/
.rte-surface,
.rte-surface * {
  color: var(--text) !important;
}
.rte-surface:empty:before { content: attr(data-placeholder); color: rgba(231, 238, 252, 0.35); }
.rte-surface img { max-width: 100%; height: auto; border-radius: 10px; }

.rte-surface > *,
.door-peek-body > * {
  max-width: 100%;
}

.rte-surface .ai-request,
.rte-surface .ai-output,
.door-peek-body .ai-request,
.door-peek-body .ai-output {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* Keep pasted ChatGPT / web content compact and preserve visible list markers. */
.rte-surface p,
.rte-surface ul,
.rte-surface ol,
.rte-surface li,
.rte-surface blockquote,
.rte-surface pre { margin-top: 0; margin-bottom: 0; }
.rte-surface ul,
.rte-surface ol { padding-left: 1.5em; }
.rte-surface li > p { margin: 0; }

/* Page-door split (single-click reference peek) */
.door-split {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.door-split-parent {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.door-split.on .door-split-parent {
  flex: 0 0 50%;
}

.door-split-divider { height: 8px; background: rgba(231, 238, 252, 0.10); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0; flex: 0 0 auto; }

.door-split-child {
  flex: 0 0 50%;
  min-height: 0;
  max-width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(16, 24, 39, 0.70);
  overflow-y: auto;
  overflow-x: hidden;
}

.door-peek-title {
  text-align: center;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.2px;
  margin: 0 0 10px;
  cursor: pointer;
  color: var(--text);
  text-decoration: underline;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Mode indicator shown next to a child page title (View/Edit). */
.door-mode-indicator {
  display: none !important;
}

.door-peek-body {
  line-height: 1.5;
}

/*
  Pasted content from web/email clients can carry inline color styles (often rgb(0,0,0)).
  In dark mode this can render as “blank” in the peek (read-only) pane.
  Force peek text to use the app theme color.
*/
.door-peek-body,
.door-peek-body * {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
}

.peek-truncated-note {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
}

/* When split is active, allow the parent editor surface to shrink below the normal min-height. */
.door-split.on .rte-surface { min-height: 0; }

/* Page-door highlight = swapped foreground/background */
/* New page title line */
.page-title-line {
  text-align: center;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.2px;
  margin: 0 0 10px;
}
/* Page title line shown on pages behind page-doors (keep it simple and familiar). */
.page-title-line.page-back {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 4px;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  padding: 0 8px 6px;
  margin: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Clarify child-page mode: Edit vs View (same size/style as "Saved"). */
.rte .page-title-line.page-back::after {
  content: none !important;
  display: none !important;
}
.rte.mode-edit .page-title-line.page-back::after { content: none !important; display: none !important; }
.rte.mode-view .page-title-line.page-back::after { content: none !important; display: none !important; }

.page-back-divider {
  height: 8px;
  background: rgba(231, 238, 252, 0.10);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0;
}



.page-title-line.page-back:hover {
  text-decoration: none;
}

.page-title-line.page-back .title-text {
  text-decoration: underline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.page-title-line.page-back:hover .title-text {
  text-decoration: underline;
}


@media (max-width: 900px) {
  .notepad-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; }
  .main.main-notepad .notepad-layout { grid-template-rows: minmax(0, auto) minmax(0, 1fr); }
  /* iOS Safari: always show version/build at the top */
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
    overflow-x: clip;
  }
  .brand,
  .topbar-right {
    min-width: 0;
  }
  .brand-link {
    max-width: 100%;
    font-size: clamp(1.05rem, 5.2vw, 1.6rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-center {
    grid-column: 1 / -1;
    order: 3;
  }
  .topbar-notebook-name {
    max-width: 100%;
    font-size: 12px;
    min-height: 24px;
    padding: 1px 2px;
  }
  .topbar-right {
    gap: 6px;
  }
  .goodies-entry-btn,
  .settings-entry-btn {
    padding: 5px 10px;
    font-size: 11px;
  }
  .topbar-version {
    font-size: 11px;
  }
  .topbar-right .pill-status { display: none; }
  .brand-meta { display: inline-flex; font-size: 11px; padding: 2px 6px; }
  .patch-badge { display: inline-flex; font-size: 11px; padding: 2px 6px; }
  .editor-header {
    gap: 8px;
    min-width: 0;
  }
  .title-input {
    min-width: 0;
    font-size: 16px;
  }
  /* Mobile: keep Settings dropdown fully on-screen */
  .settings-menu { left: 0; right: auto; }
  .goodies-page-overlay { padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
  .goodies-page-card { max-height: calc(100vh - 16px); }
  .goodies-page-body { padding: 14px; }

}

/* Robust page-door highlight: works in dark or light themes */
span.page-door {
    padding: 0.05rem 0.35rem;
    margin: 0 0.08rem;
    border-radius: 9999px;
    border: 2px solid currentColor;          /* uses the current text color */
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;                     /* keep the token together */
    cursor: grab;
    touch-action: manipulation;
    display: inline-block;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  touch-action: manipulation;
    touch-action: manipulation;

}


/* v6.4.gf: Durable visual page-door indentation for Windows repositioning.
   Uses CSS classes instead of hidden ASCII/NBSP spacer text. */
span.page-door.supnote-door-indent-1 { margin-left: 12px !important; }
span.page-door.supnote-door-indent-2 { margin-left: 24px !important; }
span.page-door.supnote-door-indent-3 { margin-left: 36px !important; }
span.page-door.supnote-door-indent-4 { margin-left: 48px !important; }
span.page-door.supnote-door-indent-5 { margin-left: 60px !important; }
span.page-door.supnote-door-indent-6 { margin-left: 72px !important; }
span.page-door.supnote-door-indent-7 { margin-left: 84px !important; }
span.page-door.supnote-door-indent-8 { margin-left: 96px !important; }
span.page-door.supnote-door-indent-9 { margin-left: 108px !important; }
span.page-door.supnote-door-indent-10 { margin-left: 120px !important; }
span.page-door.supnote-door-indent-11 { margin-left: 132px !important; }
span.page-door.supnote-door-indent-12 { margin-left: 144px !important; }
span.page-door.supnote-door-indent-13 { margin-left: 156px !important; }
span.page-door.supnote-door-indent-14 { margin-left: 168px !important; }
span.page-door.supnote-door-indent-15 { margin-left: 180px !important; }
span.page-door.supnote-door-indent-16 { margin-left: 192px !important; }
span.page-door.supnote-door-indent-17 { margin-left: 204px !important; }
span.page-door.supnote-door-indent-18 { margin-left: 216px !important; }
span.page-door.supnote-door-indent-19 { margin-left: 228px !important; }
span.page-door.supnote-door-indent-20 { margin-left: 240px !important; }
span.page-door.supnote-door-indent-21 { margin-left: 252px !important; }
span.page-door.supnote-door-indent-22 { margin-left: 264px !important; }
span.page-door.supnote-door-indent-23 { margin-left: 276px !important; }
span.page-door.supnote-door-indent-24 { margin-left: 288px !important; }
span.page-door.supnote-door-indent-25 { margin-left: 300px !important; }
span.page-door.supnote-door-indent-26 { margin-left: 312px !important; }
span.page-door.supnote-door-indent-27 { margin-left: 324px !important; }
span.page-door.supnote-door-indent-28 { margin-left: 336px !important; }
span.page-door.supnote-door-indent-29 { margin-left: 348px !important; }
span.page-door.supnote-door-indent-30 { margin-left: 360px !important; }
span.page-door.supnote-door-indent-31 { margin-left: 372px !important; }
span.page-door.supnote-door-indent-32 { margin-left: 384px !important; }
span.page-door.supnote-door-indent-33 { margin-left: 396px !important; }
span.page-door.supnote-door-indent-34 { margin-left: 408px !important; }
span.page-door.supnote-door-indent-35 { margin-left: 420px !important; }
span.page-door.supnote-door-indent-36 { margin-left: 432px !important; }
span.page-door.supnote-door-indent-37 { margin-left: 444px !important; }
span.page-door.supnote-door-indent-38 { margin-left: 456px !important; }
span.page-door.supnote-door-indent-39 { margin-left: 468px !important; }
span.page-door.supnote-door-indent-40 { margin-left: 480px !important; }
span.page-door.supnote-door-indent-41 { margin-left: 492px !important; }
span.page-door.supnote-door-indent-42 { margin-left: 504px !important; }
span.page-door.supnote-door-indent-43 { margin-left: 516px !important; }
span.page-door.supnote-door-indent-44 { margin-left: 528px !important; }
span.page-door.supnote-door-indent-45 { margin-left: 540px !important; }
span.page-door.supnote-door-indent-46 { margin-left: 552px !important; }
span.page-door.supnote-door-indent-47 { margin-left: 564px !important; }
span.page-door.supnote-door-indent-48 { margin-left: 576px !important; }
span.page-door.supnote-door-indent-49 { margin-left: 588px !important; }
span.page-door.supnote-door-indent-50 { margin-left: 600px !important; }
span.page-door.supnote-door-indent-51 { margin-left: 612px !important; }
span.page-door.supnote-door-indent-52 { margin-left: 624px !important; }
span.page-door.supnote-door-indent-53 { margin-left: 636px !important; }
span.page-door.supnote-door-indent-54 { margin-left: 648px !important; }
span.page-door.supnote-door-indent-55 { margin-left: 660px !important; }
span.page-door.supnote-door-indent-56 { margin-left: 672px !important; }
span.page-door.supnote-door-indent-57 { margin-left: 684px !important; }
span.page-door.supnote-door-indent-58 { margin-left: 696px !important; }
span.page-door.supnote-door-indent-59 { margin-left: 708px !important; }
span.page-door.supnote-door-indent-60 { margin-left: 720px !important; }
span.page-door.supnote-door-indent-61 { margin-left: 732px !important; }
span.page-door.supnote-door-indent-62 { margin-left: 744px !important; }
span.page-door.supnote-door-indent-63 { margin-left: 756px !important; }
span.page-door.supnote-door-indent-64 { margin-left: 768px !important; }
span.page-door.supnote-door-indent-65 { margin-left: 780px !important; }
span.page-door.supnote-door-indent-66 { margin-left: 792px !important; }
span.page-door.supnote-door-indent-67 { margin-left: 804px !important; }
span.page-door.supnote-door-indent-68 { margin-left: 816px !important; }
span.page-door.supnote-door-indent-69 { margin-left: 828px !important; }
span.page-door.supnote-door-indent-70 { margin-left: 840px !important; }
span.page-door.supnote-door-indent-71 { margin-left: 852px !important; }
span.page-door.supnote-door-indent-72 { margin-left: 864px !important; }
span.page-door.supnote-door-indent-73 { margin-left: 876px !important; }
span.page-door.supnote-door-indent-74 { margin-left: 888px !important; }
span.page-door.supnote-door-indent-75 { margin-left: 900px !important; }
span.page-door.supnote-door-indent-76 { margin-left: 912px !important; }
span.page-door.supnote-door-indent-77 { margin-left: 924px !important; }
span.page-door.supnote-door-indent-78 { margin-left: 936px !important; }
span.page-door.supnote-door-indent-79 { margin-left: 948px !important; }
span.page-door.supnote-door-indent-80 { margin-left: 960px !important; }
span.page-door.supnote-door-indent-81 { margin-left: 972px !important; }
span.page-door.supnote-door-indent-82 { margin-left: 984px !important; }
span.page-door.supnote-door-indent-83 { margin-left: 996px !important; }
span.page-door.supnote-door-indent-84 { margin-left: 1008px !important; }
span.page-door.supnote-door-indent-85 { margin-left: 1020px !important; }
span.page-door.supnote-door-indent-86 { margin-left: 1032px !important; }
span.page-door.supnote-door-indent-87 { margin-left: 1044px !important; }
span.page-door.supnote-door-indent-88 { margin-left: 1056px !important; }
span.page-door.supnote-door-indent-89 { margin-left: 1068px !important; }
span.page-door.supnote-door-indent-90 { margin-left: 1080px !important; }
span.page-door.supnote-door-indent-91 { margin-left: 1092px !important; }
span.page-door.supnote-door-indent-92 { margin-left: 1104px !important; }
span.page-door.supnote-door-indent-93 { margin-left: 1116px !important; }
span.page-door.supnote-door-indent-94 { margin-left: 1128px !important; }
span.page-door.supnote-door-indent-95 { margin-left: 1140px !important; }
span.page-door.supnote-door-indent-96 { margin-left: 1152px !important; }

/* v6.7.dc: drag ghost must not inherit persisted page-door indentation. */
span.page-door.supnote-door-drag-ghost {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

span.page-door.supnote-door-dragging {
    cursor: grabbing;
    opacity: 0.35;
}

.page-door.supnote-return-door-highlight {
    /* v6.7.kf: return-to-door highlight is border-only, matching page-door tap feedback. */
    border-color: rgba(96, 165, 250, 1) !important;
    background: inherit !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.95), 0 0 0 5px rgba(59, 130, 246, 0.32) !important;
}

/* v6.7.jz: tap/open acknowledgement for page doors is border-only.
   Keep the pill body/text unchanged; blink the outline so QUICKSTART doors
   acknowledge taps without looking like a command button. */
.page-door.supnote-door-activation-feedback {
    border-color: rgba(96, 165, 250, 1) !important;
    background: inherit !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.95), 0 0 0 5px rgba(59, 130, 246, 0.32) !important;
}

/* Supnote context menu for page-door actions */
.supnote-context-menu {
    position: fixed;
    /* v6.7.od: iPhone page-door MENU must sit above editor/page-door layers and own taps. */
    z-index: 2147483646;
    pointer-events: auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    min-width: 180px;
    background-color: #020617;
    color: #e5e7eb;
    /* v6.4.gv: match the bright blue floating ( M E N U ) bubble. */
    border: 1px solid #0078ff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
    padding: 0.25rem;
    display: none;
}

.supnote-context-menu .supnote-menu-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.9;
    padding: 0.35rem 0.6rem 0.25rem 0.6rem;
    border-bottom: 1px solid rgba(75, 85, 99, 0.6);
    margin-bottom: 0.15rem;
    text-align: center;
    text-transform: uppercase;
}


.supnote-context-menu button {
    width: 100%;
    background: transparent;
    border: none;
    color: inherit;
    text-align: left;
    padding: 0.4rem 0.6rem;
    cursor: grab;
    touch-action: manipulation;
    border-radius: 0.375rem;
    font-size: 0.9rem;
}

.supnote-context-menu button:hover {
    background-color: #111827;
}

.supnote-context-menu .menu-sep {
    border-top: 1px solid #4b5563;
    margin: 0.25rem 0.2rem;
}

.supnote-context-menu .stack-title {
    font-size: 0.72rem;
    opacity: 0.8;
    padding: 0.25rem 0.6rem 0.1rem 0.6rem;
}

.supnote-context-menu .stack-item {
    font-size: 0.8rem;
    opacity: 0.85;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Debug panel for Supreme Notepad (v5.1) */
.debug-panel {
    position: fixed;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    background-color: rgba(15, 23, 42, 0.9); /* slate-900-ish */
    color: #e5e7eb;
    border: 1px solid #4b5563;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    max-width: calc(100vw - 24px);
    z-index: 9999;
    overflow-wrap: anywhere;
    word-break: break-word;
}



.debug-panel .debug-row {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.debug-panel .debug-row + .debug-row {
    margin-top: 0.15rem;
}



/* v5.3v: iOS Safari readability fix — force light text on dark backgrounds */
@supports (-webkit-touch-callout: none) {
  .rte-surface,
  .rte-surface * {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
  }
  .title-input {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
  }

  @media (max-width: 900px) {
    .input,
    .title-input,
    select,
    textarea {
      font-size: 16px !important;
    }
  }
}

/* v5.3ze: Private Browsing advisory banner */
.banner {
  border: 1px solid var(--border);
  background: rgba(18, 28, 46, 0.88);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.banner-text { color: var(--text); line-height: 1.35; }
.banner-text strong { color: var(--accent); }
.banner-actions { flex: 0 0 auto; }

.banner-warning {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(120, 53, 15, 0.20);
}

.banner-warning .banner-text strong {
  color: #fbbf24;
}

.btn.small {
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.92rem;
}




/* v5.7h: Private/Incognito hard gate + persistent WON'T REMEMBER badge */
.nosync-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.6px;
  border: 1px solid rgba(244, 63, 94, 0.55);
  background: rgba(244, 63, 94, 0.18);
  color: rgba(255, 255, 255, 0.92);
  user-select: none;
  white-space: nowrap;
  margin-right: 10px;
}

.private-gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.90);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(18px + env(safe-area-inset-top))
           calc(18px + env(safe-area-inset-right))
           calc(18px + env(safe-area-inset-bottom))
           calc(18px + env(safe-area-inset-left));
}

.private-gate-card {
  width: min(680px, 100%);
  background: rgba(18, 28, 46, 0.96);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 16px 14px;
}

.private-gate-title {
  font-size: 1.12rem;
  font-weight: 950;
  color: var(--accent);
}

.private-gate-text {
  color: var(--text);
  margin-top: 6px;
  line-height: 1.35;
}

.private-gate-steps {
  margin: 8px 0 12px 20px;
  color: var(--text);
}

.private-gate-steps li { margin: 6px 0; }

.private-gate-instructions 
.settings-menu .settings-divider {
  width: 100%;
  background: rgba(231, 238, 252, 0.38);
}

.settings-subtitle {
  margin-top: 10px;
}

/* v5.4a: Notebook join UI helpers */
.settings-divider {
  height: 2px;
  background: rgba(231, 238, 252, 0.34);
  opacity: 1;
  margin: 12px 0;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(231, 238, 252, 0.10);
}

.settings-subtitle {
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin: 0 0 6px;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}



/* v5.4g: Goodies menu file input overlay (so the label behaves like a button) */
.file-btn { position: relative; overflow: hidden; }
.file-input-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}


/* Pages panel collapse toggle (v5.5u) */
.notepad-layout.pages-collapsed { grid-template-columns: auto 1fr; gap: 8px; }
.sidebar.collapsed { background: transparent; border: none; box-shadow: none; padding: 0; justify-self: start; }
.sidebar.collapsed .sidebar-top { margin-bottom: 0; }
.pages-toggle { background: transparent; border: none; padding: 0; margin-top: 0; font: inherit; color: var(--muted); cursor: pointer; text-align: left; width: auto; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.pages-toggle:hover { color: rgba(231, 238, 252, 0.88); }
.sidebar.collapsed .pages-toggle { margin-top: 0; padding: 10px 10px; }
.sidebar-mode-buttons {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.sidebar-page-door-toggle,
.sidebar-format-toggle,
.sidebar-command-toggle {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(16, 24, 39, 0.70);
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.sidebar-page-door-toggle:hover,
.sidebar-format-toggle:hover,
.sidebar-command-toggle:hover { color: rgba(231, 238, 252, 0.92); border-color: rgba(122, 162, 255, 0.55); }
.sidebar-page-door-toggle:active,
.sidebar-format-toggle:active,
.sidebar-command-toggle:active { transform: translateY(0); }
.sidebar-page-door-toggle.active,
.sidebar-format-toggle.active,
.sidebar-command-toggle.active {
  color: rgba(231, 238, 252, 0.96);
  border-color: rgba(122, 162, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(122, 162, 255, 0.18);
}
.sidebar.collapsed .sidebar-mode-buttons { margin-left: 0; }
/* v6.4.ec: Make the pg-dr blue frame thicker on Windows so page-door mode is obvious. */
html.supnote-windows .title-line-page-door-toggle.active,
html.supnote-windows .sidebar-page-door-toggle.active {
  border-width: 3px !important;
  border-color: rgba(122, 162, 255, 0.98) !important;
  box-shadow: 0 0 0 2px rgba(122, 162, 255, 0.28) !important;
}

/* v6.4.gv: Fmt, pg-dr, and Cmd must have NO pill/circle frame when OFF.
   The blue rounded pill/circle appears only for the individual control that is ON. */
.sidebar-page-door-toggle:not(.active),
.sidebar-format-toggle:not(.active),
.sidebar-command-toggle:not(.active),
.page-title-mode-buttons .sidebar-page-door-toggle:not(.active),
.page-title-mode-buttons .sidebar-format-toggle:not(.active),
.page-title-mode-buttons .sidebar-command-toggle:not(.active),
.sidebar-page-door-toggle:not(.active):hover,
.sidebar-format-toggle:not(.active):hover,
.sidebar-command-toggle:not(.active):hover,
.page-title-mode-buttons .sidebar-page-door-toggle:not(.active):hover,
.page-title-mode-buttons .sidebar-format-toggle:not(.active):hover,
.page-title-mode-buttons .sidebar-command-toggle:not(.active):hover,
.sidebar-page-door-toggle:not(.active):focus,
.sidebar-format-toggle:not(.active):focus,
.sidebar-command-toggle:not(.active):focus,
.page-title-mode-buttons .sidebar-page-door-toggle:not(.active):focus,
.page-title-mode-buttons .sidebar-format-toggle:not(.active):focus,
.page-title-mode-buttons .sidebar-command-toggle:not(.active):focus,
.sidebar-page-door-toggle:not(.active):focus-visible,
.sidebar-format-toggle:not(.active):focus-visible,
.sidebar-command-toggle:not(.active):focus-visible,
.page-title-mode-buttons .sidebar-page-door-toggle:not(.active):focus-visible,
.page-title-mode-buttons .sidebar-format-toggle:not(.active):focus-visible,
.page-title-mode-buttons .sidebar-command-toggle:not(.active):focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--muted) !important;
}
.sidebar-page-door-toggle.active,
.sidebar-format-toggle.active,
.sidebar-command-toggle.active {
  background: rgba(37, 99, 235, 0.34) !important;
  border-color: rgba(122, 162, 255, 0.95) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(122, 162, 255, 0.24) !important;
}


/* v5.9l: Pages button mode hint ("Lastest" / "AlphNum") aligned to the right */
.pages-toggle-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
.pages-toggle-left { white-space: nowrap; }
.pages-toggle-right { white-space: nowrap; opacity: 0.95; }

/* Mobile: keep Notepad stacked even if Pages panel is collapsed */
@media (max-width: 900px) {
  .notepad-layout.pages-collapsed { grid-template-columns: 1fr; }
  .sidebar.collapsed { justify-self: start; width: auto; }
  .editor-header { gap: 8px; }
  .editor-header-mode-buttons { gap: 6px; }
}


/* v5.9w: Make editor selection highlight obvious (desktop + iOS where supported) */
.rte-surface.page-door-edit-mode { border-color: rgba(122, 162, 255, 0.72); box-shadow: inset 0 0 0 1px rgba(122, 162, 255, 0.18); }
.rte-surface::selection { background: rgba(99, 102, 241, 0.48); }
.rte-surface::-moz-selection { background: rgba(99, 102, 241, 0.48); }

/* v5.8af: Settings modals + higher-contrast Settings inputs */
.settings-menu .settings-input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.settings-menu .settings-input:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.20);
}

.sn-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.90);
  backdrop-filter: blur(6px);
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(18px + env(safe-area-inset-top))
           calc(18px + env(safe-area-inset-right))
           calc(18px + env(safe-area-inset-bottom))
           calc(18px + env(safe-area-inset-left));
}

.sn-modal-card {
  width: min(560px, 100%);
  background: rgba(18, 28, 46, 0.96);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 16px 14px;
}

.sn-modal-title {
  font-size: 1.06rem;
  font-weight: 950;
  color: var(--accent);
}


/* Persistent highlight for Goodies Find results */
.supnote-find-highlight {
  background: rgba(21, 94, 239, 0.22) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
  border-radius: 2px;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: inset 0 -2px 0 rgba(21, 94, 239, 0.92) !important;
  outline: none !important;
  font-weight: 700;
}

.supnote-find-highlight-active {
  background: #155eef !important;
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
}

.supnote-find-highlight-element {
  background: rgba(21, 94, 239, 0.16) !important;
  box-shadow: 0 0 0 2px rgba(21, 94, 239, 0.72) !important;
  outline: none !important;
}

.supnote-find-highlight-element-active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.90), 0 0 0 5px rgba(21, 94, 239, 0.46) !important;
}

.page-door.supnote-find-highlight-element {
  background: rgba(21, 94, 239, 0.20) !important;
  border-color: rgba(255, 255, 255, 0.76) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
}

.page-door.supnote-find-highlight-element-active {
  background: #155eef !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
}

.page-title-line .title-text.supnote-find-highlight-element {
  background: rgba(21, 94, 239, 0.20) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
  border-radius: 4px;
  padding: 0 4px;
}

.page-title-line .title-text.supnote-find-highlight-element-active {
  background: rgba(21, 94, 239, 0.96) !important;
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
}

.page-btn.supnote-find-highlight-element {
  border-color: rgba(21, 94, 239, 0.82) !important;
  background: rgba(21, 94, 239, 0.18) !important;
  box-shadow: inset 0 0 0 2px rgba(21, 94, 239, 0.58) !important;
}

.page-btn.supnote-find-highlight-element-active {
  border-color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(21, 94, 239, 0.96) !important;
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.90), 0 0 0 5px rgba(21, 94, 239, 0.46) !important;
}

.page-btn.supnote-find-highlight-element-active .page-title {
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
}


/* v5.10.zzp: notebook label and open-notebook control polish */
.topbar-notebook-name em {
  font-style: italic;
  font-weight: 600;
}

.settings-label em {
  font-style: italic;
}

.settings-page-card .settings-input,
.settings-page-body .settings-input {
  background: rgba(245, 250, 255, 0.96);
  border: 1px solid rgba(120, 150, 190, 0.9);
  color: #0f172a;
}

.settings-page-card .settings-input:focus,
.settings-page-body .settings-input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.95);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

.settings-page-card select.settings-input,
.settings-page-body select.settings-input {
  background: rgba(235, 244, 255, 0.98);
}

/* v6.4.o: Mobile full-screen editing scroll toggle.
   OFF = existing Supnote controls stay in their protected/contained scrollers.
   ON  = the whole mobile notepad chrome scrolls away so editing gets maximum space. */
.mobile-full-scroll-toggle.active,
.mobile-editor-tools-toggle {
  color: rgba(231, 238, 252, 0.96);
  border-color: rgba(122, 162, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(122, 162, 255, 0.18);
}
.mobile-editor-tools-toggle {
  display: none;
}
@media (max-width: 900px) {
  html.supnote-mobile-full-editor-scroll,
  body.supnote-mobile-full-editor-scroll {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
  }

  body.supnote-mobile-full-editor-scroll {
    position: static !important;
    width: 100% !important;
  }

  html.supnote-mobile-full-editor-scroll .app-shell.app-shell-notepad {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  html.supnote-mobile-full-editor-scroll .main.main-notepad,
  html.supnote-mobile-full-editor-scroll .notepad-page-shell,
  html.supnote-mobile-full-editor-scroll .notepad-layout,
  html.supnote-mobile-full-editor-scroll .sidebar,
  html.supnote-mobile-full-editor-scroll .editor-area,
  html.supnote-mobile-full-editor-scroll .rte,
  html.supnote-mobile-full-editor-scroll .door-split,
  html.supnote-mobile-full-editor-scroll .door-split-parent,
  html.supnote-mobile-full-editor-scroll .door-split-child {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  html.supnote-mobile-full-editor-scroll .notepad-layout {
    grid-template-rows: auto auto !important;
    align-content: start !important;
  }

  html.supnote-mobile-full-editor-scroll .rte-surface {
    height: auto !important;
    max-height: none !important;
    min-height: calc(100dvh - 90px) !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: auto !important;
  }

  html.supnote-mobile-full-editor-scroll .page-list {
    max-height: 38dvh;
  }

  html.supnote-mobile-full-editor-scroll .mobile-editor-tools-toggle {
    display: inline-flex;
    position: fixed;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 2000;
    min-width: 62px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(122, 162, 255, 0.8);
    background: rgba(16, 24, 39, 0.94);
    color: rgba(231, 238, 252, 0.96);
    font: inherit;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(0,0,0,0.38), 0 0 0 1px rgba(122, 162, 255, 0.18);
  }
}

/* v6.4.s: Cross-mobile FULL editing scroll fix.
   This deliberately overrides the older iPhone viewport-lock layout. FULL mode
   must work on both iPhone Safari and Chrome mobile: the browser/root page is
   the scroller, so Supreme Notepad title, Notebook name, Home/Pages/p-d/f,
   billing banner, Notepad row, toolbar, and page body can all scroll together.
   The floating Tools button exits FULL mode so those controls are reachable. */
@media (max-width: 900px) {
  html.supnote-mobile-full-editor-scroll.supnote-ios-notepad,
  body.supnote-mobile-full-editor-scroll.supnote-ios-notepad,
  html.supnote-mobile-full-editor-scroll,
  body.supnote-mobile-full-editor-scroll {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.supnote-mobile-full-editor-scroll.supnote-ios-notepad .app-shell,
  html.supnote-mobile-full-editor-scroll .app-shell.app-shell-notepad {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  html.supnote-mobile-full-editor-scroll .topbar,
  html.supnote-mobile-full-editor-scroll.supnote-ios-notepad .topbar {
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;
  }

  html.supnote-mobile-full-editor-scroll .main,
  html.supnote-mobile-full-editor-scroll .main.main-notepad,
  html.supnote-mobile-full-editor-scroll .main.main-notepad > .notepad-page-shell,
  html.supnote-mobile-full-editor-scroll .notepad-page-shell,
  html.supnote-mobile-full-editor-scroll .notepad-layout,
  html.supnote-mobile-full-editor-scroll .sidebar,
  html.supnote-mobile-full-editor-scroll .editor-area,
  html.supnote-mobile-full-editor-scroll .rte,
  html.supnote-mobile-full-editor-scroll .door-split,
  html.supnote-mobile-full-editor-scroll .door-split-parent,
  html.supnote-mobile-full-editor-scroll .door-split-child {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html.supnote-mobile-full-editor-scroll .main.main-notepad {
    display: block !important;
    padding-top: 12px !important;
  }

  html.supnote-mobile-full-editor-scroll .notepad-page-shell {
    margin-top: 0 !important;
  }

  html.supnote-mobile-full-editor-scroll .notepad-layout {
    display: block !important;
  }

  html.supnote-mobile-full-editor-scroll .sidebar {
    margin-bottom: 12px !important;
  }

  html.supnote-mobile-full-editor-scroll .rte-surface {
    height: auto !important;
    max-height: none !important;
    min-height: calc(100dvh - 72px) !important;
    overflow: visible !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: auto !important;
  }

  html.supnote-mobile-full-editor-scroll .page-list {
    max-height: 38dvh !important;
    overflow-y: auto !important;
  }

  html.supnote-mobile-full-editor-scroll .mobile-editor-tools-toggle {
    display: inline-flex !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}



/* v6.4.dr: ENTER ACCESS CODE textbox is white with true black foreground for maximum contrast. */
.quickstart-access-code-input {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(15, 23, 42, 0.45) !important;
  caret-color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
.quickstart-access-code-input:focus {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(37, 99, 235, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20) !important;
  -webkit-text-fill-color: #000000 !important;
}

/* v6.4.do: Fmt/pg-dr controls live on the line immediately BELOW the page title.
   Keep them off the Notepad title row, left/right justified, and available during full-page edit mode. */
.page-title-mode-buttons {
  display: flex;
  position: absolute;
  left: 14px;
  right: 14px;
  top: 90px;
  z-index: 24;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.rte:not(:has(.rte-toolbar-wrap)) .page-title-mode-buttons {
  top: 48px;
}
.page-title-mode-buttons button {
  pointer-events: auto;
  min-width: 44px;
  height: 26px;
  padding: 0 7px;
  font-size: 75%;
  line-height: 1;
}
.rte.mode-edit .rte-surface .page-title-line {
  margin-bottom: 28px !important;
}
html.supnote-full-page-edit .page-title-mode-buttons {
  display: flex !important;
  position: fixed !important;
  top: calc(58px + env(safe-area-inset-top)) !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 60 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  pointer-events: none !important;
}
html.supnote-full-page-edit .page-title-mode-buttons button {
  pointer-events: auto !important;
  min-width: 44px !important;
  height: 26px !important;
  padding: 0 7px !important;
  font-size: 75% !important;
}
html.supnote-full-page-edit .page-title-mode-buttons .title-line-page-door-toggle {
  margin-left: auto !important;
}
html.supnote-full-page-edit .rte-surface .page-title-line {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 44px !important;
}

/* v6.4.ak: Mobile full-page edit mode.
   Triple-tapping any page title expands the page itself to maximum editing size.
   All Supnote controls are hidden except the sticky page title and the page body. */
@media (max-width: 900px) {
  html.supnote-full-page-edit,
  body.supnote-full-page-edit {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html.supnote-full-page-edit .topbar,
  html.supnote-full-page-edit .sidebar,
  html.supnote-full-page-edit .editor-header,
  html.supnote-full-page-edit .rte-toolbar-wrap,
  html.supnote-full-page-edit .editor-area > .card,
  html.supnote-full-page-edit .door-split-divider,
  html.supnote-full-page-edit .door-split-child,
  html.supnote-full-page-edit .mobile-editor-tools-toggle {
    display: none !important;
  }

  html.supnote-full-page-edit .app-shell.app-shell-notepad,
  html.supnote-full-page-edit.supnote-ios-notepad .app-shell {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  html.supnote-full-page-edit .main,
  html.supnote-full-page-edit .main.main-notepad,
  html.supnote-full-page-edit .notepad-page-shell,
  html.supnote-full-page-edit .notepad-layout,
  html.supnote-full-page-edit .editor-area,
  html.supnote-full-page-edit .rte,
  html.supnote-full-page-edit .door-split,
  html.supnote-full-page-edit .door-split-parent {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  html.supnote-full-page-edit .rte-surface {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: calc(10px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom)) 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    background: rgba(16, 24, 39, 0.96) !important;
  }

  html.supnote-full-page-edit .rte-surface .page-title-line {
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
    margin: 0 0 10px 0 !important;
    padding: 10px 8px 8px 8px !important;
    border-radius: 12px !important;
    background: rgba(16, 24, 39, 0.98) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.22) !important;
    touch-action: manipulation !important;
  }

  html.supnote-full-page-edit .rte-surface .page-back-divider {
    display: none !important;
  }
}


/* v6.4.cr: Full-page edit must also visibly work on Windows/desktop.
   The JavaScript already toggles html/body.supnote-full-page-edit; these universal
   rules make that class affect wide desktop layouts too, not only <=900px screens. */
html.supnote-full-page-edit,
body.supnote-full-page-edit {
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.supnote-full-page-edit .topbar,
html.supnote-full-page-edit .sidebar,
html.supnote-full-page-edit .editor-header,
html.supnote-full-page-edit .rte-toolbar-wrap,
html.supnote-full-page-edit .editor-area > .card,
html.supnote-full-page-edit .door-split-divider,
html.supnote-full-page-edit .door-split-child,
html.supnote-full-page-edit .mobile-editor-tools-toggle {
  display: none !important;
}

html.supnote-full-page-edit .app-shell.app-shell-notepad,
html.supnote-full-page-edit.supnote-ios-notepad .app-shell {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

html.supnote-full-page-edit .main,
html.supnote-full-page-edit .main.main-notepad,
html.supnote-full-page-edit .notepad-page-shell,
html.supnote-full-page-edit .notepad-layout,
html.supnote-full-page-edit .editor-area,
html.supnote-full-page-edit .rte,
html.supnote-full-page-edit .door-split,
html.supnote-full-page-edit .door-split-parent {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: transparent !important;
}

html.supnote-full-page-edit .rte-surface {
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  background: rgba(16, 24, 39, 0.96) !important;
}

html.supnote-full-page-edit .rte-surface .page-title-line {
  position: sticky !important;
  top: 0 !important;
  z-index: 25 !important;
  margin: 0 0 10px 0 !important;
  padding: 10px 8px 8px 8px !important;
  border-radius: 12px !important;
  background: rgba(16, 24, 39, 0.98) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22) !important;
  touch-action: manipulation !important;
}

html.supnote-full-page-edit .rte-surface .page-back-divider {
  display: none !important;
}


/* v6.4.dy: Single-line free-trial card; page title first, Fmt/pg-dr second, optional format bar third. */
.billing-status-card {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Normal editor: overlay the Fmt/pg-dr line and then the format bar inside the editor surface area
   so the page title remains the visual top line. */
.rte.mode-edit .rte-toolbar-wrap {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: 90px !important;
  z-index: 26 !important;
  width: auto !important;
  background: rgba(16, 24, 39, 0.92) !important;
  border-radius: 12px !important;
  padding: 4px 0 !important;
}
.rte.mode-edit .page-title-mode-buttons {
  display: flex !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: 58px !important;
  z-index: 27 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  pointer-events: none !important;
}
.rte.mode-edit .page-title-mode-buttons button {
  pointer-events: auto !important;
  min-width: 44px !important;
  height: 26px !important;
  padding: 0 7px !important;
  font-size: 75% !important;
  line-height: 1 !important;
}
.rte.mode-edit .page-title-mode-buttons .title-line-page-door-toggle {
  margin-left: auto !important;
}
.rte.mode-edit .rte-surface .page-title-line {
  margin-bottom: 32px !important;
}
.rte.mode-edit:has(.rte-toolbar-wrap) .rte-surface .page-title-line {
  margin-bottom: 92px !important;
}

/* Full-page edit: keep the page title at the top, keep Fmt/pg-dr under it,
   then show the formatting bar below Fmt/pg-dr above the page text. */
html.supnote-full-page-edit .rte-toolbar-wrap {
  display: flex !important;
  position: fixed !important;
  top: calc(90px + env(safe-area-inset-top)) !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 59 !important;
  width: auto !important;
  background: rgba(16, 24, 39, 0.96) !important;
  border-radius: 12px !important;
  padding: 4px 0 !important;
}
html.supnote-full-page-edit .page-title-mode-buttons {
  display: flex !important;
  position: fixed !important;
  top: calc(58px + env(safe-area-inset-top)) !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 60 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  pointer-events: none !important;
}
html.supnote-full-page-edit .page-title-mode-buttons button {
  pointer-events: auto !important;
  min-width: 44px !important;
  height: 26px !important;
  padding: 0 7px !important;
  font-size: 75% !important;
}
html.supnote-full-page-edit .page-title-mode-buttons .title-line-page-door-toggle {
  margin-left: auto !important;
}
html.supnote-full-page-edit .rte-surface .page-title-line {
  margin-bottom: 32px !important;
}
html.supnote-full-page-edit .rte:has(.rte-toolbar-wrap) .rte-surface .page-title-line {
  margin-bottom: 92px !important;
}



/* v6.4.ek: SIGN IN TO YOUR ACCOUNT uses a white input; force readable black text/caret on iPhone and desktop. */
.quickstart-sign-in-account-input,
.quickstart-sign-in-account-input:focus,
.quickstart-sign-in-account-card .quickstart-sign-in-account-input,
html.supnote-full-page-edit .quickstart-sign-in-account-card .quickstart-sign-in-account-input {
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
}

/* v6.4.ej: QuickStart managed forms must not disappear when a phone is still in FULL-page mode.
   The title stays at the top, but the CREATE YOUR ACCOUNT, SIGN IN TO YOUR ACCOUNT,
   and ENTER ACCESS CODE cards remain usable. */
html.supnote-full-page-edit .quickstart-create-account-card,
html.supnote-full-page-edit .quickstart-sign-in-account-card,
html.supnote-full-page-edit .quickstart-access-code-card {
  display: block !important;
  margin: 10px 12px !important;
  padding: 12px !important;
  max-height: calc(100dvh - 120px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: rgba(16, 24, 39, 0.96) !important;
  position: relative !important;
  z-index: 80 !important;
}
html.supnote-full-page-edit .quickstart-create-account-card .title-input,
html.supnote-full-page-edit .quickstart-sign-in-account-card .title-input,
html.supnote-full-page-edit .quickstart-access-code-card .title-input {
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
}
html.supnote-full-page-edit .editor-area > .card.quickstart-create-account-card,
html.supnote-full-page-edit .editor-area > .card.quickstart-sign-in-account-card,
html.supnote-full-page-edit .editor-area > .card.quickstart-access-code-card {
  display: block !important;
}

/* v6.4.el: Keep the SIGN IN TO YOUR ACCOUNT field reachable on iPhone when the keyboard is open.
   The input/buttons are now first in the card; these rules make the card itself scrollable
   and add keyboard-safe bottom room in the editor surface. */
@media (max-width: 900px) {
  .quickstart-sign-in-account-card {
    max-height: min(58dvh, 440px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }

  .quickstart-sign-in-account-input {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  html.supnote-ios-notepad .rte-surface {
    scroll-padding-bottom: calc(260px + env(safe-area-inset-bottom)) !important;
    padding-bottom: calc(300px + env(safe-area-inset-bottom)) !important;
  }
}


/* v6.4.eo: Stronger iPhone keyboard-safe SITYA scrolling.  The sign-in card must be
   scrollable even when the virtual keyboard is open and Safari has reduced the visual viewport. */
@media (max-width: 900px) {
  .quickstart-sign-in-account-card {
    max-height: min(46dvh, 360px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  }

  html.supnote-full-page-edit .quickstart-sign-in-account-card {
    max-height: min(44dvh, 340px) !important;
  }

  .quickstart-sign-in-account-card label:first-of-type {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    background: rgba(16, 24, 39, 0.98) !important;
    padding-bottom: 8px !important;
  }

  html.supnote-ios-notepad,
  html.supnote-ios-notepad body,
  html.supnote-ios-notepad .app-shell,
  html.supnote-ios-notepad .main,
  html.supnote-ios-notepad .editor-area,
  html.supnote-ios-notepad .rte,
  html.supnote-ios-notepad .rte-surface {
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
  }
}


/* v6.4.ew: iPhone ENTER ACCESS CODE must remain scrollable when the keyboard is open.
   The EAC card is device-local UI, not ordinary page content; give it its own scroller
   and keyboard-safe bottom room so the user can swipe up to the textbox/buttons. */
@media (max-width: 900px) {
  .quickstart-access-code-card {
    max-height: min(46dvh, 360px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }

  html.supnote-full-page-edit .quickstart-access-code-card {
    max-height: min(44dvh, 340px) !important;
  }

  .quickstart-access-code-input {
    min-height: 44px !important;
    font-size: 16px !important;
    width: min(100%, 320px) !important;
  }

  .quickstart-access-code-card:focus-within {
    max-height: min(50dvh, 390px) !important;
  }

  .quickstart-access-code-card label:first-of-type {
    scroll-margin-bottom: calc(300px + env(safe-area-inset-bottom)) !important;
  }

  html.supnote-ios-notepad .editor-area:has(.quickstart-access-code-card),
  html.supnote-ios-notepad .rte:has(.quickstart-access-code-card),
  html.supnote-ios-notepad .rte-surface:has(.quickstart-access-code-card) {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
  }

  html.supnote-ios-notepad .rte-surface:has(.quickstart-access-code-card) {
    scroll-padding-bottom: calc(330px + env(safe-area-inset-bottom)) !important;
    padding-bottom: calc(360px + env(safe-area-inset-bottom)) !important;
  }
}


/* v6.4.ey: iPhone bottom-of-page paste/caret reachability.
   When the keyboard is open at the bottom of a normal page, give the editor a
   non-persistent visual/scrolling cushion so the user can swipe the last line
   above the keyboard and use the native Paste control. */
@media (max-width: 900px) {
  html.supnote-ios-notepad .rte-surface:focus,
  html.supnote-ios-notepad .rte-surface:focus-within {
    scroll-padding-bottom: calc(430px + env(safe-area-inset-bottom)) !important;
    padding-bottom: calc(460px + env(safe-area-inset-bottom)) !important;
  }

  html.supnote-ios-notepad .rte-surface:focus::after,
  html.supnote-ios-notepad .rte-surface:focus-within::after {
    content: "" !important;
    display: block !important;
    height: calc(260px + env(safe-area-inset-bottom)) !important;
    min-height: calc(260px + env(safe-area-inset-bottom)) !important;
    pointer-events: none !important;
  }

  html.supnote-full-page-edit.supnote-ios-notepad .rte-surface:focus,
  html.supnote-full-page-edit.supnote-ios-notepad .rte-surface:focus-within {
    scroll-padding-bottom: calc(460px + env(safe-area-inset-bottom)) !important;
    padding-bottom: calc(480px + env(safe-area-inset-bottom)) !important;
  }
}


/* v6.4.fa: iPhone keyboard-safe bottom editing cushion.
   This is visual scroll room only; it is not saved into the page HTML. */
html.supnote-ios-notepad.supnote-ios-editor-keyboard-up .rte-surface {
  padding-bottom: max(42vh, 320px);
  scroll-padding-bottom: max(42vh, 320px);
  box-sizing: border-box;
}


/* v6.4.fz: Keep Windows page-door drag smooth by preventing text selection while dragging. */
body.supnote-door-drag-active,
body.supnote-door-drag-active * {
    user-select: none !important;
    -webkit-user-select: none !important;
}
body.supnote-door-drag-active .page-door {
    cursor: grabbing !important;
}


/* v6.6.c: Cmd visual state follows command mode, which is the inverse of full-page layout.
   Full-page mode: Cmd text, no blue pill.  Command mode: CMD text with blue pill. */
html:not(.supnote-command-mode) .page-title-mode-buttons .title-line-command-toggle:not(.active),
html:not(.supnote-command-mode) .page-title-mode-buttons .title-line-command-toggle:not(.active):hover,
html:not(.supnote-command-mode) .page-title-mode-buttons .title-line-command-toggle:not(.active):focus,
html:not(.supnote-command-mode) .page-title-mode-buttons .title-line-command-toggle:not(.active):focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--muted) !important;
}
html.supnote-command-mode .page-title-mode-buttons .title-line-command-toggle,
html.supnote-command-mode .page-title-mode-buttons .title-line-command-toggle.active,
.page-title-mode-buttons .title-line-command-toggle.active {
  background: rgba(37, 99, 235, 0.34) !important;
  border-color: rgba(122, 162, 255, 0.95) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(122, 162, 255, 0.24) !important;
  color: rgba(231, 238, 252, 0.96) !important;
}

/* v6.6.j: QUICKSTART alpha preview keeps editable lanes natural without creating large empty gaps. */
.supnote-quickstart-user-area {
    min-height: 0.35em;
    outline: none;
}

.supnote-quickstart-user-area:not(:empty),
.supnote-quickstart-user-area:focus {
    min-height: 1.2em;
    outline: none;
}

/* v6.7.bt: Never show old Page Door Menu heading if stale cached markup creates it. */
.supnote-context-menu .supnote-menu-title { display: none !important; }

/* v6.7.ce: Keep a newly created page-door visible but non-clickable until Blazor model update completes. */
.page-door.supnote-door-pending-create { opacity: 0.88; cursor: wait; }

/* v6.7.ga: Only Restore Page uses the blue right-aligned command-link style.
   CREATE YOUR ACCOUNT / SIGN IN TO YOUR ACCOUNT are command page-door pills and must not be flattened into hyperlinks. */
span.page-door.quickstart-command-link {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    color: #3b82f6 !important;
    letter-spacing: normal !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    white-space: normal !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* v6.7.ga: ordinary QUICKSTART command buttons remain visible pill buttons. */
span.page-door.quickstart-command-door[data-supnote-command-link="true"],
span.page-door.quickstart-multi-device-command[data-supnote-command-link="true"] {
    display: inline-block !important;
    padding: 0.05rem 0.35rem !important;
    margin: 0 0.08rem !important;
    border-radius: 9999px !important;
    border: 2px solid currentColor !important;
    background: transparent !important;
    box-shadow: none;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: normal !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}



/* v6.7.ko: QUICKSTART CREATE YOUR ACCOUNT / SIGN IN TO YOUR ACCOUNT
   visibly acknowledge taps by blinking only the pill border blue. */
span.page-door.quickstart-command-door.quickstart-account-command-pill-tap-feedback[data-supnote-command-link="true"],
span.page-door.quickstart-multi-device-command.quickstart-account-command-pill-tap-feedback[data-supnote-command-link="true"],
span.page-door.quickstart-command-door.supnote-door-activation-feedback[data-supnote-command-link="true"],
span.page-door.quickstart-multi-device-command.supnote-door-activation-feedback[data-supnote-command-link="true"] {
    border-color: rgba(96, 165, 250, 1) !important;
    background: transparent !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.95), 0 0 0 5px rgba(59, 130, 246, 0.32) !important;
    animation: quickstart-account-command-pill-blue-blink 420ms ease-in-out 1 !important;
}

@keyframes quickstart-account-command-pill-blue-blink {
    0% {
        border-color: currentColor;
        box-shadow: none;
    }
    30% {
        border-color: rgba(96, 165, 250, 1);
        box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.95), 0 0 0 5px rgba(59, 130, 246, 0.32);
    }
    100% {
        border-color: currentColor;
        box-shadow: none;
    }
}


/* v6.7.kt: Account-command blink fallback.  Use a broad selector because older
   QUICKSTART HTML can lack the newer command classes/data attributes. */
span.page-door.quickstart-account-command-pill-tap-feedback,
span.page-door.supnote-door-activation-feedback.quickstart-account-command-pill-tap-feedback {
    border-color: rgba(96, 165, 250, 1) !important;
    background: transparent !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.95), 0 0 0 5px rgba(59, 130, 246, 0.32) !important;
    animation: quickstart-account-command-pill-blue-blink 520ms ease-in-out 1 !important;
}

.quickstart-restore-command-row {
    display: block;
    width: 100%;
    margin-top: 0.8rem;
    text-align: right !important;
}

.quickstart-restore-command-row .quickstart-command-link,
.quickstart-restore-command-row [data-supnote-command-link="true"] {
    color: #3b82f6 !important;
}


/* v6.7.dn: keep QUICKSTART Restore Page constant, blue, right-aligned, and non-editable-looking. */
.quickstart-restore-command-row,
.quickstart-restore-command-row * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

.quickstart-restore-command-row {
    text-align: right !important;
}

.quickstart-restore-command-row .quickstart-command-link,
.quickstart-restore-command-row [data-supnote-command-link="true"] {
    color: #3b82f6 !important;
    text-decoration: underline !important;
}


/* v6.7.dx: iPhone page chrome repair.
   - The owner/system page-list banner is hidden on iPhone so it no longer steals the top of the editor.
   - Save/offline status moves to the Home/Pages row on iPhone.
   - Page title remains the first visual page line.
   - Fmt / pg-dr / Cmd sit immediately below the page title and scroll away with it. */
.mobile-sidebar-save-status {
  display: none;
}

@media (max-width: 900px) {
  .sidebar-top {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .sidebar-top-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .mobile-sidebar-save-status {
    display: inline-block !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    text-align: right !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    max-width: 42vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .editor-header .status {
    display: none !important;
  }

  .page-list.owner-system-page-list {
    display: none !important;
  }

  .page-list.owner-system-page-list + * {
    margin-top: 0 !important;
  }

  .sidebar:has(.owner-system-page-list) {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
  }

  .rte {
    padding-top: 0 !important;
  }

  .rte-surface {
    padding-top: 10px !important;
  }

  .rte-surface .page-title-line {
    margin-top: 0 !important;
  }

  .rte.mode-edit .page-title-mode-buttons,
  .page-title-mode-buttons {
    display: flex !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: 56px !important;
    z-index: 27 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .rte.mode-edit .page-title-mode-buttons button,
  .page-title-mode-buttons button {
    pointer-events: auto !important;
    min-width: 44px !important;
    height: 26px !important;
    padding: 0 7px !important;
    font-size: 75% !important;
    line-height: 1 !important;
  }

  .rte.mode-edit .page-title-mode-buttons .title-line-page-door-toggle,
  .page-title-mode-buttons .title-line-page-door-toggle {
    margin-left: auto !important;
  }

  .rte.mode-edit .rte-toolbar-wrap {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: 90px !important;
    z-index: 26 !important;
    width: auto !important;
  }

  .rte.mode-edit .rte-surface .page-title-line {
    margin-bottom: 44px !important;
  }

  .rte.mode-edit:has(.rte-toolbar-wrap) .rte-surface .page-title-line {
    margin-bottom: 104px !important;
  }
}

@media (max-width: 900px) {
  html.supnote-full-page-edit,
  body.supnote-full-page-edit {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.supnote-full-page-edit .app-shell.app-shell-notepad,
  html.supnote-full-page-edit.supnote-ios-notepad .app-shell,
  html.supnote-full-page-edit .main,
  html.supnote-full-page-edit .main.main-notepad,
  html.supnote-full-page-edit .notepad-page-shell,
  html.supnote-full-page-edit .notepad-layout,
  html.supnote-full-page-edit .editor-area,
  html.supnote-full-page-edit .rte,
  html.supnote-full-page-edit .door-split,
  html.supnote-full-page-edit .door-split-parent {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.supnote-full-page-edit .rte-surface {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    padding: calc(10px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom)) 12px !important;
  }

  html.supnote-full-page-edit .rte-surface .page-title-line {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    margin: 0 0 44px 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.supnote-full-page-edit .rte:has(.rte-toolbar-wrap) .rte-surface .page-title-line {
    margin-bottom: 104px !important;
  }

  html.supnote-full-page-edit .page-title-mode-buttons {
    display: flex !important;
    position: absolute !important;
    top: calc(56px + env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 60 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    pointer-events: none !important;
  }

  html.supnote-full-page-edit .rte-toolbar-wrap {
    display: flex !important;
    position: absolute !important;
    top: calc(90px + env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 59 !important;
    width: auto !important;
  }
}


/* v6.7.ea: iPhone keyboard/title stability.
   Keep the title/header rows in normal document flow while the iOS keyboard
   opens, and avoid any sticky/fixed title behavior that Safari can bounce out
   of view after touch release. */
@media (max-width: 900px) {
  html.supnote-ios-notepad .rte-surface .page-title-line,
  html.supnote-ios-notepad.supnote-full-page-edit .rte-surface .page-title-line {
    position: static !important;
    top: auto !important;
    transform: none !important;
    will-change: auto !important;
  }

  html.supnote-ios-notepad .rte,
  html.supnote-ios-notepad .rte-surface {
    overflow-anchor: none !important;
  }
}

/* v6.7.ea: iPhone CMD-mode keyboard scroll snap repair.
   While the iPhone keyboard is up in full-page/CMD edit mode, keep the browser
   root from becoming a competing scroller.  Safari otherwise bounces the URL
   bar and visual viewport while the editor/title area is also scrolling. */
@media (max-width: 900px) {
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit,
  body.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .app-shell.app-shell-notepad,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .app-shell {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .main,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .main.main-notepad,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .notepad-page-shell,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .notepad-layout,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .editor-area,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .rte,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .door-split,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .door-split-parent {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .rte-surface {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: calc(42dvh + env(safe-area-inset-bottom)) !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .rte-surface .page-title-line {
    position: static !important;
    top: auto !important;
    transform: none !important;
    will-change: auto !important;
  }
}


/* v6.7.ea: iPhone CMD keyboard scroll smoothness repair.
   v6.7.dz's fixed-root scroll lock reduced one snap case but made normal
   keyboard-up CMD scrolling jerky and caused Safari's URL bar to hop.  Keep
   title controls in the editor flow, but let Safari keep its normal root
   viewport mechanics and stop using a fixed app shell while typing. */
@media (max-width: 900px) {
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit,
  body.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit {
    height: auto !important;
    min-height: 100% !important;
    overflow: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .app-shell.app-shell-notepad,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .app-shell {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .main,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .main.main-notepad,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .notepad-page-shell,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .notepad-layout,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .editor-area,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .rte,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .door-split,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .door-split-parent {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-full-page-edit .rte-surface {
    height: auto !important;
    min-height: 65dvh !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    padding-bottom: calc(48dvh + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(48dvh + env(safe-area-inset-bottom)) !important;
  }
}

/* v6.7.ee: iPhone CMD + keyboard downward-scroll stability.
   While CMD is blue and the keyboard is visible, do not let scroll anchoring
   adjust the title/control area while Safari is resizing the visual viewport. */
@media (max-width: 900px) {
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode .main,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode .notepad-page-shell,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode .notepad-layout,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode .editor-area,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode .rte,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode .rte-surface,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode .page-title-line,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode .page-title-mode-buttons {
    overflow-anchor: none !important;
  }
}

/* v6.7.ee: iPhone CMD+keyboard manual scrolling.
   Keep the editor surface as the only intentional scroller, disable scroll
   anchoring/smooth corrections, and prevent Safari root/URL-bar bounce from
   fighting downward drags near the page title. */
@media (max-width: 900px) {
  html.supnote-ios-notepad.supnote-command-mode.supnote-ios-editor-keyboard-up:not(.supnote-full-page-edit) .rte-surface {
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scroll-behavior: auto !important;
    overflow-anchor: none !important;
  }

  html.supnote-ios-notepad.supnote-command-mode.supnote-ios-editor-keyboard-up:not(.supnote-full-page-edit) .page-title-mode-buttons {
    transform: translateZ(0);
    will-change: auto !important;
  }
}

/* v6.7.ee: iPhone CMD + keyboard single-scroller repair.
   CMD-on iPhone editing is command mode, not full-page mode.  When the
   keyboard is visible, temporarily stop using the old fixed visual-viewport
   shell for this mode; it fights Safari's URL-bar viewport changes when the
   user scrolls downward toward the title.  Use one natural document scroller
   and keep title/Fmt/pg-dr/Cmd rows in normal page flow. */
@media (max-width: 900px) {
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit),
  body.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .app-shell.app-shell-notepad,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .app-shell {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .topbar {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    will-change: auto !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .main,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .main.main-notepad,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .notepad-page-shell,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .notepad-layout,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .sidebar,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .editor-area,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .rte,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .door-split,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .door-split-parent,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .door-split-child,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .page-list {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .main.main-notepad {
    display: block !important;
    padding-top: 12px !important;
    padding-bottom: calc(52dvh + env(safe-area-inset-bottom)) !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .notepad-layout {
    display: block !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .sidebar {
    margin-bottom: 10px !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .rte-surface {
    height: auto !important;
    min-height: 70dvh !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    padding-bottom: calc(52dvh + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(52dvh + env(safe-area-inset-bottom)) !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .rte-surface .page-title-line,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .page-title-mode-buttons,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .rte-toolbar-wrap {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    will-change: auto !important;
  }
}



/* v6.7.ee: iPhone Quickstart/native scrolling repair.
   The older iPhone fixed viewport shell could trap Quickstart at the bottom
   and make Safari's URL bar hop even when the keyboard was not shown.
   For iPhone notepad pages, make the document the one natural scroller again.
   CMD/full-page keyboard-specific guards below may still add extra bottom room,
   but the root app shell no longer pins itself to visualViewport geometry. */
@media (max-width: 900px) {
  html.supnote-iphone,
  body.supnote-iphone,
  html.supnote-ios-client,
  body.supnote-ios-client,
  html.supnote-ios-notepad,
  body.supnote-ios-notepad {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.supnote-iphone,
  body.supnote-ios-client,
  body.supnote-ios-notepad {
    position: static !important;
    width: 100% !important;
  }

  html.supnote-iphone .app-shell.app-shell-notepad,
  html.supnote-iphone .app-shell,
  html.supnote-ios-client .app-shell.app-shell-notepad,
  html.supnote-ios-client .app-shell,
  html.supnote-ios-notepad .app-shell.app-shell-notepad,
  html.supnote-ios-notepad .app-shell {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    transform: none !important;
    will-change: auto !important;
  }

  html.supnote-iphone .main,
  html.supnote-iphone .main.main-notepad,
  html.supnote-iphone .notepad-page-shell,
  html.supnote-iphone .notepad-layout,
  html.supnote-iphone .sidebar,
  html.supnote-iphone .editor-area,
  html.supnote-iphone .rte,
  html.supnote-iphone .door-split,
  html.supnote-iphone .door-split-parent,
  html.supnote-iphone .door-split-child,
  html.supnote-ios-client .main,
  html.supnote-ios-client .main.main-notepad,
  html.supnote-ios-client .notepad-page-shell,
  html.supnote-ios-client .notepad-layout,
  html.supnote-ios-client .sidebar,
  html.supnote-ios-client .editor-area,
  html.supnote-ios-client .rte,
  html.supnote-ios-client .door-split,
  html.supnote-ios-client .door-split-parent,
  html.supnote-ios-client .door-split-child,
  html.supnote-ios-notepad .main,
  html.supnote-ios-notepad .main.main-notepad,
  html.supnote-ios-notepad .notepad-page-shell,
  html.supnote-ios-notepad .notepad-layout,
  html.supnote-ios-notepad .sidebar,
  html.supnote-ios-notepad .editor-area,
  html.supnote-ios-notepad .rte,
  html.supnote-ios-notepad .door-split,
  html.supnote-ios-notepad .door-split-parent,
  html.supnote-ios-notepad .door-split-child {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    will-change: auto !important;
  }

  html.supnote-iphone .notepad-layout,
  html.supnote-ios-client .notepad-layout,
  html.supnote-ios-notepad .notepad-layout {
    display: block !important;
    align-content: start !important;
  }

  html.supnote-iphone .rte-surface,
  html.supnote-ios-client .rte-surface,
  html.supnote-ios-notepad .rte-surface {
    height: auto !important;
    max-height: none !important;
    min-height: 60dvh !important;
    overflow: visible !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scroll-behavior: auto !important;
  }
}



/* v6.7.ee: iPhone QUICKSTART scroll restoration.
   A touch inside the editor must not create a false keyboard-up layout, and the
   ordinary iPhone notepad page must use the natural Safari document scroller.
   This block is intentionally last so old fixed/contained iPhone viewport rules
   cannot trap QUICKSTART at the bottom of the screen. */
@media (max-width: 900px) {
  html.supnote-iphone:not(.supnote-full-page-edit),
  body.supnote-iphone:not(.supnote-full-page-edit),
  html.supnote-ios-client:not(.supnote-full-page-edit),
  body.supnote-ios-client:not(.supnote-full-page-edit) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  html.supnote-iphone:not(.supnote-full-page-edit) .app-shell.app-shell-notepad,
  body.supnote-iphone:not(.supnote-full-page-edit) .app-shell.app-shell-notepad,
  html.supnote-ios-client:not(.supnote-full-page-edit) .app-shell.app-shell-notepad,
  body.supnote-ios-client:not(.supnote-full-page-edit) .app-shell.app-shell-notepad,
  html.supnote-iphone:not(.supnote-full-page-edit) .main.main-notepad,
  body.supnote-iphone:not(.supnote-full-page-edit) .main.main-notepad,
  html.supnote-ios-client:not(.supnote-full-page-edit) .main.main-notepad,
  body.supnote-ios-client:not(.supnote-full-page-edit) .main.main-notepad,
  html.supnote-iphone:not(.supnote-full-page-edit) .notepad-page-shell,
  body.supnote-iphone:not(.supnote-full-page-edit) .notepad-page-shell,
  html.supnote-ios-client:not(.supnote-full-page-edit) .notepad-page-shell,
  body.supnote-ios-client:not(.supnote-full-page-edit) .notepad-page-shell,
  html.supnote-iphone:not(.supnote-full-page-edit) .notepad-layout,
  body.supnote-iphone:not(.supnote-full-page-edit) .notepad-layout,
  html.supnote-ios-client:not(.supnote-full-page-edit) .notepad-layout,
  body.supnote-ios-client:not(.supnote-full-page-edit) .notepad-layout,
  html.supnote-iphone:not(.supnote-full-page-edit) .editor-area,
  body.supnote-iphone:not(.supnote-full-page-edit) .editor-area,
  html.supnote-ios-client:not(.supnote-full-page-edit) .editor-area,
  body.supnote-ios-client:not(.supnote-full-page-edit) .editor-area,
  html.supnote-iphone:not(.supnote-full-page-edit) .rte,
  body.supnote-iphone:not(.supnote-full-page-edit) .rte,
  html.supnote-ios-client:not(.supnote-full-page-edit) .rte,
  body.supnote-ios-client:not(.supnote-full-page-edit) .rte {
    display: block !important;
    position: static !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    will-change: auto !important;
  }

  html.supnote-iphone:not(.supnote-full-page-edit) .app-shell.app-shell-notepad,
  body.supnote-iphone:not(.supnote-full-page-edit) .app-shell.app-shell-notepad,
  html.supnote-ios-client:not(.supnote-full-page-edit) .app-shell.app-shell-notepad,
  body.supnote-ios-client:not(.supnote-full-page-edit) .app-shell.app-shell-notepad {
    min-height: 100dvh !important;
  }

  html.supnote-iphone:not(.supnote-full-page-edit) .main.main-notepad,
  body.supnote-iphone:not(.supnote-full-page-edit) .main.main-notepad,
  html.supnote-ios-client:not(.supnote-full-page-edit) .main.main-notepad,
  body.supnote-ios-client:not(.supnote-full-page-edit) .main.main-notepad {
    padding-top: 12px !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }

  html.supnote-iphone:not(.supnote-full-page-edit) .rte-surface,
  body.supnote-iphone:not(.supnote-full-page-edit) .rte-surface,
  html.supnote-ios-client:not(.supnote-full-page-edit) .rte-surface,
  body.supnote-ios-client:not(.supnote-full-page-edit) .rte-surface {
    height: auto !important;
    min-height: calc(100dvh - 140px) !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scroll-behavior: auto !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }
}


/* v6.7.el: iPhone CMD+keyboard scroll de-jitter.
   In CMD mode the document is the one natural scroller. Do not let the editor
   surface pretend to be a nested scroll container while the software keyboard
   is shown, because Safari then alternates between root URL-bar scrolling and
   editor-surface inertia. */
@media (max-width: 900px) {
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .rte,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .rte-surface {
    overflow: visible !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: auto !important;
    scroll-behavior: auto !important;
  }

  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .page-title-line,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .page-title-mode-buttons,
  html.supnote-ios-notepad.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .rte-toolbar-wrap {
    position: static !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* v6.7.ih: Top page QUICKSTART door is a permanent, non-editable navigation anchor at the far-right end of its own bottom line. */
.top-quickstart-door-line {
  display: block;
  text-align: right;
  width: 100%;
  min-height: 1.35em;
  clear: both;
}
.top-quickstart-door-line .top-quickstart-door {
  display: inline-block;
}


/* v6.7.fi: On iPhone edit mode, allow native iOS text editing/selection callouts.
   The editor surface used to disable -webkit-touch-callout so SupNote could own
   long-press menus. For June alpha text entry, native Paste / Select / Select All
   must win inside ordinary page text while page-door pills remain protected. */
@supports (-webkit-touch-callout: default) {
  @media (max-width: 700px) {
    html.supnote-ios-editor-keyboard-up .rte-surface,
    body.supnote-ios-editor-keyboard-up .rte-surface {
      -webkit-touch-callout: default !important;
      -webkit-user-select: text !important;
      user-select: text !important;
      touch-action: pan-y !important;
    }

    html.supnote-ios-editor-keyboard-up .rte-surface .page-door,
    body.supnote-ios-editor-keyboard-up .rte-surface .page-door,
    html.supnote-ios-editor-keyboard-up .rte-surface .page-title-line,
    body.supnote-ios-editor-keyboard-up .rte-surface .page-title-line,
    html.supnote-ios-editor-keyboard-up .rte-surface [contenteditable="false"],
    body.supnote-ios-editor-keyboard-up .rte-surface [contenteditable="false"] {
      -webkit-touch-callout: none !important;
      -webkit-user-select: none !important;
      user-select: none !important;
    }
  }
}

/* v6.7.fi: High-contrast buttons for dark SupNote panels.
   Any pill/button that sits too close to the surrounding panel color should use this treatment. */
button.high-contrast-toggle,
.pill-btn.high-contrast-toggle,
.goodies-section .pill-btn,
.settings-section .pill-btn {
  background: linear-gradient(180deg, rgba(59, 108, 255, 0.98), rgba(37, 99, 235, 0.98)) !important;
  color: #ffffff !important;
  border-color: rgba(231, 238, 252, 0.92) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 6px 18px rgba(37, 99, 235, 0.28) !important;
  font-weight: 750;
}

button.high-contrast-toggle:hover,
.pill-btn.high-contrast-toggle:hover,
.goodies-section .pill-btn:hover,
.settings-section .pill-btn:hover {
  background: linear-gradient(180deg, rgba(96, 165, 250, 1), rgba(59, 108, 255, 1)) !important;
  border-color: #ffffff !important;
}

.find-option-toggle {
  min-width: 132px;
  text-align: center;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .find-option-toggle {
    min-width: 146px;
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* v6.7.gr: command/page-door visual feedback rules.
   Page-doors remain pill-like; command buttons/links flash blue immediately when tapped. */
.managed-diagnostics-command-link,
.supnote-command-link {
    display: inline !important;
    padding: 0 !important;
    margin: 0.15rem 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #7aa2ff !important;
    -webkit-text-fill-color: currentColor !important;
    font: inherit !important;
    font-weight: 800 !important;
    letter-spacing: normal !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

.managed-diagnostics-command-link:hover,
.supnote-command-link:hover,
.managed-diagnostics-command-link:focus-visible,
.supnote-command-link:focus-visible {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    outline: none !important;
    text-decoration-thickness: 3px !important;
}

.btn.supnote-command-activation-feedback,
button.supnote-command-activation-feedback,
.supnote-command-link.supnote-command-activation-feedback,
.managed-diagnostics-command-link.supnote-command-activation-feedback {
    border-color: rgba(255, 255, 255, 0.98) !important;
    background: rgba(21, 94, 239, 0.96) !important;
    color: #fff !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.88), 0 0 0 5px rgba(21, 94, 239, 0.40) !important;
    text-decoration-color: #fff !important;
}

button.page-door.supnote-door-activation-feedback,
span.page-door.supnote-door-activation-feedback,
.page-door.supnote-door-activation-feedback {
    border-color: rgba(96, 165, 250, 1) !important;
    background: inherit !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.95), 0 0 0 5px rgba(59, 130, 246, 0.32) !important;
}

.editor-area.diagnostics-management-area .btn,
.card .btn {
    border-width: 3px;
    border-color: rgba(255, 255, 255, 0.86);
}


/* v6.7.hf: iPhone editor tool row placement repair.
   The Fmt / pg-dr / Cmd controls are editor tools, not app-topbar tools.
   On iPhone they must remain inside the editor panel on the line immediately
   below the visible page title, even when CMD/PG-DR state classes are active. */
@media (max-width: 900px) {
  html.supnote-ios-notepad .notepad-page-shell .rte.mode-edit,
  html.supnote-ios-client .notepad-page-shell .rte.mode-edit {
    position: relative !important;
  }

  html.supnote-ios-notepad .notepad-page-shell .rte.mode-edit .page-title-mode-buttons,
  html.supnote-ios-client .notepad-page-shell .rte.mode-edit .page-title-mode-buttons,
  html.supnote-ios-notepad.supnote-full-page-edit .notepad-page-shell .rte.mode-edit .page-title-mode-buttons,
  html.supnote-ios-client.supnote-full-page-edit .notepad-page-shell .rte.mode-edit .page-title-mode-buttons {
    display: flex !important;
    position: absolute !important;
    inset: auto 14px auto 14px !important;
    top: calc(56px + env(safe-area-inset-top)) !important;
    z-index: 28 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
  }

  html.supnote-ios-notepad .notepad-page-shell .rte.mode-edit .page-title-mode-buttons button,
  html.supnote-ios-client .notepad-page-shell .rte.mode-edit .page-title-mode-buttons button,
  html.supnote-ios-notepad.supnote-full-page-edit .notepad-page-shell .rte.mode-edit .page-title-mode-buttons button,
  html.supnote-ios-client.supnote-full-page-edit .notepad-page-shell .rte.mode-edit .page-title-mode-buttons button {
    pointer-events: auto !important;
  }

  html.supnote-ios-notepad .notepad-page-shell .rte.mode-edit .page-title-mode-buttons .title-line-page-door-toggle,
  html.supnote-ios-client .notepad-page-shell .rte.mode-edit .page-title-mode-buttons .title-line-page-door-toggle,
  html.supnote-ios-notepad.supnote-full-page-edit .notepad-page-shell .rte.mode-edit .page-title-mode-buttons .title-line-page-door-toggle,
  html.supnote-ios-client.supnote-full-page-edit .notepad-page-shell .rte.mode-edit .page-title-mode-buttons .title-line-page-door-toggle {
    margin-left: auto !important;
  }

  html.supnote-ios-notepad .notepad-page-shell .rte.mode-edit .rte-surface .page-title-line,
  html.supnote-ios-client .notepad-page-shell .rte.mode-edit .rte-surface .page-title-line,
  html.supnote-ios-notepad.supnote-full-page-edit .notepad-page-shell .rte.mode-edit .rte-surface .page-title-line,
  html.supnote-ios-client.supnote-full-page-edit .notepad-page-shell .rte.mode-edit .rte-surface .page-title-line {
    margin-bottom: 44px !important;
  }

  html.supnote-ios-notepad .notepad-page-shell .rte.mode-edit:has(.rte-toolbar-wrap) .rte-surface .page-title-line,
  html.supnote-ios-client .notepad-page-shell .rte.mode-edit:has(.rte-toolbar-wrap) .rte-surface .page-title-line,
  html.supnote-ios-notepad.supnote-full-page-edit .notepad-page-shell .rte.mode-edit:has(.rte-toolbar-wrap) .rte-surface .page-title-line,
  html.supnote-ios-client.supnote-full-page-edit .notepad-page-shell .rte.mode-edit:has(.rte-toolbar-wrap) .rte-surface .page-title-line {
    margin-bottom: 104px !important;
  }
}


/* v6.7.hf: Final mobile separation for Notebook identity vs editor tools.
   The topbar Notebook label is a header identity/status label.  The editor
   Fmt / PG-DR / CMD controls must never share that row; on iPhone they are
   pinned inside the editor component immediately below the page title, even
   when command/full-page/keyboard classes are active. */
@media (max-width: 900px) {
  .app-shell-notepad .topbar .topbar-notebook-name {
    position: relative !important;
    display: inline-block !important;
    max-width: min(72vw, 560px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 45 !important;
  }

  .app-shell-notepad .editor-area .rte,
  html.supnote-ios-notepad .app-shell-notepad .editor-area .rte,
  html.supnote-ios-client .app-shell-notepad .editor-area .rte,
  html.supnote-command-mode .app-shell-notepad .editor-area .rte,
  html.supnote-full-page-edit .app-shell-notepad .editor-area .rte {
    position: relative !important;
    overflow: visible !important;
  }

  .app-shell-notepad .editor-area .rte > .page-title-mode-buttons,
  html.supnote-ios-notepad .app-shell-notepad .editor-area .rte > .page-title-mode-buttons,
  html.supnote-ios-client .app-shell-notepad .editor-area .rte > .page-title-mode-buttons,
  html.supnote-command-mode .app-shell-notepad .editor-area .rte > .page-title-mode-buttons,
  html.supnote-full-page-edit .app-shell-notepad .editor-area .rte > .page-title-mode-buttons,
  html.supnote-ios-editor-keyboard-up .app-shell-notepad .editor-area .rte > .page-title-mode-buttons,
  html.supnote-ios-editor-keyboard-up.supnote-command-mode:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte > .page-title-mode-buttons {
    display: flex !important;
    position: absolute !important;
    top: 56px !important;
    left: 14px !important;
    right: 14px !important;
    bottom: auto !important;
    inset-inline-start: 14px !important;
    inset-inline-end: 14px !important;
    transform: none !important;
    z-index: 34 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    pointer-events: none !important;
    overflow: visible !important;
    clear: both !important;
  }

  .app-shell-notepad .editor-area .rte > .page-title-mode-buttons button {
    pointer-events: auto !important;
  }

  .app-shell-notepad .editor-area .rte > .page-title-mode-buttons .title-line-page-door-toggle {
    margin-left: auto !important;
  }

  .app-shell-notepad .editor-area .rte .rte-surface .page-title-line,
  html.supnote-command-mode .app-shell-notepad .editor-area .rte .rte-surface .page-title-line,
  html.supnote-full-page-edit .app-shell-notepad .editor-area .rte .rte-surface .page-title-line {
    margin-bottom: 48px !important;
  }

  .app-shell-notepad .editor-area .rte:has(.rte-toolbar-wrap) .rte-surface .page-title-line {
    margin-bottom: 108px !important;
  }
}


/* v6.7.hf: iPhone QUICKSTART/editor tool-row final placement.
   The Notebook identity label is topbar status.  The editor Fmt / PG-DR / CMD
   controls belong together on one row inside the editor, immediately below
   the visible page title such as QUICKSTART, never on the Notebook topbar row. */
@media (max-width: 900px) {
  html.supnote-ios-notepad:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit,
  html.supnote-ios-client:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit,
  html.supnote-ios-notepad:not(.supnote-full-page-edit) .notepad-page-shell .editor-area .rte.mode-edit,
  html.supnote-ios-client:not(.supnote-full-page-edit) .notepad-page-shell .editor-area .rte.mode-edit {
    position: relative !important;
    overflow: visible !important;
  }

  html.supnote-ios-notepad:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons,
  html.supnote-ios-client:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons,
  html.supnote-ios-notepad:not(.supnote-full-page-edit) .notepad-page-shell .editor-area .rte.mode-edit > .page-title-mode-buttons,
  html.supnote-ios-client:not(.supnote-full-page-edit) .notepad-page-shell .editor-area .rte.mode-edit > .page-title-mode-buttons,
  html.supnote-command-mode.supnote-ios-notepad:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons,
  html.supnote-command-mode.supnote-ios-client:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons,
  html.supnote-ios-editor-keyboard-up.supnote-ios-notepad:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons,
  html.supnote-ios-editor-keyboard-up.supnote-ios-client:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons {
    display: flex !important;
    position: absolute !important;
    top: 74px !important;
    left: 24px !important;
    right: 24px !important;
    bottom: auto !important;
    inset: auto 24px auto 24px !important;
    transform: none !important;
    z-index: 80 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    pointer-events: none !important;
    clear: both !important;
    float: none !important;
  }

  html.supnote-ios-notepad:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons button,
  html.supnote-ios-client:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons button,
  html.supnote-ios-notepad:not(.supnote-full-page-edit) .notepad-page-shell .editor-area .rte.mode-edit > .page-title-mode-buttons button,
  html.supnote-ios-client:not(.supnote-full-page-edit) .notepad-page-shell .editor-area .rte.mode-edit > .page-title-mode-buttons button {
    pointer-events: auto !important;
    position: static !important;
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  html.supnote-ios-notepad:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons .title-line-page-door-toggle,
  html.supnote-ios-client:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons .title-line-page-door-toggle,
  html.supnote-ios-notepad:not(.supnote-full-page-edit) .notepad-page-shell .editor-area .rte.mode-edit > .page-title-mode-buttons .title-line-page-door-toggle,
  html.supnote-ios-client:not(.supnote-full-page-edit) .notepad-page-shell .editor-area .rte.mode-edit > .page-title-mode-buttons .title-line-page-door-toggle {
    margin-left: auto !important;
  }

  html.supnote-ios-notepad:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit .rte-surface .page-title-line,
  html.supnote-ios-client:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit .rte-surface .page-title-line,
  html.supnote-ios-notepad:not(.supnote-full-page-edit) .notepad-page-shell .editor-area .rte.mode-edit .rte-surface .page-title-line,
  html.supnote-ios-client:not(.supnote-full-page-edit) .notepad-page-shell .editor-area .rte.mode-edit .rte-surface .page-title-line {
    margin-bottom: 58px !important;
  }

  html.supnote-ios-notepad:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit:has(.rte-toolbar-wrap) .rte-surface .page-title-line,
  html.supnote-ios-client:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit:has(.rte-toolbar-wrap) .rte-surface .page-title-line {
    margin-bottom: 118px !important;
  }

  html.supnote-ios-notepad:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit .rte-toolbar-wrap,
  html.supnote-ios-client:not(.supnote-full-page-edit) .app-shell-notepad .editor-area .rte.mode-edit .rte-toolbar-wrap {
    top: 112px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 79 !important;
  }
}

/* v6.7.hf: iPhone Pages control must be a real, fully visible tap target.
   The Pages button was sometimes visually clipped (missing top border) and taps
   could look dead when the transient mobile auto-collapse flag conflicted with
   persisted hidden mode. Keep the button above adjacent editor layers. */
@media (max-width: 900px) {
  .notepad-page-shell .sidebar-top,
  .notepad-page-shell .sidebar-top-left {
    position: relative !important;
    z-index: 90 !important;
    overflow: visible !important;
  }

  .notepad-page-shell .pages-toggle,
  .notepad-page-shell .pages-toggle.muted,
  .notepad-page-shell .sidebar.collapsed .pages-toggle {
    position: relative !important;
    z-index: 95 !important;
    pointer-events: auto !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border: 3px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 14px !important;
    background: rgba(17, 24, 39, 0.42) !important;
    box-shadow: 0 0 0 1px rgba(122, 162, 255, 0.20) !important;
    color: rgba(231, 238, 252, 0.96) !important;
    line-height: 1.1 !important;
    overflow: visible !important;
  }

  .notepad-page-shell .pages-toggle:active,
  .notepad-page-shell .pages-toggle:focus-visible {
    border-color: rgba(122, 162, 255, 1) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28) !important;
  }
}

/* v6.7.hf: Final iPhone editor tool-row placement.  Fmt / pg-dr / CMD must
   be together on the same row immediately BELOW the visible page title, never
   on the Notebook identity row and never overlaying the divider above title. */
@media (max-width: 900px) {
  html.supnote-ios-notepad .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons,
  html.supnote-ios-client .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons,
  html.supnote-command-mode .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons,
  html.supnote-ios-editor-keyboard-up .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons {
    display: flex !important;
    position: absolute !important;
    top: 104px !important;
    left: 24px !important;
    right: 24px !important;
    z-index: 86 !important;
    height: 30px !important;
    min-height: 30px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  html.supnote-ios-notepad .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons button,
  html.supnote-ios-client .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons button,
  html.supnote-command-mode .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons button,
  html.supnote-ios-editor-keyboard-up .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons button {
    pointer-events: auto !important;
    position: static !important;
    transform: none !important;
  }

  html.supnote-ios-notepad .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons .title-line-page-door-toggle,
  html.supnote-ios-client .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons .title-line-page-door-toggle,
  html.supnote-command-mode .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons .title-line-page-door-toggle,
  html.supnote-ios-editor-keyboard-up .app-shell-notepad .editor-area .rte.mode-edit > .page-title-mode-buttons .title-line-page-door-toggle {
    margin-left: auto !important;
  }

  html.supnote-ios-notepad .app-shell-notepad .editor-area .rte.mode-edit .rte-surface .page-title-line,
  html.supnote-ios-client .app-shell-notepad .editor-area .rte.mode-edit .rte-surface .page-title-line,
  html.supnote-command-mode .app-shell-notepad .editor-area .rte.mode-edit .rte-surface .page-title-line,
  html.supnote-ios-editor-keyboard-up .app-shell-notepad .editor-area .rte.mode-edit .rte-surface .page-title-line {
    margin-bottom: 88px !important;
  }
}

/* v6.7.hf: native-capture Pages/page-button tap acknowledgement. */
.supnote-tap-blue,
.pages-toggle.supnote-tap-blue,
.page-btn.supnote-tap-blue,
.btn.supnote-tap-blue {
  background: rgba(37, 99, 235, 0.95) !important;
  border-color: rgba(191, 219, 254, 1) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.45) !important;
}

/* v6.7.hf: Home and Pages are navigation commands, not page-doors.
   They should read as hyperlink-like command controls while retaining a large
   iPhone tap target and native tap-capture reliability. */
.notepad-page-shell .sidebar-top .btn,
.notepad-page-shell .pages-toggle,
.notepad-page-shell .pages-toggle.muted,
.notepad-page-shell .sidebar.collapsed .pages-toggle {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(231, 238, 252, 0.96) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  padding: 8px 4px !important;
  min-height: 40px !important;
  outline-offset: 4px !important;
}

.notepad-page-shell .sidebar-top .btn:hover,
.notepad-page-shell .pages-toggle:hover,
.notepad-page-shell .pages-toggle.muted:hover {
  color: #ffffff !important;
  background: transparent !important;
}

.notepad-page-shell .sidebar-top .btn:focus-visible,
.notepad-page-shell .pages-toggle:focus-visible {
  outline: 2px solid rgba(191, 219, 254, 0.95) !important;
  border-radius: 4px !important;
}

.notepad-page-shell .sidebar-top .btn.supnote-tap-blue,
.notepad-page-shell .pages-toggle.supnote-tap-blue {
  color: #ffffff !important;
  background: rgba(37, 99, 235, 0.95) !important;
  text-decoration-color: #ffffff !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.45) !important;
}

/* v6.7.jl: Supnote brand is a button so iPhone triple-tap cannot be swallowed by anchor navigation. */
button.brand-link {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button.brand-link:hover { text-decoration: underline; }

/* v6.7.od: iPhone-only compact diagnostic capture button beside Supnote. */
.brand-cap-btn {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.65);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 7px;
  margin-left: 7px;
  min-height: 22px;
  min-width: 34px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
html.supnote-iphone .brand-cap-btn { display: inline-flex; align-items: center; justify-content: center; }
html.supnote-iphone .brand { display: inline-flex; align-items: center; }
.brand-cap-btn:active { transform: translateY(1px); }

/* v6.7.ks: System Diagnostics logging toggle. */
.diagnostic-logging-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 0;
    padding: 7px 10px;
    border: 1px solid rgba(203,213,225,.45);
    border-radius: 12px;
    color: var(--text, #e5e7eb);
    background: rgba(15,23,42,.28);
    cursor: pointer;
    user-select: none;
}

.diagnostic-logging-toggle input {
    width: 18px;
    height: 18px;
    accent-color: #60a5fa;
}

.diagnostic-logging-toggle input:disabled,
.diagnostic-logging-toggle input:disabled + span {
    opacity: .65;
    cursor: wait;
}

.diagnostic-logging-status {
    margin: -2px 0 10px 2px;
}

/* v6.7.kt: iPhone Pages-list high-speed fling scroll stays a scroll, not a row tap. */
.page-list {
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    contain: layout paint !important;
    will-change: scroll-position;
}

/* v6.7.kt: Notebook Management separates notebook checkbox rows from notepad names. */
.notebook-management-notepad-line,
.notebook-management-notepad-line.muted {
    margin-top: 2px;
    padding-left: 0.65rem;
    color: rgba(226, 232, 240, 0.92) !important;
}

/* v6.7.kt: make the blank-line selection feedback visible for a moment on iPhone. */
.rte-surface.supnote-leading-blank-lines-selected {
    outline: 2px solid rgba(96, 165, 250, 0.95) !important;
    outline-offset: 2px;
}

/* v6.7.kv: let iPhone Safari own native click-drag text selection inside the editor.
   Page-door pills remain tap-only atoms, but ordinary editor text/blank space must
   be selectable/scrollable without Supnote capture helpers fighting the gesture. */
html.supnote-ios-notepad .rte-surface,
html.supnote-ios-notepad .rte-surface *:not(.page-door):not(.page-back):not(.page-title-line) {
  -webkit-user-select: text;
  user-select: text;
}
html.supnote-ios-notepad span.page-door,
html.supnote-ios-notepad .page-back,
html.supnote-ios-notepad .page-title-line {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* v6.7.ms: notebook-title diagnostic gestures are intentional tappable controls. */
.topbar-notebook-diagnostics-tap {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* v6.7.nn: PG-DR was removed. Keep the remaining title-line controls balanced: Fmt left, Cmd right. */
.rte.mode-edit .page-title-mode-buttons .title-line-command-toggle,
.page-title-mode-buttons .title-line-command-toggle {
  margin-left: auto !important;
}