/* ── Нотатки на полях (margin-notes.js) ────────────────────────────────────
   Текст — вузькою колонкою (--mn-text), праворуч поле: гравюра, нотатки навпроти
   своїх слів, лінії від слова до нотатки. Вузький екран — поля нема: нотатка під
   абзацом, розгортається тапом по слову. Лише токени — працює й у ref/calc без design.css.
   Без анімацій: нотатку відкривають часто, рух лише гальмував би читання. */
.mn { position: relative; }
.mn-text { min-width: 0; }
.mn-side { position: relative; min-width: 0; font-size: .88rem; line-height: 1.5; color: var(--text); }
.mn-art { margin: 0 0 18px; }
.mn-art .engr-mark { color: var(--text); }

@media (min-width: 1200px) {
  .mn { display: grid; grid-template-columns: minmax(0, var(--mn-text, 38rem)) minmax(15rem, 1fr); column-gap: var(--mn-gap, 4.5rem); align-items: start; }
  .mn-side .mn-placed { position: absolute; left: 0; right: 0; }
}

/* Слово з нотаткою: пунктир під ним, як у словнику, але кольором поля. */
.mn-a, .mn-a-row .calc-out-label { text-decoration: underline dotted; text-decoration-color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1.5px; cursor: pointer; }
.mn-a:focus-visible, .mn-a-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.mn-a.is-on, .mn-a-row.is-on .calc-out-label { background: rgba(var(--gold-rgb), .16); border-radius: 3px; }

.mn-note { padding: 2px 0 2px 14px; border-left: 1.5px solid rgba(var(--gold-rgb), .55); transition: border-color 150ms ease; }
.mn-note.is-on { border-left-color: var(--gold); }
.mn-note-t { display: block; margin: 0 0 3px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hint); }
.mn-note p { margin: 0 0 4px; overflow-wrap: anywhere; }
.mn-src { display: inline-block; margin-top: 2px; font-size: .8rem; color: var(--hint); }
.mn-src:hover { color: var(--green); }

/* Лінії — гілки мапи думок (branch.js): тонкі, приглушені; підсвічуються разом зі словом і нотаткою. */
.mn-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mn-lines path { fill: none; stroke: var(--gold); stroke-width: 1; stroke-linecap: round; opacity: .45; transition: opacity 150ms ease; }
.mn-lines path.is-on { opacity: 1; stroke-width: 1.4; }
/* Точка виноски — у кінці рядка зі словом; гілка до нотатки починається з неї. Лінії
   «прозорі» для миші, точка й гілка — ні: наведення на них підсвічує всю виноску. */
.mn-lines circle { fill: var(--gold); opacity: .7; transition: opacity 150ms ease; pointer-events: auto; }
.mn-lines circle.is-on { opacity: 1; }
.mn-lines path { pointer-events: stroke; }

/* Вузько: нотатка — врізка під абзацом. */
@media (max-width: 1199.98px) {
  .mn-text .mn-note { margin: -.2rem 0 1rem; padding: 8px 12px; background: rgba(var(--gold-rgb), .08); border-radius: 0 8px 8px 0; }
  .mn-side { margin-top: 24px; }
}