/*
  https://lampas.allmymind.org/blog-dark.css: the blog's dark mode (mw-fnvjof.17.89).

  allmymind.org is Ghost with the Source theme. The blog loads this file with one link tag in Code injection (Site header),
  beside reftagger.js, so a later fix reaches the blog without a second paste:

    <link rel="stylesheet" href="https://lampas.allmymind.org/blog-dark.css">

  EVERY rule is inside the one @media (prefers-color-scheme: dark) block: with the phone or computer set to light the file changes
  nothing (tests/e2e/blog-dark.spec.ts holds both). Source colours its page through custom properties on :root (--background-color,
  --color-darker-gray for text and links, --color-secondary-text, --color-lighter-gray for code, --color-border) and the Ghost accent
  (--ghost-accent-color, the link colour in a post and the quote's rule); the card styles (cards.min.css) fix a few colours of their
  own, which are set again below, and the iframes of Ghost's widgets (comments, Portal, search) are given back a transparent canvas (see the iframe rules at the end). `:root:root` lifts each custom property over the theme's own `:root` rule whichever sheet loads
  last. Every text and background pair below is at least 4.5:1 (WCAG AA); the spec measures it on a Source post, page, list, tag,
  author and 404 page.
*/
@media (prefers-color-scheme: dark) {
  :root:root {
    color-scheme: dark;
    --background-color: #15171a;
    --ghost-accent-color: #9fb0ff;
    --color-white: #15171a;
    --color-lighter-gray: rgba(255, 255, 255, 0.08);
    --color-light-gray: #2b2f35;
    --color-mid-gray: #4a4f57;
    --color-dark-gray: #c9ccd1;
    --color-darker-gray: #f1f3f5;
    --color-primary-text: #e8eaed;
    --color-secondary-text: rgba(255, 255, 255, 0.7);
    --color-border: rgba(255, 255, 255, 0.14);
    --color-dark-border: rgba(255, 255, 255, 0.55);
  }

  /* The page, header and footer. No rule here gives html or body a background-color of its own (mw-fnvjof.17.102): the theme's body rule takes its colour from
     --background-color, which is dark above, and with no background on html the browser lends body's to the whole canvas, painted BEHIND everything. A background set
     on both html and body made body paint its own over the home banner's picture, which the theme puts at z-index -1 (.gh-header.is-classic.has-image .gh-header-image),
     and the banner went flat dark. */
  html:root,
  html:root body {
    color: #e8eaed;
  }
  html:root .gh-navigation,
  html:root .gh-navigation-actions {
    background-color: #15171a;
    color: #f1f3f5;
  }
  html:root .gh-footer {
    color: #f1f3f5;
  }

  /* The accent button (Subscribe): the accent is light here, so its words are dark */
  html:root .gh-button,
  html:root .kg-button-card a.kg-btn-accent,
  html:root .kg-product-card a.kg-product-card-btn-accent {
    background-color: #9fb0ff;
    color: #15171a;
  }

  /* Links: the Source theme's own link colours come from the accent and the text variables above; a post's links keep their underline */
  html:root .gh-content a,
  html:root .gh-article-tag,
  html:root figcaption a {
    color: #9fb0ff;
  }

  /* The paywall CTA (.gh-post-upgrade-cta, mw-fnvjof.17.100) is drawn by Ghost inside the post's content: its box is the site's #1329d4 by inline style and its words white, which
     is 9:1 and needs no change. But the rule above reaches its "Sign in" link (a link in .gh-content) and set it light blue on that blue, 4.4:1, so the link is white again, as
     Ghost's own sheet has it. The button (a.gh-btn) keeps its inline blue words on its white. */
  html:root .gh-content .gh-post-upgrade-cta a:not(.gh-btn) {
    color: #ffffff;
  }

  /* Quotes and code */
  html:root blockquote:not([class]) {
    border-left-color: #9fb0ff;
    color: #e8eaed;
  }
  html:root blockquote.kg-blockquote-alt {
    color: rgba(255, 255, 255, 0.7);
  }
  html:root .gh-content pre,
  html:root .gh-content :not(pre) > code {
    background: #23262b;
    color: #e8eaed;
  }

  /* The email fields (the picture banner on the home page and the footer's): ONE selector set. The banner's own rules (.gh-header.is-classic.has-image .gh-form,
     four classes) paint it white with dark words over the picture, and outrank a bare .gh-form, so each rule names both; the field is opaque, as the banner's is
     over a picture. The arrow button is the .gh-button above. */
  html:root :is(.gh-form, .gh-header.is-classic.has-image .gh-form) {
    background-color: #25282c;
  }
  html:root :is(.gh-form, .gh-header.is-classic.has-image .gh-form):hover {
    background-color: #2b2e32;
  }
  html:root :is(.gh-form-input, .gh-header.is-classic.has-image .gh-form-input) {
    color: #f1f3f5;
  }
  html:root :is(.gh-form-input, .gh-header.is-classic.has-image .gh-form-input)::placeholder,
  html:root :is(.gh-form > svg, .gh-header.is-classic.has-image .gh-form > svg),
  html:root :is(button.gh-form-input, .gh-header.is-classic.has-image button.gh-form-input) {
    color: rgba(255, 255, 255, 0.6);
  }

  html:root :is(.gh-form-input, .gh-header.is-classic.has-image .gh-form-input)::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
  }

  /* Ghost's widgets are iframes (the comments box and its sign-up prompt, the Portal Subscribe pill, the search popup). Page CSS reaches the iframe element and nothing
     inside it, and the documents inside are light: with the page at color-scheme: dark (above) the browser paints an opaque WHITE canvas behind a light document, which
     put a white box behind the sign-up prompt (its light words invisible on it) and a white rectangle behind the pill. So each iframe takes the document's own scheme
     back and is transparent again. */
  html:root iframe {
    color-scheme: light;
  }
  /* The comments widget picks its own dark from the colour of the text around it (comments-ui, data-color-scheme="auto"); its dark theme leaves the Sign in link
     in the blog's accent (a dark blue, 2:1 on this page) inline where no stylesheet reaches. So its text is set dark here, which has it draw its light theme (dark words,
     the accent button with white words), and the iframe is then turned into a dark one with one filter: light becomes dark, the accent a light blue, the button's white
     words dark. Ghost's own 40% "Already a member?" would be 3.76:1 under a plain invert (the tint is mixed with the page's dark AFTER the filter), so the iframe takes an opaque
     backdrop of its own (#d1d1d1) inside the filter, which comes out as the page's #15171a, and the filter ends with contrast(1.3): the tint is mixed first and lifted by the
     contrast, 4.7:1, with the blue still a blue (tests/e2e/blog-dark.spec.ts holds the pixels).
     NOT reachable from page CSS (mw-fnvjof.17.101): inside the Portal pop-ups (Subscribe, Sign in, account: a full-page white document, an inverted whole would flip the
     site's logo) and the search popup's own white card (a filter over its iframe turns its dim scrim into a light veil); any photo in the comments iframe is inverted with
     the rest of it, because no rule can pick one out. The paywall CTA (.gh-post-upgrade-cta) keeps Ghost's inline blue and white (9:1); only its Sign in link, which the links rule would have lightened, takes a rule. */
  html:root .gh-comments {
    color: #15171a;
  }
  html:root .gh-comments iframe {
    background-color: #d1d1d1;
    filter: invert(1) hue-rotate(180deg) contrast(1.3);
  }

  /* The Portal Subscribe pill: Ghost's accent #1329d4 is 2:1 on this page, so the pill takes the same treatment as the accent button above: the iframe (the pill alone) is
     inverted and turned back to a light blue, its white words become dark. */
  html:root iframe.gh-portal-triggerbtn-iframe,
  html:root iframe[title="portal-trigger"] {
    filter: invert(1) hue-rotate(180deg);
  }

  /* Cards the theme's card sheet paints white or near white */
  html:root .kg-audio-card,
  html:root .kg-file-card a.kg-file-card-container,
  html:root .kg-nft-card a.kg-nft-card-container,
  html:root .kg-product-card-container,
  html:root .kg-header-card.kg-style-light,
  html:root .kg-signup-card-fields,
  html:root .kg-signup-card-input {
    background: #1f2227;
    color: #e8eaed;
  }
  html:root .kg-bookmark-card a.kg-bookmark-container,
  html:root .kg-bookmark-card a.kg-bookmark-container:hover {
    background: #1f2227 !important;
    color: #e8eaed !important;
  }
  html:root .kg-nft-header h4.kg-nft-title,
  html:root .kg-nft-creator span,
  html:root .kg-nft-card p.kg-nft-description,
  html:root .kg-nft-creator {
    color: #e8eaed;
  }
  html:root .kg-audio-time {
    color: #c4c7cc;
  }
  html:root .kg-header-card.kg-style-light h2.kg-header-card-header,
  html:root .kg-header-card.kg-style-light h3.kg-header-card-subheader {
    color: #e8eaed;
  }
  html:root .kg-header-card.kg-style-light a.kg-header-card-button {
    background: #9fb0ff;
    color: #15171a;
  }
}