/*
 * Rendered lore bodies — the reading side of arcana-editor.css.
 *
 * Deliberately a near-copy of the `.ae-content` rules rather than a shared base:
 * what a writer sees in the editor and what a reader sees on the page should
 * match, and the two are produced by completely different code (Tiptap's schema
 * one side, commonmark's renderer the other). Keeping them side by side makes a
 * drift visible in a diff. Change one, look at the other.
 *
 * Registered through FilamentAsset (see AppServiceProvider), same as the editor.
 * Plain CSS: it is served outside the Tailwind build.
 */

.lore-body > * + * {
    margin-top: 0.6em;
}

.lore-body h1 { font-size: 1.5em; font-weight: 700; line-height: 1.25; }
.lore-body h2 { font-size: 1.3em; font-weight: 700; line-height: 1.3; }
.lore-body h3 { font-size: 1.12em; font-weight: 600; }
.lore-body h4, .lore-body h5, .lore-body h6 { font-weight: 600; }

.lore-body ul { list-style: disc; padding-left: 1.4em; }
.lore-body ol { list-style: decimal; padding-left: 1.4em; }
.lore-body li > p { margin: 0; }

/*
 * Task lists. commonmark's TaskListExtension emits a bare disabled checkbox with
 * no wrapper class, where the editor uses `ul[data-type="taskList"]` — so this
 * has to select on the input, not on a class the server never writes.
 */
.lore-body li:has(> input[type='checkbox']) {
    list-style: none;
    margin-left: -1.4em;
}

.lore-body li > input[type='checkbox'] {
    margin-right: 0.5em;
}

.lore-body blockquote {
    border-left: 3px solid rgb(212 212 216);
    padding-left: 0.85em;
    color: rgb(82 82 91);
}

.lore-body pre {
    background: rgb(24 24 27);
    color: rgb(228 228 231);
    padding: 0.7em 0.9em;
    border-radius: 0.375rem;
    overflow-x: auto;
    font-size: 0.85em;
}

.lore-body pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.lore-body code {
    background: rgb(244 244 245);
    border-radius: 0.25rem;
    padding: 0.1em 0.3em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}

.lore-body a {
    color: rgb(67 56 202);
    text-decoration: underline;
}

.lore-body hr {
    border: 0;
    border-top: 1px solid rgb(212 212 216);
}

.lore-body img {
    max-width: 100%;
    border-radius: 0.375rem;
}

/* Tables are most of what a worldbuilding app holds — make them legible. */
.lore-body table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

.lore-body th,
.lore-body td {
    border: 1px solid rgb(212 212 216);
    padding: 0.35em 0.55em;
    vertical-align: top;
    text-align: left;
}

.lore-body th {
    background: rgb(244 244 245);
    font-weight: 600;
}

/* ------------------------------------------------------------ lore links -- */

/*
 * A resolved link is an ordinary link that happens to be violet, matching the
 * `.ae-lorelink` chip in the editor. A WANTED link is a span, not an anchor:
 * there is nowhere to send the reader until 03-lore/06 builds the wanted-pages
 * page, and dead hrefs teach people that links here do not work.
 */
.lore-body .lore-link {
    color: rgb(91 33 182);
    background: rgb(237 233 254);
    border-radius: 0.25rem;
    padding: 0 0.25em;
    text-decoration: none;
    box-decoration-break: clone;
}

.lore-body a.lore-link:hover {
    background: rgb(221 214 254);
}

.lore-body .lore-link--wanted {
    color: rgb(159 18 57);
    background: rgb(255 228 230);
    border-bottom: 1px dashed rgb(225 29 72);
    cursor: help;
}

/* ------------------------------------------------------------- dark mode -- */

.dark .lore-body { color: rgb(228 228 231); }
.dark .lore-body code { background: rgb(39 39 42); }
.dark .lore-body th { background: rgb(39 39 42); }
.dark .lore-body th, .dark .lore-body td { border-color: rgb(63 63 70); }
.dark .lore-body blockquote { border-left-color: rgb(63 63 70); color: rgb(161 161 170); }
.dark .lore-body hr { border-top-color: rgb(63 63 70); }
.dark .lore-body a { color: rgb(165 180 252); }
.dark .lore-body .lore-link { color: rgb(216 180 254); background: rgb(59 7 100); }
.dark .lore-body a.lore-link:hover { background: rgb(76 29 149); }
.dark .lore-body .lore-link--wanted { color: rgb(253 164 175); background: rgb(76 5 25); border-bottom-color: rgb(244 63 94); }

/* -------------------------------------------------------------- mentions -- */

/*
 * `@ava`, matching the `.ae-mention` chip in the editor. Rendered by
 * App\Support\Markdown\Mention\MentionRenderer, and only when the key actually
 * resolves to somebody in this Group — an unresolved `@midnight` is plain text,
 * because it is plain text.
 *
 * A span, not an anchor: there is no member profile page to send anyone to.
 *
 * The chip shows the KEY (`@ava`), never the display name. The display name is
 * in the title attribute. See MentionRenderer for why all three surfaces agree
 * on this.
 */
.lore-body .mention {
    color: rgb(29 78 216);
    background: rgb(219 234 254);
    border-radius: 0.25rem;
    padding: 0 0.25em;
    box-decoration-break: clone;
    cursor: help;
}

.dark .lore-body .mention { color: rgb(191 219 254); background: rgb(30 58 138); }