/* The site-notes icon and its window (static/js/site_notes.js). Shared by the
   map pages, the analytics page and advanced analytics, so a note looks the
   same wherever it is read. */

.nh-note-btn {
  border: none;
  background: none;
  padding: 0 2px;
  margin-left: 4px;
  font-size: 0.92em;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  vertical-align: baseline;
}
.nh-note-btn:hover { opacity: 1; }
.nh-note-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--r-xs); }

.nh-note-dialog {
  width: min(460px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
  color: var(--ink);
  background: var(--surface);
}
.nh-note-dialog::backdrop { background: rgba(15, 23, 42, 0.42); }

.nh-note-dialog__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--line);
}
.nh-note-dialog__title { margin: 0; font-size: 1rem; font-weight: 600; flex: 1; }
.nh-note-dialog__close {
  border: none; background: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--ink-3); padding: 0 2px;
}
.nh-note-dialog__close:hover { color: var(--ink); }

/* white-space:pre-wrap, so the line breaks someone typed into a note survive —
   without it every note collapses into one paragraph. */
.nh-note-dialog__body {
  padding: 12px 16px 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  max-height: calc(70vh - 60px);
}

/* Buttons under a note, for the notes a reader can act on (an LLM rule's test
   result). Hidden entirely when an opener asks for none, which is every caller
   that shows a field note — so a plain note window is exactly what it was. */
.nh-note-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 14px;
}
.nh-note-dialog__actions[hidden] { display: none; }
.nh-note-dialog__action {
  font: inherit;
  font-size: 0.85rem;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
}
.nh-note-dialog__action:hover { background: var(--surface-2); color: var(--ink); }
.nh-note-dialog__action:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.nh-note-dialog__action[disabled] { opacity: 0.6; cursor: default; }

/* Inline notes (the analytics page shows the note itself, not an icon). */
.nh-note-block {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
}
.nh-note-block[hidden] { display: none; }

/* Dark mode here is the app's own body.dark-mode class, not the OS setting. */
body.dark-mode .nh-note-dialog { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
body.dark-mode .nh-note-dialog__head { border-bottom-color: var(--line); }
body.dark-mode .nh-note-dialog__action {
  background: var(--surface-2); color: var(--ink); border-color: var(--line);
}
body.dark-mode .nh-note-dialog__action:hover { background: var(--surface-2); color: #fff; }
body.dark-mode .nh-note-block { background: var(--surface-2); color: var(--ink); border-color: var(--line); }

/* The word that says whose sentence this is. Inline, so a labelled note costs
   no more vertical space than an unlabelled one did. */
.nh-note-label { font-weight: 700; color: var(--ink-2); }
body.dark-mode .nh-note-label,
.dark-mode .nh-note-label { color: var(--ink); }