/* NF-110: editing code blocks, links, images and embeds in place. App shell only; exports and print never see these. */
#preview pre[data-code] { cursor: text; }
#preview pre[data-code][data-code-editing] { outline: 2px solid color-mix(in srgb, var(--note-accent) 55%, transparent); outline-offset: 3px; white-space: pre; caret-color: var(--note-accent); }
#preview pre[data-code-editing] code::after { content: "\a"; white-space: pre; }
#preview pre[data-code]:focus-visible { outline: 2px solid var(--note-accent); outline-offset: 3px; }

/* The language field sits on the block's top edge so opening it moves no text. */
.nf-code-lang { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 20px); padding: 3px 8px; border: 1px solid var(--note-line, #d9d1bf); border-radius: 6px; background: var(--note-paper, #fff); color: var(--note-muted, #6c655d); font: 12px/1.2 var(--nf-font-ui, system-ui, sans-serif); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.nf-code-lang label { display: flex; align-items: center; gap: 6px; }
.nf-code-lang input { width: 9em; min-height: 0; padding: 2px 6px; border: 1px solid var(--note-line, #d9d1bf); border-radius: 4px; background: transparent; color: inherit; font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
.nf-code-hint { white-space: nowrap; }
@media (max-width: 520px) { .nf-code-hint { display: none; } }

/* Images are one inseparable piece of the text they sit in. */
#preview .nf-img { display: inline-block; max-width: 100%; vertical-align: bottom; cursor: pointer; }
#preview [data-editing] .nf-img img { outline: 1px dashed color-mix(in srgb, var(--note-accent) 55%, transparent); outline-offset: 2px; }

/* The popover for a link or an image. */
.nf-pop { position: fixed; z-index: 30; box-sizing: border-box; width: min(340px, calc(100vw - 16px)); display: grid; gap: 6px; padding: 12px; border: 1.5px solid var(--nf-pencil, #333); border-radius: var(--nf-radius, 6px); background: var(--nf-sheet, #fff); color: var(--nf-pencil, #222); box-shadow: 3px 3px 0 var(--nf-pencil, #333); font-size: 13px; }
.nf-pop label { font-weight: 600; }
.nf-pop input, .nf-pop select { box-sizing: border-box; width: 100%; min-height: 38px; padding: 6px 8px; border: 1.5px solid var(--nf-pencil-muted, #777); border-radius: 4px; background: var(--nf-paper, #fff); color: inherit; font: inherit; }
.nf-pop-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.nf-pop-error { margin: 0; color: #a3261b; }
.nf-pop-error:empty { display: none; }
.nf-pop .nf-pop-button, .nf-media-tools .nf-pop-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 38px; padding: 6px 12px; border: 1.5px solid var(--nf-pencil-muted, #777); border-radius: var(--nf-radius, 6px); background: var(--nf-sheet, #fff); color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.nf-pop .nf-pop-button:hover, .nf-media-tools .nf-pop-button:hover { background: var(--nf-paper, #f5f5f5); border-color: var(--nf-pencil, #222); }
.nf-pop .nf-pop-primary { background: var(--nf-pencil-yellow, #ffe27a); border-color: var(--nf-pencil, #222); font-weight: 600; }
.nf-pop :is(input, select, button, a):focus-visible, .nf-media-tools :is(select, button):focus-visible { outline: var(--nf-focus, 2px solid #1a56db); outline-offset: 2px; }

/* Choose another page, or remove an embed. */
.nf-media-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -8px 0 16px; font: 13px var(--nf-font-ui, system-ui, sans-serif); color: var(--note-muted, #6c655d); }
.nf-media-tools label { display: flex; align-items: center; gap: 6px; }
.nf-media-tools select { min-height: 38px; padding: 4px 8px; border: 1.5px solid var(--note-line, #999); border-radius: 4px; background: transparent; color: inherit; font: inherit; }
@media print { .nf-media-tools, .nf-code-lang, .nf-pop { display: none !important; } }