:root {
    --header-height: 60px;
    --header-color: #222;
    --nav-thickness: 64px;
    --nav-icon-color: gray;
    --nav-icon-selected-color: #d05a57;
    --text-color: black;
    --muted-text-color: #444;
    --bg-color: white;
    --muted-bg-color: #eee;
    --muted2-bg-color: #ddd;
    --muted3-bg-color: #bbb;
    --accent-color: #EAF1FB;
    --selected-color: #D3E3FD;
    --pure-color: white;
    --correct-color: #8ef595;
    --incorrect-color: #f5f582;
    --warning-color: #fa6969;
    --good-color: #00b657;
    --okay-color: #e9a400;
    --bad-color: #ff003a;
}
@media (max-aspect-ratio: 1/1) { /* tall viewport */
    :root {
        --nav-thickness: min(17vw, 80px);
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: white;
        --muted-text-color: #aaa;
        --bg-color: black;
        --muted-bg-color: #333;
        --muted2-bg-color: #444;
        --muted3-bg-color: #555;
        --accent-color: #333333;
        --selected-color: gray;
        --pure-color: black;
        --correct-color: #08730f;
        --incorrect-color: #9c9c0b;
        --warning-color: #9c0b0b;
    }
}

html {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-color);
    overflow-x: hidden;
    touch-action: pan-y;
    overscroll-behavior: none;
}

body {
    background-color: var(--header-color); /* notch becomes this color */
    margin: 0;
    touch-action: pan-y;
}

a {
    text-decoration: none;
    color: inherit;
}
.markdown a {
    color: revert;
    text-decoration: revert;
}
img, picture, video {
    max-width: 100%;  /* make every visual responsive */
}
button:enabled,
input[type=button]:enabled,
img.preview,
img.trashcan {
    cursor: pointer; /* make all buttons have finger pointer on hover */
}
button {
    user-select: none;
    -webkit-user-select: none;
}
input {
    box-sizing: border-box;
    color: inherit;
    background-color: inherit;
    font-size: inherit;
}
textarea {
    box-sizing: border-box;
    padding: 4px;
    border-width: 0;
    color: inherit;
    background-color: inherit;
    font-size: inherit;
    font-family: inherit; /* don't use the monospace font */
    resize: none;         /* remove the resize handle */
    overflow: hidden;     /* don't show a scrollbar */
}
body.waiting {
    cursor: progress;
}
.announcements-bg {
    background-color: #5D5E6D;
}
.feedback-bg {
    background-color: #E5A36E;
}
.pulse-bg {
    background-color: #F1807C;
}
.events-bg {
    background-color: #91B4CF;
}
.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}
.horizontal-scrollable {
    max-width: 100%;
    overflow-x: auto;
}
label div {
    user-select: none;
    -webkit-user-select: none;
}
#header {
    background-color: var(--header-color);
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    padding-top: 4px;
    padding-inline-end: 8px;
    padding-bottom: 4px;
    padding-inline-start: calc(var(--nav-thickness) + 8px);
    height: var(--header-height);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    user-select: none;
}
@media (max-aspect-ratio: 1/1) { /* tall viewport */
    #header {
        padding-inline-start: 8px;
    }
}
#header #logo {
    height: 70%;
}
#header #logo svg {
    height: 100%;
    fill: white;
}
#header div.avatar {
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
}
#header div.logo {
    flex-shrink: 1;
}
#header img {
    height: calc(var(--header-height) - 8px);
}
#navbar {
    position: fixed;
    width: var(--nav-thickness);
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    overflow: hidden;
    background-color: var(--header-color);
}
@media (max-aspect-ratio: 1/1) { /* tall viewport */
    #navbar {
        width: auto;
        height: var(--nav-thickness);
        top: auto;
        inset-inline-end: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
#navbar .icons {
    width: 100%;
    margin-top: var(--header-height);
    display: flex;
    flex-direction: column;
    gap: min(30px, 1vh);
}
@media (max-aspect-ratio: 1/1) { /* tall viewport */
    #navbar .icons {
        width: auto;
        height: 100%;
        margin-top: 0;
        flex-direction: row;
        gap: min(30px, 1vw);
    }
}
#navbar a {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    aspect-ratio: 1/1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-aspect-ratio: 1/1) { /* tall viewport */
    #navbar a {
        width: auto;
        height: 100%;
    }
}
#navbar svg {
    width: 100%;
    height: 100%;
    fill: var(--nav-icon-color);
}
#navbar a.selected svg {
    fill: var(--nav-icon-selected-color);
}
#navbar .dot {
    display: none;
    width: 20%;
    height: 20%;
    background-color: #ff6b00;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    right: 8px;
}
#navbar a.show-dot .dot {
    display: block;
}
#navbar .img-container {
    flex-grow: 1;
}
#navbar img {
    height: 100%;
}
@media (prefers-color-scheme: dark) {
    #navbar img {
        filter: invert(98%) sepia(0%) saturate(0%) hue-rotate(128deg) brightness(107%) contrast(102%);
    }
}
.centered-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
#modal-scrim {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}
#modal-scrim.dialog-add-role #dialog-add-role,
#modal-scrim.dialog-message #dialog-message,
#modal-scrim.dialog-confirm #dialog-confirm,
#modal-scrim.dialog-prompt-string #dialog-prompt-string,
#modal-scrim.dialog-feedback #dialog-feedback,
#modal-scrim.dialog-share #dialog-share,
#modal-scrim.dialog-help #dialog-help {
    display: flex;
}
body.modal-scrim #modal-scrim {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.modal-scrim #modal-scrim.logo-menu,
body.modal-scrim #modal-scrim.avatar-menu {
    display: block;
}
#waiting-scrim {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}
#waiting-scrim img {
    height: 5vh;
}
body.waiting #waiting-scrim {
    display: flex;
}
#logo-menu,
#avatar-menu {
    user-select: none;
    -webkit-user-select: none;
    position: absolute;
    top: var(--header-height);
    background-color: var(--muted-bg-color);
    border: 1px solid gray;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    display: none;
    flex-direction: column;
}
#logo-menu {
    inset-inline-start: var(--nav-thickness);
}
@media (max-aspect-ratio: 1/1) { /* tall viewport */
    #logo-menu {
        inset-inline-start: 0;
    }
}
#avatar-menu {
    inset-inline-end: 0;
}
#logo-menu > div,
#logo-menu > a,
#avatar-menu > div,
#avatar-menu > a {
    padding: 8px;
}
#avatar-menu > a:last-child,
#logo-menu > a:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
#avatar-menu div:hover,
#avatar-menu a:hover,
#logo-menu a:hover {
    background-color: var(--bg-color);
}
#avatar-menu div.hline {
    padding: 0;
}
#modal-scrim.logo-menu #logo-menu,
#modal-scrim.avatar-menu #avatar-menu {
    display: flex;
}
#dialog-add-role,
#dialog-message,
#dialog-confirm,
#dialog-prompt-string,
#dialog-waiting,
#dialog-feedback,
#dialog-share,
#dialog-help {
    background-color: var(--accent-color);
}
#dialog-message.error {
    background-color: var(--warning-color);
}
#dialog-add-role,
#dialog-message,
#dialog-confirm,
#dialog-prompt-string,
#dialog-waiting,
#dialog-feedback,
#dialog-share,
#dialog-help {
    display: none;
    width: min(600px, 100%);
    max-height: 60%;
    padding: 2vh 2vw;
    border: 1px solid gray;
    border-radius: 8px;
    flex-direction: column;
    gap: 12px;
}
#dialog-prompt-string {
    height: min(200px, 50%);
    justify-content: space-evenly;
}
#dialog-feedback {
    height: min(400px, 60%);
}
#dialog-waiting {
    display: flex;
}
#dialog-feedback .title {
    font-size: larger;
    padding-bottom: 8px;
    border-bottom: 1px solid gray;
}
#dialog-feedback textarea {
    flex-grow: 1;
}
#dialog-feedback label {
    text-align: center;
}
#dialog-help .header {
    padding-bottom: 8px;
    border-bottom: 1px solid gray;
    display: flex;
    align-items: center;
    gap: 8px;
}
#dialog-help .title {
    font-size: larger;
}
#dialog-help svg {
    width: 24px;
    height: 24px;
}
#dialog-help .docs {
    overflow-y: auto;
}
#dialog-waiting > div {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#dialog-share .title {
    font-size: larger;
}
#dialog-share a {
    display: flex;
    align-items: center;
    gap: 8px;
}
#dialog-share img {
    border-radius: 4px;
}
#dialog-share #link-container.copied .copylink,
#dialog-share .linkcopied {
    display: none;
}
#dialog-share #link-container.copied .linkcopied {
    display: block;
}
.error, .warning {
    background-color: var(--warning-color);
}
#avatar-menu-email {
    font-family: monospace;
    pointer-events: none;
}
.hline {
    border-bottom: 1px solid gray;
}
.hline:first-child {
    display: none;
}
.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* View post page */
#view-post-page {
    background-color: var(--bg-color);
    padding-top: var(--header-height);
    line-height: 1.6;
    gap: 0;
}
#view-post-page .length {
    font-weight: lighter;
}
hr.attention-tracker {
    width: 1px;
    height: 3px;
    margin: 0;
    border: none;
    background-color: var(--correct-color);
}
hr.attention-tracker.waiting {
    width: min(800px, calc(100% - 16px));
    transition: width 2.5s linear;
}
#view-post-page .chapter.complete hr.attention-tracker {
    display: none;
}
#view-post-page textarea {
    border: 1px solid gray;
    border-radius: 4px;
}
#view-post-page .body {
    width: 100%;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
#view-post-page .chapters {
    width: 100%;
    overflow-x: hidden;
}
#view-post-page .chapter {
    width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
#view-post-page .chapter-break {
    padding-top: 20px;
    font-size: x-large;
}
#view-post-page .chapter:first-child .chapter-break {
    padding-top: 0;
}
#view-post-page .chapter.current .chapter-break {
    background-color: inherit;
}
#view-post-page .chapter-screen {
    width: min(800px, calc(100% - 16px));
    height: 50px;
    margin-bottom: 40px;
    color: white;
    background-color: gray;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#view-post-page .chapter.current .chapter-screen,
#view-post-page .chapter.complete .chapter-screen {
    display: none;
}
#view-post-page .chapter-sections {
    display: none;
    width: 100%;
    padding: 20px 0;
    background-size: cover;
    background-position: center;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
#view-post-page .chapter:first-child .chapter-sections {
    padding-top: 0;
}
#view-post-page .chapter.current .chapter-sections,
#view-post-page .chapter.complete .chapter-sections {
    display: flex;
}
#view-post-page .chapters button.continue {
    display: none;
    background-color: var(--muted3-bg-color);
}
#view-post-page .chapter.current button.continue {
    display: block;
}
#view-post-page .list {
    width: 80%;
}
#view-post-page .list ul {
    margin: 0;
}
#view-post-page .list li {
    margin-top: 1em;
}
#view-post-page .list li:first-child {
    margin-top: 0;
}
#view-post-page .section a {
    text-decoration: underline;
}
#view-post-header .title-tagline,
#view-post-page .authors,
#view-post-page .tagline-in-body,
#view-post-page .chapter-break,
#view-post-page .section.paragraph,
#view-post-page .section.list {
    width: min(800px, calc(100% - 16px));
}
#view-post-page .section.emphasis {
    width: min(700px, calc(80% - 16px));
}
#view-post-page .section.emphasis .text-html {
    align-items: flex-end;
    color: var(--nav-icon-selected-color);
    font-size: x-large;
    text-align: center;
    gap: 0;
}
#view-post-page .paragraph > img,
#view-post-page .quiz-question > img,
#view-post-page .factual-question > img {
    max-width: 40vw;
    border-radius: 8px;
}
#view-post-page .image {
    width: 100%;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
#view-post-page .full-width-image {
    width: 100%;
    height: 50vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#view-post-page .full-width-image img {
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}
#view-post-page .uncroppable-image {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#view-post-page .image > div.text-html {
    width: min(600px, calc(100% - 40px));
    text-align: center;
    font-style: italic;
}
#view-post-page .open-question,
#view-post-page .open-question-opt,
#view-post-page .survey-question,
#view-post-page .ai-response,
#view-post-page .quiz-question,
#view-post-page .factual-question {
    width: min(800px, calc(100% - 16px));
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#view-post-page .open-question,
#view-post-page .open-question-opt,
#view-post-page .survey-question,
#view-post-page .quiz-question,
#view-post-page .factual-question {
    background-color: var(--bg-color);
}
#view-post-page .section.ai-response button {
    background-color: var(--muted3-bg-color);
}
#view-post-page .ai-response {
    padding: 20px 8px;
    border-radius: 15px;
    background-color: var(--muted-bg-color);
}
#view-post-page .ai-response .text-html {
    gap: 12px;
}
#view-post-page .ai-response .prompt {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
#view-post-page .ai-response.with-answer .prompt {
    display: none;
}
#view-post-page .ai-response .prompt img {
    display: none;
    height: 48px;
    margin: -14px 0;
}
#view-post-page .ai-response.thinking .prompt img {
    display: block;
}
#view-post-page .ai-response .response {
    display: none;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
#view-post-page .ai-response.with-answer .response {
    display: flex;
}
#view-post-page .choices {
    color: var(--muted-text-color);
    display: flex;
    gap: 20px;
    justify-content: center;
}
#view-post-page .choices.vertical {
    flex-direction: column;
    gap: 12px;
}
#view-post-page .choices label {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
#view-post-page .choices.vertical label {
    text-align: left;
    flex-direction: row;
}
#view-post-page .choices img {
    max-width: 50px;
    border-radius: 50%;
}
#view-post-page .quiz-outcomes {
    width: min(800px, calc(100% - 16px));
    border-radius: 8px;
    background-color: var(--muted2-bg-color);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#view-post-page .quiz-outcomes.revealed {
    background-color: inherit;
}
#view-post-page .quiz-outcomes div.outcome-prompt {
    padding: 50px;
    text-align: center;
}
#view-post-page .quiz-outcomes.revealed div.outcome-prompt {
    display: none;
}
#view-post-page .quiz-outcomes div.outcome {
    display: none;
    padding: 8px;
    border-radius: 8px;
    background-color: var(--muted2-bg-color);
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
#view-post-page .quiz-outcomes.revealed div.outcome {
    display: flex;
}
#view-post-page .quiz-outcomes .title {
    font-weight: bold;
    font-size: larger;
}
#view-post-page .text-html {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#view-post-page .text-html h1,
#view-post-page .text-html h2,
#view-post-page .text-html h3,
#view-post-page .text-html p,
#view-post-page .text-html ol,
#view-post-page .text-html ul {
    margin: 0;
}
#view-post-page .text-html h2 {
    font-size: 1.3em; /* default of 1.5em is too close to the post header title */
}
#view-post-page .text-html a {
    text-decoration: underline;
}
#view-post-page .quiz-outcomes .outcome-header {
    display: none;
}
#view-post-page .quiz-outcomes.revealed .outcome-header {
    display: block;
}
#view-post-page .text {
    white-space: pre-line;
    word-wrap: break-word;
}
#view-post-page .oq-outcomes {
    padding: 20px;
    background-color: var(--muted2-bg-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#view-post-page .oq-outcomes.correct {
    background-color: var(--correct-color);
}
#view-post-page .oq-outcomes.incorrect {
    background-color: var(--incorrect-color);
}
#view-post-page .oq-prompt,
#view-post-page .oq-outcome-0,
#view-post-page .oq-outcome-1,
#view-post-page .oq-outcome-2,
#view-post-page .oq-outcome-3,
#view-post-page .oq-outcome-4 {
    display: none;
}
#view-post-page .oq-outcomes.prompt .oq-prompt {
    display: block;
}
#view-post-page .oq-outcomes.outcome-0 .oq-outcome-0 {
    display: flex;
}
#view-post-page .oq-outcomes.outcome-1 .oq-outcome-1 {
    display: flex;
}
#view-post-page .oq-outcomes.outcome-2 .oq-outcome-2 {
    display: flex;
}
#view-post-page .oq-outcomes.outcome-3 .oq-outcome-3 {
    display: flex;
}
#view-post-page .oq-outcomes.outcome-4 .oq-outcome-4 {
    display: flex;
}
#view-post-page .tagline-in-body {
    font-style: italic;
    display: none;
}
@media (max-aspect-ratio: 1/1) { /* tall viewport */
    #view-post-page .tagline-in-body {
        display: block;
    }
}
#view-post-page .tagline-in-body,
#view-post-header .tagline {
    color: #FF9300;
}
#view-post-page .authors .author-line {
    display: flex;
    gap: 12px;
}
#view-post-page .authors img {
    height: calc(var(--header-height) - 8px);
    border-radius: 8px;
}
#view-post-page .author-line-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: space-evenly;
}
#view-post-page .authors .name {
    font-weight: bold;
}
#view-post-page .original {
    color: var(--muted-text-color);
    font-weight: lighter;
    text-decoration: underline;
}
#view-post-header {
    width: 100%;
    height: 50vh;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#view-post-header img {
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}
#view-post-header .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
}
#view-post-header .authors {
    font-family: monospace;
}
#view-post-header .fade {
    padding: 140px 0 12px 0;
    background: linear-gradient(rgba(0,0,0,0.0), var(--bg-color));
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (max-aspect-ratio: 1/1) { /* tall viewport */
    #view-post-header .fade {
        padding-bottom: 0;
    }
}
#view-post-header .title {
    max-width: 500px;
    font-weight: bold;
    font-size: 1.7em;
    line-height: 1.2;
}
#view-post-header .tagline {
    font-style: italic;
}
@media (max-aspect-ratio: 1/1) { /* tall viewport */
    #view-post-header .tagline {
        display: none;
    }
}
#signed-out-notice {
    width: min(800px, calc(100% - 16px));
    box-sizing: border-box;
    padding: 20px;
    background-color: #ffc62c;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#signed-out-notice .title {
    color: black;
    font-size: larger;
    font-weight: bold;
}
#signed-out-notice .noads {
    color: gray;
    font-size: smaller;
    font-weight: bold;
}
#signed-out-notice a {
    text-decoration: underline;
}
#view-post-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
#view-post-footer .complete-row,
#view-post-footer .action-row {
    width: 100%;
    justify-content: space-evenly;
}
#view-post-footer .complete-row {
    display: none;
}
#view-post-footer.all-chapters-complete .complete-row,
#view-post-footer .action-row {
    display: flex;
}
#view-post-footer label {
    background-color: var(--good-color);
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
#view-post-footer label.post-marked-complete {
    background-color: yellowgreen;
    cursor: default;
}
#view-post-footer label.post-marked-complete .mark-label {
    display: none;
}
#view-post-footer .completed-label {
    display: none;
}
#view-post-footer label.post-marked-complete .completed-label {
    display: block;
}
#view-post-footer .bottom {
    padding: 20px;
    font-weight: lighter;
    font-size: smaller;
    border-top: 1px solid var(--muted2-bg-color);
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
#view-post-footer .site-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
#view-post-footer .copyright {
    text-align: center;
}
#plus-one {
    display: none;
    position: fixed;
    width: 1px;
    height: 1px;
    overflow: visible;
    opacity: 1;
    transition: opacity 1s ease-in, left 500ms ease-out, top 500ms ease-out;
    font-size: xxx-large;
    align-items: center;
    justify-content: center;
}
#plus-one.move {
    display: flex;
}
#plus-one.fade {
    display: flex;
    opacity: 0;
}
#plus-one .background {
    padding: 0 8px;
    border-radius: 8px;
    background-color: rgba(240,240,240,0.5);
}
#view-post-page .chapters button,
#signed-out-notice button,
#view-post-footer button,
#dash-page .first-row button,
#logout-page button {
    color: inherit;
    background-color: inherit;
    padding: 4px 8px;
    border: 1px solid gray;
    border-radius: 8px;
    font-family: inherit;
    font-size: inherit;
}
#signed-out-notice button {
    background-color: var(--bg-color);
}
#view-post-footer .tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
#view-post-footer .tags a {
    padding: 0 8px;
    background-color: var(--muted2-bg-color);
    border-radius: 1em;
}
#view-post-footer .tags a.topic {
    background-color: orange;
}

#content-studio {
    padding: 20px 12px;
    max-width: 100%;
    overflow-x: hidden;
}
#content-studio #results-container {
    max-width: 100%;
    overflow-x: scroll;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto auto;
    align-items: stretch;
    row-gap: 8px;
}
#content-studio img.hero {
    min-height: 100%;
    max-width: none;
    max-height: 100px;
    border-radius: 8px;
}
#content-studio .poster {
    position: relative;
}
#content-studio img.avatar {
    display: block;
    max-width: 75px;
    max-height: 75px;
    border-radius: 4px;
}
#content-studio .posters {
    display: flex;
    align-items: center;
    justify-content: center;
}
#content-studio .address {
    display: none;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
#content-studio .poster:hover .address {
    display: block;
}
#content-studio #results-container .title,
#content-studio #results-container .tags,
#content-studio #results-container .status,
#content-studio #results-container .posters,
#content-studio #results-container .date-time {
    padding: 4px 8px;
    background-color: var(--muted-bg-color);
}
#content-studio #results-container .title {
    min-width: 200px;
    max-width: 320px;
    max-height: 92px;
    overflow-y: hidden;
    color: inherit;
    text-decoration: none;
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
}
#content-studio #results-container .tags {
    min-width: 100px;
    height: 100px;
    box-sizing: border-box;
    overflow-y: hidden;
    font-size: x-small;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}
#content-studio #results-container .tag {
    padding: 4px 8px;
    border-radius: 16px;
    background-color: var(--muted2-bg-color);
}
#content-studio #results-container .overflow {
    padding-top: 4px;
    padding-inline-end: 8px;
    padding-bottom: 4px;
    padding-inline-start: 0;
    background-color: var(--muted-bg-color);
    position: relative;
    border-start-end-radius: 8px;
    border-end-end-radius: 8px;
}
#content-studio #results-container .overflow-dots {
    background-color: inherit;
    border: none;
}
#content-studio #results-container .overflow-menu {
    display: none;
    position: absolute;
    top: -12px;
    inset-inline-end: 100%;
    white-space: nowrap;
    background-color: var(--bg-color);
    border: 1px solid gray;
    border-radius: 4px;
    flex-direction: column;
}
#content-studio #results-container .overflow.open .overflow-menu {
    display: flex;
}
#content-studio #results-container .overflow-menu > div {
    padding: 8px;
}
#content-studio #results-container .overflow-menu > div:first-child {
    border-start-start-radius: 4px;
    border-start-end-radius: 4px;
}
#content-studio #results-container .overflow-menu > div:last-child {
    border-end-start-radius: 4px;
    border-end-end-radius: 4px;
}
#content-studio #results-container .overflow-menu > div:hover {
    background-color: var(--muted-bg-color);
}
#results-container .status,
#results-container .tagline,
#results-container .posters,
#results-container .date-time {
    color: var(--muted-text-color);
}
#results-container .num-translations {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}
#results-container .language-num {
    color: var(--text-color);
}
#results-container svg.language-icon {
    fill: var(--muted-text-color);
}
.table-header {
    font-weight: bold;
    padding: 4px 8px;
}
.right-cell {
    text-align: end;
}
.center-cell {
    text-align: center;
}
.studio-result-image {
    min-width: 140px;
    max-width: 220px;
    overflow-x: hidden;
    height: 100px;
    margin-inline-end: 8px;
    border-radius: 8px;
    display: flex;
    justify-content: end;
}
#post-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    margin-bottom: 50px;
    border: 1px solid gray;
}
#top-action-row {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

/* Edit post page */
#edit-post-page, #dash-analytics, #dash-users, #dash-anns, #dash-polls {
    padding: 20px 8px;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
#edit-post-header {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
}
#edit-post-header img {
    border-radius: 8px;
}
#edit-post-header img:hover {
    background-color: var(--muted-bg-color);
}
#edit-post-header .title-tagline {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#edit-post-header .title-tagline textarea {
    text-align: center;
}
#edit-post-header .edit-tags {
    display: flex;
    flex-direction: column;
}
#edit-post-header .edit-tags button.help {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    align-self: center;
    /* override some button defaults */
    border: none;
    padding: 0;
    background-color: inherit;
}
#edit-post-header .edit-tags svg {
    width: 100%;
    height: 100%;
    fill: var(--muted-text-color);
}
#edit-post-header .author-org {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 20px;
}
#edit-post-header label.anon-check {
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
}
.img-edit {
    position: relative;
}
.img-edit img.trashcan {
    display: none;
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    background-color: rgba(255,255,255,0.5);
    height: 24px;
}
.img-edit.has-image > img.trashcan {
    display: block;
}
#edit-post-controls {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-around;
}

#edit-post-previews {
    width: 95%;
}
#edit-post-previews summary {
    cursor: pointer;
    user-select: none;
}
#edit-post-previews .previews {
    padding: 8px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
#edit-post-previews a {
    text-decoration: underline;
}

#edit-post-body {
    width: 100%;
    display: flex;
    flex-direction: column;
}
#edit-post-body img {
    max-height: 20vh;
    max-width: 20vw;
    border-radius: 8px;
}
#edit-post-body form.section .image img.preview {
    max-height: 30vh;
    max-width: 40vw;
}
#edit-post-body img:hover {
    background-color: var(--bg-color);
}
#edit-post-body .list .choice-radio,
#edit-post-body .list .image-text,
#edit-post-body .list .img-edit,
#edit-post-body .list .effect, 
#edit-post-body .list .outcome {
    display: none;
}
#edit-post-body .list .choice {
    width: 100%;
    flex-direction: row;
    gap: 20px;
}
#edit-post-body .list .choice-content {
    display: list-item;
    flex-grow: 1;
}
#edit-post-body .list .choice-image-text {
    width: 100%;
}
#edit-post-body .list .choice-text {
    text-align: left;
}
#edit-post-body div.outcome-list {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}
#edit-post-body div.outcome {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
#edit-post-body .outcome:first-of-type .outcome-threshold {
    display: none;
}
#edit-post-body div.choice-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
#edit-post-body div.outcome-bottom {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
}
#edit-post-body .choice-image-text {
    display: flex;
    gap: 8px;
    align-items: center;
}
#edit-post-body .choice-outcome-buttons,
#edit-post-body .choice-buttons,
#edit-post-body .outcome-buttons {
    display: none;
    gap: 4px;
}
#edit-post-body .quiz-question .choice-buttons,
#edit-post-body .survey-question .choice-buttons {
    display: flex;
}
#edit-post-body .quiz-question .choice-image-text,
#edit-post-body .survey-question .choice-image-text {
    flex-direction: column;
}
#edit-post-body .quiz-outcomes .outcome-buttons {
    display: flex;
    flex-direction: column;
}
#edit-post-body .quiz-outcomes .outcome-threshold {
    display: flex;
}
#edit-post-body input[type="radio"] {
    margin: 0;
}
#edit-post-body .quiz-outcomes input[type="radio"],
#edit-post-body .quiz-outcomes .choice-image-text {
    display: none;
}
#edit-post-body .quiz-outcomes div.choice,
#edit-post-body .quiz-outcomes .choice-content {
    width: 100%;
}
#edit-post-body .outcome-correct {
    display: none;
}
#edit-post-body .factual-question .outcome-correct {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px dotted gray;
    padding-bottom: 4px;
}
#edit-post-body .factual-question label.correct-radio {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}
#edit-post-body .factual-question fieldset.choices,
#edit-post-body .list fieldset.choices {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
#edit-post-body .factual-question .choice-radio,
#edit-post-body .factual-question .effect {
    display: none;
}
#edit-post-body .factual-question .outcome-threshold,
#edit-post-body .factual-question .outcome-title {
    display: none;
}
#edit-post-body .factual-question div.choice {
    width: 100%;
    flex-direction: row;
}
#edit-post-body .factual-question div.choice-content {
    flex-grow: 1;
    align-items: stretch;
}
#edit-post-body .factual-question .choice-outcome-buttons,
#edit-post-body .list .choice-outcome-buttons {
    display: flex;
    flex-direction: column;
}
#edit-post-body .factual-question textarea.choice-text {
    text-align: start;
}
#edit-post-body div.outcome-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
#edit-post-body input.outcome-title {
    border: none;
    font-size: large;
}
#edit-post-body div.outcome img {
    max-height: 100px;
}
#edit-post-body div.outcome-image-description {
    display: flex;
    gap: 8px;
    align-items: center;
}
#edit-post-body textarea.outcome-markdown {
    flex-grow: 1;
}
#edit-post-body input.scale-add {
    text-align: center;
    font-family: monospace;
    width: 6em;
}
#edit-post-body input.threshold {
    text-align: center;
    font-family: monospace;
    width: 9em;
}
#edit-post-body .outcome-threshold {
    display: flex;
    gap: 12px;
    align-items: center;
}
#edit-post-body .outcome.nonsense input.threshold {
    background-color: red;
}
#edit-post-body .outcome .warning-container {
    position: relative;
}
#edit-post-body .outcome .warning-message {
    display: none;
    position: absolute;
    top: calc(-4px - 0.5lh);
    left: 0;
    padding: 4px;
    border-radius: 4px;
    background-color: red;
}
#edit-post-body .outcome.nonsense:hover .warning-message {
    display: block;
}
#edit-post-body .hline {
    flex-grow: 1;
    border-bottom: 1px dotted gray;
}
#edit-post-body div.choice {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
#edit-post-body div.choice img {
    max-height: 50px;
}
#edit-post-body textarea.choice-text {
    width: 100%;
    text-align: center;
}
#edit-post-body div.effect {
    display: none;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
#edit-post-body .quiz-question div.effect {
    display: flex;
}
#edit-post-body div.outcome-id {
    text-align: center;
}
#edit-post-body .chapter {
    padding-bottom: 40px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
}
#edit-post-body .chapter:last-child .chapter-footer {
    display: none;
}
#edit-post-body .chapter > .title-bar {
    display: none;
    padding-bottom: 8px;
    gap: 12px;
    align-items: center;
}
#edit-post-body .chapter > .title-bar img.preview {
    max-width: 4rem;
    max-height: 4rem;
}
#edit-post-body .chapter input.title {
    font-size: larger;
    background-color: inherit;
    border: none;
    flex-grow: 1;
}
#edit-post-body .chapter.has-one-scale div.scale {
    display: none;
}
#edit-post-body .chapter.one-section button.delete-section { /* hide delete button for a solo section */
    visibility: hidden;
}
#edit-post-body .delete-chapter {
    visibility: hidden;
}
#edit-post-body .chapter:hover .delete-chapter {
    visibility: visible;
}
#edit-post-body form.section {
    padding: 8px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
#edit-post-body .check-uncroppable {
    display: none;
}
#edit-post-body form.section.image .check-uncroppable {
    display: inline-block;
}
#edit-post-body .section-types {
    display: flex;
    align-items: center;
}
#edit-post-body form.section > div {
    display: flex;
    gap: 12px;
    flex-direction: column;
    align-items: center;
}
#edit-post-body form.section:hover,
#edit-post-body form.section:hover > div.section-header,
#edit-post-body form.section:hover > div.section-footer {
    background-color: var(--muted2-bg-color);
}
#edit-post-body form.section:hover > div {
    background-color: var(--muted-bg-color);
}
#edit-post-body form.section div.section-header {
    visibility: hidden;
    flex-direction: row;
    justify-content: space-between;
}
#edit-post-body form.section div.section-footer {
    visibility: hidden;
    flex-direction: row;
    justify-content: center;
}
#edit-post-body form.section button {
    visibility: hidden;
}
#edit-post-body form.section:hover div.section-header,
#edit-post-body form.section:hover div.section-footer,
#edit-post-body form.section:hover button {
    visibility: visible;
}
#edit-post-body div.image-text {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}
#edit-post-body .section-body.image div.image-text {
    flex-direction: column;
}
#edit-post-body .section-body.paragraph textarea.text-markdown,
#edit-post-body .section-body.emphasis textarea.text-markdown,
#edit-post-body .section-body.factual-question textarea.text-markdown,
#edit-post-body .section-body.open-question textarea.text-markdown,
#edit-post-body .section-body.open-question-opt textarea.text-markdown,
#edit-post-body .section-body.quiz-question textarea.text-markdown,
#edit-post-body .section-body.survey-question textarea.text-markdown,
#edit-post-body .section-body.ai-response textarea.text-markdown {
    flex-grow: 1;
}
#edit-post-body .section-body.emphasis textarea.text-markdown {
    color: var(--nav-icon-selected-color);
    font-size: x-large;
    text-align: center;
}
#edit-post-body .section-body.emphasis .img-edit,
#edit-post-body .section-body.ai-response .img-edit {
    display: none;
}
#edit-post-body fieldset.choices {
    display: none;
    border: none;
    align-items: flex-start;
    gap: 12px;
}
#edit-post-body .section-body.quiz-question fieldset.choices,
#edit-post-body .section-body.survey-question fieldset.choices {
    display: flex;
}
#edit-post-body .section-body.quiz-outcomes fieldset.choices {
    width: 100%;
    display: flex;
    flex-direction: column;
}
#edit-post-body .section-body.quiz-outcomes div.choice {
    flex-direction: row;
}
#edit-post-body .section-body.quiz-outcomes .effect,
#edit-post-body .quiz-outcomes .image-text {
    display: none;
}
#edit-post-body .section-body.quiz-outcomes .choice:first-of-type .outcome-threshold {
    display: none;
}
#edit-post-body .section-body.quiz-question .outcome,
#edit-post-body .section-body.survey-question .outcome {
    display: none;
}
#edit-post-body .section-body.image {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#edit-post-body .section-body.image textarea.text-markdown {
    width: 60%;
    text-align: center;
}
#edit-post-body .section-body.header {
    width: 100%;
    font-size: large;
}
#edit-post-body .section-body.header img {
    display: none;
}
#edit-post-body .section-body.header textarea.text-markdown {
    width: 100%;
    font-weight: bold;
}
#edit-post-body div.outcomes div.outcome-list {
    display:flex;
}
#edit-post-body div.outcomes div.image-text {
    display: none;
}
#edit-post-body #add-chapter {
    border-top: 1px solid gray;
    padding-top: 12px;
}
#edit-post-body.show-chapters .chapter {
    border-top: 1px solid gray;
    padding-top: 12px;
}
#edit-post-body.show-chapters .chapter > .title-bar {
    display: flex;
}
#edit-post-body.show-chapters form.section {
    margin-left: 5vw;
}
#edit-post-footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
textarea.title {
    font-size: x-large;
}
textarea.tagline {
    font-style: italic;
}
#autofetch-trigger > img {
    display: none;
    height: 50px;
}
@media (prefers-color-scheme: dark) {
    #autofetch-trigger > img {
        filter: invert(22%) sepia(68%) saturate(4868%) hue-rotate(326deg) brightness(100%) contrast(104%);
    }
}
#autofetch-trigger.fetching > img {
    display: inline;
}
#autofetch-trigger.nomore {
    display: none;
}
.hidden {
    display: none;
}
#autofetch-trigger {
    width: 100px;
    height: 100px;
}

/* Contacts page */
#contacts-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(transparent, 95%, black),
        center/cover url('https://d2v7eeag9wrxse.cloudfront.net/HJZIWbsp.jpg');
    z-index: -1;
}
#contacts-page {
    background-color: transparent;
}
#contacts-page .contacts-section {
    width: calc(100% - 40px);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
#contacts-page .cs-header {
    font-size: larger;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#contacts-page .cs-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
#contacts-page #add-contact {
    width: min(100px, 16vw, 16vh);
    height: min(100px, 16vw, 16vh);
    border-radius: 8px;
    background-color: var(--bg-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (prefers-color-scheme: dark) {
    #contacts-page #add-contact {
        background-color: var(--muted-bg-color);
    }
}
#contacts-page #add-contact svg {
    width: 60%;
    height: 60%;
    fill: orange;
}
@media (prefers-color-scheme: dark) {
    #contacts-page #add-contact svg {
        fill: white;
    }
}
#contacts-page .contact {
    width: min(100px, 16vw, 16vh);
    height: min(100px, 16vw, 16vh);
    border-radius: 8px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#contacts-page .contact img {
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}
#contacts-page .threads {
    width: min(600px, calc(100% - 8px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
#contacts-compose {
    cursor: pointer;
    position: fixed;
    right: min(10vw, 10vh);
    bottom: min(10vw, 10vh);
    width: max(48px, min(8vw, 8vh, 80px));
    height: max(48px, min(8vw, 8vh, 80px));
    background-color: #FF8003;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-aspect-ratio: 1/1) { /* tall viewport */
    #contacts-compose {
        bottom: calc(min(10vw, 10vh) + var(--nav-thickness));
    }
}
#contacts-compose svg {
    width: 80%;
    height: 80%;
    fill: white;
}

.empty-prompt {
    display: none;
}
.empty-prompt:first-child {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.error-message {
    visibility: hidden;
    color: red;
}
.show-error .error-message {
    visibility: visible;
}
#dfu-enter {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.center-align {
    text-align: center;
}
.end-align {
    text-align: end;
}
.spaced {
    display: flex;
    justify-content: space-around;
}
#dash-messages {
    padding: 20px 8px;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.thread-summary {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--muted-bg-color);
    padding: 8px;
    border-radius: 8px;
    display: grid; /* overridden below to flex for Firefox */
    @-moz-document url-prefix() {
        display: flex;
    }
    grid-template-columns: auto 1fr;
    align-content: flex-start;
    column-gap: 8px;
}
@media (prefers-color-scheme: dark) {
    .thread-summary {
        background-color: var(--muted-bg-color);
    }
}
.thread-summary .name {
    font-weight: bold;
}
.contact-info > a,
.thread-summary .name,
.thread-summary .subject,
.thread-summary .snippet {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.thread-summary-rhs {
    flex: 1 1 100%;
    overflow-x: hidden;
}
.thread-summary-rhs .name-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.thread-summary-rhs .date-time {
    white-space: nowrap;
}
#compose-modal {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}
.composing #compose-modal {
    display: flex;
}
#dialog-compose {
    width: min(800px, 95vw);
    height: 60%;
    padding: 20px;
    border: 1px solid gray;
    border-radius: 8px;
    background-color: var(--accent-color);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 20px;
}
#dc-to,
#dc-subject {
    display: flex;
    align-items: center;
    gap: 8px;
}
#dc-subject input {
    border: none;
    flex-grow: 1;
}
#dc-subject input:focus-visible {
    outline: none;
}
#dc-message {
    flex-grow: 1;
}
#dc-message textarea {
    width: 100%;
    height: 100%;
}

/* Thread page */
#thread-content .thread-to-from {
    display: flex;
    align-items: center;
    gap: 12px;
}
#thread-content .thread-participant {
    display: flex;
    align-items: center;
    gap: 8px;
}
#thread-content .thread-participant img {
    height: 48px;
    border-radius: 8px;
}
#thread-content .thread-header {
    width: 100%;
    padding-bottom: 2vh;
    border-bottom: 1px solid gray;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#thread-content .thread-subject {
    font-size: larger;
}
#thread-content .messages {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#thread-content .message-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
#thread-content .message-header .name {
    font-weight: bold;
}
#thread-content .message-header img {
    height: 48px;
    border-radius: 8px;
}
#thread-content .text {
    white-space: pre-wrap;
}
#thread-fixed {
    width: calc(100% - 4vw);
    max-width: 800px;
    padding: 2vh 2vw 0;
}
#thread-scrollable {
    width: calc(100% - 4vw);
    padding: 2vh 2vw;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.user-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.user-card img {
    height: 12vh;
    min-height: 80px;
    max-height: 200px;
    border-radius: 8px;
}
#reply-container {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#reply-area {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
#reply-container.replying #reply-area {
    display: flex;
}
#reply-container.replying button.reply {
    display: none;
}
#reply-area textarea {
    width: 100%;
}

/* Login page */
#login-page,
#logout-page {
    height: 100vh;
    padding: 0;
    overflow: hidden;
    justify-content: center;
}
#login-page img.background,
#logout-page img.background {
    min-width: 100%;
    max-width: none;
    min-height: 100%;
    max-height: none;
    object-fit: cover;
}
#login-page .content,
#logout-page .content {
    color: white;
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#login-page .content {
    justify-content: space-evenly;
}
#logout-page .content {
    justify-content: flex-end;
}
#login-page .content svg {
    max-width: 90vw;
    fill: white;
}
#login-page .content img,
#logout-page .content img {
    max-height: 100px;
}
#login-page #bottom,
#logout-page #bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
}
#logout-page #bottom {
    height: 50%;
    margin-bottom: 24px;
    justify-content: space-between;
}
#login-page .empowered,
#logout-page .empowered {
    padding-bottom: 13px; /* matches margin-bottom of img, below */
    display: flex;
    align-items: center;
    gap: 4px;
}
#login-page .empowered img,
#logout-page .empowered img {
    height: 36px;
    margin-bottom: -13px; /* matches padding-bottom above */
}
#logout-page button {
    color: var(--text-color);
    background-color: var(--muted3-bg-color);
}

#okta-login {
    background-color: #3f59e4;
    color:  white;
    padding: 10px;
    border-radius: 5px;
    border: none;
    display: inline-flex;
    align-items: center;
}
#okta-login label {
    border: 4px solid white;
    border-radius: 16px;
    height: 16px;
    width: 16px;
    display: inline-block;
    margin-right: 5px;
}
#sign-in {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: space-evenly;
}
#login-page .instructions,
#logout-page .instructions {
    font-size: 1.5rem;
    text-align: center;
}
#logout-page .message {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

/* User profile page */
#user-profile {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
#user-profile .user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
#user-profile img {
    height: 100px;
    border-radius: 8px;
}
#user-profile .name {
    font-size: x-large;
}
#user-profile .mission {
    font-style: italic;
}

/* Self profile page */
#self-profile {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
#self-profile .user {
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid gray;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
#self-profile img.avatar {
    height: 100px;
    border-radius: 8px;
    cursor: pointer;
}
#self-profile .name {
    font-size: x-large;
}
#self-profile .email {
    font-family: monospace;
}
#self-profile textarea.mission {
    width: min(80%, 500px);
    text-align: center;
    font-style: italic;
}
#self-profile .view-profile {
    width: 100%;
    font-size: smaller;
    text-align: right;
}
#self-profile .section {
    width: min(500px, 98%);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#self-profile .section .header {
    font-weight: bold;
    font-size: larger;
}
#self-profile .topics {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
#self-profile .category {
    font-size: large;
}
#self-profile .interest {
    padding: 8px;
    border-radius: 8px;
    color: white;
    background-color: #C26360;
    user-select: none;
}

/* Org Admin page */
#dash-page {
    background-color: var(--muted-bg-color);
}
#dash-page .first-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
#dash-page .info {
    max-width: 400px;
    display: grid; /* overridden below to flex for Firefox */
    @-moz-document url-prefix() {
        display: flex;
    }
    grid-template-columns: auto 1fr;
    grid-template-rows: max-content;
    gap: 12px;
    justify-content: center;
}
#dash-page .info .square-image {
    flex: 0 0 auto; /* for Firefox, which uses flex-box in .info */
}
#dash-page .info .kebab {
    font-size: x-large;
}
#dash-page .info-rhs {
    flex: 1 1 100%; /* for Firefox, which uses flex-box in .info */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
#dash-page .info-rhs > div {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    user-select: none;
}
#dash-page .info-rhs .name {
    font-size: x-large;
}
#dash-page .stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#dash-page button.stat {
    margin: 4px;
    padding: 4px 8px;
    border: 1px solid gray;
    border-radius: 8px;
    font-family: inherit;
}
#dash-page button.stat.good {
    color: var(--good-color);
    border: 1px solid var(--good-color);
}
#dash-page button.stat.okay {
    color: var(--okay-color);
    border: 1px solid var(--okay-color);
}
#dash-page button.stat.bad {
    color: var(--bad-color);
    border: 1px solid var(--bad-color);
}
#dash-page .title {
    font-size: 1.4rem;
}
#dash-page .primary {
    line-height: 1.8;
    font-size: 2.2rem;
    font-weight: bold;
}
#dash-page .secondary {
    font-weight: lighter;
}
#dash-header {
    width: calc(100% - 4vw);
    max-width: 800px;
    padding: 2vh 2vw 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

/* Org welcome message */
#dash-welcome {
    width: min(600px, 100%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}
#dash-welcome textarea {
    background-color: var(--muted-bg-color);
    border-radius: 4px;
}

/* Org access page */
#dash-users .sections {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
#dash-users .section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
#dash-users .section-title {
    font-weight: bold;
    font-size: larger;
}
#dash-users .roles-table {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 20px;
    align-items: center;
}
#dash-users .users-table {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
    align-items: center;
}
#dash-users .account {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: flex-start;
    column-gap: 8px;
}
#dash-users .info {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#dash-users .name {
    font-size: larger;
    overflow-x: hidden;
    white-space: nowrap;
}
#dash-users .email {
    font-weight: lighter;
}
#dash-users button.delete {
    background-color: var(--warning-color);
}
#dash-users .commands {
    width: 100%;
    text-align: center;
}

/* Org analytics page */
.post-metrics {
    max-width: 500px;
    display: grid;
    grid-template-columns: 100px 1fr auto auto;
    row-gap: 16px;
    column-gap: 8px;
}
.post-metrics img {
    border-radius: 8px;
}
.post-metrics .status {
    color: var(--muted-text-color);
    font-weight: lighter;
}
.metrics-button {
    align-self: start;
    padding: 8px;
    background-color: var(--muted-bg-color);
    border-radius: 8px;
}
.empty-analytics {
    display: none;
}
.empty-analytics:first-child {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Post metrics page */
#post-metrics-page {
    align-items: flex-start;
}
#post-metrics-page .header {
    padding: 8px;
    display: flex;
    gap: 16px;
    align-items: center;
}
#post-metrics-page .header img {
    max-width: 50vw;
    max-height: 150px;
    border-radius: 8px;
}
#post-metrics-page .header .title {
    font-size: x-large;
}
#start-table {
    padding: 0 8px;
    white-space: nowrap;
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 8px;
    column-gap: 24px;
}
#vote-table {
    min-width: 200px;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
#vote-table .responses {
    font-weight: bold;
    color: red;
}
#vote-sections {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vote-section {
    border-top: 1px solid gray;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vote-section:first-of-type {
    border-top: none;
    padding-top: 0;
}
.vote-section .question-text {
    font-weight: bold;
}
.vote-section .question-type {
    font-weight: lighter;
    font-size: smaller;
}
.vote-counts {
    padding: 4px 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
}
.vote-count {
    padding: 1px 2px;
    background-color: var(--muted-bg-color);
}
ul.free-responses {
    margin-block: 0;
    padding-inline-start: 1em;
}
li.free-response {
    padding: 4px 0;
}

/* Org page */
#org-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(transparent, 95%, black),
        center/cover url('https://d2v7eeag9wrxse.cloudfront.net/1eu7M3rJ.jpg');
    z-index: -1;
}
#org-page {
    background-color: transparent;
    gap: 20px;
}
#org-page .logo {
    position: relative;
    width: min(500px, calc(100% - 64px));
    height: 10vh;
    max-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#org-page .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#org-page .card {
    color: white;
    width: min(600px, calc(100% - 24px));
    padding: 8px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    user-select: none;
    -webkit-user-select: none;
}
#org-page .card-header {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 4px;
}
#org-page .card-header .icon {
    position: relative;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    aspect-ratio: 1/1;
}
#org-page .card-header svg {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
}
#org-page .card-header .title {
    font-size: x-large;
    font-weight: bold;
}
#org-page .card .description {
    font-weight: lighter;
}
#org-page .card .input-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#org-page .radios {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    justify-content: space-evenly;
}
#org-page .input-container label {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
#org-page .guidelines a {
    text-decoration: underline;
}
#org-page #org-announcements {
    color: black;
    background-color: white;
    border-radius: 4px;
}
#org-page .org-announcement {
    padding: 8px;
    display: flex;
    flex-direction: column;
}
#org-page .org-announcement .date-time {
    font-size: smaller;
    font-weight: lighter;
}
#org-page .org-announcement .title {
    font-size: larger;
}
#org-page #org-feedback {
    font-size: smaller;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#org-page form.org-feedback {
    position: relative;
    padding: 8px;
    border-radius: 4px;
    background-color: white;
    color: black;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#org-page form.org-feedback #org-feedback-confirmation {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--header-color);
    border-radius: 4px;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
}
#org-page form.org-feedback.confirmed #org-feedback-confirmation {
    display: flex;
}
#org-page #org-feedback #anonymity-notice {
    display: none;
}
#org-page #org-feedback.anonymous #anonymity-notice {
    display: block;
}

#org-page textarea {
    font-size: initial;
}

.full-width-page {
    background-color: var(--bg-color);
    padding-top: var(--header-height);
    padding-inline-end: 0;
    padding-bottom: 0;
    padding-inline-start: var(--nav-thickness);
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
@media (max-aspect-ratio: 1/1) { /* tall viewport */
    .full-width-page {
        padding-inline-start: 0;
        padding-bottom: var(--nav-thickness);
        min-height: calc(100vh - var(--header-height) - var(--nav-thickness));
    }
}
.full-width-page.left-right-padded {
    padding-inline-start: calc(var(--nav-thickness) + 8px);
    padding-inline-end: 8px;
}
@media (max-aspect-ratio: 1/1) { /* tall viewport */
    .full-width-page.left-right-padded {
        padding-inline-start: 8px;
    }
}

/* Org polls in dashboard */
#dash-poll-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.dash-poll {
    padding: 8px;
    border-radius: 8px;
    background-color: var(--muted-bg-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dash-poll.published {
    border: 2px solid green;
}
.dash-poll.archived {
    background-color: var(--muted3-bg-color);
}
.dash-poll .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dash-poll .date-time {
    color: var(--muted-text-color);
}
.dash-poll .choices {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
}
.dash-poll .choices > button {
    display: none;
}
.dash-poll.draft .choices > button {
    display: block;
}
.dash-poll .choice-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dash-poll .choice {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dash-poll .add-choice {
    display: none;
    align-items: center;
    justify-content: center;
}
.dash-poll.draft .add-choice {
    display: flex;
}
.dash-poll button.image {
    position: relative;
    /* override some button defaults */
    border: none;
    padding: 0;
    background-color: transparent;
}
.dash-poll img {
    border-radius: 4px;
}
.dash-poll img.thumbnail {
    display: none;
    max-width: 100px;
    max-height: 100px;
}
.dash-poll.draft img.thumbnail,
.dash-poll button.image.has-image img.thumbnail {
    display: block;
}
.dash-poll img.trashcan {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(255,255,255,0.5);
    height: 24px;
}
.dash-poll.draft button.image.has-image:hover img.trashcan {
    display: block;
}
.dash-poll .choice textarea {
    width: 100%;
    text-align: center;
}
.dash-poll button.warning {
    display: none;
    border-radius: 4px;
}
.dash-poll.draft button.warning {
    display: block;
}
#poll-template {
    display: none;
}

/* Org announcements page */
#ann-table {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    align-items: stretch;
    row-gap: 8px;
}
#ann-table a.title,
#ann-table .status,
#ann-table .metrics,
#ann-table .author,
#ann-table .date-time {
    padding: 4px 8px;
    background-color: var(--muted-bg-color);
}
#ann-table a.thumb {
    display: flex;
    justify-content: flex-end;
}
#ann-table a.thumb img {
    max-width: 15vw;
    max-height: 100px;
    margin-right: 8px;
    border-radius: 8px;
}
#ann-table a.title {
    color: inherit;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
#ann-table .status,
#ann-table .author {
    color: var(--muted-text-color);
    text-align: center;
}
#ann-table .metrics {
    display: grid;
    grid-template-columns: auto auto;
    align-content: start;
    row-gap: 4px;
    column-gap: 4px;
}
#ann-table .date-time {
    color: var(--muted-text-color);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Edit announcement page */
#edit-announcement form {
    width: min(600px, 80vw);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#edit-announcement textarea {
    background-color: var(--muted-bg-color);
    border-radius: 4px;
}
#edit-announcement textarea.text1,
#edit-announcement textarea.text2 {
    line-height: 1.5;
}
#ann-media {
    position: relative;
    display: flex;
    justify-content: center;
}
#ann-media .select-visual {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
#ann-media.input-url .select-visual,
#ann-media.image .select-visual,
#ann-media.video .select-visual {
    display: none;
}
#ann-media .image {
    display: none;
    justify-content: center;
}
#ann-media.image .image {
    display: flex;
}
#ann-media .input-url {
    display: none;
}
#ann-media.input-url .input-url {
    width: 100%;
    display: flex;
    gap: 12px;
}
#ann-media .input-url input {
    flex: 1 1 auto;
}
#ann-media .input-url input:focus-visible {
    outline: none;
}
#ann-media .trashcan {
    display: none;
    height: 24px;
    border-radius: 4px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
}
#ann-media.image .trashcan,
#ann-media.video .trashcan {
    display: block;
}
#edit-announcement .metrics-container {
    max-width: 100%;
    overflow-x: auto;
}
#edit-announcement .metrics-table {
    text-wrap: nowrap;
    padding: 0 12px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 0 16px;
}

/* Accounts page */
#accounts-content {
    width: min(600px, calc(100% - 24px));
    display: flex;
    flex-direction: column;
    gap: 40px;
}
#accounts-content .section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
#accounts-content .header {
    width: 100%;
    font-weight: bold;
}
#accounts-content #account-table {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 20px;
    row-gap: 24px;
    align-items: center;
}
#accounts-content .account {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: flex-start;
    column-gap: 8px;
}
#accounts-content .info {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#accounts-content .name {
    font-size: larger;
    font-weight: bold;
    overflow-x: hidden;
    white-space: nowrap;
}

.square-image {
    min-height: 100%; /* makes the grid box have the height of the rhs text */
    max-height: 100%;
    aspect-ratio: 1/1; /* keeps the grid box square */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.auto-size-image {
    position: absolute; /* prevents image from pushing on the grid box size */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auto-size-image img {
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

.kebab {
    position: relative;
    color: var(--text-color);
}
.kebab > button {
    color: inherit;
}
.kebab > button.menu-open {
    width: 1lh;
    height: 1lh;
    font-weight: bold;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: inherit;
    background-color: inherit;
    box-sizing: content-box;
    padding: 0;
    border: none;
}
.kebab > button.menu-scrim {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: none;
    padding: 0;
    background-color: transparent;
}
.kebab.open > button.menu-scrim {
    display: block;
}
.kebab > .menu {
    display: none;
    position: absolute;
    top: 0;
    right: 100%;
    white-space: nowrap;
    border: 1px solid gray;
    border-radius: 4px;
    color: var(--text-color);
    background-color: var(--muted-bg-color);
    font-size: initial;
    flex-direction: column;
    align-items: flex-start;
}
.kebab.open > .menu {
    display: flex;
}
.kebab > .menu > button,
.kebab > .menu > a {
    padding: 8px;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: inherit;
    border: none;
}
.kebab > .menu > button:first-child,
.kebab > .menu > a:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.kebab > .menu > button:last-child,
.kebab > .menu > a:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#dash-page .debug {
    max-width: 100%;
    border-top: 1px solid gray;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#dash-page .log-line {
    margin: 8px 4px;
    word-break: break-all;
}
#dash-page .date-time {
    color: var(--muted-text-color);
}
#dash-page .activity-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#dash-page .controls {
    display: flex;
    justify-content: space-evenly;
}
#dash-page #activity-map {
    width: 100%;
    max-height: 80vh;
}
#dash-page .histogram-table {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: flex-start;
    column-gap: 8px;
}
#signed-out-notice .prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#signed-out-notice button.icon-signin {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-signin-light,
.icon-signin-dark {
    width: 40px;
    height: 40px;
}
.icon-signin-dark {
    display: none;
}
@media (prefers-color-scheme: dark) {
    .icon-signin-light {
        display: none;
    }
    .icon-signin-dark {
        display: block;
    }
}