/*
 * Sattribute badges (badges.js): a pill per sat type, 24px tall, with a 14px
 * icon; icon-only, two or more are one capsule (.sat-badges--group). Glyph icons are the SVGs in /icons/sat/ used as CSS masks, so one
 * file serves both themes and the icon takes the pill's --sb-icon colour;
 * text icons (M, L, E, R, 2D, 3D, 450x, B78, B286, B666, Req) are HTML text.
 * One class per key sets its colours: --sb-fg (label and text icons),
 * --sb-icon, --sb-border and --sb-bg, readable on the light surface and, in
 * dark mode, the palette the icon set was drawn for. Generated, then kept by
 * hand; the CSP allows no inline style, hence a class per key.
 */

.sat-badges {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    vertical-align: middle;
    max-width: 100%;
}

.sat-badges--labels {
    flex-wrap: wrap;
    gap: 4px;
}

.sat-badge {
    --sb-fg: #3d3c39;
    --sb-icon: #3d3c39;
    --sb-border: rgba(11, 11, 11, 0.22);
    --sb-bg: rgba(11, 11, 11, 0.04);
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    height: var(--sb-size, 24px);
    padding: 0 var(--sb-pad, 8px);
    border: 1px solid var(--sb-border);
    border-radius: 9999px;
    background: var(--sb-bg);
    background-clip: padding-box;
    color: var(--sb-fg);
    font: 500 11px/1 var(--font, system-ui, sans-serif);
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: default;
}

/* Icon only: one badge is a round pill. */
.sat-badges--icons .sat-badge {
    padding: 0 var(--sb-pad, 6px);
}

/*
 * Two or more (badges.js adds sat-badges--group): one capsule, never
 * overlapping circles. The capsule has the stack's border and ground, quiet
 * in either theme; inside, each icon sits on a dot of its type's own pill
 * look: its tint (--sb-bg), ring (--sb-border) and glyph colour (--sb-icon),
 * so a type is the same colour grouped or alone and the set still reads as
 * one object. A dot is round at any --sb-size and
 * --sb-glyph (the Sales tables' and the feeds' smaller badges set them); a
 * text icon (450x, B286) is a short pill of a dot, and a type with no icon
 * a pill segment with its label.
 */
.sat-badges--group {
    --sb-dot: calc(var(--sb-size, 24px) - 4px);
    gap: 2px;
    box-sizing: border-box;
    height: var(--sb-size, 24px);
    padding: 0 1px;
    border: 1px solid color-mix(in srgb, var(--ink, #0b0b0b) 18%, transparent);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--ink, #0b0b0b) 3%, transparent);
}

.sat-badges--group > .sat-badge {
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--sb-dot);
    height: var(--sb-dot);
    padding: 0 calc((var(--sb-dot) - var(--sb-glyph, 14px)) / 2);
    border: 0;
    /* The lone badge's own look: its --sb-bg tint and --sb-border ring (inset,
       so the dot keeps its size), and its --sb-icon glyph and text below. */
    background: var(--sb-bg);
    box-shadow: inset 0 0 0 1px var(--sb-border);
}

.sat-badges--group > .sat-badge--text-icon {
    padding: 0 4px;
}

.sat-badges--group > .sat-badge:not(.sat-badge--has-icon) {
    padding: 0 6px;
}


/* A linked dot (render's `link`): a firmer tint on hover, the page's focus
   ring close around it on keys. */
.sat-badges--group > a.sat-badge--link:hover {
    background: color-mix(in srgb, var(--sb-fg) 22%, transparent);
}

.sat-badges--group > a.sat-badge--link:focus-visible {
    outline: 2px solid var(--focus, #2a78d6);
    outline-offset: 1px;
}

/* An icon-only pill keeps its label for screen readers. */
.sat-badges--icons .sat-badge--has-icon .sat-badge__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sat-badge__icon {
    display: inline-block;
    flex: none;
    width: var(--sb-glyph, 14px);
    height: var(--sb-glyph, 14px);
    background-color: var(--sb-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Two butterflies side by side. */
.sat-badge--palindromes_perfect_palinception .sat-badge__icon {
    width: calc(var(--sb-glyph, 14px) * 12 / 7);
}

.sat-badge__text {
    color: var(--sb-icon);
    font: 600 11px/1 var(--mono, ui-monospace, monospace);
    letter-spacing: -0.025em;
}

@media (min-width: 1024px) {
    .sat-badges--labels .sat-badge {
        gap: 6px;
        padding: 0 var(--sb-pad, 10px);
    }
}

/* Forced colours: the pill's border carries it, a capsule's its own. */
@media (forced-colors: active) {
    .sat-badge,
    .sat-badges--group {
        border-color: CanvasText;
    }

    .sat-badge__icon {
        background-color: CanvasText;
    }

    /* Each type inside a capsule outlined, so they stay apart; the border
       comes off the padding, so a dot stays round. */
    .sat-badges--group > .sat-badge {
        border: 1px solid CanvasText;
        padding: 0 calc((var(--sb-dot) - var(--sb-glyph, 14px)) / 2 - 1px);
    }

    .sat-badges--group > .sat-badge--text-icon {
        padding: 0 3px;
    }

    .sat-badges--group > .sat-badge:not(.sat-badge--has-icon) {
        padding: 0 5px;
    }
}

.sat-badge--uncommon .sat-badge__icon { -webkit-mask-image: url("/icons/sat/uncommon.svg"); mask-image: url("/icons/sat/uncommon.svg"); }
.sat-badge--black_epic .sat-badge__icon { -webkit-mask-image: url("/icons/sat/black_epic.svg"); mask-image: url("/icons/sat/black_epic.svg"); }
.sat-badge--black_rare .sat-badge__icon { -webkit-mask-image: url("/icons/sat/black_rare.svg"); mask-image: url("/icons/sat/black_rare.svg"); }
.sat-badge--black .sat-badge__icon { -webkit-mask-image: url("/icons/sat/black.svg"); mask-image: url("/icons/sat/black.svg"); }
.sat-badge--megasat_alpha .sat-badge__icon { -webkit-mask-image: url("/icons/sat/megasat_alpha.svg"); mask-image: url("/icons/sat/megasat_alpha.svg"); }
.sat-badge--centasat_alpha .sat-badge__icon { -webkit-mask-image: url("/icons/sat/centasat_alpha.svg"); mask-image: url("/icons/sat/centasat_alpha.svg"); }
.sat-badge--decasat_alpha .sat-badge__icon { -webkit-mask-image: url("/icons/sat/decasat_alpha.svg"); mask-image: url("/icons/sat/decasat_alpha.svg"); }
.sat-badge--kilosat_alpha .sat-badge__icon { -webkit-mask-image: url("/icons/sat/kilosat_alpha.svg"); mask-image: url("/icons/sat/kilosat_alpha.svg"); }
.sat-badge--alpha .sat-badge__icon { -webkit-mask-image: url("/icons/sat/alpha.svg"); mask-image: url("/icons/sat/alpha.svg"); }
.sat-badge--megasat_omega .sat-badge__icon { -webkit-mask-image: url("/icons/sat/megasat_omega.svg"); mask-image: url("/icons/sat/megasat_omega.svg"); }
.sat-badge--centasat_omega .sat-badge__icon { -webkit-mask-image: url("/icons/sat/centasat_omega.svg"); mask-image: url("/icons/sat/centasat_omega.svg"); }
.sat-badge--decasat_omega .sat-badge__icon { -webkit-mask-image: url("/icons/sat/decasat_omega.svg"); mask-image: url("/icons/sat/decasat_omega.svg"); }
.sat-badge--kilosat_omega .sat-badge__icon { -webkit-mask-image: url("/icons/sat/kilosat_omega.svg"); mask-image: url("/icons/sat/kilosat_omega.svg"); }
.sat-badge--omega .sat-badge__icon { -webkit-mask-image: url("/icons/sat/omega.svg"); mask-image: url("/icons/sat/omega.svg"); }
.sat-badge--palindromes_perfect_palinception .sat-badge__icon { -webkit-mask-image: url("/icons/sat/palindromes_perfect_palinception.svg"); mask-image: url("/icons/sat/palindromes_perfect_palinception.svg"); }
.sat-badge--palindromes_integer_1d .sat-badge__icon { -webkit-mask-image: url("/icons/sat/palindromes_integer_1d.svg"); mask-image: url("/icons/sat/palindromes_integer_1d.svg"); }
.sat-badge--palindromes_integer .sat-badge__icon { -webkit-mask-image: url("/icons/sat/palindromes_integer.svg"); mask-image: url("/icons/sat/palindromes_integer.svg"); }
.sat-badge--bounty3_name .sat-badge__icon { -webkit-mask-image: url("/icons/sat/bounty3_name.svg"); mask-image: url("/icons/sat/bounty3_name.svg"); }
.sat-badge--block9 .sat-badge__icon { -webkit-mask-image: url("/icons/sat/block9.svg"); mask-image: url("/icons/sat/block9.svg"); }
.sat-badge--nakamoto .sat-badge__icon { -webkit-mask-image: url("/icons/sat/nakamoto.svg"); mask-image: url("/icons/sat/nakamoto.svg"); }
.sat-badge--sr_1st_auction .sat-badge__icon { -webkit-mask-image: url("/icons/sat/sr_1st_auction.svg"); mask-image: url("/icons/sat/sr_1st_auction.svg"); }
.sat-badge--pizza .sat-badge__icon { -webkit-mask-image: url("/icons/sat/pizza.svg"); mask-image: url("/icons/sat/pizza.svg"); }
.sat-badge--jpeg .sat-badge__icon { -webkit-mask-image: url("/icons/sat/jpeg.svg"); mask-image: url("/icons/sat/jpeg.svg"); }
.sat-badge--hitman .sat-badge__icon { -webkit-mask-image: url("/icons/sat/hitman.svg"); mask-image: url("/icons/sat/hitman.svg"); }
.sat-badge--vintage .sat-badge__icon { -webkit-mask-image: url("/icons/sat/vintage.svg"); mask-image: url("/icons/sat/vintage.svg"); }

/* Light (the default): each key's colours on the light surface. */
.sat-badge--mythic { --sb-fg: #946700; --sb-icon: #b88000; --sb-border: rgba(184, 128, 0, 0.4); --sb-bg: rgba(184, 128, 0, 0.08); }
.sat-badge--legendary { --sb-fg: #946700; --sb-icon: #b88000; --sb-border: rgba(184, 128, 0, 0.4); --sb-bg: rgba(184, 128, 0, 0.08); }
.sat-badge--epic { --sb-fg: #6b4cff; --sb-icon: #8d75ff; --sb-border: rgba(141, 117, 255, 0.4); --sb-bg: rgba(141, 117, 255, 0.08); }
.sat-badge--rare { --sb-fg: #0274af; --sb-icon: #0392dd; --sb-border: rgba(3, 146, 221, 0.4); --sb-bg: rgba(3, 146, 221, 0.08); }
.sat-badge--uncommon { --sb-fg: #d31282; --sb-icon: #ed2b9c; --sb-border: rgba(237, 43, 156, 0.4); --sb-bg: rgba(237, 43, 156, 0.08); }
.sat-badge--black_epic { --sb-fg: #666666; --sb-icon: #666666; --sb-border: rgba(102, 102, 102, 0.4); --sb-bg: rgba(102, 102, 102, 0.08); }
.sat-badge--black_rare { --sb-fg: #666666; --sb-icon: #666666; --sb-border: rgba(102, 102, 102, 0.4); --sb-bg: rgba(102, 102, 102, 0.08); }
.sat-badge--black { --sb-fg: #666666; --sb-icon: #666666; --sb-border: rgba(102, 102, 102, 0.4); --sb-bg: rgba(102, 102, 102, 0.08); }
.sat-badge--megasat_alpha { --sb-fg: #b85000; --sb-icon: #e56400; --sb-border: rgba(229, 100, 0, 0.4); --sb-bg: rgba(229, 100, 0, 0.08); }
.sat-badge--centasat_alpha { --sb-fg: #b85000; --sb-icon: #e56400; --sb-border: rgba(229, 100, 0, 0.4); --sb-bg: rgba(229, 100, 0, 0.08); }
.sat-badge--decasat_alpha { --sb-fg: #b85000; --sb-icon: #e56400; --sb-border: rgba(229, 100, 0, 0.4); --sb-bg: rgba(229, 100, 0, 0.08); }
.sat-badge--kilosat_alpha { --sb-fg: #b85000; --sb-icon: #e56400; --sb-border: rgba(229, 100, 0, 0.4); --sb-bg: rgba(229, 100, 0, 0.08); }
.sat-badge--alpha { --sb-fg: #b85000; --sb-icon: #e56400; --sb-border: rgba(229, 100, 0, 0.4); --sb-bg: rgba(229, 100, 0, 0.08); }
.sat-badge--megasat_omega { --sb-fg: #0f789b; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.4); --sb-bg: rgba(17, 138, 178, 0.08); }
.sat-badge--centasat_omega { --sb-fg: #0f789b; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.4); --sb-bg: rgba(17, 138, 178, 0.08); }
.sat-badge--decasat_omega { --sb-fg: #0f789b; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.4); --sb-bg: rgba(17, 138, 178, 0.08); }
.sat-badge--kilosat_omega { --sb-fg: #0f789b; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.4); --sb-bg: rgba(17, 138, 178, 0.08); }
.sat-badge--omega { --sb-fg: #0f789b; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.4); --sb-bg: rgba(17, 138, 178, 0.08); }
.sat-badge--palindromes_perfect_palinception { --sb-fg: #976401; --sb-icon: #c07f02; --sb-border: rgba(192, 127, 2, 0.4); --sb-bg: rgba(192, 127, 2, 0.08); }
.sat-badge--palindromes_integer_1d { --sb-fg: #3b7792; --sb-icon: #4995b6; --sb-border: rgba(73, 149, 182, 0.4); --sb-bg: rgba(73, 149, 182, 0.08); }
.sat-badge--palindromes_integer_2d { --sb-fg: #3b7792; --sb-icon: #4995b6; --sb-border: rgba(73, 149, 182, 0.4); --sb-bg: rgba(73, 149, 182, 0.08); }
.sat-badge--palindromes_integer_3d { --sb-fg: #3b7792; --sb-icon: #4995b6; --sb-border: rgba(73, 149, 182, 0.4); --sb-bg: rgba(73, 149, 182, 0.08); }
.sat-badge--palindromes_integer { --sb-fg: #3b7792; --sb-icon: #4995b6; --sb-border: rgba(73, 149, 182, 0.4); --sb-bg: rgba(73, 149, 182, 0.08); }
.sat-badge--bounty3_name { --sb-fg: #0f7f4c; --sb-icon: #139f5e; --sb-border: rgba(19, 159, 94, 0.4); --sb-bg: rgba(19, 159, 94, 0.08); }
.sat-badge--450x { --sb-fg: #1d1d20; --sb-icon: #1d1d20; --sb-border: rgba(29, 29, 32, 0.4); --sb-bg: rgba(29, 29, 32, 0.08); }
.sat-badge--block9 { --sb-fg: #1f1f1f; --sb-icon: #1f1f1f; --sb-border: rgba(31, 31, 31, 0.4); --sb-bg: rgba(31, 31, 31, 0.08); }
.sat-badge--block78 { --sb-fg: #da1434; --sb-icon: #ef506a; --sb-border: rgba(239, 80, 106, 0.4); --sb-bg: rgba(239, 80, 106, 0.08); }
.sat-badge--block286 { --sb-fg: #016ae4; --sb-icon: #0174f8; --sb-border: rgba(1, 116, 248, 0.4); --sb-bg: rgba(1, 116, 248, 0.08); }
.sat-badge--block_666 { --sb-fg: #d62929; --sb-icon: #e05c5c; --sb-border: rgba(224, 92, 92, 0.4); --sb-bg: rgba(224, 92, 92, 0.08); }
.sat-badge--nakamoto { --sb-fg: #333333; --sb-icon: #333333; --sb-border: rgba(51, 51, 51, 0.4); --sb-bg: rgba(51, 51, 51, 0.08); }
.sat-badge--sr_1st_auction { --sb-fg: #916500; --sb-icon: #ba8200; --sb-border: rgba(186, 130, 0, 0.4); --sb-bg: rgba(186, 130, 0, 0.08); }
.sat-badge--pizza { --sb-fg: #916500; --sb-icon: #ba8200; --sb-border: rgba(186, 130, 0, 0.4); --sb-bg: rgba(186, 130, 0, 0.08); }
.sat-badge--jpeg { --sb-fg: #037f5e; --sb-icon: #037f5e; --sb-border: rgba(3, 127, 94, 0.4); --sb-bg: rgba(3, 127, 94, 0.08); }
.sat-badge--hitman { --sb-fg: #d62929; --sb-icon: #e05c5c; --sb-border: rgba(224, 92, 92, 0.4); --sb-bg: rgba(224, 92, 92, 0.08); }
.sat-badge--requests { --sb-fg: #1f1f1f; --sb-icon: #1f1f1f; --sb-border: rgba(31, 31, 31, 0.4); --sb-bg: rgba(31, 31, 31, 0.08); }
.sat-badge--vintage { --sb-fg: #926507; --sb-icon: #b98009; --sb-border: rgba(185, 128, 9, 0.4); --sb-bg: rgba(185, 128, 9, 0.08); }
.sat-badge--paliblock { --sb-fg: #3d3c39; --sb-icon: #3d3c39; --sb-border: rgba(11, 11, 11, 0.22); --sb-bg: rgba(11, 11, 11, 0.04); }

/* Dark: the palette the icons were drawn for. */
@media (prefers-color-scheme: dark) {
    /* A type without a rule of its own (one the fork adds later). */
    :root:not([data-theme="light"]) .sat-badge { --sb-fg: #e8e7e1; --sb-icon: #e8e7e1; --sb-border: rgba(255, 255, 255, 0.22); --sb-bg: rgba(255, 255, 255, 0.05); }
    :root:not([data-theme="light"]) .sat-badge--mythic { --sb-fg: #ffd166; --sb-icon: #ffd166; --sb-border: rgba(255, 209, 102, 0.3); --sb-bg: rgba(255, 209, 102, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--legendary { --sb-fg: #ffd166; --sb-icon: #ffd166; --sb-border: rgba(255, 209, 102, 0.3); --sb-bg: rgba(255, 209, 102, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--epic { --sb-fg: #ddd6ff; --sb-icon: #ddd6ff; --sb-border: rgba(166, 132, 255, 0.3); --sb-bg: rgba(142, 81, 255, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--rare { --sb-fg: #b8e6fe; --sb-icon: #b8e6fe; --sb-border: rgba(0, 188, 255, 0.3); --sb-bg: rgba(0, 166, 244, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--uncommon { --sb-fg: #ff8ed0; --sb-icon: #ed2b9c; --sb-border: rgba(237, 43, 156, 0.3); --sb-bg: rgba(237, 43, 156, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--black_epic { --sb-fg: #e4e4e7; --sb-icon: #999999; --sb-border: rgba(113, 113, 123, 0.4); --sb-bg: rgba(113, 113, 123, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--black_rare { --sb-fg: #e4e4e7; --sb-icon: #999999; --sb-border: rgba(113, 113, 123, 0.4); --sb-bg: rgba(113, 113, 123, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--black { --sb-fg: #e4e4e7; --sb-icon: #999999; --sb-border: rgba(113, 113, 123, 0.4); --sb-bg: rgba(113, 113, 123, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--megasat_alpha { --sb-fg: #ffb366; --sb-icon: #ff6f00; --sb-border: rgba(255, 111, 0, 0.3); --sb-bg: rgba(255, 111, 0, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--centasat_alpha { --sb-fg: #ffb366; --sb-icon: #ff6f00; --sb-border: rgba(255, 111, 0, 0.3); --sb-bg: rgba(255, 111, 0, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--decasat_alpha { --sb-fg: #ffb366; --sb-icon: #ff6f00; --sb-border: rgba(255, 111, 0, 0.3); --sb-bg: rgba(255, 111, 0, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--kilosat_alpha { --sb-fg: #ffb366; --sb-icon: #ff6f00; --sb-border: rgba(255, 111, 0, 0.3); --sb-bg: rgba(255, 111, 0, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--alpha { --sb-fg: #ffb366; --sb-icon: #ff6f00; --sb-border: rgba(255, 111, 0, 0.3); --sb-bg: rgba(255, 111, 0, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--megasat_omega { --sb-fg: #7fd8f2; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.3); --sb-bg: rgba(17, 138, 178, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--centasat_omega { --sb-fg: #7fd8f2; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.3); --sb-bg: rgba(17, 138, 178, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--decasat_omega { --sb-fg: #7fd8f2; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.3); --sb-bg: rgba(17, 138, 178, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--kilosat_omega { --sb-fg: #7fd8f2; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.3); --sb-bg: rgba(17, 138, 178, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--omega { --sb-fg: #7fd8f2; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.3); --sb-bg: rgba(17, 138, 178, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--palindromes_perfect_palinception { --sb-fg: #f8c96b; --sb-icon: #e89a02; --sb-border: rgba(232, 154, 2, 0.3); --sb-bg: rgba(232, 154, 2, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--palindromes_integer_1d { --sb-fg: #8dd7f6; --sb-icon: #6aa8c3; --sb-border: rgba(106, 168, 195, 0.3); --sb-bg: rgba(106, 168, 195, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--palindromes_integer_2d { --sb-fg: #8dd7f6; --sb-icon: #6aa8c3; --sb-border: rgba(106, 168, 195, 0.3); --sb-bg: rgba(106, 168, 195, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--palindromes_integer_3d { --sb-fg: #8dd7f6; --sb-icon: #6aa8c3; --sb-border: rgba(106, 168, 195, 0.3); --sb-bg: rgba(106, 168, 195, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--palindromes_integer { --sb-fg: #8dd7f6; --sb-icon: #6aa8c3; --sb-border: rgba(106, 168, 195, 0.3); --sb-bg: rgba(106, 168, 195, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--bounty3_name { --sb-fg: #a4f4cf; --sb-icon: #a4f4cf; --sb-border: rgba(0, 212, 146, 0.3); --sb-bg: rgba(0, 188, 125, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--450x { --sb-fg: #f4f4f5; --sb-icon: #f4f4f5; --sb-border: rgba(212, 212, 216, 0.25); --sb-bg: rgba(159, 159, 169, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--block9 { --sb-fg: #ffffff; --sb-icon: #ffffff; --sb-border: rgba(255, 255, 255, 0.2); --sb-bg: rgba(255, 255, 255, 0.05); }
    :root:not([data-theme="light"]) .sat-badge--block78 { --sb-fg: #ff9aad; --sb-icon: #ef506a; --sb-border: rgba(239, 80, 106, 0.3); --sb-bg: rgba(239, 80, 106, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--block286 { --sb-fg: #8fc2ff; --sb-icon: #0174f8; --sb-border: rgba(1, 116, 248, 0.3); --sb-bg: rgba(1, 116, 248, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--block_666 { --sb-fg: #ffccd3; --sb-icon: #e05c5c; --sb-border: rgba(255, 32, 86, 0.3); --sb-bg: rgba(255, 32, 86, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--nakamoto { --sb-fg: #e4e4e7; --sb-icon: #cccccc; --sb-border: rgba(212, 212, 216, 0.25); --sb-bg: rgba(159, 159, 169, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--sr_1st_auction { --sb-fg: #f2a900; --sb-icon: #f2a900; --sb-border: rgba(242, 169, 0, 0.3); --sb-bg: rgba(242, 169, 0, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--pizza { --sb-fg: #f2a900; --sb-icon: #f2a900; --sb-border: rgba(242, 169, 0, 0.3); --sb-bg: rgba(242, 169, 0, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--jpeg { --sb-fg: #049870; --sb-icon: #037f5e; --sb-border: rgba(3, 127, 94, 0.3); --sb-bg: rgba(3, 127, 94, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--hitman { --sb-fg: #ff9a9a; --sb-icon: #e05c5c; --sb-border: rgba(224, 92, 92, 0.3); --sb-bg: rgba(224, 92, 92, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--requests { --sb-fg: #fcfcfc; --sb-icon: #fcfcfc; --sb-border: rgba(56, 56, 56, 0.7); --sb-bg: rgba(38, 38, 38, 0.4); }
    :root:not([data-theme="light"]) .sat-badge--vintage { --sb-fg: #f6bb41; --sb-icon: #f6bb41; --sb-border: rgba(246, 187, 65, 0.3); --sb-bg: rgba(246, 187, 65, 0.1); }
    :root:not([data-theme="light"]) .sat-badge--paliblock { --sb-fg: #e8e7e1; --sb-icon: #e8e7e1; --sb-border: rgba(255, 255, 255, 0.22); --sb-bg: rgba(255, 255, 255, 0.05); }
}

:root[data-theme="dark"] .sat-badge { --sb-fg: #e8e7e1; --sb-icon: #e8e7e1; --sb-border: rgba(255, 255, 255, 0.22); --sb-bg: rgba(255, 255, 255, 0.05); }
:root[data-theme="dark"] .sat-badge--mythic { --sb-fg: #ffd166; --sb-icon: #ffd166; --sb-border: rgba(255, 209, 102, 0.3); --sb-bg: rgba(255, 209, 102, 0.1); }
:root[data-theme="dark"] .sat-badge--legendary { --sb-fg: #ffd166; --sb-icon: #ffd166; --sb-border: rgba(255, 209, 102, 0.3); --sb-bg: rgba(255, 209, 102, 0.1); }
:root[data-theme="dark"] .sat-badge--epic { --sb-fg: #ddd6ff; --sb-icon: #ddd6ff; --sb-border: rgba(166, 132, 255, 0.3); --sb-bg: rgba(142, 81, 255, 0.1); }
:root[data-theme="dark"] .sat-badge--rare { --sb-fg: #b8e6fe; --sb-icon: #b8e6fe; --sb-border: rgba(0, 188, 255, 0.3); --sb-bg: rgba(0, 166, 244, 0.1); }
:root[data-theme="dark"] .sat-badge--uncommon { --sb-fg: #ff8ed0; --sb-icon: #ed2b9c; --sb-border: rgba(237, 43, 156, 0.3); --sb-bg: rgba(237, 43, 156, 0.1); }
:root[data-theme="dark"] .sat-badge--black_epic { --sb-fg: #e4e4e7; --sb-icon: #999999; --sb-border: rgba(113, 113, 123, 0.4); --sb-bg: rgba(113, 113, 123, 0.1); }
:root[data-theme="dark"] .sat-badge--black_rare { --sb-fg: #e4e4e7; --sb-icon: #999999; --sb-border: rgba(113, 113, 123, 0.4); --sb-bg: rgba(113, 113, 123, 0.1); }
:root[data-theme="dark"] .sat-badge--black { --sb-fg: #e4e4e7; --sb-icon: #999999; --sb-border: rgba(113, 113, 123, 0.4); --sb-bg: rgba(113, 113, 123, 0.1); }
:root[data-theme="dark"] .sat-badge--megasat_alpha { --sb-fg: #ffb366; --sb-icon: #ff6f00; --sb-border: rgba(255, 111, 0, 0.3); --sb-bg: rgba(255, 111, 0, 0.1); }
:root[data-theme="dark"] .sat-badge--centasat_alpha { --sb-fg: #ffb366; --sb-icon: #ff6f00; --sb-border: rgba(255, 111, 0, 0.3); --sb-bg: rgba(255, 111, 0, 0.1); }
:root[data-theme="dark"] .sat-badge--decasat_alpha { --sb-fg: #ffb366; --sb-icon: #ff6f00; --sb-border: rgba(255, 111, 0, 0.3); --sb-bg: rgba(255, 111, 0, 0.1); }
:root[data-theme="dark"] .sat-badge--kilosat_alpha { --sb-fg: #ffb366; --sb-icon: #ff6f00; --sb-border: rgba(255, 111, 0, 0.3); --sb-bg: rgba(255, 111, 0, 0.1); }
:root[data-theme="dark"] .sat-badge--alpha { --sb-fg: #ffb366; --sb-icon: #ff6f00; --sb-border: rgba(255, 111, 0, 0.3); --sb-bg: rgba(255, 111, 0, 0.1); }
:root[data-theme="dark"] .sat-badge--megasat_omega { --sb-fg: #7fd8f2; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.3); --sb-bg: rgba(17, 138, 178, 0.1); }
:root[data-theme="dark"] .sat-badge--centasat_omega { --sb-fg: #7fd8f2; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.3); --sb-bg: rgba(17, 138, 178, 0.1); }
:root[data-theme="dark"] .sat-badge--decasat_omega { --sb-fg: #7fd8f2; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.3); --sb-bg: rgba(17, 138, 178, 0.1); }
:root[data-theme="dark"] .sat-badge--kilosat_omega { --sb-fg: #7fd8f2; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.3); --sb-bg: rgba(17, 138, 178, 0.1); }
:root[data-theme="dark"] .sat-badge--omega { --sb-fg: #7fd8f2; --sb-icon: #118ab2; --sb-border: rgba(17, 138, 178, 0.3); --sb-bg: rgba(17, 138, 178, 0.1); }
:root[data-theme="dark"] .sat-badge--palindromes_perfect_palinception { --sb-fg: #f8c96b; --sb-icon: #e89a02; --sb-border: rgba(232, 154, 2, 0.3); --sb-bg: rgba(232, 154, 2, 0.1); }
:root[data-theme="dark"] .sat-badge--palindromes_integer_1d { --sb-fg: #8dd7f6; --sb-icon: #6aa8c3; --sb-border: rgba(106, 168, 195, 0.3); --sb-bg: rgba(106, 168, 195, 0.1); }
:root[data-theme="dark"] .sat-badge--palindromes_integer_2d { --sb-fg: #8dd7f6; --sb-icon: #6aa8c3; --sb-border: rgba(106, 168, 195, 0.3); --sb-bg: rgba(106, 168, 195, 0.1); }
:root[data-theme="dark"] .sat-badge--palindromes_integer_3d { --sb-fg: #8dd7f6; --sb-icon: #6aa8c3; --sb-border: rgba(106, 168, 195, 0.3); --sb-bg: rgba(106, 168, 195, 0.1); }
:root[data-theme="dark"] .sat-badge--palindromes_integer { --sb-fg: #8dd7f6; --sb-icon: #6aa8c3; --sb-border: rgba(106, 168, 195, 0.3); --sb-bg: rgba(106, 168, 195, 0.1); }
:root[data-theme="dark"] .sat-badge--bounty3_name { --sb-fg: #a4f4cf; --sb-icon: #a4f4cf; --sb-border: rgba(0, 212, 146, 0.3); --sb-bg: rgba(0, 188, 125, 0.1); }
:root[data-theme="dark"] .sat-badge--450x { --sb-fg: #f4f4f5; --sb-icon: #f4f4f5; --sb-border: rgba(212, 212, 216, 0.25); --sb-bg: rgba(159, 159, 169, 0.1); }
:root[data-theme="dark"] .sat-badge--block9 { --sb-fg: #ffffff; --sb-icon: #ffffff; --sb-border: rgba(255, 255, 255, 0.2); --sb-bg: rgba(255, 255, 255, 0.05); }
:root[data-theme="dark"] .sat-badge--block78 { --sb-fg: #ff9aad; --sb-icon: #ef506a; --sb-border: rgba(239, 80, 106, 0.3); --sb-bg: rgba(239, 80, 106, 0.1); }
:root[data-theme="dark"] .sat-badge--block286 { --sb-fg: #8fc2ff; --sb-icon: #0174f8; --sb-border: rgba(1, 116, 248, 0.3); --sb-bg: rgba(1, 116, 248, 0.1); }
:root[data-theme="dark"] .sat-badge--block_666 { --sb-fg: #ffccd3; --sb-icon: #e05c5c; --sb-border: rgba(255, 32, 86, 0.3); --sb-bg: rgba(255, 32, 86, 0.1); }
:root[data-theme="dark"] .sat-badge--nakamoto { --sb-fg: #e4e4e7; --sb-icon: #cccccc; --sb-border: rgba(212, 212, 216, 0.25); --sb-bg: rgba(159, 159, 169, 0.1); }
:root[data-theme="dark"] .sat-badge--sr_1st_auction { --sb-fg: #f2a900; --sb-icon: #f2a900; --sb-border: rgba(242, 169, 0, 0.3); --sb-bg: rgba(242, 169, 0, 0.1); }
:root[data-theme="dark"] .sat-badge--pizza { --sb-fg: #f2a900; --sb-icon: #f2a900; --sb-border: rgba(242, 169, 0, 0.3); --sb-bg: rgba(242, 169, 0, 0.1); }
:root[data-theme="dark"] .sat-badge--jpeg { --sb-fg: #049870; --sb-icon: #037f5e; --sb-border: rgba(3, 127, 94, 0.3); --sb-bg: rgba(3, 127, 94, 0.1); }
:root[data-theme="dark"] .sat-badge--hitman { --sb-fg: #ff9a9a; --sb-icon: #e05c5c; --sb-border: rgba(224, 92, 92, 0.3); --sb-bg: rgba(224, 92, 92, 0.1); }
:root[data-theme="dark"] .sat-badge--requests { --sb-fg: #fcfcfc; --sb-icon: #fcfcfc; --sb-border: rgba(56, 56, 56, 0.7); --sb-bg: rgba(38, 38, 38, 0.4); }
:root[data-theme="dark"] .sat-badge--vintage { --sb-fg: #f6bb41; --sb-icon: #f6bb41; --sb-border: rgba(246, 187, 65, 0.3); --sb-bg: rgba(246, 187, 65, 0.1); }
:root[data-theme="dark"] .sat-badge--paliblock { --sb-fg: #e8e7e1; --sb-icon: #e8e7e1; --sb-border: rgba(255, 255, 255, 0.22); --sb-bg: rgba(255, 255, 255, 0.05); }

/*
 * A sale's secondary rows (badges.js renderSecondary): "+ [badges] Black
 * omega" after its own row, quieter than it. The chip's title says what was
 * sold together.
 */
.sale-with {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 8px 1px 4px;
    border: 1px dashed var(--axis, #c3c2b7);
    border-radius: 9999px;
    color: var(--ink-2, #52514e);
    font-size: 12px;
    line-height: 1.3;
    vertical-align: middle;
    white-space: nowrap;
    cursor: help;
}

.sale-with__plus {
    font-weight: 600;
    color: var(--ink-2, #52514e);
}

.sale-with__row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sale-with .sat-badge {
    cursor: inherit;
}

/* A second line under a row's name (narrow cells, the phone). */
.sale-with--block {
    margin: 4px 0 0;
}

/* A pill that links to its type's explainer (render's `link`): the same
   pill; a pointer, a firmer border on hover (the page's focus ring on keys). */
a.sat-badge--link {
    text-decoration: none;
    cursor: pointer;
}

a.sat-badge--link:hover {
    border-color: var(--sb-fg);
}