* {
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
}
html {
    --much-darker: rgb(0 0 0 / 14%);
    --darker: rgb(0 0 0 / 7%);
    --lighter: rgb(255 255 255 / 7%);
    --much-lighter: rgb(255 255 255 / 14%);
    --super-lighter: rgba(255 255 255 / 25%);
    color: white;
}
h1 {
    font-size: 2em;
}
.bg-much-darker {
    background-color: var(--much-darker);
}
.bg-darker {
    background-color: var(--darker);
}
.bg-lighter {
    background-color: var(--lighter);
}
.bg-much-lighter {
    background-color: var(--much-lighter);
}
body {
    display: grid;
    grid-template-rows: max(4em, 4vh) 1fr 2em;
    grid-template-columns: 5.25em 1fr;
    grid-template-areas: 'sidebar header' 'sidebar main' 'sidebar footer';
    width: 100vw;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    background-color: #1a1c24;
}
body > nav {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    color: white;
    padding: 1em;
    position: fixed;
    height: 100vh;
    z-index: 1000;
    width: 5.25em;
    background-color: #16181f;
    transition: all .2s;
    box-sizing: border-box;
    overflow-x: hidden;
}
body > nav {
    overflow: hidden;
}
body > nav:hover,
body.menu-open > nav {
    overflow-y: auto;
}
body > header {
    grid-area: header;
    background-color: var(--much-darker);
    font-size: clamp(1em,calc((100vw - 15.5em) / 16),3em);
    font-weight: 900;
    letter-spacing: 8px;
    display: flex;
    padding: 0 1rem;
    color: rgb(255 255 255 / 60%);
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
body > main {
    grid-area: main;
    /*background-color: var(--lighter);*/
    max-width: calc(100vw - 5.5em);
    min-width: min(500px, 100%);
}
body > footer {
    grid-area: footer;
}
body > nav > img {
    width: 3.25em;
    margin-bottom: 1em;
}
body > nav a {
    color: white;
    text-decoration: none;
    display: flex;
    padding: 1em;
    background-color: var(--lighter);
    border-radius: .5em;
    gap: 1em;
    align-items: center;
}
body > nav i {
    height: 1em;
    width: 1.25em;
    margin: .125em 0;
    text-align: center;
    flex-shrink: 0;
}

body > nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1em;
    flex-direction: column;
}

body > nav h6:last-of-type {
    flex-grow: 1;
    display: flex;
    align-items: end;
}

body > nav h6 {
    font-size: 1em;
    margin: 2em 0 1em .25em;
    height: 1.25em;
}

body > nav a:hover {
    background-color: var(--much-lighter);
}

/*body > nav h6:first-of-type {
    margin-top: 0;
}*/
body > nav span {
    font-size: 0em;
    opacity: 0;
    transition: opacity 0s;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@media only screen and (min-width: 501px) {
    body > nav:hover {
        width: 20em;
        box-shadow: 0px 0px 10px #00000099;
    }

    body > nav:hover span {
        font-size: inherit;
        opacity: 1;
        transition: opacity .1s .2s, font-size 0s .2s;
    }
}
.menu-toggle-open,
.menu-toggle-close {
    display: none;
}

@media only screen and (max-width: 500px) {
    body {
        grid-template-rows: max(4em, 4vh) 1fr 2em;
        grid-template-columns: 0 5.25em 1fr;
        grid-template-areas: 'sidebar menu header' 'sidebar main main' 'sidebar footer footer';
    }
    .menu-toggle-open,
    .menu-toggle-close {
        width: 5.25em;
        height: max(4em, 4vh);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .menu-toggle-open i,
    .menu-toggle-close i {
        font-size: 3em;
    }
    body > nav {
        margin-left: -5.25em;
    }
    body.menu-open > nav {
        margin-left: 0;
        width: 20em;
        box-shadow: 0px 0px 10px #00000099;
    }
    body.menu-open > nav span {
        font-size: inherit;
        opacity: 1;
        transition: opacity .1s .2s, font-size 0s .2s;
    }
}

.text-center { text-align: center }
.align-center { justify-content: center }

.logged-out .logged-in-only { display: none }
.logged-in .logged-out-only { display: none }

.button {
    display: block;
    width: fit-content;
    padding: .5em 1em;
    background-color: var(--much-lighter);
    border-radius: 2em;
    text-decoration: none;
    cursor: pointer;
}
.mini.button {
    display: inline;
    padding: .5em 1em;
    margin: -.5em 0;
}

.no-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.panel {
    margin: 1em 0;
    padding: 1.5em;
    border-radius: 1em;
    text-decoration: none;
}

a.panel {
    display: block;
}
.masonry-container {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    column-gap: 2em;
}
.masonry-container > .panel.panel.panel {margin: 1em 0;}
.panel.half {
    width: calc(50% - 1em);
    flex-grow: 30;
    /*margin-right: 1em;
    float: left;*/
}
.panel.half ~ .panel.half,
.panel.one-third ~ .panel.one-third ~ .panel.one-third,
.panel.one-third ~ .panel.two-thirds,
.panel.two-third ~ .panel.thirds {
    margin-right: 0;
}
.panel.one-third {
    width: calc(33.3% - 1em);
    flex-grow: 20;
    /*margin-right: 1em;
    float: left;*/
}
.panel.two-thirds {
    width: calc(66.6% - 1em);
    flex-grow: 40;
    /*margin-right: 1em;
    float: left;*/
}
.panel.min-grow.min-grow {
    flex-grow: 1;
}
.panel.large { min-width: min(100%, 620px) }
.panel.medium { min-width: min(100%, 470px) }
.panel.small { min-width: min(100%, 320px) }

.panel > :first-child,
.panel > :first-child > :first-child {
    margin-top: 0;
}
.panel > :last-child,
.panel > :last-child > :last-child {
    margin-bottom: 0;
}
a {
    color: white;
}
.second-nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 1em;
    padding: 1em;
}
.second-nav li {
    padding: 1em;
    border-radius: 1em;
    background-color: var(--much-lighter);
}
.second-nav a {
    text-decoration: none;
}

.standings,
#players,
#players.with-action {
    display: grid;
    grid-template-columns: repeat(7, auto);
    overflow: auto;
}

#players {
    grid-template-columns: repeat(6, auto);
    grid-auto-flow: dense;
}
#players [rowspan="2"] {
    grid-row: span 2;
}
#players [colspan="2"] {
    grid-column: span 2;
}

.standings thead,
.standings tbody,
.standings tr,
#players thead,
#players tbody,
#players tr {
    display: grid;
    grid-template-columns: subgrid;
    grid-column-end: 8;
    grid-column-start: 1;
    gap: 1em;
}

.standings thead
#players thead {
    padding: 1em;
}

.standings tbody tr,
#players tbody tr {
    background-color: var(--lighter);
    padding: 1em;
    border-radius: 1em;
}

.standings tr > :nth-child(n + 2),
#players tr > :nth-child(n + 2),
#players thead th {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*article:not(.current-screen) {
    display: none;
}*/

.standings [sort],
#players [sort] {
    border-radius: 1em;
    padding: .25em;
    cursor: pointer;
}

.standings [sort]:hover,
#players [sort]:hover {
    background-color: var(--lighter);
}
.standings [sort].asc,
.standings [sort].dsc,
#players [sort].asc,
#players [sort].dsc {
    background-color: var(--much-lighter);
    position: relative;
}

.standings [sort]:after,
#players [sort]:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 320 512'%3E%3Cpath style='fill: white; opacity: .25' d='M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3Cpath style='fill: white; opacity: .25' d='M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z'/%3E%3C/svg%3E");
    color: white;
    margin-left: .5em;
    margin-right: -.2em;
}
[sort].asc:after,
#players [sort].asc:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 320 512'%3E%3Cpath style='fill: white' d='M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E");
    color: white;
    margin-left: .5em;
    margin-right: -.2em;
}

[sort].dsc:after,
#players [sort].dsc:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 320 512'%3E%3Cpath style='fill: white' d='M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z'/%3E%3C/svg%3E");
    color: white;
    margin-left: .5em;
    margin-right: -.2em;
}

#players tr.hide {
    display: none;
}

.filter {
    appearance: none;
    margin: 0;
    opacity: 0;
}

.filter + label {
    margin: 0 0.5em 0.5em 0;
    display: inline-block;
    padding: 0.25em 0.5em;
    border: 1px solid white;
    border-radius: 0.5em;
    cursor: pointer;
}

.filter:checked + label {
    background-color: white;
    color: black;
}

/*.standings td:first-child a {
    font-size: 1.2em;
}*/

.matchup-list > li > a {
    display: flex;
    justify-content: space-between;
    text-decoration: none;
}

.matchup-list li a div:first-child, .matchup-list li a div:nth-child(3) {
    width: 0;
    flex-grow: 1;
}

.matchup-list > li > a > div:nth-child(3) {
    text-align: right;
}

.matchup-list h5 {
    font-size: 1.2em;
    margin: 0;
}

.matchup-list p {
    margin: 0;
}

.matchup-list > li > a > div:nth-child(2) {
    align-self: center;
    font-size: 1.5em;
    font-weight: bold;
}

.matchup-list li[winner] a div:first-child,
.matchup-list li[winner] a div:nth-child(3) {
    display: flex;
    justify-content: space-between;
}

.matchup-list li[winner] a div:nth-child(3) h5 {
    order: 1;
}

.matchup-list li[winner] a div:first-child p,
.matchup-list li[winner] a div:nth-child(3) p {
    font-size: 1.5em;
}

.matchup-list li[winner="1"] a div:first-child p,
.matchup-list li[winner="2"] a div:nth-child(3) p {
    font-weight: bold;
}

.week-select-list {
    display: flex;
    justify-content: center;
    gap: .5em;
}

.week-select-list li {
    width: 0;
    flex-grow: 1;
    text-align: center;
    padding: .5em 0;
    background-color: var(--lighter);
    border-radius: .5em;
    cursor: pointer;
}
.week-select-list li:hover,
.week-select-list li.selected {
    background-color: var(--much-lighter);
}
#matchups {
    width: 100%;
    overflow: hidden;
    display: flex;
}

#matchups > div {
    width: 100%;
    flex-shrink: 0;
    margin-left: -105%;
    margin-right: 5%;
    opacity: 0;
    transition: all .2s;
}

#matchups > div.selected {
    margin-left: 0;
    opacity: 1
}

#matchups > div.selected ~ div {
    margin-left: 0;
    margin-right: -105%;
}
/*
#matchups[rnd="1"] [rnd]:not([rnd="1"]),
#matchups[rnd="2"] [rnd]:not([rnd="2"]),
#matchups[rnd="3"] [rnd]:not([rnd="3"]),
#matchups[rnd="4"] [rnd]:not([rnd="4"]),
#matchups[rnd="5"] [rnd]:not([rnd="5"]),
#matchups[rnd="6"] [rnd]:not([rnd="6"]),
#matchups[rnd="7"] [rnd]:not([rnd="7"]),
#matchups[rnd="8"] [rnd]:not([rnd="8"]),
#matchups[rnd="9"] [rnd]:not([rnd="9"]),
#matchups[rnd="10"] [rnd]:not([rnd="10"]),
#matchups[rnd="11"] [rnd]:not([rnd="11"]),
#matchups[rnd="12"] [rnd]:not([rnd="12"]),
#matchups[rnd="13"] [rnd]:not([rnd="13"]),
#matchups[rnd="14"] [rnd]:not([rnd="14"]),
#matchups[rnd="15"] [rnd]:not([rnd="15"]),
#matchups[rnd="16"] [rnd]:not([rnd="16"]),
#matchups[rnd="17"] [rnd]:not([rnd="17"]) {
    display: none;
}
*/
.player {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        'i n'
        'i s';
}

.flex-list {
    display: flex;
    gap: .5em;
    font-size: 90%;
    flex-flow: row wrap;
}
.flex-list.buttons {
    margin-bottom: 1em;
}
.flex-list.buttons li {
    text-align: center;
    padding: .5em;
    background-color: var(--lighter);
    border-radius: .5em;
    cursor: pointer;
}
.flex-list.buttons li:hover {
    background-color: var(--much-lighter);
}
.flex-list.buttons li.active {
    background-color: var(--much-darker);
}

.player > h4 {
    margin: 0;
    font-size: 1.35em;
    font-weight: 400;
}

.player:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2.75em' viewBox='0 0 512 512'%3E%3Cpath style='fill:white;opacity:.5' d='M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/svg%3E");
    display: block;
    grid-area: i;
    height: 100%;
    margin-right: 1em;
}
/*.stats-table {
    display: grid;
}
.stats-table thead,
.stats-table tbody,
.stats-table tr {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    grid-row: 1 / 17;
}
.stats-table thead { grid-column-start: 1 }
.stats-table tbody tr:nth-child(1) td { grid-column-start: 2 }
.stats-table tbody tr:nth-child(2) td { grid-column-start: 3 }
.stats-table tbody tr:nth-child(3) td { grid-column-start: 4 }
.stats-table tbody tr:nth-child(4) td { grid-column-start: 5 }
.stats-table tbody tr:nth-child(5) td { grid-column-start: 6 }
.stats-table tbody tr:nth-child(6) td { grid-column-start: 7 }
.stats-table tbody tr:nth-child(7) td { grid-column-start: 8 }
.stats-table tbody tr:nth-child(8) td { grid-column-start: 9 }
.stats-table tbody tr:nth-child(9) td { grid-column-start: 10 }
.stats-table tbody tr:nth-child(10) td { grid-column-start: 11 }
.stats-table tbody tr:nth-child(11) td { grid-column-start: 12 }
.stats-table tbody tr:nth-child(12) td { grid-column-start: 13 }
.stats-table tbody tr:nth-child(13) td { grid-column-start: 14 }
.stats-table tbody tr:nth-child(14) td { grid-column-start: 15 }
.stats-table tbody tr:nth-child(15) td { grid-column-start: 16 }
.stats-table tbody tr:nth-child(16) td { grid-column-start: 17 }
.stats-table tbody tr:nth-child(17) td { grid-column-start: 18 }
.stats-table tbody tr:nth-child(18) td { grid-column-start: 19 }

.stats-table tbody tr td:nth-child(1) { grid-row-start: 1 }
.stats-table tbody tr td:nth-child(2) { grid-row-start: 2 }
.stats-table tbody tr td:nth-child(3) { grid-row-start: 3 }
.stats-table tbody tr td:nth-child(4) { grid-row-start: 4 }
.stats-table tbody tr td:nth-child(5) { grid-row-start: 5 }
.stats-table tbody tr td:nth-child(6) { grid-row-start: 6 }
.stats-table tbody tr td:nth-child(7) { grid-row-start: 7 }
.stats-table tbody tr td:nth-child(8) { grid-row-start: 8 }
.stats-table tbody tr td:nth-child(9) { grid-row-start: 9 }
.stats-table tbody tr td:nth-child(10) { grid-row-start: 10 }
.stats-table tbody tr td:nth-child(11) { grid-row-start: 11 }
.stats-table tbody tr td:nth-child(12) { grid-row-start: 12 }
.stats-table tbody tr td:nth-child(13) { grid-row-start: 13 }
.stats-table tbody tr td:nth-child(14) { grid-row-start: 14 }
.stats-table tbody tr td:nth-child(15) { grid-row-start: 15 }
.stats-table tbody tr td:nth-child(16) { grid-row-start: 16 }
.stats-table tbody tr td:nth-child(17) { grid-row-start: 17 }
.stats-table tbody tr td:nth-child(18) { grid-row-start: 18 }*/

.stats-table thead,
.stats-table tbody,
.stats-table tr {
    display: block;
    float:  left;
}
.stats-table thead {
    border-right: 1px solid var(--much-lighter);
}

.stats-table th,
.stats-table td {
    display: block;
    height: 1.8em;
    padding: .2em;
}

.stats-table thead th {
    text-align: right;
}

.stats-table tbody td {
    text-align: center;
}

.fantasy-match-lineup,
table.player-list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5em;
}

.fantasy-match-lineup .position { cursor: pointer }

.fantasy-match-lineup th {
    text-align: center;
}
.fantasy-match-lineup .position td {
    text-align: center;
    background-color: var(--lighter);
    padding: 1em;
}
#player-list th,
#roster th { text-align: left; padding-left: 1em }

table.player-list td {
    background-color: var(--lighter);
    padding: 1em;
}

.fantasy-match-lineup td:first-child,
.fantasy-match-lineup th:first-child,
table.player-list td:first-child,
table.player-list th:first-child {
    border-radius: 1em 0 0 1em;
}
.fantasy-match-lineup td:first-child,
.fantasy-match-lineup th:first-child {
    text-align: right;
}

.fantasy-match-lineup td:last-child,
.fantasy-match-lineup th:last-child,
table.player-list td:last-child,
table.player-list th:last-child {
    border-radius: 0 1em 1em 0;
}
.fantasy-match-lineup td:last-child,
.fantasy-match-lineup th:last-child {
    text-align: left;
}
table.player-list [open-modal] {
    padding: .5em 1em;
}

.lineup-form {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1em;
}

.lineup-form td {
    background-color: var(--lighter);
    padding: 1em;
}
.lineup-form td:first-child,
.lineup-form th:first-child {
    border-radius: 1em 0 0 1em;
}
.lineup-form td:last-child,
.lineup-form th:last-child {
    border-radius: 0 1em 1em 0;
}



.fantasy-match-lineup a {
    text-decoration: none;
}

.collapsible-stats {
    overflow: hidden;
    transition: height .5s;
    height: 0;
}
.show .collapsible-stats.x-long {
    height: 19em;
    height: 16lh;
}
.show .collapsible-stats.long {
    height: 18em;
    height: 15lh;
}
.show .collapsible-stats.short {
    height: 4em;
    height: 3lh;
}
.show .collapsible-stats.none {
    height: 1.5em;
    height: 1lh;
}

.fantasy-match-lineup dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-flow: dense;
    grid-column-gap: 1em;
}

.show td:first-child dt:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1lh;
    border-bottom: 1px solid var(--lighter);
}

.fantasy-match-lineup dd {
    margin: 0;
}

.fantasy-match-lineup td:last-child dl {
    grid-template-columns: auto 1fr;
}

.fantasy-match-lineup td:last-child dd {
    grid-column: 1;
}

.fantasy-match-lineup td:last-child dt {
    grid-column: 2;
}

th.rotate {
    display: none;
}

.inline dt {
    display: inline;
    float: left;
    margin-right: 1em;
    font-weight:  bold;
}

.inline dd {
    display: block;
}

.inline dt:after {
    content: ":";
}

.activity {
    min-width: 200px;
    width: 34%;
    display: flex;
    flex-direction: column;
    gap: .25em;
    flex-grow: 1;
    margin: 0.5em 0;
}

.activity em {
    font-size: 80%;
    padding-bottom: .25em;
    /* border-bottom: 1px solid white; */
}

.activities-list {
    display: flex;
    column-gap: 1em;
    overflow: hidden;
    flex-wrap: wrap;
}

.modal {
    position: fixed;
    top: 0;
    left: -1000vw;
}

.modal.open {
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--much-darker);
    backdrop-filter: brightness(0.5) blur(3px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.narrow > * {
    width: 500px;
    max-width: 95vw;
    max-height: 95vh;
}

.modal.wide > * {
    width: 900px;
    max-width: 95vw;
    max-height: 95vh;
}

.bg-fixed-light {
    background-color: #393b41;
}

[type="submit"] {
    font-size: 1em;
    border: 0;
    padding: .5em 1em;
    border-radius: 1em;
    background-color: var(--super-lighter);
    color: white;
}

#new-bid tr:not(:first-child) td {
    padding-top: 1em;
}

#bid-player,
#bid-release {
    width: 100%;
}

#bid-player {
    background-color: var(--much-darker);
    border: 1px solid grey;
    color: grey;
    padding:.25em;
    font-size:1em;
}

#bid-release,
#bid-amount {
    background-color: transparent;
    border: 1px solid white;
    padding:.25em;
    font-size:1em;
    color: white;
}

#new-bid option {
    background-color: #313338;
}

[type="text"],
[type="password"],
[type="email"] {
    background-color: transparent;
    border: 1px solid white;
    padding: .25em;
    color: white;
    font-size: 1em;
}

#match-result {
    width: 100%;
    text-align: center;
    font-size: 1.2em;
}

#match-result tr[winner="1"] td:nth-child(-n + 2),
#match-result tr[winner="0"] td:nth-child(n + 3) {
    font-weight: bold;
}

.overflow-auto-container {
    width: 100%;
    overflow: auto;
}
a.subtle-link {
    text-decoration: none;
}

table.team-stats {
    width: 100%;
    border-spacing: 0;
    table-layout: fixed;

    thead th {
        border-bottom: 2px solid #fff7;
    }
    tbody {
        th {
            text-align: right;
        }
        td {
            text-align: center;
        }
    }
    td, th { padding: .25em 0; }
}

.inline-chart {
    display: inline-flex;
    width: 100%;
    height: 1lh;
    position: relative;
    background-color: white;
    /*padding: 2px;
    gap: 2px;*/
}
.inline-chart:before,
.inline-chart:after {
    content: "";
    display: block;
    height: 100%;
    width: 0px;
    border: 2px solid white;
    box-sizing: border-box;
}
.inline-chart:before {
    flex-grow: var(--v1);
    background-color: var(--c1);
}
.inline-chart:after {
    flex-grow: var(--v2);
    background-color: var(--c2);
}

.notice:not(.icon-none):before {
    content: "!";
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    float: left;
    width: 2lh;
    height: 2lh;
    margin-inline-start: -.5lh;
    margin-block-start: -.5lh;
    margin-inline-end: .5em;
    background-color: var(--much-lighter);
    border-radius: 1lh;
    line-height: 1em;
    font-size: 1.2em;
}
.dense.notice:not(.icon-none):before {
    font-size: 1em;
    margin-block-end: -.5lh;
}
.warning {
    --lighter: rgb(255 178 178 / 11%);
    --much-lighter: rgb(255 178 178 / 24%);
    --super-lighter: rgb(255 178 178 / 44%);
}
.positive {
    --lighter: rgb(178 234 255 / 11%);
    --much-lighter: rgb(178 234 255 / 24%);
    --super-lighter: rgb(178 234 255 / 44%);
}
.caution {
    --lighter: rgb(255 253 178 / 11%);
    --much-lighter: rgb(255 253 178 / 24%);
    --super-lighter: rgb(255 253 178 / 44%);
}
.icon-x:before {
    content: "\2573";
    content: "\2716";
}
.icon-check:before {
    content: "\2714";
}
.icon-crown:before {
    content: "\♕";
    font-weight: normal;
}
button.notice:not(.icon-none) {
    border: 0;
    color: white;
    cursor: pointer;
    border-radius: 2em;
    font-size: 1rem;
    display: inline-flex;
    gap: .5em;
    padding: .5em 1em .5em .5em;
    align-items: center;
}
button.notice:not(.icon-none):before {
    margin-inline-start: 0;
    margin-block-start: 0;
    margin-inline-end: 0;
    line-height: .75em;
    font-size: 1em;
}

[popover].top-notice {
    display: block;
    margin-top: 0;
    padding: 0;
    width: calc(100% - 4em);
    background-color: transparent;
    border: 0;
    translate: 0 -100%;
    transition: translate 0.25s ease-out, overlay 0.25s ease-out allow-discrete;
}
[popover].top-notice p.notice {
    margin: 0;
    padding: 1.25em;
    color: white;
    border-radius: 0 0 1em 1em;
}
[popover] p.notice.warning { background-color: #644d53 }
[popover] p.notice.caution { background-color: #646553 }
[popover] p.notice.positive { background-color: #4c5f6b }

[popover].top-notice:popover-open {
    translate: 0 0;
    transition: translate 0.25s ease-out;
}
::backdrop {
    background-color: #0009;
}