, so
this has no effect on guides that don't define it. */
.modal-body mark,
.topic-print-details mark {
background: #fff59d;
color: inherit;
padding: 0.05em 0.15em;
border-radius: 2px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
/* Browsers omit background colors when printing unless told otherwise
(the "Background graphics" print option defaults off), which would
silently turn every highlight invisible on paper/PDF. Forces it on so
the highlight survives printing regardless of that setting. */
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
/* Additional Details is normally read via the modal (see .topic-links); this
duplicate copy exists purely so the print stylesheet can include full
details by default instead of just the summary -- see @media print. */
.topic-print-details {
display: none;
}
.topic-print-details-heading {
font-size: 0.95rem;
margin: var(--space-3) 0 var(--space-2) 0;
}
body.modal-open {
overflow: hidden;
}
@keyframes modal-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modal-slide-up {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.panel-section {
margin-top: var(--space-3);
}
.panel-section h3 {
font-size: 0.95rem;
margin: 0 0 var(--space-2) 0;
}
.code-block {
margin: var(--space-2) 0 0 0;
background: var(--color-code-bg);
color: var(--color-code-text);
padding: var(--space-3);
border-radius: 6px;
overflow-x: auto;
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.55;
}
/* Reset the global inline `code` styling (background/padding meant for
prose like topics.json) so it doesn't fight the block's
own background -- otherwise each wrapped line gets its own highlight box. */
.code-block code {
background: none;
padding: 0;
border-radius: 0;
font-size: inherit;
}
.code-caption {
font-size: 0.8rem;
color: var(--color-text-muted);
margin: var(--space-2) 0 0 0;
}
.panel-images {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.panel-images figure {
margin: 0;
flex: 1 1 240px;
}
.panel-images img {
width: 100%;
height: auto;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-bg);
display: block;
}
.panel-images figcaption {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-top: var(--space-1);
}
.panel-references {
margin: 0;
padding-left: 1.2rem;
}
.panel-references li {
margin-bottom: var(--space-1);
}
/* --------------------------------- Footer --------------------------------- */
.page-footer {
max-width: var(--content-max-width);
margin: 0 auto;
padding: var(--space-4) var(--space-3) var(--space-6);
color: var(--color-text-muted);
font-size: 0.9rem;
border-top: 1px solid var(--color-border);
}
/* --------------------------------- Utility --------------------------------- */
.hidden {
display: none !important;
}
/* Keeps an element in the accessibility tree (screen readers, labels) while
removing it from visual layout entirely -- used for the "Search" /
"Category" toolbar labels, whose text is redundant once the input has a
placeholder / the select's purpose is obvious, but whose