/* Challenges wiki category (App\Libraries\ChallengeGuide). Hard corners, site palette. */

/* Jump list: rarity-grouped links to every card / section on the page. */
.wka-body .wkc-jump {
    display: grid; gap: 0.45rem;
    margin: 0 0 1.4rem; padding: 0.75rem 0.85rem;
    background: var(--card); border: 1px solid var(--line-soft);
}
.wka-body .wkc-jump-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; }
.wka-body .wkc-jump-group > span {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--rar, var(--ink-faint)); min-width: 6.5rem;
}
.wka-body .wkc-jump a { font-size: 0.8rem; }

.wka-body .is-common    { --rar: #8fa3b8; }
.wka-body .is-rare      { --rar: #4cb1ff; }
.wka-body .is-epic      { --rar: #b47dff; }
.wka-body .is-legendary { --rar: #ff9900; }
.wka-body .is-mythical  { --rar: #ff5f8f; }

/* One card. */
.wka-body .wkc-card {
    margin: 0 0 1.6rem; padding: 0.9rem 1rem 0.4rem;
    background: var(--card); border: 1px solid var(--line-soft);
    border-left: 3px solid var(--rar, var(--accent));
    scroll-margin-top: 4.5rem;
}
.wka-body .wkc-card h2 { margin-top: 0; border-bottom: 0; padding-bottom: 0; }
.wka-body .wkc-card h3 { margin: 0.9rem 0 0.35rem; }
.wka-body .wkc-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.6rem; }
.wka-body .wkc-tag {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.18rem 0.5rem; border: 1px solid var(--line); color: var(--ink-dim);
}
.wka-body .wkc-tag.is-rarity { color: var(--rar); border-color: var(--rar); }
.wka-body .wkc-desc { color: var(--ink-dim); }

.wka-body ul.wkc-reqs { list-style: none; margin-left: 0; }
.wka-body ul.wkc-reqs li { display: flex; gap: 0.5rem; align-items: baseline; }
.wka-body ul.wkc-reqs i { color: var(--rar, var(--accent)); width: 1rem; flex: 0 0 auto; }
.wka-body ul.wkc-reqs b { color: var(--ink); font-weight: 700; }

.wka-body .wkc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 720px) { .wka-body .wkc-cols { grid-template-columns: 1fr; } }
.wka-body .wkc-example { color: var(--ink-dim); font-size: 0.85rem; }

/* Trailer tables scroll sideways on a narrow screen instead of pushing the page. */
.wka-body .wkc-table { overflow-x: auto; margin: 0 0 1.2rem; }
.wka-body .wkc-table table { width: 100%; margin: 0; }
.wka-body .wkc-table th[scope="row"] { white-space: nowrap; width: 9rem; vertical-align: top; }
.wka-body .wkc-applies { font-size: 0.8rem; color: var(--ink-faint); margin-bottom: 0.4rem; }
.wka-body [id] { scroll-margin-top: 4.5rem; }

/* Below desktop: the trailer tables keep their own scroll wrapper (article.css turns
   bare article tables into scroll blocks), tags and rarity labels meet the 11px floor,
   jump links get a touch-sized row, and anchors clear the sticky topbar. */
@media (max-width: 1199.98px) {
    .wka-body .wkc-table table { display: table; overflow: visible; }
    .wka-body .wkc-tag,
    .wka-body .wkc-jump-group > span { font-size: max(11px, 0.66rem); }
    .wka-body .wkc-card,
    .wka-body [id] { scroll-margin-top: calc(var(--vt-sticky-top, 0px) + 16px); }
}
@media (any-pointer: coarse) {
    .wka-body .wkc-jump-group { gap: 0 0.9rem; }
    .wka-body .wkc-jump a { display: inline-flex; align-items: center; min-height: 36px; }
    .wka-body .wkc-jump-group > span { align-self: center; }
}