/* ==UserStyle==
@name         MDN Redesign Tweaks (light + dark mode)
@version      20220302.17.45
@namespace    userstyles.world/user/rbndelrio
@description  * Improves the scannability and visual hierarchy for MDN's 2022 redesign.
* Revamped Browser Compatibility table! Revives color coding with caniuse-inspired theming.

I personally like MDN's new look and I adore the addition of a dark mode. However, there's no denying that the new theme makes parsing long articles a bit more difficult. This theme has the following features:

* Slightly Wider Content
* Sticky breadcrumb patch
* Monospaced Page Titles
* Page Section Separators
* Emphasized Property Table
* Refine type color hierarchy for dark mode
* Caniuse-inspired Backwards Compatibility Table theme
* More Noticeable Alerts/Notecards
* Subtle hover/interactive tweaks
* Some esoteric style bug fixes

Everything was made with low-specificity selectors ((`:where()`)[https://developer.mozilla.org/en-US/docs/Web/CSS/:where] is the best) and maintains the preexisting CSS patterns.
@author       rbndelrio
@license      MPL 2.0
==/UserStyle== */

@-moz-document domain("developer.mozilla.org") {
/**
 * MDN Tweaks
 *
 * Improves scannability and visual hierarchy for light and dark modes.
 * Revamped Browser Compatibility table! Revives color coding with caniuse-inspired theming.
 * Uses low-specificity selectors and maintains vendor CSS patterns
 *
 *
 * Feature Sections:
 *
 *  1. Slightly Wider Content
 *  2. Sticky breadcrumb patch
 *  3. Monospaced Page Titles
 *  4. Page Section Separators
 *  5. Emphasized Property Table
 *  6. Refine type color hierarchy for dark mode
 *  7. Caniuse-inspired Backwards Compatibility Table theme
 *  8. More Noticable Alerts/Notecards
 *  9. Subtle hover states
 * 10. Esoteric fixes
 */

/** 1. Wider Content Column */
@media screen and (min-width: 769px) {
  .article-wrapper {
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 2fr);
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --max-width: 1536px;
  }

  .article-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.8fr) minmax(0, 14rem);
  }
}

@media screen and (min-width: 1900px) {
  :root {
    --max-width: 1600px;
  }

  .article-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.8fr) minmax(0, 16rem);
  }
}

/** 2. Mmmmmm I like sticky breadcrumbs on my desktop */
@media screen and (min-width: 769px) {
  /*
     Feature was seemingly disabled due to a z-index conflict w/ the top nav.
     High probability that .top-nav shouldn't have a relative position in the first place.
     Let's work around that by just bumping the top nav's index to 101
 */
  .top-navigation {
    z-index: calc(var(--z-index-low) + 1);
  }
  .article-actions-container {
    position: sticky;
  }
}

.breadcrumbs-container li a.breadcrumb-current-page {
  color: var(--code-color);
}

/** 3. Monospace Titles */
.main-page-content h1:first-of-type {
  font-family: var(--font-code);
}

/** 4. Section Separators */
:where(.main-page-content) h2 {
  margin: 3.8rem 0 1rem;
  padding-top: 1.8rem;
  box-shadow: 0px -2px 0px var(--blend-color), 0px -2px 0px var(--blend-color),
    0px -2px 0px 0px var(--code-color);
}

/** 5. Deemphasize Body Copy */
/* Emphasis Level 0: Paragraph Content */
:where(.dark .main-page-content) p {
  --text-primary: #a9b1bc;
  color: var(--text-primary);
}

/* Emphasis Level 1: Default */
:where(.dark) .main-page-content {
  --text-primary: #bcc2ca;
  color: var(--text-primary);
}

/* Emphasis Level 2: Rich Content */
:where(.dark .main-page-content) strong,
:where(.dark .main-page-content table) th,
:where(.dark .main-page-content pre) code,
:where(.dark .main-page-content) ul ::marker,
:where(.dark .main-page-content) ol ::marker {
  color: var(--text-secondary);
}

/* Emphasis Level 3: Headings */
:where(.dark .main-page-content) h1,
:where(.dark .main-page-content) h2,
:where(.dark .main-page-content) h3,
:where(.dark .main-page-content) h4,
:where(.dark .main-page-content) h5 {
  --text-primary: #fbfbfe;
  color: var(--text-primary);
}

/* Avoid getting intermittently blinded when scrolling through docs with images */
:where(.dark .main-page-content:not(:hover):not(:focus-within)) img {
  opacity: 0.75;
}

/** 6. Property Table */
table.properties {
  background: var(--category-color-background);
  border-color: var(--text-link);
  border-left: 2px solid var(--text-link);
  border-right: 2px solid var(--text-link);
}

table.properties td,
table.properties th {
  padding: 0.5rem 1rem;
}

:where(.dark) table.properties tr {
  border-color: #ffffff15;
}

:where(.dark) table.properties tr:first-child {
  border-top-color: #ffffff2c;
}

:where(.dark) table.properties tr:last-child {
  border-bottom-color: #ffffff2c;
}

/** 7. Backwards Compatibility table theming */

/* Caniuse-ish colors, not particularly pleasant but it's familiar */
.bc-table {
  --border-primary: #e0c89b; /* #eb890033; */
  --border-secondary: #e5d8bc; /* #eb890033; */
  background: #f2e8d5; /*var(--js-accent-background-color);*/
}
.bc-table .bc-history {
  background: #fff;
}
.bc-table td.bc-has-history:hover {
  background-color: var(--browser-color, #83350255);
}
.bc-table-row-header code {
  border: 1px solid var(--border-primary);
}
a.bc-table-row-header code {
  color: inherit;
}

/* Dark Mode looking pretty elegant imo */
:where(.dark) .bc-table {
  color: #f2e8d5;
  background-color: #00000055;
  --border-primary: #382e22;
  --border-secondary: #382e22;
}
:where(.dark) .bc-table th {
  color: #f2e8d5;
  background-color: #252017af;
}
:where(.dark) .bc-table td {
  background-color: #25201758;
}
:where(.dark) td.bc-has-history:hover {
  color: #ffffffba;
  background-color: var(--browser-color, #252017ff);
}
:where(.dark) .bc-table .bc-history {
  background: #000;
}
.bc-notes-list {
  z-index: 0;
}

/* Bring back color coding! */
.bc-table td.bc-supports-yes {
  /* The only way to lower the opacity of HEX valued CSS Variables is overlaying a color as a gradient */
  background: linear-gradient(var(--blend-color), var(--blend-color)),
    var(--background-mark-green);
}
.bc-table td.bc-supports-no {
  background: linear-gradient(var(--blend-color), var(--blend-color)),
    var(--background-mark-yellow);
}
.bc-table td.bc-supports-unknown {
  background: linear-gradient(var(--blend-color), var(--blend-color)),
    var(--accent-tertiary);
}

/* Vendor Brand Accents */
:root,
[class*="bc-browser-"] {
  --bc-opacity: 1;
  --browser-default: var(--border-primary);

  /* Adapted from caniuse */
  --browser-ie: rgba(56, 88, 132, var(--bc-opacity)); /* #385884 */
  --browser-firefox: rgba(163, 98, 35, var(--bc-opacity)); /* #a36223 */
  --browser-chrome: rgba(63, 119, 187, var(--bc-opacity)); /* #3f77bb */
  --browser-safari: rgba(102, 102, 102, var(--bc-opacity)); /* #666 */
  --browser-opera: rgba(129, 35, 35, var(--bc-opacity)); /* #812323 */
  --browser-opera: rgba(153, 38, 38, var(--bc-opacity)); /* #992626 */
  --browser-safari_ios: rgba(51, 51, 51, var(--bc-opacity)); /* #333 */
  --browser-webview_android: rgba(
    123,
    161,
    59,
    var(--bc-opacity)
  ); /* #7ba13b */
  --browser-webview_blackberry: rgba(17, 17, 17, var(--bc-opacity)); /* #111 */
  --browser-samsunginternet_android: rgba(
    151,
    83,
    255,
    var(--bc-opacity)
  ); /* #9753ff */
  --browser-qq: rgba(20, 141, 250, var(--bc-opacity)); /* #148dfa */
  --browser-deno: rgba(17, 24, 39, var(--bc-opacity));
  --browser-nodejs: rgba(2, 110, 0, var(--bc-opacity)); /* #026e00 */
}

.dark,
[class*="bc-browser-"] {
  --browser-deno: rgba(55, 65, 81, var(--bc-opacity));
}
.bc-table [class*="bc-browser-"] {
  --bc-opacity: 1;
  --browser-color: var(--browser-default);
}
.bc-table td[class*="bc-browser-"] {
  --bc-opacity: 0.9;
}
:where(.dark) .bc-table td[class*="bc-browser-"] {
  --bc-opacity: 0.5;
}
.bc-table .bc-browser-edge,
.bc-table .bc-browser-ie {
  --browser-color: var(--browser-ie);
}
.bc-table .bc-browser-firefox_android,
.bc-table .bc-browser-firefox {
  --browser-color: var(--browser-firefox);
}
.bc-table .bc-browser-chrome_android,
.bc-table .bc-browser-chrome {
  --browser-color: var(--browser-chrome);
}
.bc-table .bc-browser-safari {
  --browser-color: var(--browser-safari);
}
.bc-table .bc-browser-opera {
  --browser-color: var(--browser-opera);
}
.bc-table .bc-browser-opera_android,
.bc-table .bc-browser-opera {
  --browser-color: var(--browser-opera);
}
.bc-table .bc-browser-safari_ios {
  --browser-color: var(--browser-safari_ios);
}
.bc-table .bc-browser-webview_android {
  --browser-color: var(--browser-webview_android);
}
.bc-table .bc-browser-webview_blackberry {
  --browser-color: var(--browser-webview_blackberry);
}
.bc-table .bc-browser-samsunginternet_android {
  --browser-color: var(--browser-samsunginternet_android);
}
.bc-table .bc-browser-qq {
  --browser-color: var(--browser-qq);
}
.bc-table .bc-browser-kaios {
  --browser-color: var(--browser-kaios);
}
.bc-table .bc-browser-deno {
  --browser-color: var(--browser-deno);
}
.bc-table .bc-browser-nodejs {
  --browser-color: var(--browser-nodejs);
}

.bc-table th[class*="bc-browser-"] {
  border-bottom: 3px solid var(--browser-color);
}

/** 8. Notecards */
.notecard {
  border-top: 1px solid var(--background-tertiary);
  border-right: 1px solid var(--background-tertiary);
  border-bottom: 1px solid var(--background-tertiary);
  box-shadow: none;
}
/* ::before is taken so let's do a good ol ::after + z-index combo */
.notecard:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: va...