Update styles

index.html

@@ -5,14 +5,14 @@
     <title>Web Access Control</title>
     <meta content="width=device-width, initial-scale=1" name="viewport" />
     <link href="https://www.w3.org/StyleSheets/TR/2021/base.css" media="all" rel="stylesheet" title="W3C-Base" />
+    <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="all" rel="stylesheet" />
 <style>
 body {
 counter-reset:section;
 counter-reset:sub-section;
 }
-em.rfc2119 { color: #900; }
-code, samp { color: #c83500; }
-pre code, pre samp { color: #000; }
+code, samp { color: #e00; }
+pre code, pre samp { color: var(--text); }
 dfn { font-weight:inherit; }
 .do.fragment a { border-bottom:0; }
 .do.fragment a:hover { background:none; border-bottom:0; }
@@ -38,20 +38,19 @@
 text-transform: uppercase;
 }
 div.issue h3, div.issue h4, div.issue h5 {
-color:#ae1e1e;
+color:var(--issueheading-text);
 }
 div.note h3, div.note h4, div.note h5 {
-color:#178217;
+color:var(--noteheading-text);
 }
 figure .example-h {
 margin-top:0;
 text-align: left;
-color:#827017;
+color:var(--exampleheading-text);
 }
 figure .example-h > span {
 text-transform: uppercase;
 }
-
 header address a[href] {
 float: right;
 margin: 1rem 0 0.2rem 0.4rem;
@@ -91,10 +90,10 @@
 counter-increment:sub-sub-sub-section;
 counter-reset:sub-sub-sub-sub-section;
 }
-article section:not([id=abstract]):not([id=sotd]):not([id=references]):not([id=appendix]):not([id=acknowledgements]):not([id=changelog]):not([id=exit-criteria]):not([id^=table-of-]) > h2:before {
+article section:not([id=abstract]):not([id=sotd]):not([id=references]):not([id=appendix]):not([id=acknowledgements]):not([id=changelog]):not([id=exit-criteria]):not([id^=table-of-]):not([id^=list-of-]) > h2:before {
 content:counter(section) ".\00a0";
 }
-section:not([id$=references]):not([id^=changelog]):not([id=exit-criteria]) > h3:before {
+section:not([id$=references]):not([id^=changelog]):not([id=exit-criteria]):not([id^=table-of-]):not([id^=list-of-]) > h3:before {
 content:counter(section) "." counter(sub-section) "\00a0";
 }
 section > h4:before {
@@ -118,11 +117,74 @@
 display: inline;
 }
 dl [rel~="odrl:action"] li:after {
-content: ",";
+content: ", ";
 }
 dl [rel~="odrl:action"] li:last-child:after {
 content: "";
 }
+aside section > .toc,
+aside section > .toc ol {
+margin-left: revert;
+}
+aside section > .toc li li {
+margin-left: 1em;
+font-size: revert;
+}
+table {
+border-collapse:collapse;
+}
+table + table {
+margin-top:2em;
+}
+caption {
+text-align:left;
+padding:0 0.25em 0.25em;
+margin-bottom: 1em;
+font-size: 1em;
+font-style: revert;
+font-weight: bold;
+border-bottom: 1px solid;
+}
+caption, tbody, tfoot {
+border-bottom:2pt solid #ccc;
+}
+thead,
+thead th[colspan] {
+border-bottom:1pt solid #ccc;
+}
+[rowspan] { vertical-align: bottom; }
+tbody [rowspan] { vertical-align: middle; }
+
+tbody th[scope="rowgroup"] {
+border-bottom:3pt double #ccc;
+}
+tr {
+border-bottom:1pt solid #ccc;
+}
+th, td {
+padding:0.25em;
+font-size:0.923em;
+word-wrap:normal;
+}
+table ul,
+table ol,
+table li,
+table p,
+table dd {
+margin:0;
+text-align:left;
+}
+table ul,
+table ol {
+padding-left:1em;
+}
+tfoot td > * + * {
+margin-top:1em;
+}
+tfoot dd:after { content: "\A"; white-space:pre; }
+tfoot dt, tfoot dd { display:inline; }
+tfoot dd { margin-left: 0.5em }
+tfoot dd + dt { margin-top:0; }
 </style>
     <link href="https://dokie.li/media/css/dokieli.css" media="all" rel="stylesheet" />
     <script src="https://dokie.li/scripts/dokieli.js"></script>