@charset "UTF-8";
/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *     -> ins/del[cite] for candidate and proposed changes (amendments)
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *   - .correction for "candidate corrections"       (div, aside, details, section)
 *   - .addition   for "candidate additions"         (div, aside, details, section)
 *   - .correction.proposed for "proposed corrections" (div, aside, details, section)
 *   - .addition.proposed   for "proposed additions"   (div, aside, details, section)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Outdated warning for old specs
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/
/******************************************************************************/
/*                                  Colors                                    */
/******************************************************************************/
/* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */
@import url("https://fonts.googleapis.com/css2?family=Inter&family=JetBrains+Mono:wght@400;700&display=swap");
:root {
  --text: black;
  --bg: white;
  --logo-bg: #1a5e9a;
  --logo-active-bg: #c00;
  --logo-text: white;
  --tocnav-normal-text: #707070;
  --tocnav-normal-bg: var(--bg);
  --tocnav-hover-text: var(--tocnav-normal-text);
  --tocnav-hover-bg: #f8f8f8;
  --tocnav-active-text: #c00;
  --tocnav-active-bg: var(--tocnav-normal-bg);
  --tocsidebar-text: var(--text);
  --tocsidebar-bg: #f7f8f9;
  --tocsidebar-shadow: rgba(0, 0, 0, 0.1);
  --tocsidebar-heading-text: hsla(203, 20%, 40%, 0.7);
  --toclink-text: var(--text);
  --toclink-underline: #3980b5;
  --toclink-visited-text: var(--toclink-text);
  --toclink-visited-underline: #054572;
  --heading-text: #005a9c;
  --hr-text: var(--text);
  --algo-border: #def;
  --del-text: #aa0000;
  --del-bg: transparent;
  --ins-text: #006100;
  --ins-bg: transparent;
  --a-normal-text: #034575;
  --a-normal-underline: #707070;
  --a-visited-text: var(--a-normal-text);
  --a-visited-underline: #bbb;
  --a-hover-bg: rgba(75%, 75%, 75%, 0.25);
  --a-active-text: #c00;
  --a-active-underline: #c00;
  --blockquote-border: silver;
  --blockquote-bg: transparent;
  --blockquote-text: var(--text);
  --issue-border: #e05252;
  --issue-bg: #fbe9e9;
  --issue-text: var(--text);
  --issueheading-text: #831616;
  --example-border: #e0cb52;
  --example-bg: #fcfaee;
  --example-text: var(--text);
  --exampleheading-text: #574b0f;
  --note-border: #52e052;
  --note-bg: #e9fbe9;
  --note-text: var(--text);
  --noteheading-text: hsl(120, 70%, 30%);
  --notesummary-underline: silver;
  --advisement-border: orange;
  --advisement-bg: #fec;
  --advisement-text: var(--text);
  --advisementheading-text: #b35f00;
  --amendment-border: #330099;
  --amendment-bg: #f5f0ff;
  --amendment-text: var(--text);
  --amendmentheading-text: #220066;
  --warning-border: red;
  --warning-bg: hsla(40, 100%, 50%, 0.95);
  --warning-text: var(--text);
  --def-border: #8ccbf2;
  --def-bg: #def;
  --def-text: var(--text);
  --defrow-border: #bbd7e9;
  --datacell-border: silver;
  --indexinfo-text: #707070;
  --indextable-hover-text: black;
  --indextable-hover-bg: #f7f8f9;
  --outdatedspec-bg: rgba(0, 0, 0, 0.5);
  --outdatedspec-text: black;
  --outdated-bg: maroon;
  --outdated-text: white;
  --outdated-shadow: red;
  --editedrec-bg: darkorange;
}

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/
body {
  counter-reset: example figure issue;
  /* Layout */
  max-width: 50em; /* limit line length to 50em for readability   */
  margin: 0 auto 4em; /* center text within page, space for footers  */
  padding: 1.6em 1.5em 38vh 50px; /* assume 16px font size for downlevel clients */
  padding: 1.6em 1.5em 38vh calc(26px + 1.5em); /* leave space for status flag   */
  /* Typography */
  line-height: 1.5;
  font-family: sans-serif;
  widows: 2;
  orphans: 2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Colors */
  color: black;
  color: var(--text);
  background: white top left fixed no-repeat;
  background-color: var(--bg);
  background-size: 25px auto;
}

/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/
/** Header ********************************************************************/
div.head {
  margin-bottom: 1em;
}

div.head hr {
  border-style: solid;
}

div.head h1 {
  font-weight: bold;
  margin: 0 0 0.1em;
  font-size: 220%;
}

#w3c-state {
  margin-top: 0;
  margin-bottom: 1.5em;
  font: 140% sans-serif; /* Reset all font styling to clear out UA styles */
  font-family: inherit; /* Inherit the font family. */
  line-height: 1.2; /* Keep wrapped headings compact */
  hyphens: manual; /* Hyphenated headings look weird */
  color: #005a9c;
  color: var(--heading-text);
}

/** W3C Logo ******************************************************************/
.head p:not(.copyright):first-child {
  margin: 0;
}

.head p:not(.copyright):first-child > a,
.head > a:first-child {
  float: right;
  margin: 0.4rem 0 0.2rem 0.4rem;
}

.head img[src*="logos/W3C"] {
  display: block;
  border: solid #1a5e9a;
  border: solid var(--logo-bg);
  border-width: 0.65rem 0.7rem 0.6rem;
  border-radius: 0.4rem;
  background: #1a5e9a;
  background: var(--logo-bg);
  color: white;
  color: var(--logo-text);
  font-weight: bold;
}

.head a:hover > img[src*="logos/W3C"],
.head a:focus > img[src*="logos/W3C"] {
  opacity: 0.8;
}

.head a:active > img[src*="logos/W3C"] {
  background: #c00;
  background: var(--logo-active-bg);
  border-color: #c00;
  border-color: var(--logo-active-bg);
}

/* see also additional rules in Link Styling section */
/** Copyright *****************************************************************/
p.copyright,
p.copyright small {
  font-size: small;
}

/** Back to Top / ToC Toggle **************************************************/
@media print {
  #toc-nav {
    display: none;
  }
}
@media not print {
  #toc-nav {
    position: fixed;
    z-index: 3;
    bottom: 0;
    left: 0;
    margin: 0;
    min-width: 1.33em;
    border-top-right-radius: 2rem;
    box-shadow: 0 0 2px;
    font-size: 1.5em;
  }
  #toc-nav > a {
    display: block;
    white-space: nowrap;
    height: 1.33em;
    padding: 0.1em 0.3em;
    margin: 0;
    box-shadow: 0 0 2px;
    border: none;
    border-top-right-radius: 1.33em;
    color: #707070;
    color: var(--tocnav-normal-text);
    background: white;
    background: var(--tocnav-normal-bg);
  }
  #toc-nav > a:hover,
  #toc-nav > a:focus {
    color: black;
    color: var(--tocnav-hover-text);
    background: #f8f8f8;
    background: var(--tocnav-hover-bg);
  }
  #toc-nav > a:active {
    color: #c00;
    color: var(--tocnav-active-text);
    background: white;
    background: var(--tocnav-active-bg);
  }
  #toc-nav > #toc-jump,
  #toc-nav > #toc-toggle {
    padding-bottom: 2em;
    margin-bottom: -1.9em;
  }
  /* statusbar gets in the way on keyboard focus; remove once browsers fix */
  #toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
    padding-bottom: 1.5rem;
  }
  #toc-nav:not(:hover) > a:not(:focus) > span + span {
    /* Ideally this uses :focus-within on #toc-nav */
    display: none;
  }
  #toc-nav > a > span + span {
    padding-right: 0.2em;
  }
}
/** ToC Sidebar ***************************************************************/
/* Floating sidebar */
@media screen {
  body.toc-sidebar #toc {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 23.5em;
    max-width: 80%;
    max-width: calc(100% - 2em - 26px);
    overflow: auto;
    padding: 0 1em;
    padding-left: 42px;
    padding-left: calc(1em + 26px);
    color: black;
    color: var(--tocsidebar-text);
    background: inherit;
    background-color: #f7f8f9;
    background-color: var(--tocsidebar-bg);
    z-index: 1;
    box-shadow: -0.1em 0 0.25em rgba(0, 0, 0, 0.1) inset;
    box-shadow: -0.1em 0 0.25em var(--tocsidebar-shadow) inset;
  }
  body.toc-sidebar #toc h2 {
    margin-top: 0.8rem;
    font-variant: small-caps;
    font-variant: all-small-caps;
    text-transform: lowercase;
    font-weight: bold;
    color: gray;
    color: hsla(203, 20%, 40%, 0.7);
    color: var(--tocsidebar-heading-text);
  }
  body.toc-sidebar #toc-jump:not(:focus) {
    width: 0;
    height: 0;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
}
/* Hide main scroller when only the ToC is visible anyway */
@media screen and (max-width: 28em) {
  body.toc-sidebar {
    overflow: hidden;
  }
}
/* Sidebar with its own space */
@media screen and (min-width: 78em) {
  body:not(.toc-inline) #toc {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 23.5em;
    overflow: auto;
    padding: 0 1em;
    padding-left: 42px;
    padding-left: calc(1em + 26px);
    color: black;
    color: var(--tocsidebar-text);
    background: inherit;
    background-color: #f7f8f9;
    background-color: var(--tocsidebar-bg);
    z-index: 1;
    box-shadow: -0.1em 0 0.25em rgba(0, 0, 0, 0.1) inset;
    box-shadow: -0.1em 0 0.25em var(--tocsidebar-shadow) inset;
  }
  body:not(.toc-inline) #toc h2 {
    margin-top: 0.8rem;
    font-variant: small-caps;
    font-variant: all-small-caps;
    text-transform: lowercase;
    font-weight: bold;
    color: gray;
    color: hsla(203, 20%, 40%, 0.7);
    color: var(--tocsidebar-heading-text);
  }
  body:not(.toc-inline) {
    padding-left: 29em;
  }
  /* See also Overflow section at the bottom */
  body:not(.toc-inline) #toc-jump:not(:focus) {
    width: 0;
    height: 0;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
}
@media screen and (min-width: 90em) {
  body:not(.toc-inline) {
    margin: 0 4em;
  }
}
/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/
/** Headings ******************************************************************/
h1,
h2,
h3,
h4,
h5,
h6,
dt {
  page-break-after: avoid;
  page-break-inside: avoid;
  font: 100% sans-serif; /* Reset all font styling to clear out UA styles */
  font-family: inherit; /* Inherit the font family. */
  line-height: 1.2; /* Keep wrapped headings compact */
  hyphens: manual; /* Hyphenated headings look weird */
}

h2,
h3,
h4,
h5,
h6 {
  margin-top: 3rem;
}

h1,
h2,
h3 {
  color: #005a9c;
  color: var(--heading-text);
}

h1 {
  font-size: 170%;
}

h2 {
  font-size: 140%;
}

h3 {
  font-size: 120%;
}

h4 {
  font-weight: bold;
}

h5 {
  font-style: italic;
}

h6 {
  font-variant: small-caps;
}

dt {
  font-weight: bold;
}

/** Subheadings ***************************************************************/
h1 + h2,
#subtitle {
  /* #subtitle is a subtitle in an H2 under the H1 */
  margin-top: 0;
}

h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
  margin-top: 1.2em; /* = 1 x line-height */
}

/** Section divider ***********************************************************/
:not(.head) > :not(.head) + hr {
  font-size: 1.5em;
  text-align: center;
  margin: 1em auto;
  height: auto;
  color: black;
  color: var(--hr-text);
  border: transparent solid 0;
  background: transparent;
}

:not(.head) > hr::before {
  content: "✧  ✧  ✧";
}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/
p {
  margin: 1em 0;
}

dd > p:first-child,
li > p:first-child {
  margin-top: 0;
}

ul,
ol {
  margin-left: 0;
  padding-left: 2em;
}

li {
  margin: 0.25em 0 0.5em;
  padding: 0;
}

dl dd {
  margin: 0 0 0.5em 2em;
}

.head dd + dd {
  /* compact for header */
  margin-top: -0.5em;
}

/* Style for algorithms */
ol.algorithm ol:not(.algorithm),
.algorithm > ol ol:not(.algorithm) {
  border-left: 0.5em solid #def;
  border-left: 0.5em solid var(--algo-border);
}

/* Style for switch/case <dl>s */
dl.switch > dd > ol.only {
  margin-left: 0;
}

dl.switch > dd > ol.algorithm {
  margin-left: -2em;
}

dl.switch {
  padding-left: 2em;
}

dl.switch > dt {
  text-indent: -1.5em;
  margin-top: 1em;
}

dl.switch > dt + dt {
  margin-top: 0;
}

dl.switch > dt::before {
  content: "↪";
  padding: 0 0.5em 0 0;
  display: inline-block;
  width: 1em;
  text-align: right;
  line-height: 0.5em;
}

/** Terminology Markup ********************************************************/
/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/
/** Terminology Markup ********************************************************/
dfn {
  /* Defining instance */
  font-weight: bolder;
}

a > i {
  /* Instance of term */
  font-style: normal;
}

dt dfn code,
code.idl {
  font-size: inherit;
}

dfn var {
  font-style: normal;
}

/** Change Marking ************************************************************/
del {
  color: #aa0000;
  color: var(--del-text);
  background: transparent;
  background: var(--del-bg);
  text-decoration: line-through;
}

ins {
  color: #006100;
  color: var(--ins-text);
  background: transparent;
  background: var(--ins-bg);
  text-decoration: underline;
}

ins:not(#dontusethisid) *,
del:not(#dontusethisid) * {
  color: inherit;
}

ins:not([hidden]).diff-inactive,
del:not([hidden]).diff-inactive {
  all: unset;
}

ins:not(.diff-inactive) *,
del:not(.diff-inactive) * {
  color: inherit;
}

/* for amendments (candidate/proposed changes) */
.amendment ins,
.correction ins,
.addition ins,
ins[cite] {
  text-decoration-style: dotted;
}

.amendment del,
.correction del,
.addition del,
del[cite] {
  text-decoration-style: dotted;
}

.amendment.proposed ins,
.correction.proposed ins,
.addition.proposed ins,
ins[cite].proposed {
  text-decoration-style: double;
}

.amendment.proposed del,
.correction.proposed del,
.addition.proposed del,
del[cite].proposed {
  text-decoration-style: double;
}

/** Miscellaneous improvements to inline formatting ***************************/
sup {
  vertical-align: super;
  font-size: 80%;
}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/
/** General monospace/pre rules ***********************************************/
pre,
code,
samp {
  font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
  font-size: 0.9em;
  hyphens: none;
  text-transform: none;
  text-align: left;
  text-align: start;
  font-variant: normal;
  orphans: 3;
  widows: 3;
  page-break-before: avoid;
}

pre code,
code code {
  font-size: 100%;
}

pre {
  margin-top: 1em;
  margin-bottom: 1em;
  overflow: auto;
}

/** Inline Code fragments *****************************************************/
/* Do something nice. */
/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/
/** General Hyperlinks ********************************************************/
/* We hyperlink a lot, so make it less intrusive */
a[href] {
  color: #034575;
  color: var(--a-normal-text);
  text-decoration-color: #707070;
  text-decoration-color: var(--a-normal-underline);
  text-decoration-skip-ink: none;
}

a:visited {
  color: #034575;
  color: var(--a-visited-text);
  text-decoration-color: #bbb;
  text-decoration-color: var(--a-visited-underline);
}

/* Indicate interaction with the link */
a[href]:focus,
a[href]:hover {
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
}

a[href]:active {
  color: #c00;
  color: var(--a-active-text);
  text-decoration-color: #c00;
  text-decoration-color: var(--a-active-underline);
}

/* Backout above styling for W3C logo */
.head p:not(.copyright):first-child > a,
.head > a:first-child {
  border: none;
  text-decoration: none;
  background: transparent;
}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/
img {
  border-style: none;
}

/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/
figure,
.figure,
.sidefigure {
  page-break-inside: avoid;
  text-align: center;
  margin: 2.5em 0;
}

.figure img,
.sidefigure img,
figure img,
.figure object,
.sidefigure object,
figure object {
  max-width: 100%;
  margin: auto;
  height: auto;
}

.figure pre,
.sidefigure pre,
figure pre {
  text-align: left;
  display: table;
  margin: 1em auto;
}

.figure table,
figure table {
  margin: auto;
}

@media screen and (min-width: 20em) {
  .sidefigure {
    float: right;
    width: 50%;
    margin: 0 0 0.5em 0.5em;
  }
}
.caption,
figcaption,
caption {
  font-style: italic;
  font-size: 90%;
}

.caption::before,
figcaption::before,
figcaption > .marker {
  font-weight: bold;
}

.caption,
figcaption {
  counter-increment: figure;
}

/* DL list is indented 2em, but figure inside it is not */
dd > .figure,
dd > figure {
  margin-left: -2em;
}

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/
.issue,
.note,
.example,
.advisement,
blockquote,
.amendment,
.correction,
.addition {
  padding: 0.5em 1em;
  border: 0.5em;
  border-left-style: solid;
  page-break-inside: avoid;
  margin: 1em auto;
}

span.issue,
span.note {
  padding: 0.1em 0.5em 0.15em;
  border-right-style: solid;
}

.note > p:first-child,
.issue > p:first-child,
blockquote > :first-child,
.amendment > p:first-child,
.correction > p:first-child,
.addition > p:first-child {
  margin-top: 0;
}

.note > p:last-child,
.issue > p:last-child,
blockquote > :last-child,
.amendment > p:last-child,
.correction > p:last-child,
.addition > p:last-child {
  margin-bottom: 0;
}

.issue::before,
.issue > .marker,
.example::before,
.example > .marker,
.note::before,
.note > .marker,
details.note > summary > .marker,
.amendment::before,
.amendment > .marker,
details.amendment > summary > .marker,
.correction::before,
.correction > .marker,
details.correction > summary > .marker,
.addition::before,
.addition > .marker,
details.addition > summary > .marker {
  text-transform: uppercase;
  padding-right: 1em;
}

.example::before,
.example > .marker {
  display: block;
  padding-right: 0em;
}

/** Blockquotes ***************************************************************/
blockquote {
  border-color: silver;
  border-color: var(--blockquote-border);
  background: var(--blockquote-bg);
  color: var(--blockquote-text);
}

/** Open issue ****************************************************************/
.issue {
  border-color: #e05252;
  border-color: var(--issue-border);
  background: #fbe9e9;
  background: var(--issue-bg);
  color: black;
  color: var(--issue-text);
  counter-increment: issue;
  overflow: auto;
}

.issue::before,
.issue > .marker {
  color: #831616;
  color: var(--issueheading-text);
}

/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */
/** Example *******************************************************************/
.example {
  border-color: #e0cb52;
  border-color: var(--example-border);
  background: #fcfaee;
  background: var(--example-bg);
  color: black;
  color: var(--example-text);
  counter-increment: example;
  overflow: auto;
  clear: both;
}

.example::before,
.example > .marker {
  color: #574b0f;
  color: var(--exampleheading-text);
}

/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */
/** Non-normative Note ********************************************************/
.note, blockquote {
  border-color: #52e052;
  border-color: var(--note-border);
  background: #e9fbe9;
  background: var(--note-bg);
  color: black;
  color: var(--note-text);
  overflow: auto;
}

.note::before,
.note > .marker,
details.note > summary {
  color: hsl(120, 70%, 30%);
  color: var(--noteheading-text);
}

/* Add .note::before { content: "Note "; } for autogen label,
	   or use class="marker" to mark up the label in source. */
details.note[open] > summary {
  border-bottom: 1px silver solid;
  border-bottom: 1px var(--notesummary-underline) solid;
}

/** Advisement Box ************************************************************/
/*  for attention-grabbing normative statements */
.advisement {
  border-color: orange;
  border-color: var(--advisement-border);
  border-style: none solid;
  background: #fec;
  background: var(--advisement-bg);
  color: black;
  color: var(--advisement-text);
}

strong.advisement {
  display: block;
  text-align: center;
}

.advisement::before,
.advisement > .marker {
  color: #b35f00;
  color: var(--advisementheading-text);
}

/** Amendment Box *************************************************************/
.amendment,
.correction,
.addition {
  border-color: #330099;
  border-color: var(--amendment-border);
  background: #f5f0ff;
  background: var(--amendment-bg);
}

.amendment.proposed,
.correction.proposed,
.addition.proposed {
  border-style: solid;
  border-block-width: 0.25em;
}

.amendment::before,
.amendment > .marker,
details.amendment > summary::before,
details.amendment > summary > .marker,
.correction::before,
.correction > .marker,
details.correction > summary::before,
details.correction > summary > .marker,
.addition::before,
.addition > .marker,
details.addition > summary::before,
details.addition > summary > .marker {
  color: #220066;
  color: var(--amendmentheading-text);
}

.amendment.proposed::before,
.amendment.proposed > .marker,
details.amendment.proposed > summary::before,
details.amendment.proposed > summary > .marker,
.correction.proposed::before,
.correction.proposed > .marker,
details.correction.proposed > summary::before,
details.correction.proposed > summary > .marker,
.addition.proposed::before,
.addition.proposed > .marker,
details.addition.proposed > summary::before,
details.addition.proposed > summary > .marker {
  font-weight: bold;
}

/** Spec Obsoletion Notice ****************************************************/
/* obnoxious obsoletion notice for older/abandoned specs. */
details:not([hidden]) {
  display: block;
}

summary {
  font-weight: bolder;
}

.annoying-warning:not(details),
details.annoying-warning:not([open]) > summary,
details.annoying-warning[open] {
  background: hsla(40, 100%, 50%, 0.95);
  background: var(--warning-bg);
  color: black;
  color: var(--warning-text);
  padding: 0.75em 1em;
  border: red;
  border: var(--warning-border);
  border-style: solid none;
  box-shadow: 0 2px 8px black;
  text-align: center;
}

.annoying-warning :last-child {
  margin-bottom: 0;
}

@media not print {
  details.annoying-warning[open] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 2em;
    z-index: 1000;
  }
}
details.annoying-warning:not([open]) > summary {
  text-align: center;
}

/** Entity Definition Boxes ***************************************************/
.spec > table {
  padding: 0.5em 1em;
  background: #def;
  background: var(--def-bg);
  margin: 1.2em 0;
  border-left: 0.5em solid #8ccbf2;
  border-left: 0.5em solid var(--def-border);
  color: black;
  color: var(--def-text);
}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/
th,
td {
  text-align: left;
  text-align: start;
}

/** Property/Descriptor Definition Tables *************************************/
.spec > table {
  /* inherits .def box styling, see above */
  width: 100%;
  border-spacing: 0;
}

.spec > table td,
.spec > table th {
  padding: 0.5em;
  vertical-align: baseline;
  border-bottom: 1px solid #bbd7e9;
  border-bottom: 1px solid var(--defrow-border);
}

.spec > table > tbody > tr:last-child th,
.spec > table > tbody > tr:last-child td {
  border-bottom: 0;
}

.spec > table th {
  font-style: italic;
  font-weight: normal;
  padding-left: 1em;
  width: 3em;
}

/* For when values are extra-complex and need formatting for readability */
table td.pre {
  white-space: pre-wrap;
}

/* A footnote at the bottom of a def table */
.spec > table td.footnote {
  padding-top: 0.6em;
}

.spec > table td.footnote::before {
  content: " ";
  display: block;
  height: 0.6em;
  width: 4em;
  border-top: thin solid;
}

/** Data tables (and properly marked-up index tables) *************************/
/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/
table {
  word-wrap: normal;
  overflow-wrap: normal;
  hyphens: manual;
}

table.data,
table.index {
  margin: 1em auto;
  border-collapse: collapse;
  border: hidden;
  width: 100%;
}

table.data caption,
table.index caption {
  max-width: 50em;
  margin: 0 auto 1em;
}

table.data td,
table.data th,
table.index td,
table.index th {
  padding: 0.5em 1em;
  border-width: 1px;
  border-color: silver;
  border-color: var(--datacell-border);
  border-top-style: solid;
}

table.data thead td:empty {
  padding: 0;
  border: 0;
}

table.data thead,
table.index thead,
table.data tbody,
table.index tbody {
  border-bottom: 2px solid;
}

table.data colgroup,
table.index colgroup {
  border-left: 2px solid;
}

table.data tbody th:first-child,
table.index tbody th:first-child {
  border-right: 2px solid;
  border-top: 1px solid silver;
  border-top: 1px solid var(--datacell-border);
  padding-right: 1em;
}

table.data th[colspan],
table.data td[colspan] {
  text-align: center;
}

table.complex.data th,
table.complex.data td {
  border: 1px solid silver;
  border: 1px solid var(--datacell-border);
  text-align: center;
}

table.data.longlastcol td:last-child,
table.data td.long {
  vertical-align: baseline;
  text-align: left;
}

table.data img {
  vertical-align: middle;
}

/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/
/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/
/** Table of Contents *********************************************************/
.toc a {
  /* More spacing; use padding to make it part of the click target. */
  padding: 0.1rem 1px 0;
  /* Larger, more consistently-sized click target */
  display: block;
  /* Switch to using border-bottom */
  text-decoration: none;
  border-bottom: 1px solid;
  border-bottom: 1px solid;
  /* Reverse color scheme */
  color: black;
  color: var(--toclink-text);
  text-decoration-color: #3980b5;
  text-decoration-color: var(--toclink-underline);
  border-color: #3980b5;
  border-color: var(--toclink-underline);
}

.toc a:visited {
  color: black;
  color: var(--toclink-visited-text);
  text-decoration-color: #054572;
  text-decoration-color: var(--toclink-visited-underline);
  border-color: #054572;
  border-color: var(--toclink-visited-underline);
}

.toc a:focus,
.toc a:hover {
  background: #f8f8f8;
  background: rgba(191.25, 191.25, 191.25, 0.25);
  background: var(--a-hover-bg);
  border-bottom-width: 3px;
  margin-bottom: -2px;
}

.toc a:not(:focus):not(:hover) {
  /* Allow colors to cascade through from link styling */
  border-bottom-color: transparent;
}

.toc,
.toc ol,
.toc ul,
.toc li {
  list-style: none; /* Numbers must be inlined into source */
  /* because generated content isn't search/selectable and markers can't do multilevel yet */
  margin: 0;
  padding: 0;
}

.toc {
  line-height: 1.1em; /* consistent spacing */
}

/* ToC not indented until third level, but font style & margins show hierarchy */
.toc > li {
  font-weight: bold;
}

.toc > li li {
  font-weight: normal;
}

.toc > li li li {
  font-size: 95%;
}

.toc > li li li li {
  font-size: 90%;
}

.toc > li li li li li {
  font-size: 85%;
}

.toc > li {
  margin: 1.5rem 0;
}

.toc > li li {
  margin: 0.3rem 0;
}

.toc > li li li {
  margin-left: 2rem;
}

/* Section numbers in a column of their own */
.toc .secno {
  float: left;
  width: 4rem;
  white-space: nowrap;
}

.toc > li li li li .secno {
  font-size: 85%;
}

.toc > li li li li li .secno {
  font-size: 100%;
}

:not(li) > .toc {
  margin-left: 5rem;
}

.toc .secno {
  margin-left: -5rem;
}

.toc > li li li .secno {
  margin-left: -7rem;
}

.toc > li li li li .secno {
  margin-left: -9rem;
}

.toc > li li li li li .secno {
  margin-left: -11rem;
}

/* Tighten up indentation in narrow ToCs */
@media (max-width: 30em) {
  :not(li) > .toc {
    margin-left: 4rem;
  }
  .toc .secno {
    margin-left: -4rem;
  }
  .toc > li li li {
    margin-left: 1rem;
  }
  .toc > li li li .secno {
    margin-left: -5rem;
  }
  .toc > li li li li .secno {
    margin-left: -6rem;
  }
  .toc > li li li li li .secno {
    margin-left: -7rem;
  }
}
@media screen and (min-width: 78em) {
  body:not(.toc-inline) :not(li) > .toc {
    margin-left: 4rem;
  }
  body:not(.toc-inline) .toc .secno {
    margin-left: -4rem;
  }
  body:not(.toc-inline) .toc > li li li {
    margin-left: 1rem;
  }
  body:not(.toc-inline) .toc > li li li .secno {
    margin-left: -5rem;
  }
  body:not(.toc-inline) .toc > li li li li .secno {
    margin-left: -6rem;
  }
  body:not(.toc-inline) .toc > li li li li li .secno {
    margin-left: -7rem;
  }
}
body.toc-sidebar #toc :not(li) > .toc {
  margin-left: 4rem;
}

body.toc-sidebar #toc .toc .secno {
  margin-left: -4rem;
}

body.toc-sidebar #toc .toc > li li li {
  margin-left: 1rem;
}

body.toc-sidebar #toc .toc > li li li .secno {
  margin-left: -5rem;
}

body.toc-sidebar #toc .toc > li li li li .secno {
  margin-left: -6rem;
}

body.toc-sidebar #toc .toc > li li li li li .secno {
  margin-left: -7rem;
}

.toc li {
  clear: both;
}

/** Index *********************************************************************/
/* Index Lists: Layout */
ul.index {
  margin-left: 0;
  columns: 15em;
  text-indent: 1em hanging;
}

ul.index li {
  margin-left: 0;
  list-style: none;
  break-inside: avoid;
}

ul.index li li {
  margin-left: 1em;
}

ul.index dl {
  margin-top: 0;
}

ul.index dt {
  margin: 0.2em 0 0.2em 20px;
}

ul.index dd {
  margin: 0.2em 0 0.2em 40px;
}

/* Index Lists: Typography */
ul.index ul,
ul.index dl {
  font-size: smaller;
}

@media not print {
  ul.index li a + span {
    white-space: nowrap;
    color: transparent;
  }
  ul.index li a:hover + span,
  ul.index li a:focus + span {
    color: #707070;
    color: var(--indexinfo-text);
  }
}
/** Index Tables *****************************************************/
/* See also the data table styling section, which this effectively subclasses */
table.index {
  font-size: small;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  margin: 1em 0;
}

table.index td,
table.index th {
  padding: 0.4em;
}

table.index tr:hover td:not([rowspan]),
table.index tr:hover th:not([rowspan]) {
  color: black;
  color: var(--indextable-hover-text);
  background: #f7f8f9;
  background: var(--indextable-hover-bg);
}

/* The link in the first column in the property table (formerly a TD) */
table.index th:first-child a {
  font-weight: bold;
}

/** Outdated warning **********************************************************/
.outdated-spec {
  color: black;
  color: var(--outdatedspec-text);
  background-color: rgba(0, 0, 0, 0.5);
  background-color: var(--outdatedspec-bg);
}

.outdated-warning {
  position: fixed;
  bottom: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 50%;
  background: maroon;
  background: var(--outdated-bg);
  color: white;
  color: var(--outdated-text);
  border-radius: 1em;
  box-shadow: 0 0 1em red;
  box-shadow: 0 0 1em var(--outdated-shadow);
  padding: 2em;
  text-align: center;
  z-index: 2;
}

.outdated-warning a {
  color: currentcolor;
  background: transparent;
}

.edited-rec-warning {
  background: darkorange;
  background: var(--editedrec-bg);
  box-shadow: 0 0 1em;
}

.outdated-warning button {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: 0;
  padding: 0.25em 0.5em;
  background: transparent;
  color: white;
  color: var(--outdated-text);
  font: 1em sans-serif;
  text-align: center;
}

.outdated-warning span {
  display: block;
}

.outdated-collapsed {
  bottom: 0;
  border-radius: 0;
  width: 100%;
  padding: 0;
}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/
@media print {
  /* Pages have their own margins. */
  html {
    margin: 0;
  }
  /* Serif for print. */
  body {
    font-family: serif;
  }
  .outdated-warning {
    position: absolute;
    border-style: solid;
    border-color: red;
  }
  .outdated-warning input {
    display: none;
  }
}
@page {
  margin: 1.5cm 1.1cm;
}
/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/
/* This rule is inherited from past style sheets. No idea what it's for. */
.hide {
  display: none;
}

/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/
.figure .caption,
.sidefigure .caption,
figcaption {
  /* in case figure is overlarge, limit caption to 50em */
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

.overlarge {
  /* Magic to create good item positioning:
     "content column" is 50ems wide at max; less on smaller screens.
     Extra space (after ToC + content) is empty on the right.

     1. When item < content column, centers item in column.
     2. When content < item < available, left-aligns.
     3. When item > available, fills available and is scrollable.
  */
  display: grid;
  grid-template-columns: minmax(0, 50em);
}

.overlarge > table {
  /* limit preferred width of table */
  max-width: 50em;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 55em) {
  .overlarge {
    margin-right: calc(13px + 26.5rem - 50vw);
    max-width: none;
  }
}
@media screen and (min-width: 78em) {
  body:not(.toc-inline) .overlarge {
    /* 30.5em body padding 50em content area */
    margin-right: calc(40em - 50vw) !important;
  }
}
@media screen and (min-width: 90em) {
  body:not(.toc-inline) .overlarge {
    /* 4em html margin 30.5em body padding 50em content area */
    margin-right: calc(84.5em - 100vw) !important;
  }
}
@media not print {
  .overlarge {
    overflow-x: auto;
    /* See Lea Verou's explanation background-attachment:
     * http://lea.verou.me/2012/04/background-attachment-local/
     *
    background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
                top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
                top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
                top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
                white;
    background-repeat: no-repeat;
    */
  }
}
/******************************************************************************/
/*                             Dark mode toggle                               */
/******************************************************************************/
#toc-theme-toggle input {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(0px 0px 99.9% 99.9%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
}

#toc-theme-toggle img {
  background-color: transparent;
}

#toc-theme-toggle span {
  padding: 5px;
  border-radius: 30px;
}

#toc-theme-toggle input:checked + span {
  background-color: var(--logo-bg);
  color: var(--logo-text);
  padding: 3px 10px;
}

@media (prefers-reduced-motion: reduce) {
  body.toc-sidebar #toc {
    position: absolute;
    overflow: initial;
    bottom: unset;
  }
}
h1 > code,
h2 > code,
h3 > code,
h4 > code,
h5 > code,
h6 > code,
p > code,
li > code,
td > code {
  background: rgba(240, 240, 240, 0.5);
  color: #d73a49;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  border-radius: 6px;
}

pre > code {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #24292e;
  background: #f6f8fa;
}

.hljs {
  color: #24292e;
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #d73a49;
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #6f42c1;
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #005cc5;
}

.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #032f62;
}

.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #e36209;
}

.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #6a737d;
}

.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #22863a;
}

.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #24292e;
}

.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #005cc5;
  font-weight: bold;
}

.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #735c0f;
}

.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #24292e;
  font-style: italic;
}

.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #24292e;
  font-weight: bold;
}

.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #22863a;
  background-color: #f0fff4;
}

.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #b31d28;
  background-color: #ffeef0;
}

.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  /* purposely ignored */
}

.floating-tag {
  position: fixed;
  left: 0;
  bottom: 0;
}

todo {
  background: hsla(40, 100%, 50%, 0.95);
  font-style: oblique;
  text-transform: capitalize;
}

.post-item .article-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  color: var(--f_high);
  margin-bottom: 0.5rem;
}
.post-item .article-title span,
.post-item .article-title time {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.post-item .article-title .status {
  font-weight: bold;
  font-size: 0.8em;
  text-decoration: none;
}
.post-item .article-title .status {
  font-weight: bold;
}
.post-item .date-label {
  padding: 1em 0;
}
.post-item .status-Final .status,
.post-item .status-Living .status {
  display: none;
}
.post-item .status-Idea {
  color: #999;
}
.post-item .status-Draft {
  color: #d73a49;
}
.post-item .status-Review {
  color: #ef7e3a;
}
.post-item .status-LastCall {
  color: magenta;
}
.post-item .status-Deprecated {
  color: #555;
  text-decoration: line-through !important;
  font-style: italic;
}
.post-item .status-Withdrawn {
  text-decoration: line-through !important;
  color: #999;
}

.type-label {
  font-family: monospace;
  display: inline-block;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  border-radius: 2em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  text-decoration: none !important;
}