body {
    background: #bbb;
    color: #000;
    font-family: 'Times New Roman', Times, serif;
    font-size: 100%;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 2;
    margin: 0;
}
body.auth {
    background: #146;
    color: #fff;
}
body.patron {
    background: #146;
    color: #fff;
}
a {
    background: inherit;
    color: #137;
    text-decoration-color: #9cd;
    text-decoration-skip-ink: none;
    text-decoration-thickness: .25rem;
}
a:hover {text-decoration-color: #d59}
a:active {
    background: #b47;
    color: #fff;
    text-decoration-color: #fff;
}
button[type="submit"],
input[type="submit"],
.page > nav .session .login:hover,
.page > nav .session .logout:hover,
.page > nav .session .login,
.page > nav .session .logout {
    background: #eca;
    border-radius: .25rem;
    border: none;
    color: #000;
    font-family: 'Times New Roman', Times, serif;
    font-size: 100%;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    padding: .5rem;
    text-decoration-skip-ink: none;
    text-decoration: solid underline #eb7 .25rem;
}
button[type="submit"]:hover,
input[type="submit"]:hover,
.page > nav .session .login:hover:hover,
.page > nav .session .logout:hover:hover,
.page > nav .session .login:hover,
.page > nav .session .logout:hover {
    outline: .0625rem solid #9999;
    text-decoration-color: #d59;
}
.page {
    background: #ddd;
    color: #000;
    margin: 0 auto;
}
@media(min-width: 960px) {
    .page {
        max-width: 59.5rem;
    }
}
.page > header,
.page > nav,
.page > main,
.page > footer {
    padding: 1rem 1rem 1rem 2rem;
}
.page > header {
    background: linear-gradient(42deg, #013 0%, #2ad 100%);
    color: #fff;
}
.page > header a {
    background: transparent;
    color: #fff;
    font-size: 200%;
}
.page > header a::after {
    background: transparent;
    color: #eb7;
    content: ' ★';
    text-shadow: 0 0 1rem #eb7;
}
.page > header a:hover,
.page > header a:hover::after {text-shadow: 0 0 1.5rem #fff}
.page > header a:active,
.page > header a:active::after {text-shadow: 0 0 2.5rem #fff}
.page > nav {
    background: #eeea;
    backdrop-filter: blur(0.5rem);
    color: #000;
    position: sticky;
    top: 0;
    z-index: 1;
}
.page > nav, .page > footer {
    border-bottom: .125rem solid #bbb;
    border-top: .25rem solid #eb7;
}
.page > nav ul,
main > nav.subs ul,
ul.watchToggle {
    display: inline;
    margin: .25rem 0 0 0;
    padding: 0;
}
.page > nav li,
main > nav.subs li,
.watchToggle li {
    display: inline;
    margin-right: 1rem;
}
.page > nav li:last-child,
main > nav.subs li:last-child {margin-right: 0}
.page > nav li a,
main > nav.subs li a {
    border-radius: .25rem;
    margin: 0;
    padding: .5rem;
}
.page > nav li a:hover,
main > nav.subs li a:hover {outline: .0625rem solid #9999}
.page > nav .session,
.watchToggle {
    float: right;
    margin: 0 1rem;
}
button[type="submit"]:active,
input[type="submit"]:active,
.page > nav .session .login:active,
.page > nav .session .logout:active {
    background: #b47;
    color: #fff;
    text-decoration-color: #fff;
}
.page > nav .session img {
    max-height: 1.5rem;
    vertical-align: middle;
}
.here {
    background: #fff;
    color: inherit;
    font-weight: bold;
}
h1 {
    font-size: 1.75rem;
    font-weight: normal;
    line-height: 1.25;
    margin: 2rem 0 1rem 0;
    text-wrap: balance;
}
h1 a {
    color: #000;
    background: inherit;
}
table {border-collapse: collapse}
tr:nth-child(odd) {background-color: #f4f4f4}
td, th {padding: 0 .5rem}
th {
    background-color: #eee;
    border-bottom: .25rem solid #eb7;
}
input {
    font-family: sans-serif;
}
input[type="email"], input[type="password"], input[type="search"], input[type="text"] {
    border-color: #9cd;
    border-style: solid;
    border-width: 0 0 .25rem 0;
    display: block;
    margin-right: 1rem;
    max-width: 100%;
    padding: .25rem .5rem;
    width: 40rem;
}
input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="text"]:focus {
    border-color: #eb7;
    outline: none;
}
/* button[type="submit"], input[type="submit"] {
    background: linear-gradient(42deg, #013 0%, #2ad 100%);
    border: none;
    border-radius: .25rem;
    color: #fff;
    padding: .5rem 1rem;
} */
summary {display: block}
.filter, .info, .pagination, .subs {
    background: #eee;
    color: #000;
    margin-left: -1rem;
    padding: .5rem 1rem;
}
.filter {
    display: flex;
}
.filter input[type="search"] {
    flex: 1;
    margin-right: .5rem;
}

.filter input[type="submit"] {
    width: auto;
}
.dateNav {
    display: inline-block;
    float: right;
    margin-left: 1rem;
}
.dateNav a {
    background: #eee;
    border-radius: .25rem;
    color: #000;
    padding: .5rem 1.5rem;
}
.dateNav a:hover {outline: .0625rem solid #9999}
.dateNav .next,
.dateNav .prev,
.dateNav .today {display: inline}
.pagination a {padding: .5rem}
.pagination .first,
.pagination .prev {margin-right: 1rem}
.pagination .next,
.pagination .last {margin-left: 1rem}
.info .dt {
    float: right;
    margin-left: 1rem;
    text-wrap: balance;
}
.empty {font-style: italic}
.info p {margin: 0}
.topicList {
    display: block;
    margin: 0;
    padding: 0;
}
.more::before {content: '➤ '}
details[open] {border-bottom: inherit}
details:not([open]) summary {border-bottom: .125rem dashed #bbb}
details[open] summary *:after {content: ' ⌃'}
details:not([open]) summary *:after {content: ' ⌄'}
details[open] .det {
    animation: det-open .25s ease-in-out;
    opacity: 1;
}
details summary:hover {border-color: #d59}
details summary:hover *:after {
    color: #d59;
    background: inherit;
}
@keyframes det-open {
    0% {
        margin-top: -2rem;
        opacity: 0;
    }
    100% {
        margin-top: 0;
        opacity: 1;
    }
}
.storyTitle a {display: inline-flex}
.storyTitle a .sentiment {
    background: inherit;
    color: #d59;
}
.topicList li {display: inline}
.topicName {
    background: #fff;
    border: .0625rem solid #d68;
    color: inherit;
    display: inline-flex;
    margin: .25rem 0;
    padding: .125rem .5rem;
}
.link {word-wrap: break-word}
.weight {
    background: inherit;
    color: #d59;
}
div.content {
    background: #fff;
    border-top: .25rem solid #eb7;
    color: #000;
    margin-left: -1rem;
    overflow: auto;
    padding: 1rem;
}
a.external::after {content: " 🔗"}
.page > footer {
    background: #ccc;
    color: #000;
}
.cal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.calWeek {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}
.calDay, .calDayEmpty, .calDayFuture, .calDayToday {
    width: 14.28%;
    padding: .5rem;
    text-align: center;
    border: .0625rem solid #ccc;
}
.calDayEmpty {
    background: #eee;
    color: inherit;
}
.calDayToday {border: .25rem solid #eb7}
.calDayInfo, .calDayInfo li {
    display: block;
    margin: 0;
    padding: 0
}
.calDayNum {
    font-size: 200%;
    margin: 0;
}
.dashboard {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}
.dashboard .icon, .dashboard .metric {
    display: block;
    margin-right: 3rem;
}
.dashboard .value {
    display: block;
    font-size: 3rem;
    line-height: 2rem;
    margin-bottom: .5rem;
}
.tlRel {
    background: #eeea;
    backdrop-filter: blur(0.5rem);
    border-bottom: .25rem solid #eb7;
    color: #000;
    margin-bottom: 0;
    margin-left: -1rem;
    margin-top: 3rem;
    padding-left: 1rem;
    position: sticky;
    top: 4.5rem;
}
.chart .pie {
    float: right;
    max-width: 60%;
}
.pieSlice {
    fill: none;
    stroke-width: 40px;
}
.pieSlice:hover {stroke-width: 48px}
.viz1 {stroke: #328}
.viz2 {stroke: #8ce}
.viz3 {stroke: #4a9}
.viz4 {stroke: #173}
.viz5 {stroke: #993}
.viz6 {stroke: #dc7}
.viz7 {stroke: #c67}
.viz8 {stroke: #825}
.viz9 {stroke: #a49}
.chart .legend li::marker {
    content: "🞆 ";
    display: list-item;
}
li.viz1::marker {color: #328}
li.viz2::marker {color: #8ce}
li.viz3::marker {color: #4a9}
li.viz4::marker {color: #173}
li.viz5::marker {color: #993}
li.viz6::marker {color: #dc7}
li.viz7::marker {color: #c67}
li.viz8::marker {color: #825}
li.viz9::marker {color: #a49}
@media (max-width: 35.5rem) {
    .cal, .calWeek {display: block}
    .calDay, .calDayToday {
        display: flex;
        gap: 2rem;
        justify-content: center;
        width: auto;
    }
    .calDayEmpty, .calDayFuture {display: none}
    .calDayNum, .calDayInfo {
        align-items: flex-start;
        align-self: center;
        display: inline-flex;
        flex-direction: column;
    }
    .chart .pie {max-width: 100%}
    .dateNav,
    .info .dt,
    .page > nav .session {
        display: block;
        float: none;
        text-align: right;
    }
    .tlRel {top: 6.5rem}
}
@media (max-width: 19.5rem) {
    .calDay, .calDayNum, .calDayInfo {display: block}
}
.page > footer a {
    text-decoration-color: #137;
    text-decoration-thickness: .0625rem;
}