.notepad-toolbar {
  display: flex;
  align-items: center;
  gap: .125rem;
  padding-bottom: .625rem;
  margin-bottom: .875rem;
  border-bottom: 1px solid var(--border);
}

.notepad-toolbar-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 .375rem;
}

.notepad-toolbar .notepad-collapse-all {
  margin-left: auto;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 300;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem 0;
  transition: color var(--transition);
}
.notepad-toolbar .notepad-collapse-all:hover { color: var(--accent); }

/* ── Sections: hairline-separated rows (.row), no boxes ── */
.notepad-section { padding: .375rem 0; }
.notepad-section.dragging { opacity: .4; }
.notepad-section.drop-target { box-shadow: inset 0 2px 0 var(--accent); }

.notepad-section-header {
  display: flex;
  align-items: center;
  gap: .25rem;
  min-height: 40px;
}

.notepad-section-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-3);
  flex-shrink: 0;
  transition: color var(--transition);
}
.notepad-section-toggle:hover { color: var(--accent); }
.notepad-section-toggle .chevron { display: flex; transition: transform var(--transition); }
.notepad-section-toggle .chevron.open { transform: rotate(90deg); }

.notepad-section-title {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  padding: .25rem .25rem;
  margin: 0 -.25rem;
  transition: background var(--transition);
}
.notepad-section-title:focus { background: var(--accent-dim); }

.notepad-section-edited {
  font-size: .75rem;
  font-weight: 300;
  color: var(--text-3);
  white-space: nowrap;
  margin-right: .25rem;
}

.notepad-section-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 26px;
  color: var(--text-3);
  cursor: grab;
  flex-shrink: 0;
}
.notepad-section-handle:hover { color: var(--accent); }

/* Drag-reordering is mouse-only (native HTML5 DnD doesn't fire on touch) */
@media (pointer: coarse) {
  .notepad-section-handle { display: none; }
}

.notepad-editor {
  display: block;
  min-height: 5.5em;
  margin: .25rem 0 .75rem 26px;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text);
  padding: .25rem 0 .25rem .875rem;
  border-left: 1px solid var(--border);
  outline: none;
  transition: border-color var(--transition);
}

.notepad-editor:focus { border-left-color: var(--accent); }

.notepad-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  pointer-events: none;
}

/* Bricolage Grotesque only loads 300/400/500 — 700 (the browser default for
   <b>/<strong>) would render as a synthetic fake-bold, so pin it to 500. */
.notepad-editor b,
.notepad-editor strong { font-weight: 500; }

/* Bricolage Grotesque has no italic face loaded either — rather than a faux
   oblique, emphasis switches to Instrument Serif italic (already used for
   the eyebrow line) so it's a real italic, not a synthesized one. */
.notepad-editor i,
.notepad-editor em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.notepad-editor ul,
.notepad-editor ol {
  margin: 0 0 .75em 1.25em;
  padding: 0;
}

.notepad-editor li { margin-bottom: .25em; }

.notepad-editor u { text-decoration-color: var(--accent); }

/* iOS Safari auto-zooms the page when focusing a text-editing element under 16px —
   applies to contenteditable just like a real input/textarea */
@media (pointer: coarse) {
  .notepad-editor { font-size: 16px; }
}

/* ── Add a section (same pattern as To Do's "Add a block") ── */
.notepad-add-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.notepad-add-icon { display: flex; color: var(--text-3); transition: color var(--transition); }
.notepad-add-row:focus-within .notepad-add-icon { color: var(--accent); }
.notepad-add-input {
  flex: 1;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 300;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  padding: .25rem 0;
}
.notepad-add-input::placeholder { color: var(--text-3); }

@media (pointer: coarse) {
  .notepad-section-title, .notepad-add-input { font-size: 16px; }
  .notepad-editor { margin-left: 12px; }
}

/* ── Search ── */
.notepad-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border-light);
}
.notepad-search-icon { display: flex; color: var(--text-3); transition: color var(--transition); }
.notepad-search:focus-within .notepad-search-icon { color: var(--accent); }
.notepad-search-input {
  flex: 1;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 300;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  padding: .25rem 0;
}
.notepad-search-input::placeholder { color: var(--text-3); }
::highlight(notepad-search) { background-color: var(--accent-dim); color: inherit; }
.notepad-section-toggle:disabled { cursor: default; opacity: .4; }

/* ── Toolbar actions (date, send to to-do) ── */
.notepad-action.labeled {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  height: 26px;
  padding: 0 .5rem;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 300;
  color: var(--text-3);
  background: none;
  border: none;
  border-radius: var(--radius-round);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.notepad-action.labeled:hover { background: var(--accent-dim); color: var(--accent); }

/* ── Send-to menu (appended to body, like To Do's popovers) ── */
.notepad-menu-catcher { position: fixed; inset: 0; z-index: 150; }
.notepad-menu {
  position: fixed;
  z-index: 151;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: .375rem 0;
}
.notepad-menu-title {
  font-size: .75rem;
  font-weight: 300;
  color: var(--text-3);
  padding: .25rem .875rem .375rem;
}
.notepad-menu-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 300;
  color: var(--text);
  background: none;
  border: none;
  padding: .4375rem .875rem;
  cursor: pointer;
}
.notepad-menu-item:hover { background: var(--accent-faint); color: var(--accent); }
.notepad-menu-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-round);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.notepad-toast {
  position: fixed;
  left: 50%;
  bottom: 4.5rem;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--text);
  color: #fff;
  font-size: .8125rem;
  font-weight: 300;
  padding: .5rem .875rem;
  border-radius: var(--radius-round);
  white-space: nowrap;
}

@media (pointer: coarse) {
  .notepad-search-input { font-size: 16px; }
  .notepad-action.labeled { height: 34px; }
}