:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1b1f24;
  --muted: #59636e;
  --surface: #f6f8fa;
  --border: #d0d7de;
  --link: #1f4fd1;
  --focus: #1f4fd1;
  --no-border: #818b98;
  --track: #e6e9ee;
  --pass-hi: #1a7f37;
  --pass-mid: #9a6700;
  --pass-lo: #cf222e;
  --check-all: #1a7f37;
  --check-two: #9aa3ab;
  --logo-off: 0.35;
  --tag-bg: #eef2fb;
  --tag-fg: #2b4a9a;
  --mark: #fff1a8;
  --recent: #1a7f37;
  --moderate: #bf8700;
  --stale: #8c959f;
  --ciu-y: #3fa55a;
  --ciu-a: #e0b72a;
  --ciu-n: #d9534f;
  --ciu-u: #adb5bd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --fg: #e6edf3;
    --muted: #9198a1;
    --surface: #161b22;
    --border: #30363d;
    --link: #6ea8fe;
    --focus: #6ea8fe;
    --no-border: #6e7681;
    --track: #30363d;
    --pass-hi: #3fb950;
    --pass-mid: #d29922;
    --pass-lo: #f85149;
    --check-all: #3fb950;
    --check-two: #6e7781;
    --logo-off: 0.5;
    --tag-bg: #1f2a44;
    --tag-fg: #a5c3ff;
    --mark: #6b5900;
    --recent: #3fb950;
    --moderate: #d29922;
    --stale: #6e7681;
    --ciu-y: #3fb950;
    --ciu-a: #d4a72c;
    --ciu-n: #f85149;
    --ciu-u: #6e7681;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 64px; }
body {
  margin: 0;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); }

#page { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
header h1 { font-size: 1.45rem; font-weight: 650; margin: 20px 0 8px; }
.loading, .noscript, .empty, .error { padding: 40px 0; text-align: center; }
.empty p, .error p { margin: 0 0 12px; }

/* The Filter box stays at the top while the list scrolls, as on drafts.csswg.org; the other controls scroll away. */
.filter-bar { position: sticky; top: 0; z-index: 5; padding: 8px 0; background: var(--bg); }
.controls { padding: 0 0 10px; border-bottom: 1px solid var(--border); }
.filter-bar input[type="search"] {
  width: 100%; min-height: 40px; padding: 8px 12px;
  font: inherit; color: var(--fg);
  background: var(--surface); border: 1px solid var(--no-border); border-radius: 6px;
}
.filter-bar input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
.controls .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.label, .seg legend { font-size: 0.8rem; color: var(--muted); }
.chip {
  min-height: 28px; padding: 2px 10px;
  font: inherit; font-size: 0.85rem; color: var(--fg);
  background: var(--bg); border: 1px solid var(--no-border); border-radius: 999px;
  cursor: pointer;
}
.chip .n { margin-left: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { color: var(--bg); background: var(--link); border-color: var(--link); }
.chip[aria-pressed="true"] .n { color: inherit; }
.seg { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.seg legend { float: left; padding: 0; margin-right: 6px; }
.seg .opts { display: inline-flex; border: 1px solid var(--no-border); border-radius: 6px; overflow: hidden; }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.seg label {
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px;
  font-size: 0.85rem; cursor: pointer; border-left: 1px solid var(--no-border);
}
.seg label:first-of-type { border-left: 0; }
.seg input:checked + label { color: var(--bg); background: var(--link); }
.seg input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: -4px; }
.count { margin: 0 0 0 auto; font-size: 0.85rem; color: var(--muted); }

/* The table */
.specs { width: 100%; margin-top: 4px; border-collapse: collapse; }
.specs > thead > tr > th, .specs > tbody > tr.group > th {
  padding: 8px 10px; text-align: left; white-space: nowrap;
  font-size: 0.8rem; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.specs > tbody > tr > td { padding: 8px 10px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.specs > tbody > tr.group > th { padding: 6px 10px; font-size: 0.9rem; color: var(--fg); background: var(--surface); }
.n { color: var(--muted); font-weight: 400; }
.name { font-weight: 600; color: var(--link); }
.sub { font-size: 0.85rem; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.tag {
  padding: 1px 7px; border-radius: 4px; white-space: nowrap;
  font-size: 0.8rem; color: var(--tag-fg); background: var(--tag-bg);
}
mark { color: var(--fg); background: var(--mark); border-radius: 2px; }

/* The headers' sort buttons, which look like the header text, with an arrow for the sorted column's direction. */
.sort {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0;
  font: inherit; color: inherit; background: none; cursor: pointer;
}
.sort .arrow { font-size: 0.65rem; }
.sort .arrow.dim { opacity: 0.5; }
th[aria-sort] > .sort { color: var(--link); }
.sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* The cards' sort buttons, a wrapping row above the cards, at every width like the stacked table's header buttons. */
.sorts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.sorts .sort { min-height: 28px; padding: 2px 10px; border: 1px solid var(--no-border); border-radius: 999px; }
.sorts .sort[aria-current] { color: var(--link); }

.engines { display: inline-flex; align-items: center; gap: 4px; }
.engines img { display: block; width: 20px; height: 20px; }
.engines img.no { filter: grayscale(1); opacity: var(--logo-off); }
.check { width: 18px; font-size: 17px; line-height: 1; text-align: center; }
.check.all { color: var(--check-all); }
.check.two { color: var(--check-two); }
.wpt { display: inline-grid; gap: 3px; width: 90px; vertical-align: middle; }
.bar { display: block; height: 5px; overflow: hidden; border-radius: 3px; background: var(--track); }
.bar i { display: block; height: 100%; }
.bar i.hi { background: var(--pass-hi); }
.bar i.mid { background: var(--pass-mid); }
.bar i.lo { background: var(--pass-lo); }
.updated { white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.dot.recent { background: var(--recent); }
.dot.moderate { background: var(--moderate); }
.dot.stale { background: var(--stale); }
/* The footprint's dot, centered in a slot as wide as the largest, so the counts line up. */
.fp-count { display: inline-flex; align-items: center; gap: 6px; }
.fp-dot { display: inline-flex; justify-content: center; width: 14px; }
.fp-dot::before { content: ""; border-radius: 50%; background: var(--link); }
.fp-dot.large::before { width: 14px; height: 14px; }
.fp-dot.medium::before { width: 9px; height: 9px; }
.fp-dot.small::before { width: 5px; height: 5px; }
.panel-head { font-weight: 600; }
.footprint-lists { list-style: none; padding-inline-start: 0; }

/* Long unbroken words in titles (requestVideoFrameCallback(), ANGLE_instanced_arrays) wrap rather than widen the page.
   A card's title breaks a word only when that one word doesn't fit its line, since break-word, unlike anywhere, doesn't
   let the flex layout shrink the title to a few letters a line. Its tag takes at most 45% of the card, and the card's
   one column (minmax(0, 1fr)) never grows to fit a long word, which wraps within it instead. */
.name, .sub { overflow-wrap: anywhere; }
.card-head > span:first-child { min-width: 0; overflow-wrap: break-word; }
.card-head .name { overflow-wrap: break-word; }
.card-head > .tag { flex: none; max-width: 45%; white-space: normal; }
.specs > tbody > tr > td.spec { min-width: 0; }

/* The cards */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
  margin: 12px 0; padding: 0; list-style: none;
}
.cards > li { min-width: 0; }
.card {
  min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; height: 100%; padding: 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
.card-head, .line { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.line { align-items: center; }
/* A card's links and its panel buttons, lined up on their text (each button is a box at least 24px tall) and
   underlined alike. */
.links {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-top: 8px;
  font-size: 0.85rem; border-top: 1px solid var(--border);
}
.links a { text-decoration: underline; }
.group-head { margin: 20px 0 4px; font-size: 1rem; }

button.plain {
  min-height: 32px; padding: 6px 14px; cursor: pointer;
  font: inherit; color: var(--fg); background: var(--surface);
  border: 1px solid var(--no-border); border-radius: 6px;
}

footer { margin: 32px 0; padding-top: 12px; font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--border); }
footer p { margin: 0 0 6px; }

/* The buttons that open a spec's panels, and the panels: the same as Web Specs Companion's card, on this page's colors. */
.toggle {
  display: inline-flex; align-items: center; min-height: 24px; margin: -2px; padding: 2px;
  font: inherit; color: inherit; background: none; border: 0; border-radius: 4px; cursor: pointer;
}
.toggle:hover, .toggle[aria-expanded="true"] { background: var(--surface); }
.toggle.count-toggle { min-width: 24px; justify-content: center; color: var(--link); text-decoration: underline; }
button.linkish { padding: 0; margin: 0; font: inherit; color: var(--link); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.specs > tbody > tr.opened > td { border-bottom-color: transparent; }
.specs > tbody > tr.panel-row > td { padding: 0 10px 14px; }
.cards li.wide { grid-column: 1 / -1; }
/* Every kind of panel, and its loading and failed states, in the same box. */
.panel { display: flow-root; padding: 8px 10px; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 6px; }
/* A panel's close button, in the box's top-right corner, with the panel's text flowing around it. */
.panel-close {
  float: right; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: -2px -4px 0 8px; padding: 0;
  font: inherit; font-size: 1.1rem; line-height: 1; color: var(--muted);
  background: none; border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
}
.panel-close:hover { color: var(--fg); background: var(--surface); }
.panel-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.panel-note { margin: 0; }
/* A disclosure triangle and its text are a control, like the panels' buttons. */
summary { cursor: pointer; }
.panel-note p { margin: 0 0 8px; }
.panel p { margin: 0 0 6px; }
.panel ul { margin: 2px 0 6px; padding-inline-start: 18px; }
.panel code { font: 0.8rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.mdn-list ul { list-style: none; padding-inline-start: 12px; }
.mdn-list details > ul { padding-inline-start: 4px; }
.mdn-list .members { margin-inline-start: 4px; }
.mdn-filter {
  width: 100%; margin: 0 0 6px; padding: 6px 8px;
  font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--no-border); border-radius: 4px;
}
.ciu-feature { margin: 0 0 6px; }
.ciu-feature summary { padding-inline-start: 11px; text-indent: -11px; line-height: 1.9; }
.ciu-head > * { text-indent: 0; }
.ciu-head > a { margin-inline-end: 3px; }
.ciu-usage, .ciu-chip { margin-inline-end: 6px; }
.ciu-usage { color: var(--muted); font-size: 0.8rem; }
.ciu-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px 1px 3px; border-radius: 9px;
  font-size: 0.75rem; line-height: 1.45; vertical-align: middle; color: var(--fg);
}
.ciu-chip img { width: 12px; height: 12px; }
.ciu-chip.y { background: color-mix(in srgb, var(--ciu-y) 25%, var(--bg)); }
.ciu-chip.a { background: color-mix(in srgb, var(--ciu-a) 25%, var(--bg)); }
.ciu-chip.n { background: color-mix(in srgb, var(--ciu-n) 25%, var(--bg)); }
.ciu-chip.u { background: color-mix(in srgb, var(--ciu-u) 25%, var(--bg)); }
.ciu-history { margin: 6px 0 2px; }
.ciu-line { display: grid; grid-template-columns: 16px 1fr 128px; gap: 6px; align-items: center; margin-top: 5px; }
.ciu-line img { width: 14px; height: 14px; }
.ciu-bar { position: relative; height: 12px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--ciu-u) 20%, var(--bg)); }
.ciu-seg { position: absolute; top: 0; bottom: 0; left: var(--at); width: max(var(--w), 3px); }
.ciu-seg.y, .ciu-swatch.y { background-color: var(--ciu-y); }
.ciu-seg.a, .ciu-swatch.a { background-color: var(--ciu-a); }
.ciu-seg.n, .ciu-swatch.n { background-color: var(--ciu-n); }
.ciu-seg.u, .ciu-swatch.u { background-color: var(--ciu-u); }
.ciu-seg.flag, .ciu-swatch.flag { background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.55) 0 2px, transparent 2px 5px); }
.ciu-seg.prefix, .ciu-swatch.prefix { background-image: radial-gradient(rgb(255 255 255 / 0.7) 1px, transparent 1.3px); background-size: 4px 4px; }
.ciu-seg.beta, .ciu-swatch.beta { opacity: 0.5; }
.ciu-today { position: absolute; top: -2px; bottom: -2px; left: var(--at); border-left: 1.5px solid var(--fg); }
.ciu-label { font-size: 0.75rem; white-space: nowrap; }
.ciu-axis { position: relative; height: 13px; margin: 2px 134px 0 22px; font-size: 0.65rem; color: var(--muted); }
.ciu-axis span { position: absolute; left: var(--at); }
.ciu-axis span:last-child { transform: translateX(-60%); }
.ciu-notes { margin: 6px 0 0; padding-inline-start: 18px; font-size: 0.8rem; }
.ciu-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 2px; font-size: 0.7rem; color: var(--muted); }
.ciu-legend span { display: inline-flex; align-items: center; gap: 3px; }
.ciu-swatch { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.wpt-list p { margin: 6px 0 0; }
.wpt-table { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 0.8rem; }
.wpt-table caption { margin-bottom: 4px; text-align: start; }
.wpt-table th { text-align: start; font-weight: 400; overflow-wrap: anywhere; }
.wpt-table thead img { display: block; margin: auto; }
.wpt-table td { min-width: 38px; padding: 1px 2px; text-align: center; border-radius: 3px; }
.wpt-table tr.total th, .wpt-table tr.total td { font-weight: 600; }
.wpt-table td.hi { background: color-mix(in srgb, var(--ciu-y) 25%, var(--bg)); }
.wpt-table td.mid { background: color-mix(in srgb, var(--ciu-a) 25%, var(--bg)); }
.wpt-table td.lo { background: color-mix(in srgb, var(--ciu-n) 25%, var(--bg)); }
.wpt-only a { display: inline-flex; align-items: center; gap: 3px; margin-inline-end: 6px; }
.wpt-only img { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .chip, .seg label { transition: background-color 0.15s, color 0.15s; }
}

/* Below 900px, where the table's eight columns stop fitting, the headers are a wrapping row of sort buttons, and each
   table row stacks: the title and the engines, the org and group, the WPT bars and the date, and the counts and
   category. The table keeps its roles throughout, which its markup states explicitly for that reason. */
@media (max-width: 900px) {
  .specs > thead { display: block; }
  .specs > thead > tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; }
  .specs > thead > tr > th { padding: 0; border: 0; }
  .specs > thead > tr > th > .sort { min-height: 28px; padding: 2px 10px; border: 1px solid var(--no-border); border-radius: 999px; }
  .specs, .specs > tbody, .specs > tbody > tr, .specs > tbody > tr > td, .specs > tbody > tr.group > th { display: block; }
  .specs > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .specs > tbody > tr.group { padding: 0; }
  .specs > tbody > tr.group > th { width: 100%; }
  .specs > tbody > tr > td { padding: 0; border: 0; }
  .specs > tbody > tr > td.spec { flex: 1 1 60%; order: 1; }
  .specs > tbody > tr > td.eng { flex: 0 0 auto; order: 2; }
  .specs > tbody > tr > td.wpt-cell { flex: 1 1 50%; order: 3; }
  .specs > tbody > tr > td.upd { flex: 0 0 auto; order: 4; font-size: 0.85rem; }
  .specs > tbody > tr > td.mdn, .specs > tbody > tr > td.ciu, .specs > tbody > tr > td.fp, .specs > tbody > tr > td.cat { order: 5; font-size: 0.85rem; color: var(--muted); }
  .specs > tbody > tr > td.mdn::before { content: "Docs "; }
  .specs > tbody > tr > td.ciu::before { content: "Can I Use "; }
  .specs > tbody > tr > td.fp::before { content: "Footprint "; }
  .specs > tbody > tr.panel-row { display: block; padding: 0 0 12px; }
}

/* On a phone, narrower margins, one card to a line, and Can I Use's history stacked under its chips. */
@media (max-width: 640px) {
  #page { padding: 0 12px; }
  .cards { grid-template-columns: 1fr; }
  .count { margin-left: 0; }
  .ciu-line { grid-template-columns: 16px 1fr; }
  .ciu-label { grid-column: 2; }
  .ciu-axis { margin-right: 0; }
}