/**
 * Auction house (system/pages/auction.php). Loaded by template.php only on PAGE auction; the page is full width
 * (sidebar below). Shared pieces: telara-components.css (tl-panel, tl-tag, tl-btn, tl-slot, tl-orn, tl-meta, tl-empty).
 * Quality colours follow the usual loot colours, lightened for the dark panels. Materials (goods): a bronze edge, the
 * count on the slot, an (i) <details> on the card (works without script) and the catalog view ?view=goods.
 */

.ah {
    --ah-uncommon: #86db74;
    --ah-rare: #7fb2ff;
    --ah-epic: #c990ff;
    --ah-legendary: #ffb547;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin: 6px 0 10px;
    color: var(--tl-parchment);
}

.ah-hero {
    padding: 26px 28px 24px;
    text-align: center;
}

.ah-kicker {
    margin: 0 0 4px;
    color: var(--tl-gold);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ah-title {
    margin: 0;
    color: var(--tl-title);
    font-family: var(--font-heading);
    font-size: 2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ah-lead {
    max-width: 760px;
    margin: 14px auto 0;
    color: var(--tl-parchment);
    line-height: 1.6;
}

.ah-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.ah-preview {
    max-width: 760px;
    margin: 16px auto 0;
    color: var(--tl-warning);
    font-size: 0.875rem;
}

.ah-soon,
.ah-gone {
    text-align: center;
}

/* Messages */
.ah-alert {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--tl-line);
    border-radius: 3px;
    line-height: 1.5;
}

.ah-alert--ok {
    color: var(--tl-ok);
    border-color: rgba(123, 227, 138, 0.45);
    background: var(--tl-ok-deep);
}

.ah-alert--bad {
    color: var(--tl-danger);
    border-color: rgba(240, 111, 111, 0.45);
    background: var(--tl-danger-deep);
}

/* Tabs */
.ah-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--tl-line);
}

.ah-tabs__tab,
a.ah-tabs__tab {
    padding: 10px 16px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    color: var(--tl-muted);
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

a.ah-tabs__tab:hover,
a.ah-tabs__tab:focus {
    color: var(--tl-gold-pale);
    text-decoration: none;
}

.ah-tabs__tab.is-active {
    color: var(--tl-title);
    border-color: var(--tl-line);
    background: var(--tl-raised);
}

/* Filters */
.ah-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 14px;
    align-items: end;
    padding: 16px 18px;
}

.ah-field {
    display: grid;
    gap: 5px;
    margin: 0;
    font-weight: 400;
}

.ah-field--wide {
    grid-column: span 2;
}

.ah-field > span {
    color: var(--tl-muted);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ah-field select,
.ah-field input {
    width: 100%;
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid var(--tl-bronze-deep);
    border-radius: 3px;
    color: var(--tl-parchment);
    background: var(--tl-surface);
    font-size: 0.9375rem;
}

.ah-field select option,
.ah-field select optgroup {
    color: var(--tl-parchment);
    background: var(--tl-surface);
}

.ah-field select optgroup {
    color: var(--tl-gold);
    font-style: normal;
}

.ah-field select:focus,
.ah-field input:focus {
    border-color: var(--tl-gold);
    outline: none;
}

.ah-filters__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Sections and grid */
.ah-sec__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 10px;
}

.ah-sec__title {
    margin: 0 0 10px;
    color: var(--tl-title);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ah-sec__head .ah-sec__title {
    margin: 0;
}

.ah-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

/* Offer card: the link fills the card; a material's (i) <details> sits next to it (no control inside a link) */
.ah-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-left: 3px solid var(--tl-bronze-deep);
}

.ah-card.ah-card--goods { border-left-color: var(--tl-bronze); }

.ah-card.ah-q--uncommon { border-left-color: var(--ah-uncommon); }
.ah-card.ah-q--rare { border-left-color: var(--ah-rare); }
.ah-card.ah-q--epic { border-left-color: var(--ah-epic); }
.ah-card.ah-q--legendary { border-left-color: var(--ah-legendary); }

.ah-card__link,
a.ah-card__link {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    color: var(--tl-parchment);
    text-decoration: none;
}

a.ah-card__link:hover,
a.ah-card__link:focus {
    color: var(--tl-parchment);
    text-decoration: none;
    background: rgba(255, 230, 155, 0.03);
}

.ah-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ah-card__slot {
    position: relative;
    flex: 0 0 auto;
}

/* pieces of a lot, in the corner of the slot like a stack in game */
.ah-count {
    position: absolute;
    right: 3px;
    bottom: 1px;
    color: var(--tl-parchment);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    pointer-events: none;
}

.ah-card--info .ah-card__head {
    padding-right: 30px; /* room for the (i) */
}

.ah-card__slot img {
    image-rendering: pixelated;
}

.ah-card__titles {
    min-width: 0;
}

.ah-card__name {
    margin: 0;
    color: var(--tl-title);
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

.ah-q--uncommon .ah-card__name,
.ah-q--uncommon .ah-card__quality { color: var(--ah-uncommon); }
.ah-q--rare .ah-card__name,
.ah-q--rare .ah-card__quality { color: var(--ah-rare); }
.ah-q--epic .ah-card__name,
.ah-q--epic .ah-card__quality { color: var(--ah-epic); }
.ah-q--legendary .ah-card__name,
.ah-q--legendary .ah-card__quality { color: var(--ah-legendary); }

.ah-card__quality {
    margin: 2px 0 0;
    color: var(--tl-muted);
    font-size: 0.8125rem;
}

.ah-bonuses {
    display: grid;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.ah-bonuses li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    border-bottom: 1px dotted rgba(139, 111, 71, 0.35);
}

.ah-bonuses span {
    color: var(--tl-muted);
}

.ah-bonuses strong {
    color: var(--tl-ok);
    font-weight: 700;
    white-space: nowrap;
}

.ah-bonuses--big {
    font-size: 1rem;
}

.ah-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.ah-price {
    display: grid;
    gap: 1px;
}

.ah-price__label {
    color: var(--tl-muted); /* --tl-faint was 4.1:1 on the offer card, below WCAG 4.5:1 */
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ah-price__value {
    color: var(--tl-gold-pale);
    font-size: 1.0625rem;
}

.ah-price__extra {
    color: var(--tl-muted);
    font-size: 0.8125rem;
}

.ah-price__unit {
    color: var(--tl-gold);
}

/* (i) of a material: the toggle sits in the card's top right corner, the text opens under the card's link */
.ah-info {
    margin: 0;
}

.ah-info__toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--tl-bronze);
    border-radius: 50%;
    color: var(--tl-gold);
    background: var(--tl-surface);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.9375rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    list-style: none;
    cursor: pointer;
}

.ah-info__toggle::-webkit-details-marker {
    display: none;
}

.ah-info__toggle::marker {
    content: '';
}

.ah-info__toggle:hover,
.ah-info__toggle:focus-visible {
    border-color: var(--tl-gold);
    color: var(--tl-gold-pale);
}

.ah-info__toggle:focus-visible {
    outline: 2px solid var(--tl-gold);
    outline-offset: 2px;
}

.ah-info[open] > .ah-info__toggle {
    border-color: var(--tl-gold-pale);
    color: var(--tl-ink);
    background: var(--tl-gold-button);
}

.ah-info__body {
    padding: 12px 16px 14px;
    border-top: 1px dotted rgba(139, 111, 71, 0.45);
}

/* What it is / what it is for / category text (card, offer detail, catalog rows) */
.ah-about {
    display: grid;
    gap: 8px;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.ah-about dt {
    color: var(--tl-gold);
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ah-about dd {
    margin: 2px 0 0;
    color: var(--tl-parchment);
}

.ah-about--detail {
    font-size: 0.9375rem;
}

.ah-about--row {
    gap: 4px;
    font-size: 0.8125rem;
}

.ah-about--row div {
    display: block;
}

.ah-about--row dt {
    display: inline;
    margin-right: 6px;
    font-size: 0.625rem;
}

.ah-about--row dd {
    display: inline;
    margin: 0;
    color: var(--tl-muted);
}

.ah-card__meta {
    display: grid;
    justify-items: end;
    gap: 4px;
    margin-left: auto; /* stays on the right when the price wraps above it */
}

.ah-card__time {
    color: var(--tl-muted);
    font-size: 0.8125rem;
}

.ah-card__mine {
    margin: 0;
    color: var(--tl-gold);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Detail */
.ah-detail {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 18px;
    align-items: start;
}

.ah-detail__item,
.ah-detail__actions {
    display: grid;
    gap: 14px;
    padding: 20px 22px;
}

.ah-detail__item {
    border-left: 3px solid var(--tl-bronze-deep);
}

.ah-detail__item.ah-q--uncommon { border-left-color: var(--ah-uncommon); }
.ah-detail__item.ah-q--rare { border-left-color: var(--ah-rare); }
.ah-detail__item.ah-q--epic { border-left-color: var(--ah-epic); }
.ah-detail__item.ah-q--legendary { border-left-color: var(--ah-legendary); }

.ah-detail__name {
    font-size: 1.375rem;
}

.ah-facts {
    display: grid;
    gap: 6px;
    margin: 0;
}

.ah-facts div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
}

.ah-facts dt {
    color: var(--tl-muted);
    font-weight: 400;
}

.ah-facts dd {
    margin: 0;
    color: var(--tl-parchment);
    font-weight: 700;
    text-align: right;
}

.ah-note {
    margin: 0;
    color: var(--tl-faint);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.ah-note a,
.ah-detail__more a,
.ah-goods-item__meta a {
    color: var(--tl-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ah-note a:hover,
.ah-note a:focus-visible,
.ah-detail__more a:hover,
.ah-detail__more a:focus-visible,
.ah-goods-item__meta a:hover,
.ah-goods-item__meta a:focus-visible {
    color: var(--tl-gold-pale);
}

/* the deposit a cancel keeps */
.ah-warn {
    margin: 0;
    padding: 8px 12px;
    border: 1px solid rgba(242, 197, 127, 0.4);
    border-radius: 3px;
    color: var(--tl-warning);
    background: rgba(10, 9, 7, 0.55);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ah-detail__about {
    display: grid;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px dotted rgba(139, 111, 71, 0.45);
}

.ah-detail__subtitle {
    margin: 0;
    color: var(--tl-title);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ah-detail__more {
    margin: 0;
    font-size: 0.875rem;
}

.ah-detail__item--goods {
    border-left-color: var(--tl-bronze);
}

.ah-form {
    display: grid;
    gap: 14px;
}

.ah-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--tl-parchment);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.45;
}

.ah-check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
}

.ah-form__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ah-form__buttons .tl-btn {
    white-space: normal;
    text-align: center;
}

.ah-form .tl-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Best drops of the week */
.ah-drops {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ah-drop {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 220px);
    align-items: center;
    gap: 12px 14px;
    padding: 12px 16px;
    border-left: 3px solid var(--tl-bronze-deep);
}

.ah-drop.ah-q--uncommon { border-left-color: var(--ah-uncommon); }
.ah-drop.ah-q--rare { border-left-color: var(--ah-rare); }
.ah-drop.ah-q--epic { border-left-color: var(--ah-epic); }
.ah-drop.ah-q--legendary { border-left-color: var(--ah-legendary); }

.ah-drop__rank {
    min-width: 28px;
    color: var(--tl-gold);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
}

.ah-drop__body {
    min-width: 0;
}

.ah-drop__item {
    margin: 0;
}

.ah-drop__bonuses {
    margin: 4px 0 0;
    color: var(--tl-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ah-drop__bonuses strong {
    color: var(--tl-ok);
}

.ah-drop__who {
    display: grid;
    gap: 2px;
    justify-items: end;
    text-align: right;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.ah-drop__who strong {
    color: var(--tl-title);
}

.ah-drop__who span {
    color: var(--tl-muted);
}

.ah-drop__when {
    font-size: 0.8125rem;
}

/* Materials catalog (?view=goods): one collapsible panel per category, compact rows (a category can hold 100+) */
.ah-goods {
    display: grid;
    gap: 14px;
}

.ah-goods .ah-sec__head {
    margin-bottom: 0;
}

.ah-goods__intro {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
}

.ah-goods__lead {
    max-width: 900px;
    margin: 0;
    color: var(--tl-parchment);
    line-height: 1.6;
}

.ah-goods__toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

a.ah-goods__chip {
    color: var(--tl-muted);
    text-decoration: none;
    white-space: normal;
}

a.ah-goods__chip:hover,
a.ah-goods__chip:focus-visible {
    border-color: var(--tl-gold);
    color: var(--tl-gold-pale);
    text-decoration: none;
}

a.ah-goods__chip.is-active {
    border-color: var(--tl-gold);
    color: var(--tl-title);
}

.ah-goods-cat {
    scroll-margin-top: 96px; /* the sticky menu */
}

.ah-goods-cat__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 14px;
    padding: 14px 18px 14px 40px;
    list-style: none;
    cursor: pointer;
    position: relative;
}

.ah-goods-cat__summary::-webkit-details-marker {
    display: none;
}

.ah-goods-cat__summary::marker {
    content: '';
}

.ah-goods-cat__summary::before {
    content: '';
    position: absolute;
    top: 21px;
    left: 18px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--tl-gold);
    border-bottom: 2px solid var(--tl-gold);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.ah-goods-cat[open] > .ah-goods-cat__summary::before {
    transform: rotate(45deg);
}

.ah-goods-cat__summary:hover .ah-goods-cat__name,
.ah-goods-cat__summary:focus-visible .ah-goods-cat__name {
    color: var(--tl-gold-pale);
}

.ah-goods-cat__summary:focus-visible {
    outline: 2px solid var(--tl-gold);
    outline-offset: -2px;
}

.ah-goods-cat__name {
    margin: 0;
    color: var(--tl-title);
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ah-goods-cat__count {
    color: var(--tl-muted);
    font-size: 0.8125rem;
}

.ah-goods-cat__body {
    display: grid;
    gap: 12px;
    padding: 0 18px 18px;
}

.ah-goods-cat__info {
    max-width: 900px;
    margin: 0;
    color: var(--tl-parchment);
    line-height: 1.6;
}

.ah-goods-cat__actions {
    margin: 0;
}

.ah-goods-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 8px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ah-goods-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--tl-line);
    border-radius: 3px;
    background: rgba(10, 9, 7, 0.35);
}

.ah-goods-item__body {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.ah-goods-item__name {
    margin: 0;
    color: var(--tl-title);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

.ah-goods-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin: 0;
    color: var(--tl-muted);
    font-size: 0.8125rem;
}

/* Pages */
.ah-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}

.ah-pages__page,
a.ah-pages__page {
    min-width: 38px;
    padding: 6px 10px;
    border: 1px solid var(--tl-bronze-deep);
    border-radius: 3px;
    color: var(--tl-parchment);
    text-align: center;
    text-decoration: none;
}

a.ah-pages__page:hover,
a.ah-pages__page:focus {
    border-color: var(--tl-gold);
    color: var(--tl-gold-pale);
    text-decoration: none;
}

.ah-pages__page.is-active {
    border-color: var(--tl-gold);
    color: var(--tl-ink);
    background: var(--tl-gold-button);
}

/* Rules */
.ah-rules {
    padding: 18px 22px;
}

.ah-rules__list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
    line-height: 1.55;
}

.ah-rules__more {
    margin: 12px 0 0;
    color: var(--tl-muted);
}

.ah-rules__more a {
    color: var(--tl-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ah-rules__more a:hover,
.ah-rules__more a:focus-visible {
    color: var(--tl-gold-pale);
}

@media (max-width: 860px) {
    .ah-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .ah-hero {
        padding: 20px 16px;
    }

    .ah-title {
        font-size: 1.5rem;
    }

    .ah-field--wide {
        grid-column: auto;
    }

    .ah-filters {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .ah-detail__item,
    .ah-detail__actions {
        padding: 16px;
    }

    .ah-drop {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .ah-drop__who {
        grid-column: 1 / -1;
        justify-items: start;
        text-align: left;
    }

    .ah-goods-cat__summary {
        padding: 12px 14px 12px 36px;
    }

    .ah-goods-cat__summary::before {
        top: 19px;
        left: 15px;
    }

    .ah-goods-cat__body {
        padding: 0 12px 14px;
    }

    .ah-goods-item {
        padding: 8px 10px;
    }
}