/* Item market and character market in the new design. Not layered, so it wins over the legacy
   app.css rules, media queries included: anything set here that depends on the width is set
   again in the media blocks at the end. Item name, option and rarity colours are the game's own
   and stay as app.css has them. */

.lk-page:has(.market-page) {
    background: none;
    box-shadow: none;
}

.market-page {
    --mk-line: rgba(143, 111, 53, .38);
    --mk-line-soft: rgba(143, 111, 53, .2);
    --mk-well: rgba(0, 0, 0, .34);
    gap: 16px;
    color: var(--k-text);
}

/* Sub-tabs: one gold line, no pill. */
.market-tabs {
    justify-self: stretch;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--mk-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.market-page .market-tab,
.market-page .market-tab:hover,
.market-page .market-tab.is-active {
    min-height: 44px;
    margin-bottom: -1px;
    padding: 0 20px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--k-mute);
    font-size: 14px;
    font-weight: 600;
}

.market-page .market-tab:hover {
    color: var(--k-gold2);
}

.market-page .market-tab.is-active {
    border-bottom-color: var(--k-gold);
    color: var(--k-gold2);
}

.market-page .market-tab img,
.market-page .market-tab svg {
    filter: none;
}

/* Framed blocks. */
.market-filters,
.market-panel,
.market-empty,
.market-deal,
.cm-modal__card {
    border: 6px solid transparent;
    border-image: url(../images/card-frame-60.webp) 60 / 60px stretch;
    border-radius: 0;
    background: var(--k-card) padding-box;
    box-shadow: none;
}

.market-filters {
    gap: 10px;
    padding: 12px 14px;
}

.market-empty {
    color: var(--k-mute);
    font-weight: 500;
}

/* Every control: square, a thin gold line, one height. */
.market-search,
.market-icon-strip,
.market-chip-row,
.market-rarity-row,
.market-level,
.market-class-filter,
.cm-class-tabs {
    border: 1px solid var(--mk-line-soft);
    border-radius: 0;
    background: var(--mk-well);
}

.market-search {
    min-height: 40px;
}

.market-search input {
    color: var(--k-text);
    font-weight: 500;
}

.market-search span {
    border-color: var(--k-mute);
    box-shadow: 6px 6px 0 -4px var(--k-mute);
}

.market-class-filter {
    min-height: 40px;
    padding: 0 4px;
    gap: 2px;
}

.market-page .market-class-filter button {
    width: 42px;
    min-height: 34px;
    border-color: transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--k-mute);
}

.market-page .market-chip-row button,
.market-page .market-icon-strip button,
.market-page .market-rarity {
    border-radius: 0;
    box-shadow: none;
    font-weight: 600;
}

.market-page .market-chip-row button {
    min-height: 28px;
    border-color: transparent;
    background: none;
    color: var(--k-mute);
}

.market-page .market-chip-row button:hover:not(.is-active),
.market-page .market-class-filter button:hover:not(.is-active),
.market-page .market-icon-strip button:hover {
    border-color: var(--mk-line);
    background: none;
    color: var(--k-gold2);
}

.market-page .market-chip-row button.is-active,
.market-page .market-class-filter button.is-active,
.market-page .market-icon-strip button.is-active {
    border-color: var(--k-gold);
    background: rgba(217, 169, 78, .16);
    box-shadow: none;
    color: var(--k-gold2);
}

.market-icon-strip button {
    border-left-color: var(--mk-line-soft);
}

.market-rarity {
    border-left-color: var(--mk-line-soft);
}

.market-rarity.is-active {
    background: rgba(217, 169, 78, .16);
}

.market-level {
    color: var(--k-mute);
    font-weight: 600;
}

.market-level select {
    color: var(--k-text);
}

.market-level option {
    background: #181718;
    color: var(--k-text);
}

/* Buttons. The main action wears the site's gold plate, the rest are outlines. */
.market-page .market-action,
.market-page .market-view button,
.market-page .market-found > button:first-child {
    min-height: 40px;
    border: 1px solid var(--mk-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--k-gold2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
}

.market-page .market-found > button:first-child,
.market-page .market-view button:not(.market-sort) {
    width: 40px;
    padding: 0;
}

.market-page .market-action:hover,
.market-page .market-view button:hover,
.market-page .market-found > button:first-child:hover {
    border-color: var(--k-gold);
    background: rgba(217, 169, 78, .1);
}

.market-page .market-action--filter.is-active,
.market-page .market-view button.is-active {
    border-color: var(--k-gold);
    background: rgba(217, 169, 78, .16);
}

/* Collection filter: the market's helm with a tick (images/market/collection.svg), filled like the category icons. */
.market-page .market-icon--collection {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: currentColor;
    stroke: none;
}

/* Five things in the top row now (search, classes, Collection, Clear, Filters): one more column above 1120 px. */
@media (min-width: 1121px) {
    .market-page .market-filter-row--top {
        grid-template-columns: minmax(200px, 1fr) minmax(320px, 1.2fr) auto auto auto;
    }
}

.market-page .market-action--collection {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
}

.market-page .market-action--collection.is-active {
    border-color: var(--k-gold2);
    background: linear-gradient(180deg, rgba(217, 169, 78, .3), rgba(156, 28, 34, .25));
    color: #fff3d2;
    box-shadow: 0 0 16px rgba(245, 212, 138, .3), inset 0 0 12px rgba(245, 212, 138, .15);
}

/* The card's one column took the width of its widest row (234 px in a 225 px card), so the picture and its
   green glow ran past the right frame and the corner mark sat on the frame. The column is the card's width now. */
.market-page .market-card {
    grid-template-columns: minmax(0, 1fr);
}

/* No overflow clip here: the item tooltip lives inside the orb. */
.market-page .market-card__orb {
    min-width: 0;
    max-width: 100%;
}

/* The same mark on a lot that fits: gold when it is ready, dimmer when it still needs work. */
.market-page .market-card__col {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--mk-line);
    background: rgba(9, 8, 9, .85);
    color: var(--k-gold2);
}

.market-page .market-card__col .market-icon--collection {
    width: 20px;
    height: 20px;
}

.market-page .market-card__col--ready {
    border-color: var(--k-gold2);
    box-shadow: 0 0 12px rgba(245, 212, 138, .45);
}

.market-page .market-card__col--fit {
    color: var(--k-mute, #a59a86);
}

.market-page .market-sell,
.market-page .market-card__actions form button,
.market-page .market-card__actions > button:first-child,
.market-page .market-card__actions a,
.market-page .market-sell-card__go,
.market-page .market-sell-form button,
.market-page .market-table__row button,
.market-deal__go,
.cm-modal__actions button {
    border: 0;
    border-image: url(../images/button-plate.webp) 40 130 fill / 19px 34px / 0 stretch;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.market-page .market-sell {
    min-height: 40px;
    padding: 0 34px;
}

.market-page .market-card__actions form button,
.market-page .market-card__actions > button:first-child,
.market-page .market-card__actions a,
.market-page .market-sell-card__go {
    min-height: 36px;
    padding: 0 26px;
    font-size: 13px;
}

.market-page .market-sell:hover,
.market-page .market-card__actions form button:hover,
.market-page .market-card__actions > button:first-child:hover:not(:disabled),
.market-page .market-card__actions a:hover,
.market-page .market-sell-card__go:hover,
.market-page .market-sell-form button:hover,
.market-page .market-table__row button:hover,
.market-deal__go:hover:not(:disabled),
.cm-modal__actions button:hover:not(:disabled) {
    background: none;
    filter: brightness(1.18);
}

.market-toolbar {
    margin-bottom: 0;
}

.market-found span {
    color: var(--k-text);
    font-size: 14px;
    font-weight: 500;
}

.market-found strong {
    color: var(--k-gold2);
}

/* The shelf. */
.market-grid {
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: 14px;
}

.market-page .market-card {
    grid-template-rows: auto auto auto 1fr;
    gap: 0;
    min-height: 0;
    padding: 0;
    border: 6px solid transparent;
    border-radius: 0;
    background: var(--k-card) padding-box;
    transition: filter .15s ease;
}

/* The frame is drawn ABOVE the card's content: its lines sit 60px deep in the art, inside the
   6px border, so a frame painted as the card's own border went under the item well and the
   well's background ran over the frame's sides. */
.market-page .market-card::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: 2;
    border: 6px solid transparent;
    border-image: url(../images/card-frame-60.webp) 60 / 60px stretch;
    pointer-events: none;
}

.market-page .market-card:hover {
    filter: brightness(1.14);
}

/* The item in a dark well, lit by what it is: no more ball above the card. */
.market-page .market-card__orb {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 124px;
    transform: none;
    border: 0;
    border-bottom: 1px solid var(--mk-line-soft);
    border-radius: 0;
    background: radial-gradient(ellipse 58% 62% at 50% 54%, var(--mk-glow, rgba(168, 159, 145, .15)), transparent) no-repeat, #0c0a0d;
    box-shadow: none;
}

.market-card--excellent {
    --mk-glow: rgba(0, 225, 139, .2);
}

.market-card--ancient {
    --mk-glow: rgba(217, 169, 78, .3);
}

.market-card__orb img {
    max-width: 104px;
    max-height: 100px;
}

.market-card__talk {
    border-color: var(--mk-line);
    border-radius: 0;
}

.market-page .market-card h2 {
    width: 100%;
    margin-top: 12px;
    padding: 0 12px;
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 700;
    text-shadow: none;
}

.market-card__opts {
    align-self: start;
    width: 100%;
    height: 44px;
    margin-top: 8px;
    padding: 0 10px;
    gap: 4px;
}

.market-opt {
    min-height: 20px;
    padding: 0 6px;
    border-color: color-mix(in srgb, currentColor 42%, transparent);
    border-radius: 0;
    background: rgba(0, 0, 0, .3);
    font-weight: 600;
}

.market-card__foot {
    align-self: end;
    gap: 0;
    padding: 0 12px 8px;
}

.market-card__divider,
.market-page .market-card__divider {
    margin-top: 8px;
    background: var(--mk-line-soft);
}

.market-card__deal {
    min-height: 54px;
}

.market-card__expiry {
    color: var(--k-mute);
}

.market-card__amount em {
    border-radius: 0;
    background: rgba(217, 169, 78, .14);
    color: var(--k-gold2);
    font-weight: 600;
}

.market-card__amount strong,
.market-card__deal .market-price-jewel strong {
    color: var(--k-text);
    font-weight: 700;
}

/* The list view: a line per lot, picture first. */
.market-grid--list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-top: 0;
}

.market-page .market-grid--list .market-card {
    grid-template-rows: none;
    grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.2fr) auto;
    align-items: center;
    gap: 0 16px;
    padding: 0 12px 0 0;
}

.market-page .market-grid--list .market-card__orb {
    width: 110px;
    height: 84px;
    border-bottom: 0;
    border-right: 1px solid var(--mk-line-soft);
}

.market-page .market-grid--list .market-card__orb img {
    max-width: 72px;
    max-height: 68px;
}

.market-page .market-grid--list .market-card h2 {
    margin: 0;
    padding: 0;
    height: auto;
}

.market-page .market-grid--list .market-card__opts {
    align-self: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    height: auto;
}

.market-page .market-grid--list .market-card__foot {
    align-self: center;
    padding: 0;
    width: auto;
}

.market-page .market-grid--list .market-card__deal {
    gap: 18px;
}

/* Deal window. */
.market-deal {
    color: var(--k-text);
}

.market-deal::backdrop {
    background: rgba(5, 4, 6, .8);
    backdrop-filter: none;
}

.market-deal__close {
    border-radius: 0;
    background: none;
    color: var(--k-gold2);
}

.market-deal__close:hover {
    color: #fff;
}

.market-deal__card {
    border-right-color: var(--mk-line-soft);
    background: #0c0a0d;
}

.market-deal__ghost,
.market-deal__go {
    border-radius: 0;
    font-weight: 600;
}

.market-deal__ghost {
    border-color: var(--mk-line);
    color: var(--k-gold2);
}

.market-deal__ghost:hover {
    border-color: var(--k-gold);
}

.market-deal__go:disabled {
    filter: grayscale(1) brightness(.6);
    background: none;
    color: var(--k-mute);
}

.market-deal__field input,
.market-deal__field select,
.market-deal__jewel input,
.market-sell-form input,
.market-sell-form select,
.cm-modal select,
.cm-modal input[type="text"] {
    border-color: var(--mk-line);
    border-radius: 0;
    background: rgba(0, 0, 0, .34);
    color: var(--k-text);
    font-weight: 500;
}

/* Bank, my lots, history. */
.market-panel__head h2 {
    color: var(--k-gold2);
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 700;
    text-transform: none;
}

.market-panel__head span {
    color: var(--k-mute);
    font-weight: 500;
}

.market-mine-filter button {
    border-color: var(--mk-line);
    border-radius: 0;
    background: none;
    color: var(--k-mute);
}

.market-mine-filter button b {
    color: var(--k-gold2);
}

.market-mine-filter button.is-active {
    border-color: var(--k-gold);
    background: rgba(217, 169, 78, .16);
    color: var(--k-gold2);
}

.market-mine-status {
    border-radius: 0;
}

.market-sell-card {
    border-color: var(--mk-line-soft);
    border-radius: 0;
    background: var(--mk-well);
}

.market-sell-card.is-selected {
    border-color: var(--k-gold);
    box-shadow: none;
}

.market-sell-card__icon {
    border-radius: 0;
    background: #0c0a0d;
}

.market-table__row {
    border: 0;
    border-bottom: 1px solid var(--mk-line-soft);
    border-radius: 0;
    background: none;
}

.market-table__row strong {
    color: var(--k-text);
}

.market-table__row span {
    color: var(--k-mute);
    font-weight: 500;
}

/* Character market. */
.cm-filters {
    gap: 12px;
    padding: 12px 14px;
}

.market-page .cm-card.market-card {
    align-content: start;
    grid-template-rows: none;
    gap: 12px;
    padding: 16px 14px 8px;
    background: var(--k-card) padding-box;
}

.cm-card .market-card__foot {
    padding: 0;
}

.cm-card__stats span {
    border-radius: 0;
}

.cm-class-tabs {
    padding: 0;
}

.cm-class-tabs button {
    border-radius: 0;
    color: var(--k-mute);
    font-weight: 600;
}

.cm-class-tabs button:hover {
    color: var(--k-gold2);
}

.cm-class-tabs button.is-active {
    color: var(--k-gold2);
}

.cm-class-tabs button.is-active::after {
    left: 0;
    right: 0;
    bottom: -1px;
    border-radius: 0;
    background: var(--k-gold);
    box-shadow: none;
}

.cm-range__values input {
    border-radius: 0;
}

.cm-modal__card {
    padding-bottom: 12px;
    color: var(--k-text);
}

.cm-modal__actions button {
    border-radius: 0;
    min-height: 42px;
    padding: 0 34px;
}

.cm-pick__current,
.cm-pick__list,
.cm-price-table input[type="text"] {
    border-radius: 0;
}

@media (max-width: 760px) {
    .market-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .market-page .market-tab {
        flex: 0 0 auto;
        padding: 0 12px;
    }

    .market-filter-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .market-search,
    .market-class-filter {
        grid-column: 1 / -1;
    }

    .market-grid:not(.market-grid--list) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .market-page .market-card__orb {
        height: 100px;
    }

    .market-card__orb img {
        max-width: 84px;
        max-height: 80px;
    }

    .market-page .market-card h2 {
        font-size: 14px;
        padding: 0 8px;
    }

    .market-card__opts {
        padding: 0 6px;
    }

    .market-card__foot {
        padding: 0 8px 6px;
    }

    .market-card__deal {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding-top: 8px;
    }

    .market-card__deal .market-card__actions,
    .market-page .market-card__actions form,
    .market-page .market-card__actions form button,
    .market-page .market-card__actions > button:first-child {
        width: 100%;
    }

    .market-page .market-grid--list .market-card {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 6px 10px;
        padding: 0 8px 8px 0;
    }

    .market-page .market-grid--list .market-card__orb {
        grid-row: span 2;
        width: 84px;
    }

    .market-page .market-grid--list .market-card__foot {
        grid-column: 1 / -1;
        padding-left: 8px;
    }
}

@media (max-width: 420px) {
    .market-page .cm-card.market-card {
        grid-column: 1 / -1;
    }
}