/* Rich-text note editor. Shared by the staff app (loaded after calmuni.css, which
   supplies the design tokens) and the Django admin NoteEditorWidget.

   Colours use nested var() fallbacks: the staff design token wins in the staff
   app; in the admin (no staff tokens) it falls back to Django admin's theme
   variables so the editor follows the light/dark theme; a literal is the last
   resort. */
.note-editor { border: 1px solid var(--border-strong, var(--border-color, #b9bfc9)); border-radius: var(--radius, 4px); background: var(--surface, var(--body-bg, #fff)); overflow: hidden; }
.note-editor:focus-within { border-color: var(--navy, var(--primary, #2b4a7e)); box-shadow: 0 0 0 3px oklch(0.32 0.08 255 / 0.12); }
.note-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border, var(--border-color, #dfe3ea)); background: var(--paper, var(--darkened-bg, #f6f7f9)); }
.note-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border: 1px solid transparent; border-radius: 3px; cursor: pointer; background: transparent; font-size: 12px; font-family: inherit; color: var(--ink-2, var(--body-quiet-color, #4a4f57)); line-height: 1; }
.note-btn:hover { background: var(--hover, var(--darkened-bg, #eef0f3)); border-color: var(--border, var(--border-color, #dfe3ea)); color: var(--ink, var(--body-fg, #1c1f24)); }
/* Serif (and a touch larger) on both glyphs so the italic "I" shows its serifs
   instead of reading as a bar, and B/I share metrics so they stay aligned. */
.note-btn[data-cmd="bold"], .note-btn[data-cmd="italic"] { font-family: Georgia, "Times New Roman", serif; font-size: 14px; }
.note-btn.active { background: var(--navy-soft, var(--selected-bg, #e4ebf6)); color: var(--navy-ink, var(--link-fg, #2b4a7e)); border-color: transparent; }
.note-sep { width: 1px; height: 16px; background: var(--border, var(--border-color, #dfe3ea)); margin: 0 4px; flex-shrink: 0; }
.note-content { padding: 8px 10px; height: 100px; overflow-y: auto; font-size: 12.5px; line-height: 1.55; outline: none; color: var(--ink, var(--body-fg, #1c1f24)); }
.note-content:empty:before { content: attr(data-placeholder); color: var(--ink-4, var(--body-quiet-color, #9aa0aa)); pointer-events: none; }