.fam-session { --c: #4E79A7; --t: #e6ecf3; --i: #fff; }
.fam-charsel { --c: #59A14F; --t: #e8f2e6; --i: #1d232b; }
.fam-world { --c: #9C755F; --t: #f1ece9; --i: #fff; }
.fam-move { --c: #76B7B2; --t: #ecf5f4; --i: #1d232b; }
.fam-objects { --c: #EDC948; --t: #fcf7e5; --i: #1d232b; }
.fam-combat { --c: #E15759; --t: #fbe7e8; --i: #1d232b; }
.fam-magic { --c: #B07AA1; --t: #f4ecf2; --i: #1d232b; }
.fam-progress { --c: #FF9DA7; --t: #fff1f3; --i: #1d232b; }
.fam-items { --c: #F28E2B; --t: #fdefe1; --i: #1d232b; }
.fam-trade { --c: #D4A017; --t: #f9f2df; --i: #1d232b; }
.fam-chat { --c: #5F6B7A; --t: #e9eaec; --i: #fff; }
.fam-social { --c: #2CA58D; --t: #e1f2ef; --i: #1d232b; }
.fam-quests { --c: #8CD17D; --t: #eff9ed; --i: #1d232b; }
.fam-craft { --c: #B6992D; --t: #f5f1e2; --i: #1d232b; }
.fam-housing { --c: #A0CBE8; --t: #f2f8fc; --i: #1d232b; }
.fam-rvr { --c: #C0392B; --t: #f6e3e1; --i: #fff; }
.fam-relics { --c: #7B4F9D; --t: #ede6f1; --i: #fff; }
.fam-unknown { --c: #BAB0AC; --t: #f5f4f3; --i: #1d232b; }

/* Direction */
.opx:has(#d-cs:checked) .r[data-dir=sc], .opx:has(#d-sc:checked) .r[data-dir=cs] { display: none; }
.opx:has(#d-cs:checked) .map[data-dir=sc], .opx:has(#d-sc:checked) .map[data-dir=cs] { opacity: .25; }

/* Show */
.opx:has(#s-missing:checked) .r:not([data-missing]) { display: none; }
.opx:has(#s-missing:checked) .cell:not([data-missing]) { opacity: .15; }
.opx:has(#s-seen:checked) .r:not([data-seen]) { display: none; }
.opx:has(#s-seen:checked) .cell:not([data-seen]) { opacity: .15; }
.opx:has(#s-guess:checked) .r:not([data-guess]) { display: none; }
.opx:has(#s-guess:checked) .cell:not([data-guess]) { opacity: .15; }

/* Family */
.opx:has(#f-session:checked) .fam:not(#fam-session) { display: none; }
.opx:has(#f-session:checked) .cell:not([data-fam=session]) { opacity: .15; }
.opx:has(#f-charsel:checked) .fam:not(#fam-charsel) { display: none; }
.opx:has(#f-charsel:checked) .cell:not([data-fam=charsel]) { opacity: .15; }
.opx:has(#f-world:checked) .fam:not(#fam-world) { display: none; }
.opx:has(#f-world:checked) .cell:not([data-fam=world]) { opacity: .15; }
.opx:has(#f-move:checked) .fam:not(#fam-move) { display: none; }
.opx:has(#f-move:checked) .cell:not([data-fam=move]) { opacity: .15; }
.opx:has(#f-objects:checked) .fam:not(#fam-objects) { display: none; }
.opx:has(#f-objects:checked) .cell:not([data-fam=objects]) { opacity: .15; }
.opx:has(#f-combat:checked) .fam:not(#fam-combat) { display: none; }
.opx:has(#f-combat:checked) .cell:not([data-fam=combat]) { opacity: .15; }
.opx:has(#f-magic:checked) .fam:not(#fam-magic) { display: none; }
.opx:has(#f-magic:checked) .cell:not([data-fam=magic]) { opacity: .15; }
.opx:has(#f-progress:checked) .fam:not(#fam-progress) { display: none; }
.opx:has(#f-progress:checked) .cell:not([data-fam=progress]) { opacity: .15; }
.opx:has(#f-items:checked) .fam:not(#fam-items) { display: none; }
.opx:has(#f-items:checked) .cell:not([data-fam=items]) { opacity: .15; }
.opx:has(#f-trade:checked) .fam:not(#fam-trade) { display: none; }
.opx:has(#f-trade:checked) .cell:not([data-fam=trade]) { opacity: .15; }
.opx:has(#f-chat:checked) .fam:not(#fam-chat) { display: none; }
.opx:has(#f-chat:checked) .cell:not([data-fam=chat]) { opacity: .15; }
.opx:has(#f-social:checked) .fam:not(#fam-social) { display: none; }
.opx:has(#f-social:checked) .cell:not([data-fam=social]) { opacity: .15; }
.opx:has(#f-quests:checked) .fam:not(#fam-quests) { display: none; }
.opx:has(#f-quests:checked) .cell:not([data-fam=quests]) { opacity: .15; }
.opx:has(#f-craft:checked) .fam:not(#fam-craft) { display: none; }
.opx:has(#f-craft:checked) .cell:not([data-fam=craft]) { opacity: .15; }
.opx:has(#f-housing:checked) .fam:not(#fam-housing) { display: none; }
.opx:has(#f-housing:checked) .cell:not([data-fam=housing]) { opacity: .15; }
.opx:has(#f-rvr:checked) .fam:not(#fam-rvr) { display: none; }
.opx:has(#f-rvr:checked) .cell:not([data-fam=rvr]) { opacity: .15; }
.opx:has(#f-relics:checked) .fam:not(#fam-relics) { display: none; }
.opx:has(#f-relics:checked) .cell:not([data-fam=relics]) { opacity: .15; }
.opx:has(#f-unknown:checked) .fam:not(#fam-unknown) { display: none; }
.opx:has(#f-unknown:checked) .cell:not([data-fam=unknown]) { opacity: .15; }

/* A family with nothing left to show: hidden when every family is listed, a short note when it is the one picked.
   The template marks each family with e-<direction>-<show> for the combinations that leave it empty. */
.fam .none { display: none; }
.opx:has(#f-all:checked):has(#d-all:checked):has(#s-missing:checked) .fam.e-all-missing { display: none; }
.opx:has(#d-all:checked):has(#s-missing:checked) .fam.e-all-missing .none { display: block; }
.opx:has(#f-all:checked):has(#d-all:checked):has(#s-seen:checked) .fam.e-all-seen { display: none; }
.opx:has(#d-all:checked):has(#s-seen:checked) .fam.e-all-seen .none { display: block; }
.opx:has(#f-all:checked):has(#d-all:checked):has(#s-guess:checked) .fam.e-all-guess { display: none; }
.opx:has(#d-all:checked):has(#s-guess:checked) .fam.e-all-guess .none { display: block; }
.opx:has(#f-all:checked):has(#d-cs:checked):has(#s-all:checked) .fam.e-cs-all { display: none; }
.opx:has(#d-cs:checked):has(#s-all:checked) .fam.e-cs-all .none { display: block; }
.opx:has(#f-all:checked):has(#d-cs:checked):has(#s-missing:checked) .fam.e-cs-missing { display: none; }
.opx:has(#d-cs:checked):has(#s-missing:checked) .fam.e-cs-missing .none { display: block; }
.opx:has(#f-all:checked):has(#d-cs:checked):has(#s-seen:checked) .fam.e-cs-seen { display: none; }
.opx:has(#d-cs:checked):has(#s-seen:checked) .fam.e-cs-seen .none { display: block; }
.opx:has(#f-all:checked):has(#d-cs:checked):has(#s-guess:checked) .fam.e-cs-guess { display: none; }
.opx:has(#d-cs:checked):has(#s-guess:checked) .fam.e-cs-guess .none { display: block; }
.opx:has(#f-all:checked):has(#d-sc:checked):has(#s-all:checked) .fam.e-sc-all { display: none; }
.opx:has(#d-sc:checked):has(#s-all:checked) .fam.e-sc-all .none { display: block; }
.opx:has(#f-all:checked):has(#d-sc:checked):has(#s-missing:checked) .fam.e-sc-missing { display: none; }
.opx:has(#d-sc:checked):has(#s-missing:checked) .fam.e-sc-missing .none { display: block; }
.opx:has(#f-all:checked):has(#d-sc:checked):has(#s-seen:checked) .fam.e-sc-seen { display: none; }
.opx:has(#d-sc:checked):has(#s-seen:checked) .fam.e-sc-seen .none { display: block; }
.opx:has(#f-all:checked):has(#d-sc:checked):has(#s-guess:checked) .fam.e-sc-guess { display: none; }
.opx:has(#d-sc:checked):has(#s-guess:checked) .fam.e-sc-guess .none { display: block; }