/* Each card owns its accent. Descendant statements must never inherit a
 * parent's taxon colour or change the parent's border when hovered.
 */
:is(.embed, .page-root) {
    --embed-color: var(--thm-convention);
    --embed-border-color: transparent;
    --embed-bg: transparent;
    --embed-ring: transparent;
}

:is(.embed, .page-root)[data-taxon]:not([data-taxon=""]) {
    --embed-border-color: var(--embed-color);
    --embed-bg: var(--thm-bg);
    --embed-ring: var(--rule-color);
}

@supports (color: color-mix(in srgb, red, blue)) {
    :is(.embed, .page-root)[data-taxon]:not([data-taxon=""]) {
        --embed-bg: color-mix(in srgb, var(--embed-color) 4%, transparent);
        --embed-ring: color-mix(in srgb, var(--embed-color) 18%, transparent);
    }
}

:is(.embed, .page-root)[data-taxon="Definition"] { --embed-color: var(--thm-definition); }
:is(.embed, .page-root)[data-taxon="Theorem"] { --embed-color: var(--thm-theorem); }
:is(.embed, .page-root)[data-taxon="Lemma"] { --embed-color: var(--thm-lemma); }
:is(.embed, .page-root)[data-taxon="Corollary"] { --embed-color: var(--thm-corollary); }
:is(.embed, .page-root)[data-taxon="Example"] { --embed-color: var(--thm-example); }
:is(.embed, .page-root)[data-taxon="Convention"] { --embed-color: var(--thm-convention); }
:is(.embed, .page-root)[data-taxon="Note"] { --embed-color: var(--thm-remark); }
:is(.embed, .page-root)[data-taxon="Remark"] { --embed-color: var(--thm-philosophy); }

article .embed {
    --embed-gap: 0.8em;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: var(--embed-gap) 0;
    padding: 0.8em 1em;
    border-left: 3px solid var(--embed-border-color);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--embed-bg);
    box-shadow: inset 0 0 0 1px var(--embed-ring);
}

/* Opening a fold changes its content, never its outer padding or border. */
article section.block.embed > details,
article section.block.embed > details[open] {
    margin-bottom: 0;
}

article .embed > details > summary > header > .metadata {
    margin-top: 0.3em;
}

article .embed[data-taxon=""] + .embed[data-taxon=""]::before {
    content: "";
    position: absolute;
    top: calc(var(--embed-gap) / -2);
    left: 0;
    right: 0;
    height: 1px;
    background: var(--rule-color);
    pointer-events: none;
}

article .embed > details > summary {
    margin: -0.15em -0.3em 0;
    padding: 0.15em 0.3em 0.15em 1.2em;
    border-radius: var(--radius);
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1.55;
    color: var(--text-color);
    transition: background-color 0.15s ease-out;
}

article .embed > details[open] > summary {
    margin-bottom: 0.65em;
    padding-bottom: 0.45em;
    border-bottom: 1px solid var(--embed-ring);
    border-radius: var(--radius) var(--radius) 0 0;
}

article .block:not(.embed, .page-root) > details > summary {
    padding: 0.15em 0.3em;
    margin: -0.15em -0.3em 0.45em;
    border-radius: var(--radius);
    transition: background-color 0.15s ease-out;
}

@media (hover: hover) {
    article .embed > details > summary:hover,
    article .block:not(.embed, .page-root) > details > summary:hover {
        background-color: var(--hover-color-link);
    }
}

article :is(.embed, .page-root):hover:not(:has(.block:hover)) {
    border-left-color: var(--embed-border-color);
}

article .page-root[data-taxon]:not([data-taxon=""]) {
    padding: 1em 1.2em;
    border-left: 3px solid var(--embed-color);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--embed-bg);
    box-shadow: inset 0 0 0 1px var(--embed-ring);
}

article .embed[data-taxon="Remark"],
article .page-root[data-taxon="Remark"] {
    border-left-style: double;
    border-left-width: 4px;
}

.embed > details > summary > header > .taxon,
.page-root > details > summary > header > h1 > .taxon {
    color: var(--embed-color);
    font-weight: 600;
}

/* A numbered header reads "Theorem 2.1. Title"; an unnumbered one reads
 * "Theorem. Title". Empty taxons produce neither brackets nor punctuation.
 */
.embed > details > summary > header > .taxon:has(+ .heading-numbering:empty)::after {
    content: ".";
}

.embed > details > summary > header > .heading-numbering {
    color: var(--slug-color);
    font-weight: 400;
}

.embed:not([data-taxon=""]) > details > summary > header > .heading-numbering {
    color: var(--embed-color);
    font-weight: 600;
}

.embed > details > summary > header > .embed-title {
    font-weight: 500;
}

/* Small marginal chevron: a fold control, not part of the theorem label. */
.embed > details > summary::before {
    content: "";
    position: absolute;
    top: 0.7em;
    left: 0.25em;
    width: 0.3em;
    height: 0.3em;
    border-right: 1px solid var(--embed-color);
    border-bottom: 1px solid var(--embed-color);
    opacity: 0.75;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.embed > details[open] > summary::before {
    top: 0.6em;
    transform: rotate(45deg);
}

/* Like a bibliographic identifier, the independent-page link follows the
 * title inline. Long names wrap rather than taking over a floated column.
 */
.embed > details > summary .slug {
    margin-left: 0.55em;
    font-size: 0.7em;
    font-weight: 400;
    vertical-align: baseline;
}

.lazy-embed-placeholder,
.lazy-embed-tools {
    color: var(--slug-color);
    font-size: 0.85em;
    font-weight: 400;
}

.lazy-embed-placeholder button,
.lazy-embed-tools button {
    padding: 0.15em 0.45em;
    border: 1px solid var(--rule-color);
    border-radius: var(--radius);
    background: var(--background-color);
    color: var(--link-color);
    font: inherit;
    cursor: pointer;
}

.lazy-embed-placeholder button {
    margin-inline-end: 0.5em;
}

.lazy-embed-fallback {
    text-decoration: underline;
}

.statement-anchor,
.statement-anchor > p {
    margin: 0;
    padding: 0;
    height: 0;
    line-height: 0;
}

.embed > details > p:last-child {
    margin-bottom: 0.2em;
}

.embed:target,
.page-root:target {
    outline: 2px solid var(--target-color);
    outline-offset: 3px;
}

:is(.embed, .page-root, .heading-numbering, [data-reference-id]) {
    scroll-margin-top: calc(var(--bar-height, 0px) + 1rem);
}

.backlink {
    margin: 0.4em 0;
}

.chapter-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6em 1.2em;
    margin-top: 2em;
    padding-top: 0.8em;
    border-top: 1px solid var(--rule-color);
    font-size: 0.9em;
}

.chapter-nav .link {
    min-width: 0;
}

@media (max-width: 500px) {
    article .embed {
        padding: 0.65em 0.65em 0.65em 0.75em;
    }
    article .page-root[data-taxon]:not([data-taxon=""]) {
        padding: 0.8em;
    }
}

@media (prefers-reduced-motion: reduce) {
    article .embed > details > summary,
    article .block:not(.embed, .page-root) > details > summary,
    .embed > details > summary::before {
        transition: none;
    }
}

@media print {
    .lazy-embed-tools { display: none; }
    article .embed,
    article .page-root[data-taxon]:not([data-taxon=""]) {
        background: transparent;
        box-shadow: none;
    }
}