/**
 * dardanialabs-richtext.css — the mechanics for markup built by
 * dardanialabs-richtext.js. Load it wherever that module renders:
 *
 *   <link rel="stylesheet" href="…/src/dardanialabs-richtext.css?v=1.14.0">
 *
 * The split is deliberate. What lives here is the part that is right on every
 * site and wrong to re-decide per tenant — where a marker sits, how a wrapped
 * line hangs, how much air separates two items. What a tenant owns is colour
 * and rhythm, and that arrives through the --dardanialabs-rt-* custom
 * properties below; each is read at its point of use with its default inline,
 * so a rule still works when nothing has been set anywhere.
 *
 *   --dardanialabs-rt-measure       max line length of a block   (68ch)
 *   --dardanialabs-rt-line-height   leading inside a block       (1.7)
 *   --dardanialabs-rt-block-gap     space between two blocks     (0.85em)
 *   --dardanialabs-rt-item-gap      space between two items      (0.4em)
 *   --dardanialabs-rt-indent        width of the marker gutter   (1.35em)
 *   --dardanialabs-rt-bullet        <ul> marker shape            (disc)
 *   --dardanialabs-rt-number        <ol> marker shape            (decimal)
 *   --dardanialabs-rt-marker-color  marker colour                (currentColor)
 *   --dardanialabs-rt-marker-size   marker size                  (1em)
 *   --dardanialabs-rt-link-color    link colour                  (currentColor)
 *   --dardanialabs-rt-h1-size       size of a "#" heading        (1.25em)
 *   --dardanialabs-rt-h2-size       size of a "##" heading       (1.08em)
 *   --dardanialabs-rt-h-weight      weight of both               (600)
 *   --dardanialabs-rt-h-color       colour of both               (currentColor)
 *
 * Nothing here sets a font, a text colour or a background: the block inherits
 * the surface it was dropped into, so it looks native on every tenant.
 */

.dl-rt-p,
.dl-rt-ul,
.dl-rt-ol {
	/* A measure, not a width — a description that runs the full width of a wide
	   card is physically hard to read back to the start of the next line. */
	max-width: var(--dardanialabs-rt-measure, 68ch);
	line-height: var(--dardanialabs-rt-line-height, 1.7);
}

/* Blocks own the space BETWEEN them and never the space around the outside:
   the container's own padding decides the outer edge, and a leading or
   trailing margin here would fight it. */
.dl-rt-p,
.dl-rt-ul,
.dl-rt-ol {
	margin: 0;
}

.dl-rt-p + .dl-rt-p,
.dl-rt-p + .dl-rt-ul,
.dl-rt-p + .dl-rt-ol,
.dl-rt-ul + .dl-rt-p,
.dl-rt-ol + .dl-rt-p,
.dl-rt-ul + .dl-rt-ul,
.dl-rt-ul + .dl-rt-ol,
.dl-rt-ol + .dl-rt-ul,
.dl-rt-ol + .dl-rt-ol {
	margin-top: var(--dardanialabs-rt-block-gap, 0.85em);
}

.dl-rt-ul,
.dl-rt-ol {
	/* "outside", never "inside". Outside puts the marker in a gutter of its own,
	   so the second line of a long item starts under the FIRST CHARACTER of the
	   first line. Inside reflows the wrapped text back under the bullet and the
	   left edge of the item disintegrates — which is the whole reason a real
	   list beats hand-typed "• " bullets. */
	list-style-position: outside;
	padding-inline-start: var(--dardanialabs-rt-indent, 1.35em);
	/* A list cannot be centred. Outside markers are placed relative to the
	   item's start edge, so centring gives every line a different left edge and
	   leaves the markers stranded. Prose may still be centred by the tenant;
	   a list may not. */
	text-align: start;
}

.dl-rt-ul {
	list-style-type: var(--dardanialabs-rt-bullet, disc);
}

.dl-rt-ol {
	list-style-type: var(--dardanialabs-rt-number, decimal);
}

/* Rhythm goes between items only, so a one-item list is not taller than it
   needs to be and a list never adds space above its own first line. */
.dl-rt-li + .dl-rt-li {
	margin-top: var(--dardanialabs-rt-item-gap, 0.4em);
}

.dl-rt-li::marker {
	color: var(--dardanialabs-rt-marker-color, currentColor);
	font-size: var(--dardanialabs-rt-marker-size, 1em);
}

.dl-rt-link {
	color: var(--dardanialabs-rt-link-color, currentColor);
	/* These links always leave the site, so they stay visibly links. */
	text-underline-offset: 0.15em;
}

/* Headings are sized in em, never in px: a heading is a STEP UP FROM ITS
   SURROUNDINGS, so the same text stays in proportion in a small card and in a
   wide section without either one being retuned. A fixed pixel size is what
   makes tenant-entered text look pasted in from somewhere else. */
.dl-rt-h {
	margin: 0;
	max-width: var(--dardanialabs-rt-measure, 68ch);
	line-height: 1.3;
	font-weight: var(--dardanialabs-rt-h-weight, 600);
	color: var(--dardanialabs-rt-h-color, currentColor);
	/* The font itself still comes from the surface, so a heading in a card set
	   in the tenant's display face is set in that face too. */
	text-wrap: balance;
}

.dl-rt-h1 {
	font-size: var(--dardanialabs-rt-h1-size, 1.25em);
}

.dl-rt-h2 {
	font-size: var(--dardanialabs-rt-h2-size, 1.08em);
}

/* A heading belongs to what follows it, so it sits closer to the block below
   than to the block above — the gap above is the full block gap, the gap below
   is roughly a third of it. Without this a heading floats between two blocks
   and stops reading as a label for either. */
.dl-rt-p + .dl-rt-h,
.dl-rt-ul + .dl-rt-h,
.dl-rt-ol + .dl-rt-h,
.dl-rt-h + .dl-rt-h {
	margin-top: var(--dardanialabs-rt-block-gap, 0.85em);
}

.dl-rt-h + .dl-rt-p,
.dl-rt-h + .dl-rt-ul,
.dl-rt-h + .dl-rt-ol {
	margin-top: calc(var(--dardanialabs-rt-block-gap, 0.85em) * 0.35);
}