From 304a38ba392c1eac869bd0b098b456db01789499 Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 14:47:35 -0700
Subject: [PATCH 01/14] css: consistently use pseudo-elements `::before` and
 `::after`

---
 css/m-components.css    | 28 ++++++++++++++--------------
 css/m-documentation.css | 10 +++++-----
 css/m-grid.css          |  2 +-
 css/m-layout.css        |  2 +-
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index efbefb11..1a616222 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -519,7 +519,7 @@ figure.m-figure {
   position: relative;
   display: table;
 }
-figure.m-figure:before {
+figure.m-figure::before {
   position: absolute;
   content: ' ';
   top: 0;
@@ -532,7 +532,7 @@ figure.m-figure:before {
   border-radius: var(--border-radius);
   border-color: var(--line-color);
 }
-figure.m-figure.m-flat:before {
+figure.m-figure.m-flat::before {
   border-color: transparent;
 }
 figure.m-figure > * {
@@ -578,7 +578,7 @@ figure.m-figure.m-fullwidth > *:first-child {
 figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
   width: 100%;
 }
-figure.m-figure.m-fullwidth:after {
+figure.m-figure.m-fullwidth::after {
   /* Specifying bottom margin on the last element works only if it is displayed
      as table caption, so I have to hack it here. */
   content: ' ';
@@ -596,7 +596,7 @@ figure.m-figure.m-fullwidth:after {
   position: relative;
   padding: 1rem;
 }
-.m-code-figure:before, .m-console-figure:before {
+.m-code-figure::before, .m-console-figure::before {
   position: absolute;
   content: ' ';
   top: 0;
@@ -608,13 +608,13 @@ figure.m-figure.m-fullwidth:after {
   border-width: 0.125rem;
   border-radius: var(--border-radius);
 }
-.m-code-figure:before {
+.m-code-figure::before {
   border-color: var(--code-background-color);
 }
-.m-console-figure:before {
+.m-console-figure::before {
   border-color: var(--console-background-color);
 }
-.m-code-figure.m-flat:before, .m-console-figure.m-flat:before {
+.m-code-figure.m-flat::before, .m-console-figure.m-flat::before {
   border-color: transparent;
 }
 .m-code-figure > pre:first-child, .m-console-figure > pre:first-child {
@@ -1273,19 +1273,19 @@ table.m-table tr.m-dim th a:active, table.m-table th.m-dim a:active {
 }
 
 /* Colored figure */
-figure.m-figure.m-default:before { border-color: var(--default-filled-background-color); }
+figure.m-figure.m-default::before { border-color: var(--default-filled-background-color); }
 figure.m-figure.m-default figcaption { color: var(--default-color); }
-figure.m-figure.m-primary:before { border-color: var(--primary-filled-background-color); }
+figure.m-figure.m-primary::before { border-color: var(--primary-filled-background-color); }
 figure.m-figure.m-primary figcaption { color: var(--primary-color); }
-figure.m-figure.m-success:before { border-color: var(--success-filled-background-color); }
+figure.m-figure.m-success::before { border-color: var(--success-filled-background-color); }
 figure.m-figure.m-success figcaption { color: var(--success-color); }
-figure.m-figure.m-warning:before { border-color: var(--warning-filled-background-color); }
+figure.m-figure.m-warning::before { border-color: var(--warning-filled-background-color); }
 figure.m-figure.m-warning figcaption { color: var(--warning-color); }
-figure.m-figure.m-danger:before { border-color: var(--danger-filled-background-color); }
+figure.m-figure.m-danger::before { border-color: var(--danger-filled-background-color); }
 figure.m-figure.m-danger figcaption { color: var(--danger-color); }
-figure.m-figure.m-info:before { border-color: var(--info-filled-background-color); }
+figure.m-figure.m-info::before { border-color: var(--info-filled-background-color); }
 figure.m-figure.m-info figcaption { color: var(--info-color); }
-figure.m-figure.m-dim:before { border-color: var(--dim-filled-background-color); }
+figure.m-figure.m-dim::before { border-color: var(--dim-filled-background-color); }
 figure.m-figure.m-dim { color: var(--dim-color); }
 figure.m-figure.m-dim a { color: var(--dim-link-color); }
 figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-dim a:active {
diff --git a/css/m-documentation.css b/css/m-documentation.css
index 12296f0e..38ec5615 100644
--- a/css/m-documentation.css
+++ b/css/m-documentation.css
@@ -45,8 +45,8 @@ ul.m-doc li.m-doc-collapsible > a:first-child:active {
   color: var(--color);
 }
 a.m-doc-self,
-ul.m-doc li.m-doc-expansible > a:first-child:before,
-ul.m-doc li.m-doc-collapsible > a:first-child:before {
+ul.m-doc li.m-doc-expansible > a:first-child::before,
+ul.m-doc li.m-doc-collapsible > a:first-child::before {
   color: var(--article-heading-color);
 }
 a.m-doc-self:hover, a.m-doc-self:focus, a.m-doc-self:active,
@@ -110,14 +110,14 @@ ul.m-doc li.m-doc-expansible, ul.m-doc li.m-doc-collapsible {
 ul.m-doc li.m-doc-expansible > ul.m-doc, ul.m-doc li.m-doc-collapsible > ul.m-doc {
   margin-left: 0.5rem;
 }
-ul.m-doc li.m-doc-expansible > a:first-child:before, ul.m-doc li.m-doc-collapsible > a:first-child:before {
+ul.m-doc li.m-doc-expansible > a:first-child::before, ul.m-doc li.m-doc-collapsible > a:first-child::before {
   background-color: var(--background-color);
   display: inline-block;
   width: 0.4rem;
   font-weight: bold;
 }
-ul.m-doc li.m-doc-expansible > a:first-child:before { content: '⊕'; }
-ul.m-doc li.m-doc-collapsible > a:first-child:before { content: '⊖'; }
+ul.m-doc li.m-doc-expansible > a:first-child::before { content: '⊕'; }
+ul.m-doc li.m-doc-collapsible > a:first-child::before { content: '⊖'; }
 
 h1 .m-doc-template, h1 .m-doc-include {
   font-size: 1.3rem;
diff --git a/css/m-grid.css b/css/m-grid.css
index 631c9435..c520741d 100644
--- a/css/m-grid.css
+++ b/css/m-grid.css
@@ -39,7 +39,7 @@ body { margin: 0; }
   margin-left: -1rem;
   margin-right: -1rem;
 }
-.m-row:after { /* avoid rows floating around each other */
+.m-row::after { /* avoid rows floating around each other */
   content: ' ';
   clear: both;
   display: table;
diff --git a/css/m-layout.css b/css/m-layout.css
index 83ed0023..364b313c 100644
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -96,7 +96,7 @@ body > header > nav #m-navbar-brand .m-thin {
 body > header > nav #m-navbar-brand .m-breadcrumb {
   color: var(--header-breadcrumb-color);
 }
-body > header > nav a#m-navbar-show:before, body > header > nav a#m-navbar-hide:before {
+body > header > nav a#m-navbar-show::before, body > header > nav a#m-navbar-hide::before {
   content:'\2630';
 }
 body > header > nav #m-navbar-collapse {

From d1ee9cdfdcfcbd72bc4db4d7e63cd137e3cb6fc0 Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 14:08:20 -0700
Subject: [PATCH 02/14] css: refactor table selectors

---
 css/m-components.css | 256 +++++++++++++++++--------------------------
 1 file changed, 100 insertions(+), 156 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index 1a616222..ed655e3e 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -386,7 +386,7 @@ div.m-scroll > table.m-table:last-child {
 table.m-table:not(.m-flat) tbody tr:hover {
   background-color: var(--line-color);
 }
-table.m-table th, table.m-table td {
+table.m-table :is(th, td) {
   vertical-align: top;
   border-style: solid;
   border-top-width: 0.0625rem;
@@ -398,20 +398,20 @@ table.m-table th, table.m-table td {
 table.m-table caption {
   padding-bottom: 0.5rem;
 }
-table.m-table thead tr:first-child th, table.m-table thead tr:first-child td {
+table.m-table thead tr:first-child :is(th, td) {
   border-top-width: 0.125rem;
 }
-table.m-table thead th, table.m-table thead td {
+table.m-table thead :is(th, td) {
   border-bottom-width: 0.125rem;
   vertical-align: bottom;
 }
-table.m-table tfoot th, table.m-table tfoot td {
+table.m-table tfoot :is(th, td) {
   border-top-width: 0.125rem;
 }
-table.m-table th, table.m-table td {
+table.m-table :is(th, td) {
   padding: 0.5rem;
 }
-table.m-table.m-big th, table.m-table.m-big td {
+table.m-table.m-big :is(th, td) {
   padding: 0.75rem 1rem;
 }
 table.m-table th {
@@ -420,71 +420,28 @@ table.m-table th {
 table.m-table th.m-thin {
   font-weight: normal;
 }
-table.m-table td.m-default, table.m-table th.m-default,
-table.m-table td.m-primary, table.m-table th.m-primary,
-table.m-table td.m-success, table.m-table th.m-success,
-table.m-table td.m-warning, table.m-table th.m-warning,
-table.m-table td.m-danger, table.m-table th.m-danger,
-table.m-table td.m-info, table.m-table th.m-info,
-table.m-table td.m-dim, table.m-table th.m-dim {
+table.m-table :is(th, td):is(.m-default, .m-primary, .m-success, .m-warning, .m-danger, .m-info, .m-dim) {
   padding-left: 0.4375rem;
   padding-right: 0.4375rem;
   border-left-width: 0.0625rem;
 /*   border-right-width: 0.0625rem; causes horizontal scrollbar */
 }
-table.m-table.m-big td.m-default, table.m-table.m-big th.m-default,
-table.m-table.m-big td.m-primary, table.m-table.m-big th.m-primary,
-table.m-table.m-big td.m-success, table.m-table.m-big th.m-success,
-table.m-table.m-big td.m-warning, table.m-table.m-big th.m-warning,
-table.m-table.m-big td.m-danger, table.m-table.m-big th.m-danger,
-table.m-table.m-big td.m-info, table.m-table.m-big th.m-info,
-table.m-table.m-big td.m-dim, table.m-table.m-big th.m-dim {
+table.m-table.m-big :is(th, td):is(.m-default, .m-primary, .m-success, .m-warning, .m-danger, .m-info, .m-dim) {
   padding-left: 0.9375rem;
   padding-right: 0.9375rem;
   border-left-width: 0.0625rem;
 /*   border-right-width: 0.0625rem; causes horizontal scrollbar */
 }
-
-table.m-table tr.m-default td, table.m-table td.m-default,
-table.m-table tr.m-default th, table.m-table th.m-default,
-table.m-table tr.m-primary td, table.m-table td.m-primary,
-table.m-table tr.m-primary th, table.m-table th.m-primary,
-table.m-table tr.m-success td, table.m-table td.m-success,
-table.m-table tr.m-success th, table.m-table th.m-success,
-table.m-table tr.m-warning td, table.m-table td.m-warning,
-table.m-table tr.m-warning th, table.m-table th.m-warning,
-table.m-table tr.m-danger td, table.m-table td.m-danger,
-table.m-table tr.m-danger th, table.m-table th.m-danger,
-table.m-table tr.m-info td, table.m-table td.m-info,
-table.m-table tr.m-info th, table.m-table th.m-info,
-table.m-table tr.m-dim td, table.m-table td.m-dim,
-table.m-table tr.m-dim th, table.m-table th.m-dim {
+table.m-table tr:is(.m-default, .m-primary, .m-success, .m-warning, .m-danger, .m-info, .m-dim) :is(th, td),
+table.m-table :is(th, td):is(.m-default, .m-primary, .m-success, .m-warning, .m-danger, .m-info, .m-dim) {
   border-color: var(--background-color);
 }
 
 /* Code on a colored background has a semi-transparent background */
-.m-note pre, .m-note code,
-table.m-table tr.m-default pre, table.m-table tr.m-default code,
-table.m-table td.m-default pre, table.m-table td.m-default code,
-table.m-table th.m-default pre, table.m-table th.m-default code,
-table.m-table tr.m-primary pre, table.m-table tr.m-primary code,
-table.m-table td.m-primary pre, table.m-table td.m-primary code,
-table.m-table th.m-primary pre, table.m-table th.m-primary code,
-table.m-table tr.m-success pre, table.m-table tr.m-success code,
-table.m-table td.m-success pre, table.m-table td.m-success code,
-table.m-table th.m-success pre, table.m-table th.m-success code,
-table.m-table tr.m-warning pre, table.m-table tr.m-warning code,
-table.m-table td.m-warning pre, table.m-table td.m-warning code,
-table.m-table th.m-warning pre, table.m-table th.m-warning code,
-table.m-table tr.m-danger pre, table.m-table tr.m-danger code,
-table.m-table td.m-danger pre, table.m-table td.m-danger code,
-table.m-table th.m-danger pre, table.m-table th.m-danger code,
-table.m-table tr.m-info pre, table.m-table tr.m-info code,
-table.m-table td.m-info pre, table.m-table td.m-info code,
-table.m-table th.m-info pre, table.m-table th.m-info code,
-table.m-table tr.m-dim pre, table.m-table tr.m-dim code,
-table.m-table td.m-dim pre, table.m-table td.m-dim code,
-table.m-table th.m-dim pre, table.m-table th.m-dim code {
+:is(
+  .m-note,
+  table.m-table :is(tr, td, th):is(.m-default, .m-primary, .m-success, .m-warning, .m-danger, .m-info, .m-dim)
+) :is(pre, code) {
   background-color: var(--code-note-background-color);
 }
 
@@ -1120,155 +1077,142 @@ div.m-button.m-dim a:hover, div.m-button.m-dim a:focus, div.m-button.m-dim a:act
 /* Colored note, table coloring */
 .m-note.m-default { background-color: var(--default-filled-background-color); }
 .m-note.m-default,
-table.m-table tr.m-default td, table.m-table td.m-default,
-table.m-table tr.m-default th, table.m-table th.m-default {
+table.m-table tr.m-default :is(td, th),
+table.m-table :is(td, th).m-default {
   /* No background for default table to keep the row hover */
   color: var(--default-filled-color);
 }
-.m-note.m-default a:hover,
-table.m-table tr.m-default td a:hover, table.m-table td.m-default a:hover,
-table.m-table tr.m-default th a:hover, table.m-table th.m-default a:hover,
-.m-note.m-default a:focus,
-table.m-table tr.m-default td a:focus, table.m-table td.m-default a:focus,
-table.m-table tr.m-default th a:focus, table.m-table th.m-default a:focus,
-.m-note.m-default a:active,
-table.m-table tr.m-default td a:active, table.m-table td.m-default a:active,
-table.m-table tr.m-default th a:active, table.m-table th.m-default a:active {
+:is(
+  .m-note.m-default,
+  table.m-table tr.m-default :is(td, th),
+  table.m-table :is(td, th).m-default
+) a:is(:hover, :focus, :active) {
   color: var(--default-filled-link-active-color);
 }
-.m-note.m-primary a,
-table.m-table tr.m-primary td a, table.m-table td.m-primary a,
-table.m-table tr.m-primary th a, table.m-table th.m-primary a {
-  color: var(--default-filled-link-color);
-}
+
 .m-note.m-primary,
-table.m-table tr.m-primary td, table.m-table td.m-primary,
-table.m-table tr.m-primary th, table.m-table th.m-primary {
+table.m-table tr.m-primary :is(td, th),
+table.m-table :is(td, th).m-primary {
   background-color: var(--primary-filled-background-color);
   color: var(--primary-filled-color);
 }
-.m-note.m-primary a,
-table.m-table tr.m-primary td a, table.m-table td.m-primary a,
-table.m-table tr.m-primary th a, table.m-table th.m-primary a {
+:is(
+  .m-note.m-primary,
+  table.m-table tr.m-primary :is(td, th),
+  table.m-table :is(td, th).m-primary
+) a {
   color: var(--primary-filled-link-color);
 }
-.m-note.m-primary a:hover,
-table.m-table tr.m-primary td a:hover, table.m-table td.m-primary a:hover,
-table.m-table tr.m-primary th a:hover, table.m-table th.m-primary a:hover,
-.m-note.m-primary a:focus,
-table.m-table tr.m-primary td a:focus, table.m-table td.m-primary a:focus,
-table.m-table tr.m-primary th a:focus, table.m-table th.m-primary a:focus,
-.m-note.m-primary a:active,
-table.m-table tr.m-primary td a:active, table.m-table td.m-primary a:active,
-table.m-table tr.m-primary th a:active, table.m-table th.m-primary a:active {
+:is(
+  .m-note.m-primary,
+  table.m-table tr.m-primary :is(td, th),
+  table.m-table :is(td, th).m-primary
+) a:is(:hover, :focus, :active) {
   color: var(--primary-filled-link-active-color);
 }
+
 .m-note.m-success,
-table.m-table tr.m-success td, table.m-table td.m-success,
-table.m-table tr.m-success th, table.m-table th.m-success {
+table.m-table tr.m-success :is(td, th),
+table.m-table :is(td, th).m-success {
   background-color: var(--success-filled-background-color);
   color: var(--success-filled-color);
 }
-.m-note.m-success a,
-table.m-table tr.m-success td a, table.m-table td.m-success a,
-table.m-table tr.m-success th a, table.m-table th.m-success a {
+:is(
+  .m-note.m-success,
+  table.m-table tr.m-success :is(td, th),
+  table.m-table :is(td, th).m-success
+) a {
   color: var(--success-filled-link-color);
 }
-.m-note.m-success a:hover,
-table.m-table tr.m-success td a:hover, table.m-table td.m-success a:hover,
-table.m-table tr.m-success th a:hover, table.m-table th.m-success a:hover,
-.m-note.m-success a:focus,
-table.m-table tr.m-success td a:focus, table.m-table td.m-success a:focus,
-table.m-table tr.m-success th a:focus, table.m-table th.m-success a:focus,
-.m-note.m-success a:active,
-table.m-table tr.m-success td a:active, table.m-table td.m-success a:active,
-table.m-table tr.m-success th a:active, table.m-table th.m-success a:active {
+:is(
+  .m-note.m-success,
+  table.m-table tr.m-success :is(td, th),
+  table.m-table :is(td, th).m-success
+) a:is(:hover, :focus, :active) {
   color: var(--success-filled-link-active-color);
 }
-.m-note.m-warning, table.m-table tr.m-warning td, table.m-table td.m-warning,
-                   table.m-table tr.m-warning th, table.m-table th.m-warning {
+
+.m-note.m-warning,
+table.m-table tr.m-warning :is(td, th),
+table.m-table :is(td, th).m-warning {
   background-color: var(--warning-filled-background-color);
   color: var(--warning-filled-color);
 }
-.m-note.m-warning a, table.m-table tr.m-warning td a, table.m-table td.m-warning a,
-                     table.m-table tr.m-warning th a, table.m-table th.m-warning a {
+:is(
+  .m-note.m-warning,
+  table.m-table tr.m-warning :is(td, th),
+  table.m-table :is(td, th).m-warning
+) a {
   color: var(--warning-filled-link-color);
 }
-.m-note.m-warning a:hover,
-table.m-table tr.m-warning td a:hover, table.m-table td.m-warning a:hover,
-table.m-table tr.m-warning th a:hover, table.m-table th.m-warning a:hover,
-.m-note.m-warning a:focus,
-table.m-table tr.m-warning td a:focus, table.m-table td.m-warning a:focus,
-table.m-table tr.m-warning th a:focus, table.m-table th.m-warning a:focus,
-.m-note.m-warning a:active,
-table.m-table tr.m-warning td a:active, table.m-table td.m-warning a:active,
-table.m-table tr.m-warning th a:active, table.m-table th.m-warning a:active {
+:is(
+  .m-note.m-warning,
+  table.m-table tr.m-warning :is(td, th),
+  table.m-table :is(td, th).m-warning
+) a:is(:hover, :focus, :active) {
   color: var(--warning-filled-link-active-color);
 }
+
 .m-note.m-danger,
-table.m-table tr.m-danger td, table.m-table td.m-danger,
-table.m-table tr.m-danger th, table.m-table th.m-danger {
+table.m-table tr.m-danger :is(td, th),
+table.m-table :is(td, th).m-danger {
   background-color: var(--danger-filled-background-color);
   color: var(--danger-filled-color);
 }
-.m-note.m-danger a,
-table.m-table tr.m-danger td a, table.m-table td.m-danger a,
-table.m-table tr.m-danger th a, table.m-table th.m-danger a {
+:is(
+  .m-note.m-danger,
+  table.m-table tr.m-danger :is(td, th),
+  table.m-table :is(td, th).m-danger
+) a {
   color: var(--danger-filled-link-color);
 }
-.m-note.m-danger a:hover,
-table.m-table tr.m-danger td a:hover, table.m-table td.m-danger a:hover,
-table.m-table tr.m-danger th a:hover, table.m-table th.m-danger a:hover,
-.m-note.m-danger a:focus,
-table.m-table tr.m-danger td a:focus, table.m-table td.m-danger a:focus,
-table.m-table tr.m-danger th a:focus, table.m-table th.m-danger a:focus,
-.m-note.m-danger a:active,
-table.m-table tr.m-danger td a:active, table.m-table td.m-danger a:active,
-table.m-table tr.m-danger th a:active, table.m-table th.m-danger a:active {
+:is(
+  .m-note.m-danger,
+  table.m-table tr.m-danger :is(td, th),
+  table.m-table :is(td, th).m-danger
+) a:is(:hover, :focus, :active) {
   color: var(--danger-filled-link-active-color);
 }
+
 .m-note.m-info,
-table.m-table tr.m-info td, table.m-table td.m-info,
-table.m-table tr.m-info th, table.m-table th.m-info {
+table.m-table tr.m-info :is(td, th),
+table.m-table :is(td, th).m-info {
   background-color: var(--info-filled-background-color);
   color: var(--info-filled-color);
 }
-.m-note.m-info a,
-table.m-table tr.m-info td a, table.m-table td.m-info a,
-table.m-table tr.m-info th a, table.m-table th.m-info a {
+:is(
+  .m-note.m-info,
+  table.m-table tr.m-info :is(td, th),
+  table.m-table :is(td, th).m-info
+) a {
   color: var(--info-filled-link-color);
 }
-.m-note.m-info a:hover,
-table.m-table tr.m-info td a:hover, table.m-table td.m-info a:hover,
-table.m-table tr.m-info th a:hover, table.m-table th.m-info a:hover,
-.m-note.m-info a:focus,
-table.m-table tr.m-info td a:focus, table.m-table td.m-info a:focus,
-table.m-table tr.m-info th a:focus, table.m-table th.m-info a:focus,
-.m-note.m-info a:active,
-table.m-table tr.m-info td a:active, table.m-table td.m-info a:active,
-table.m-table tr.m-info th a:active, table.m-table th.m-info a:active {
+:is(
+  .m-note.m-info,
+  table.m-table tr.m-info :is(td, th),
+  table.m-table :is(td, th).m-info
+) a:is(:hover, :focus, :active) {
   color: var(--info-filled-link-active-color);
 }
+
 .m-note.m-dim,
-table.m-table tr.m-dim td, table.m-table td.m-dim,
-table.m-table tr.m-dim th, table.m-table th.m-dim {
+table.m-table tr.m-dim :is(td, th),
+table.m-table :is(td, th).m-dim {
   background-color: var(--dim-filled-background-color);
   color: var(--dim-filled-color);
 }
-.m-note.m-dim a,
-table.m-table tr.m-dim td a, table.m-table td.m-dim a,
-table.m-table tr.m-dim th a, table.m-table th.m-dim a {
+:is(
+  .m-note.m-dim,
+  table.m-table tr.m-dim :is(td, th),
+  table.m-table :is(td, th).m-dim
+) a {
   color: var(--dim-filled-link-color);
 }
-.m-note.m-dim a:hover,
-table.m-table tr.m-dim td a:hover, table.m-table td.m-dim a:hover,
-table.m-table tr.m-dim th a:hover, table.m-table th.m-dim a:hover,
-.m-note.m-dim a:focus,
-table.m-table tr.m-dim td a:focus, table.m-table td.m-dim a:focus,
-table.m-table tr.m-dim th a:focus, table.m-table th.m-dim a:focus,
-.m-note.m-dim a:active,
-table.m-table tr.m-dim td a:active, table.m-table td.m-dim a:active,
-table.m-table tr.m-dim th a:active, table.m-table th.m-dim a:active {
+:is(
+  .m-note.m-dim,
+  table.m-table tr.m-dim :is(td, th),
+  table.m-table :is(td, th).m-dim
+) a:is(:hover, :focus, :active) {
   color: var(--dim-filled-link-active-color);
 }
 

From 9754ba5ed1fa771d2f36caecd85a5c2794c39ac8 Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 14:34:51 -0700
Subject: [PATCH 03/14] css: combine img and svg selectors

---
 css/m-components.css | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index ed655e3e..9336a30a 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -446,7 +446,7 @@ table.m-table :is(th, td):is(.m-default, .m-primary, .m-success, .m-warning, .m-
 }
 
 /* Image. Ensure everything is done for both <img> and <svg>. */
-img.m-image, svg.m-image {
+:is(img, svg).m-image {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -454,11 +454,11 @@ img.m-image, svg.m-image {
 div.m-image {
   text-align: center;
 }
-img.m-image, svg.m-image, div.m-image img, div.m-image svg {
+:is(img, svg).m-image, div.m-image :is(img, svg) {
   max-width: 100%;
   border-radius: var(--border-radius);
 }
-div.m-image.m-fullwidth img, div.m-image.m-fullwidth svg {
+div.m-image.m-fullwidth :is(img, svg) {
   width: 100%;
 }
 /* Image badge. Deliberately omitting <svg> since I don't see any use for those
@@ -507,7 +507,7 @@ figure.m-figure > *:last-child {
      priority than this */
   margin-bottom: 1rem !important;
 }
-figure.m-figure img, figure.m-figure svg {
+figure.m-figure :is(img, svg) {
   position: relative; /* so it's above the border */
   margin-left: 0;
   margin-right: 0;
@@ -516,11 +516,11 @@ figure.m-figure img, figure.m-figure svg {
   border-top-right-radius: var(--border-radius);
   max-width: 100%;
 }
-figure.m-figure.m-flat img, figure.m-figure.m-flat svg {
+figure.m-figure.m-flat :is(img, svg) {
   border-bottom-left-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
 }
-figure.m-figure a img, figure.m-figure a svg {
+figure.m-figure a :is(img, svg) {
   margin-left: -1rem;
   margin-right: -1rem;
 }
@@ -532,7 +532,7 @@ figure.m-figure.m-fullwidth > *:first-child {
   /* otherwise figure with clickable image is centered differently */
   display: inline;
 }
-figure.m-figure.m-fullwidth img, figure.m-figure.m-fullwidth svg {
+figure.m-figure.m-fullwidth :is(img, svg) {
   width: 100%;
 }
 figure.m-figure.m-fullwidth::after {
@@ -1512,8 +1512,8 @@ div.m-plot svg .m-bar.m-dim,
    figure.m-figure. */
 p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
 .m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image,
-img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math,
-div.m-graph, div.m-plot {
+:is(img, svg).m-image, figure.m-figure, .m-imagegrid, div.m-math, div.m-graph,
+div.m-plot {
   margin-bottom: 1rem;
 }
 p:last-child, p.m-nopadb, ul:last-child, ul.m-nopadb,
@@ -1526,8 +1526,7 @@ hr:last-child, hr.m-nopadb, .m-note:last-child, .m-note.m-nopadb,
 div.m-button:last-child, div.m-button.m-nopadb,
 div.m-scroll:last-child, div.m-scroll.m-nopadb,
 table.m-table:last-child, table.m-table.m-nopadb,
-img.m-image:last-child, img.m-image.m-nopadb,
-svg.m-image:last-child, svg.m-image.m-nopadb,
+:is(img, svg).m-image:last-child, :is(img, svg).m-image.m-nopadb,
 div.m-image:last-child, div.m-image.m-nopadb,
 figure.m-figure:last-child, figure.m-figure.m-nopadb,
 .m-imagegrid:last-child, .m-imagegrid.m-nopadb,
@@ -1544,7 +1543,7 @@ li > p:last-child, li > blockquote:last-child, li > pre:last-child,
 li > .m-code-figure:last-child, li > .m-console-figure:last-child,
 li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child,
 li > div.m-button:last-child, li > div.m-scroll:last-child, li > table.m-table:last-child,
-li > img.m-image:last-child, li > svg.m-image:last-child, li > div.m-image:last-child,
+li > :is(img, svg).m-image:last-child, li > div.m-image:last-child,
 li > figure.m-figure:last-child, li > div.m-math:last-child,
 li > div.m-graph:last-child, li > div.m-plot:last-child {
   margin-bottom: 1rem;
@@ -1560,8 +1559,7 @@ li:last-child > .m-block:last-child, li:last-child > .m-block.m-nopadb,
 li:last-child > div.m-button:last-child, li:last-child > div.m-button.m-nopadb,
 li:last-child > div.m-scroll:last-child, li:last-child > div.m-scroll.m-nopadb,
 li:last-child > table.m-table:last-child, li:last-child > table.m-table.m-nopadb,
-li:last-child > img.m-image:last-child, li:last-child > img.m-image.m-nopadb,
-li:last-child > svg.m-image:last-child, li:last-child > svg.m-image.m-nopadb,
+li:last-child > :is(img, svg).m-image:last-child, li:last-child > :is(img, svg).m-image.m-nopadb,
 li:last-child > div.m-image:last-child, li:last-child > div.m-image.m-nopadb,
 li:last-child > figure.m-figure:last-child, li:last-child > figure.m-figure.m-nopadb,
 li:last-child > div.m-math:last-child, li:last-child > div.m-math.m-nopadb,

From 7d84c118c78f090824638f6eb2d435d61a639134 Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 14:55:51 -0700
Subject: [PATCH 04/14] css: combine ul and ol selectors

---
 css/m-components.css | 39 +++++++++++++++------------------------
 css/m-layout.css     |  2 +-
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index 9336a30a..81bff781 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -51,7 +51,7 @@ p, ul, ol, dl {
 ul, ol {
   padding-left: 2rem;
 }
-ul ol, ul ul, ol ol, ol ul {
+:is(ul, ol) :is(ul, ol) {
   margin-bottom: 0;
 }
 main p {
@@ -184,45 +184,36 @@ h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
 }
 
 /* Lists */
-ul.m-unstyled, ol.m-unstyled {
+:is(ul, ol).m-unstyled {
   list-style-type: none;
   padding-left: 0;
 }
-ul[class*='m-block-'], ol[class*='m-block-'] {
+:is(ul, ol)[class*='m-block-'] {
   padding-left: 0;
 }
-ul[class*='m-block-'] li, ol[class*='m-block-'] li {
+:is(ul, ol)[class*='m-block-'] li {
   display: inline;
 }
-ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
+:is(ul, ol)[class*='m-block-bar-'] li:not(:last-child)::after {
   content: " | ";
 }
-ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
+:is(ul, ol)[class*='m-block-dot-'] li:not(:last-child)::after {
   content: " • ";
 }
 @media screen and (min-width: 576px) {
-  ul.m-block-bar-s, ol.m-block-bar-s,
-  ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
-  ul.m-block-bar-s li, ol.m-block-bar-s li,
-  ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
-  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
-  ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
+  :is(ul, ol):is(.m-block-bar-s, .m-block-dot-s) { padding-left: 2rem; }
+  :is(ul, ol):is(.m-block-bar-s, .m-block-dot-s) li { display: list-item; }
+  :is(ul, ol):is(.m-block-bar-s, .m-block-dot-s) li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 768px) {
-  ul.m-block-bar-m, ol.m-block-bar-m,
-  ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
-  ul.m-block-bar-m li, ol.m-block-bar-m li,
-  ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
-  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
-  ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
+  :is(ul, ol):is(.m-block-bar-m, .m-block-dot-m) { padding-left: 2rem; }
+  :is(ul, ol):is(.m-block-bar-m, .m-block-dot-m) li { display: list-item; }
+  :is(ul, ol):is(.m-block-bar-m, .m-block-dot-m) li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 992px) {
-  ul.m-block-bar-l, ol.m-block-bar-l,
-  ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
-  ul.m-block-bar-l li, ol.m-block-bar-l li,
-  ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
-  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
-  ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
+  :is(ul, ol):is(.m-block-bar-l, .m-block-dot-l) { padding-left: 2rem; }
+  :is(ul, ol):is(.m-block-bar-l, .m-block-dot-l) li { display: list-item; }
+  :is(ul, ol):is(.m-block-bar-l, .m-block-dot-l) li:not(:last-child)::after { content: ""; }
 }
 
 /* Special paragraph styling */
diff --git a/css/m-layout.css b/css/m-layout.css
index 364b313c..8bf13b3a 100644
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -458,7 +458,7 @@ nav.m-navpanel h3 {
 nav.m-navpanel ol {
   text-transform: var(--nav-categories-case);
 }
-nav.m-navpanel ol, nav.m-navpanel ul {
+nav.m-navpanel :is(ul, ol) {
   list-style-type: none;
   padding: 0;
 }

From e185be97cf057038364dcb997307373c0d98a22e Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 15:00:56 -0700
Subject: [PATCH 05/14] css: combine figure-related selectors

---
 css/m-components.css | 42 ++++++++++++++++--------------------------
 css/m-layout.css     |  5 ++---
 2 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index 81bff781..eebdc785 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -544,7 +544,7 @@ figure.m-figure.m-fullwidth::after {
   position: relative;
   padding: 1rem;
 }
-.m-code-figure::before, .m-console-figure::before {
+:is(.m-code-figure, .m-console-figure)::before {
   position: absolute;
   content: ' ';
   top: 0;
@@ -562,10 +562,10 @@ figure.m-figure.m-fullwidth::after {
 .m-console-figure::before {
   border-color: var(--console-background-color);
 }
-.m-code-figure.m-flat::before, .m-console-figure.m-flat::before {
+:is(.m-code-figure, .m-console-figure).m-flat::before {
   border-color: transparent;
 }
-.m-code-figure > pre:first-child, .m-console-figure > pre:first-child {
+:is(.m-code-figure, .m-console-figure) > pre:first-child {
   position: relative; /* so it's above the border */
   margin: -1rem -1rem 1rem -1rem;
   border-bottom-left-radius: 0;
@@ -574,7 +574,7 @@ figure.m-figure.m-fullwidth::after {
 
 /* "Nopad" code block inside a code/console figure -- show code and console
    output nicely packed together */
-.m-code-figure > pre.m-nopad, .m-console-figure > pre.m-nopad {
+:is(.m-code-figure, .m-console-figure) > pre.m-nopad {
   margin-left: -0.875rem;
   margin-right: -0.875rem;
   margin-top: -1rem;
@@ -583,13 +583,13 @@ figure.m-figure.m-fullwidth::after {
 }
 
 /* Figure caption */
-figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
+:is(figure.m-figure, .m-code-figure, .m-console-figure) figcaption {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   font-weight: var(--heading-font-weight);
   font-size: 1.17rem; /* taken from webkit defaults for h3 */
 }
-figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure figcaption a {
+:is(figure.m-figure, .m-code-figure, .m-console-figure) figcaption a {
   text-decoration: var(--link-decoration-heading);
 }
 
@@ -603,10 +603,8 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig
   position: relative;
   margin: 0;
 }
-.m-imagegrid > div > figure > div,
-.m-imagegrid > div > figure > figcaption,
-.m-imagegrid > div > figure > a > div,
-.m-imagegrid > div > figure > a > figcaption {
+.m-imagegrid > div > figure > :is(div, figcaption),
+.m-imagegrid > div > figure > a > :is(div, figcaption) {
   position: absolute;
   top: 0;
   left: 0;
@@ -617,16 +615,12 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig
   border-width: 0.25rem;
   padding: 0.5rem;
 }
-.m-imagegrid > div > figure:first-child > div,
-.m-imagegrid > div > figure:first-child > figcaption,
-.m-imagegrid > div > figure:first-child > a > div,
-.m-imagegrid > div > figure:first-child > a > figcaption {
+.m-imagegrid > div > figure:first-child > :is(div, figcaption),
+.m-imagegrid > div > figure:first-child > a > :is(div, figcaption) {
   border-left-width: 0;
 }
-.m-imagegrid > div > figure:last-child > div,
-.m-imagegrid > div > figure:last-child > figcaption,
-.m-imagegrid > div > figure:last-child > a > div,
-.m-imagegrid > div > figure:last-child > a > figcaption {
+.m-imagegrid > div > figure:last-child > :is(div, figcaption),
+.m-imagegrid > div > figure:last-child > a > :is(div, figcaption) {
   border-right-width: 0;
 }
 .m-imagegrid > div > figure > figcaption,
@@ -637,10 +631,8 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig
   white-space: nowrap;
   font-size: 0.75rem;
 }
-.m-imagegrid > div > figure > div::before,
-.m-imagegrid > div > figure > figcaption::before,
-.m-imagegrid > div > figure > a > div::before,
-.m-imagegrid > div > figure > a > figcaption::before {
+.m-imagegrid > div > figure > :is(div, figcaption)::before,
+.m-imagegrid > div > figure > a > :is(div, figcaption)::before {
   content: '';
   display: inline-block;
   height: 100%;
@@ -668,10 +660,8 @@ figure.m-figure figcaption a, .m-code-figure figcaption a, .m-console-figure fig
     float: none;
     width: 100% !important;
   }
-  .m-imagegrid > div > figure > div,
-  .m-imagegrid > div > figure > figcaption,
-  .m-imagegrid > div > figure > a > div,
-  .m-imagegrid > div > figure > a > figcaption {
+  .m-imagegrid > div > figure > :is(div, figcaption),
+  .m-imagegrid > div > figure > a > :is(div, figcaption) {
     border-left-width: 0;
     border-right-width: 0;
   }
diff --git a/css/m-layout.css b/css/m-layout.css
index 8bf13b3a..7c5b2c44 100644
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -479,7 +479,7 @@ ul.m-tagcloud li.m-tag-4 { font-size: 1.25rem; }
 ul.m-tagcloud li.m-tag-5 { font-size: 1.5rem; }
 
 /* Avoid selection border being above figure border */
-article section:target figure.m-code-figure, article section:target figure.m-console-figure {
+article section:target figure:is(.m-code-figure, .m-console-figure) {
   z-index: 1;
 }
 
@@ -549,8 +549,7 @@ article:last-child, article section:last-child { margin-bottom: 0; }
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
-.m-container-inflatable section:target > .m-code-figure > pre.m-nopad,
-.m-container-inflatable section:target > .m-console-figure > pre.m-nopad {
+.m-container-inflatable section:target > :is(.m-code-figure, .m-console-figure) > pre.m-nopad {
   margin-left: -0.75rem;
   padding-left: -0.75rem;
 }

From b70d66d2076a129a2a5e25b7d2c40e9a0f7b2305 Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 15:23:19 -0700
Subject: [PATCH 06/14] css: combine `a:hover`, `:focus`, and `:active`
 selectors

---
 css/m-components.css | 78 +++++++++++++++++++++++---------------------
 css/m-layout.css     | 38 +++++++++------------
 2 files changed, 56 insertions(+), 60 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index eebdc785..8e728e07 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -103,7 +103,7 @@ a {
 a.m-flat {
   text-decoration: none;
 }
-a:hover, a:focus, a:active {
+a:is(:hover, :focus, :active) {
   color: var(--link-active-color);
 }
 a img { border: 0; } /* Why you so special, IE?! */
@@ -875,8 +875,10 @@ div.m-math svg {
 }
 div.m-button a svg.m-math { fill: var(--button-background-color); }
 div.m-button.m-flat a svg.m-math { fill: var(--color); }
-div.m-button.m-flat a:hover svg.m-math, div.m-button.m-default a:focus svg.m-math,
-div.m-button.m-default a:active svg.m-math {
+:is(
+  div.m-button.m-flat a:hover,
+  div.m-button.m-default a:is(:focus, :active)
+) svg.m-math {
   fill: var(--link-active-color);
 }
 
@@ -970,8 +972,8 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
   color: var(--dim-color);
 }
 .m-block.m-dim a, .m-text.m-dim a { color: var(--dim-link-color); }
-.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active,
-.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
+.m-block.m-dim a:is(:hover, :focus, :active),
+.m-text.m-dim a:is(:hover, :focus, :active) {
   color: var(--dim-link-active-color);
 }
 .m-block.m-flat { border-color: transparent; }
@@ -981,47 +983,47 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
 
 /* Active link in a block header (gawd, this is verbose as hell). Dim blocks
    have the link colors already defined above. */
-.m-block.m-default h3 a:hover, .m-block.m-default h3 a:focus, .m-block.m-default h3 a:active,
-.m-block.m-default h4 a:hover, .m-block.m-default h4 a:focus, .m-block.m-default h4 a:active,
-.m-block.m-default h5 a:hover, .m-block.m-default h5 a:focus, .m-block.m-default h5 a:active,
-.m-block.m-default h6 a:hover, .m-block.m-default h6 a:focus, .m-block.m-default h6 a:active {
+.m-block.m-default h3 a:is(:hover, :focus, :active),
+.m-block.m-default h4 a:is(:hover, :focus, :active),
+.m-block.m-default h5 a:is(:hover, :focus, :active),
+.m-block.m-default h6 a:is(:hover, :focus, :active) {
   color: var(--default-link-active-color);
 }
-.m-block.m-primary h3 a:hover, .m-block.m-primary h3 a:focus, .m-block.m-primary h3 a:active,
-.m-block.m-primary h4 a:hover, .m-block.m-primary h4 a:focus, .m-block.m-primary h4 a:active,
-.m-block.m-primary h5 a:hover, .m-block.m-primary h5 a:focus, .m-block.m-primary h5 a:active,
-.m-block.m-primary h6 a:hover, .m-block.m-primary h6 a:focus, .m-block.m-primary h6 a:active {
+.m-block.m-primary h3 a:is(:hover, :focus, :active),
+.m-block.m-primary h4 a:is(:hover, :focus, :active),
+.m-block.m-primary h5 a:is(:hover, :focus, :active),
+.m-block.m-primary h6 a:is(:hover, :focus, :active) {
   color: var(--primary-link-active-color);
 }
-.m-block.m-success h3 a:hover, .m-block.m-success h3 a:focus, .m-block.m-success h3 a:active,
-.m-block.m-success h4 a:hover, .m-block.m-success h4 a:focus, .m-block.m-success h4 a:active,
-.m-block.m-success h5 a:hover, .m-block.m-success h5 a:focus, .m-block.m-success h5 a:active,
-.m-block.m-success h6 a:hover, .m-block.m-success h6 a:focus, .m-block.m-success h6 a:active {
+.m-block.m-success h3 a:is(:hover, :focus, :active),
+.m-block.m-success h4 a:is(:hover, :focus, :active),
+.m-block.m-success h5 a:is(:hover, :focus, :active),
+.m-block.m-success h6 a:is(:hover, :focus, :active) {
   color: var(--success-link-active-color);
 }
-.m-block.m-warning h3 a:hover, .m-block.m-warning h3 a:focus, .m-block.m-warning h3 a:active,
-.m-block.m-warning h4 a:hover, .m-block.m-warning h4 a:focus, .m-block.m-warning h4 a:active,
-.m-block.m-warning h5 a:hover, .m-block.m-warning h5 a:focus, .m-block.m-warning h5 a:active,
-.m-block.m-warning h6 a:hover, .m-block.m-warning h6 a:focus, .m-block.m-warning h6 a:active {
+.m-block.m-warning h3 a:is(:hover, :focus, :active),
+.m-block.m-warning h4 a:is(:hover, :focus, :active),
+.m-block.m-warning h5 a:is(:hover, :focus, :active),
+.m-block.m-warning h6 a:is(:hover, :focus, :active) {
   color: var(--warning-link-active-color);
 }
-.m-block.m-danger h3 a:hover, .m-block.m-danger h3 a:focus, .m-block.m-danger h3 a:active,
-.m-block.m-danger h4 a:hover, .m-block.m-danger h4 a:focus, .m-block.m-danger h4 a:active,
-.m-block.m-danger h5 a:hover, .m-block.m-danger h5 a:focus, .m-block.m-danger h5 a:active,
-.m-block.m-danger h6 a:hover, .m-block.m-danger h6 a:focus, .m-block.m-danger h6 a:active {
+.m-block.m-danger h3 a:is(:hover, :focus, :active),
+.m-block.m-danger h4 a:is(:hover, :focus, :active),
+.m-block.m-danger h5 a:is(:hover, :focus, :active),
+.m-block.m-danger h6 a:is(:hover, :focus, :active) {
   color: var(--danger-link-active-color);
 }
-.m-block.m-info h3 a:hover, .m-block.m-info h3 a:focus, .m-block.m-info h3 a:active,
-.m-block.m-info h4 a:hover, .m-block.m-info h4 a:focus, .m-block.m-info h4 a:active,
-.m-block.m-info h5 a:hover, .m-block.m-info h5 a:focus, .m-block.m-info h5 a:active,
-.m-block.m-info h6 a:hover, .m-block.m-info h6 a:focus, .m-block.m-info h6 a:active {
+.m-block.m-info h3 a:is(:hover, :focus, :active),
+.m-block.m-info h4 a:is(:hover, :focus, :active),
+.m-block.m-info h5 a:is(:hover, :focus, :active),
+.m-block.m-info h6 a:is(:hover, :focus, :active) {
   color: var(--info-link-active-color);
 }
 
 /* Colored button, non-flat label */
 div.m-button a, .m-label { color: var(--button-background-color); }
 div.m-button.m-flat a { color: var(--color); }
-div.m-button.m-flat a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active {
+div.m-button.m-flat a:is(:hover, :focus, :active) {
   color: var(--link-active-color);
 }
 div.m-button.m-default a, .m-label:not(.m-flat).m-default { background-color: var(--default-color); }
@@ -1031,25 +1033,25 @@ div.m-button.m-warning a, .m-label:not(.m-flat).m-warning { background-color: va
 div.m-button.m-danger a, .m-label:not(.m-flat).m-danger { background-color: var(--danger-color); }
 div.m-button.m-info a, .m-label:not(.m-flat).m-info { background-color: var(--info-color); }
 div.m-button.m-dim a, .m-label:not(.m-flat).m-dim { background-color: var(--dim-color); }
-div.m-button.m-default a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active {
+div.m-button.m-default a:is(:hover, :focus, :active) {
   background-color: var(--default-link-active-color);
 }
-div.m-button.m-primary a:hover, div.m-button.m-primary a:focus, div.m-button.m-primary a:active {
+div.m-button.m-primary a:is(:hover, :focus, :active) {
   background-color: var(--primary-link-active-color);
 }
-div.m-button.m-success a:hover, div.m-button.m-success a:focus, div.m-button.m-success a:active {
+div.m-button.m-success a:is(:hover, :focus, :active) {
   background-color: var(--success-link-active-color);
 }
-div.m-button.m-warning a:hover, div.m-button.m-warning a:focus, div.m-button.m-warning a:active {
+div.m-button.m-warning a:is(:hover, :focus, :active) {
   background-color: var(--warning-link-active-color);
 }
-div.m-button.m-danger a:hover, div.m-button.m-danger a:focus, div.m-button.m-danger a:active {
+div.m-button.m-danger a:is(:hover, :focus, :active) {
   background-color: var(--danger-link-active-color);
 }
-div.m-button.m-info a:hover, div.m-button.m-info a:focus, div.m-button.m-info a:active {
+div.m-button.m-info a:is(:hover, :focus, :active) {
   background-color: var(--info-link-active-color);
 }
-div.m-button.m-dim a:hover, div.m-button.m-dim a:focus, div.m-button.m-dim a:active {
+div.m-button.m-dim a:is(:hover, :focus, :active) {
   /* Using a dedicated color here because we want the button dim by default,
      not highlighted as other links */
   background-color: var(--dim-button-active-color);
@@ -1213,7 +1215,7 @@ figure.m-figure.m-info figcaption { color: var(--info-color); }
 figure.m-figure.m-dim::before { border-color: var(--dim-filled-background-color); }
 figure.m-figure.m-dim { color: var(--dim-color); }
 figure.m-figure.m-dim a { color: var(--dim-link-color); }
-figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-dim a:active {
+figure.m-figure.m-dim a:is(:hover, :focus, :active) {
   color: var(--dim-link-active-color);
 }
 
diff --git a/css/m-layout.css b/css/m-layout.css
index 7c5b2c44..97b8c65e 100644
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -132,24 +132,18 @@ body > header > nav .m-row > [class*='m-col-'] {
   padding-top: 0;
   padding-bottom: 0;
 }
-body > header > nav a:hover, body > header > nav a:focus, body > header > nav a:active {
+body > header > nav a:is(:hover, :focus, :active) {
   color: var(--header-link-active-color);
 }
 body > header > nav #m-navbar-collapse li:hover {
   border-color: var(--header-link-active-color);
 }
-body > header > nav #m-navbar-collapse li a:hover,
-body > header > nav #m-navbar-collapse li a:focus,
-body > header > nav #m-navbar-collapse li a:active {
+body > header > nav #m-navbar-collapse li a:is(:hover, :focus, :active) {
   border-color: var(--header-link-active-color);
   background-color: var(--header-link-active-background-color);
 }
-body > header > nav.m-navbar-landing #m-navbar-collapse li a:hover,
-body > header > nav.m-navbar-cover #m-navbar-collapse li a:hover,
-body > header > nav.m-navbar-landing #m-navbar-collapse li a:focus,
-body > header > nav.m-navbar-cover #m-navbar-collapse li a:focus,
-body > header > nav.m-navbar-landing #m-navbar-collapse li a:active,
-body > header > nav.m-navbar-cover #m-navbar-collapse li a:active {
+body > header > nav.m-navbar-landing #m-navbar-collapse li a:is(:hover, :focus, :active),
+body > header > nav.m-navbar-cover #m-navbar-collapse li a:is(:hover, :focus, :active) {
   background-color: var(--header-link-active-background-color-semi);
 }
 
@@ -246,7 +240,7 @@ body > footer > nav a {
   text-transform: var(--nav-menu-case);
   color: var(--footer-link-color);
 }
-body > footer > nav a:hover, body > footer > nav a:focus, body > footer > nav a:active {
+body > footer > nav a:is(:hover, :focus, :active) {
   color: var(--footer-link-active-color);
 }
 
@@ -267,7 +261,7 @@ article h1 .m-breadcrumb {
 article h1 .m-breadcrumb a {
   color: var(--article-heading-color);
 }
-article h1 .m-breadcrumb a:hover, article h1 a:focus, article h1 a:active {
+article h1 .m-breadcrumb a:is(:hover, :focus, :active) {
   color: var(--article-heading-active-color);
 }
 
@@ -284,12 +278,12 @@ article section > h5, article section > h5 a,
 article section > h6, article section > h6 a {
   color: var(--article-heading-color);
 }
-article h1 a:hover, article > header h1 a:hover, article > header h1 a:focus, article > header h1 a:active,
-article section > h2 a:hover, article section > h2 a:focus, article section > h2 a:active,
-article section > h3 a:hover, article section > h3 a:focus, article section > h3 a:active,
-article section > h4 a:hover, article section > h4 a:focus, article section > h4 a:active,
-article section > h5 a:hover, article section > h5 a:focus, article section > h5 a:active,
-article section > h6 a:hover, article section > h6 a:focus, article section > h6 a:active {
+article h1 a:hover, article > header h1 a:is(:hover, :focus, :active),
+article section > h2 a:is(:hover, :focus, :active),
+article section > h3 a:is(:hover, :focus, :active),
+article section > h4 a:is(:hover, :focus, :active),
+article section > h5 a:is(:hover, :focus, :active),
+article section > h6 a:is(:hover, :focus, :active) {
   color: var(--article-heading-active-color);
 }
 article > header .m-date {
@@ -415,14 +409,14 @@ article#m-jumbo > header h2 {
 article#m-jumbo > header, article#m-jumbo > header h1, article#m-jumbo > header a {
   color: #ffffff;
 }
-article#m-jumbo > header a:hover, article#m-jumbo > header a:focus, article#m-jumbo > header a:active {
+article#m-jumbo > header a:is(:hover, :focus, :active) {
   color: #f0f0f0;
 }
 
 article#m-jumbo.m-inverted > header, article#m-jumbo.m-inverted > header h1, article#m-jumbo.m-inverted > header a {
   color: #000000;
 }
-article#m-jumbo.m-inverted > header a:hover, article#m-jumbo.m-inverted > header a:focus, article#m-jumbo.m-inverted > header a:active {
+article#m-jumbo.m-inverted > header a:is(:hover, :focus, :active) {
   color: #0f0f0f;
 }
 
@@ -432,7 +426,7 @@ article#m-jumbo.m-inverted > header a:hover, article#m-jumbo.m-inverted > header
   text-decoration: none;
   text-transform: var(--nav-heading-case);
 }
-.m-landing-news h3 a:hover, .m-landing-news h3 a:hover, .m-landing-news h3 a:focus, .m-landing-news h3 a:active {
+.m-landing-news h3 a:is(:hover, :focus, :active) {
   color: var(--article-heading-color);
 }
 .m-landing-news time {
@@ -466,7 +460,7 @@ nav.m-navpanel a {
   color: var(--navpanel-link-color);
   text-decoration: var(--link-decoration-nav);
 }
-nav.m-navpanel a:hover, nav.m-navpanel a:focus, nav.m-navpanel a:active {
+nav.m-navpanel a:is(:hover, :focus, :active) {
   color: var(--navpanel-link-active-color);
 }
 

From 431bf1551ee9bd1deb58736ce08235ee087948d0 Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 15:39:17 -0700
Subject: [PATCH 07/14] css: combine various heading selectors

---
 css/m-components.css | 58 +++++++++++++++-----------------------------
 css/m-layout.css     | 26 +++++++++-----------
 2 files changed, 32 insertions(+), 52 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index 8e728e07..6bfdb7f7 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -179,7 +179,7 @@ div.m-scroll {
 .m-text.m-tiny { font-size: 50.0%; }
 .m-text.m-small { font-size: 85.4%; }
 .m-text.m-big { font-size: 117%; }
-h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
+:is(h1, h2, h3, h4, h5, h6) .m-thin {
   font-weight: normal;
 }
 
@@ -930,40 +930,40 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
 
 /* Colored block, header links in a colored block, colored text, flat label */
 .m-block.m-default { border-left-color: var(--line-color); }
-.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
+.m-block.m-default :is(h3, h4, h5, h6),
 .m-text.m-default, .m-label.m-flat.m-default {
   color: var(--default-color);
 }
-.m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
+.m-block.m-default :is(h3, h4, h5, h6) a {
   color: var(--link-color);
 }
 .m-block.m-primary { border-left-color: var(--primary-color); }
-.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
-.m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
+.m-block.m-primary :is(h3, h4, h5, h6),
+.m-block.m-primary :is(h3, h4, h5, h6) a,
 .m-text.m-primary, .m-label.m-flat.m-primary {
   color: var(--primary-color);
 }
 .m-block.m-success { border-left-color: var(--success-color); }
-.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
-.m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
+.m-block.m-success :is(h3, h4, h5, h6),
+.m-block.m-success :is(h3, h4, h5, h6) a,
 .m-text.m-success, .m-label.m-flat.m-success {
   color: var(--success-color);
 }
 .m-block.m-warning { border-left-color: var(--warning-color); }
-.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
-.m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
+.m-block.m-warning :is(h3, h4, h5, h6),
+.m-block.m-warning :is(h3, h4, h5, h6) a,
 .m-text.m-warning, .m-label.m-flat.m-warning {
   color: var(--warning-color);
 }
 .m-block.m-danger { border-left-color: var(--danger-color); }
-.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
-.m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
+.m-block.m-danger :is(h3, h4, h5, h6),
+.m-block.m-danger :is(h3, h4, h5, h6) a,
 .m-text.m-danger, .m-label.m-flat.m-danger {
   color: var(--danger-color);
 }
 .m-block.m-info { border-left-color: var(--info-color); }
-.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
-.m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
+.m-block.m-info :is(h3, h4, h5, h6),
+.m-block.m-info :is(h3, h4, h5, h6) a,
 .m-text.m-info, .m-label.m-flat.m-info {
   color: var(--info-color);
 }
@@ -977,46 +977,28 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
   color: var(--dim-link-active-color);
 }
 .m-block.m-flat { border-color: transparent; }
-.m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5, .m-block.m-flat h6 {
+.m-block.m-flat :is(h3, h4, h5, h6) {
   color: var(--default-color);
 }
 
 /* Active link in a block header (gawd, this is verbose as hell). Dim blocks
    have the link colors already defined above. */
-.m-block.m-default h3 a:is(:hover, :focus, :active),
-.m-block.m-default h4 a:is(:hover, :focus, :active),
-.m-block.m-default h5 a:is(:hover, :focus, :active),
-.m-block.m-default h6 a:is(:hover, :focus, :active) {
+.m-block.m-default :is(h3, h4, h5, h6) a:is(:hover, :focus, :active) {
   color: var(--default-link-active-color);
 }
-.m-block.m-primary h3 a:is(:hover, :focus, :active),
-.m-block.m-primary h4 a:is(:hover, :focus, :active),
-.m-block.m-primary h5 a:is(:hover, :focus, :active),
-.m-block.m-primary h6 a:is(:hover, :focus, :active) {
+.m-block.m-primary :is(h3, h4, h5, h6) a:is(:hover, :focus, :active) {
   color: var(--primary-link-active-color);
 }
-.m-block.m-success h3 a:is(:hover, :focus, :active),
-.m-block.m-success h4 a:is(:hover, :focus, :active),
-.m-block.m-success h5 a:is(:hover, :focus, :active),
-.m-block.m-success h6 a:is(:hover, :focus, :active) {
+.m-block.m-success :is(h3, h4, h5, h6) a:is(:hover, :focus, :active) {
   color: var(--success-link-active-color);
 }
-.m-block.m-warning h3 a:is(:hover, :focus, :active),
-.m-block.m-warning h4 a:is(:hover, :focus, :active),
-.m-block.m-warning h5 a:is(:hover, :focus, :active),
-.m-block.m-warning h6 a:is(:hover, :focus, :active) {
+.m-block.m-warning :is(h3, h4, h5, h6) a:is(:hover, :focus, :active) {
   color: var(--warning-link-active-color);
 }
-.m-block.m-danger h3 a:is(:hover, :focus, :active),
-.m-block.m-danger h4 a:is(:hover, :focus, :active),
-.m-block.m-danger h5 a:is(:hover, :focus, :active),
-.m-block.m-danger h6 a:is(:hover, :focus, :active) {
+.m-block.m-danger :is(h3, h4, h5, h6) a:is(:hover, :focus, :active) {
   color: var(--danger-link-active-color);
 }
-.m-block.m-info h3 a:is(:hover, :focus, :active),
-.m-block.m-info h4 a:is(:hover, :focus, :active),
-.m-block.m-info h5 a:is(:hover, :focus, :active),
-.m-block.m-info h6 a:is(:hover, :focus, :active) {
+.m-block.m-info :is(h3, h4, h5, h6) a:is(:hover, :focus, :active) {
   color: var(--info-link-active-color);
 }
 
diff --git a/css/m-layout.css b/css/m-layout.css
index 97b8c65e..b4756cf0 100644
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -270,20 +270,15 @@ article > header h1 {
   font-size: 2rem;
   margin-bottom: 0.5rem;
 }
-article h1 a, article > header h1, article > header h1 a,
-article section > h2, article section > h2 a,
-article section > h3, article section > h3 a,
-article section > h4, article section > h4 a,
-article section > h5, article section > h5 a,
-article section > h6, article section > h6 a {
+article h1 a,
+article > header h1,
+article > header h1 a,
+article section > :is(h2, h3, h4, h5, h6),
+article section > :is(h2, h3, h4, h5, h6) a {
   color: var(--article-heading-color);
 }
 article h1 a:hover, article > header h1 a:is(:hover, :focus, :active),
-article section > h2 a:is(:hover, :focus, :active),
-article section > h3 a:is(:hover, :focus, :active),
-article section > h4 a:is(:hover, :focus, :active),
-article section > h5 a:is(:hover, :focus, :active),
-article section > h6 a:is(:hover, :focus, :active) {
+article section > :is(h2, h3, h4, h5, h6) a:is(:hover, :focus, :active) {
   color: var(--article-heading-active-color);
 }
 article > header .m-date {
@@ -336,8 +331,11 @@ article section:target {
   padding-left: 0.75rem;
   border-color: var(--article-heading-color);
 }
-article h1 a, article > header h1 a, article section > h2 a, article section > h3 a,
-article section > h4 a, article section > h5 a, article section > h6 a {
+:is(
+  article h1,
+  article > header h1,
+  article section > :is(h2, h3, h4, h5, h6)
+) a {
   text-decoration: var(--link-decoration-heading);
 }
 
@@ -376,7 +374,7 @@ article#m-jumbo {
   width: 100%;
   height: 100%;
 }
-article#m-jumbo > header h1, article#m-jumbo > header h2 {
+article#m-jumbo > header :is(h1, h2) {
   text-align: center;
   font-weight: bold;
 }

From 8de2d36ef1f91a2ac33a148b3440ce086e0812f0 Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 16:05:22 -0700
Subject: [PATCH 08/14] css: combine various header-related selectors

---
 css/m-layout.css | 36 +++++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/css/m-layout.css b/css/m-layout.css
index b4756cf0..404c5117 100644
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -28,8 +28,7 @@ body > header > nav {
   background-color: var(--header-background-color);
   min-height: 3rem;
 }
-body > header > nav.m-navbar-landing,
-body > header > nav.m-navbar-cover {
+body > header > nav:is(.m-navbar-landing, .m-navbar-cover) {
   background-color: transparent;
   position: relative;
 }
@@ -40,13 +39,11 @@ body > header > nav.m-navbar-cover {
   background-color: var(--header-background-color-jumbo);
   opacity: 1;
 }
-body > header > nav.m-navbar-landing:hover,
-body > header > nav.m-navbar-cover:hover {
+body > header > nav:is(.m-navbar-landing, .m-navbar-cover):hover {
   background-color: var(--header-background-color-landing);
   opacity: 1;
 }
-body> header > nav.m-navbar-landing:target,
-body> header > nav.m-navbar-cover:target {
+body> header > nav:is(.m-navbar-landing, .m-navbar-cover):target {
   background-color: var(--header-background-color);
   opacity: 1;
 }
@@ -69,16 +66,26 @@ body > header > nav a {
   line-height: 2.75rem;
   color: var(--header-link-color);
 }
-body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > header > nav a#m-navbar-hide {
+body > header > nav :is(
+  #m-navbar-brand,
+  a#m-navbar-show,
+  a#m-navbar-hide
+) {
   font-weight: var(--heading-font-weight);
   font-size: 1.125rem;
   padding-left: 1rem;
   padding-right: 1rem;
 }
-body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a {
+body > header > nav :is(
+  a#m-navbar-brand,
+  #m-navbar-brand a
+) {
   text-transform: var(--nav-brand-case);
 }
-body > header > nav a#m-navbar-brand img, body > header > nav #m-navbar-brand a img {
+body > header > nav :is(
+  a#m-navbar-brand,
+  #m-navbar-brand a
+) img {
   /* unfortuately, with SVGs, unless the size is hardcoded like this, it will
      cause ugly jumps during loading :( */
   width: 1.75rem;
@@ -96,7 +103,7 @@ body > header > nav #m-navbar-brand .m-thin {
 body > header > nav #m-navbar-brand .m-breadcrumb {
   color: var(--header-breadcrumb-color);
 }
-body > header > nav a#m-navbar-show::before, body > header > nav a#m-navbar-hide::before {
+body > header > nav a:is(#m-navbar-show, #m-navbar-hide)::before {
   content:'\2630';
 }
 body > header > nav #m-navbar-collapse {
@@ -142,8 +149,7 @@ body > header > nav #m-navbar-collapse li a:is(:hover, :focus, :active) {
   border-color: var(--header-link-active-color);
   background-color: var(--header-link-active-background-color);
 }
-body > header > nav.m-navbar-landing #m-navbar-collapse li a:is(:hover, :focus, :active),
-body > header > nav.m-navbar-cover #m-navbar-collapse li a:is(:hover, :focus, :active) {
+body > header > nav:is(.m-navbar-landing, .m-navbar-cover) #m-navbar-collapse li a:is(:hover, :focus, :active) {
   background-color: var(--header-link-active-background-color-semi);
 }
 
@@ -163,14 +169,14 @@ body > header > nav:target #m-navbar-hide {
 
 /* Header navigation -- 768px and up (tablets, desktops) */
 @media screen and (min-width: 768px) {
-  body > header > nav #m-navbar-show, body > header > nav #m-navbar-hide,
-  body > header > nav:target #m-navbar-show, body > header > nav:target #m-navbar-hide {
+  body > header > nav :is(#m-navbar-show, #m-navbar-hide),
+  body > header > nav:target :is(#m-navbar-show, #m-navbar-hide) {
     display: none;
   }
   body > header > nav #m-navbar-collapse li a {
     line-height: 2.75rem;
   }
-  body > header > nav a, body > header > nav #m-navbar-collapse li a {
+  body > header > nav :is(a, #m-navbar-collapse li a) {
     margin-left: 0;
     padding-left: 1rem;
     padding-right: 1rem;

From ccf289a1027c1501e9e29f0309561d06d4f27b08 Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 16:16:04 -0700
Subject: [PATCH 09/14] css: combine large general selectors

---
 css/m-components.css | 57 +++++++++++++-------------------------------
 1 file changed, 16 insertions(+), 41 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index 6bfdb7f7..b5d8f3c2 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -1481,54 +1481,29 @@ p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
 div.m-plot {
   margin-bottom: 1rem;
 }
-p:last-child, p.m-nopadb, ul:last-child, ul.m-nopadb,
-ol:last-child, ol.m-nopadb, dl:last-child, dl.m-nopadb,
-blockquote:last-child, blockquote.m-nopadb, pre:last-child, pre.m-nopadb,
-.m-code-figure:last-child, .m-code-figure.m-nopadb,
-.m-console-figure:last-child, .m-console-figure.m-nopadb,
-hr:last-child, hr.m-nopadb, .m-note:last-child, .m-note.m-nopadb,
-.m-frame:last-child, .m-frame.m-nopadb, .m-block:last-child, .m-block.m-nopadb,
-div.m-button:last-child, div.m-button.m-nopadb,
-div.m-scroll:last-child, div.m-scroll.m-nopadb,
-table.m-table:last-child, table.m-table.m-nopadb,
-:is(img, svg).m-image:last-child, :is(img, svg).m-image.m-nopadb,
-div.m-image:last-child, div.m-image.m-nopadb,
-figure.m-figure:last-child, figure.m-figure.m-nopadb,
-.m-imagegrid:last-child, .m-imagegrid.m-nopadb,
-div.m-math:last-child, div.m-math.m-nopadb,
-div.m-graph:last-child, div.m-graph.m-nopadb,
-div.m-plot:last-child, div.m-plot.m-nopadb {
+:is(
+  p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
+  .m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image,
+  :is(img, svg).m-image, figure.m-figure, .m-imagegrid, div.m-math, div.m-graph,
+  div.m-plot
+):is(:last-child, .m-nopadb) {
   margin-bottom: 0;
 }
 
 /* List items usually have just inline elements and are kept compact. If (sane)
    block elements are inside list items, they have spacing even as last, but
    not if the list item is the last. Also not if m-nopadb is specified. */
-li > p:last-child, li > blockquote:last-child, li > pre:last-child,
-li > .m-code-figure:last-child, li > .m-console-figure:last-child,
-li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child,
-li > div.m-button:last-child, li > div.m-scroll:last-child, li > table.m-table:last-child,
-li > :is(img, svg).m-image:last-child, li > div.m-image:last-child,
-li > figure.m-figure:last-child, li > div.m-math:last-child,
-li > div.m-graph:last-child, li > div.m-plot:last-child {
+li > :is(
+  p, blockquote, pre, .m-code-figure, .m-console-figure, .m-note, .m-frame,
+  .m-block, .m-button, .m-scroll, table.m-table, :is(img, svg).m-image, div.m-image
+  figure.m-figure, div.m-math, div.m-graph, div.m-plot
+):last-child {
   margin-bottom: 1rem;
 }
-li:last-child > p:last-child, li:last-child > p.m-nopadb,
-li:last-child > blockquote:last-child, li:last-child > blockquote.m-nopadb,
-li:last-child > pre:last-child, li:last-child > pre.m-nopadb,
-li:last-child > .m-code-figure:last-child, li:last-child > .m-code-figure.m-nopadb,
-li:last-child > .m-console-figure:last-child, li:last-child > .m-console-figure.m-nopadb,
-li:last-child > .m-note:last-child, li:last-child > .m-note.m-nopadb,
-li:last-child > .m-frame:last-child, li:last-child > .m-frame.m-nopadb,
-li:last-child > .m-block:last-child, li:last-child > .m-block.m-nopadb,
-li:last-child > div.m-button:last-child, li:last-child > div.m-button.m-nopadb,
-li:last-child > div.m-scroll:last-child, li:last-child > div.m-scroll.m-nopadb,
-li:last-child > table.m-table:last-child, li:last-child > table.m-table.m-nopadb,
-li:last-child > :is(img, svg).m-image:last-child, li:last-child > :is(img, svg).m-image.m-nopadb,
-li:last-child > div.m-image:last-child, li:last-child > div.m-image.m-nopadb,
-li:last-child > figure.m-figure:last-child, li:last-child > figure.m-figure.m-nopadb,
-li:last-child > div.m-math:last-child, li:last-child > div.m-math.m-nopadb,
-li:last-child > div.m-graph:last-child, li:last-child > div.m-graph.m-nopadb,
-li:last-child > div.m-plot:last-child, li:last-child > div.m-plot.m-nopadb {
+li:last-child > :is(
+  p, blockquote, pre, .m-code-figure, .m-console-figure, .m-note, .m-frame,
+  .m-block, .m-button, .m-scroll, table.m-table, :is(img, svg).m-image, div.m-image
+  figure.m-figure, div.m-math, div.m-graph, div.m-plot
+):is(:last-child, .m-nopadb) {
   margin-bottom: 0;
 }

From 7d9dfcdb7143043632d527770903de8ce4567a31 Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 16:22:37 -0700
Subject: [PATCH 10/14] css: combine various small selectors

---
 css/m-components.css | 41 +++++++++++++++++++----------------------
 css/m-layout.css     |  6 +++---
 2 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index b5d8f3c2..e2e865d4 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -59,7 +59,7 @@ main p {
   text-align: var(--paragraph-align);
 }
 /* Remove indentation and justification where it doesn't make sense */
-main p.m-noindent, li > p, dd > p, table.m-table td > p {
+main p.m-noindent, :is(li, dd, table.m-table td) > p {
   text-indent: 0;
   text-align: left;
 }
@@ -124,7 +124,7 @@ pre, code {
   color: var(--code-color);
   background-color: var(--code-background-color);
 }
-pre.m-console, code.m-console {
+:is(pre, code).m-console {
   color: var(--console-color);
   background-color: var(--console-background-color);
 }
@@ -250,14 +250,14 @@ dl.m-diary dd {
 }
 
 /* Footnotes, footnote references */
-a.m-footnote, dl.m-footnote dd span.m-footnote {
+:is(a, dl, dd).m-footnote {
   top: -0.35rem; /* Same as .m-text.m-sup */
   font-size: 0.75rem;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
-a.m-footnote, dl.m-footnote dd span.m-footnote a {
+:is(a, dl, dd).m-footnote a {
   text-decoration: none;
 }
 a.m-footnote::before { content: '['; }
@@ -838,10 +838,10 @@ pre.m-code span.hll {
 }
 
 /* Inverted code block / inline code */
-.m-code.m-inverted > span, .m-console.m-inverted > span {
+:is(.m-code, .m-console).m-inverted > span {
   opacity: 0.3333;
 }
-.m-code.m-inverted > span.hll, .m-console.m-inverted > span.hll {
+:is(.m-code, .m-console).m-inverted > span.hll {
   opacity: 1;
   background-color: transparent; /* TODO: handle this in pygments directly */
   border-color: transparent;
@@ -885,7 +885,7 @@ div.m-button.m-flat a svg.m-math { fill: var(--color); }
 /* Plots, graphs. Graphs can be either div.m-graph svg or svg.m-graph, so using
    just .m-graph when referencing both a <div> graph and a <figure> graph. */
 .m-graph { font-size: var(--font-size); }
-div.m-plot svg, div.m-graph svg {
+div:is(.m-plot, .m-graph) svg {
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
@@ -918,20 +918,18 @@ div.m-plot svg .m-label.m-dim { fill: var(--dim-color); }
    ensure it's applied only on the immediately first svg inside. Because we
    want a background under the padding as well, switch the box sizing to
    content box. */
-figure.m-figure > svg.m-math:first-child,
-figure.m-figure > svg.m-graph:first-child {
+figure.m-figure > svg:is(.m-math, .m-graph):first-child {
   padding: 1rem;
   box-sizing: content-box;
 }
-figure.m-figure:not(.m-flat) > svg.m-math:first-child,
-figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
+figure.m-figure:not(.m-flat) > svg:is(.m-math, .m-graph):first-child {
   background-color: var(--line-color);
 }
 
 /* Colored block, header links in a colored block, colored text, flat label */
 .m-block.m-default { border-left-color: var(--line-color); }
 .m-block.m-default :is(h3, h4, h5, h6),
-.m-text.m-default, .m-label.m-flat.m-default {
+:is(.m-text, .m-label.m-flat).m-default {
   color: var(--default-color);
 }
 .m-block.m-default :is(h3, h4, h5, h6) a {
@@ -940,40 +938,39 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
 .m-block.m-primary { border-left-color: var(--primary-color); }
 .m-block.m-primary :is(h3, h4, h5, h6),
 .m-block.m-primary :is(h3, h4, h5, h6) a,
-.m-text.m-primary, .m-label.m-flat.m-primary {
+:is(.m-text, .m-label.m-flat).m-primary {
   color: var(--primary-color);
 }
 .m-block.m-success { border-left-color: var(--success-color); }
 .m-block.m-success :is(h3, h4, h5, h6),
 .m-block.m-success :is(h3, h4, h5, h6) a,
-.m-text.m-success, .m-label.m-flat.m-success {
+:is(.m-text, .m-label.m-flat).m-success {
   color: var(--success-color);
 }
 .m-block.m-warning { border-left-color: var(--warning-color); }
 .m-block.m-warning :is(h3, h4, h5, h6),
 .m-block.m-warning :is(h3, h4, h5, h6) a,
-.m-text.m-warning, .m-label.m-flat.m-warning {
+:is(.m-text, .m-label.m-flat).m-warning {
   color: var(--warning-color);
 }
 .m-block.m-danger { border-left-color: var(--danger-color); }
 .m-block.m-danger :is(h3, h4, h5, h6),
 .m-block.m-danger :is(h3, h4, h5, h6) a,
-.m-text.m-danger, .m-label.m-flat.m-danger {
+:is(.m-text, .m-label.m-flat).m-danger {
   color: var(--danger-color);
 }
 .m-block.m-info { border-left-color: var(--info-color); }
 .m-block.m-info :is(h3, h4, h5, h6),
 .m-block.m-info :is(h3, h4, h5, h6) a,
-.m-text.m-info, .m-label.m-flat.m-info {
+:is(.m-text, .m-label.m-flat).m-info {
   color: var(--info-color);
 }
 .m-block.m-dim { border-left-color: var(--dim-color); }
-.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
+:is(.m-text, .m-label.m-flat, .m-block).m-dim {
   color: var(--dim-color);
 }
-.m-block.m-dim a, .m-text.m-dim a { color: var(--dim-link-color); }
-.m-block.m-dim a:is(:hover, :focus, :active),
-.m-text.m-dim a:is(:hover, :focus, :active) {
+:is(.m-block, .m-text).m-dim a { color: var(--dim-link-color); }
+:is(.m-block, .m-text).m-dim a:is(:hover, :focus, :active) {
   color: var(--dim-link-active-color);
 }
 .m-block.m-flat { border-color: transparent; }
@@ -1212,7 +1209,7 @@ figure.m-figure.m-dim a:is(:hover, :focus, :active) {
     https://mcss.mosra.cz/plugins/math-and-code/test/
     https://mcss.mosra.cz/plugins/plots-and-graphs/test/ */
 .m-math { fill: var(--color); }
-.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
+.m-math.m-default, .m-math :is(g, rect).m-default,
 div.m-plot svg .m-bar.m-default,
 .m-graph g.m-edge polygon,
 .m-graph g.m-node:not(.m-flat) ellipse,
diff --git a/css/m-layout.css b/css/m-layout.css
index 404c5117..6729780f 100644
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -410,14 +410,14 @@ article#m-jumbo > header h2 {
   }
 }
 
-article#m-jumbo > header, article#m-jumbo > header h1, article#m-jumbo > header a {
+article#m-jumbo > header, article#m-jumbo > header :is(h1, a) {
   color: #ffffff;
 }
 article#m-jumbo > header a:is(:hover, :focus, :active) {
   color: #f0f0f0;
 }
 
-article#m-jumbo.m-inverted > header, article#m-jumbo.m-inverted > header h1, article#m-jumbo.m-inverted > header a {
+article#m-jumbo.m-inverted > header, article#m-jumbo.m-inverted > header :is(h1, a) {
   color: #000000;
 }
 article#m-jumbo.m-inverted > header a:is(:hover, :focus, :active) {
@@ -483,7 +483,7 @@ article section:target figure:is(.m-code-figure, .m-console-figure) {
 
 /* Spacing after every block element, but not after the last */
 article, article > header, article section { margin-bottom: 1rem; }
-article:last-child, article section:last-child { margin-bottom: 0; }
+:is(article, article section):last-child { margin-bottom: 0; }
 
 /* Active sections in inflatable content affect left border of some components
    --- restrict to components directly in active section, its subsections and

From 6a58567900fa4c13ac37c2f6af4158216a5c92de Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 16:32:29 -0700
Subject: [PATCH 11/14] css: combine grid padding-related selectors

---
 css/m-grid.css | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/css/m-grid.css b/css/m-grid.css
index c520741d..f00c3484 100644
--- a/css/m-grid.css
+++ b/css/m-grid.css
@@ -68,20 +68,16 @@ body { margin: 0; }
 
 /* Padding overrides for container and columns. Works for both columns inside
    rows and floating columns. */
-.m-container.m-nopad, [class*='m-col-'].m-nopad,
-.m-container.m-nopadx, [class*='m-col-'].m-nopadx,
-.m-container.m-nopadl, [class*='m-col-'].m-nopadl {
+:is(.m-container, [class*='m-col-']):is(.m-nopad, .m-nopadx, .m-nopadl) {
   padding-left: 0;
 }
-.m-container.m-nopad, [class*='m-col-'].m-nopad,
-.m-container.m-nopadx, [class*='m-col-'].m-nopadx,
-.m-container.m-nopadr, [class*='m-col-'].m-nopadr {
+:is(.m-container, [class*='m-col-']):is(.m-nopad, .m-nopadx, .m-nopadr) {
   padding-right: 0;
 }
-[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt {
+[class*='m-col-']:is(.m-nopad, .m-nopady, .m-nopadt) {
   padding-top: 0;
 }
-[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb,
+[class*='m-col-']:is(.m-nopad, .m-nopady, .m-nopadb),
 .m-container-inflate.m-nopadb {
   padding-bottom: 0;
 }

From 9bf738dc1d0955790aa782a75a9f7cf6b3be936e Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 16:37:28 -0700
Subject: [PATCH 12/14] css: combine simple inflatable-related selectors

---
 css/m-components.css | 72 ++++++--------------------------------------
 css/m-layout.css     | 57 ++++++++++++-----------------------
 2 files changed, 28 insertions(+), 101 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index e2e865d4..d11fa10f 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -716,33 +716,15 @@ figure.m-figure.m-fullwidth::after {
 }
 
 @media screen and (min-width: 576px) {
-  .m-container-inflatable .m-center-s > .m-note,
-  .m-container-inflatable .m-center-s > .m-frame,
-  .m-container-inflatable .m-center-s > .m-block,
-  .m-container-inflatable .m-center-s > .m-imagegrid,
-  .m-container-inflatable .m-center-s > pre,
-  .m-container-inflatable .m-center-s > .m-code-figure,
-  .m-container-inflatable .m-center-s > .m-console-figure {
+  .m-container-inflatable .m-center-s > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) {
     margin-left: -1rem;
     margin-right: -1rem;
   }
-  .m-container-inflatable .m-left-s > .m-note,
-  .m-container-inflatable .m-left-s > .m-frame,
-  .m-container-inflatable .m-left-s > .m-block,
-  .m-container-inflatable .m-left-s > .m-imagegrid,
-  .m-container-inflatable .m-left-s > pre,
-  .m-container-inflatable .m-left-s > .m-code-figure,
-  .m-container-inflatable .m-left-s > .m-console-figure {
+  .m-container-inflatable .m-left-s > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) {
     margin-left: -1rem;
     margin-right: 0;
   }
-  .m-container-inflatable .m-right-s > .m-note,
-  .m-container-inflatable .m-right-s > .m-frame,
-  .m-container-inflatable .m-right-s > .m-block,
-  .m-container-inflatable .m-right-s > .m-imagegrid,
-  .m-container-inflatable .m-right-s > pre,
-  .m-container-inflatable .m-right-s > .m-code-figure,
-  .m-container-inflatable .m-right-s > .m-console-figure {
+  .m-container-inflatable .m-right-s > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) {
     margin-left: 0;
     margin-right: -1rem;
   }
@@ -754,33 +736,15 @@ figure.m-figure.m-fullwidth::after {
   }
 }
 @media screen and (min-width: 768px) {
-  .m-container-inflatable .m-center-m > .m-note,
-  .m-container-inflatable .m-center-m > .m-frame,
-  .m-container-inflatable .m-center-m > .m-block,
-  .m-container-inflatable .m-center-m > .m-imagegrid,
-  .m-container-inflatable .m-center-m > pre,
-  .m-container-inflatable .m-center-m > .m-code-figure,
-  .m-container-inflatable .m-center-m > .m-console-figure {
+  .m-container-inflatable .m-center-m > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) {
     margin-left: -1rem;
     margin-right: -1rem;
   }
-  .m-container-inflatable .m-left-m > .m-note,
-  .m-container-inflatable .m-left-m > .m-frame,
-  .m-container-inflatable .m-left-m > .m-block,
-  .m-container-inflatable .m-left-m > .m-imagegrid,
-  .m-container-inflatable .m-left-m > pre,
-  .m-container-inflatable .m-left-m > .m-code-figure,
-  .m-container-inflatable .m-left-m > .m-console-figure {
+  .m-container-inflatable .m-left-m > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) {
     margin-left: -1rem;
     margin-right: 0;
   }
-  .m-container-inflatable .m-right-m > .m-note,
-  .m-container-inflatable .m-right-m > .m-frame,
-  .m-container-inflatable .m-right-m > .m-block,
-  .m-container-inflatable .m-right-m > .m-imagegrid,
-  .m-container-inflatable .m-right-m > pre,
-  .m-container-inflatable .m-right-m > .m-code-figure,
-  .m-container-inflatable .m-right-m > .m-console-figure {
+  .m-container-inflatable .m-right-m > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) {
     margin-left: 0;
     margin-right: -1rem;
   }
@@ -792,33 +756,15 @@ figure.m-figure.m-fullwidth::after {
   }
 }
 @media screen and (min-width: 992px) {
-  .m-container-inflatable .m-center-l > .m-note,
-  .m-container-inflatable .m-center-l > .m-frame,
-  .m-container-inflatable .m-center-l > .m-block,
-  .m-container-inflatable .m-center-l > .m-imagegrid,
-  .m-container-inflatable .m-center-l > pre,
-  .m-container-inflatable .m-center-l > .m-code-figure,
-  .m-container-inflatable .m-center-l > .m-console-figure {
+  .m-container-inflatable .m-center-l > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) {
     margin-left: -1rem;
     margin-right: -1rem;
   }
-  .m-container-inflatable .m-left-l > .m-note,
-  .m-container-inflatable .m-left-l > .m-frame,
-  .m-container-inflatable .m-left-l > .m-block,
-  .m-container-inflatable .m-left-l > .m-imagegrid,
-  .m-container-inflatable .m-left-l > pre,
-  .m-container-inflatable .m-left-l > .m-code-figure,
-  .m-container-inflatable .m-left-l > .m-console-figure {
+  .m-container-inflatable .m-left-l > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) {
     margin-left: -1rem;
     margin-right: 0;
   }
-  .m-container-inflatable .m-right-l > .m-note,
-  .m-container-inflatable .m-right-l > .m-frame,
-  .m-container-inflatable .m-right-l > .m-block,
-  .m-container-inflatable .m-right-l > .m-imagegrid,
-  .m-container-inflatable .m-right-l > pre,
-  .m-container-inflatable .m-right-l > .m-code-figure,
-  .m-container-inflatable .m-right-l > .m-console-figure {
+  .m-container-inflatable .m-right-l > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) {
     margin-left: 0;
     margin-right: -1rem;
   }
diff --git a/css/m-layout.css b/css/m-layout.css
index 6729780f..5f12a368 100644
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -568,26 +568,22 @@ article, article > header, article section { margin-bottom: 1rem; }
     border-bottom-left-radius: var(--border-radius);
     padding-left: 1rem;
   }
-  .m-container-inflatable section:target .m-center-s > .m-block,
-  .m-container-inflatable section:target .m-right-s > .m-block {
+  .m-container-inflatable section:target :is(.m-center-s, .m-right-s) > .m-block {
     /* Block keep the same left border width at all times */
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
   }
-  .m-container-inflatable section:target .m-center-s > .m-frame,
-  .m-container-inflatable section:target .m-right-s > .m-frame {
+  .m-container-inflatable section:target :is(.m-center-s, .m-right-s) > .m-frame {
     /* Frame has a thinner border */
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
     border-left-width: 0.125rem;
     padding-left: 0.875rem;
   }
-  .m-container-inflatable section:target .m-right-s > .m-block,
-  .m-container-inflatable section:target .m-right-s > .m-frame {
+  .m-container-inflatable section:target .m-right-s > :is(.m-block, .m-frame) {
     margin-left: 0;
   }
-  .m-container-inflatable section:target .m-right-s > .m-note,
-  .m-container-inflatable section:target .m-right-s > pre {
+  .m-container-inflatable section:target .m-right-s > :is(.m-note, pre) {
     /* Note and pre has no border */
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
@@ -619,26 +615,22 @@ article, article > header, article section { margin-bottom: 1rem; }
     border-bottom-left-radius: var(--border-radius);
     padding-left: 1rem;
   }
-  .m-container-inflatable section:target .m-center-m > .m-block,
-  .m-container-inflatable section:target .m-right-m > .m-block {
+  .m-container-inflatable section:target :is(.m-center-m, .m-right-m) > .m-block {
     /* Block keep the same left border width at all times */
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
   }
-  .m-container-inflatable section:target .m-center-m > .m-frame,
-  .m-container-inflatable section:target .m-right-m > .m-frame {
+  .m-container-inflatable section:target :is(.m-center-m, .m-right-m) > .m-frame {
     /* Frame has a thinner border */
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
     border-left-width: 0.125rem;
     padding-left: 0.875rem;
   }
-  .m-container-inflatable section:target .m-right-m > .m-block,
-  .m-container-inflatable section:target .m-right-m > .m-frame {
+  .m-container-inflatable section:target .m-right-m > :is(.m-block, .m-frame) {
     margin-left: 0;
   }
-  .m-container-inflatable section:target .m-right-m > .m-note,
-  .m-container-inflatable section:target .m-right-m > pre {
+  .m-container-inflatable section:target .m-right-m > :is(.m-note, pre) {
     /* Note and pre has no border */
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
@@ -670,26 +662,22 @@ article, article > header, article section { margin-bottom: 1rem; }
     border-bottom-left-radius: var(--border-radius);
     padding-left: 1rem;
   }
-  .m-container-inflatable section:target .m-center-l > .m-block,
-  .m-container-inflatable section:target .m-right-l > .m-block {
+  .m-container-inflatable section:target :is(.m-center-l, .m-right-l) > .m-block {
     /* Block keep the same left border width at all times */
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
   }
-  .m-container-inflatable section:target .m-center-l > .m-frame,
-  .m-container-inflatable section:target .m-right-l > .m-frame {
+  .m-container-inflatable section:target :is(.m-center-l, .m-right-l) > .m-frame {
     /* Frame has a thinner border */
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
     border-left-width: 0.125rem;
     padding-left: 0.875rem;
   }
-  .m-container-inflatable section:target .m-right-l > .m-block,
-  .m-container-inflatable section:target .m-right-l > .m-frame {
+  .m-container-inflatable section:target .m-right-l > :is(.m-block, .m-frame) {
     margin-left: 0;
   }
-  .m-container-inflatable section:target .m-right-l > .m-note,
-  .m-container-inflatable section:target .m-right-l > pre {
+  .m-container-inflatable section:target .m-right-l > :is(.m-note, pre) {
     /* Note and pre has no border */
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
@@ -728,32 +716,26 @@ article, article > header, article section { margin-bottom: 1rem; }
    conditionally revert that. Left-aligned content is touching the left border
    both in full size and aligned, so we revert it only for center and right. */
 @media screen and (min-width: 576px) {
-  .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
-  .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before {
+  .m-container-inflatable section:target :is(.m-center-s, .m-right-s) > figure.m-code-figure::before {
     border-color: var(--code-background-color);
   }
-  .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
-  .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
+  .m-container-inflatable section:target :is(.m-center-s, .m-right-s) > figure.m-console-figure::before {
     border-color: var(--console-background-color);
   }
 }
 @media screen and (min-width: 768px) {
-  .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
-  .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before {
+  .m-container-inflatable section:target :is(.m-center-m, .m-right-m) > figure.m-code-figure::before {
     border-color: var(--code-background-color);
   }
-  .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
-  .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
+  .m-container-inflatable section:target :is(.m-center-m, .m-right-m) > figure.m-console-figure::before {
     border-color: var(--console-background-color);
   }
 }
 @media screen and (min-width: 992px) {
-  .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
-  .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before {
+  .m-container-inflatable section:target :is(.m-center-l, .m-right-l) > figure.m-code-figure::before {
     border-color: var(--code-background-color);
   }
-  .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
-  .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
+  .m-container-inflatable section:target :is(.m-center-l, .m-right-l) > figure.m-console-figure::before {
     border-color: var(--console-background-color);
   }
 }
@@ -761,8 +743,7 @@ article, article > header, article section { margin-bottom: 1rem; }
 /* These don't have any border otherwise, so we don't need to restrict the
    selectors or border sides like above. */
 .m-container-inflatable section:target pre,
-.m-container-inflatable section:target figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target figure.m-console-figure > pre:first-child {
+.m-container-inflatable section:target figure:is(.m-code-figure, .m-console-figure) > pre:first-child {
   border-color: var(--line-color);
 }
 .m-container-inflatable section:target .m-note.m-default {

From 2803e04fa61da200e9821cf6449a063a57eb7dcb Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 16:52:33 -0700
Subject: [PATCH 13/14] css: combine complex inflatable-related selectors

---
 css/m-components.css |  53 ++++-------------
 css/m-layout.css     | 137 +++++++++++++++----------------------------
 2 files changed, 57 insertions(+), 133 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index d11fa10f..84a57781 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -668,49 +668,16 @@ figure.m-figure.m-fullwidth::after {
 }
 
 /* Inflatable content */
-.m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
-.m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
-.m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
-.m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
-.m-container-inflatable > .m-row > [class*='m-col-'] > pre,
-.m-container-inflatable > .m-row > [class*='m-col-'] > .m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] > .m-console-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > pre,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure,
-.m-container-inflatable [class*='m-center-'] > .m-note,
-.m-container-inflatable [class*='m-center-'] > .m-frame,
-.m-container-inflatable [class*='m-center-'] > .m-block,
-.m-container-inflatable [class*='m-center-'] > .m-imagegrid,
-.m-container-inflatable [class*='m-center-'] > pre,
-.m-container-inflatable [class*='m-center-'] > .m-code-figure,
-.m-container-inflatable [class*='m-center-'] > .m-console-figure,
-.m-container-inflatable [class*='m-left-'] > .m-note,
-.m-container-inflatable [class*='m-left-'] > .m-frame,
-.m-container-inflatable [class*='m-left-'] > .m-block,
-.m-container-inflatable [class*='m-left-'] > .m-imagegrid,
-.m-container-inflatable [class*='m-left-'] > pre,
-.m-container-inflatable [class*='m-left-'] > .m-code-figure,
-.m-container-inflatable [class*='m-left-'] > .m-console-figure,
-.m-container-inflatable [class*='m-right-'] > .m-note,
-.m-container-inflatable [class*='m-right-'] > .m-frame,
-.m-container-inflatable [class*='m-right-'] > .m-block,
-.m-container-inflatable [class*='m-right-'] > .m-imagegrid,
-.m-container-inflatable [class*='m-right-'] > pre,
-.m-container-inflatable [class*='m-right-'] > .m-code-figure,
-.m-container-inflatable [class*='m-right-'] > .m-console-figure,
-.m-container-inflatable .m-container-inflate > .m-note,
-.m-container-inflatable .m-container-inflate > .m-frame,
-.m-container-inflatable .m-container-inflate > .m-block,
-.m-container-inflatable .m-container-inflate > .m-imagegrid,
-.m-container-inflatable .m-container-inflate > pre,
-.m-container-inflatable .m-container-inflate > .m-code-figure,
-.m-container-inflatable .m-container-inflate > .m-console-figure
-{
+:is(
+  .m-container-inflatable > .m-row > [class*='m-col-'],
+  .m-container-inflatable > .m-row > [class*='m-col-'] section,
+  .m-container-inflatable :is(
+    [class*='m-center-'],
+    [class*='m-left-'],
+    [class*='m-right-'],
+    .m-container-inflate
+  )
+) > :is(.m-note, .m-frame, .m-block, .m-imagegrid, pre, .m-code-figure, .m-console-figure) {
   margin-left: -1rem;
   margin-right: -1rem;
 }
diff --git a/css/m-layout.css b/css/m-layout.css
index 5f12a368..171aec8d 100644
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -488,42 +488,22 @@ article, article > header, article section { margin-bottom: 1rem; }
 /* Active sections in inflatable content affect left border of some components
    --- restrict to components directly in active section, its subsections and
    floating / inflatable content inside. */
-.m-container-inflatable section:target > .m-note,
-.m-container-inflatable section:target > .m-frame,
-.m-container-inflatable section:target > .m-block,
-.m-container-inflatable section:target > pre,
-.m-container-inflatable section:target > .m-code-figure > pre:first-child,
-.m-container-inflatable section:target > .m-console-figure > pre:first-child,
-.m-container-inflatable section:target section > .m-note,
-.m-container-inflatable section:target section > .m-frame,
-.m-container-inflatable section:target section > .m-block,
-.m-container-inflatable section:target section > pre,
-.m-container-inflatable section:target section > .m-code-figure > pre:first-child,
-.m-container-inflatable section:target section > .m-console-figure > pre:first-child,
-.m-container-inflatable section:target [class*='m-center-'] > .m-note,
-.m-container-inflatable section:target [class*='m-center-'] > .m-frame,
-.m-container-inflatable section:target [class*='m-center-'] > .m-block,
-.m-container-inflatable section:target [class*='m-center-'] > pre,
-.m-container-inflatable section:target [class*='m-center-'] > .m-code-figure > pre:first-child,
-.m-container-inflatable section:target [class*='m-center-'] > .m-console-figure > pre:first-child,
-.m-container-inflatable section:target [class*='m-left-'] > .m-note,
-.m-container-inflatable section:target [class*='m-left-'] > .m-frame,
-.m-container-inflatable section:target [class*='m-left-'] > .m-block,
-.m-container-inflatable section:target [class*='m-left-'] > pre,
-.m-container-inflatable section:target [class*='m-left-'] > .m-code-figure > pre:first-child,
-.m-container-inflatable section:target [class*='m-left-'] > .m-console-figure > pre:first-child,
-.m-container-inflatable section:target [class*='m-right-'] > .m-note,
-.m-container-inflatable section:target [class*='m-right-'] > .m-frame,
-.m-container-inflatable section:target [class*='m-right-'] > .m-block,
-.m-container-inflatable section:target [class*='m-right-'] > pre,
-.m-container-inflatable section:target [class*='m-right-'] > .m-code-figure > pre:first-child,
-.m-container-inflatable section:target [class*='m-right-'] > .m-console-figure > pre:first-child,
-.m-container-inflatable section:target .m-container-inflate > .m-note,
-.m-container-inflatable section:target .m-container-inflate > .m-frame,
-.m-container-inflatable section:target .m-container-inflate > .m-block,
-.m-container-inflatable section:target .m-container-inflate > pre,
-.m-container-inflatable section:target .m-container-inflate > .m-code-figure > pre:first-child,
-.m-container-inflatable section:target .m-container-inflate > .m-console-figure > pre:first-child {
+:is(
+  .m-container-inflatable section:target,
+  .m-container-inflatable section:target section,
+  .m-container-inflatable section:target [class*='m-center-'],
+  .m-container-inflatable section:target [class*='m-left-'],
+  .m-container-inflatable section:target [class*='m-right-'],
+  .m-container-inflatable section:target .m-container-inflate
+) > :is(.m-note, .m-frame, .m-block, pre),
+:is(
+  .m-container-inflatable section:target,
+  .m-container-inflatable section:target section,
+  .m-container-inflatable section:target [class*='m-center-'],
+  .m-container-inflatable section:target [class*='m-left-'],
+  .m-container-inflatable section:target [class*='m-right-'],
+  .m-container-inflatable section:target .m-container-inflate
+) > :is(.m-code-figure, .m-console-figure) > pre:first-child {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -531,18 +511,14 @@ article, article > header, article section { margin-bottom: 1rem; }
   border-bottom-left-radius: 0;
   padding-left: 0.75rem;
 }
-.m-container-inflatable section:target > .m-code-figure::before,
-.m-container-inflatable section:target > .m-console-figure::before,
-.m-container-inflatable section:target section > .m-code-figure::before,
-.m-container-inflatable section:target section > .m-console-figure::before,
-.m-container-inflatable section:target [class*='m-center-'] > .m-code-figure::before,
-.m-container-inflatable section:target [class*='m-center-'] > .m-console-figure::before,
-.m-container-inflatable section:target [class*='m-left-'] > .m-code-figure::before,
-.m-container-inflatable section:target [class*='m-left-'] > .m-console-figure::before,
-.m-container-inflatable section:target [class*='m-right-'] > .m-code-figure::before,
-.m-container-inflatable section:target [class*='m-right-'] > .m-console-figure::before,
-.m-container-inflatable section:target .m-container-inflate > .m-code-figure::before,
-.m-container-inflatable section:target .m-container-inflate > .m-console-figure::before {
+:is(
+  .m-container-inflatable section:target,
+  .m-container-inflatable section:target section,
+  .m-container-inflatable section:target [class*='m-center-'],
+  .m-container-inflatable section:target [class*='m-left-'],
+  .m-container-inflatable section:target [class*='m-right-'],
+  .m-container-inflatable section:target .m-container-inflate
+) > :is(.m-code-figure, .m-console-figure)::before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
@@ -555,12 +531,10 @@ article, article > header, article section { margin-bottom: 1rem; }
    conditionally revert that. Left-aligned content is touching the left border
    both in full size and aligned, so we revert it only for center and right. */
 @media screen and (min-width: 576px) {
-  .m-container-inflatable section:target .m-center-s > .m-note,
-  .m-container-inflatable section:target .m-center-s > pre,
-  .m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child,
-  .m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child,
-  .m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child,
-  .m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child {
+  .m-container-inflatable section:target :is(
+    .m-center-s > :is(.m-note, pre),
+    :is(.m-center-s, .m-right-s) > figure:is(.m-code-figure, .m-console-figure) > pre:first-child
+  ) {
     /* Centers have -1rem margin on both sides *always* and pre inside figures
        as well, don't revert that */
     border-left-width: 0;
@@ -591,10 +565,7 @@ article, article > header, article section { margin-bottom: 1rem; }
     border-left-width: 0;
     padding-left: 1rem;
   }
-  .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
-  .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
-  .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before,
-  .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
+  .m-container-inflatable section:target :is(.m-center-s, .m-right-s) > figure:is(.m-code-figure, .m-console-figure)::before {
     /* Reverting thin figure border, keeping -1rem margin */
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
@@ -602,12 +573,10 @@ article, article > header, article section { margin-bottom: 1rem; }
   }
 }
 @media screen and (min-width: 768px) {
-  .m-container-inflatable section:target .m-center-m > .m-note,
-  .m-container-inflatable section:target .m-center-m > pre,
-  .m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child,
-  .m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child,
-  .m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child,
-  .m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child {
+  .m-container-inflatable section:target :is(
+    .m-center-m > :is(.m-note, pre),
+    :is(.m-center-m, .m-right-m) > figure:is(.m-code-figure, .m-console-figure) > pre:first-child
+  ) {
     /* Centers have -1rem margin on both sides *always* and pre inside figures
        as well, don't revert that */
     border-left-width: 0;
@@ -638,10 +607,7 @@ article, article > header, article section { margin-bottom: 1rem; }
     border-left-width: 0;
     padding-left: 1rem;
   }
-  .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
-  .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
-  .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before,
-  .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
+  .m-container-inflatable section:target :is(.m-center-m, .m-right-m) > figure:is(.m-code-figure, .m-console-figure)::before {
     /* Reverting thin figure border, keeping -1rem margin */
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
@@ -649,12 +615,10 @@ article, article > header, article section { margin-bottom: 1rem; }
   }
 }
 @media screen and (min-width: 992px) {
-  .m-container-inflatable section:target .m-center-l > .m-note,
-  .m-container-inflatable section:target .m-center-l > pre,
-  .m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child,
-  .m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child,
-  .m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child,
-  .m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child {
+  .m-container-inflatable section:target :is(
+    .m-center-l > :is(.m-note, pre),
+    :is(.m-center-l, .m-right-l) > figure:is(.m-code-figure, .m-console-figure) > pre:first-child
+  ) {
     /* Centers have -1rem margin on both sides *always* and pre inside figures
        as well, don't revert that */
     border-left-width: 0;
@@ -685,10 +649,7 @@ article, article > header, article section { margin-bottom: 1rem; }
     border-left-width: 0;
     padding-left: 1rem;
   }
-  .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
-  .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
-  .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before,
-  .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
+  .m-container-inflatable section:target :is(.m-center-l, .m-right-l) > figure:is(.m-code-figure, .m-console-figure)::before {
     /* Reverting thin figure border, keeping -1rem margin */
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
@@ -698,18 +659,14 @@ article, article > header, article section { margin-bottom: 1rem; }
 
 /* These have different border width/color around so we need to restrict like
    above. */
-.m-container-inflatable section:target > figure.m-code-figure::before,
-.m-container-inflatable section:target > figure.m-console-figure::before,
-.m-container-inflatable section:target section > figure.m-code-figure::before,
-.m-container-inflatable section:target section > figure.m-console-figure::before,
-.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
-.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
-.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
-.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
-.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
-.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
-.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before,
-.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before {
+:is(
+  .m-container-inflatable section:target,
+  .m-container-inflatable section:target section,
+  .m-container-inflatable section:target [class*='m-center-'],
+  .m-container-inflatable section:target [class*='m-left-'],
+  .m-container-inflatable section:target [class*='m-right-'],
+  .m-container-inflatable section:target .m-container-inflate
+) > figure:is(.m-code-figure, .m-console-figure)::before {
   border-left-color: var(--line-color);
 }
 /* Center/left/right are tied to particular breakpoint so we need to

From c0c553988c91b0d63f32e398b48223512c0a6460 Mon Sep 17 00:00:00 2001
From: Josh <dev@jotch.dev>
Date: Fri, 12 Nov 2021 17:00:02 -0700
Subject: [PATCH 14/14] css: combine graph selectors

---
 css/m-components.css | 357 ++++++++++++++++++++-----------------------
 1 file changed, 168 insertions(+), 189 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index 84a57781..840c38d5 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -818,9 +818,11 @@ div.m-plot svg .m-error {
   stroke-width: 1.5;
 }
 div.m-plot svg .m-label.m-dim { fill: var(--dim-color); }
-.m-graph g.m-edge path, .m-graph g.m-cluster polygon,
-.m-graph g.m-node.m-flat ellipse,
-.m-graph g.m-node.m-flat polygon {
+.m-graph :is(
+  g.m-edge path,
+  g.m-cluster polygon,
+  g.m-node.m-flat :is(ellipse, polygon)
+) {
   fill: none;
 }
 .m-graph g.m-node:not(.m-flat) text {
@@ -1124,140 +1126,125 @@ figure.m-figure.m-dim a:is(:hover, :focus, :active) {
 .m-math { fill: var(--color); }
 .m-math.m-default, .m-math :is(g, rect).m-default,
 div.m-plot svg .m-bar.m-default,
-.m-graph g.m-edge polygon,
-.m-graph g.m-node:not(.m-flat) ellipse,
-.m-graph g.m-node:not(.m-flat) polygon,
-.m-graph g.m-edge text,
-.m-graph g.m-node.m-flat text,
-.m-graph g.m-cluster text,
-.m-graph.m-default g.m-edge polygon,
-.m-graph.m-default g.m-node:not(.m-flat) ellipse,
-.m-graph.m-default g.m-node:not(.m-flat) polygon,
-.m-graph.m-default g.m-edge text,
-.m-graph.m-default g.m-node.m-flat text,
-.m-graph.m-default g.m-cluster text {
+.m-graph :is(
+  g.m-edge :is(polygon, text),
+  g.m-node:not(.m-flat) :is(ellipse, polygon),
+  g.m-node.m-flat text,
+  g.m-cluster text
+) {
   fill: var(--default-color);
 }
-.m-graph g.m-edge polygon,
-.m-graph g.m-edge path,
-.m-graph g.m-node ellipse,
-.m-graph g.m-node polygon,
-.m-graph g.m-node polyline,
-.m-graph g.m-cluster polygon,
-.m-graph.m-default g.m-edge polygon,
-.m-graph.m-default g.m-edge path,
-.m-graph.m-default g.m-node ellipse,
-.m-graph.m-default g.m-node polygon,
-.m-graph.m-default g.m-node polyline,
-.m-graph.m-default g.m-cluster polygon {
+.m-graph :is(
+  g.m-edge :is(polygon, path),
+  g.m-node :is(ellipse, polygon, polyline),
+  g.m-cluster polygon
+) {
   stroke: var(--default-color);
 }
-.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
+
+.m-math.m-primary, .m-math :is(g, rect).m-primary,
 div.m-plot svg .m-bar.m-primary,
-.m-graph.m-primary g.m-edge polygon,
-.m-graph.m-primary g.m-node:not(.m-flat) ellipse,
-.m-graph.m-primary g.m-node:not(.m-flat) polygon,
-.m-graph.m-primary g.m-edge text,
-.m-graph.m-primary g.m-node.m-flat text,
-.m-graph.m-primary g.m-cluster text {
+.m-graph.m-primary :is(
+  g.m-edge :is(polygon, text),
+  g.m-node:not(.m-flat) :is(ellipse, polygon),
+  g.m-node.m-flat text,
+  g.m-cluster text
+) {
   fill: var(--primary-color);
 }
-.m-graph.m-primary g.m-edge polygon,
-.m-graph.m-primary g.m-edge path,
-.m-graph.m-primary g.m-node ellipse,
-.m-graph.m-primary g.m-node polygon,
-.m-graph.m-primary g.m-node polyline,
-.m-graph.m-primary g.m-cluster polygon {
+.m-graph.m-primary :is(
+  g.m-edge :is(polygon, path),
+  g.m-node :is(ellipse, polygon, polyline),
+  g.m-cluster polygon
+) {
   stroke: var(--primary-color);
 }
-.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
+
+.m-math.m-success, .m-math :is(g, rect).m-success,
 div.m-plot svg .m-bar.m-success,
-.m-graph.m-success g.m-edge polygon,
-.m-graph.m-success g.m-node:not(.m-flat) ellipse,
-.m-graph.m-success g.m-node:not(.m-flat) polygon,
-.m-graph.m-success g.m-edge text,
-.m-graph.m-success g.m-node.m-flat text,
-.m-graph.m-success g.m-cluster text {
+.m-graph.m-success :is(
+  g.m-edge :is(polygon, text),
+  g.m-node:not(.m-flat) :is(ellipse, polygon),
+  g.m-node.m-flat text,
+  g.m-cluster text
+) {
   fill: var(--success-color);
 }
-.m-graph.m-success g.m-edge polygon,
-.m-graph.m-success g.m-edge path,
-.m-graph.m-success g.m-node ellipse,
-.m-graph.m-success g.m-node polygon,
-.m-graph.m-success g.m-node polyline,
-.m-graph.m-success g.m-cluster polygon {
+.m-graph.m-success :is(
+  g.m-edge :is(polygon, path),
+  g.m-node :is(ellipse, polygon, polyline),
+  g.m-cluster polygon
+) {
   stroke: var(--success-color);
 }
-.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
+
+.m-math.m-warning, .m-math :is(g, rect).m-warning,
 div.m-plot svg .m-bar.m-warning,
-.m-graph.m-warning g.m-edge polygon,
-.m-graph.m-warning g.m-node:not(.m-flat) ellipse,
-.m-graph.m-warning g.m-node:not(.m-flat) polygon,
-.m-graph.m-warning g.m-edge text,
-.m-graph.m-warning g.m-node.m-flat text,
-.m-graph.m-warning g.m-cluster text {
+.m-graph.m-warning :is(
+  g.m-edge :is(polygon, text),
+  g.m-node:not(.m-flat) :is(ellipse, polygon),
+  g.m-node.m-flat text,
+  g.m-cluster text
+) {
   fill: var(--warning-color);
 }
-.m-graph.m-warning g.m-edge polygon,
-.m-graph.m-warning g.m-edge path,
-.m-graph.m-warning g.m-node ellipse,
-.m-graph.m-warning g.m-node polygon,
-.m-graph.m-warning g.m-node polyline,
-.m-graph.m-warning g.m-cluster polygon {
+.m-graph.m-warning :is(
+  g.m-edge :is(polygon, path),
+  g.m-node :is(ellipse, polygon, polyline),
+  g.m-cluster polygon
+) {
   stroke: var(--warning-color);
 }
-.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
+
+.m-math.m-danger, .m-math :is(g, rect).m-danger,
 div.m-plot svg .m-bar.m-danger,
-.m-graph.m-danger g.m-edge polygon,
-.m-graph.m-danger g.m-node:not(.m-flat) ellipse,
-.m-graph.m-danger g.m-node:not(.m-flat) polygon,
-.m-graph.m-danger g.m-edge text,
-.m-graph.m-danger g.m-node.m-flat text,
-.m-graph.m-danger g.m-cluster text {
+.m-graph.m-danger :is(
+  g.m-edge :is(polygon, text),
+  g.m-node:not(.m-flat) :is(ellipse, polygon),
+  g.m-node.m-flat text,
+  g.m-cluster text
+) {
   fill: var(--danger-color);
 }
-.m-graph.m-danger g.m-edge polygon,
-.m-graph.m-danger g.m-edge path,
-.m-graph.m-danger g.m-node ellipse,
-.m-graph.m-danger g.m-node polygon,
-.m-graph.m-danger g.m-node polyline,
-.m-graph.m-danger g.m-cluster polygon {
+.m-graph.m-danger :is(
+  g.m-edge :is(polygon, path),
+  g.m-node :is(ellipse, polygon, polyline),
+  g.m-cluster polygon
+) {
   stroke: var(--danger-color);
 }
-.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
+.m-math.m-info, .m-math :is(g, rect).m-info,
 div.m-plot svg .m-bar.m-info,
-.m-graph.m-info g.m-edge polygon,
-.m-graph.m-info g.m-node:not(.m-flat) ellipse,
-.m-graph.m-info g.m-node:not(.m-flat) polygon,
-.m-graph.m-info g.m-edge text,
-.m-graph.m-info g.m-node.m-flat text,
-.m-graph.m-info g.m-cluster text {
+.m-graph.m-info :is(
+  g.m-edge :is(polygon, text),
+  g.m-node:not(.m-flat) :is(ellipse, polygon),
+  g.m-node.m-flat text,
+  g.m-cluster text
+) {
   fill: var(--info-color);
 }
-.m-graph.m-info g.m-edge polygon,
-.m-graph.m-info g.m-edge path,
-.m-graph.m-info g.m-node ellipse,
-.m-graph.m-info g.m-node polygon,
-.m-graph.m-info g.m-node polyline,
-.m-graph.m-info g.m-cluster polygon {
+.m-graph.m-info :is(
+  g.m-edge :is(polygon, path),
+  g.m-node :is(ellipse, polygon, polyline),
+  g.m-cluster polygon
+) {
   stroke: var(--info-color);
 }
-.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
+.m-math.m-dim, .m-math :is(g, rect).m-dim,
 div.m-plot svg .m-bar.m-dim,
-.m-graph.m-dim g.m-edge polygon,
-.m-graph.m-dim g.m-node:not(.m-flat) ellipse,
-.m-graph.m-dim g.m-node:not(.m-flat) polygon,
-.m-graph.m-dim g.m-edge text,
-.m-graph.m-dim g.m-node.m-flat text,
-.m-graph.m-dim g.m-cluster text {
+.m-graph.m-dim :is(
+  g.m-edge :is(polygon, text),
+  g.m-node:not(.m-flat) :is(ellipse, polygon),
+  g.m-node.m-flat text,
+  g.m-cluster text
+) {
   fill: var(--dim-color);
 }
-.m-graph.m-dim g.m-edge polygon,
-.m-graph.m-dim g.m-edge path,
-.m-graph.m-dim g.m-node ellipse,
-.m-graph.m-dim g.m-node polygon,
-.m-graph.m-dim g.m-node polyline,
-.m-graph.m-dim g.m-cluster polygon {
+.m-graph.m-dim :is(
+  g.m-edge :is(polygon, path),
+  g.m-node :is(ellipse, polygon, polyline),
+  g.m-cluster polygon
+) {
   stroke: var(--dim-color);
 }
 
@@ -1268,116 +1255,108 @@ div.m-plot svg .m-bar.m-dim,
    When modifying, use these test pages for a visual check & expand as needed:
     https://mcss.mosra.cz/plugins/math-and-code/test/
     https://mcss.mosra.cz/plugins/plots-and-graphs/test/ */
-.m-graph g.m-edge.m-default polygon,
-.m-graph g.m-node.m-default:not(.m-flat) ellipse,
-.m-graph g.m-node.m-default:not(.m-flat) polygon,
-.m-graph g.m-edge.m-default text,
-.m-graph g.m-node.m-default.m-flat text,
-.m-graph g.m-cluster.m-default text {
+.m-graph :is(
+  g.m-edge.m-default :is(polygon, text),
+  g:is(.m-node, .m-cluster).m-default text
+  g.m-node.m-default:not(.m-flat) :is(ellipse, polygon)
+) {
   fill: var(--default-color);
 }
-.m-graph g.m-edge.m-default polygon,
-.m-graph g.m-edge.m-default path,
-.m-graph g.m-node.m-default ellipse,
-.m-graph g.m-node.m-default polygon,
-.m-graph g.m-node.m-default polyline,
-.m-graph g.m-cluster.m-default polygon {
+.m-graph :is(
+  g.m-edge.m-default :is(polygon, path),
+  g.m-node.m-default :is(ellipse, polygon, polyline),
+  g.m-cluster.m-default polygon
+) {
   stroke: var(--default-color);
 }
-.m-graph g.m-edge.m-primary polygon,
-.m-graph g.m-node.m-primary:not(.m-flat) ellipse,
-.m-graph g.m-node.m-primary:not(.m-flat) polygon,
-.m-graph g.m-edge.m-primary text,
-.m-graph g.m-node.m-primary.m-flat text,
-.m-graph g.m-cluster.m-primary text {
+
+.m-graph :is(
+  g.m-edge.m-primary :is(polygon, text),
+  g:is(.m-node, .m-cluster).m-primary text
+  g.m-node.m-primary:not(.m-flat) :is(ellipse, polygon)
+) {
   fill: var(--primary-color);
 }
-.m-graph g.m-edge.m-primary polygon,
-.m-graph g.m-edge.m-primary path,
-.m-graph g.m-node.m-primary ellipse,
-.m-graph g.m-node.m-primary polygon,
-.m-graph g.m-node.m-primary polyline,
-.m-graph g.m-cluster.m-primary polygon {
+.m-graph :is(
+  g.m-edge.m-primary :is(polygon, path),
+  g.m-node.m-primary :is(ellipse, polygon, polyline),
+  g.m-cluster.m-primary polygon
+) {
   stroke: var(--primary-color);
 }
-.m-graph g.m-edge.m-success polygon,
-.m-graph g.m-node.m-success:not(.m-flat) ellipse,
-.m-graph g.m-node.m-success:not(.m-flat) polygon,
-.m-graph g.m-edge.m-success text,
-.m-graph g.m-node.m-success.m-flat text,
-.m-graph g.m-cluster.m-success text {
+
+.m-graph :is(
+  g.m-edge.m-success :is(polygon, text),
+  g:is(.m-node, .m-cluster).m-success text
+  g.m-node.m-success:not(.m-flat) :is(ellipse, polygon)
+) {
   fill: var(--success-color);
 }
-.m-graph g.m-edge.m-success polygon,
-.m-graph g.m-edge.m-success path,
-.m-graph g.m-node.m-success ellipse,
-.m-graph g.m-node.m-success polygon,
-.m-graph g.m-node.m-success polyline,
-.m-graph g.m-cluster.m-success polygon {
+.m-graph :is(
+  g.m-edge.m-success :is(polygon, path),
+  g.m-node.m-success :is(ellipse, polygon, polyline),
+  g.m-cluster.m-success polygon
+) {
   stroke: var(--success-color);
 }
-.m-graph g.m-edge.m-warning polygon,
-.m-graph g.m-node.m-warning:not(.m-flat) ellipse,
-.m-graph g.m-node.m-warning:not(.m-flat) polygon,
-.m-graph g.m-edge.m-warning text,
-.m-graph g.m-node.m-warning.m-flat text,
-.m-graph g.m-cluster.m-warning text {
+
+.m-graph :is(
+  g.m-edge.m-warning :is(polygon, text),
+  g:is(.m-node, .m-cluster).m-warning text
+  g.m-node.m-warning:not(.m-flat) :is(ellipse, polygon)
+) {
   fill: var(--warning-color);
 }
-.m-graph g.m-edge.m-warning polygon,
-.m-graph g.m-edge.m-warning path,
-.m-graph g.m-node.m-warning ellipse,
-.m-graph g.m-node.m-warning polygon,
-.m-graph g.m-node.m-warning polyline,
-.m-graph g.m-cluster.m-warning polygon {
+.m-graph :is(
+  g.m-edge.m-warning :is(polygon, path),
+  g.m-node.m-warning :is(ellipse, polygon, polyline),
+  g.m-cluster.m-warning polygon
+) {
   stroke: var(--warning-color);
 }
-.m-graph g.m-edge.m-danger polygon,
-.m-graph g.m-node.m-danger:not(.m-flat) ellipse,
-.m-graph g.m-node.m-danger:not(.m-flat) polygon,
-.m-graph g.m-edge.m-danger text,
-.m-graph g.m-node.m-danger.m-flat text,
-.m-graph g.m-cluster.m-danger text {
+
+.m-graph :is(
+  g.m-edge.m-danger :is(polygon, text),
+  g:is(.m-node, .m-cluster).m-danger text
+  g.m-node.m-danger:not(.m-flat) :is(ellipse, polygon)
+) {
   fill: var(--danger-color);
 }
-.m-graph g.m-edge.m-danger polygon,
-.m-graph g.m-edge.m-danger path,
-.m-graph g.m-node.m-danger ellipse,
-.m-graph g.m-node.m-danger polygon,
-.m-graph g.m-node.m-danger polyline,
-.m-graph g.m-cluster.m-danger polygon {
+.m-graph :is(
+  g.m-edge.m-danger :is(polygon, path),
+  g.m-node.m-danger :is(ellipse, polygon, polyline),
+  g.m-cluster.m-danger polygon
+) {
   stroke: var(--danger-color);
 }
-.m-graph g.m-edge.m-info polygon,
-.m-graph g.m-node.m-info:not(.m-flat) ellipse,
-.m-graph g.m-node.m-info:not(.m-flat) polygon,
-.m-graph g.m-edge.m-info text,
-.m-graph g.m-node.m-info.m-flat text,
-.m-graph g.m-cluster.m-info text {
+
+.m-graph :is(
+  g.m-edge.m-info :is(polygon, text),
+  g:is(.m-node, .m-cluster).m-info text
+  g.m-node.m-info:not(.m-flat) :is(ellipse, polygon)
+) {
   fill: var(--info-color);
 }
-.m-graph g.m-edge.m-info polygon,
-.m-graph g.m-edge.m-info path,
-.m-graph g.m-node.m-info ellipse,
-.m-graph g.m-node.m-info polygon,
-.m-graph g.m-node.m-info polyline,
-.m-graph g.m-cluster.m-info polygon {
+.m-graph :is(
+  g.m-edge.m-info :is(polygon, path),
+  g.m-node.m-info :is(ellipse, polygon, polyline),
+  g.m-cluster.m-info polygon
+) {
   stroke: var(--info-color);
 }
-.m-graph g.m-edge.m-dim polygon,
-.m-graph g.m-node.m-dim:not(.m-flat) ellipse,
-.m-graph g.m-node.m-dim:not(.m-flat) polygon,
-.m-graph g.m-edge.m-dim text,
-.m-graph g.m-node.m-dim.m-flat text,
-.m-graph g.m-cluster.m-dim text {
+
+.m-graph :is(
+  g.m-edge.m-dim :is(polygon, text),
+  g:is(.m-node, .m-cluster).m-dim text
+  g.m-node.m-dim:not(.m-flat) :is(ellipse, polygon)
+) {
   fill: var(--dim-color);
 }
-.m-graph g.m-edge.m-dim polygon,
-.m-graph g.m-edge.m-dim path,
-.m-graph g.m-node.m-dim ellipse,
-.m-graph g.m-node.m-dim polygon,
-.m-graph g.m-node.m-dim polyline,
-.m-graph g.m-cluster.m-dim polygon {
+.m-graph :is(
+  g.m-edge.m-dim :is(polygon, path),
+  g.m-node.m-dim :is(ellipse, polygon, polyline),
+  g.m-cluster.m-dim polygon
+) {
   stroke: var(--dim-color);
 }