/* Note content typography — shared by read mode, the inline editor (same CSS = true WYSIWYG, B9),
   the share page, exported HTML and print (F7). */

:root { --read-size: 17px; --font-sans: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Noto Serif', Georgia, 'Times New Roman', serif; --font-mono: 'Noto Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-read: var(--font-sans); }
[data-size="s"] { --read-size: 15px; }
[data-size="l"] { --read-size: 19px; }
[data-font="serif"] { --font-read: var(--font-serif); }

.note-content { font-family: var(--font-read); font-size: var(--read-size); line-height: 1.7; color: var(--text);
  overflow-wrap: anywhere; word-break: normal; outline: none; min-height: 3em; }
.note-content > :first-child { margin-top: 0; }
.note-content > :last-child { margin-bottom: 0; }
.note-content p { margin: 0 0 0.85em; }
.note-content h1, .note-content h2, .note-content h3, .note-content h4 { font-family: var(--font-sans); line-height: 1.3; margin: 1.6em 0 0.5em; color: var(--text); font-weight: 700; }
.note-content h1 { font-size: 1.65em; letter-spacing: -0.01em; }
.note-content h2 { font-size: 1.35em; }
.note-content h3 { font-size: 1.15em; }
.note-content h4 { font-size: 1em; text-transform: none; }
.note-content ul, .note-content ol { margin: 0 0 0.85em; padding-left: 1.6em; }
.note-content li { margin: 0.2em 0; }
.note-content li > ul, .note-content li > ol { margin: 0.2em 0; }
.note-content a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.note-content a:hover { text-decoration-thickness: 2px; }
.note-content strong, .note-content b { font-weight: 700; }
.note-content mark { background: var(--mark-bg); color: var(--mark-text); border-radius: 2px; padding: 0 0.1em; }
.note-content blockquote { margin: 1em 0; padding: 0.4em 0 0.4em 1em; border-left: 4px solid var(--accent); color: var(--text-2); }
.note-content blockquote p:last-child { margin-bottom: 0; }
.note-content hr { border: 0; border-top: 1px solid var(--border-strong); margin: 1.8em 0; }
.note-content img { max-width: 100%; height: auto; border-radius: 6px; vertical-align: middle; }
.note-content p > img:only-child { display: block; margin: 0.6em auto; }
.note-content img[data-sketch] { border: 1px solid var(--border); background: #fff; }
.note-content code { font-family: var(--font-mono); font-size: 0.88em; background: var(--code-bg); color: var(--code-text); padding: 0.12em 0.35em; border-radius: 4px; }
.note-content pre { font-family: var(--font-mono); font-size: 0.86em; line-height: 1.55; background: var(--code-bg); color: var(--code-text);
  padding: 0.9em 1.1em; border-radius: 8px; overflow-x: auto; margin: 1em 0; tab-size: 2; white-space: pre; border: 1px solid var(--border); }
.note-content pre code { background: none; padding: 0; font-size: inherit; color: inherit; border-radius: 0; }
.note-content .table-wrap { overflow-x: auto; margin: 1em 0; -webkit-overflow-scrolling: touch; }
.note-content table { border-collapse: collapse; width: 100%; font-size: 0.95em; margin: 1em 0; }
.note-content .table-wrap > table { margin: 0; }
.note-content th, .note-content td { border: 1px solid var(--border-strong); padding: 0.45em 0.7em; text-align: left; vertical-align: top; min-width: 3em;
  overflow-wrap: break-word; word-break: normal; } /* never split words: wide tables scroll inside .table-wrap */
.note-content tbody th { width: 30%; white-space: normal; }
.note-content th { background: var(--surface-2); font-weight: 600; }
.note-content figure { margin: 1em 0; }
.note-content figcaption { font-size: 0.85em; color: var(--text-2); text-align: center; }

/* Checklists (D4): <ul class="np-checklist"><li data-checked="true|false"> */
.note-content ul.np-checklist { list-style: none; padding-left: 0.2em; }
.note-content ul.np-checklist > li { position: relative; padding-left: 2em; min-height: 1.5em; }
.note-content ul.np-checklist > li::before { content: ''; position: absolute; left: 0.1em; top: 0.22em; width: 1.15em; height: 1.15em; box-sizing: border-box;
  border: 2px solid var(--border-strong); border-radius: 4px; background: var(--paper); cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.note-content ul.np-checklist > li[data-checked="true"]::before { background: var(--primary); border-color: var(--primary); }
.note-content ul.np-checklist > li[data-checked="true"]::after { content: ''; position: absolute; left: 0.47em; top: 0.38em; width: 0.32em; height: 0.62em;
  border: solid var(--on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.note-content ul.np-checklist > li[data-checked="true"] { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-2); }
.note-content ul.np-checklist > li:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* [[Wiki links]] (E9) */
.note-content a.np-wikilink { color: var(--accent-text); background: var(--accent-soft); text-decoration: none; border-radius: 4px; padding: 0.05em 0.3em; font-weight: 500; }
.note-content a.np-wikilink:hover { text-decoration: underline; }
.note-content a.np-wikilink.is-broken { color: var(--text-2); background: transparent; text-decoration: line-through; }
.note-content a.np-wikilink.is-private { pointer-events: none; }

/* Highlighted text stays readable on dark paper (inline colours win when set) */
[data-mode="dark"] .note-content [style*="background-color"] { color: #1B1F24; }

/* Prism code colours from theme tokens */
.note-content .token.comment, .note-content .token.prolog, .note-content .token.doctype, .note-content .token.cdata { color: var(--text-2); font-style: italic; }
.note-content .token.punctuation { color: var(--text-2); }
.note-content .token.keyword, .note-content .token.atrule, .note-content .token.selector, .note-content .token.important { color: var(--accent-text); font-weight: 600; }
.note-content .token.string, .note-content .token.char, .note-content .token.attr-value, .note-content .token.inserted { color: var(--success); }
.note-content .token.number, .note-content .token.boolean, .note-content .token.constant, .note-content .token.symbol { color: var(--warning); }
.note-content .token.function, .note-content .token.class-name, .note-content .token.tag { color: var(--link); }
.note-content .token.operator, .note-content .token.entity, .note-content .token.url, .note-content .token.variable { color: var(--code-text); }
.note-content .token.deleted, .note-content .token.regex { color: var(--danger); }
.note-content .token.attr-name, .note-content .token.property { color: var(--accent-text); }

/* ---------- Print / PDF (F7) ---------- */
@media print {
  @page { margin: 16mm 15mm 18mm; }
  .note-content { font-size: 11.5pt; line-height: 1.55; color: #000; }
  .note-content a { color: #000; }
  .note-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #444; word-break: break-all; }
  .note-content a.np-wikilink { background: none; color: #000; }
  .note-content img, .note-content table, .note-content pre, .note-content blockquote, .note-content figure, .note-content ul.np-checklist > li { break-inside: avoid; page-break-inside: avoid; }
  .note-content h1, .note-content h2, .note-content h3, .note-content h4 { break-after: avoid; page-break-after: avoid; color: #000; }
  .note-content pre { white-space: pre-wrap; border-color: #bbb; background: #f5f5f5; color: #000; }
  .note-content th { background: #eee; }
  .note-content th, .note-content td { border-color: #888; }
  .note-content .table-wrap { overflow: visible; }
  .note-content ul.np-checklist > li::before { border-color: #333; background: #fff; }
  .note-content ul.np-checklist > li[data-checked="true"]::before { background: #333; border-color: #333; }
  .note-content ul.np-checklist > li[data-checked="true"]::after { border-color: #fff; }
}