/* Brand colors, matching the app's theme (client/src/misc/theme.ts). */
:root > * {
    --md-primary-fg-color: #00897b;
    --md-primary-fg-color--light: #4db6ac;
    --md-primary-fg-color--dark: #00695c;
    --md-accent-fg-color: #7b0089;
    --md-accent-fg-color--transparent: #7b00891a;
}

/* Headings: Material draws H1 faint and light and H4 at body size, which flattens the hierarchy. */
.md-typeset h1 {
    color: var(--md-default-fg-color);
    font-weight: 700;
}

.md-typeset h2,
.md-typeset h3 {
    font-weight: 600;
}

.md-typeset h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 1.6em;
}

/* Callouts at body size, so tips and warnings aren't the smallest text on the page. */
.md-typeset .admonition,
.md-typeset details {
    font-size: 0.8rem;
}

/* Heading spacing separates sections; the --- rules between them only add noise. */
.md-typeset hr {
    display: none;
}

/* Screenshots: framed, centered and on their own line, so a caption written on the next line starts below. */
.md-typeset img {
    display: block;
}

.md-typeset p img {
    margin: 0 auto;
    max-width: 100%;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.md-typeset img.medium {
    max-width: min(100%, 480px);
}

.md-typeset img.small {
    max-width: min(100%, 320px);
}

/* Variants of one thing, shown side by side. Wraps to a column on narrow screens. */
.md-typeset .figure-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}

.md-typeset .figure-row > p {
    flex: 1 1 180px;
    max-width: 280px;
    margin: 0;
}

/* The caption is the text that shares the image's paragraph. */
.md-typeset p:has(img) {
    text-align: center;
    font-size: 0.7rem;
    color: var(--md-default-fg-color--light);
}

.md-typeset p:has(img) strong {
    font-weight: 500;
    color: inherit;
}