#clist {
    font-family: monospace;
    table-layout: fixed;
}

#clist:has(input[name="blessings"]:checked):has(input[data-ref="Unblessing"]:not(:checked))~table tbody[data-refs~="Unblessing"],
#clist:has(input[name="blessings"]:checked):has(input[data-ref="Sword"]:not(:checked))~table tbody[data-refs~="Sword"],
#clist:has(input[name="blessings"]:checked):has(input[data-ref="Arrow"]:not(:checked))~table tbody[data-refs~="Arrow"],
#clist:has(input[name="blessings"]:checked):has(input[data-ref="Projectile"]:not(:checked))~table tbody[data-refs~="Projectile"],
#clist:has(input[name="blessings"]:checked):has(input[data-ref="Sphere"]:not(:checked))~table tbody[data-refs~="Sphere"],
#clist:has(input[name="blessings"]:checked):has(input[data-ref="Spike"]:not(:checked))~table tbody[data-refs~="Spike"],
#clist:has(input[name="boons"]:checked):has(input[data-ref="CRI"]:not(:checked))~table tbody[data-refs~="CRI"],
#clist:has(input[name="boons"]:checked):has(input[data-ref="None"]:not(:checked))~table tbody[data-refs~="None"],
#clist:has(input[name="boons"]:checked):has(input[data-ref="Fire"]:not(:checked))~table tbody[data-refs~="Fire"],
#clist:has(input[name="boons"]:checked):has(input[data-ref="Ice"]:not(:checked))~table tbody[data-refs~="Ice"],
#clist:has(input[name="boons"]:checked):has(input[data-ref="Lightning"]:not(:checked))~table tbody[data-refs~="Lightning"],
#clist:has(input[name="boons"]:checked):has(input[data-ref="Earth"]:not(:checked))~table tbody[data-refs~="Earth"],
#clist:has(input[name="boons"]:checked):has(input[data-ref="Wind"]:not(:checked))~table tbody[data-refs~="Wind"],
#clist:has(input[name="boons"]:checked):has(input[data-ref="Light"]:not(:checked))~table tbody[data-refs~="Light"],
#clist:has(input[name="boons"]:checked):has(input[data-ref="Dark"]:not(:checked))~table tbody[data-refs~="Dark"],
#clist:has(input[name="boons"]:checked):has(input[data-ref="RS"]:not(:checked))~table tbody[data-refs~="RS"],
#clist:has(input[name="boons"]:checked):has(input[data-ref="SP"]:not(:checked))~table tbody[data-refs~="SP"],
#clist:has(input[name="boons"]:checked):has(input[data-ref="SS"]:not(:checked))~table tbody[data-refs~="SS"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Unfamily"]:not(:checked))~table tbody[data-refs~="Unfamily"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Slime"]:not(:checked))~table tbody[data-refs~="Slime"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Beast"]:not(:checked))~table tbody[data-refs~="Beast"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Dragon"]:not(:checked))~table tbody[data-refs~="Dragon"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Demon"]:not(:checked))~table tbody[data-refs~="Demon"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Material"]:not(:checked))~table tbody[data-refs~="Material"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Undead"]:not(:checked))~table tbody[data-refs~="Undead"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Elemental"]:not(:checked))~table tbody[data-refs~="Elemental"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Plant"]:not(:checked))~table tbody[data-refs~="Plant"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Bug"]:not(:checked))~table tbody[data-refs~="Bug"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Aquatic"]:not(:checked))~table tbody[data-refs~="Aquatic"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Bird"]:not(:checked))~table tbody[data-refs~="Bird"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Machine"]:not(:checked))~table tbody[data-refs~="Machine"],
#clist:has(input[name="family"]:checked):has(input[data-ref="Humanoid"]:not(:checked))~table tbody[data-refs~="Humanoid"],
#clist:has(input[name="family"]:checked):has(input[data-ref="???"]:not(:checked))~table tbody[data-refs~="???"],
#clist:has(input[name="rarity"]:checked):has(input[data-ref="Common"]:not(:checked))~table tbody[data-refs~="Common"],
#clist:has(input[name="rarity"]:checked):has(input[data-ref="Uncommon"]:not(:checked))~table tbody[data-refs~="Uncommon"],
#clist:has(input[name="rarity"]:checked):has(input[data-ref="Rare"]:not(:checked))~table tbody[data-refs~="Rare"] {
    display: none;
}

#clist td {
    vertical-align: top;
}

#clist:has(input[name="rarity"]:not(:checked)) td:nth-child(1),
#clist:has(input[name="family"]:not(:checked)) td:nth-child(2),
#clist:has(input[name="blessings"]:not(:checked)) td:nth-child(3),
#clist:has(input[name="boons"]:not(:checked)) td:nth-child(4) {
    color: gainsboro;
}

#clist th {
    text-align: left;
}

#clist tr:first-child:not(:has(input:checked))~tr td>* {
    display: none;
}

#mlist {
    font-family: monospace;
    table-layout: fixed;
}

#mlist tbody tr:first-child th {
    background-color: ghostwhite;
}

#mlist thead th {
    padding: 0;
}

#mlist thead th:first-child {
    text-align: left;
}

#mlist thead th:last-child {
    text-align: right;
}

#mlist tr:nth-child(3) td {
    text-align: right;
}

#mlist tr:nth-child(4) td {
    border-style: dashed;
}

#nlist {
    table-layout: fixed;
}

#nlist th {
    text-align: left;
}

#nlist:has(tbody:not([hidden]))~* {
    display: none;
}

#vlist[data-index="1"] tbody:not([data-vocation="1"]),
#vlist[data-index="2"] tbody:not([data-vocation="2"]),
#vlist[data-index="3"] tbody:not([data-vocation="3"]),
#vlist[data-index="4"] tbody:not([data-vocation="4"]),
#vlist[data-index="5"] tbody:not([data-vocation="5"]),
#vlist:not([data-index]) tbody {
    display: none;
}

#vlist:has(#i:checked) tbody th:nth-child(1),
#vlist:has(#j:checked) tbody th:nth-child(2),
#vlist:has(#k:checked) tbody th:nth-child(3) {
    border-bottom-color: black;
    border-bottom-style: dashed;
}

#vlist tfoot {
    position: absolute;
    visibility: hidden;
}

.h1 {
    color: skyblue;
}

.h2 {
    color: lime;
}

.h3 {
    color: orange;
}

.h4 {
    color: tomato;
}

.h5 {
    color: purple;
}

.info {
    background-color: black;
    border: 2px solid white;
    border-radius: .5rem;
    font-family: monospace;
    outline: 1px solid black;
    padding: .5em;
}

.info hr {
    border-image: linear-gradient(to right, #00000000, lightsteelblue 25%, lightsteelblue 75%, #00000000 100%) 1 stretch;
    border-style: solid none none;
    border-width: thin;
}

.info td {
    border-style: none;
    text-align: right;
    color: white;
}

.info th {
    border-style: none;
    font-weight: normal;
    text-align: left;
    color: white;
}

.info th:has(hr) {
    color: lightsteelblue;
}

.std {
    width: 15em;
}

[data-slot] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    line-height: 0;
}

[data-slot="0"] {
    background-image: url("0.png");
}

[data-slot="1"] {
    background-image: url("1.png");
}

[data-slot="2"] {
    background-image: url("2.png");
}

[data-slot="3"] {
    background-image: url("3.png");
}

[data-slot="4"] {
    background-image: url("4.png");
}

[data-slot="5"] {
    background-image: url("5.png");
}

caption {
    color: silver;
}

figure[hidden] {
    display: none;
}

figure[hidden]#etc~figure {
    display: none;
}

table {
    width: 100%;
}