s that CSS hides outright, and a
display:none figure never intersects the viewport — so loading="lazy"
fetches only the active language's posters. */
.doc-demo { margin: 16px 0 18px; }
.doc-demo__frame {
position: relative; display: block; width: 100%; padding: 0;
background: var(--bg-soft); color: inherit; cursor: pointer;
border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow);
}
.doc-demo__frame:hover { border-color: var(--navy); }
.doc-demo__frame:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.doc-demo__img { display: block; width: 100%; height: auto; }
/* A dark scrim in both themes: --navy inverts to a light blue in dark mode,
which would leave the white icon almost unreadable. */
.doc-demo__play {
position: absolute; inset: 0; margin: auto;
width: 64px; height: 64px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(15, 23, 42, .78); color: #fff;
transition: opacity .12s ease, transform .12s ease, background .12s ease;
}
.doc-demo__play .material-symbols-outlined { font-size: 36px; vertical-align: 0; }
.doc-demo__frame:hover .doc-demo__play { background: rgba(15, 23, 42, .92); transform: scale(1.06); }
/* While playing, the pause badge stays out of the way until you reach for it. */
.doc-demo__frame[data-playing] .doc-demo__play { opacity: 0; }
.doc-demo__frame[data-playing]:hover .doc-demo__play,
.doc-demo__frame[data-playing]:focus-visible .doc-demo__play { opacity: 1; }
.doc-demo figcaption {
margin-top: 8px; font-size: 13px; color: var(--muted); text-align: start;
}
/* Print */
@media print {
body { background: #fff; color: #000; }
.doc-topbar, .doc-toc, .doc-toc-mobile, .doc-backlink, .doc-langgroup, .doc-iconbtn { display: none !important; }
.doc-shell { display: block; padding: 0; max-width: 100%; }
section.doc-section { page-break-inside: avoid; box-shadow: none; border-color: #ccc; }
.doc-hero { background: #003355 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Figures print whatever frame is loaded — the poster, unless the reader
played the clip. The play badge is an on-screen affordance only. */
.doc-demo { page-break-inside: avoid; }
.doc-demo__play { display: none !important; }
.doc-demo__frame { box-shadow: none; border-color: #ccc; }
}
/* Responsive */
@media (max-width: 980px) {
.doc-shell { grid-template-columns: 1fr; gap: 0; padding: 16px; }
.doc-toc { display: none; }
.doc-toc-mobile { display: block; }
.doc-hero { padding: 22px 20px; }
.doc-hero h1 { font-size: 22px; }
section.doc-section { padding: 20px 18px; }
.doc-topbar__inner { padding: 8px 14px; gap: 8px; }
.doc-brand__subtitle { display: none; }
.doc-backlink span:not(.material-symbols-outlined) { display: none; }
}
@media (max-width: 480px) {
.doc-langgroup button { padding: 5px 10px; font-size: 12px; }
}
/* Wide reference tables become stacked cards rather than overflowing the
section and giving the whole page a horizontal scrollbar. Opt-in with
.doc-table--stack, and label every cell after the first with data-th.
No language plumbing: the EN and AR bodies are separate
s, so the
Arabic table simply carries Arabic in its own data-th. */
@media (max-width: 640px) {
.doc-table--stack thead { display: none; }
.doc-table--stack tr {
display: block; background: var(--bg-soft);
border: 1px solid var(--line); border-radius: var(--radius-sm);
padding: 8px 12px; margin-bottom: 10px;
}
.doc-table--stack td { display: block; border-bottom: 0; padding: 4px 0; }
.doc-table--stack td::before {
content: attr(data-th); display: block;
font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); font-weight: 600;
}
.doc-table--stack td:first-child { font-size: 15px; font-weight: 600; }
.doc-table--stack td:first-child::before { display: none; }
}
/* A4 is ~794 CSS px so the query above should not fire when printing, but
that width is not guaranteed — restore a real table explicitly. */
@media print {
.doc-table--stack thead { display: table-header-group; }
.doc-table--stack tr { display: table-row; background: none; border: 0; padding: 0; }
.doc-table--stack td { display: table-cell; }
.doc-table--stack td::before { display: none; }
}