/* Links and backlinks (B4). Colors and fonts come from style.css. */

/* The [[ list, under the caret. */
.linker {
  position: absolute; z-index: 10;
  width: 280px; max-width: calc(100% - 8px); max-height: 280px; overflow-y: auto;
  list-style: none; margin: 0; padding: 4px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}
.linker-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.linker-item.on, .linker-item:hover { background: var(--accent-soft); }
.linker-none { padding: 8px 10px; color: var(--soft); font-size: 15px; }

/* [[links]] in Read. */
.wikilink { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wikilink.missing { color: var(--soft); font-weight: 400; text-decoration-style: dotted; }

/* "Linked from", at the bottom of every page. */
.linked-from { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.linked-from h2 { margin: 0 0 8px; color: var(--soft); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.linked-from .list { overflow: visible; }
.linked-from .empty { color: var(--soft); font-size: 15px; margin: 0; }
.backlink {
  display: block; padding: 10px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none;
}
.backlink:hover { background: var(--card); }
.backlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.backlink-reason { display: block; margin-top: 4px; color: var(--ink); font-size: 15px; line-height: 1.5; opacity: .85; }