/* The inventory label remains inline with ordinary forum text. */
.spwi-label {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    max-width: 100%;
    gap: .35em;
    color: inherit;
    font-weight: 600;
    line-height: 1.25;
}
#XF a.spwi-label, #XF a.spwi-label:hover, #XF a.spwi-label:focus, #XF a.spwi-label:visited {
    color: inherit;
    text-decoration: none;
    border: 0;
    background: none;
    box-shadow: none;
}
.spwi-name { min-width: 0; overflow-wrap: anywhere; }
.spwi-pigment { color: var(--game-ink); }
html:not([data-summer-theme="twilight"]) .spwi-label .spwi-pigment {
    color: color-mix(in srgb, var(--game-ink) 52%, #33271f);
}
html[data-summer-theme="twilight"] .spwi-label .spwi-pigment {
    color: color-mix(in srgb, var(--game-ink) 72%, #fff);
}
.spwi-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    background-repeat: no-repeat;
    background-size: 1024px auto;
    background-position: var(--spwi-x, 0px) var(--spwi-y, 0px);
}
.spwi-icon--blank { color: #c9aa75; }
.spwi-missing { font-style: italic; }
#XF a.spwi-label:focus-visible, .spwi-card summary:focus-visible {
    outline: 2px solid #c9a263;
    outline-offset: 2px;
}
.spwi-page { width: 440px; max-width: 100%; }
.spwi-pop {
    position: fixed;
    z-index: 10010;
    box-sizing: border-box;
    max-width: calc(100vw - 16px);
    overflow: visible;
    outline: none;
}
.spwi-pop[hidden] { display: none; }
.spwi-card, .spwi-popStatus {
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #a88c58;
    border-radius: 2px;
    background: rgba(17, 20, 19, .96);
    box-shadow: inset 0 0 0 1px #362e22, 0 4px 15px #0006;
    color: #f4efdf;
    color-scheme: dark;
    font: 13px/1.36 Tahoma, Arial, sans-serif;
    text-align: start;
    overflow-wrap: anywhere;
}
.spwi-card .spwi-heading {
    position: relative;
    margin: 0;
    padding: 6px 10px;
    border-bottom: 1px solid #90784e;
    font: bold 14px/1.3 Tahoma, Arial, sans-serif;
    color: #f3e6c6;
}
.spwi-heading::after {
    content: '';
    position: absolute;
    right: 3px;
    bottom: -2px;
    width: 3px;
    height: 3px;
    transform: rotate(45deg);
    background: #d2ad68;
}
.spwi-body, .spwi-popStatus { padding: 6px 10px 8px; }
.spwi-popStatus a { color: #f5ce87; }
.spwi-body > :first-child { margin-top: 0; }
.spwi-property { color: #a2a4ff; }
.spwi-binding, .spwi-restrictions { color: #59e6e6; }
.spwi-desc, .spwi-line { white-space: pre-line; }
.spwi-desc { color: #f3d98a; }
.spwi-set, .spwi-restrictions, .spwi-desc, .spwi-rewards { margin-top: 7px; }
.spwi-restrictions + .spwi-desc { margin-top: 2px; }
.spwi-set h3, .spwi-branch h4, .spwi-section h5, .spwi-section summary {
    font: bold 13px/1.35 Tahoma, Arial, sans-serif;
    color: #f5cd6d;
    margin: 2px 0;
}
.spwi-set { color: #c3bdb0; }
.spwi-set-parts { list-style: none; padding: 0 0 0 6px; margin: 2px 0; }
.spwi-card .spwi-label { display: inline; font-weight: 600; vertical-align: baseline; }
.spwi-card .spwi-icon {
    display: inline-grid;
    vertical-align: -3px;
    margin-inline-end: 4px;
    width: 16px;
    height: 16px;
    background-size: 512px auto;
    background-position: calc(var(--spwi-x, 0px) / 2) calc(var(--spwi-y, 0px) / 2);
}
html .spwi-card .spwi-label .spwi-pigment { color: var(--game-ink); }
html .spwi-set-parts .spwi-label .spwi-pigment { color: inherit; }
.spwi-section, .spwi-branch { margin: 3px 0 0; }
.spwi-section summary { cursor: pointer; width: fit-content; }
.spwi-list { padding-inline-start: 4px; }
.spwi-list--long {
    column-count: var(--spwi-columns, 1);
    column-gap: 18px;
}
.spwi-reward-row { break-inside: avoid; margin: 1px 0; }
.spwi-qty { white-space: nowrap; color: #c0bab0; }
.spwi-chance { font-variant-numeric: tabular-nums; white-space: nowrap; }
.spwi-rewards p { margin: 3px 0; }
.spwi-note { color: #c5b9a0; }