.notes-view {
  min-width: 0;
  padding: 0;
  background: #fbfbf8;
}

/* Flex column, not grid: a sticky child is confined to its containing block, and a
   grid item's containing block is its own auto-height track — the toolbar had no
   room to travel and would never actually stick. */
.notes-shell {
  min-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 24px 24px;
}

.notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 36px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6e6df;
}

.notes-titleline,
.notes-header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.notes-header h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1;
  font-weight: 760;
  color: #1f2933;
}

/* Fixed enough to keep the header from shifting when the save label changes. */
.notes-status {
  min-width: 64px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: #637083;
}

.notes-status[data-state="error"] {
  color: #b42318;
}

.notes-tabs-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 32px;
}

.notes-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  overflow-x: visible;
}

.notes-tab-wrap {
  flex: 0 1 auto;
  width: max-content;
  display: inline-flex;
  align-items: center;
  max-width: min(200px, 100%);
  min-width: 0;
  height: 30px;
  border: 1px solid #d9ddd4;
  border-radius: 8px;
  background: #f7f7f1;
  overflow: hidden;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.notes-tab-wrap-active {
  background: #ffffff;
  border-color: #a9bad1;
  box-shadow: 0 1px 3px rgba(31, 41, 51, 0.08);
}

.notes-tab,
.notes-tab-close,
.notes-tab-add {
  height: 28px;
  border: 0;
  background: transparent;
  color: #4a5567;
  font: 700 13px/1 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.notes-tab {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
  padding: 0 9px 0 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sized like .notes-tab so the tab keeps its width when the name turns editable. */
.notes-tab-rename {
  flex: 1 1 auto;
  height: 26px;
  max-width: none;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid #b9c6d8;
  border-radius: 6px;
  margin: 0 1px;
  background: #ffffff;
  color: #1f2933;
  font: 700 13px/1 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.notes-tab-rename:focus {
  outline: 2px solid #7d9dc4;
  outline-offset: -1px;
}

.notes-tab-active {
  color: #1f2933;
}

.notes-tab-close {
  flex: 0 0 28px;
  width: 28px;
  border-left: 1px solid #dfe3da;
  font-size: 17px;
  line-height: 1;
}

.notes-tab-close:disabled {
  cursor: default;
  opacity: 0.35;
}

.notes-tab-add {
  flex: 0 0 auto;
  width: 32px;
  border: 1px solid #d9ddd4;
  border-radius: 8px;
  background: #ffffff;
  font-size: 19px;
}

.notes-tab:hover,
.notes-tab-close:not(:disabled):hover,
.notes-tab-add:hover {
  background: #edf2f8;
  color: #1f2933;
}

.notes-tab:focus-visible,
.notes-tab-close:focus-visible,
.notes-tab-add:focus-visible {
  outline: 2px solid #2f6feb;
  outline-offset: 1px;
}

/* The mount host for the shared editor, which builds `.milkdown > .ProseMirror`
   inside it. The host owns the page's typography and spacing; it is not itself
   editable. */
.notes-editor {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  /* Anchors the placeholder, which is positioned out of flow below. */
  position: relative;
  border: 0;
  outline: 0;
  background: transparent;
  color: #20242a;
  font: 18px/1.62 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  padding: 0 0 40px;
  overflow-wrap: anywhere;
}

/* The editing surface has to grow into the host's box. Left at its content
   height, the clickable area would stop at the last line of text and clicking
   the empty space below a short note would not put the caret anywhere. */
.notes-editor > .milkdown {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.notes-editor .ProseMirror {
  flex: 1 1 auto;
  outline: 0;
  white-space: pre-wrap;
}

/* The editor has no placeholder attribute; the class is set from JS whenever the
   serialised note is empty. Positioned out of flow on purpose: the host is a flex
   container, and an in-flow ::before would become a flex item and displace the
   editing surface rather than sit behind it. */
.notes-editor-empty::before {
  content: attr(data-placeholder);
  color: #a0a8b5;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

/* The scrolling ancestor is .notes-view (.dashboard-view sets overflow:auto), so
   top:0 pins the bar to the top of the page area while the note scrolls under it.
   The negative side margins bleed the opaque background out to the shell's padding
   edge so scrolled text does not slide through the gutters beside the buttons. */
.notes-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 -24px;
  padding: 7px 24px;
  background: rgba(251, 251, 248, 0.96);
  border-bottom: 1px solid #e6e6df;
  backdrop-filter: blur(10px);
}

.notes-tool {
  min-width: 30px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #4a5567;
  font: 600 13px/1.2 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}

.notes-tool:hover {
  background: #eeeee6;
  color: #1f2933;
}

.notes-tool:focus-visible {
  outline: 2px solid #2f6feb;
  outline-offset: 1px;
}

.notes-tool-divider {
  width: 1px;
  height: 16px;
  margin: 0 3px;
  background: #e0e0d6;
}

/* The editor IS the rendered surface, so the formatted blocks are styled in place
   rather than in a separate preview pane. */
.notes-editor h1,
.notes-editor h2 {
  margin: 24px 0 10px;
  line-height: 1.2;
  color: #1f2933;
}

.notes-editor h1 { font-size: 28px; font-weight: 760; }
.notes-editor h2 { font-size: 22px; font-weight: 720; }
/* The blocks are children of .ProseMirror now, not of the host. */
.notes-editor .ProseMirror > :first-child { margin-top: 0; }
.notes-editor p { margin: 0; }
.notes-editor ul,
.notes-editor ol { margin: 0 0 14px; padding-left: 26px; }
.notes-editor li { margin: 0 0 4px; }
.notes-editor a { color: #2f6feb; }
.notes-editor strong { font-weight: 720; }
/* Keep the caret clear of the pinned bar when the browser scrolls a block into view. */
.notes-editor .ProseMirror > * { scroll-margin-top: 62px; }

/* Sharing: the Share control sits with the title, the save status stays pinned right. */
.notes-sharing-summary {
  font-size: 13px;
  font-weight: 600;
  color: #637083;
  max-width: 460px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-share-button,
.notes-pack-button {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.notes-share-button[hidden],
.notes-pack-button[hidden] { display: none; }

.notes-tab-badge {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #e7edf5;
  color: #44546b;
  font-size: 11px;
  font-weight: 700;
}

.notes-share-picker-host,
.notes-pack-picker-host {
  position: relative;
}

.notes-share-picker,
.notes-pack-picker {
  margin: 8px 0 0;
  padding: 14px 16px;
  border: 1px solid #d6dde8;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(31, 41, 51, 0.12);
  max-width: 460px;
}

.notes-share-title,
.notes-pack-title {
  font-size: 14px;
  font-weight: 760;
  color: #1f2933;
  margin-bottom: 10px;
}

.notes-share-options,
.notes-pack-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.notes-share-option,
.notes-pack-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #1f2933;
}

.notes-share-name,
.notes-pack-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-share-role {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 2px 4px;
}

.notes-share-hint,
.notes-pack-hint,
.notes-pack-loading {
  margin: 10px 0 0;
  font-size: 12px;
  color: #637083;
}

.notes-pack-loading {
  margin: 0;
}

/* The scope a pack belongs to, so two similarly named packs stay distinguishable. */
.notes-pack-scope {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: #637083;
  background: #eef2f7;
  border-radius: 5px;
  padding: 1px 6px;
}

.notes-share-actions,
.notes-pack-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Shown only when the editor bundle could not load — offline, most likely.
   The note text is still readable and selectable, which is the whole point of
   the local draft; it simply cannot be edited without the editor. */
.notes-editor-fallback {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  color: inherit;
}

/* A note shared read-only must LOOK unavailable, not merely reject the save. */
.notes-editor-readonly {
  background: #fbfbf7;
  color: #44546b;
  cursor: default;
}

@media (max-width: 720px) {
  .notes-shell {
    min-height: calc(100vh - 12px);
    gap: 7px;
    padding: 16px 14px 18px;
  }

  .notes-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 8px;
  }

  .notes-titleline,
  .notes-header-actions {
    width: 100%;
  }

  .notes-header-actions {
    flex-wrap: wrap;
  }

  .notes-header h1 {
    font-size: 24px;
  }

  .notes-editor {
    min-height: 76vh;
    font-size: 17px;
  }

  .notes-toolbar {
    margin: 0 -14px;
    padding: 6px 14px;
  }

  .notes-tab-wrap {
    max-width: min(170px, 100%);
  }

  .notes-tab,
  .notes-tab-rename {
    max-width: none;
  }

  .notes-tool {
    padding: 5px 7px;
  }
}

/* "Who wrote what" on a shared note. Off by default; the rail appears only when
   the reader asks for it, because a coloured bar down every paragraph while you
   are drafting is noise rather than information. */
.notes-tool-active { background: #e9eef6; color: #1f2933; border-color: #b9c6d8; }
/* The name is drawn from an attribute, so no node is ever inserted into the
   editor's own document — see notesRenderAuthorship. */
.notes-editor .notes-authorship-block::before {
  content: attr(data-notes-author);
  display: block;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--notes-authorship-rail, #43526b);
}
.notes-editor .notes-authorship-block {
  padding-left: 12px;
  border-left: 3px solid var(--notes-authorship-rail, #43526b);
}
.notes-editor .notes-authorship-block-human { background: #f7f9ff; border-radius: 0 5px 5px 0; }