/* OwnShip Themes gallery — site stylesheet.
   Not a theme. This styles the gallery itself, on top of whichever theme
   the visitor has selected. */

/* ── Catalog swatches ──────────────────────────────────────────────────────
   Injected by _theme.js, one per download link, carrying data-theme="NAME".

   The colours are never written down. Every drop-in theme's CSS is already
   <link>ed on every page (index.php:1442), and each defines its palette on an
   unqualified [data-theme="NAME"] selector — so an element carrying that
   attribute inherits that theme's variables and paints itself. The swatch is
   the actual theme rendering, not a transcription of it, and cannot drift.

   The edge is deliberately NOT var(--border): inside data-theme, every
   variable resolves to the *swatched* theme, so a themed border would ignore
   the page's own theme. A neutral translucent grey reads correctly against
   both light and dark palettes. */

.theme-swatch {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 15px;
  margin-right: .45em;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, .45);
  background: linear-gradient(90deg,
    var(--bg)      0    25%,
    var(--bg-code) 25%  50%,
    var(--link)    50%  75%,
    var(--text)    75% 100%);
}