/* Public support matrix. Keep statuses explicit per specialization. */
.class-support { padding-block: 70px 0; }
.class-support .section-heading { margin-bottom: 30px; }
.expansion-support { padding: 28px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.expansion-heading { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.expansion-art { display: grid; grid-template-columns: 32px minmax(0, 180px) 32px; align-items: center; gap: 8px; }
.expansion-logo { display: block; width: 100%; height: 144px; object-fit: contain; }
.expansion-arrow { display: grid; place-items: center; width: 32px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 5px; color: var(--gold); background: transparent; cursor: pointer; }
.expansion-arrow:hover { border-color: var(--gold); background: var(--panel, var(--bg)); }
.expansion-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.expansion-heading .eyebrow { margin-bottom: 4px; }
.expansion-heading h3 { margin: 0; font-size: 28px; line-height: 1.2; }
.expansion-heading p:not(.eyebrow) { margin: 12px 0 0; color: var(--muted); max-width: 660px; font-size: 15px; }
.class-detail { padding-block: 24px; border-bottom: 1px solid var(--line); }
.supported-class-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.supported-class-heading h4 { margin: 0; font-size: 22px; font-weight: 600; }
.class-emblem { display: block; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; --emblem-image: url('/assets/support/class-emblems.webp'); background-size: 418% 418%; }
.support-specializations { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.support-specializations > li { padding: 18px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; background: radial-gradient(ellipse at 0 0, var(--spec-glow, #caa44b29), transparent 85%); }
.support-spec-retribution { --spec-glow: #a04a3429; }
.support-spec-protection { --spec-glow: #6389ac29; }
.support-spec-holy { --spec-glow: #caa44b29; }
.spec-emblem { display: block; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; --emblem-image: url('/assets/support/paladin-specs.webp'); background-size: 300% 100%; }
.spec-emblem-retribution { background-position: 0% 50%; }
.spec-emblem-protection { background-position: 50% 50%; }
.spec-emblem-holy { background-position: 100% 50%; }
.support-spec-label { min-width: 0; }
.support-spec-label .support-status { margin-top: 5px; }
.support-spec-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.support-spec-heading h5 { margin: 0; font-size: 17px; font-weight: 600; }
.support-specializations p { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.support-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.support-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.support-ready { color: #a9cf8e; }
.support-progress { color: var(--gold); }
.support-soon { color: var(--muted); }
[data-theme="light"] .support-ready { color: #42662a; }
.support-upcoming-title { font-size: 16px; font-weight: 500; margin: 24px 0 16px; color: var(--muted); }
.support-class-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.support-class { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; min-width: 0; }
.support-class .class-emblem { width: 52px; height: 52px; }
.support-class h4 { margin: 0 0 3px; font-size: 14px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.support-note { margin: 20px 0 0; color: var(--muted); font-size: 13px; }
.spec-cooperate { padding: 24px 16px; border-bottom: 1px solid var(--line); }
.spec-cooperate h3 { margin: 0 0 10px; color: var(--gold); font-size: 24px; }
.spec-cooperate p { max-width: 510px; margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.spec-feedback-link { padding: 0; border: 0; background: transparent; color: var(--gold); text-align: left; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
#spec-feedback-dialog { width: min(440px, calc(100vw - 32px)); }
#spec-feedback-dialog .ui-window-body > p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
#spec-feedback-form label { display: block; margin-bottom: 6px; }
#spec-feedback-message { display: block; width: 100%; height: 112px; min-height: 90px; max-height: 220px; resize: vertical; }
#spec-feedback-counter { margin: 4px 0 0; text-align: right; color: var(--muted); font-size: 12px; }
#spec-feedback-dialog #spec-feedback-error { color: var(--gold); }
#spec-feedback-error:empty, #spec-feedback-result:empty { display: none; }
@media (max-width: 600px) {
  .spec-cooperate { padding: 24px 0; }
  .spec-cooperate h3 { font-size: 22px; }
}
@media (max-width: 1050px) { .support-class-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .expansion-support { padding: 20px; }
  .expansion-heading { grid-template-columns: 192px minmax(0, 1fr); gap: 20px; }
  .expansion-art { grid-template-columns: 32px minmax(0, 112px) 32px; }
  .expansion-logo { height: 112px; }
  .support-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-specializations { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 420px) {
  .expansion-heading { grid-template-columns: 1fr; gap: 12px; }
  .expansion-art { width: 192px; }
  .expansion-support { padding: 16px; }
  .support-class-grid { grid-template-columns: 1fr; }
}
.class-emblem-paladin { background-position: 0.681342% 0.000000%; }
.class-emblem-warrior { background-position: 33.542977% 0.000000%; }
.class-emblem-hunter { background-position: 66.404612% 0.000000%; }
.class-emblem-rogue { background-position: 99.266247% 0.000000%; }
.class-emblem-priest { background-position: 0.681342% 31.446541%; }
.class-emblem-death-knight { background-position: 33.542977% 31.446541%; }
.class-emblem-shaman { background-position: 66.404612% 31.446541%; }
.class-emblem-mage { background-position: 99.266247% 31.446541%; }
.class-emblem-warlock { background-position: 0.681342% 62.893082%; }
.class-emblem-monk { background-position: 33.542977% 62.893082%; }
.class-emblem-druid { background-position: 66.404612% 62.893082%; }
.class-emblem-demon-hunter { background-position: 99.266247% 62.893082%; }
.class-emblem-evoker { background-position: 0.681342% 94.339623%; }

/* All panels size the same grid track; only the selected one is visible.
   This adapts to translations, wrapping and the fourth druid specialization. */
.class-details { display: grid; }
.class-details > .class-detail { grid-area: 1 / 1; min-width: 0; }
.class-details > .class-detail[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.support-class-grid > li { min-width: 0; }
/* WoW class palette: https://warcraft.wiki.gg/wiki/Class_colors */
.support-class[data-class="warrior"] { --class-color: #c69b6d; }
.support-class[data-class="paladin"] { --class-color: #f48cba; }
.support-class[data-class="hunter"] { --class-color: #aad372; }
.support-class[data-class="rogue"] { --class-color: #fff468; }
.support-class[data-class="priest"] { --class-color: #ffffff; }
.support-class[data-class="death-knight"] { --class-color: #c41e3a; }
.support-class[data-class="shaman"] { --class-color: #0070dd; }
.support-class[data-class="mage"] { --class-color: #3fc7eb; }
.support-class[data-class="warlock"] { --class-color: #8788ee; }
.support-class[data-class="monk"] { --class-color: #00ff98; }
.support-class[data-class="druid"] { --class-color: #ff7c0a; }
.support-class[data-class="demon-hunter"] { --class-color: #a330c9; }
.support-class[data-class="evoker"] { --class-color: #33937f; }
button.support-class { width: 100%; height: 100%; font: inherit; color: inherit; text-align: left; background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--class-color) 16%, transparent), transparent 85%); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
button.support-class:hover { background-color: color-mix(in srgb, var(--class-color) 6%, transparent); border-color: color-mix(in srgb, var(--class-color) 45%, var(--line)); }
button.support-class[aria-pressed="true"] { border-color: var(--gold); background-color: color-mix(in srgb, var(--class-color) 6%, transparent); }
button.support-class:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Atlas selection must be external for the server CSP. */
.support-art-0 { --emblem-image:url(/assets/support/warrior-specs.webp);background-size:300% 100%;background-position:0% 50% }
.support-art-1 { --emblem-image:url(/assets/support/warrior-specs.webp);background-size:300% 100%;background-position:50% 50% }
.support-art-2 { --emblem-image:url(/assets/support/warrior-specs.webp);background-size:300% 100%;background-position:100% 50% }
.support-art-3 { --emblem-image:url(/assets/support/hunter-specs.webp);background-size:300% 100%;background-position:0% 50% }
.support-art-4 { --emblem-image:url(/assets/support/hunter-specs.webp);background-size:300% 100%;background-position:50% 50% }
.support-art-5 { --emblem-image:url(/assets/support/hunter-specs.webp);background-size:300% 100%;background-position:100% 50% }
.support-art-6 { --emblem-image:url(/assets/support/rogue-specs.webp);background-size:300% 100%;background-position:0% 50% }
.support-art-7 { --emblem-image:url(/assets/support/rogue-specs.webp);background-size:300% 100%;background-position:50% 50% }
.support-art-8 { --emblem-image:url(/assets/support/rogue-specs.webp);background-size:300% 100%;background-position:100% 50% }
.support-art-9 { --emblem-image:url(/assets/support/priest-specs.webp);background-size:300% 100%;background-position:0% 50% }
.support-art-10 { --emblem-image:url(/assets/support/priest-specs.webp);background-size:300% 100%;background-position:50% 50% }
.support-art-11 { --emblem-image:url(/assets/support/priest-specs.webp);background-size:300% 100%;background-position:100% 50% }
.support-art-12 { --emblem-image:url(/assets/support/death-knight-specs.webp);background-size:300% 100%;background-position:0% 50% }
.support-art-13 { --emblem-image:url(/assets/support/death-knight-specs.webp);background-size:300% 100%;background-position:50% 50% }
.support-art-14 { --emblem-image:url(/assets/support/death-knight-specs.webp);background-size:300% 100%;background-position:100% 50% }
.support-art-15 { --emblem-image:url(/assets/support/shaman-specs.webp);background-size:300% 100%;background-position:0% 50% }
.support-art-16 { --emblem-image:url(/assets/support/shaman-specs.webp);background-size:300% 100%;background-position:50% 50% }
.support-art-17 { --emblem-image:url(/assets/support/shaman-specs.webp);background-size:300% 100%;background-position:100% 50% }
.support-art-18 { --emblem-image:url(/assets/support/mage-specs.webp);background-size:300% 100%;background-position:0% 50% }
.support-art-19 { --emblem-image:url(/assets/support/mage-specs.webp);background-size:300% 100%;background-position:50% 50% }
.support-art-20 { --emblem-image:url(/assets/support/mage-specs.webp);background-size:300% 100%;background-position:100% 50% }
.support-art-21 { --emblem-image:url(/assets/support/warlock-specs.webp);background-size:300% 100%;background-position:0% 50% }
.support-art-22 { --emblem-image:url(/assets/support/warlock-specs.webp);background-size:300% 100%;background-position:50% 50% }
.support-art-23 { --emblem-image:url(/assets/support/warlock-specs.webp);background-size:300% 100%;background-position:100% 50% }
.support-art-24 { --emblem-image:url(/assets/support/monk-specs.webp);background-size:300% 100%;background-position:0% 50% }
.support-art-25 { --emblem-image:url(/assets/support/monk-specs.webp);background-size:300% 100%;background-position:50% 50% }
.support-art-26 { --emblem-image:url(/assets/support/monk-specs.webp);background-size:300% 100%;background-position:100% 50% }
.support-art-27 { --emblem-image:url(/assets/support/druid-specs.webp);background-size:200% 200%;background-position:0% 0% }
.support-art-28 { --emblem-image:url(/assets/support/druid-specs.webp);background-size:200% 200%;background-position:100% 0% }
.support-art-29 { --emblem-image:url(/assets/support/druid-specs.webp);background-size:200% 200%;background-position:0% 100% }
.support-art-30 { --emblem-image:url(/assets/support/druid-specs.webp);background-size:200% 200%;background-position:100% 100% }
.support-art-31 { --emblem-image:url(/assets/support/demon-hunter-specs.webp);background-size:300% 100%;background-position:0% 50% }
.support-art-32 { --emblem-image:url(/assets/support/demon-hunter-specs.webp);background-size:300% 100%;background-position:50% 50% }
.support-art-33 { --emblem-image:url(/assets/support/demon-hunter-specs.webp);background-size:300% 100%;background-position:100% 50% }
.support-art-34 { --emblem-image:url(/assets/support/evoker-specs.webp);background-size:300% 100%;background-position:0% 50% }
.support-art-35 { --emblem-image:url(/assets/support/evoker-specs.webp);background-size:300% 100%;background-position:50% 50% }
.support-art-36 { --emblem-image:url(/assets/support/evoker-specs.webp);background-size:300% 100%;background-position:100% 50% }

/* Specialization accents follow the emblem palette. */
[data-support-panel="warrior"] .support-spec:nth-child(1) { --spec-glow: #a04a3429; }
[data-support-panel="warrior"] .support-spec:nth-child(2) { --spec-glow: #b83c3929; }
[data-support-panel="warrior"] .support-spec:nth-child(3) { --spec-glow: #6389ac29; }
[data-support-panel="hunter"] .support-spec:nth-child(1) { --spec-glow: #72964129; }
[data-support-panel="hunter"] .support-spec:nth-child(2) { --spec-glow: #4c9b8329; }
[data-support-panel="hunter"] .support-spec:nth-child(3) { --spec-glow: #bd864429; }
[data-support-panel="rogue"] .support-spec:nth-child(1) { --spec-glow: #7b9e3629; }
[data-support-panel="rogue"] .support-spec:nth-child(2) { --spec-glow: #ab824829; }
[data-support-panel="rogue"] .support-spec:nth-child(3) { --spec-glow: #8661b029; }
[data-support-panel="priest"] .support-spec:nth-child(1) { --spec-glow: #bba36a29; }
[data-support-panel="priest"] .support-spec:nth-child(2) { --spec-glow: #d1b76b29; }
[data-support-panel="priest"] .support-spec:nth-child(3) { --spec-glow: #9560c129; }
[data-support-panel="death-knight"] .support-spec:nth-child(1) { --spec-glow: #b3445029; }
[data-support-panel="death-knight"] .support-spec:nth-child(2) { --spec-glow: #67a4c529; }
[data-support-panel="death-knight"] .support-spec:nth-child(3) { --spec-glow: #799a4829; }
[data-support-panel="shaman"] .support-spec:nth-child(1) { --spec-glow: #598fbe29; }
[data-support-panel="shaman"] .support-spec:nth-child(2) { --spec-glow: #8972bc29; }
[data-support-panel="shaman"] .support-spec:nth-child(3) { --spec-glow: #4da89b29; }
[data-support-panel="mage"] .support-spec:nth-child(1) { --spec-glow: #a173cb29; }
[data-support-panel="mage"] .support-spec:nth-child(2) { --spec-glow: #c6783c29; }
[data-support-panel="mage"] .support-spec:nth-child(3) { --spec-glow: #6baecb29; }
[data-support-panel="warlock"] .support-spec:nth-child(1) { --spec-glow: #729d5329; }
[data-support-panel="warlock"] .support-spec:nth-child(2) { --spec-glow: #9261b329; }
[data-support-panel="warlock"] .support-spec:nth-child(3) { --spec-glow: #bf794029; }
[data-support-panel="monk"] .support-spec:nth-child(1) { --spec-glow: #b3925029; }
[data-support-panel="monk"] .support-spec:nth-child(2) { --spec-glow: #56a79229; }
[data-support-panel="monk"] .support-spec:nth-child(3) { --spec-glow: #769fc029; }
[data-support-panel="druid"] .support-spec:nth-child(1) { --spec-glow: #8c82c129; }
[data-support-panel="druid"] .support-spec:nth-child(2) { --spec-glow: #b68f4829; }
[data-support-panel="druid"] .support-spec:nth-child(3) { --spec-glow: #9c744829; }
[data-support-panel="druid"] .support-spec:nth-child(4) { --spec-glow: #72a05a29; }
[data-support-panel="demon-hunter"] .support-spec:nth-child(1) { --spec-glow: #729b4b29; }
[data-support-panel="demon-hunter"] .support-spec:nth-child(2) { --spec-glow: #b5753e29; }
[data-support-panel="demon-hunter"] .support-spec:nth-child(3) { --spec-glow: #9460c129; }
[data-support-panel="evoker"] .support-spec:nth-child(1) { --spec-glow: #ba614b29; }
[data-support-panel="evoker"] .support-spec:nth-child(2) { --spec-glow: #69a16e29; }
[data-support-panel="evoker"] .support-spec:nth-child(3) { --spec-glow: #bd9c5029; }

.support-class-grid > li[hidden] { display: none; }