/* ============================================
   Mount Palette (/mount-palette/) styles
   Loaded after global.css by includes/header.php on this page only.

   Match your outfit (2026-10-26, the design workshop's option 2, picked by
   the owner): the outfit panel (three slots and a palette) on the left,
   mounts ranked by how many of your colors they wear on the right. The page
   uses the full width the site layout gives it: no max-width caps here.

   Departures from the workshop (owner calls): the renders sit on #181818, the
   background prod has always used, which is Blizzard's own render background
   rgb(24, 24, 24), so the square disappears into it with no blend mode; and
   they're shown whole, not cropped in.
   ============================================ */

.mount-palette .mp-tool {
    --mp-stage: #181818;               /* = Blizzard's render background */
    --mp-panel-solid: #080c14;
    --mp-blue-soft: rgba(39, 170, 226, 0.14);
    --mp-line-soft: rgba(255, 255, 255, 0.07);
    --mp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Retail and the built Classic versions show the tool (data-mp-state="live",
   set by mount-palette.js from the site-wide game, 2026-10-26); WoW Forever and a
   Classic version with no mount list yet swap it for .mp-soon */
.mount-palette .mp-tool:not([data-mp-state="live"]) .mp-retail-only { display: none !important; }
.mount-palette .mp-tool[data-mp-state="live"] .mp-soon { display: none; }

/* ========================================
   NOT RETAIL: said plainly, with a way back (Price Check's .pc-soon look).
   Tinted with the picked game's color (--game-color from <html data-game-color>,
   docs/pages.md "Game colors")
   ======================================== */
.mount-palette .mp-soon {
    --a: var(--game-color);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 22px;
    padding: 24px 26px;
    border-color: color-mix(in srgb, var(--a) 30%, rgba(255, 255, 255, 0.06));
    background:
        radial-gradient(70% 160% at 0% 0%, color-mix(in srgb, var(--a) 12%, transparent), transparent 62%),
        var(--color-bg-panel);
}

.mount-palette .mp-soon__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--a) 14%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 30%, transparent);
    color: var(--a);
}

.mount-palette .mp-soon__icon svg { width: 26px; height: 26px; }

.mount-palette .mp-soon__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    text-align: left;
}

.mount-palette .mp-soon__text {
    margin: 6px 0 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.mount-palette .mp-soon__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
}

.mount-palette .mp-soon__btn .btn-label { top: 0; }

/* Measured (2026-10-26, ink at 1x and 2x, Chromium and WebKit, Inter loaded):
   box-centered, Show more, the All / Owned / Not owned labels and the group
   heading's pips and count drifted 0.5 to 1px, high in one engine and low in
   the other. Trimmed to cap height, flex centers the letters themselves (the
   dashboard game pills' fix, docs/design-rules.md): now within 0.5px in both.
   Switch to Retail keeps Price Check's setup: trimmed, it read 1px low in
   Chromium at 1x; untrimmed it stays within 0.75px everywhere. */
.mount-palette .mp-more__btn .btn-label,
.mount-palette .mp-more__btn .mp-count,
.mount-palette .mp-seg__label,
.mount-palette .mp-tier__label,
.mount-palette .mp-tier__head .mp-count {
    line-height: 1;
    text-box: trim-both cap alphabetic;
}
.mount-palette .mp-soon__btn-icon { display: inline-flex; color: var(--game-color); } /* data-game-color="retail" */
.mount-palette .mp-soon__btn-icon svg { width: 17px; height: 17px; }

/* ========================================
   LAYOUT: the outfit beside the mounts
   ======================================== */
.mount-palette .mp-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

/* ========================================
   THE OUTFIT PANEL
   Sticky beside the results; if a screen is shorter than the panel, the
   panel scrolls on its own.
   ======================================== */
.mount-palette .mp-outfit {
    position: sticky;
    top: 16px;
    margin: 0;
    padding: 18px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #26303f transparent;
}

.mount-palette .mp-outfit__title {
    margin: 0 0 4px;
    text-align: left;   /* global.css centers panel headings on phones; this one leads its own lede */
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.mount-palette .mp-outfit__lede {
    margin: 0 0 16px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Three slots: the one being filled is ringed in blue */
.mount-palette .mp-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mount-palette .mp-slot { position: relative; }

.mount-palette .mp-slot__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 12px 4px 10px;
    border: 1px solid var(--mp-line-soft);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.mount-palette .mp-slot__btn:hover { border-color: rgba(255, 255, 255, 0.2); }

.mount-palette .mp-slot__btn[aria-pressed="true"] {
    border-color: var(--color-primary);
    background: var(--mp-blue-soft);
}

.mount-palette .mp-slot__chip {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.22);
}

.mount-palette .mp-slot.is-filled .mp-slot__chip {
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 8px 18px -8px rgba(0, 0, 0, 0.9);
}

.mount-palette .mp-slot__label {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-light);
}

.mount-palette .mp-slot__name {
    min-height: 1.2em;
    font-size: 0.72rem;
    line-height: 1.2;
    text-align: center;
    color: var(--color-text-dark);
    overflow-wrap: anywhere;
}

.mount-palette .mp-slot.is-filled .mp-slot__name { color: var(--color-text-muted); }

/* Clear: a small x on the chip's top right corner, its own button (not
   nested in the slot), with a bigger hit area than it shows */
.mount-palette .mp-slot__x {
    position: absolute;
    top: 9px;
    right: calc(50% - 30px);
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--mp-line-soft);
    border-radius: 50%;
    background: #1d2433;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.mount-palette .mp-slot__x::before {
    content: '';
    position: absolute;
    inset: -8px;
}

.mount-palette .mp-slot__x:hover,
.mount-palette .mp-slot__x:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

/* The one moment of motion: a color dropped into a slot settles in */
@keyframes mp-chip-in {
    from { transform: scale(0.55); opacity: 0.35; }
    to { transform: none; opacity: 1; }
}

.mount-palette .mp-outfit[data-just-filled="main"] [data-slot="main"] .mp-slot__chip,
.mount-palette .mp-outfit[data-just-filled="second"] [data-slot="second"] .mp-slot__chip,
.mount-palette .mp-outfit[data-just-filled="accent"] [data-slot="accent"] .mp-slot__chip {
    animation: mp-chip-in 0.45s var(--mp-ease-out);
}

/* The palette: 13 families, then the open family's shades */
.mount-palette .mp-pal {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--mp-line-soft);
}

.mount-palette .mp-pal__cap {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.mount-palette .mp-pal__fams {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
}

.mount-palette .mp-pal__fam,
.mount-palette .mp-pal__shade {
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: transform 0.15s var(--mp-ease-out);
}

.mount-palette .mp-pal__fam {
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}


.mount-palette .mp-pal__fam[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--mp-panel-solid), 0 0 0 4px var(--color-primary);
}

.mount-palette .mp-pal__shades {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 5px;
}

/* The shades' own label, with room above it, so the squares read as their own
   group under the circles (owner, 2026-10-26: "break up a little bit better") */
.mount-palette .mp-pal__cap--shades {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 20px 0 10px;
}

.mount-palette .mp-pal__cap--shades .mp-count {
    font-size: 0.72rem;
    letter-spacing: 0;
    text-transform: none;
}

.mount-palette .mp-pal__shade {
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.mount-palette .mp-pal__shade:hover { transform: scale(1.12); }

/* Fills under 3:1 against the panel (mount-palette.js lowOnPanel()) get an
   inner edge tinted from their own color: 4.8:1 or better on the panel for
   every shade, so a black square on navy has a visible edge and the dark
   shades stay told apart by their own hue */
.mount-palette .mp-pal__shade.is-low,
.mount-palette .mp-pal__fam.is-low {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, #fff);
}

/* The color already in the slot you're filling */
.mount-palette .mp-pal__shade[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--mp-panel-solid), 0 0 0 3px #fff;
}

.mount-palette .mp-pal__shade.is-low[aria-pressed="true"] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, #fff), 0 0 0 2px var(--mp-panel-solid), 0 0 0 3px #fff;
}

.mount-palette .mp-pal__fam.is-low[aria-pressed="true"] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, #fff), 0 0 0 2px var(--mp-panel-solid), 0 0 0 4px var(--color-primary);
}

.mount-palette .mp-pal__hint {
    min-height: 2.6em;
    margin: 10px 0 0;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--color-text-muted);
}

.mount-palette .mp-pal__hint.is-naming { color: var(--color-text-light); }

.mount-palette .mp-pal__more {
    margin: 4px 0 0;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.mount-palette .mp-pal__more:hover { text-decoration: underline; text-underline-offset: 3px; }

.mount-palette .mp-pal__loading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.mount-palette .mp-pal__loading img,
.mount-palette .mp-empty--loading img { animation: spin 1s linear infinite; }

/* ========================================
   RESULTS
   ======================================== */
.mount-palette .mp-results {
    min-width: 0;
    container-type: inline-size;
}

.mount-palette .mp-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.mount-palette .mp-search {
    flex: 1 1 240px;
    min-width: 0;
    height: 42px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--color-border-input);
    border-radius: 10px;
    background: var(--color-bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center;
    color: #fff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    -webkit-appearance: none;   /* WebKit's search field put the text 5.5px high (measured) */
    appearance: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.mount-palette .mp-search::placeholder { color: var(--color-text-dark); font-weight: 400; }

/* Classic, signed in (2026-10-26): Blizzard has no Classic collections, so the
   owned switch gives way to one plain line (display: inline-flex beats [hidden]) */
.mount-palette .mp-seg[hidden] { display: none; }
.mount-palette .mp-own-note {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.mount-palette .mp-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(39, 170, 226, 0.18);
}

/* All / Owned / Not owned (signed in) */
.mount-palette .mp-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
}

.mount-palette .mp-seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.mount-palette .mp-seg button:hover { color: var(--color-text-light); }

.mount-palette .mp-seg button[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Groups: one per combination of your colors (all of them, then the pairs,
   Main's first, then the singles). The heading's chips are your own colors. */
.mount-palette .mp-tier { margin-bottom: 26px; }

.mount-palette .mp-tier__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 700;
    color: #fff;
}

.mount-palette .mx-head { align-items: flex-start; }
.mount-palette .mx-head__text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mount-palette .mx-head__line { display: flex; align-items: center; gap: 10px; min-height: 14px; }

/* Your Main, Second and Accent as square chips in slot order: solid for the
   colors the group wears, hollow for the ones it misses. The second line says
   the same in words, so color is never the only cue. */
.mount-palette .mx-pips { display: inline-flex; gap: 4px; }

.mount-palette .mx-pip {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.mount-palette .mx-pip:not(.is-on) {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, rgba(255, 255, 255, 0.3));
}

/* Dark colors (black, dark red, deep purple) mixed further toward white so a
   hollow chip still reads (the workshop flagged them as faint). mount-palette.js
   faintRing() picks the colors whose ring above would land under 3:1 on the page;
   this one is 3.6:1 or better for every shade (black 2.0 -> 4.3, dark red 2.0 -> 4.0). */
.mount-palette .mx-pip.is-faint:not(.is-on) {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 40%, rgba(255, 255, 255, 0.62));
}

.mount-palette .mx-tier__names {
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text-light);
}

.mount-palette .mx-tier__miss { color: var(--color-text-dark); }

.mount-palette .mp-count {
    color: var(--color-text-dark);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.mount-palette .mp-tier__head .mp-count { font-size: 0.9rem; }

.mount-palette .mp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@container (max-width: 760px) {
    .mount-palette .mp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (max-width: 520px) {
    .mount-palette .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* The mount card: the whole render on Blizzard's own #181818 (the renders are
   600px squares on that color, so the square never shows), then one color bar */
.mount-palette .mp-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mp-line-soft);
    border-radius: 12px;
    background: var(--mp-panel-solid);
    cursor: pointer;
    transition: border-color var(--transition-fast), transform 0.2s var(--mp-ease-out);
}

.mount-palette .mp-card:hover {
    border-color: rgba(39, 170, 226, 0.5);
    transform: translateY(-2px);
}

.mount-palette .mp-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.mount-palette .mp-card__stage {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--mp-stage);
}

.mount-palette .mp-card__stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* the whole render, uncropped (owner, 2026-10-26: "no crop") */
}

/* A missing render: the placeholder icon sits small and centered, uncropped */
.mount-palette .mp-card__stage img.img-missing {
    width: 48px;
    height: 48px;
    margin: calc(50% - 24px) auto 0;
    opacity: 0.4;
}

.mount-palette .mp-card__body { padding: 10px 12px 12px; }

.mount-palette .mp-card__name,
.mount-palette .mp-card__src {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mount-palette .mp-card__name {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-light);
}

.mount-palette .mp-card__src {
    margin-top: 2px;
    font-size: 0.74rem;
    color: var(--color-text-dark);
}

/* Main color widest, second next, accents share the rest; your colors get a white underline */
.mount-palette .mp-cbar {
    display: flex;
    gap: 2px;
    height: 6px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 3px;
}

.mount-palette .mp-cbar span { display: block; height: 100%; }
.mount-palette .mp-cbar span.hit { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.85); }

/* Signed in: mounts you don't own are dimmed. The render fades into the
   stage, which is its own background color, so the square never shows. */
.mount-palette .mp-card.is-unowned {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.2);
}

.mount-palette .mp-card.is-unowned:hover { border-style: solid; border-color: rgba(39, 170, 226, 0.5); }
.mount-palette .mp-card.is-unowned .mp-card__stage img { opacity: 0.5; }
.mount-palette .mp-card.is-unowned .mp-card__name { color: var(--color-text-muted); }

.mount-palette .mp-more {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.mount-palette .mp-more__btn {
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
}

.mount-palette .mp-more__btn .mp-count { color: var(--color-text-muted); }
.mount-palette .mp-more__btn .btn-label { top: 0; }

.mount-palette .mp-empty {
    padding: 48px 20px;
    border: 1px dashed var(--mp-line-soft);
    border-radius: 12px;
    text-align: center;
    color: var(--color-text-muted);
}

.mount-palette .mp-empty b {
    display: block;
    margin-bottom: 4px;
    font-size: 1rem;
    color: var(--color-text-light);
}

.mount-palette .mp-empty--loading img { display: block; margin: 0 auto 12px; }

/* ========================================
   DETAIL PANEL
   ======================================== */

.mount-palette .panel-mount-detail {
    position: relative;
}

.mount-palette .detail-close {
    display: none;
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    z-index: 1;
}

.mount-palette .detail-close:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.1);
}

/* Two column: image left, info right */
.mount-palette .detail-body {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-lg);
    align-items: start;
}

.mount-palette .detail-render {
    width: calc(50% - var(--spacing-lg) / 2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.mount-palette .detail-render-image {
    background: #181818;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    aspect-ratio: 1;
    width: 100%;
}

.mount-palette .detail-render-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    transition: all 0.15s;
}

.mount-palette .detail-render-image a:hover,
.mount-palette .detail-render-image a:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(39, 170, 226, 0.3);
}

.mount-palette .detail-render img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.mount-palette .detail-view-3d {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: var(--spacing-md);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.mount-palette .detail-view-3d:hover,
.mount-palette .detail-view-3d:focus {
    color: var(--color-primary);
    text-decoration: underline;
}

.mount-palette .detail-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: var(--spacing-sm) auto 0;
    padding: 4px 8px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s;
}

.mount-palette .detail-back[hidden] {
    display: none;
}

.mount-palette .detail-back:hover,
.mount-palette .detail-back:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.mount-palette .detail-view-3d img {
    width: 14px;
    height: 14px;
    filter: brightness(0) saturate(100%) invert(60%) sepia(5%) saturate(200%) hue-rotate(180deg);
    transition: filter 0.15s;
}

.mount-palette .detail-view-3d:hover img,
.mount-palette .detail-view-3d:focus img {
    filter: brightness(0) saturate(100%) invert(62%) sepia(93%) saturate(1352%) hue-rotate(166deg) brightness(96%) contrast(87%);
}

.mount-palette .detail-info {
    width: calc(50% - var(--spacing-lg) / 2);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mount-palette .detail-mount-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mount-palette .detail-mount-name a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mount-palette .detail-mount-name a:hover,
.mount-palette .detail-mount-name a:focus {
    color: var(--color-primary);
    text-decoration: underline;
}

.mount-palette .detail-mount-name .icon-external {
    width: 14px;
    height: 14px;
    filter: brightness(0) saturate(100%) invert(100%);
    opacity: 0.7;
    transition: filter 0.15s, opacity 0.15s;
    flex-shrink: 0;
}

.mount-palette .detail-mount-name a:hover .icon-external,
.mount-palette .detail-mount-name a:focus .icon-external {
    filter: brightness(0) saturate(100%) invert(62%) sepia(93%) saturate(1352%) hue-rotate(166deg) brightness(96%) contrast(87%);
    opacity: 1;
}

.mount-palette .detail-mount-source {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

.mount-palette .detail-mount-collected {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Classic (2026-10-26): the mount's model in that game isn't the one in the Retail
   render, so its colors may be a little off. Same size as Source, in the game's color */
.mount-palette .detail-mount-model {
    margin: 0;
    padding-left: 10px;
    border-left: 2px solid color-mix(in srgb, var(--game-color, #c9a227) 70%, transparent);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.mount-palette .detail-mount-collected .collected-owned {
    color: var(--color-success);
    font-weight: 500;
}

.mount-palette .detail-mount-collected .collected-unowned {
    color: var(--color-text-muted);
}

.mount-palette .detail-mount-faction {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: fit-content;
}

.mount-palette .detail-mount-faction.alliance {
    background: rgba(0, 112, 221, 0.2);
    color: #4a9eff;
}

.mount-palette .detail-mount-faction.horde {
    background: rgba(196, 30, 58, 0.2);
    color: #ff6b6b;
}

.mount-palette .detail-mount-faction.neutral {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-muted);
}

/* Colors Grid - 3 column layout */
.mount-palette .detail-colors {
    margin-top: var(--spacing-sm);
    width: 100%;
}

.mount-palette .detail-colors-grid {
    display: flex;
    flex-direction: column;
}

/* Color row containers */
.mount-palette .detail-color-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-sm);
}

.mount-palette .detail-color-slot {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mount-palette .detail-color-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mount-palette .detail-swatch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s;
}

.mount-palette .detail-swatch:hover,
.mount-palette .detail-swatch:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(39, 170, 226, 0.3);
}

.mount-palette .detail-swatch-color {
    width: 35px;
    height: 35px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.mount-palette .detail-swatch-name {
    font-size: 0.75rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mount-palette .detail-swatch-percent {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    margin-left: auto;
    flex-shrink: 0;
}

/* The detail panel sits at the top of the results column. Colors with a
   shade (or a family) are buttons into the outfit; the rest are labels. */
.mount-palette .panel-mount-detail { margin-bottom: 20px; }

.mount-palette .detail-colors-hint {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.mount-palette .detail-swatch { cursor: default; }
.mount-palette .detail-swatch.is-pickable { cursor: pointer; }

.mount-palette .detail-swatch:not(.is-pickable):hover {
    border-color: transparent;
    box-shadow: none;
}

.mount-palette .detail-swatch:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Broken-image fallback in the detail panel (mount-palette.js applyImageFallback) */
.mount-palette .detail-render img.img-missing {
    width: 48px;
    height: 48px;
    opacity: 0.4;
}

/* ========================================
   GO BY COLOR (2026-10-26, the workshop study "2+5 Outfit or color", approved
   by the owner). A mode switch at the top of the color panel; Go by color
   fills the same three slots with paint chips (a recessed well of three
   swatches, the families as a list, and the open family's chips above the
   results). Ported from the study's CSS as it stands.
   ======================================== */
.mount-palette .mp-tool {
    --mx-paper: #f4f1ea;      /* the chip card stock */
    --mx-ink: #1b1f27;        /* printed names */
    --mx-ink-soft: #5b6472;   /* printed counts, 5.3:1 on the paper */
}

/* Which mode is on: the outfit's circles and palette, or the chips */
.mount-palette .mp-tool[data-pick="outfit"] .mx-card,
.mount-palette .mp-tool[data-pick="outfit"] .mx-rail,
.mount-palette .mp-tool[data-pick="outfit"] .mx-wall,
.mount-palette .mp-tool[data-pick="color"] .mp-slots,
.mount-palette .mp-tool[data-pick="color"] .mp-pal { display: none; }

/* ---------- The toggle: staging's All / Owned / Not owned switch, full width ---------- */
.mount-palette .mp-mode {
    display: flex;
    width: 100%;
    margin: 0 0 16px;
}
.mount-palette .mp-mode button { flex: 1 1 0; min-width: 0; }
.mount-palette .mp-mode button[aria-pressed="true"] {
    background: var(--mp-blue-soft);
    box-shadow: inset 0 0 0 1px rgba(39, 170, 226, 0.55);
    color: #fff;
}

/* ---------- Your three colors: three paint chips in a dark well ----------
   Round 2 (owner): the cream card behind the chips was too loud, so the chips
   sit in a recessed well the color of the site's panels and only each chip's
   label strip is paper. Each chip is ONE painted box: the color is a background
   layer sized to the top 64px, over the paper, under one border-radius. Round 1
   stacked a separately rounded color span on the paper and ringed the active
   chip with spread shadows, which left gray seams and bleed in the corners. */
.mount-palette .mx-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--mp-line-soft);
    border-radius: 14px;   /* 6px chip + 8px padding, concentric */
    background: rgba(0, 0, 0, 0.28);
}
.mount-palette .mx-slot { position: relative; min-width: 0; }
.mount-palette .mx-slot__btn {
    --mx-ch: 64px;   /* the color's height */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background:
        var(--chip, none) -1px 0 / calc(100% + 2px) var(--mx-ch) no-repeat,   /* 1px past each side: a fractional width can't leave a paper sliver */
        linear-gradient(var(--mx-paper), var(--mx-paper)) bottom / 100% calc(100% - var(--mx-ch)) no-repeat;   /* paper only under the label, never under the color, so no paper fringe on the color's rounded corners */
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color var(--transition-fast);
}
.mount-palette .mx-slot__color { display: block; height: var(--mx-ch); }
/* An empty slot: the color area is open, a dashed space waiting for a chip */
.mount-palette .mx-slot:not(.is-filled) .mx-slot__btn {
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 12px) top / 100% var(--mx-ch) no-repeat,
        linear-gradient(var(--mx-paper), var(--mx-paper)) bottom / 100% calc(100% - var(--mx-ch)) no-repeat;
}
.mount-palette .mx-slot:not(.is-filled) .mx-slot__color {
    border: 1.5px dashed rgba(255, 255, 255, 0.24);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}
.mount-palette .mx-slot__text { display: block; padding: 7px 7px 7px; }
.mount-palette .mx-slot__role {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mx-ink-soft);
}
.mount-palette .mx-slot__name {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
    min-height: 2.5em;
    color: var(--mx-ink);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}
.mount-palette .mx-slot:not(.is-filled) .mx-slot__name { font-weight: 500; color: var(--mx-ink-soft); }
/* The slot you're filling: an outline, which follows the radius in both
   engines and paints no seams (spread shadows did) */
.mount-palette .mx-slot__btn:hover { outline-color: rgba(255, 255, 255, 0.22); }
.mount-palette .mx-slot__btn[aria-pressed="true"] { outline-color: var(--color-primary); }
.mount-palette .mx-slot__btn:focus-visible { outline-color: #fff; }
.mount-palette .mx-slot__btn[aria-pressed="true"]:focus-visible { outline-color: var(--color-primary); outline-width: 3px; }
.mount-palette .mx-slot__x {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 17, 26, 0.72);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.mount-palette .mx-slot__x::before { content: ''; position: absolute; inset: -8px; }
.mount-palette .mx-slot__x:hover,
.mount-palette .mx-slot__x:focus-visible { background: #0d111a; }

/* A chip dropped into the well settles in (staging's one moment, reused) */
.mount-palette .mp-outfit[data-just-filled="main"] [data-mx-slot="main"] .mx-slot__btn,
.mount-palette .mp-outfit[data-just-filled="second"] [data-mx-slot="second"] .mx-slot__btn,
.mount-palette .mp-outfit[data-just-filled="accent"] [data-mx-slot="accent"] .mx-slot__btn {
    animation: mx-chip-in 0.45s var(--mp-ease-out);
    transform-origin: 50% 0;
}
@keyframes mx-chip-in {
    from { transform: translateY(-10px) rotate(-2deg); opacity: 0.4; }
    to { transform: none; opacity: 1; }
}

/* ---------- Families: two columns down the panel, counts for the slot you're on ---------- */
.mount-palette .mx-rail {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--mp-line-soft);
}
.mount-palette .mx-rail__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 6px;
}
.mount-palette .mx-fam {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mount-palette .mx-fam:hover { background: rgba(255, 255, 255, 0.05); }
.mount-palette .mx-fam[aria-pressed="true"] {
    background: var(--mp-blue-soft);
    color: #fff;
    font-weight: 600;
}
.mount-palette .mx-fam__dot {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.mount-palette .mx-fam__label,
.mount-palette .mx-fam .mp-count { line-height: 1; text-box: trim-both cap alphabetic; }
.mount-palette .mx-fam .mp-count { margin-left: auto; font-size: 0.76rem; }
.mount-palette .mx-fam[aria-pressed="true"] .mp-count { color: var(--color-text-muted); }

/* ---------- The chip wall, at the top of the results ---------- */
.mount-palette .mx-wall { margin: 0 0 18px; padding: 16px; }
.mount-palette .mx-wall__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 14px;
    margin: 0 0 14px;
}
.mount-palette .mx-wall__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
    color: #fff;
}
.mount-palette .mx-wall__title .mp-count { margin-left: 6px; font-size: 0.9rem; }
.mount-palette .mx-wall__note { margin: 0; font-size: 0.8rem; color: var(--color-text-muted); }
.mount-palette .mx-wall__note b { color: var(--color-text-light); font-weight: 600; }
.mount-palette .mx-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 12px;
}
/* Each wall chip is one painted box too: the color is a background layer
   over the paper (no overflow clip of a colored child, whose rounded corners
   let a paper fringe bleed through at 1x) */
.mount-palette .mx-chip {
    --mx-ch: 72px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background:
        var(--chip, none) -1px 0 / calc(100% + 2px) var(--mx-ch) no-repeat,   /* 1px past each side: a fractional width can't leave a paper sliver */
        linear-gradient(var(--mx-paper), var(--mx-paper)) bottom / 100% calc(100% - var(--mx-ch)) no-repeat;   /* paper only under the label, never under the color, so no paper fringe on the color's rounded corners */
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.95);
    transition: transform 0.2s var(--mp-ease-out);
}
.mount-palette .mx-chip:hover { transform: translateY(-3px) rotate(-0.6deg); }
.mount-palette .mx-chip[aria-pressed="true"] { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.mount-palette .mx-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mount-palette .mx-chip[aria-pressed="true"]:focus-visible { outline: 3px solid #fff; }
.mount-palette .mx-chip__color { display: block; height: var(--mx-ch); }
.mount-palette .mx-chip__label { display: block; padding: 8px 9px 9px; }
.mount-palette .mx-chip__label b {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mx-ink);
    overflow-wrap: anywhere;
}
.mount-palette .mx-chip__label small {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    color: var(--mx-ink-soft);
    font-variant-numeric: tabular-nums;
}
/* More / fewer chips: a blank chip with the label printed on it */
.mount-palette .mx-chip--more {
    align-items: center;
    justify-content: center;
    min-height: 116px;
    background: transparent;
    border: 1.5px dashed rgba(244, 241, 234, 0.32);
    box-shadow: none;
    color: var(--color-text-light);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    padding: 12px;
}
.mount-palette .mx-chip--more:hover { transform: none; border-color: var(--color-primary); color: #fff; }
/* Trimmed to cap height so the label centers by its letters (staging's Show more fix) */
.mount-palette .mx-chip--more .mx-chip__more-label { line-height: 1.25; text-box: trim-both cap alphabetic; }

/* "All N chips" carries a descender; cap-centered, its ink sat 0.6 to 1.2px low,
   so it takes the site's descender lift (measured 2026-10-26). The mode switch's
   labels don't: the owner wants the letter body (cap top to baseline) centered in
   the pill with the descender hanging, which the cap-height trim already does. */
.mount-palette .mx-chip--more .mx-chip__more-label { position: relative; top: -0.5px; }


/* ========================================
   NARROWER SCREENS
   ======================================== */
@media (max-width: 959px) {
    /* One column: the outfit on top, the mounts under it */
    .mount-palette .mp-layout { grid-template-columns: minmax(0, 1fr); }

    .mount-palette .mp-outfit {
        position: static;
        max-height: none;
        overflow: visible;
    }

    /* The detail panel stacks above the grid: give it a visible close
       button (Escape also closes it) */
    .mount-palette .detail-close { display: inline-flex; }
    .mount-palette .detail-body { flex-direction: column; }

    .mount-palette .detail-render,
    .mount-palette .detail-info { width: 100%; }

    .mount-palette .detail-info {
        order: 1;
        align-items: center;
        text-align: center;
    }

    /* Centered text: the Classic model note drops its side bar, which only
       reads beside left-aligned lines */
    .mount-palette .detail-mount-model { padding-left: 0; border-left: 0; }

    /* Prod's order: name and colors, then the render with View in 3D and
       Back to listing under it. Render first put the close x on the image
       and split the name from it (finish review, 2026-10-26). */
    .mount-palette .detail-render { order: 2; }
    .mount-palette .detail-mount-name { justify-content: center; }
    .mount-palette .detail-mount-name a { flex-direction: column; }
    .mount-palette .detail-swatch { width: 100%; }
}

/* Tablets in one column: the outfit's slots and palette side by side */
@media (min-width: 640px) and (max-width: 959px) {
    .mount-palette .mp-outfit {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        column-gap: 24px;
        align-items: start;
    }

    .mount-palette .mp-outfit__title,
    .mount-palette .mp-outfit__lede,
    .mount-palette .mp-slots { grid-column: 1; }

    .mount-palette .mp-pal {
        grid-column: 2;
        grid-row: 1 / span 5;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .mount-palette .mp-mode,
    .mount-palette .mx-card { grid-column: 1; }

    .mount-palette .mx-rail {
        grid-column: 2;
        grid-row: 1 / span 5;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}

@media (max-width: 760px) {
    .mount-palette .mp-soon { grid-template-columns: auto minmax(0, 1fr); padding: 20px; }
    .mount-palette .mp-soon__btn { grid-column: 1 / -1; justify-content: center; width: 100%; }
}

@media (max-width: 600px) {
    .mount-palette .mp-outfit { padding: 14px; }
    .mount-palette .mp-seg { width: 100%; }
    .mount-palette .mp-seg button { flex: 1 1 0; }
    .mount-palette .mp-card__body { padding: 9px 10px 10px; }
    .mount-palette .detail-colors-grid,
    .mount-palette .detail-color-row { justify-content: center; }
}

@media (max-width: 600px) {
    .mount-palette .mx-wall { padding: 12px; }
    .mount-palette .mx-chips { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
    .mount-palette .mx-chip { --mx-ch: 50px; }
    .mount-palette .mx-chip__label { padding: 7px 7px 8px; }
    .mount-palette .mx-chip__label b { font-size: 0.74rem; }
    .mount-palette .mx-chip--more { min-height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
    .mount-palette .mp-outfit[data-just-filled] .mx-slot__btn { animation: none !important; }
    .mount-palette .mx-chip { transition: none; }
    .mount-palette .mx-chip:hover { transform: none; }
    .mount-palette .mp-outfit[data-just-filled] .mp-slot__chip { animation: none !important; }
    .mount-palette .mp-card,
    .mount-palette .mp-pal__fam,
    .mount-palette .mp-pal__shade { transition: none; }
    .mount-palette .mp-card:hover,
    .mount-palette .mp-pal__shade:hover { transform: none; }
}

/* Horizon (global.css, hue .hz--mp): where the line sits under the three mounts */
.page-intro--mount-palette {
    --hz-lift: 0.07;
    --hz-wk: 0.52;
}