/* Article presentation only: shared game renderers keep their data and handlers. */
.help-ui .help-article-body { line-height: 1.65; }
.help-ui .help-article-body [align='justify'] { text-align: left; }
.help-ui .help-article-body > div { max-width: 100%; }
.help-ui .help-article-body ul:not(.ulNavLinkGroup):not(.ulSetDisplay),
.help-ui .help-article-body ol { margin: 12px 0 20px; padding-left: 24px; }
.help-ui .help-article-body li { list-style: disc; margin: 6px 0; }
.help-ui .help-article-body ol > li { list-style: decimal; }
.help-ui .help-article-body li::marker { color: var(--help-accent); }
.help-ui .help-article-body .caption { color: var(--help-heading); }
.help-ui .help-article-body .help-section-heading { display: block; margin: 28px 0 12px; text-align: left; font: 400 24px/1.3 var(--help-font-heading); color: var(--help-heading); }
.help-ui .help-article-body .help-section-heading b { font-weight: inherit; }
.help-ui .help-article-body .help-legacy-heading { color: var(--help-heading) !important; }
.help-ui .help-article-body .rage-list-start { margin-top: 24px; }
.help-ui .help-article-body img { object-fit: contain; }
.help-ui .help-image-missing { display: inline-flex; align-items: center; justify-content: center; width: 64px; min-height: 64px; padding: 4px; border: 1px dashed var(--help-border); color: var(--help-muted); font: 11px/1.4 var(--help-font-body); text-align: center; white-space: normal; }

.help-ui .help-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; margin: 16px 0 24px; border: 1px solid var(--help-divider); border-radius: 4px; scrollbar-color: var(--help-border) var(--help-surface); }
.help-ui .help-table-scroll:focus-visible { outline-offset: 2px; }
.help-ui .help-data-table { width: 100%; max-width: none; margin: 0; border: 0; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.help-ui .help-data-table > :is(thead,tbody,tfoot) > tr > :is(td,th) { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--help-divider); color: var(--help-text); vertical-align: top; text-align: left; }
.help-ui .help-data-table > :is(thead,tbody) > tr:nth-child(even) { background: var(--help-hover); }
.help-ui .help-data-table > :is(thead,tbody) > tr > th,
.help-ui .help-data-table > :is(thead,tbody) > tr.header > td { color: var(--help-heading); background: var(--help-selected); font-weight: 600; }
.help-ui .help-data-table li { margin: 0; list-style: none; }
.help-ui .help-data-table.help-wide-table { min-width: 560px; }
.help-ui .expirience { min-width: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.help-ui .expirience > :is(thead,tbody) > tr > :is(th,td) { text-align: right; overflow-wrap: anywhere; }
.help-ui .expirience > :is(thead,tbody) > tr > :first-child { text-align: center; }
.help-ui .expirience .header { position: static; }
.help-ui .expirience > thead > tr > th { position: sticky; top: 0; z-index: 1; background: var(--help-surface-raised); box-shadow: 0 1px var(--help-border); }
.help-ui .help-forms { container-type: inline-size; display: grid; gap: 28px; }
.help-ui .help-form-card { padding: 24px; background: var(--help-surface-raised); border: 1px solid var(--help-divider); border-radius: 8px; }
.help-ui .help-form-card h2 { margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--help-divider); color: var(--help-heading); font: 400 26px/1.3 var(--help-font-heading); }
.help-ui .help-form-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.help-ui .help-form-portraits { position: sticky; top: 24px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.help-ui .help-form-portraits img { display: block; width: 100%; height: auto; aspect-ratio: 172 / 300; object-fit: contain; border-radius: 4px; }
.help-ui .help-form-details { min-width: 0; }
.help-ui .help-form-details dl { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--help-divider); }
.help-ui .help-form-details dl:first-child { padding-top: 0; }
.help-ui .help-form-details dl:last-child { border-bottom: 0; padding-bottom: 0; }
.help-ui .help-form-ability dt { margin: 0 0 6px; font-weight: 600; color: var(--help-heading); }
.help-ui .help-form-ability dd { margin: 0; font-size: 15px; line-height: 1.7; }
.help-ui .help-form-note, .help-ui .help-forms-footer { margin: 20px 0 0; padding: 14px 16px; border-left: 2px solid var(--help-accent); background: var(--help-hover); font-size: 14px; line-height: 1.7; }
.help-ui .help-forms-footer { margin: 0; }
.help-ui .help-skills { display: grid; gap: 28px; }
.help-ui .help-skills-group { display: grid; gap: 20px; }
.help-ui .help-skills-heading { margin: 0; color: var(--help-heading); font: 400 var(--help-text-h2)/1.25 var(--help-font-heading); }
.help-ui .help-skill-card { padding: 20px 24px; border: 1px solid var(--help-divider); border-radius: 8px; background: var(--help-surface-raised); }
.help-ui .help-skill-card h3 { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--help-divider); font-size: 22px; }
.help-ui .help-skill-card .help-table-scroll { margin: 0; }
.help-ui .help-skill-card th[scope='row'] { width: 150px; white-space: nowrap; }
.help-ui .help-skill-card .help-data-table > thead > tr > th { background: color-mix(in srgb, var(--help-selected) 55%, var(--help-hover)); color: var(--help-heading); }
.help-ui .help-skill-card .help-data-table > tbody > tr > th[scope='row'] { background: var(--help-hover); color: var(--help-text); }
.help-ui .help-skill-card .help-data-table > tbody > tr:nth-child(even) { background: transparent; }
@media (max-width: 640px) {
    .help-ui .help-skill-card { padding: 16px; }
    .help-ui .help-skill-card th[scope='row'] { width: auto; }
}
@container (max-width: 640px) {
    .help-ui .help-form-card { padding: 16px; }
    .help-ui .help-form-layout { grid-template-columns: minmax(0,1fr); }
    .help-ui .help-form-portraits { position: static; width: 100%; max-width: 352px; margin-inline: auto; }
}
.help-ui .help-races { container-type: inline-size; display: grid; gap: 24px; }
.help-ui .help-race-card { padding: 24px; border: 1px solid var(--help-divider); border-radius: 8px; background: var(--help-surface-raised); }
.help-ui .help-race-title { margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--help-divider); color: var(--help-heading); font: 400 28px/1.25 var(--help-font-heading); }
.help-ui .help-race-layout { display: grid; grid-template-columns: minmax(0, 344px) minmax(0, 1fr); gap: 24px; align-items: start; }
.help-ui .help-race-portraits { position: sticky; top: 24px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; align-items: start; }
.help-ui .help-race-portraits img { display: block; width: 100%; height: auto; aspect-ratio: 172 / 300; object-fit: contain; border-radius: 4px; }
.help-ui .help-race-copy { min-width: 0; font-size: 15px; line-height: 1.75; }
.help-ui .help-race-skill { margin-top: 20px; padding: 14px 16px; border-left: 2px solid var(--help-accent); background: var(--help-hover); }
.help-ui .help-race-skill > b:first-child { display: block; margin-bottom: 6px; color: var(--help-heading); }
@container (max-width: 640px) {
    .help-ui .help-race-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
    .help-ui .help-race-portraits { position: static; width: 100%; max-width: 352px; margin-inline: auto; }
    .help-ui .help-race-card { padding: 16px; }
}

.help-ui .help-article-body .ulNavLinkGroup { display: grid; grid-template-columns: repeat(auto-fit,minmax(105px,1fr)); gap: 8px; margin: 0 0 24px; padding: 0; }
.help-ui .ulNavLinkGroup li { display: block; min-width: 0; max-width: none; margin: 0; padding: 0; list-style: none; }
.help-ui .ulNavLinkGroup .nav-link { height: 100%; padding: 10px 6px; border: 1px solid var(--help-divider); border-radius: 4px; background: var(--help-surface-raised); color: var(--help-text); }
.help-ui .ulNavLinkGroup .nav-link:hover { background: var(--help-hover); border-color: var(--help-border); }
.help-ui .ulNavLinkGroup .nav-link.selected { background: var(--help-selected); border-color: var(--help-accent); color: var(--help-heading); box-shadow: inset 0 -3px var(--help-accent); }
.help-ui .ulNavLinkGroup .name { min-height: 44px; height: auto; font-size: 13px; line-height: 1.4; }
.help-ui .ulNavLinkGroup .img { height: 72px; }
.help-ui .ulNavLinkGroup img { max-height: 64px; margin: 0; }
.help-ui .help-article-body .magic-schools-nav { grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); }
.help-ui .magic-schools-nav .img { height: 104px; }
.help-ui .magic-schools-nav .magic-school-icon { width: 100px; height: 100px; max-width: 100%; max-height: 100px; object-fit: contain; }
.help-ui .help-catalog { display: block; width: 100%; border: 0; border-spacing: 0; }
.help-ui .help-catalog > tbody { display: block; }
.help-ui .help-catalog > tbody > tr { display: flex; gap: 12px; }
.help-ui .help-catalog > tbody > tr > td { display: block; width: 100%; min-width: 0; padding: 0; margin-bottom: 12px; border: 1px solid var(--help-border) !important; border-radius: 4px; background: var(--help-surface-raised) !important; overflow-wrap: anywhere; }
.help-ui .itemInfo { height: auto !important; background: var(--help-surface-raised); color: var(--help-text); }
.help-ui .itemInfoTable, .help-ui .itemInfoTableCaption { color: var(--help-text); background: transparent; }
.help-ui .itemInfoTable td { font: 13px/1.5 var(--help-font-body); color: var(--help-text); border-color: var(--help-divider); }
.help-ui .itemInfoName, .help-ui .itemInfoU, .help-ui .itemInfoG { color: var(--help-heading); }
.help-ui .itemInfoImageTD { width: 64px; }
.help-ui .itemInfoJustify { text-align: left; }
.help-ui[data-theme='dark'] :is(.itemInfoModification,.itemInfoRed) { color: #f4a49a; }
.help-ui[data-theme='dark'] :is(.itemInfoRune,.itemInfoRuneWord,.itemInfoGreen) { color: #9ed6a0; }
.help-ui[data-theme='dark'] .itemInfoElder { color: #dcb0eb; }
.help-ui[data-theme='dark'] .itemInfoBreachRune { color: #aebfff; }
.help-ui .ulSetDisplay { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0; }
.help-ui .ulSetDisplay li { display: flex; align-items: center; justify-content: center; min-width: 64px; min-height: 80px; padding: 8px; margin: 0; list-style: none; border: 1px solid var(--help-border); border-radius: 4px; background: var(--help-surface-raised); cursor: pointer; }
.help-ui .ulSetDisplay img { max-height: 80px; max-width: 60px; }
.help-ui .ulSetDisplay li:hover { background: var(--help-hover); }
.help-ui :is(.divItemInfo,.itemInfoSet) { max-width: calc(100vw - 24px); max-height: calc(100vh - 40px); overflow: visible; z-index: 30; background: var(--help-surface-raised); color: var(--help-text); border: 1px solid var(--help-border); box-shadow: 0 8px 28px #0005; }
.help-ui :is(.divItemInfo,.itemInfoSet) .tippy-content { padding: 4px; }
.help-ui .tippy-box:is(.divItemInfo,.itemInfoSet)[data-theme] { background: var(--help-surface-raised); border: 1px solid var(--help-border); border-image: none; }
.help-ui[data-theme] .itemInfo.itemInfoOrnate { min-width: 0; width: 100%; max-width: 100%; background: var(--help-surface-raised); color: var(--help-text); box-shadow: none; }
.help-ui[data-theme] .itemInfo.itemInfoOrnate .itemInfoTable td { color: var(--help-text); border-color: var(--help-divider); text-shadow: none; }
.help-ui[data-theme] .itemInfo.itemInfoOrnate .itemInfoTableCaption { background: var(--help-hover); }
.help-ui[data-theme] .itemInfo.itemInfoOrnate :is(.itemInfoName,.itemInfoNameFake) { white-space: normal; }
.help-ui[data-theme] .itemInfo.itemInfoOrnate :is(.itemInfoNameLink,.itemInfoNameFake,.itemInfoU,.itemInfoG,.itemInfoPriceSilver) { color: var(--help-heading); text-shadow: none; }
.help-ui[data-theme] .itemInfo.itemInfoOrnate .itemInfoContainer { grid-template-columns: repeat(2,minmax(0,1fr)); }
.help-ui[data-theme] .itemInfo.itemInfoOrnate fieldset { min-width: 0; border-color: var(--help-border); background: transparent; box-shadow: none; }
.help-ui[data-theme] .itemInfo.itemInfoOrnate div.itemInfoAttribute:nth-of-type(odd) { background: var(--help-hover); }
.help-ui[data-theme] .itemInfo.itemInfoOrnate div.itemInfoAttribute:nth-of-type(even) { background: transparent; box-shadow: none; }
.help-ui[data-theme] .itemInfo.itemInfoOrnate .itemInfoImageTD { min-width: 64px; background: transparent; }
.help-ui[data-theme] .itemInfo.itemInfoOrnate .itemInfoParameterName { max-width: 100%; }
.help-ui[data-theme='light'] .itemInfo.itemInfoOrnate .itemInfoPriceGold { color: #795010; }
.help-ui[data-theme] .itemInfo.itemInfoOrnate .itemPowerBlock legend { padding-inline: 2px; white-space: nowrap; }
.help-ui .itemInfoTableCaption, .help-ui .itemInfoTableCaption > tbody { display: block; width: 100%; }
.help-ui .itemInfoTableCaption > tbody > tr { display: flex; align-items: flex-start; }
.help-ui .itemInfoTableCaption > tbody > tr > td:first-child { display: block; flex: 1; min-width: 0; width: auto; }
.help-ui .itemInfoTableCaption > tbody > tr > td:last-child { display: block; flex: 0 0 auto; white-space: nowrap; width: auto; padding-left: 6px; }
.help-ui .itemPowerBlock .power.attackPower::before { content: url('../images/icons/attackPower.png'); }
.help-ui .itemPowerBlock .power.protectionPower::before { content: url('../images/icons/protectionPower.png'); }
.help-ui .itemPowerBlock .power.recoveryPower::before { content: url('../images/icons/recoveryPower.png'); }
.help-ui :is(.divItemInfo,.itemInfoSet) .tippy-content { position: relative; padding: 4px; max-height: calc(100vh - 42px); overflow: auto; }
.help-ui .help-popup-close { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); z-index: 2; display: grid; place-items: center; box-sizing: border-box; width: 26px; height: 26px; min-width: 26px; min-height: 26px; max-width: 26px; max-height: 26px; padding: 0; margin: 0; border: 1px solid var(--help-accent); border-radius: 50%; background: var(--help-selected); color: var(--help-heading); box-shadow: 0 2px 6px #0005; font: 600 22px/1 Arial,sans-serif; cursor: pointer; }
.help-ui .help-popup-close:focus-visible { outline: 2px solid var(--help-heading); outline-offset: 3px; }
.help-ui .help-popup-close:hover { background: var(--help-accent); color: var(--help-surface); }
.help-ui .help-rift-encounter { display: flex; align-items: flex-start; gap: 24px; margin: 24px 0; }
.help-ui .help-rift-encounter > div { flex: 1; min-width: 0; }
 .help-ui .help-rift-encounter > .help-rift-portrait { flex: 0 0 172px; }
 .help-ui .help-rift-portrait img { width: 172px; height: auto; }
 .help-ui .help-rifts .tblBordered td:first-child { width: 88px; min-width: 88px; }
 .help-ui .help-rifts .tblBordered img { max-width: none; width: auto; height: auto; }
 .help-ui .help-rifts img { max-width: 100%; height: auto; }
 .help-ui .help-profession-values { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
 .help-ui .help-profession-values :is(td,th) { padding: 10px 8px; border: 1px solid var(--help-border); text-align: center; vertical-align: middle; }
 .help-ui .help-profession-values :is(td,th):first-child { width: 30%; max-width: 320px; text-align: left; }
.help-ui .help-profession-values th[scope='row'] { font-weight: 400; }
.help-ui .help-profession-values tr:first-child { background: var(--help-selected); color: var(--help-heading); }
.help-ui .help-profession-values tr:nth-child(even) { background: var(--help-hover); }
@media (max-width: 600px) {
    .help-ui .help-rift-encounter { flex-direction: column; }
    .help-ui .help-rift-encounter > .help-rift-portrait { flex-basis: auto; align-self: center; order: -1; }
}
.help-ui .itemSetDetails { padding: 12px !important; }
@media (max-width: 1000px) {
    .help-ui .help-catalog > tbody > tr { display: block; }
}
@media (max-width: 760px) {
    .help-ui .expirience > :is(thead,tbody) > tr > :is(th,td) { padding: 10px 4px; font-size: 12px; }
    .help-ui[data-theme] .itemInfo.itemInfoOrnate .itemInfoContainer { grid-template-columns: minmax(0,1fr); }
    .help-ui .help-section-heading { font-size: 22px; }
}
@media (max-width: 360px) {
    .help-ui .help-experience-table > thead > tr > th { padding-inline: 2px; font-size: 11px; overflow-wrap: normal; }
}