/* Wiki-link styles */
.wiki-link { color: #60a5fa; text-decoration: underline; }
.wiki-link:hover { color: #93bbfd; }
.wiki-link-dead { color: #f87171; text-decoration: underline; }
.wiki-link-dead:hover { color: #fca5a5; }

/* Jump-to highlight for wiki-link targets */
.wiki-link:target {
  background-color: rgba(250, 204, 21, 0.25);
  outline: 2px solid rgba(250, 204, 21, 0.5);
  outline-offset: 2px;
  border-radius: 2px;
  animation: target-fade 3s ease-out forwards;
}
@keyframes target-fade {
  0%, 70% { background-color: rgba(250, 204, 21, 0.25); outline-color: rgba(250, 204, 21, 0.5); }
  100% { background-color: transparent; outline-color: transparent; }
}
html { scroll-behavior: smooth; }
[id^="wl-"] { scroll-margin-top: 4rem; }

/* Note content typography (dark mode, zinc scheme) */
.note-content { overflow-x: auto; }
.note-content h1 { font-size: 1.5rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #fafafa; }
.note-content h2 { font-size: 1.25rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.5rem; color: #f4f4f5; }
.note-content h3 { font-size: 1.125rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.25rem; color: #e4e4e7; }
.note-content p { margin: 0.5rem 0; }
.note-content ul { list-style: disc; padding-left: 1.5rem; }
.note-content ol { list-style: decimal; padding-left: 1.5rem; }
.note-content li { margin: 0.25rem 0; }
.note-content blockquote { border-left: 3px solid #52525b; padding-left: 1rem; color: #a1a1aa; margin: 0.5rem 0; }
.note-content code { background: #3f3f46; padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-size: 0.875rem; color: #e4e4e7; }
.note-content pre { background: #18181b; color: #e4e4e7; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 0.5rem 0; border: 1px solid #27272a; }
.note-content pre code { background: none; padding: 0; }
.note-content a { color: #60a5fa; text-decoration: underline; }
.note-content hr { border-top: 1px solid #3f3f46; margin: 1rem 0; }
.note-content table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
.note-content th, .note-content td { border: 1px solid #3f3f46; padding: 0.5rem; text-align: left; }
.note-content th { background: #27272a; font-weight: 600; color: #e4e4e7; }

/* Obsidian-style callouts */
.note-content .callout {
  border-left: 3px solid var(--callout-color);
  background: var(--callout-bg);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
}
.note-content .callout-title {
  font-weight: 600;
  color: var(--callout-color);
  margin-bottom: 0.25rem;
}
.note-content .callout-body p { margin: 0.25rem 0; }
.note-content .callout-body ul, .note-content .callout-body ol { margin: 0.25rem 0; }

.callout-blue   { --callout-color: #60a5fa; --callout-bg: rgba(96,165,250,0.08); }
.callout-cyan   { --callout-color: #22d3ee; --callout-bg: rgba(34,211,238,0.08); }
.callout-green  { --callout-color: #4ade80; --callout-bg: rgba(74,222,128,0.08); }
.callout-yellow { --callout-color: #facc15; --callout-bg: rgba(250,204,21,0.08); }
.callout-orange { --callout-color: #fb923c; --callout-bg: rgba(251,146,60,0.08); }
.callout-red    { --callout-color: #f87171; --callout-bg: rgba(248,113,113,0.08); }
.callout-purple { --callout-color: #c084fc; --callout-bg: rgba(192,132,252,0.08); }
.callout-gray   { --callout-color: #a1a1aa; --callout-bg: rgba(161,161,170,0.08); }

/* Dataview tables */
.note-content .dataview-table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; }
.note-content .dataview-table th { background: #1e1e22; font-weight: 600; color: #c084fc; border: 1px solid #3f3f46; padding: 0.5rem 0.75rem; text-align: left; }
.note-content .dataview-table td { border: 1px solid #3f3f46; padding: 0.5rem 0.75rem; }
.note-content .dataview-table tr:hover { background: rgba(255,255,255,0.02); }
.note-content .dataview-error { background: rgba(248,113,113,0.08); border: 1px solid #7f1d1d; border-radius: 0.375rem; padding: 0.5rem 0.75rem; margin: 0.5rem 0; color: #fca5a5; }

/* Editor styles */
.editor-textarea {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  resize: vertical;
  min-height: 250px;
  tab-size: 2;
  line-height: 1.6;
}
.editor-preview {
  min-height: 250px;
}

@media (min-width: 768px) {
  .editor-textarea {
    min-height: 400px;
  }
  .editor-preview {
    min-height: 400px;
  }
}