/*
 * The PTAG mark, switched by theme.
 *
 * Two files, not one plus a filter: see the note in shared/_ptag_logo. Both
 * are in the markup and only one is displayed, so the right mark is painted on
 * the first frame -- the anti-flash script in layouts/_head has already put
 * `data-theme` on <html> by the time this rule is evaluated.
 *
 * The caller supplies the sizing class (`.ptag-header__logo`, `.auth__logo`,
 * `.home__logo`); this block only decides which of the two is visible.
 *
 * Every selector doubles up on `.ptag-logo` so it outranks those sizing
 * classes, each of which sets `display: block`. Relying on stylesheet order
 * instead would work today -- the bundle is linked alphabetically and this
 * file happens to sort last -- and break the day someone renames a file.
 */

.ptag-logo.ptag-logo--light {
  display: none;
}

[data-theme="dark"] .ptag-logo.ptag-logo--colour {
  display: none;
}

[data-theme="dark"] .ptag-logo.ptag-logo--light {
  display: block;
}

/* No-JavaScript fallback, matching the token fallback in application.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ptag-logo.ptag-logo--colour {
    display: none;
  }

  :root:not([data-theme]) .ptag-logo.ptag-logo--light {
    display: block;
  }
}

/* Printing forces the light theme (see ptag_app.css), so the mark must follow
   it back -- a near-white logo on white paper is a blank space. */
@media print {
  .ptag-logo.ptag-logo--colour {
    display: block !important;
  }

  .ptag-logo.ptag-logo--light {
    display: none !important;
  }
}