/* =============================================================================
   Module: disclaimer  (modules/disclaimer.php)
   -----------------------------------------------------------------------------
   The last thing on a medical content page and the quietest: legal small print
   set in the muted text colour, above the footer.

   The sources are a list in the markup and a run of text on screen. They are
   references, so they belong in a <ul> - but a bulleted column of five
   guideline numbers would read as a section of the page, which is exactly what
   they are not. The markers come off and a middot separates them instead.

   WIDTH is the slim container and nothing narrower: the module sets it in the
   markup, and every block inside runs the full width of it. There is no
   --measure here on purpose. .prose caps a line at 68ch because running text
   at reading size gets hard to track past that, but this text is two sizes
   down - 68ch of it would be half again as long a line as the body copy above,
   which is the wrong way round. The container is the measure.
   ============================================================================= */

.disclaimer {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);

    /* Ranged left inside a centred column - the block is centred on the page,
       the words are not centred in the block. */
    text-align: start;
}

.disclaimer__title,
.disclaimer__label {
    margin: 0;
    color: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.disclaimer__text {
    margin-block: var(--space-2xs) 0;
    line-height: var(--line-height-base);
}

.disclaimer__lead {
    font-weight: var(--font-weight-semibold);
}

.disclaimer__label {
    margin-block-start: var(--space-md);
    text-transform: none;
    letter-spacing: var(--letter-spacing-base);
}

/* Two classes: base/reset.css strips the padding off every ul[class] but leaves
   the display alone, and this one has to flow. */
.disclaimer .disclaimer__sources {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-2xs);
    margin-block-start: var(--space-2xs);
    line-height: var(--line-height-base);
}

/* The separator is a pseudo-element and not a character in the content, so it
   is never read out and never copied with the text. */
.disclaimer__source + .disclaimer__source::before {
    content: '·';
    margin-inline-end: var(--space-2xs);
}