/* Rich text in translations (protected/components/RichText.php → render()): images, links, translator's notes.
 * Registered by RichText::registerAssets() on any page that prints a formatted version (reader, translate page, …).
 * Theme tokens only — the reader themes remap them inside .nb-reader, so everything follows paper/sepia/night too. */

/* images: block, centred, never wider than the text column; click opens the full-size file */
.nb-rt-imglink {
	display: block; width: fit-content; max-width: 100%; margin: .75em auto;
	line-height: 0; text-decoration: none !important; cursor: zoom-in; border-radius: var(--radius);
}
.nb-rt-img {
	display: inline-block; max-width: 100%; height: auto; vertical-align: middle;
	border-radius: var(--radius); background: var(--muted);
}
.nb-rt-imglink .nb-rt-img { box-shadow: 0 0 0 1px var(--border); transition: opacity .15s, box-shadow .15s; }
.nb-rt-imglink:hover .nb-rt-img { box-shadow: 0 0 0 1px var(--input), var(--elev-2); }
.nb-rt-imglink:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
/* the image link is a block: the line break typed right after the image would add an empty line */
.nb-rt-imglink + br { display: none; }

/* links inside a version */
.nb-rt a[href]:not(.nb-rt-imglink), p[data-p] a[href]:not(.nb-rt-imglink) {
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
	text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
}

/* translator's note: dotted underline + a small marker; the text of the note is shown by richtext.js */
.nb-tn {
	position: relative;
	text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: .22em;
	text-decoration-color: color-mix(in oklab, var(--rating-text) 80%, currentColor);
	cursor: help; border-radius: var(--radius-sm);
	-webkit-tap-highlight-color: transparent;
}
/* the marker is a text glyph (not an inline-block) so it never wraps onto a line of its own */
.nb-tn::after {
	content: "\2022"; margin-left: .06em; font-size: .78em; line-height: 0; vertical-align: .42em;
	color: var(--rating-text); font-family: var(--font-sans);
}
.nb-tn:hover, .nb-tn.is-open { background: color-mix(in oklab, var(--rating) 16%, transparent); }
.nb-tn:focus { outline: none; }
.nb-tn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; background: color-mix(in oklab, var(--rating) 16%, transparent); }

/* without JS: a plain CSS tooltip */
html:not(.nb-rt-js) .nb-tn:hover::before, html:not(.nb-rt-js) .nb-tn:focus::before {
	content: attr(data-note); position: absolute; left: 0; top: calc(100% + 6px); z-index: 50;
	width: max-content; max-width: min(320px, 80vw); padding: 8px 10px; white-space: normal;
	background: var(--popover); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: var(--elev-3); font: 400 13px/1.5 var(--font-sans); text-indent: 0; text-align: left; letter-spacing: 0;
}

/* the note popover (richtext.js) */
.nb-tn-pop {
	position: fixed; z-index: 2600; left: 0; top: 0;
	width: max-content; max-width: min(340px, calc(100vw - 24px)); box-sizing: border-box;
	padding: 10px 12px 11px; border-radius: var(--radius);
	background: var(--popover); color: var(--foreground); border: 1px solid var(--border); box-shadow: var(--elev-3);
	font: 400 13.5px/1.55 var(--font-sans); letter-spacing: -0.005em; text-align: left; text-indent: 0;
	overflow-wrap: anywhere; white-space: normal;
	animation: nb-tn-in .12s ease-out;
}
.nb-tn-pop[hidden] { display: none; }
.nb-tn-pop-label {
	display: flex; align-items: center; gap: 6px; margin: 0 0 4px;
	font: 650 10.5px/1.2 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted-foreground);
}
.nb-tn-pop-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rating-text); }
.nb-tn-pop-text { margin: 0; }
@keyframes nb-tn-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nb-tn-pop { animation: none; } }

/* translate page (views/chapter/index-1.php): versions show images as thumbnails */
#Tr td.t .nb-rt .nb-rt-imglink, .translator .nb-rt .nb-rt-imglink { margin: .45em 0; }
#Tr td.t .nb-rt .nb-rt-img, .translator .nb-rt .nb-rt-img { max-height: 320px; width: auto; }
.translator .nb-rt .nb-tn::after { vertical-align: .38em; }