chore: merge the site visual system

.github/workflows/deploy-site.yml

@@ -43,6 +43,7 @@ on:
       - "scripts/restore_large_files.py"
       - "scripts/safeparse.py"
       - "scripts/sect233r1.py"
+      - "scripts/sitediagrams.py"
       - "scripts/siteexports.py"
       - "scripts/siterender.py"
       - "scripts/sitesources.py"

docs_assets/extra.css

@@ -1,52 +1,230 @@
-/* RetroBIOS theme on top of mkdocs-material */
+/* RetroBIOS theme on top of mkdocs-material.
+
+   Classes the generator and the wiki pages can use:
+   .rb-lead            first paragraph under a page title
+   .rb-level-*         level label (start, setup, explore, reference, contribute)
+   .rb-page-header     logo or image beside the title block of an entity page
+   .rb-cards, .rb-card card grid without Material's list markup
+   .grid.cards         Material card grid, restyled here
+   .rb-card-logo       40 px logo tile inside a card
+   .rb-steps           ordered list drawn as numbered steps
+   .rb-terminal        wraps a code block that shows terminal output
+   .rb-cmd             wraps a command that must wrap instead of scrolling
+   code.rb-path        a folder path shown as a chip
+   .rb-figure          a generated diagram (scripts/sitediagrams.py)
+   .rb-bar             inline coverage bar, width from --v
+*/
 
 :root {
-  --rb-primary: #4a4e8a;
-  --rb-primary-light: #6366a0;
-  --rb-primary-dark: #363870;
+  --rb-primary: #3b3f7a;
+  --rb-primary-dark: #2b2e5c;
   --rb-accent: #b42318;
   --rb-link: #273c8f;
+  --rb-fg: rgba(0, 0, 0, 0.87);
   --rb-surface: #f5f6fa;
   --rb-border: #e0e3eb;
+  --rb-border-strong: #b8bdcc;
   --rb-text-secondary: #546e7a;
+  --rb-ok-fg: #1b5e20;
+  --rb-ok-bg: #e8f5e9;
+  --rb-warn-fg: #a33f00;
+  --rb-warn-bg: #fff3e0;
+  --rb-err-fg: #b71c1c;
+  --rb-err-bg: #ffebee;
+  --rb-info-fg: #0d47a1;
+  --rb-info-bg: #e3f2fd;
+  --rb-muted-fg: #455a64;
+  --rb-muted-bg: #eceff1;
+  --rb-level-start: #1b5e20;
+  --rb-level-setup: #0d47a1;
+  --rb-level-explore: #6a1b9a;
+  --rb-level-reference: #455a64;
+  --rb-level-contribute: #a33f00;
+  --rb-terminal-bg: #1b1d2e;
+  --rb-terminal-fg: #e6e6f0;
+  --rb-terminal-label: #9aa0c3;
+  --rb-diagram-fill: #f5f6fa;
+  --rb-diagram-stroke: #8c92ac;
+  --rb-diagram-accent: #3b3f7a;
+  --md-code-font: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
 }
 
 [data-md-color-scheme="slate"] {
-  --rb-surface: #1e1e2e;
-  --rb-border: #313244;
-  --rb-text-secondary: #a6adc8;
   --rb-accent: #ff9a8f;
   --rb-link: #aebcff;
+  --rb-fg: #e3e4ee;
+  --rb-surface: #252838;
+  --rb-border: #3a3d52;
+  --rb-border-strong: #5a5e7a;
+  --rb-text-secondary: #a6adc8;
+  --rb-ok-fg: #a5d6a7;
+  --rb-ok-bg: #1b3a1f;
+  --rb-warn-fg: #ffcc80;
+  --rb-warn-bg: #7a2e00;
+  --rb-err-fg: #ef9a9a;
+  --rb-err-bg: #7f1414;
+  --rb-info-fg: #90caf9;
+  --rb-info-bg: #0d2a55;
+  --rb-muted-fg: #cfd8dc;
+  --rb-muted-bg: #37474f;
+  --rb-level-start: #a5d6a7;
+  --rb-level-setup: #90caf9;
+  --rb-level-explore: #ce93d8;
+  --rb-level-reference: #cfd8dc;
+  --rb-level-contribute: #ffcc80;
+  --rb-terminal-bg: #12131c;
+  --rb-diagram-fill: #252838;
+  --rb-diagram-stroke: #7c82a3;
+  --rb-diagram-accent: #aebcff;
 }
 
+/* Colour roles. The header keeps the brand indigo in both schemes: the
+   lighter indigo it used in dark mode left the tab labels at 3.5:1. */
 [data-md-color-scheme="default"] {
   --md-primary-fg-color: var(--rb-primary);
-  --md-primary-fg-color--light: var(--rb-primary-light);
+  --md-primary-fg-color--light: #4a4e8a;
   --md-primary-fg-color--dark: var(--rb-primary-dark);
   --md-accent-fg-color: var(--rb-accent);
+  --md-typeset-a-color: var(--rb-link);
+  /* Comments and punctuation sat at 4.47:1 on the code background. */
+  --md-code-hl-comment-color: #5c5c5c;
+  --md-code-hl-generic-color: #5c5c5c;
+  --md-code-hl-variable-color: #5c5c5c;
+  --md-code-hl-operator-color: #5c5c5c;
+  --md-code-hl-punctuation-color: #5c5c5c;
 }
 
 [data-md-color-scheme="slate"] {
-  --md-primary-fg-color: var(--rb-primary-light);
+  --md-primary-fg-color: var(--rb-primary-dark);
+  --md-primary-fg-color--light: var(--rb-primary);
+  --md-primary-fg-color--dark: #1f2147;
   --md-accent-fg-color: var(--rb-accent);
+  --md-accent-bg-color: #1e2129;
+  --md-typeset-a-color: var(--rb-link);
+  --md-code-hl-constant-color: #b39ddb;
+}
+
+/* Type scale: the page title is the strongest heading on the page. */
+.md-typeset h1 {
+  color: var(--md-default-fg-color);
+  font-size: 2em;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+  margin: 0 0 0.9em;
+}
+
+.md-typeset h2 {
+  font-size: 1.45em;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  margin-top: 2em;
+}
+
+.md-typeset h3 {
+  font-size: 1.15em;
+  font-weight: 600;
+}
+
+.md-typeset h4 {
+  font-weight: 600;
+}
+
+.md-typeset .rb-lead {
+  font-size: 1.05em;
+  line-height: 1.55;
+  max-width: 44em;
+}
+
+/* Level label under a page title */
+.rb-level {
+  display: inline-block;
+  margin: 0 0 0.8rem;
+  padding: 0.05rem 0.45rem;
+  border: 1px solid currentColor;
+  border-radius: 2px;
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  line-height: 1.6;
+  color: var(--rb-level-reference);
+}
+
+.rb-level-start { color: var(--rb-level-start); }
+.rb-level-setup { color: var(--rb-level-setup); }
+.rb-level-explore { color: var(--rb-level-explore); }
+.rb-level-reference { color: var(--rb-level-reference); }
+.rb-level-contribute { color: var(--rb-level-contribute); }
+
+/* Header block of platform, system and emulator pages */
+.rb-page-header {
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  gap: 0.4rem 1rem;
+  align-items: center;
+  margin: 0 0 1.2rem;
+}
+
+.rb-page-header > :first-child img,
+.rb-page-header > img {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+}
+
+.md-typeset .rb-page-header h1 {
+  margin: 0;
+}
+
+.rb-page-header p {
+  margin: 0.2rem 0 0;
+}
+
+/* A page that names its logo next to the title floats it right; the logo
+   keeps its own box instead of shifting the counters below. */
+.md-typeset img[align="right"] {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+  margin: 0 0 0.6rem 1rem;
+  padding: 4px;
+  border: 1px solid var(--rb-border);
+  border-radius: 4px;
+  background: #fff;
+}
+
+/* Logos are drawn for a light background: they keep one in dark mode. */
+.md-typeset img[src*="assets/logos/"] {
+  padding: 2px;
+  border-radius: 2px;
+  background: #fff;
 }
 
 /* Headline figures, read as one line of numbers */
 .rb-stats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem 2rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+  gap: 0.6rem 1.5rem;
   margin: 1rem 0 1.5rem;
+  padding: 0.8rem 1rem;
+  border: 1px solid var(--rb-border);
+  border-radius: 4px;
+  background: var(--rb-surface);
+}
+
+.md-typeset .rb-stat p {
+  margin: 0;
 }
 
 .rb-stat .rb-stat-value {
   font-size: 1.25rem;
   font-weight: 700;
   display: block;
+  font-variant-numeric: tabular-nums;
 }
 
 .rb-stat .rb-stat-label {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: var(--rb-text-secondary);
   display: block;
 }
@@ -61,22 +239,38 @@
   white-space: nowrap;
 }
 
-.rb-badge-success { background: #e8f5e9; color: #1b5e20; }
-.rb-badge-warning { background: #fff3e0; color: #a33f00; }
-.rb-badge-danger { background: #ffebee; color: #b71c1c; }
-.rb-badge-info { background: #e3f2fd; color: #0d47a1; }
-.rb-badge-muted { background: #eceff1; color: #455a64; }
+.rb-badge-success { background: var(--rb-ok-bg); color: var(--rb-ok-fg); }
+.rb-badge-warning { background: var(--rb-warn-bg); color: var(--rb-warn-fg); }
+.rb-badge-danger { background: var(--rb-err-bg); color: var(--rb-err-fg); }
+.rb-badge-info { background: var(--rb-info-bg); color: var(--rb-info-fg); }
+.rb-badge-muted { background: var(--rb-muted-bg); color: var(--rb-muted-fg); }
 
-[data-md-color-scheme="slate"] .rb-badge-success { background: #1b5e20; color: #a5d6a7; }
-[data-md-color-scheme="slate"] .rb-badge-warning { background: #e65100; color: #ffcc80; }
-[data-md-color-scheme="slate"] .rb-badge-danger { background: #b71c1c; color: #ef9a9a; }
-[data-md-color-scheme="slate"] .rb-badge-info { background: #0d47a1; color: #90caf9; }
-[data-md-color-scheme="slate"] .rb-badge-muted { background: #37474f; color: #b0bec5; }
+/* A link inside a badge keeps the badge's tested colour pair. */
+.md-typeset .rb-badge a:not(.md-button),
+.md-typeset a.rb-badge {
+  color: inherit;
+}
+
+/* Inline code inside a link reads as a link in both schemes. */
+.md-typeset a code {
+  color: var(--rb-link);
+}
+
+/* Tables */
+.md-typeset table:not([class]) {
+  font-variant-numeric: tabular-nums;
+}
 
 .md-typeset table:not([class]) th {
   position: sticky;
   top: 0;
   z-index: 1;
+  font-weight: 600;
+}
+
+.md-typeset table:not([class]) th,
+.md-typeset table:not([class]) td {
+  padding: 0.55em 0.9em;
 }
 
 .md-typeset__scrollwrap {
@@ -141,20 +335,27 @@
 
 /* Hashes are printed whole so the search finds them, and wrap on phones */
 .rb-hash {
-  font-family: monospace;
+  font-family: var(--md-code-font);
   font-size: 0.78rem;
   color: var(--rb-text-secondary);
   overflow-wrap: anywhere;
 }
 
+/* Key and value cards: the header row is empty, so it is not drawn and
+   not announced. */
 .rb-meta-card table {
   margin: 1rem 0 !important;
 }
 
-.rb-meta-card th {
+.rb-meta-card thead,
+.md-typeset table thead:not(:has(th:not(:empty))) {
   display: none;
 }
 
+.rb-meta-card td {
+  overflow-wrap: anywhere;
+}
+
 .rb-meta-card td:first-child {
   font-weight: 600;
   color: var(--rb-text-secondary);
@@ -168,6 +369,24 @@
   padding: 0.55em 0.8em;
 }
 
+/* Buttons. The dark scheme draws them in the link colour: the header indigo
+   would sit at 3:1 on the page. */
+[data-md-color-scheme="slate"] .md-typeset .md-button {
+  color: var(--rb-link);
+  border-color: var(--rb-link);
+}
+
+[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
+  background-color: var(--rb-link);
+  color: #1e2129;
+}
+
+[data-md-color-scheme="slate"] .md-typeset .md-button:is(:hover, :focus) {
+  background-color: var(--rb-accent);
+  border-color: var(--rb-accent);
+  color: #1e2129;
+}
+
 .md-typeset a:not(.md-button):not(.headerlink):not(.rb-badge) {
   color: var(--rb-link);
   text-decoration: underline;
@@ -179,7 +398,7 @@
   text-decoration-thickness: 0.14em;
 }
 
-:where(a, button, input, select, textarea, [tabindex]):focus-visible {
+:where(a, button, input, select, textarea, label, [tabindex]):focus-visible {
   outline: 3px solid var(--rb-accent);
   outline-offset: 3px;
 }
@@ -240,6 +459,316 @@
   outline-offset: 2px;
 }
 
+/* Admonitions: one meaning per colour.
+   blue   note, info, abstract, example, question, quote: background
+   teal   tip: a shortcut
+   green  success: what it looks like when it worked
+   orange warning: a risk of losing data or using the wrong file
+   red    danger, failure, bug: something is broken or refused */
+.md-typeset :is(.admonition, details):is(.info, .abstract, .example, .question, .quote, .note) {
+  border-color: #448aff;
+}
+
+.md-typeset :is(.info, .abstract, .example, .question, .quote, .note) > :is(.admonition-title, summary) {
+  background-color: rgba(68, 138, 255, 0.1);
+}
+
+.md-typeset :is(.info, .abstract, .example, .question, .quote, .note) > :is(.admonition-title, summary)::before {
+  background-color: #448aff;
+  -webkit-mask-image: var(--md-admonition-icon--info);
+  mask-image: var(--md-admonition-icon--info);
+}
+
+.md-typeset :is(.admonition, details).tip {
+  border-color: #00897b;
+}
+
+.md-typeset .tip > :is(.admonition-title, summary) {
+  background-color: rgba(0, 137, 123, 0.1);
+}
+
+.md-typeset .tip > :is(.admonition-title, summary)::before {
+  background-color: #00897b;
+  -webkit-mask-image: var(--rb-icon-shortcut);
+  mask-image: var(--rb-icon-shortcut);
+}
+
+.md-typeset :is(.admonition, details):is(.danger, .failure, .bug, .error) {
+  border-color: #d32f2f;
+}
+
+.md-typeset :is(.danger, .failure, .bug, .error) > :is(.admonition-title, summary) {
+  background-color: rgba(211, 47, 47, 0.1);
+}
+
+.md-typeset :is(.danger, .failure, .bug, .error) > :is(.admonition-title, summary)::before {
+  background-color: #d32f2f;
+  -webkit-mask-image: var(--md-admonition-icon--danger);
+  mask-image: var(--md-admonition-icon--danger);
+}
+
+:root {
+  --rb-icon-shortcut: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 2.38 1.19 4.47 3 5.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 0 0-7-7M9 21a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1H9z"/></svg>');
+}
+
+/* Code: shell commands wrap so the whole command shows on a phone, and the
+   copy button keeps its own column instead of covering the end. */
+.md-typeset :is(.language-sh, .language-bash, .language-shell, .language-console,
+  .language-powershell, .language-ps1, .language-pwsh, .language-cmd, .language-bat) pre > code,
+.md-typeset .rb-cmd pre > code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  padding-right: 2.6rem;
+}
+
+/* Terminal output: what the screen shows, not something to type */
+.md-typeset .rb-terminal pre,
+.md-typeset .rb-terminal pre > code {
+  background: var(--rb-terminal-bg);
+  color: var(--rb-terminal-fg);
+}
+
+.md-typeset .rb-terminal pre {
+  border: 1px solid var(--rb-border);
+  border-radius: 4px;
+}
+
+.md-typeset .rb-terminal pre::before {
+  content: "Terminal output";
+  display: block;
+  padding: 0.5rem 1.2em 0;
+  font: 600 0.65rem var(--md-text-font-family);
+  color: var(--rb-terminal-label);
+}
+
+.md-typeset .rb-terminal .md-code__button {
+  color: var(--rb-terminal-label);
+}
+
+/* Numbered steps */
+.md-typeset ol.rb-steps,
+.md-typeset .rb-steps > ol {
+  counter-reset: rb-step;
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.md-typeset ol.rb-steps > li,
+.md-typeset .rb-steps > ol > li {
+  counter-increment: rb-step;
+  position: relative;
+  margin: 0 0 1.2rem;
+  padding-left: 2.6rem;
+  min-height: 1.8rem;
+}
+
+.md-typeset ol.rb-steps > li::before,
+.md-typeset .rb-steps > ol > li::before {
+  content: counter(rb-step);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1.8rem;
+  height: 1.8rem;
+  border-radius: 4px;
+  background: var(--md-primary-fg-color);
+  color: #fff;
+  font-weight: 700;
+  line-height: 1.8rem;
+  text-align: center;
+}
+
+[data-md-color-scheme="slate"] .md-typeset ol.rb-steps > li::before,
+[data-md-color-scheme="slate"] .md-typeset .rb-steps > ol > li::before {
+  background: var(--rb-link);
+  color: #1e2129;
+}
+
+/* Card grids. Material's grid cards keep their markup; the hover shadow
+   gives way to a stronger border. */
+.md-typeset .grid.cards {
+  --md-shadow-z2: 0 0 #0000;
+}
+
+.md-typeset .grid.cards > :is(ul, ol) > li,
+.md-typeset .grid > .card {
+  border: 1px solid var(--rb-border);
+  border-radius: 4px;
+}
+
+.md-typeset .grid.cards > :is(ul, ol) > li:is(:hover, :focus-within),
+.md-typeset .grid > .card:is(:hover, :focus-within) {
+  border-color: var(--rb-border-strong);
+}
+
+.rb-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  gap: 0.8rem;
+  margin: 1rem 0 1.5rem;
+}
+
+.rb-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.8rem;
+  border: 1px solid var(--rb-border);
+  border-radius: 4px;
+  background: var(--md-default-bg-color);
+}
+
+.rb-card:is(:hover, :focus-within) {
+  border-color: var(--rb-border-strong);
+}
+
+.md-typeset .rb-card p {
+  margin: 0;
+}
+
+.md-typeset .rb-card .md-button {
+  margin-top: auto;
+  align-self: flex-start;
+}
+
+.md-typeset .rb-card-logo,
+.md-typeset .grid.cards img.rb-card-logo {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  padding: 4px;
+  border: 1px solid var(--rb-border);
+  border-radius: 4px;
+  background: #fff;
+  vertical-align: middle;
+}
+
+/* Path chip */
+.md-typeset code.rb-path {
+  padding: 0.15rem 0.45rem;
+  border: 1px solid var(--rb-border);
+  border-radius: 2px;
+  font-size: 0.8em;
+  overflow-wrap: anywhere;
+}
+
+/* Content tabs (operating systems): the selected tab reads clearly. */
+.md-typeset .tabbed-labels > label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--rb-text-secondary);
+}
+
+.md-typeset .tabbed-set > input:checked + label,
+.md-typeset .tabbed-labels > label:hover {
+  color: var(--rb-link);
+}
+
+.md-typeset .tabbed-labels::before {
+  background: var(--rb-link);
+}
+
+/* Inline coverage bar beside a number */
+.rb-bar {
+  display: inline-block;
+  width: 5rem;
+  height: 0.4rem;
+  margin-right: 0.4rem;
+  border-radius: 2px;
+  background: var(--rb-border);
+  vertical-align: middle;
+}
+
+.rb-bar > span {
+  display: block;
+  width: var(--v, 0%);
+  height: 100%;
+  border-radius: 2px;
+  background: var(--rb-ok-fg);
+}
+
+/* Diagrams written by scripts/sitediagrams.py. Text takes the page font and
+   colour, boxes take the theme surface, so the drawing follows the palette
+   toggle. Each diagram carries a wide and a narrow layout. */
+.md-typeset .rb-figure {
+  margin: 1.2rem 0 1.6rem;
+}
+
+.md-typeset .rb-figure svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 52rem;
+  color: var(--md-default-fg-color);
+}
+
+.md-typeset .rb-figure figcaption {
+  max-width: 44em;
+  margin: 0.4rem 0 0;
+  font-size: 0.75rem;
+  font-style: normal;
+  color: var(--rb-text-secondary);
+  text-align: left;
+}
+
+.rb-diagram text {
+  font-family: var(--md-text-font-family);
+  fill: currentColor;
+}
+
+.rb-diagram .rb-d-box {
+  fill: var(--rb-diagram-fill);
+  stroke: var(--rb-diagram-stroke);
+}
+
+.rb-diagram .rb-d-accent {
+  stroke: var(--rb-diagram-accent);
+}
+
+.rb-diagram .rb-d-line {
+  stroke: var(--rb-diagram-stroke);
+}
+
+.rb-diagram .rb-d-head {
+  fill: var(--rb-diagram-stroke);
+}
+
+.rb-diagram .rb-d-num {
+  fill: var(--rb-diagram-accent);
+}
+
+.rb-diagram .rb-d-numtext {
+  fill: var(--md-default-bg-color);
+}
+
+.rb-diagram .rb-d-muted {
+  fill: var(--rb-text-secondary);
+}
+
+.rb-diagram-narrow {
+  display: none !important;
+}
+
+@media (max-width: 37.5em) {
+  .rb-diagram-wide {
+    display: none !important;
+  }
+
+  .rb-diagram-narrow {
+    display: block !important;
+  }
+}
+
+/* The sidebar title stays legible over the list scrolling under it. */
+@media (min-width: 76.25em) {
+  .md-nav--primary > .md-nav__title,
+  .md-nav--secondary > .md-nav__title {
+    background: var(--md-default-bg-color);
+    border-bottom: 1px solid var(--rb-border);
+  }
+}
+
 /* Material's compact footer defaults sit just below WCAG AA on the dark bar. */
 .md-footer-meta .md-copyright {
   color: #b5b5b5;
@@ -249,6 +778,116 @@
   color: #b8c6ff !important;
 }
 
+/* 404 page */
+.rb-notfound-search {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0.55em 1.2em;
+  border: 1px solid currentColor;
+  border-radius: 2px;
+  color: var(--rb-link);
+  font-weight: 700;
+  cursor: pointer;
+}
+
+@media (max-width: 44.984375em) {
+  /* Tables with an action column become one block per row, so the button
+     is never behind a horizontal scroll (site.js marks them). */
+  .md-typeset__table:has(table[data-rb-stack]) {
+    display: block;
+  }
+
+  .md-typeset table[data-rb-stack] {
+    display: block;
+    width: 100%;
+  }
+
+  .md-typeset table[data-rb-stack] thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+  }
+
+  .md-typeset table[data-rb-stack] tbody,
+  .md-typeset table[data-rb-stack] tr {
+    display: block;
+  }
+
+  .md-typeset table[data-rb-stack] tr {
+    padding: 0.5rem 0;
+    border-top: 1px solid var(--rb-border);
+  }
+
+  .md-typeset table[data-rb-stack] td {
+    display: block;
+    position: relative;
+    min-height: 1.6rem;
+    padding: 0.25rem 0.6rem 0.25rem 8.4rem;
+    border: 0;
+    text-align: left !important;
+    overflow-wrap: anywhere;
+  }
+
+  .md-typeset table[data-rb-stack] td::before {
+    content: attr(data-label);
+    position: absolute;
+    top: 0.25rem;
+    left: 0.6rem;
+    width: 7.4rem;
+    font-weight: 600;
+    color: var(--rb-text-secondary);
+  }
+
+  .md-typeset table[data-rb-stack] td .md-button {
+    margin: 0 0.3rem 0.3rem 0;
+  }
+
+  .md-typeset table[data-rb-stack] td:empty {
+    display: none;
+  }
+
+  /* Other wide tables scroll with their first column held in place. */
+  .md-typeset table:not([class]):not([data-rb-stack]) :is(td, th):first-child {
+    position: sticky;
+    left: 0;
+    max-width: 40vw;
+    background: var(--md-default-bg-color);
+    overflow-wrap: anywhere;
+  }
+
+  .md-typeset table:not([class]):not([data-rb-stack]) th:first-child {
+    z-index: 2;
+  }
+
+  /* On a phone every command wraps: the end of a one-liner (the "| sh"
+     that makes it work) is never off-screen. Terminal output keeps its
+     columns and scrolls. */
+  .md-typeset pre > code {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    padding-right: 2.6rem;
+  }
+
+  .md-typeset :is(.rb-terminal, .language-text) pre > code {
+    white-space: pre;
+    overflow-wrap: normal;
+  }
+
+  /* Text on reference pages stays at 12 px or more on a phone. */
+  .rb-file-entry ul,
+  .rb-sys-file ul,
+  .rb-hash {
+    font-size: 0.75rem;
+  }
+
+  .rb-page-header {
+    grid-template-columns: 1fr;
+  }
+}
+
 @media (max-width: 600px) {
   .rb-table-filter {
     grid-template-columns: 1fr;
@@ -257,6 +896,14 @@
   .rb-table-filter label {
     grid-column: auto;
   }
+
+  .rb-stats {
+    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
+  }
+
+  .rb-stat .rb-stat-value {
+    font-size: 1.1rem;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

docs_assets/images-needed.md

@@ -0,0 +1,71 @@
+# Images that need a real device
+
+These pictures show a real screen, so they are captured on a real install and
+never drawn as a mock-up. Each entry says what the capture must show, where it
+goes, and the alt text it carries. Folder layouts that follow from data are
+drawn by `scripts/sitediagrams.py` instead (the MinUI card tree is
+`<!-- image: minui-card -->`).
+
+Captures: PNG or WebP, 1200 px wide at most, cropped tight, under 150 KB,
+personal paths and user names removed. Menu labels are checked against the
+current release of the software before the capture is used. Put each file in
+`docs_assets/screens/` and note the software version in the commit message.
+
+## RetroArch System/BIOS directory
+
+Settings, Directory in RetroArch (Ozone menu), with the System/BIOS row
+highlighted and its path visible. For the RetroArch pages on Windows, macOS,
+Linux and Android.
+
+**Alt text**: RetroArch Settings, Directory screen, with the System/BIOS line highlighted showing the folder path.
+
+## RetroArch firmware check
+
+Main Menu, Information, Core Information after loading a PlayStation core, with
+the firmware lines reading Present. For RetroArch and Lakka pages, "Done when".
+
+**Alt text**: RetroArch Core Information for a PlayStation core, each firmware line marked Present.
+
+## Steam Deck Desktop Mode and Konsole
+
+Two panels: the Steam Deck power menu with Switch to Desktop selected, then the
+desktop with Konsole open and the install command pasted. For the EmuDeck and
+RetroDECK pages.
+
+**Alt text**: Steam Deck power menu with Switch to Desktop selected, then the Konsole terminal open with the install command pasted.
+
+## Installer run, annotated
+
+A real installer run in a terminal with three marks: the detected BIOS folder
+line, the confirmation prompt, and the Done line. For First install and every
+setup page.
+
+**Alt text**: Installer output in a terminal, with marks on the detected folder, the install choice and the Done line.
+
+## Batocera network share from Windows
+
+Windows File Explorer with `\\BATOCERA\share\bios` in the address bar and the
+BIOS files listed. For the Batocera and KNULLI pages.
+
+**Alt text**: Windows File Explorer showing the Batocera bios folder opened over the network.
+
+## Batocera missing BIOS screen
+
+Batocera's main menu path to the missing BIOS check, and the result screen with
+no missing file for the consoles in use. For the Batocera page, "Done when".
+
+**Alt text**: Batocera missing BIOS check listing no missing files.
+
+## Recalbox BIOS manager
+
+Recalbox's BIOS checking screen with green, yellow and red entries visible. For
+the Recalbox page.
+
+**Alt text**: Recalbox BIOS manager listing files marked present, present with another version, and missing.
+
+## A multi-part pack extracted
+
+A file manager showing two downloaded parts and the single folder both were
+extracted into. For Get your files.
+
+**Alt text**: Two downloaded pack parts and the one folder both were extracted into.

docs_assets/logos/batocera.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 960 960"><g style="display:inline"><g style="stroke:none;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><g style="font-size:64px;line-height:1.05;font-family:Urba;-inkscape-font-specification:Urba;text-align:center;letter-spacing:0;word-spacing:0;white-space:pre;shape-inside:url(#path1055-2);stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" transform="rotate(11.82 -1558.927 865.97)"><path d="M186.08 290.316q0 1.664.576 3.072.64 1.408 1.664 2.496 1.088 1.024 2.496 1.664 1.472.576 3.072.576t3.008-.576q1.472-.64 2.56-1.664 1.088-1.088 1.664-2.496.64-1.472.64-3.072t-.64-3.008q-.576-1.472-1.664-2.496-1.088-1.088-2.56-1.664-1.408-.64-3.008-.64t-3.072.64q-1.408.576-2.496 1.664-1.024 1.024-1.664 2.496-.576 1.408-.576 3.008m17.472 22.08 4.352 4.352q-.896.896-2.048 1.344t-2.368.448q-1.152 0-2.304-.448-1.088-.448-1.984-1.344l-13.12-13.12v8.768q0 2.56-1.792 4.352t-4.352 1.792v-28.224q0-2.88 1.088-5.376 1.088-2.56 3.008-4.48t4.416-3.008q2.56-1.088 5.44-1.088t5.44 1.088 4.48 3.008 3.008 4.48q1.088 2.496 1.088 5.376 0 2.688-.96 5.12t-2.688 4.288q-1.664 1.856-3.968 3.072-2.24 1.152-4.864 1.408zm28.48 0q2.56 0 4.352 1.792t1.792 4.352H219.68q-2.56 0-4.352-1.792t-1.792-4.352v-28.864q0-2.624 1.792-4.416t4.352-1.792h18.496q0 2.624-1.792 4.416t-4.352 1.792H219.68v9.792h6.208q2.56 0 4.352 1.792t1.792 4.416H219.68v12.864zm37.568-13.952q0-3.2-.896-6.08-.832-2.88-2.368-4.992-1.472-2.176-3.456-3.456t-4.224-1.28-4.224 1.28-3.52 3.456q-1.472 2.112-2.368 4.992t-.896 6.08zm1.536-15.296q2.304 3.072 3.52 7.04 1.28 3.904 1.28 8.256l-.064 13.824q0 2.624-1.856 4.48-1.792 1.792-4.416 1.792v-13.824h-21.952v13.824q-2.624 0-4.48-1.792-1.792-1.856-1.792-4.48v-13.824q0-4.352 1.216-8.256 1.216-3.968 3.52-7.04 2.496-3.328 5.696-5.056t6.848-1.728 6.848 1.728 5.632 5.056M292 312.46q3.008 0 5.632-1.152t4.608-3.072q1.984-1.984 3.072-4.608 1.152-2.688 1.152-5.696t-1.152-5.632q-1.088-2.624-3.072-4.608t-4.608-3.072q-2.624-1.152-5.632-1.152h-4.032v28.992zm0-35.2q4.288 0 8 1.664 3.776 1.6 6.592 4.416t4.416 6.592q1.664 3.712 1.664 8t-1.664 8.064q-1.6 3.712-4.416 6.528t-6.592 4.48q-3.712 1.6-8 1.6h-4.032q-2.56 0-4.352-1.792t-1.792-4.352v-28.992q0-2.624 1.792-4.416t4.352-1.792zm55.296 12.992q0 2.56-.96 4.864-.896 2.24-2.56 4.096-1.664 1.792-3.968 3.072-2.24 1.216-4.928 1.664v8.448q0 2.56-1.792 4.352t-4.352 1.792v-14.656q-2.624-.512-4.864-1.728-2.176-1.28-3.84-3.072-1.6-1.792-2.56-4.032-.896-2.304-.896-4.8v-12.864q2.56 0 4.352 1.792t1.792 4.352v6.72q0 1.6.704 3.072.704 1.408 1.92 2.496 1.28 1.024 2.944 1.664 1.728.576 3.648.576t3.584-.576q1.728-.64 2.944-1.664 1.28-1.088 1.984-2.496.704-1.472.704-3.072v-6.72q0-2.56 1.792-4.352t4.352-1.792v6.144zm47.552-12.928q0 2.624-1.792 4.416t-4.416 1.792h-6.144v28.864q0 2.56-1.792 4.352t-4.352 1.792v-35.008h-6.208q-2.56 0-4.352-1.792T364 277.324h24.64zm18.623 42.304q-4.48 0-8.448-1.664-3.968-1.728-6.912-4.672t-4.672-6.912q-1.664-3.968-1.664-8.448t1.664-8.384q1.728-3.968 4.672-6.912t6.912-4.608q3.968-1.728 8.448-1.728t8.448 1.728q3.968 1.664 6.912 4.608t4.608 6.912q1.728 3.904 1.728 8.384t-1.728 8.448q-1.664 3.968-4.608 6.912t-6.912 4.672q-3.968 1.664-8.448 1.664m0-37.184q-3.2 0-6.016 1.216t-4.928 3.328-3.328 4.928-1.216 6.016 1.216 6.08q1.216 2.816 3.328 4.928t4.928 3.328 6.016 1.216 6.016-1.216 4.928-3.328 3.328-4.928q1.216-2.88 1.216-6.08t-1.216-6.016-3.328-4.928-4.928-3.328-6.016-1.216m47.104 7.872q0 1.664.576 3.072.64 1.408 1.664 2.496 1.088 1.024 2.496 1.664 1.472.576 3.072.576t3.008-.576q1.472-.64 2.56-1.664 1.088-1.088 1.664-2.496.64-1.472.64-3.072t-.64-3.008q-.576-1.472-1.664-2.496-1.088-1.088-2.56-1.664-1.408-.64-3.008-.64t-3.072.64q-1.408.576-2.496 1.664-1.024 1.024-1.664 2.496-.576 1.408-.576 3.008m17.472 22.08 4.352 4.352q-.896.896-2.048 1.344t-2.368.448q-1.152 0-2.304-.448-1.088-.448-1.984-1.344l-13.12-13.12v8.768q0 2.56-1.792 4.352t-4.352 1.792v-28.224q0-2.88 1.088-5.376 1.088-2.56 3.008-4.48t4.416-3.008q2.56-1.088 5.44-1.088t5.44 1.088 4.48 3.008 3.008 4.48q1.088 2.496 1.088 5.376 0 2.688-.96 5.12t-2.688 4.288q-1.664 1.856-3.968 3.072-2.24 1.152-4.864 1.408zm28.48 0q2.56 0 4.352 1.792t1.792 4.352h-18.496q-2.56 0-4.352-1.792t-1.792-4.352v-28.864q0-2.624 1.792-4.416t4.352-1.792h18.496q0 2.624-1.792 4.416t-4.352 1.792h-12.352v9.792h6.208q2.56 0 4.352 1.792t1.792 4.416h-12.352v12.864zm39.168-35.072q0 2.624-1.792 4.416t-4.416 1.792h-6.144v28.864q0 2.56-1.792 4.352t-4.352 1.792v-35.008h-6.208q-2.56 0-4.352-1.792t-1.792-4.416h24.64zm7.04 12.992q0 1.664.576 3.072.64 1.408 1.664 2.496 1.088 1.024 2.496 1.664 1.472.576 3.072.576t3.008-.576q1.472-.64 2.56-1.664 1.088-1.088 1.664-2.496.64-1.472.64-3.072t-.64-3.008q-.576-1.472-1.664-2.496-1.088-1.088-2.56-1.664-1.408-.64-3.008-.64t-3.072.64q-1.408.576-2.496 1.664-1.024 1.024-1.664 2.496-.576 1.408-.576 3.008m17.472 22.08 4.352 4.352q-.896.896-2.048 1.344t-2.368.4Line truncated

docs_assets/logos/lakka.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256">
+    <desc iVinci="yes" version="4.6" gridStep="20" showGrid="no" snapToGrid="no" codePlatform="0"/>
+    <g id="Layer1" name="Layer 1" opacity="1">
+        <g id="Shape1">
+            <desc shapeID="1" type="0" basicInfo-basicType="0" basicInfo-roundedRectRadius="12" basicInfo-polygonSides="6" basicInfo-starPoints="5" bounding="rect(-100,-68.4834,200,136.967)" text="" font-familyName="" font-pixelSize="20" font-bold="0" font-underline="0" font-alignment="1" strokeStyle="0" markerStart="0" markerEnd="0" shadowEnabled="0" shadowOffsetX="0" shadowOffsetY="2" shadowBlur="4" shadowOpacity="160" blurEnabled="0" blurRadius="4" transform="matrix(0.97865,0.000512411,-0.000512419,0.978665,127.968,189.029)" pers-center="0,0" pers-size="0,0" pers-start="0,0" pers-end="0,0" locked="0" mesh="" flag=""/>
+            <path id="shapePath1" d="M42.4218,126.285 C31.8374,138.147 30.1561,145.569 30.1211,180.592 L30.0933,207.544 L57.0444,207.544 C92.0585,207.546 99.4913,205.871 111.351,195.312 L115.663,191.473 L115.875,219.601 C116.075,246.152 116.172,247.872 117.614,250.268 C122.501,258.388 134.847,257.846 138.714,249.344 C140.016,246.481 140.14,243.872 140.169,218.818 L140.2,191.423 L144.543,195.298 C156.43,205.904 163.834,207.583 198.872,207.618 L225.823,207.646 L225.824,180.695 C225.825,145.671 224.152,138.248 213.58,126.374 L209.729,122.05 L205.287,125.079 C197.219,130.58 186.766,134.179 178.77,134.208 L175.641,134.22 L173.613,139.379 C157.212,181.089 98.7321,181.059 82.3753,139.332 L80.3521,134.17 L77.2234,134.155 C69.2279,134.117 58.7787,130.507 50.7166,124.998 L46.277,121.964 L42.4218,126.285 Z" style="stroke:none;fill-rule:evenodd;fill:#2ecc71;fill-opacity:1;"/>
+        </g>
+        <g id="Shape2">
+            <desc shapeID="2" type="0" basicInfo-basicType="1" basicInfo-roundedRectRadius="12" basicInfo-polygonSides="6" basicInfo-starPoints="5" bounding="rect(-83.0229,-25.7162,166.046,51.4324)" text="" font-familyName="Helvetica" font-pixelSize="20" font-bold="0" font-underline="0" font-alignment="1" strokeStyle="0" markerStart="0" markerEnd="0" shadowEnabled="0" shadowOffsetX="0" shadowOffsetY="2" shadowBlur="4" shadowOpacity="160" blurEnabled="0" blurRadius="4" transform="matrix(0.984273,0.000515356,-0.000585224,1.11771,127.988,150.75)" pers-center="0,0" pers-size="0,0" pers-start="0,0" pers-end="0,0" locked="0" mesh="" flag=""/>
+            <path id="shapePath2" d="M46.2859,121.964 L209.72,122.049 L209.69,179.536 L46.2558,179.451 L46.2859,121.964 Z" style="stroke:none;fill-rule:evenodd;fill:#2ecc71;fill-opacity:1;"/>
+        </g>
+    </g>
+    <g id="Layer2" name="Layer 4" opacity="1">
+        <g id="Shape3">
+            <desc shapeID="3" type="0" basicInfo-basicType="4" basicInfo-roundedRectRadius="12" basicInfo-polygonSides="6" basicInfo-starPoints="5" bounding="rect(-50.2318,-49.7682,100.464,99.5363)" text="" font-familyName="Helvetica" font-pixelSize="20" font-bold="0" font-underline="0" font-alignment="1" strokeStyle="0" markerStart="0" markerEnd="0" shadowEnabled="0" shadowOffsetX="0" shadowOffsetY="2" shadowBlur="4" shadowOpacity="160" blurEnabled="0" blurRadius="4" transform="matrix(0.974133,0.000510046,-0.000514806,0.983224,79.09,84.9615)" pers-center="0,0" pers-size="0,0" pers-start="0,0" pers-end="0,0" locked="0" mesh="" flag=""/>
+            <path id="shapePath3" d="M30.1575,84.9359 C30.1717,57.9108 52.091,36.0141 79.1156,36.0283 C106.14,36.0424 128.037,57.962 128.023,84.9871 C128.008,112.012 106.089,133.909 79.0644,133.895 C52.0397,133.881 30.1434,111.961 30.1575,84.9359 Z" style="stroke:none;fill-rule:evenodd;fill:#d35400;fill-opacity:1;"/>
+        </g>
+    </g>
+    <g id="Layer3" name="Layer 2" opacity="1">
+        <g id="Shape4">
+            <desc shapeID="4" type="0" basicInfo-basicType="4" basicInfo-roundedRectRadius="12" basicInfo-polygonSides="6" basicInfo-starPoints="5" bounding="rect(-48.9954,-49.7682,97.9908,99.5364)" text="" font-familyName="Helvetica" font-pixelSize="20" font-bold="0" font-underline="0" font-alignment="1" strokeStyle="0" markerStart="0" markerEnd="0" shadowEnabled="0" shadowOffsetX="0" shadowOffsetY="2" shadowBlur="4" shadowOpacity="160" blurEnabled="0" blurRadius="4" transform="matrix(0.998716,0.000522918,-0.000514806,0.983223,176.955,85.6138)" pers-center="0,0" pers-size="0,0" pers-start="0,0" pers-end="0,0" locked="0" mesh="" flag=""/>
+            <path id="shapePath4" d="M128.022,85.5882 C128.036,58.5631 149.956,36.6664 176.98,36.6806 C204.005,36.6947 225.901,58.6144 225.887,85.6394 C225.873,112.665 203.954,134.561 176.929,134.547 C149.904,134.533 128.008,112.613 128.022,85.5882 Z" style="stroke:none;fill-rule:evenodd;fill:#e67e22;fill-opacity:1;"/>
+        </g>
+        <g id="Shape5">
+            <desc shapeID="5" type="0" basicInfo-basicType="4" basicInfo-roundedRectRadius="12" basicInfo-polygonSides="6" basicInfo-starPoints="5" bounding="rect(-48.9954,-49.7682,97.9908,99.5364)" text="" font-familyName="Helvetica" font-pixelSize="20" font-bold="0" font-underline="0" font-alignment="1" strokeStyle="0" markerStart="0" markerEnd="0" shadowEnabled="0" shadowOffsetX="0" shadowOffsetY="2" shadowBlur="4" shadowOpacity="160" blurEnabled="0" blurRadius="4" transform="matrix(0.998716,0.000522918,-0.000514806,0.983223,128.003,121.592)" pers-center="0,0" pers-size="0,0" pers-start="0,0" pers-end="0,0" locked="0" mesh="" flag=""/>
+            <path id="shapePath5" d="M79.0707,121.567 C79.0849,94.5417 101.004,72.645 128.029,72.6592 C155.054,72.6733 176.95,94.593 176.936,121.618 C176.922,148.643 155.002,170.54 127.978,170.526 C100.953,170.512 79.0566,148.592 79.0707,121.567 Z" style="stroke:none;fill-rule:evenodd;fill:#e67e22;fill-opacity:1;"/>
+        </g>
+    </g>
+    <g id="Layer4" name="Layer 3" opacity="1">
+        <g id="Shape6">
+            <desc shapeID="6" type="0" basicInfo-basicType="4" basicInfo-roundedRectRadius="12" basicInfo-polygonSides="6" basicInfo-starPoints="5" bounding="rect(-50.2318,-49.7682,100.464,99.5363)" text="" font-familyName="Helvetica" font-pixelSize="20" font-bold="0" font-underline="0" font-alignment="1" strokeStyle="0" markerStart="0" markerEnd="0" shadowEnabled="0" shadowOffsetX="0" shadowOffsetY="2" shadowBlur="4" shadowOpacity="160" blurEnabled="0" blurRadius="4" transform="matrix(0.974133,0.000510046,-0.000514806,0.983224,128.041,48.9845)" pers-center="0,0" pers-size="0,0" pers-start="0,0" pers-end="0,0" locked="0" mesh="" flag=""/>
+            <path id="shapePath6" d="M79.1089,48.9588 C79.123,21.9338 101.042,0.0370636 128.067,0.0512276 C155.092,0.0653763 176.988,21.985 176.974,49.0101 C176.96,76.0352 155.04,97.9319 128.016,97.9177 C100.991,97.9036 79.0947,75.9839 79.1089,48.9588 Z" style="stroke:none;fill-rule:evenodd;fill:#f1c40f;fill-opacity:1;"/>
+        </g>
+    </g>
+</svg>

docs_assets/logos/recalbox.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 451 543.11"><style>.st2{fill:#027fe1}.st4{fill:gray}</style><g id="Calque_1"><path d="M184.92 132.54c-16.32 0-29.76-13.26-29.76-29.76 0-16.44 13.32-29.7 29.76-29.7 16.32 0 29.7 13.26 29.7 29.7 0 16.5-13.26 29.76-29.7 29.76m0-47.22c-9.66 0-17.52 7.86-17.52 17.46 0 9.66 7.86 17.52 17.52 17.52 9.6 0 17.46-7.86 17.46-17.52 0-9.6-7.86-17.46-17.46-17.46" style="fill:red"/><path d="M284.28 134.4h-.84l-45.06-5.88c-1.68-.24-3.06-1.02-4.02-2.34-.96-1.26-1.38-2.94-1.2-4.44l5.88-45.12c.48-3.3 3.54-5.64 6.84-5.28L291 77.22c1.62.24 3.06 1.02 3.96 2.34.96 1.26 1.44 2.94 1.2 4.44l-5.88 45.12c-.36 3.06-2.94 5.28-6 5.28m-38.16-17.28L279 121.5l4.32-32.88-32.88-4.38z" style="fill:#ff5ddc"/><path d="M185.7 58.26c-.42 0-.78 0-1.26-.12-3.3-.66-5.4-3.84-4.68-7.14l9.6-46.14c.72-3.3 3.9-5.4 7.2-4.74 3.24.72 5.4 3.9 4.68 7.2l-9.66 46.14c-.42 2.82-3.06 4.8-5.88 4.8" class="st2"/><path d="M185.7 58.26c-.42 0-.78 0-1.26-.12-3.3-.66-5.4-3.84-4.68-7.14l9.6-46.14c.72-3.3 3.9-5.4 7.2-4.74 3.24.72 5.4 3.9 4.68 7.2l-9.66 46.14c-.42 2.82-3.06 4.8-5.88 4.8" class="st2"/><path d="M213.66 39.96c-.42 0-.78 0-1.26-.12l-46.2-9.66c-3.24-.66-5.4-3.84-4.68-7.14s3.9-5.4 7.2-4.68l46.14 9.6c3.3.72 5.4 3.9 4.68 7.2-.54 2.82-3.06 4.8-5.88 4.8" class="st2"/><path d="M245.4 55.02c-1.5 0-2.94-.6-4.02-1.56-1.62-1.38-2.34-3.66-1.86-5.76l8.34-39.72c.48-2.1 1.98-3.84 4.02-4.44 1.98-.72 4.32-.24 6 1.2L288.3 31.5a5.96 5.96 0 0 1 1.86 5.76c-.48 2.1-1.98 3.9-4.02 4.56l-38.76 12.84c-.78.24-1.38.36-1.98.36m12.12-34.32-4.02 19.14 18.66-6.24z" style="fill:#8aee49"/><path d="M97 442.11h12v6H97zm110 13h13v6h-13zm80-13h12v19h-12zm55 0h12v19h-12z" class="st4"/><path d="m447.86 361.62-38.08-131.46c-1.74-6.24-8.5-11.04-14.98-11.04h-22.56c.9 3 1.75 6.01 2.52 9.25 1.04 4.38 1.71 7.75 2.19 13.75h.27c6.42 0 13.26 5.1 15 11.27l24.6 84.6c1.74 6.24-2.16 11.28-8.58 11.28l-364.98-.48c-6.48 0-10.38-5.04-8.46-11.28l24.18-84.11c1.74-6.18 8.58-11.28 15.06-11.28h.25c.41-4 1.07-7.32 2.09-11.95.84-3.82 1.81-8.05 2.89-11.05H56.28c-6.48 0-13.14 4.8-15.06 11.04L3.42 361.02C1.62 367.26 0 377.46 0 383.94v147.78c0 6.42 5.52 11.39 12 11.39h427.56c6.48 0 11.44-4.97 11.44-11.39V384.6c0-6.42-1.34-16.8-3.14-22.98M73 442.11H42v25H24v-31h49zm55 12H97v7h31v6H79v-31h49zm55-12h-31v19h31v6h-49v-31h49zm55 25h-49v-18h31v-7h-31v-6h49zm24 0h-18v-55h18zm56 0h-49v-55h18v24h31zm55 0h-49v-31h49zm55-25h-6v6h-7v7h7v6h6v6h-19v-6h-12v6h-18v-6h6v-6h6v-7h-6v-6h-6v-6h18v6h12v-6h19z" class="st4"/><path d="M373.32 266.58c-.48-21.96-1.02-28.92-3.06-37.38-6.9-28.92-18.54-51.12-36.06-68.46-23.34-23.28-51.18-25.38-84.54-6.36l-9.3 5.28s-30.66-.36-33.24-2.22c-1.8-1.2-6.84-4.02-11.28-6.24-22.68-11.28-43.02-12.54-60.96-3.78-24.24 11.88-45.48 44.64-54.3 83.52-2.46 11.16-2.7 14.7-2.58 43.26.12 32.04.72 37.44 5.4 46.74 4.26 8.58 10.68 14.22 20.22 18 15.36 6 41.22-10.5 62.46-39.96l7.2-9.84h104.64l7.2 9.84c16.8 23.28 40.5 41.46 54 41.46 11.16 0 23.04-8.22 28.8-20.22 5.04-10.32 6.24-21.48 5.4-53.64M186.9 224.52h-15.84v15.84c0 4.92-4.14 9.06-9.06 9.06s-9.06-4.14-9.06-9.06v-15.84H137.1c-4.92 0-9.06-4.14-9.06-9.06s4.14-9.06 9.06-9.06h15.84v-15.84c0-4.92 4.14-9.06 9.06-9.06s9.06 4.14 9.06 9.06v15.84h15.84c4.92 0 9.06 4.14 9.06 9.06-.12 5.04-4.14 9.06-9.06 9.06m116.76-49.56c7.62 0 13.86 6.18 13.86 13.86 0 7.62-6.24 13.86-13.86 13.86s-13.86-6.24-13.86-13.86c.12-7.68 6.24-13.86 13.86-13.86m-45 26.76c0-7.62 6.24-13.86 13.86-13.86 7.68 0 13.86 6.24 13.86 13.86s-6.18 13.86-13.86 13.86c-7.62 0-13.86-6.24-13.86-13.86m28.8 46.86c-7.62 0-13.86-6.24-13.86-13.86s6.24-13.86 13.86-13.86 13.86 6.24 13.86 13.86-6.24 13.86-13.86 13.86m29.16-13.86c-7.68 0-13.92-6.24-13.92-13.86S308.94 207 316.62 207c7.62 0 13.86 6.24 13.86 13.86 0 7.74-6.24 13.86-13.86 13.86" class="st4"/></g></svg>

docs_assets/logos/retroarch.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48">
+  <!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #2f2f2f;
+      }
+    </style>
+  </defs>
+  <path id="Invader" class="st0" d="M15.2214499,30.6589508l1.8361292-2.0981903-2.6117897-.00597c-1.4364796-.0032806-2.6114798-.0085793-2.6111097-.0117493.0002804-.00317.1577702-.6325893.3497696-1.3986893l.3491001-1.3929195h-5.60711l.9638901-3.8554993.9638901-3.8554993h2.0806599l-.5253801,2.0981903c-.2889605,1.1540108-.5256901,2.1008396-.5260696,2.1040707-.0002804.0032196.7925396.0058899,1.7620497.0058899h1.7627401l.0164003-.0646496c.0090303-.0355606.2452698-.9797401.5249901-2.0981903l.5085897-2.0335407,5.0112696-.0235004-1.0804691-1.32827c-.5942593-.7305498-1.1016502-1.3573599-1.1275406-1.3929195l-.0470695-.0646496h2.0714703l1.22439,1.3987999,1.22439,1.3987999h4.5306797l1.22439-1.3987999,1.22439-1.3987999h2.0714703l-.0470695.0646496c-.0258808.0355597-.5332794.6623697-1.1275406,1.3929195l-1.0804691,1.32827,5.0112686.0235004.5085907,2.0335407c.2797203,1.1184502.5159683,2.0626392.5249901,2.0981903l.0163994.0646496h1.7627411c.9695091,0,1.7624283-.0025196,1.7620506-.0058899-.0002785-.0032196-.2371101-.9500599-.5260696-2.1040707l-.5253792-2.0981903h2.0806618l.9638901,3.8554993.9638901,3.8554993h-5.6071091l.3490982,1.3929195c.1920013.7660999.3493996,1.3955193.3497696,1.3986893.0002785.00317-1.1746292.0084705-2.6111107.0117493l-2.6117802.00597,1.8361301,2.0981903,1.8361397,2.0981903-3.185791-.0028-1.7044106-2.1022892-1.7044201-2.1022892h-8.0401287l-1.7044201,2.1022892-1.7044106,2.1022892-3.1857901.0028,1.8361588-2.0981903ZM19.9799404,21.8959103v-1.7514305h-3.5263691l-.0060806,1.7279205c-.0033398.9503593-.0011196,1.7412205.0051899,1.7574596.0089397.0234108.37533.0282898,1.7692699.0235004l1.7579899-.0060291v-1.751421ZM31.5464401,20.1444798l-3.5146198-.0120602v3.5269699l3.5146198-.0120602v-3.5028496Z"/>
+</svg>

docs_assets/logos/retrodeck.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="100%"
+   height="100%"
+   viewBox="0 0 1067 1067"
+   version="1.1"
+   xml:space="preserve"
+   style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+   id="svg2"
+   sodipodi:docname="rd-stable-icon.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview2"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.7469541"
+     inkscape:cx="533.78621"
+     inkscape:cy="533.5"
+     inkscape:window-width="3840"
+     inkscape:window-height="2082"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" /><g
+     id="g1"><path
+       d="M1066.66,266.666c-0,-147.176 -119.49,-266.666 -266.666,-266.666l-533.333,-0c-147.176,-0 -266.666,119.49 -266.666,266.666l-0,533.333c-0,147.176 119.49,266.666 266.666,266.666l533.333,-0c147.176,-0 266.666,-119.49 266.666,-266.666l-0,-533.333Z"
+       style="fill:#000000"
+       id="path1" /></g><g
+     id="g2"><g
+       id="D"><path
+         d="M847.457,876.335c-18.448,18.448 -38.862,32.56 -61.237,42.335c-22.369,9.775 -46.705,14.662 -73.001,14.662l-430.192,0l-0,-110.487l430.192,-0c9.775,-0 18.965,-1.825 27.569,-5.473c8.605,-3.649 16.107,-8.673 22.512,-15.078c6.399,-6.399 11.429,-13.907 15.077,-22.511c3.649,-8.605 5.473,-17.794 5.473,-27.57l0,-437.756c0,-9.088 -2,-17.863 -5.99,-26.331c-3.995,-8.468 -9.263,-15.97 -15.799,-22.511c-6.542,-6.541 -14.043,-11.81 -22.512,-15.799c-8.468,-3.996 -17.248,-5.991 -26.33,-5.991l-430.192,0l-0,-110.487l430.192,-0c13.077,-0 25.779,1.375 38.1,4.126c12.322,2.756 24.166,6.643 35.521,11.673c11.36,5.024 22.136,11.048 32.326,18.067c10.184,7.024 19.618,14.731 28.291,23.131c18.039,17.487 32.048,37.623 42.028,60.407c9.979,22.79 14.975,47.398 14.975,73.836l-0,417.514c-0,26.438 -4.888,50.808 -14.663,73.109c-9.781,22.306 -23.892,42.681 -42.34,61.134Z"
+         style="fill:#fff;fill-rule:nonzero;"
+         id="path2" /></g><use
+       xlink:href="#_Image1"
+       x="159.95"
+       y="366.372"
+       width="441px"
+       height="334px"
+       id="use2" /></g><defs
+     id="defs2"><image
+       id="_Image1"
+       width="441px"
+       height="334px"
+       xlink:href="data:image/png;base64,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 truncated

docs_assets/logos/sources.json

@@ -0,0 +1,124 @@
+{
+  "note": "Each platform's own logo, owned by its project and shown only to name that platform. Copied once by scripts/fetch_site_images.py.",
+  "images": [
+    {
+      "file": "amberelec.png",
+      "platform": "amberelec",
+      "source": "https://avatars.githubusercontent.com/u/102820909",
+      "owner": "AmberELEC",
+      "licence": "GitHub organisation avatar of AmberELEC"
+    },
+    {
+      "file": "batocera.svg",
+      "platform": "batocera",
+      "source": "https://raw.githubusercontent.com/batocera-linux/batocera-emulationstation/master/resources/splash_batocera.svg",
+      "owner": "Batocera",
+      "licence": "repository licence MIT"
+    },
+    {
+      "file": "bizhawk.png",
+      "platform": "bizhawk",
+      "source": "https://avatars.githubusercontent.com/u/11743303",
+      "owner": "TASVideos",
+      "licence": "GitHub organisation avatar of TASEmulators"
+    },
+    {
+      "file": "emudeck.png",
+      "platform": "emudeck",
+      "source": "https://raw.githubusercontent.com/dragoonDorise/EmuDeck/main/icons/EmuDeck.png",
+      "owner": "EmuDeck",
+      "licence": "repository licence GPL-3.0"
+    },
+    {
+      "file": "emuelec.png",
+      "platform": "emuelec",
+      "source": "https://avatars.githubusercontent.com/u/57574835",
+      "owner": "EmuELEC",
+      "licence": "GitHub organisation avatar of EmuELEC"
+    },
+    {
+      "file": "knulli.png",
+      "platform": "knulli",
+      "source": "https://avatars.githubusercontent.com/u/166268572",
+      "owner": "KNULLI",
+      "licence": "GitHub organisation avatar of knulli-cfw"
+    },
+    {
+      "file": "lakka.svg",
+      "platform": "lakka",
+      "source": "https://raw.githubusercontent.com/libretro/retroarch-assets/master/src/xmb/flatui/lakka.svg",
+      "owner": "Lakka (libretro)",
+      "licence": "file from libretro/retroarch-assets, CC-BY-4.0"
+    },
+    {
+      "file": "minui.png",
+      "platform": "minui",
+      "source": "https://avatars.githubusercontent.com/u/225589",
+      "owner": "Shaun Inman",
+      "licence": "GitHub avatar of shauninman, the author of MinUI"
+    },
+    {
+      "file": "misterfpga.png",
+      "platform": "misterfpga",
+      "source": "https://avatars.githubusercontent.com/u/29345272",
+      "owner": "MiSTer FPGA",
+      "licence": "GitHub organisation avatar of MiSTer-devel"
+    },
+    {
+      "file": "nextui.png",
+      "platform": "nextui",
+      "source": "https://avatars.githubusercontent.com/u/202386615",
+      "owner": "LoveRetro",
+      "licence": "GitHub organisation avatar of LoveRetro"
+    },
+    {
+      "file": "recalbox.svg",
+      "platform": "recalbox",
+      "source": "https://raw.githubusercontent.com/homarr-labs/dashboard-icons/main/svg/recalbox.svg",
+      "owner": "Recalbox",
+      "licence": "file from homarr-labs/dashboard-icons, Apache-2.0"
+    },
+    {
+      "file": "retroarch.svg",
+      "platform": "retroarch",
+      "source": "https://raw.githubusercontent.com/libretro/RetroArch/master/media/retroarch-vector_invader-only.svg",
+      "owner": "libretro",
+      "licence": "repository licence GPL-3.0"
+    },
+    {
+      "file": "retrobat.png",
+      "platform": "retrobat",
+      "source": "https://raw.githubusercontent.com/RetroBat-Official/retrobat/main/system/resources/retrobat_logo_notext.png",
+      "owner": "RetroBat",
+      "licence": "repository states no licence"
+    },
+    {
+      "file": "retrodeck.svg",
+      "platform": "retrodeck",
+      "source": "https://raw.githubusercontent.com/RetroDECK/RetroDECK/main/res/icon.svg",
+      "owner": "RetroDECK",
+      "licence": "repository licence GPL-3.0"
+    },
+    {
+      "file": "retropie.png",
+      "platform": "retropie",
+      "source": "https://avatars.githubusercontent.com/u/11378204",
+      "owner": "RetroPie",
+      "licence": "GitHub organisation avatar of RetroPie"
+    },
+    {
+      "file": "rocknix.png",
+      "platform": "rocknix",
+      "source": "https://avatars.githubusercontent.com/u/163176886",
+      "owner": "ROCKNIX",
+      "licence": "GitHub organisation avatar of ROCKNIX"
+    },
+    {
+      "file": "romm.png",
+      "platform": "romm",
+      "source": "https://avatars.githubusercontent.com/u/164058018",
+      "owner": "RomM",
+      "licence": "GitHub organisation avatar of rommapp"
+    }
+  ]
+}

docs_assets/overrides/404.html

@@ -0,0 +1,37 @@
+{% extends "main.html" %}
+
+{#
+  The page a stale link lands on. Pages have moved before (file cards
+  refiled between manufacturers), so it offers the search, the two pages a
+  visitor most often wants, and the list a moved emulator, system or
+  platform page belongs to.
+#}
+{% block content %}
+  <h1>Page not found</h1>
+  <p class="rb-lead">This address has no page. It may have moved since the link was written.</p>
+  <p><label class="rb-notfound-search" for="__search" tabindex="0">Search the site</label></p>
+  <ul>
+    <li><a href="{{ config.site_url }}">Start here</a>: what BIOS files are and how to install them</li>
+    <li><a href="{{ config.site_url }}which-pack/">Get your files</a>: the pack or the command for your device</li>
+    <li>Browse <a href="{{ config.site_url }}platforms/">platforms</a>, <a href="{{ config.site_url }}systems/">systems</a> or <a href="{{ config.site_url }}emulators/">emulators</a></li>
+  </ul>
+  <p id="rb-notfound-hint" hidden></p>
+  <script>
+    (() => {
+      const match = window.location.pathname.match(/\/(emulators|systems|platforms)\/([^/]+)\/?$/);
+      const hint = document.getElementById("rb-notfound-hint");
+      if (!match || !hint) return;
+      const link = document.createElement("a");
+      link.href = "{{ config.site_url }}" + match[1] + "/";
+      link.textContent = "the list of " + match[1];
+      hint.append("No page is named " + decodeURIComponent(match[2]) + " here. It may be listed under another name in ", link, ".");
+      hint.hidden = false;
+    })();
+    document.querySelector(".rb-notfound-search")?.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    });
+  </script>
+{% endblock %}

docs_assets/overrides/main.html

@@ -9,25 +9,43 @@
   taking on two image dependencies. The links get shared on Discord, Reddit and
   forums, where a bare URL with no preview is the difference between a card and
   a grey rectangle.
+
+  One sharing card per section (docs_assets/og, made by
+  scripts/make_og_cards.py). The section is the page's level when the
+  generator gives one, otherwise it follows from the URL.
 #}
 {% block extrahead %}
   {% set page_title = page.meta.title if page and page.meta and page.meta.title else (page.title if page and page.title else config.site_name) %}
   {% set page_description = page.meta.description if page and page.meta and page.meta.description else config.site_description %}
   {% set page_url = page.canonical_url if page and page.canonical_url else config.site_url %}
-  {% set preview_image = config.site_url ~ 'assets/images/logo.png' if config.site_url else '' %}
+  {% set url = page.url if page and page.url else '' %}
+  {% set level = page.meta.level if page and page.meta and page.meta.level else '' %}
+  {% if not url %}{% set section = 'home' %}
+  {% elif level in ['start', 'setup', 'explore', 'reference', 'contribute'] %}{% set section = level %}
+  {% elif url.startswith('which-pack') or url.startswith('wiki/first-install') or url.startswith('wiki/faq') or url.startswith('wiki/getting-started') %}{% set section = 'start' %}
+  {% elif url.startswith('platforms') %}{% set section = 'setup' %}
+  {% elif url.startswith('systems') or url.startswith('emulators') or url.startswith('files') %}{% set section = 'explore' %}
+  {% elif url.startswith('contributing') or url.startswith('wiki/adding') or url.startswith('wiki/profiling') or url.startswith('wiki/testing') or url.startswith('wiki/release') %}{% set section = 'contribute' %}
+  {% else %}{% set section = 'reference' %}{% endif %}
+  {% set preview_image = config.site_url ~ 'assets/og/' ~ section ~ '.png' if config.site_url else '' %}
 
-  <meta property="og:type" content="website">
+  <meta property="og:type" content="{{ 'website' if not url else 'article' }}">
   <meta property="og:site_name" content="{{ config.site_name }}">
   <meta property="og:title" content="{{ page_title }}">
   <meta property="og:description" content="{{ page_description }}">
   {% if page_url %}<meta property="og:url" content="{{ page_url }}">{% endif %}
-  {% if preview_image %}<meta property="og:image" content="{{ preview_image }}">{% endif %}
+  {% if preview_image %}
+  <meta property="og:image" content="{{ preview_image }}">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:image:alt" content="{{ config.site_name }}: {{ page_title }}">
+  {% endif %}
 
   {# The sitemap, named from every page: a project site under /retrobios/
      cannot serve the host-root robots.txt that would announce it. #}
   {% if config.site_url %}<link rel="sitemap" type="application/xml" title="Sitemap" href="{{ config.site_url }}sitemap.xml">{% endif %}
 
-  <meta name="twitter:card" content="summary">
+  <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="{{ page_title }}">
   <meta name="twitter:description" content="{{ page_description }}">
   {% if preview_image %}<meta name="twitter:image" content="{{ preview_image }}">{% endif %}

docs_assets/site.js

@@ -2,16 +2,65 @@
 (() => {
   "use strict";
 
+  // A heading's words without its permalink sign.
+  const headingText = (heading) => {
+    const copy = heading.cloneNode(true);
+    copy.querySelectorAll(".headerlink").forEach((link) => link.remove());
+    return copy.textContent.trim();
+  };
+
   const textFromHeading = (element) => {
     let cursor = element;
     while (cursor) {
       cursor = cursor.previousElementSibling;
       if (!cursor) break;
       if (/^H[1-6]$/.test(cursor.tagName)) {
-        return cursor.textContent.trim();
+        return headingText(cursor);
       }
     }
-    return document.querySelector("h1")?.textContent.trim() || "Data table";
+    const title = document.querySelector("h1");
+    return title ? headingText(title) : "Data table";
+  };
+
+  // A scroller is a stop in the tab order only while it overflows: a table
+  // in a closed block or a hidden tab gains its overflow later.
+  const markScrollable = (container, heading) => {
+    if (!container) return;
+    container.dataset.rbHeading = heading;
+    if (container.scrollWidth > container.clientWidth + 1) {
+      container.tabIndex = 0;
+      container.setAttribute("role", "region");
+      container.setAttribute("aria-label", `${heading}, scrollable table`);
+    } else if (container.getAttribute("role") === "region") {
+      container.removeAttribute("tabindex");
+      container.removeAttribute("role");
+      container.removeAttribute("aria-label");
+    }
+  };
+
+  const recheckScrollable = () => {
+    document.querySelectorAll(".md-typeset__scrollwrap[data-rb-heading]").forEach((container) => {
+      markScrollable(container, container.dataset.rbHeading);
+    });
+  };
+
+  // A table whose rows end in an action (a download button) is laid out one
+  // block per row on a phone, each cell under its column name, so the action
+  // never sits behind a horizontal scroll.
+  const stackActionTable = (table) => {
+    if (!table.querySelector("tbody .md-button")) return;
+    const labels = Array.from(table.querySelectorAll("thead th")).map((cell) =>
+      cell.textContent.trim()
+    );
+    if (!labels.length) return;
+    table.dataset.rbStack = "true";
+    table.querySelectorAll("tbody tr").forEach((row) => {
+      Array.from(row.children).forEach((cell, column) => {
+        if (labels[column] && !cell.hasAttribute("data-label")) {
+          cell.setAttribute("data-label", labels[column]);
+        }
+      });
+    });
   };
 
   const enhanceTables = () => {
@@ -27,7 +76,9 @@
         if (first && !first.hasAttribute("scope")) first.setAttribute("scope", "row");
       });
 
-      const container = table.parentElement;
+      // The scrolling element is Material's scrollwrap, one level above
+      // the table's own wrapper.
+      const container = table.closest(".md-typeset__scrollwrap") || table.parentElement;
       const heading = textFromHeading(container);
       if (!table.querySelector("caption")) {
         const caption = document.createElement("caption");
@@ -35,11 +86,8 @@
         caption.textContent = heading;
         table.prepend(caption);
       }
-      if (container && container.scrollWidth > container.clientWidth) {
-        container.tabIndex = 0;
-        container.setAttribute("role", "region");
-        container.setAttribute("aria-label", `${heading}, scrollable table`);
-      }
+      stackActionTable(table);
+      markScrollable(container, heading);
 
       const rows = Array.from(table.querySelectorAll("tbody tr"));
       if (rows.length < 20 || !container || container.dataset.rbFilter === "true") {
@@ -88,10 +136,15 @@
       const heading = dialog.querySelector("h1, h2, h3");
       dialog.setAttribute("aria-label", heading?.textContent.trim() || "Site search");
     });
-    document.querySelectorAll('[role="progressbar"]').forEach((progress) => {
-      if (!progress.hasAttribute("aria-label") && !progress.hasAttribute("aria-labelledby")) {
-        progress.setAttribute("aria-label", "Loading page");
-      }
+    // The page-load bar is drawn for the eye only: the new page announces
+    // itself when it arrives.
+    document.querySelectorAll(".md-progress").forEach((progress) => {
+      progress.setAttribute("aria-hidden", "true");
+    });
+    // Material wraps each copy button in a nav element: one unnamed
+    // navigation landmark per code block. The button stays, the landmark goes.
+    document.querySelectorAll("nav.md-code__nav").forEach((nav) => {
+      nav.setAttribute("role", "none");
     });
   };
 
@@ -130,6 +183,16 @@
     resolveFileAddress();
   };
 
+  let resizeTimer = 0;
+  window.addEventListener("resize", () => {
+    window.clearTimeout(resizeTimer);
+    resizeTimer = window.setTimeout(recheckScrollable, 150);
+  });
+  document.addEventListener("toggle", recheckScrollable, true);
+  document.addEventListener("change", (event) => {
+    if (event.target.matches?.(".tabbed-set > input")) recheckScrollable();
+  });
+
   if (window.document$?.subscribe) {
     window.document$.subscribe(enhance);
   } else if (document.readyState === "loading") {