/*
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400 or 600;

    font-family: "palatino-linotype", sans-serif;
    font-weight: 400 or 700;

    font-family: "helvetica-neue-lt-pro";
    font-weight: 300, 400 or 500, 700;

    font-family: "univers-next-pro", sans-serif;
    font-weight: 300, 400 or 500;
    font-style: normal;
*/

@font-face {
    font-family: "Shantell Sans";
    src: url("/fonts/ShantellSans-Variable.woff2") format("woff2");
    font-style: normal italic;
    font-weight: 300 800;
    font-display: swap;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: colossus-page-fade-out 300ms ease both;
}

::view-transition-new(root) {
    animation: colossus-page-fade-in 300ms ease both;
}

@keyframes colossus-page-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes colossus-page-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

:root {
    --baseSize: 14pt;
    --onePointFiveSize: 13pt;
    --secondarySize: 12pt;
    --tertiarySize: 11pt;
    --quaternarySize: 10pt;
    --smallCapsSizeMultiplier: 1.25;
    --smallCapsLetterSpacing: 0.015em;
    --maximumParagraphWidth: 66ch;
    --chartTypeface: var(--uiTextTypeface);
    --uiHeadingTypeface: "neue-haas-grotesk-display";
    --uiTextTypeface: "univers-next-pro";
    --imageCaptionTypeface: var(--postTypeface);
    --imageCaptionStyle: italic;
    --metadataTypeface: "neue-haas-grotesk-text";
    --grey-0: #FFFFFF;
    --grey-50: #FAFAFA;
    --grey-75: #F8F8F8;
    --grey-100: #F3F3F3;
    --grey-125: #F2F2F2;
    --grey-150: #EEEEEE;
    --grey-200: #E5E5E5;
    --grey-225: #E1E1E1;
    --grey-250: #DDDDDD;
    --grey-300: #CCCCCC;
    --grey-400: #AAAAAA;
    --grey-500: #888888;
    --grey-600: #6C6C6C;
    --grey-700: #555555;
    --grey-850: #222222;
    --grey-900: #111111;
    --grey-1000: #000000;
    --surface-page: var(--grey-0);
    --surface-raised: var(--grey-0);
    --surface-subtle: var(--grey-125);
    --surface-very-subtle: var(--grey-50);
    --surface-blockquote: var(--grey-75);
    --surface-button: #F7F7F7;
    --surface-button-hover: #FCFCFC;
    --surface-input: var(--grey-0);
    --surface-input-muted: var(--colour4);
    --surface-muted: var(--grey-100);
    --surface-section: #f6f6f6;
    --surface-emoji-menu: var(--colour2Light);
    --surface-icon-panel: var(--colour2Light);
    --surface-icon-panel-hover: var(--colour2LightHover);
    --surface-ui-panel: var(--colour3Lighter);
    --surface-icon-inverse: var(--colour2);
    --surface-selected: var(--grey-0);
    --surface-control: var(--grey-150);
    --surface-radio: var(--grey-300);
    --surface-table-row: var(--grey-75);
    --surface-table-stripe: var(--grey-100);
    --tooltip-background: rgb(255, 246, 212);
    --tooltip-border: none;
    --text-primary: var(--grey-1000);
    --text-secondary: var(--grey-700);
    --text-tertiary: var(--grey-500);
    --text-muted: var(--grey-500);
    --text-faint: var(--grey-400);
    --text-inverse: var(--grey-0);
    --border-subtle: var(--grey-200);
    --border-default: var(--grey-250);
    --border-muted: var(--grey-300);
    --border-faint: var(--grey-400);
    --border-control: #d0d0d0;
    --border-overlay: rgba(0, 0, 0, 0.2);
    --border-strong: var(--text-primary);
    --outline-strong: var(--text-primary);
    --outline-inverse: var(--text-inverse);
    --shadow-soft: rgba(0, 0, 0, 0.1);
    --shadow-subtle: rgba(0, 0, 0, 0.06);
    --shadow-raised: rgba(0, 0, 0, 0.12);
    --shadow-dialog: rgba(0, 0, 0, 0.2);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-strong: rgba(0, 0, 0, 0.25);
    --status-alert-background: var(--colour1);
    --status-alert-border: var(--status-alert-background);
    --status-alert-text: var(--text-inverse);
    --status-alert-count-background: var(--status-alert-background);
    --status-notification-count-background: var(--colour2);
    --status-deleted-text: oklch(63.468% 0.18515 24.033);
    --status-error-background: var(--status-alert-background);
    --status-error-input-background: pink;
    --status-error-text: var(--status-alert-text);
    --status-warning-background: rgb(255, 255, 215);
    --status-warning-border: rgb(228, 228, 228);
    --status-warning-text: var(--text-primary);
    --embed-bluesky-background: var(--colour2Light);
    --embed-bluesky-quote-border: var(--lighterLineColour);
    --embed-colossus-background: var(--surface-subtle);
    --embed-colossus-blockquote-background: var(--grey-200);
    --embed-colossus-continue-link: var(--colour2Bright);
    --embed-flickr-background: var(--colour3);
    --embed-flickr-caption-link: var(--colour2);
    --embed-flickr-caption-text: var(--text-inverse);
    --embed-flickr-text: var(--text-inverse);
    --embed-hackernews-accent: #ff6600;
    --embed-hackernews-background: #fff7f0;
    --embed-hackernews-label: #c24f00;
    --embed-imdb-accent: #f5c518;
    --embed-imdb-background-start: #fffbea;
    --embed-imdb-background-end: #fffdf5;
    --embed-imdb-label: #6a5600;
    --embed-opengraph-background: var(--surface-subtle);
    --embed-opengraph-label: #334155;
    --embed-wikipedia-accent: #222;
    --embed-wikipedia-background-start: #fbfbfb;
    --embed-wikipedia-background-end: #f2f2f2;
    --embed-wikipedia-label: #111;
    --embed-youtube-background-start: #f2f2f2;
    --embed-youtube-background-end: #f9f9f9;
    --embed-youtube-placeholder-background: #e2e2e2;
    --embed-youtube-unavailable-text: #BBB;
    --tabDialogInactiveBackgroundColour: var(--surface-subtle);
    --tabDialogActiveBackgroundColour: var(--surface-very-subtle);
    --tabDialogHoverBackgroundColour: var(--colour2Light);
    --TextTypeface: "adobe-garamond-pro", "Garamond", serif;
    --PostTypeface: "palatino-linotype", "Palatino", serif;
    --HeadingTypefaceDisplay: "neue-haas-grotesk-display", "Helvetica", sans-serif;
    --HeadingTypefaceText: "neue-haas-grotesk-text", "Helvetica", sans-serif;
    --TableTypeface: "univers-next-pro", "Helvetica", sans-serif;
    --TableHeadingTypeface: "univers-next-pro", "Helvetica", sans-serif;
    --highlightColour: oklch(0.7921 0 0);
    --lightLineColour: oklch(0.6268 0 0);
    --lighterLineColour: oklch(0.738 0 0);
    --colour1: oklch(63.468% 0.18515 24.033);
    --colour1Light: oklch(77.559% 0.08614 19.153);
    --colour2: oklch(65.409% 0.14425 237.65);
    --colour2Light: oklch(93.494% 0.02684 234.113);
    --colour2LightHover: oklch(86.495% 0.03628 243.102);
    --colour2Bright: oklch(61.769% 0.14732 244.669);
    --colour3: oklch(81.615% 0.03049 240.365);
    --colour3Lighter: oklch(0.9385 0.0228 241.89);
    --colour4: oklch(0.9491 0.0219 138.98);
    --colour5: oklch(95.351% 0.01502 260.812);
    --backgroundColour1: var(--colour2Light);
    --linkColour: oklch(60% 12% 234.48);
    --linkVisited: oklch(40% 12% 234.48);
    --borderRadius: 8px;
    --hiddenTextHighlight: rgba(217, 237, 249, 0.5);
    --heatmap-base-colour: var(--colour2);
    --heatmap-year-background: var(--colour1);
    --heatmap-spacer-background: transparent;
    --heatmap-text-light: white;
    --heatmap-text-dark: black;
    /* Chart doesnt't support oklch */
    --searchTimelineChartBarsColour: #1c96cc;
    --searchTimelineChartBarsTextColour: var(--text-inverse);
    --searchTimelineChartAxisColour: #aaa;
    --job-performance-median-colour: rgba(24, 140, 215, 1);
    --job-performance-p95-colour: rgba(229, 80, 80, 1);
    --threads-over-time-area-colour: var(--colour4);
    --threads-over-time-line-colour: black;
    --thread-activity-area-colour: rgb(245, 141, 4);
    --thread-activity-line-colour: var(--threads-over-time-line-colour);
    --poll-bubble-chart-fill-colour: #3ba0e8ff;
    --poll-bubble-chart-reveal-from-fill-colour: #cfe9fb;
    --poll-bubble-chart-label-colour: white;
    --ridgeline-series-colour-1: hsl(0, 74%, 61%);
    --ridgeline-series-colour-2: hsl(198, 76%, 45%);
    --ridgeline-series-colour-3: hsl(206, 29%, 77%);
    --ridgeline-axis-colour: #999;
    --ridgeline-axis-tick-colour: #ccc;
    --ridgeline-axis-text-colour: #555;
    --ridgeline-label-colour: #444;
    --ridgeline-outline-colour: #FAFAFA;
    --ridgeline-baseline-colour: #d8d8d8;
    --stacked-step-series-colour-1: hsl(0, 74%, 61%);
    --stacked-step-series-colour-2: hsl(198, 76%, 45%);
    --stacked-step-series-colour-3: hsl(206, 29%, 77%);
    --stacked-step-baseline-colour: #d8d8d8;
    --stacked-step-gridline-colour: #eeeeee;
    --stacked-step-label-colour: #444;
    --stacked-step-axis-colour: #999;
    --stacked-step-axis-tick-colour: #ccc;
    --stacked-step-axis-text-colour: #555;
    --poll-chart-series-colour-1: #c23531;
    --poll-chart-series-colour-2: #2f4554;
    --poll-chart-series-colour-3: #61a0a8;
    --poll-chart-series-colour-4: #d48265;
    --poll-chart-series-colour-5: #91c7ae;
    --poll-chart-label-colour: var(--text-primary);
    --poll-chart-border-colour: #f6f6f6;
    --poll-chart-pie-border-width: 0;
    --poll-chart-bar-border-width: 0;
    --poll-chart-nightingale-border-width: 3;
    --poll-chart-shadow-colour: rgba(0, 0, 0, 0.5);
    --ranking-poll-scatter-series-colour-1: #c23531;
    --ranking-poll-scatter-series-colour-2: #2f4554;
    --ranking-poll-scatter-series-colour-3: #61a0a8;
    --ranking-poll-scatter-series-colour-4: #d48265;
    --ranking-poll-scatter-series-colour-5: #91c7ae;
    --ranking-poll-scatter-label-colour: #FFF;
    --ranking-poll-scatter-border-colour: #222;
    --traffic-control-admitted-colour: rgba(24, 140, 215, 1);
    --traffic-control-admitted-fill-colour: rgba(24, 140, 215, 0.15);
    --traffic-control-rejected-colour: rgba(229, 80, 80, 1);
    --traffic-control-rejected-fill-colour: rgba(229, 80, 80, 0.15);
    --traffic-control-in-flight-colour: rgba(24, 140, 215, 1);
    --traffic-control-in-flight-fill-colour: rgba(24, 140, 215, 0.15);
    --traffic-control-blocked-colour: #7a3d00;
    --traffic-control-blocked-fill-start-colour: rgb(245, 141, 4);
    --traffic-control-blocked-fill-end-colour: rgba(184, 105, 1, 0.15);
    --traffic-control-cap-colour: #c00000;
    --traffic-control-separator-colour: #FFF;
    --requests-per-minute-admitted-fill-colour: var(--colour4);
    --requests-per-minute-rejected-fill-colour: var(--colour1);
    --requests-per-minute-line-colour: var(--grey-850);
    --requests-per-minute-line-width: 1;
    --requests-per-minute-axis-font-size: 11;
    --requests-per-minute-font-family: var(--uiTextTypeface);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

applicationdata {
    display: none;
}

body {
    font-family: var(--HeadingTypefaceText);
    font-kerning: normal;
    font-feature-settings: "kern" 1;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    hanging-punctuation: first;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    /* text-wrap: pretty; */
    /* Only works in some browsers, but coming along */
    scroll-behavior: smooth;

    &.stickyMenusDisabled {

        header,
        div.metadata {
            position: static !important;
        }
    }

    &.Mode2 {
        div.metadata {
            position: sticky;
            bottom: 1.25em;
        }
    }

    &.Mode3 {
        header {
            position: static;
        }

        div.metadata {
            position: sticky;
            bottom: 1.25em;
            top: 1.25em;
        }
    }

    &.Mode4 {
        div.messages {
            div.message {
                div.metadata {
                    align-self: flex-start;
                }
            }
        }
    }
}

h1.siteName {
    color: var(--colour2Bright);
    font-size: calc(var(--baseSize) * 2.4);
}

header {
    padding-left: 19.1%;
    padding-right: 19.1%;
    width: auto;

    & * {
        user-select: none;
        -webkit-user-drag: none;
    }
}

main {
    background-color: var(--surface-page);
    padding-left: 19.1%;
    padding-right: 19.1%;

    &.additionalKeyboardShortcutsEnabled {
        padding-top: 1.25em;
    }
}

body {
    background-color: var(--surface-page);
}

footer {
    background-color: var(--surface-page);
    margin-left: 19.1%;
    margin-right: 19.1%;
}

fieldset {
    display: flex;
    gap: 1.25em;
    align-items: center;
    font-family: var(--uiTextTypeface);
    color: var(--text-primary);
    padding: 1.25em;
    padding-top: 0.9375em;
    width: fit-content;
    border: 1px solid var(--lighterLineColour);
    border-radius: 0.45em;

    label {
        display: flex;
        align-items: center;
        gap: 0.45em;
    }

    +* {
        margin-top: 1.25em;
    }

    legend {
        font-size: calc(var(--baseSize) * 0.8);
        padding-left: 0.3125em;
        padding-right: 0.3125em;
    }

}

small {
    line-height: 1.25;
}

select {
    color: var(--text-primary);
    padding: 0.3125em;
    font-size: calc(var(--baseSize) * 0.85);
    border-radius: 8px;
    min-width: 10em;
}

strong {
    font-weight: 500;
}

em {
    font-style: italic;
    line-height: 1;
}

sup,
sub {
    font-size: 0.625em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    font-variant-numeric: normal;
}

sup {
    top: -0.625em;
}

sub {
    bottom: -0.3125em;
}


/*--- Spacing ---*/

/* Keith: changed this from p+p */

p+* {
    margin-top: 0.625em;
}

p+h1 {
    margin-top: 1.25em;
}

h1+p {
    margin-top: 0.625em;
}

p+h2 {
    margin-top: 1.25em;
}

h2+p {
    margin-top: 0.625em;
}

*+h3 {
    margin-top: 1.25em;
}

h3+* {
    margin-top: 0.625em;
}

p+h4 {
    margin-top: 1.25em;
}

p+fieldset,
fieldset+p {
    margin-top: 1.25em;
}

h4+p {
    margin-top: 0.625em;
}

h1+h2,
h2+h1 {
    margin-top: 0.625em;
}

h2+h3,
h3+h2 {
    margin-top: 0.625em;
}

h3+h4,
h4+h3 {
    margin-top: 0.625em;
}

h3+section {
    margin-top: 1.25em;
}

h4+small {
    margin-top: 0.625em;
}

h4+h2,
h4+h1,
h3+h1 {
    margin-top: 0.625em;
}

h1+*,
h2+*,
h3+*,
h4+* {
    margin-top: 1.25em;
}

section+section {
    margin-top: 1.25em
}

table+* {
    margin-top: 1.25em;
}

span.time {
    white-space: nowrap;
}

section.posting,
section.bookmarkButtons {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(10ch, 22ch) minmax(30ch, var(--maximumParagraphWidth));
    column-gap: 1.25em;
}

div.bookmarkButtons,
div.unfollowButtons {
    margin-top: 1.25em;
    margin-left: 0.625em;
    min-height: 4em;
    display: flex;
    flex-direction: row-reverse;
}

div.unfollowButtons {
    margin-top: 0em;
}

section.editor {
    color: var(--text-primary);

    div.ProseMirror-selectednode {
        background-color: var(--colour3);
        font-weight: 500;
        color: var(--text-inverse);
    }

    .tiptap th,
    .tiptap td {
        position: relative;
    }

    .tiptap .selectedCell:after {
        background: color-mix(in srgb, var(--colour2) 20%, transparent);
    }
}

section+section.editorContainer {
    margin-top: 2em;
}

section.bookmarkButtons+section.posting {
    margin-top: 0;
}

section.embeddingContainer {

    section.hints {
        width: var(--maximumParagraphWidth);

        img {
            margin-top: 1.25em;
            height: 15em;
        }
    }

    section.embeddingInfo {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25em 2.5em;
        padding-bottom: 2.5em;
        margin-bottom: 1.25em;
        font-size: calc(var(--baseSize) * 0.85);
        border-bottom: 1px solid var(--lighterLineColour);

        img {
            min-width: 3em;
            width: 3em;
        }

        img.icon {
            width: 1.2em;
            min-width: 1.2em;
            position: relative;
            top: 3px;
        }

        >div {
            display: flex;
            align-items: center;
            gap: 1.25em;

            div.text {
                /* max-width: 45ch; */
                word-break: break-word;
            }
        }
    }
}

.editorContainer {

    div.postingInfo {
        display: flex;
        gap: 1.25em;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 0.3125em;

        div.embeddingInfo {
            a {
                color: var(--lightLineColour);
                font-weight: 400;
            }

            a:hover {
                text-decoration: underline;
            }
        }

        div.postingAs {
            margin-top: 0.625em;
            margin-left: 0.3125em;
            color: var(--lightLineColour);

            span.name {
                font-weight: 500;
                color: var(--colour2);
            }
        }

        label.anonymousAdmin {
            display: inline-flex;
            align-items: center;
            gap: 0.3125em;
            font-weight: 300;
            margin-left: 0.3125em;

            input#anonymousAdmin {
                cursor: pointer;
            }
        }
    }
}

section.threadPage .editorContainer {
    margin-left: 0.625em;
    font-family: var(--uiTextTypeface);
}

#editor {
    height: 100%;
    min-height: 8em;
    display: flex;
    flex-direction: column;
}

section.newThreads {
    img[src="/images/icons/newIndicator4.svg"] {
        display: none;
    }
}

section.threadPage #editor {
    min-height: 8em;
}

section.newThreadPage #editor {
    min-height: 20em;
}

*+section.controlPanel {
    margin-top: 0.625em;
}

*+section.controlPanel button {
    margin-right: 0;
}

/*--- Basic tags ---*/

footer {
    margin-top: 2.5em;
    border-top: 1px solid var(--border-strong);
    padding-top: 0.625em;
    display: flex;
    justify-content: flex-end;
    color: var(--text-primary);

    a {
        color: var(--colour2Bright);
    }
}

footer p {
    font-family: var(--uiTextTypeface);
}

h1,
h2,
h3,
h4 {
    font-family: var(--uiHeadingTypeface);
    font-weight: 500;
    color: var(--text-primary);
}

p,
span {
    color: var(--text-primary);
}

h1+table,
h2+table {
    margin-top: 1.25em;
}

h3+table {
    margin-top: 0.625em;
}

h1 {
    font-size: 30pt;
    font-size: calc(var(--baseSize) * 2);

    &.boardName {
        color: var(--colour2Bright);
        text-wrap: balance;
    }

    &.threadName {
        display: flex;
        align-items: center;
        gap: 0.3125em;
        line-height: 1;

        img.notWorksafe {
            height: 0.9375em;
        }

        * {
            color: var(--colour2Bright);
            text-wrap: balance;
        }
    }
}

h2 {
    font-size: 21pt;
    font-size: calc(var(--baseSize) * 1.64);

}

h3 {
    font-size: 17pt;
    font-size: calc(var(--baseSize) * 1.36);

    &.boardName+h2.threadName {
        margin-top: 0.3125em;
    }
}

h4 {
    font-size: 14pt;
    font-size: calc(var(--baseSize) * 1.14);
}


h5 {
    font-size: calc(var(--baseSize));
    font-weight: 500;
    color: var(--text-primary);
}

sup {
    margin-left: 0.3125em;
    font-size: 60%;
}

/* Apply the paragraph defaults globally. Post and editor content is consolidated below. */

p,
ul,
ol,
li,
blockquote {
    font-family: var(--PostTypeface);
    line-height: 1.25;
    font-size: var(--baseSize);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    text-wrap: pretty;

    strong {
        font-weight: 600;
    }
}

div.displayName.systemUser {
    color: var(--colour2Bright);
}

*+blockquote,
blockquote+* {
    margin-top: 0.625em;
    margin-left: 0;
    margin-right: 0;
}

blockquote {
    background-color: var(--surface-blockquote);
    border-radius: 8px;
    padding: 0.625em;

    &>blockquote {
        border: 1px solid var(--grey-225);
    }
}

pre {
    background-color: var(--surface-blockquote);
    border-radius: 8px;
    padding: 0.625em;
}

/* Add bookMode class to div.messages tag if you want 'book-style' paragraphs */

div.messages.bookMode div.body p+p,
div.example.postDisplayMode.bookMode p+p {
    text-indent: 1.25em;
    margin-top: 0;
}

/* The above will wipe out the gap above a paragraph preceded by a list, so reinstate that */

blockquote+blockquote {
    margin-top: 0.625em;
}

.smallcaps {
    font-variant-caps: all-small-caps;
    font-size: calc(var(--baseSize) * var(--smallCapsSizeMultiplier));
    letter-spacing: var(--smallCapsLetterSpacing);
    line-height: 1.25rem;
    color: inherit;
}

ul,
ol {
    margin-left: 2em;

    & li {
        text-align: left;
        color: var(--text-primary);

        & * {
            text-align: left;
        }
    }
}

li+li {
    margin-top: 0.625em;
}

li::marker {
    font-size: 0.625em;
}

ol li::marker {
    font-size: var(--baseSize);
    font-variant-numeric: oldstyle-nums;
}

a {
    color: var(--linkColour);
    text-decoration: none;
    overflow-wrap: break-word;

}

body.boardPage {
    table {
        th:first-child {
            text-align: left;
        }
    }
}

body.searchPage {
    h2.subHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
            margin-right: 0.625em;
        }

        div.heading {
            display: flex;
            align-items: center;

            * {
                font-family: var(--uiHeadingTypeface);
            }
        }

        div.viewRecentPosts {
            display: flex;
            gap: 0.625em;

            button {
                font-size: var(--baseSize);
                border: none;
                background: none;
                color: var(--linkColour);

                &:not(:disabled):active {
                    transform: none;
                }

                &:focus {
                    outline: none;
                }

                &:hover {
                    box-shadow: none;
                }
            }

        }
    }
}

body.boardPage main,
body.searchPage main,
body.monthViewPage section.threadsByDay div.threadInfo {


    a {
        &:visited {
            color: var(--linkVisited);
        }

        &:hover {
            color: var(--colour2);
        }
    }

    section.timeline {
        a:visited {
            color: var(--text-inverse);
        }

        div.searchTimelineTooltip {
            font-family: var(--uiTextTypeface);
        }
    }
}

div.messages {
    & a {
        color: var(--linkColour);
    }
}

button.colossus,
a.colossus {
    display: flex;
    gap: 0.625em;
    align-items: center;
    justify-content: space-around;
    font-family: var(--uiTextTypeface);
    font-weight: 500;
    max-width: 18em;
    min-height: 2.5em;
    padding: 0.625em;
    padding-left: 1.875em;
    padding-right: 1.875em;
    margin-top: 0.625em;
    margin-bottom: 0.625em;
    margin-right: 0.625em;
    font-size: 11pt;
    background-color: var(--surface-button);
    color: var(--text-primary);
    outline: none;
    box-shadow: none;
    border: 1px solid var(--border-default);
    border-radius: var(--borderRadius);

    &:focus {
        outline: 0.5px solid var(--highlightColour);
    }

    &:disabled {
        cursor: not-allowed;
        opacity: 0.5;

        & div {
            opacity: 0.5;
        }
    }

    &.flushRight {
        margin-right: 0;
        margin-left: 1.5em;
        word-break: keep-all;
    }

    &:not(:disabled):hover {
        transition: 0.25s;
        background-color: var(--surface-button-hover);
        cursor: pointer;
        text-decoration: none;
        box-shadow: var(--shadow-medium) 2px 2px 4px;
    }

    &:not(:disabled):active {
        transition: 0.15s;
        transform: translate(1.5px, 1.5px);
        box-shadow: none;
    }

    & div.shortcutKey {
        font-weight: 400;
    }

    & img {
        max-width: 2.5em;
        max-height: 1.5em;
    }

    & div {
        display: grid;
    }
}

span.warning {
    display: block;
    position: fixed;
    z-index: 100000000;
    top: 1.25em;
    left: 1.25em;
    font-weight: 500;
    font-size: calc(var(--baseSize) * 0.75);
    text-align: center;
    background-color: var(--status-alert-background);
    color: var(--status-alert-text);
    padding: 0.625em;
    border-radius: 10px;
}

header {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0px;
    z-index: 1000;
    background: var(--surface-page);
    padding-top: 1.25em;
    padding-bottom: 2.5em;

    a {
        color: var(--text-primary);
    }

    & h2.threadName {
        display: flex;
        align-items: center;

        & img {
            height: 1.25em;
            margin-right: 0.625em;
        }
    }

    & h2.boardName {
        font-size: calc(var(--baseSize) * 1.2);
        text-transform: uppercase;
        margin: 0;
        margin-bottom: 0.162em;
        letter-spacing: 0.02em;
    }

    & .bookmarkButtons {
        display: flex;
        flex-direction: row-reverse;
        margin-left: 2em;
    }

    & nav.mainMenu {
        display: flex;
        gap: 2.5em;
        margin-bottom: 1.25em;
        color: var(--text-primary);
        font-family: var(--uiTextTypeface);
        font-weight: 400;
        font-size: var(--baseSize);
        justify-content: space-between;
        align-items: center;
        row-gap: 0.625em;
        padding-bottom: 0.625em;
        border-bottom: 1px solid var(--border-strong);
        /* Extra to account for the bookmark alert's size */
        min-height: calc(1.5em + 9px);

        & div {
            display: flex;
            flex-wrap: wrap;
            gap: 1.25em;
            row-gap: 0.625em;
            align-items: center;

            div.menuItem {
                display: flex;

                a,
                button {
                    word-break: keep-all;
                    display: inline-flex;
                    gap: 0.625em;
                    align-items: center;
                }

                button {
                    padding: 0;
                    border: 0;
                    background: none;
                    color: inherit;
                    font: inherit;
                    cursor: pointer;
                }

                &.userIcon {
                    display: none;
                }

                .displayName {
                    .role {
                        font-weight: 400;
                    }
                }

                a.history {
                    img {
                        position: relative;
                        top: 1px;
                    }
                }
            }
        }

        div.placeholder {
            position: relative;

            div.alert {
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--status-alert-count-background);
                color: var(--status-alert-text);
                width: 27px;
                height: 27px;
                border-radius: 27px;
                font-size: 10pt;
                cursor: pointer;
            }

            span.numberOfUpdatedBookmarks {
                color: var(--status-alert-text);
            }

            &.notifications {
                & div.alert {
                    background-color: var(--status-notification-count-background);
                }
            }
        }

        & div.activeUsers {
            gap: 0.625em;
            margin-right: 0.625em;
        }

        & img {
            height: 1em;
        }

        & div.breadcrumbs {
            flex-wrap: nowrap;
            margin: 0;
            gap: 0.625em;

            & a {
                white-space: nowrap;
            }
        }
    }

    nav.contextMenu {
        display: flex;
        gap: 1.25em;
        justify-content: space-between;
        align-items: center;

        h1+*,
        h2+*,
        h3+*,
        h4+* {
            margin-top: 0;
        }

        div.contextButtons {
            display: flex;
            gap: 0.625em;

            span#muteThreadText {
                display: none;
            }

            button.colossus,
            a.colossus {
                margin: 0;
            }

            img.chatDisabledIndicator {
                align-self: center;
                width: 2em;
                height: 2em;
                object-fit: contain;
                margin-right: 0.625em;
            }
        }

        & div.boardAndThreadName {
            padding-right: 1.25em;
            flex: 2;
        }

        & div.bookmarkButtons {
            flex: 1;
        }
    }
}

section.heading+section.content {
    margin-top: 2em;
}

section.content {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 61.8fr 38.2fr;
    gap: 0em 2em;

    section.threads+section.newThreads {
        margin-top: 0;
    }
}

@media (max-width: 1200px) {
    section.content {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    span.role {
        display: none;
    }
}

@media (max-width: 900px) {
    a.recentActivity span {
        display: none;
    }
}

@media (max-width: 600px) {
    body.settingsPage {
        section.options {
            section.displayOptions {
                section.example {
                    display: none;
                }

                div.option {
                    &.horizontal {
                        flex-direction: column;
                        align-items: flex-start;
                    }

                    &.password {
                        grid-template-columns: minmax(auto, 12em);

                        label {
                            text-align: left;
                        }
                    }
                }

                &.postDisplayMode {
                    grid-template-columns: 1fr;
                }
            }
        }
    }
}

/* Only one column on the thread page */

section.threadPage {
    grid-template-columns: 1fr;
}


section.content.boardsPage {
    grid-template-columns: 1fr;

    & table {
        table-layout: fixed;

        /* Board Name */
        & colgroup col:nth-child(1) {
            width: 20%;
        }

        /* Description */
        & colgroup col:nth-child(2) {
            width: 45%;
        }

        /* Access */
        & colgroup col:nth-child(3) {
            width: 15%;
        }

        /* Creation Date */
        & colgroup col:nth-child(4) {
            width: 20%;
        }
    }
}

/*--- Generic Table ---*/

table {
    line-height: 1.25;
    border-collapse: collapse;
    table-layout: auto;
    width: 100%;
    font-family: var(--TableTypeface);
    font-weight: 400;
    font-size: var(--baseSize);
    cursor: default;
    color: var(--text-primary);
}

table {
    th.newThreadsHeader {
        display: flex;
        justify-content: space-between;
    }

    thead {
        font-family: var(--TableHeadingTypeface);
    }
}

table thead th {
    /* This is what's meaning the central piece is pushing its way out of its container */
    white-space: nowrap;
    font-weight: 500;
}

@media (max-width: 1200px) {
    table thead th {
        white-space: normal;
    }

    span.warning {
        display: none;
    }
}

@media (max-width: 1400px) {
    header {
        nav.mainMenu {
            & div {
                & div.menuItem {

                    &.displayName {
                        display: none;
                    }

                    &.userIcon {
                        display: flex;
                    }
                }
            }
        }
    }
}

table tbody td {
    font-weight: 400;
}


table img {
    height: 1em;
}

table td,
table th {
    padding-top: 0.156em;
    padding-bottom: 0.3125em;
    padding-left: 0.625em;
    padding-right: 0.625em;
    vertical-align: baseline;
}

table td:first-child,
table th:first-child {
    padding-left: 0;
}

table td:last-child,
table th:last-child {
    padding-right: 0;
}

table tbody tr:first-child td,
table tbody tr:first-child th {
    padding-top: 0.625em;
}

table thead th,
table {
    border-bottom: 1px solid var(--lightLineColour);
}

table tbody tr:last-child td {
    padding-bottom: 0.625em;
}

table .selected {
    background-color: var(--colour3);
}

input[type="text"],
input[type="url"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="password"] {
    color: var(--text-primary);
    font-family: var(--uiTextTypeface);
    font-size: var(--baseSize);
    background-color: var(--surface-input-muted);
    padding: 0.625em;
    border: none;
    outline: none;
    box-shadow: none;
}

pre,
code {
    hanging-punctuation: none;
    font-family: "Fira Code", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variant-ligatures: contextual common-ligatures;
    text-align: left;
    font-size: calc(var(--baseSize) * 0.85);
    line-height: 1.25em;
    overflow-x: hidden;
    overflow-y: hidden;
}

/*--- Board List Page ---*/

table.boards {
    a.editLink {
        font-weight: 300;
        margin-right: 0.625em;

        img {
            position: relative;
            top: 3px;
        }
    }
}

table.boards thead tr th:first-child {
    text-align: right;
}

table.boards tbody tr td {
    vertical-align: middle;
}

table.boards thead tr th:nth-child(2) {
    text-align: left;
}

table.boards tbody tr td:first-child {
    text-align: right;
    font-weight: 500;
    min-width: 12em;
}

table.boards thead tr th:nth-child(3) {
    text-align: center;
}

table.boards thead tr th:nth-child(3) {
    text-align: center;
}

table.boards tbody tr td:nth-child(3) {
    text-align: center;
    padding: 0;
}

table.boards tbody tr td:nth-child(2) {
    width: 10%;
    overflow-wrap: anywhere;
}

table.boards tbody tr td:nth-child(4),
table.boards thead tr th:nth-child(4) {
    text-align: right;
    min-width: clamp(6em, 8em, 10em);
}

/*--- Thread List Page ---*/

table.threads {

    th {
        text-align: left;
    }

    thead th {
        height: 1.75em;
        vertical-align: middle;
    }

    span.boardIndicator {
        background-color: #c8e1f4;
        color: var(--text-primary);
        font-family: var(--uiTextTypeface);
        font-weight: 400;
        font-size: 8pt;
        padding-left: 0.625em;
        padding-right: 0.625em;
        padding-top: 0.3125em;
        padding-bottom: 0.3125em;
        border-radius: 4px;
        line-height: normal;
        text-align: center;
    }

    div.authorAndCreationDate {
        font-size: 11pt;
        color: var(--text-secondary);
        line-height: 1.25;
        text-wrap: balance;
    }
}

table.threads div.nameAndDate {
    width: clamp(5em, 8em, 10em);
}

table.threads {

    & div.newPosts {
        font-size: 11pt;
    }

    tr.updatedSinceYourLastVisit {
        text-align: center;
        color: var(--colour2);
        font-size: 12pt;
        font-family: var(--TableTypeface);
    }
}

table.threads div.nameAndDate,
table.threads div.titleAndLastUpdated {
    hanging-punctuation: initial;
    display: flex;
    flex-direction: column;
    gap: 0.3125em;

    &.newSincePreviouslyLoggedIn {
        padding-left: 0.625em;
        border-left: 4px solid var(--colour1);
    }

    div.title {
        a {
            text-wrap: balance;
            color: var(--text-primary);

            &:visited {
                color: var(--text-primary);
            }
        }
    }

    a.unanswered {
        font-weight: 500;
    }

    & span.newPosts {
        color: var(--colour1Light);
        font-weight: 400;

        &.bookmarked {
            color: var(--colour1);
            font-size: 12pt;
        }
    }

    div.title {
        display: flex;
        align-items: center;
        gap: 0.625em;

        span.pollIndicator {
            font-family: var(--TableTypeface);
            font-weight: 500;
            font-size: 10pt;
            color: var(--text-inverse);
            background-color: black;
            padding: 0.3125em;
            padding-left: 0.625em;
            padding-right: 0.625em;
            border-radius: 4px;
            margin-right: 1.25em;

            &.complete {
                background-color: var(--colour1);
            }
        }

    }

    div.date {
        line-height: 1.25;
        word-break: break-word;
        text-wrap: balance;
    }

    div.messageCount {

        &.unanswered {
            color: var(--text-secondary);
        }
    }
}

table.threads {

    div.titleAndLastUpdated {

        div.boardName {
            font-weight: 400;
            color: var(--text-primary);
        }

        &.none {
            span.boardIndicator {
                display: none;
            }

            div.boardName {
                display: none;
            }
        }

        &.text {
            span.boardIndicator {
                display: none;
            }
        }

        &.lozenge {
            div.boardName {
                display: none;
            }
        }
    }

    div.date,
    div.boardName,
    div.messageCount,
    div.ballotCount,
    div.startsAt {
        font-size: var(--secondarySize);
        color: var(--text-secondary);
        font-variant-numeric: normal;

        em {
            font-style: normal;
            color: var(--colour1);
        }
    }

    div.ballotCount {
        color: var(--colour2);
    }

    div.startsAt {
        color: var(--colour2Bright);
    }

    .firstMessage {
        font-size: var(--baseSize);
        color: var(--text-tertiary);
        font-family: var(--TextTypeface);
        font-variant-numeric: oldstyle-nums;
        text-justify: inter-word;
        hyphens: auto;
        overflow-wrap: break-word;
        line-height: 1.25;
        text-align: left;
        max-width: 66ch;
        word-break: break-word;
        text-wrap: pretty;
    }

    td {
        vertical-align: middle;
        border-bottom: 1px solid var(--border-subtle);
        /* 0.3125 * 1.5 */
        padding-top: 0.46875em;
        padding-bottom: 0.46875em;

        a.moreThreadsLink {
            display: inline-block;
            padding-top: 0.625em;
        }
    }

    tr.moreThreadsRow td {
        text-align: left;
        border-bottom: 1px solid var(--surface-page);
    }

    tr.newBoardThreadRow td {
        opacity: 0;
        transform: translateX(-2em);
        transition: opacity 100ms ease var(--board-thread-transition-delay, 0ms),
            transform 600ms cubic-bezier(0.22, 1, 0.36, 1) var(--board-thread-transition-delay, 0ms);
    }

    tr.newBoardThreadRow.visible td {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    table.threads tr.newBoardThreadRow td {
        opacity: 1;
        transform: none;
        transition: none;
    }
}



/* Keith removed as shouldn't be global */

/* table.threads thead tr th:nth-child(1) {
    text-align: left;
}

table.threads thead tr th:nth-child(2),
table.threads tbody tr td:nth-child(2) {
    text-align: right;
} */

/*--- Individual Thread Page ---*/

section.messages {

    color: var(--text-primary);

    .pageLinks {
        display: grid;
        align-items: start;
        grid-template-columns: minmax(10ch, 22ch) minmax(30ch, var(--maximumParagraphWidth));
        column-gap: 1.25em;

        .nextPageLink {
            margin-bottom: 1.25em;
            margin-top: 2em;
        }

        .previousPageLink {
            margin-top: 2em;
            margin-bottom: 1.25em;
        }

        .pageLink {
            margin-left: 1.75rem;
            font-weight: 500;
            font-family: var(--uiTextTypeface);

            &:hover {
                text-decoration: none;
            }
        }
    }
}

div.messages {
    display: flex;
    flex-direction: column;
    gap: 1.25em;

    div.timeElapsedContainer,
    div.postSeparatorContainer {

        display: grid;
        align-items: center;
        grid-template-columns: minmax(10ch, 22ch) minmax(30ch, var(--maximumParagraphWidth));
        column-gap: 1.25em;

        div.timeElapsed,
        div.postSeparator {
            display: flex;
            justify-content: center;
            font-style: italic;
            font-family: var(--TextTypeface);
            font-size: calc(var(--baseSize));
            color: var(--text-secondary);
            margin-top: 1.25em;
            margin-bottom: 1.25em;

            span.lineLeft {
                margin-right: 1.25em;
                color: var(--text-faint);
            }

            span.lineRight {
                margin-left: 1.25em;
                color: var(--text-faint);
            }
        }

        div.postSeparator {
            /* margin-top: 0.3125em;
            margin-bottom: 0.3125em; */
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}

/* Styling individual messages */

div.messages div.postSeparator .dividerGraphic,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic {
    display: block;
    width: min(100%, 340px);
    background-repeat: no-repeat;
    background-size: contain;
}

div.messages div.postSeparator .dividerGraphic {
    background-position: center;
}

section.options section.displayOptions div.postSeparatorPreview .dividerGraphic {
    background-position: left center;
}

div.messages div.postSeparator .dividerGraphic.divider-1,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-1 {
    background-image: url("/images/interstitials/divider-1.svg");
    margin-top: 0.0875em;
    height: 0.45em;
    margin-bottom: 0.0875em;
}

div.messages div.postSeparator .dividerGraphic.divider-2,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-2 {
    background-image: url("/images/interstitials/divider-2.svg");
    height: 1.25em;
    width: 8em;
}

div.messages div.postSeparator .dividerGraphic.divider-3,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-3 {
    background-image: url("/images/interstitials/divider-3.svg");
    margin-top: 0.1125em;
    height: 0.4em;
    margin-bottom: 0.1125em;
}

div.messages div.postSeparator .dividerGraphic.divider-4,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-4 {
    background-image: url("/images/interstitials/divider-4.svg");
    height: 0.625em;
}

div.messages div.postSeparator .dividerGraphic.divider-5,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-5 {
    background-image: url("/images/interstitials/divider-5.svg");
    height: 1.25em;
}

div.messages div.postSeparator .dividerGraphic.divider-6,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-6 {
    background-image: url("/images/interstitials/divider-6.svg");
    height: 2.5em;
}

div.messages div.postSeparator .dividerGraphic.divider-7,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-7 {
    background-image: url("/images/interstitials/divider-7.svg");
    height: 2.5em;
}

div.messages div.postSeparator .dividerGraphic.divider-8,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-8 {
    background-image: url("/images/interstitials/divider-8.svg");
    height: 1.25em;
}

div.messages div.postSeparator .dividerGraphic.divider-9,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-9 {
    background-image: url("/images/interstitials/divider-9.svg");
    margin-top: 0.125em;
    height: 1.25em;
    margin-bottom: 0.125em;
}

div.messages div.postSeparator .dividerGraphic.divider-10,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-10 {
    background-image: url("/images/interstitials/divider-10.svg");
    height: 0.625em;
}

div.messages div.postSeparator .dividerGraphic.divider-11,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-11 {
    background-image: url("/images/interstitials/divider-11.svg");
    margin-top: 0.15625em;
    height: 0.9375em;
    margin-bottom: 0.15625em;
}

div.messages div.postSeparator .dividerGraphic.divider-12,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-12 {
    background-image: url("/images/interstitials/divider-12.svg");
    height: 0.3125em;
}

div.messages div.postSeparator .dividerGraphic.divider-13,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-13 {
    background-image: url("/images/interstitials/divider-13.svg");
    height: 1.25em;
}

div.messages div.postSeparator .dividerGraphic.divider-14,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-14 {
    background-image: url("/images/interstitials/divider-14.svg");
    height: 1.25em;
}

div.messages div.postSeparator .dividerGraphic.divider-15,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-15 {
    background-image: url("/images/interstitials/divider-15.svg");
    margin-top: 0.05625em;
    height: 0.2em;
    margin-bottom: 0.05625em;
}

div.messages div.postSeparator .dividerGraphic.divider-16,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-16 {
    background-image: url("/images/interstitials/divider-16.svg");
    height: 1.25em;
}

div.messages div.postSeparator .dividerGraphic.divider-more-space,
section.options section.displayOptions div.postSeparatorPreview .dividerGraphic.divider-more-space {
    height: 1.25em;
    background-image: none;
}


div.messages .message {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(10ch, 22ch) minmax(30ch, var(--maximumParagraphWidth));
    word-break: break-word;
    column-gap: 1.25em;
    cursor: default;

    &.accessibilityCurrentPost:not(:focus-visible) {
        outline: 1px dotted var(--text-primary);
        outline-offset: 0.625em;
        border-radius: var(--borderRadius);
    }

    &:focus-visible {
        outline: 1px solid var(--outline-strong);
        outline-offset: 0.625em;
        border-radius: var(--borderRadius);
    }

    div.body {

        /* Last read indicator. Hidden by default — will be shown with Javascript. */
        div.lastReadIndicator {

            display: none;
            position: absolute;
            top: 50%;
            right: -1em;
            /* Adjustment to get the pointer of the SVG lined up with the middle of what it's pointing at */
            transform: translate(100%, -22px);
            user-select: none;
            cursor: pointer;

            &.visible {
                display: block;
            }

            img {
                width: 4em;
                height: 4em;
            }

            div {
                position: relative;
                font-family: var(--uiTextTypeface);
                font-size: var(--baseSize);
                font-weight: 500;
                text-align: left;
                width: 7.5em;
                padding: 8px;
                border-radius: 15px;
                padding-left: 15px;
                left: 5.6em;
                top: -2.3em;
                text-shadow: 1px 1px 0 var(--text-inverse),
                    -1px 1px 0 var(--text-inverse),
                    1px -1px 0 var(--text-inverse),
                    -1px -1px 0 var(--text-inverse);
                hyphens: none;
            }
        }
    }

    &[data-deleted="True"] div.body {
        color: var(--status-deleted-text);
        font-family: var(--TableTypeface);
        font-weight: 400;
        filter: blur(8px);
        transition: 200ms;

        &:hover {
            filter: none;
            transition: 200ms;
        }

        & div.lastReadIndicator {
            color: var(--text-primary);
        }
    }

    & poll {
        display: none;
    }

    & h1 {
        line-height: normal;
        text-align: left;
        font-size: 24pt;
    }

    & h2 {
        /* margin-top: 0.3125em; */
        line-height: normal;
        text-align: left;
        font-size: 18pt;
    }

    & em.muted {
        color: lightgray;
        font-style: normal;
    }

    & div.displayName {
        overflow: hidden;
        line-height: 1.25;
    }

}

a.skipToPosts {
    position: fixed;
    top: 0.625rem;
    left: 0.625rem;
    z-index: 10000;
    padding: 0.625rem 1rem;
    border: 2px solid var(--outline-strong);
    border-radius: var(--borderRadius);
    background-color: var(--surface-raised);
    color: var(--text-primary);
    font-family: var(--uiTextTypeface);
    transform: translateY(calc(-100% - 1rem));

    &:focus-visible {
        transform: none;
    }
}

div.messages.postsFocusTarget:focus {
    outline: none;
}

div.messages .message>* {
    min-width: 0;
}

div.messages .message .metadata {
    grid-column: 1;
}

div.messages .message .body {
    grid-column: 2;
    position: relative;
}

div.messages .body {
    padding-left: 1.25em;
    margin-left: 0.5rem;
    border-left: 1px solid var(--lighterLineColour);
    word-break: break-word;
    min-width: 0;

    &.newPoster {
        padding-top: 0.625em;
        border-top: 1px solid var(--lighterLineColour);
    }
}

section.messages div.messages .creationDate {
    font-size: var(--quaternarySize);
    font-weight: 300;
    color: var(--text-secondary);
    word-break: break-word;
    text-wrap: pretty;

    .smallcaps {
        font-variant-caps: small-caps;
        font-size: calc(var(--quaternarySize));
        color: var(--text-secondary);
    }
}

section.messages div.messages div.metadata {
    font-family: var(--metadataTypeface);
    font-size: var(--baseSize);
    font-weight: 500;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.3125em;
    align-self: center;
    /* Retained for implementing display modes */
    /* position: sticky;
    bottom: 1.25em;
    top: 1.25em; */
}

.colossusTypography {
    font-family: var(--PostTypeface);
    font-variant-numeric: oldstyle-nums;
    line-height: 1.25;
    font-size: var(--baseSize);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    text-wrap: pretty;
    display: flex;
    flex-direction: column;

    div.embed {
        display: flex;
        align-items: center;
        gap: 1.25em;
        justify-content: flex-start;
        font-family: var(--uiTextTypeface);
        padding: 0.9375em;
        background-color: var(--colour3Lighter);
        border-radius: 8px;
        font-weight: 400;

        img.embedIcon {
            max-height: 3em;
            width: 3em;
            margin: initial;
        }

        span.embedLabel {
            min-width: 0;
            word-break: break-all;
            font-variant-numeric: normal;
        }
    }

    [data-hidden-text-container] {
        display: inline-flex;
        align-items: baseline;
        gap: 0.35em;
        padding: 0.15em 0.45em;
        border-radius: 6px;
        background-color: var(--colour3Lighter);
        color: inherit;
        vertical-align: baseline;
    }

    [data-hidden-text-content] {
        word-break: break-word;
    }

    p+*,
    *+p {
        margin-top: 0.625em;
    }

    & *+ul,
    *+ol,
    ul+*,
    ol+*,
    li>ul,
    li>ol {
        margin-top: 0.625em;
    }

    *+h1,
    *+h2,
    *+h3,
    *+h4 {
        margin-top: 1.25em;
    }

    a+p {
        margin-top: 0.625em;
    }

    h1,
    h2,
    h3,
    h4 {
        font-size: var(--baseSize);
        font-family: var(--HeadingTypefaceText);
        font-weight: strong;
    }

    &.firstMessage,
    .message.firstMessage & {
        h1 {
            font-size: calc(var(--baseSize) * 1.5);
        }

        h2 {
            font-size: calc(var(--baseSize) * 1.125);
        }

        h3 {
            font-size: calc(var(--baseSize) * 1.1);
        }

        h4 {
            font-size: calc(var(--baseSize) * 1.05);
        }
    }

    strong {
        font-weight: 700;
    }

    a {
        color: var(--linkColour);
        font-family: var(--PostTypeface);
        font-weight: 500;
        word-break: break-word;

        &:visited {
            color: var(--linkVisited);
        }

        &:hover {
            text-decoration: underline;
        }
    }

    pre,
    code {
        word-break: normal;
    }

    pre {
        white-space: pre;
        overflow-wrap: normal;
        hyphens: none;
        padding-right: 0;
        width: 100%;
        max-width: 100%;

        code {
            overflow-wrap: normal;
            hyphens: none;
        }
    }

    p+p,
    p+ul,
    p+ol {
        margin-top: 0.625em;
    }

    p+h1,
    p+h2 {
        margin-top: 1.25em;
    }

    h1+p,
    h2+p {
        margin-top: 0.625em;
    }

    *+table,
    table+* {
        margin-top: 1.25em;
    }

    table {
        font-family: var(--TableTypeface);
        font-variant: normal;
        width: max-content;
        max-width: 100%;
        overflow-x: hidden;
        border-top: 1px solid var(--border-strong);
        border-bottom: 1px solid var(--border-strong);
        font-variant-numeric: normal;
        text-align: left;
        word-break: break-word;
        hyphens: auto;
        font-size: 12pt;

        * {
            font-family: var(--TableTypeface);
        }

        tr {

            th:first-child,
            td:first-child {
                padding-left: 0.625em;
            }

            th:last-child,
            td:last-child {
                padding-right: 0.625em;
            }
        }

        strong,
        th {
            font-weight: 500;
        }

        th {
            &[scope="row"] {
                /* background-color: var(--grey-100); */

                p {
                    text-align: right;
                }
            }

            &[scope="col"] {
                /* background-color: var(--grey-100); */
                padding-top: 0.625em;
                padding-bottom: 0.625em;
            }
        }


        p {
            font-variant: normal;
            text-align: left;

            .smallcaps {
                font-variant: normal;
            }

            a {
                font-family: var(--TableTypeface);
            }
        }

        a {
            font-family: var(--TableTypeface);
        }

        th p {
            word-break: keep-all;
        }

        th,
        td {
            hyphens: auto;
        }
    }

    .tableWrapper {
        overflow-x: auto;
        margin: 1em 0;
    }

    div.flickrEmbed {
        margin-top: 0.625em;
        margin-bottom: 0.625em;
        padding: 0.35em;
        background-color: var(--embed-flickr-background);
        color: var(--embed-flickr-text);
    }

    [data-embed-type] {
        max-width: 100%;
        text-align: left;

        a {
            color: var(--text-primary);
        }
    }

    div.replyingToEmbed {
        background-color: var(--surface-blockquote);
        border-radius: var(--borderRadius);
        padding: 0.9375em;
        font-size: calc(var(--baseSize) * 0.8);

        div.header {
            display: flex;
            align-items: center;
            gap: 0.625em;
        }

        a.replyingToExpand {
            background-image: url('/images/icons/link.svg');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            display: inline-block;
            flex: 0 0 auto;
            height: 1.25em;
            width: 1.25em;

            &:hover {
                text-decoration: none;
            }
        }

        a.label {
            color: var(--colour2Bright);
            font-family: var(--uiTextTypeface);

            &:hover {
                text-decoration: none;
            }
        }

        * {
            font-size: calc(var(--baseSize) * 0.9);
        }
    }

    *+div,
    div+*,
    *+figure,
    figure+* {
        margin-top: 0.625em;
    }

    figure+* {
        margin-top: 1.25em;
    }

    div.label {
        margin: 0;
    }

    img {
        display: flex;
        margin: 0 auto;
        margin-top: 0.625em;
        margin-bottom: 0.625em;
        max-height: 40vh;
        max-width: 100%;
        width: auto;
        height: auto;
    }

    /* BlueSky embeds */

    div.blueskyEmbed {
        padding: 1.25em;
        padding-top: 0.625em;
        padding-bottom: 0.625em;
        background-color: var(--embed-bluesky-background);
        border-radius: 8px;

        div.blueskyImages {
            img {
                border-radius: var(--borderRadius);
            }
        }

        div.blueskyBody+div.blueskyExternalContainer {
            margin-top: 1.25em;
        }

        * {
            font-family: var(--uiTextTypeface);
            font-variant-caps: normal;
            font-variant-numeric: normal;
            text-align: left;
        }

        .smallcaps {
            font-size: unset;
        }

        a {
            font-family: var(--uiTextTypeface);
            font-weight: 400;
        }

        div.blueskyHeader {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.625em;
            margin-top: 0.3125em;

            div+div {
                margin: 0;
            }

            div.author {
                display: flex;
                align-items: center;
                gap: 0.625em;

                span.blueskyAuthor {
                    color: var(--text-primary);
                    font-weight: 500;
                }

                img.blueskyIcon {
                    height: 32px;
                    width: 32px;
                    margin: 0;
                }
            }

            div.blueskyLinkToPost {
                display: flex;
                align-items: center;
                gap: 0.3125em;

                a:hover {
                    text-decoration: none;
                }

                img {
                    position: relative;
                    top: 1px;
                    display: inline;
                    height: var(--baseSize);
                    margin: 0;
                }
            }
        }

        div.blueskyBody {
            text-align: left;
            margin-bottom: 0.625em;

            .smallcaps {
                font-variant: normal;
                font-variant-numeric: normal;
            }

            font-variant-numeric: normal;
        }

        div.blueskyQuote {
            padding-left: 0.625em;
            padding-right: 0.625em;
            padding-top: 0.31125em;
            padding-bottom: 0.31125em;
            border-left: 2px solid var(--embed-bluesky-quote-border);

            div.blueskyQuoteAuthor {
                a {
                    font-weight: 500;
                    color: var(--text-primary);

                }

                font-weight: 500;
            }

            div.blueskyQuoteText {
                text-align: left;
            }

            div+div {
                margin-top: 0.625em;
            }
        }

        div.blueskyExternalContainer {

            img.blueskyExternalThumb,
            video.blueskyVideo {
                display: block;
                margin: 0 auto;
                max-width: 100%;
                max-height: 40vh;
            }

            a:hover {
                text-decoration: none;
            }

            a {
                color: var(--text-primary);
            }

            div.blueskyExternalTitle {
                font-weight: 500;
                text-align: left;
                hyphens: auto;

                .smallcaps {
                    font-variant: normal;
                }

                font-variant-numeric: normal;
            }

            div.blueskyExternalDescription {
                text-align: left;
                hyphens: auto;
                font-size: 12pt;

                .smallcaps {
                    font-variant: normal;
                }

                font-variant-numeric: normal;
            }

            *+* {
                margin-top: 0.625em;
            }

            /* img+div {
                        margin-top: 1.25em;
                    } */

            div.blueskyExternalTitle+div {
                margin-top: 0.3125em;
            }
        }

        div+div {
            margin-top: 0.625em;
        }
    }

    /* Hacker News */

    div.hackerNewsEmbed {
        padding: 0.95em 1rem;
        border: 1px solid var(--lighterLineColour);
        border-left: 4px solid var(--embed-hackernews-accent);
        border-radius: 10px;
        background: var(--embed-hackernews-background);
        font-family: var(--uiTextTypeface);

        * {
            font-family: var(--uiTextTypeface);
            text-align: left;
            font-variant-numeric: normal;
        }

        .smallcaps {
            font-variant: normal;
            font-size: unset;
        }

        a.comments {
            font-weight: 400;
        }

        div.header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.625em;
            margin-bottom: 0.625em;

            img {
                max-height: 2em;
                width: auto;
                height: auto;
                margin: 0;
            }

            div.label {
                font-size: var(--baseSize);
                font-weight: 500;
                color: var(--embed-hackernews-label);
            }
        }

        div.meta {
            margin-top: 0.3125em;
            font-size: calc(var(--baseSize) * 0.75);
        }
    }

    /* IMDb */

    div.imdbEmbed {
        padding: 0.95em 1rem;
        border: 1px solid var(--lighterLineColour);
        border-left: 4px solid var(--embed-imdb-accent);
        border-radius: 10px;
        background: linear-gradient(180deg, var(--embed-imdb-background-start) 0%, var(--embed-imdb-background-end) 100%);
        font-family: var(--uiTextTypeface);

        * {
            font-family: var(--uiTextTypeface);
            font-variant-numeric: normal;
            text-align: left;
        }

        .smallcaps {
            font-variant: normal;
            font-size: unset;
        }

        div.header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.625em;
            margin-bottom: 0.625em;

            img {
                max-height: 1.75em;
                width: auto;
                height: auto;
                margin: 0;
            }

            div.label {
                font-size: var(--baseSize);
                font-weight: 600;
                color: var(--embed-imdb-label);
            }
        }

        a.title {
            font-weight: 600;
        }

        div.meta {
            margin-top: 0.15625em;
            font-size: calc(var(--baseSize) * 0.75);
        }

        div.director {
            font-family: var(--uiTextTypeface);
            margin-top: 0.15625em;
            font-size: calc(var(--baseSize) * 0.75);
            line-height: 1.25;
        }

        div.detail {
            font-family: var(--PostTypeface);
            margin-top: 0.625em;
            font-size: calc(var(--baseSize) * 0.85);
            line-height: 1.25;
        }
    }

    /* Wikipedia */

    div.wikipediaEmbed {
        padding: 0.95em 1rem;
        border: 1px solid var(--lighterLineColour);
        border-left: 4px solid var(--embed-wikipedia-accent);
        border-radius: 10px;
        background: linear-gradient(180deg, var(--embed-wikipedia-background-start) 0%, var(--embed-wikipedia-background-end) 100%);
        font-family: var(--uiTextTypeface);

        * {
            text-align: left;
        }

        .smallcaps {
            font-variant: normal;
            font-size: unset;
        }

        div.header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.625em;
            margin-bottom: 0.625em;

            img {
                max-height: 1.75em;
                width: auto;
                height: auto;
                margin: 0;
            }

            div.label {
                font-family: var(--uiTextTypeface);
                font-size: var(--baseSize);
                font-weight: 600;
                color: var(--embed-wikipedia-label);

                a {
                    font-family: var(--uiTextTypeface);
                }
            }
        }

        div.content {
            display: grid;
            grid-template-columns: 2fr 1fr;
            align-items: center;
            gap: 0.625rem;
        }

        div.copy {
            margin-top: 0.6125em;
        }

        a.title {
            font-family: var(--uiTextTypeface);
            display: inline-block;
            font-weight: 600;
        }

        p {
            margin-top: 0.375em;
            margin-bottom: 0;
            font-family: var(--TextTypeface);
            font-size: var(--baseSize);
            line-height: 1.3;
        }

        a.thumbnail {
            margin: 0;
            text-decoration: none;
        }

        a.thumbnail img {
            display: block;
            max-width: 100%;
            height: auto;
            border-radius: var(--borderRadius);
            margin: 0;
        }
    }

    /* Open Graph */

    div.openGraphEmbed {
        padding: 0.95em 1rem;
        border: 1px solid var(--lighterLineColour);
        border-radius: 10px;
        background: var(--embed-opengraph-background);

        * {
            text-align: left;
        }

        .smallcaps {
            font-variant: normal;
            font-size: unset;
        }

        div.header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.625em;
            margin-bottom: 0.625em;

            img {
                max-height: 1.25em;
                width: auto;
                height: auto;
                margin: 0;
            }

            div.label {
                font-family: var(--uiTextTypeface);
                font-size: calc(var(--baseSize) * 1.1);
                font-weight: 600;
                color: var(--embed-opengraph-label);

                a {
                    font-family: var(--uiTextTypeface);
                }
            }
        }

        div.content {
            display: grid;
            grid-template-columns: 2fr 1fr;
            align-items: center;
            gap: 0.625em;
        }

        div.copy {
            min-width: 0;
            flex: 1 1 14rem;
        }

        a.title {
            font-family: var(--uiTextTypeface);
            font-variant-numeric: normal;
            display: inline-block;
            font-weight: 500;
            font-size: calc(var(--baseSize) * 0.9);
            word-break: break-word;
        }

        div.author {
            font-weight: 400;
            font-family: var(--uiTextTypeface);
            font-size: calc(var(--baseSize) * 0.9);
            margin-top: 0.3125em;
        }

        p {
            margin-top: 0.625em;
            margin-bottom: 0;
            font-family: var(--TextTypeface);
            line-height: 1.25;
        }

        a.thumbnail {
            margin: 0;
            text-decoration: none;
        }

        a.thumbnail img {
            display: block;
            max-width: 100%;
            height: auto;
            border-radius: var(--borderRadius);
            margin: 0;
        }
    }

    /* Colossus */

    div.colossusEmbed {
        padding: 0.95em 1rem;
        border: 1px solid var(--lighterLineColour);
        border-radius: 10px;
        background-color: var(--embed-colossus-background);

        * {
            text-align: left;
        }

        .smallcaps {
            font-variant: normal;
            font-size: unset;
        }

        div.header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.625em;
            margin-bottom: 0.625em;

            img {
                max-height: 1.5em;
                width: auto;
                height: auto;
                margin: 0;
            }

            div.label {
                font-family: var(--uiTextTypeface);
                font-size: var(--baseSize);
                font-weight: 600;
            }
        }

        a.title {
            font-family: var(--uiTextTypeface);
            font-size: calc(var(--baseSize) * 0.8);
            font-weight: 500;
            text-align: left;
        }

        div.meta {
            margin-top: 0.625em;
            font-size: calc(var(--baseSize) * 0.75);
            font-family: var(--uiTextTypeface);
            font-weight: 500;
        }

        a.title+div.meta {
            margin-top: 0;
        }

        div.embedBody {
            p {
                font-family: var(--TextTypeface);
            }
        }

        div.colossusEmbeddedMessage,
        div.colossusEmbeddedThread {
            font-family: var(--TextTypeface);
            margin-top: 0.625em;

            div.postSnippet * {
                font-family: var(--TextTypeface);
            }

            a.colossusEmbedContinueLink {
                font-family: var(--TextTypeface);
                color: var(--embed-colossus-continue-link);
            }

            blockquote {
                background-color: var(--embed-colossus-blockquote-background);
            }

            p+p,
            p+ul,
            p+ol,
            ul+p,
            ol+p,
            blockquote+p,
            p+blockquote {
                margin-top: 0.625em;
            }

            pre,
            blockquote,
            table,
            figure,
            div[data-embed-type] {
                margin-top: 0.625em;
            }
        }
    }

    figure {
        img {
            margin-top: 0;
            margin-bottom: 0;
            height: auto;
            width: auto;
        }

        figcaption {
            margin-top: 0.625em;
            text-align: center;
            font-family: var(--imageCaptionTypeface);
            font-style: var(--imageCaptionStyle);
            font-size: var(--secondarySize);
            color: var(--text-primary);
            font-variant-numeric: normal;

            * {
                font-family: inherit;
            }
        }
    }

    span.brokenImage {
        display: flex;
        font-family: var(--uiTextTypeface);
        align-items: center;
        justify-content: flex-start;
        gap: 0.625em;
        opacity: 0.3;

        +* {
            margin-top: 0.625em;
        }

        img {
            height: 1.25em;
            margin: unset;
            cursor: none;
        }
    }

    iframe.youTube {
        width: 100%;
        height: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 8px;
        overflow: hidden;
    }

    .youTubeLogoLink+div.youTubeText {
        margin-top: 0;
    }

    div.youTubeText+div.youTubeMedia {
        margin-top: 0;
    }

    div.youTubeCard {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 1.25em;
        align-items: center;
        border: none;
        border-radius: 8px;
        overflow: hidden;
        background: var(--surface-muted);
        background: linear-gradient(180deg, var(--embed-youtube-background-start) 0%, var(--embed-youtube-background-end) 100%);
        padding: 1.25em;

        &[data-video-unavailable] {
            padding: 0.625em;
            display: flex;

            div.youTubeMedia {
                display: none;
            }

            div.youTubeText {
                text-align: left;
                flex: unset;
                min-width: unset;

                div.youTubeTitle {
                    font-weight: 400;
                    margin-bottom: 0;
                    color: var(--embed-youtube-unavailable-text);
                    font-size: calc(var(--baseSize) * 0.85);
                }
            }

            a.youTubeLogoLink,
            img.youTubeLogo {
                filter: grayscale(1);
                max-width: 2em;
                height: 2em;
                margin: 0;
            }
        }

        >a.youTubeLogoLink {
            display: block;
            width: 4em;
            height: 4em;
            margin-top: 0;
            margin-bottom: 0;
            background-image: url("/images/icons/youtube.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        img.youTubeLogo {
            display: block;
            height: 4em;
            width: auto;
            max-width: none;
            margin-top: 0;
            margin-bottom: 0;
        }

        div.youTubeText {
            text-align: right;
            font-size: var(--baseSize);

            a:hover {
                text-decoration: none;
            }

            div+*,
            *+div {
                margin-top: 0;
            }

            div.youTubeTitle {
                font-family: var(--uiTextTypeface);
                font-variant-numeric: normal;
                font-weight: 500;
                margin-bottom: 0.3125em;
                word-break: break-word;

                &[data-placeholder] {
                    display: none;
                }
            }

            div.youTubeChannelName {
                text-align: right;
                font-variant-numeric: normal;
                font-family: var(--uiTextTypeface);
            }

            div.youTubeStartTime {
                font-family: var(--uiTextTypeface);
                font-variant-numeric: normal;
                font-size: calc(var(--baseSize) * 0.85);
            }
        }

        div.youTubeMedia {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.625em;

            a.youTubeLink {
                display: block;
                width: clamp(8em, 22vw, 12em);
                aspect-ratio: 16 / 9;
                border-radius: 8px;
                overflow: hidden;
                background: var(--embed-youtube-placeholder-background);
            }

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
                overflow: hidden;
                margin-top: 0;
                margin-bottom: 0;
            }

            button.youTubeDrawerButton,
            a.youTubeDrawerButton {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.625em;
                margin: 0;
                padding: 0.45em 0.8em;
                border: 1px solid var(--border-control);
                border-radius: 6px;
                background: var(--surface-raised);
                color: var(--text-primary);
                text-decoration: none;
                font-family: var(--uiTextTypeface);
                font-size: calc(var(--baseSize) * 0.85);
                cursor: pointer;

                &:hover {
                    background: var(--surface-button-hover);
                    box-shadow: var(--shadow-raised) 1px 1px 3px;
                }

                &:focus {
                    outline: 0.5px solid var(--highlightColour);
                }

                &:active {
                    transform: translateY(1px);
                    box-shadow: none;
                }

                &:disabled {
                    cursor: default;
                    opacity: 0.45;
                    box-shadow: none;
                }
            }
        }

        &[data-youtube-metadata-state="pending"],
        &[data-youtube-metadata-state="loading"] {
            min-height: 7.5em;
        }

        .youTubeMetadataFadeIn {
            animation: fade-in 0.2s ease;
        }
    }

    div.youTubeDrawerPanel {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-0.625em);
        transition: max-height 0.3s ease, opacity 0.2s ease, transform 0.3s ease;
    }

    div.youTubeDrawerPanelVisible {
        max-height: 80vh;
        opacity: 1;
        transform: translateY(0);
        margin-top: 0.625em;
    }

    div.googleMapsEmbed {
        border-radius: 8px;
        overflow: hidden;
    }

    iframe.googleMapsFrame {
        width: 100%;
        aspect-ratio: 4 / 3;
        min-height: 18em;
        max-height: 70vh;
        border: 0;
        border-radius: 8px;
        overflow: hidden;
    }

}

/* Need to stop the editor having various features as it creates odd indents. */

.tiptap p,
.tiptap li,
.tiptap blockquote {
    text-align: left;
    text-justify: auto;
    hyphens: none;
    text-wrap: stable;
}

/* Tables need overridden to be easier to construct in the editor to be able to see cell
   demarcations and indicate whether it's the first row or column that's the header. */

section.editor {
    table {

        border-top: none;
        border-bottom: none;

        td,
        th {
            border: 1px dotted var(--text-primary);
        }

        th {
            background-color: var(--grey-100);
        }
    }
}

/* Image, table and code zooming */

section.messages div.message div.body {

    img.expand {
        max-width: 60vw;
        max-height: 85vh;
        cursor: zoom-out;
    }

    img,
    table {
        cursor: zoom-in;
        will-change: transform;
    }

    pre.canExpand {
        cursor: zoom-in;
        will-change: transform;
    }

    [data-embed-type]:not([data-embed-type="flickr"]):not([data-embed-type="image"]) img,
    .embed img {
        cursor: revert;
        will-change: auto;
    }

    pre.expand,
    table.expand {
        max-width: 1000ch;
        overflow-x: unset;
    }

    pre.canExpand.expand {
        cursor: zoom-out;
    }

    pre.expand {
        width: max-content;
        padding-right: 2.5em;
    }
}

div.interstitial {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(10ch, 22ch) minmax(30ch, var(--maximumParagraphWidth));
    column-gap: 1.25em;
    margin-left: 0.625em;
    margin-top: 1.25em;
    margin-bottom: 1.25em;

    p {
        margin-top: 1.5em;
        margin-bottom: 1.5em;
        margin-left: 0.625em;
        text-align: center;
        font-family: var(--uiTextTypeface);
        font-weight: 500;
        background-color: var(--colour5);
        padding: 0.3125em;
    }

    a {
        font-family: var(--uiTextTypeface);
        font-size: 14pt;
        font-weight: 500;
        margin-top: 1.25em;
        margin-bottom: 1.25em;
    }
}


section.controlPanel {
    display: flex;
    justify-content: flex-end;

    & button+button {
        margin-left: 1.25em;
    }
}


/*--- Login Page ---*/

section.loginPage {
    display: flex;
    gap: 1.25em;
    flex-direction: column;
    justify-content: center;
    width: fit-content;
    margin: auto;

    section.login+section.errorMessage {
        margin-top: 0.625em;
    }

    section.login {
        display: grid;
        align-items: center;
        font-family: var(--TableTypeface);
        font-size: var(--baseSize);
        grid-template-columns: 14ch 30ch;
        gap: 0.625em;
        border-top: 1em solid var(--colour1);
        border-radius: 6px;
        background-color: var(--colour4);
        padding: 3em;
        padding-left: 3.5em;
        padding-right: 3.5em;

        button {
            margin: 0;
        }

        label {
            text-align: right;
            font-weight: 400;
        }

        div.submitDialog {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 1.25em;

            div.rememberMeDialog {
                display: flex;
                align-items: baseline;
                gap: 0.625em;
            }
        }

        @media (max-width: 1000px) {
            grid-template-columns: 1fr;

            div.submitDialog {
                align-items: flex-start;
            }

            label {
                text-align: left;
            }
        }

        input {
            &::placeholder {
                color: var(--text-muted);
            }

            background-color: var(--surface-input);
            border-radius: 6px;
        }
    }

    @media (max-width: 1000px) {
        width: unset;
    }

}

div.error {
    background-color: var(--status-error-background);
    border-radius: 6px;
    padding: 1.25em;
    color: var(--status-error-text);
    font-family: var(--uiTextTypeface);
    font-weight: 400;

    &.invisible {
        visibility: hidden;
    }
}


section.notRegistered p {
    font-family: var(--TableTypeface);
}

.blackBorder {
    border: 4px solid var(--border-strong);
}

/* Animation */

@keyframes bounce-in {
    0% {
        transform: translateY(var(--initial-translate));
        opacity: 0;
    }

    20% {
        transform: translateY(-24px);
        opacity: 1;
    }

    40% {
        transform: translateY(12px);
    }

    60% {
        transform: translateY(-6px);
    }

    80% {
        transform: translateY(4px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Inside the editor — this needs to be here because of specificity, but it's
   a copy of what's above to make editing text look like it is when it's
   posted. */

.ql-container {
    border-bottom-left-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
}

.ql-toolbar {
    border-top-left-radius: var(--borderRadius);
    border-top-right-radius: var(--borderRadius);
}

div.ql-editor {

    & p+p {
        margin-top: 0.625em;
    }

    & p+h1 {
        margin-top: 1.25em;
    }

    & h1+p {
        margin-top: 0.625em;
    }

    & p+h2 {
        margin-top: 1.25em;
    }

    & h2+p {
        margin-top: 0.625em;
    }

    & p+h3 {
        margin-top: 1.25em;
    }

    & h3+p {
        margin-top: 0.625em;
    }

    & h1+h2 {
        margin-top: 0.625em;
    }

    & h2+h3 {
        margin-top: 0.625em;
    }

    & h3+h2 {
        margin-top: 0.625em;
    }

    & table+* {
        margin-top: 1.25em;
    }

    & p+ul,
    p+ol {
        margin-top: 0.625em;
    }

    *+blockquote,
    blockquote+* {
        margin: 1.25em;
        margin-left: 0;
        margin-right: 0;
    }

    blockquote+blockquote {
        margin-top: 0.625em;
    }

}

#editor .ql-container {
    flex: 1;
    overflow-y: auto;
}

#editor .ql-toolbar {
    max-width: 100%;
}

.tiptap-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    align-items: center;
    padding: 0.625em;
    border-bottom: 1px solid var(--lighterLineColour);
}

.tiptap-toolbar button {
    border: 1px solid var(--lineColour);
    border-radius: calc(var(--borderRadius) * 0.75);
    background: var(--backgroundColour);
    color: inherit;
    padding: 0.35em;
    font: inherit;
    cursor: pointer;
    width: 2.2em;
    height: 2.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tiptap-toolbar-menu {
    position: relative;
}

.tiptap-toolbar button.tiptap-toolbar-menu-toggle {
    min-width: 2.2em;
}

.tiptap-toolbar-menu.open .tiptap-toolbar-menu-toggle {
    background: color-mix(in srgb, var(--colour2) 10%, var(--backgroundColour));
    border-color: color-mix(in srgb, var(--colour2) 45%, var(--lineColour));
}

.tiptap-toolbar-menu-panel {
    position: absolute;
    top: calc(100% + 0.35em);
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.3125em;
    padding: 0.4em;
    border: 1px solid var(--lighterLineColour);
    border-radius: calc(var(--borderRadius) * 0.75);
    background: var(--surface-raised);
    box-shadow: 0 0.4em 1em var(--shadow-raised);
    min-width: 11.5em;
}

.tiptap-toolbar-menu-panel[hidden] {
    display: none;
}

.tiptap-toolbar-menu-panel .tiptap-toolbar-menu-item {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 0.55em;
    padding: 0.45em 0.6em;
}

.tiptap-toolbar-menu-panel .tiptap-toolbar-menu-item::before {
    display: none;
}

.tiptap-toolbar-menu-panel .tiptap-toolbar-menu-item .tiptap-toolbar-menu-item-icon {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    background-color: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.tiptap-toolbar-menu-panel .tiptap-toolbar-menu-item span {
    line-height: 1.2;
    white-space: nowrap;
}

.tiptap-toolbar-menu-panel .tiptap-toolbar-menu-item .tiptap-toolbar-menu-item-icon[data-icon-path="/images/icons/toolbar/link.svg"] {
    mask-image: url("/images/icons/toolbar/link.svg");
    -webkit-mask-image: url("/images/icons/toolbar/link.svg");
}

.tiptap-toolbar-menu-panel .tiptap-toolbar-menu-item .tiptap-toolbar-menu-item-icon[data-icon-path="/images/icons/toolbar/image.svg"] {
    mask-image: url("/images/icons/toolbar/image.svg");
    -webkit-mask-image: url("/images/icons/toolbar/image.svg");
}

.tiptap-toolbar-menu-panel .tiptap-toolbar-menu-item .tiptap-toolbar-menu-item-icon[data-icon-path="/images/icons/toolbar/table.svg"] {
    mask-image: url("/images/icons/toolbar/table.svg");
    -webkit-mask-image: url("/images/icons/toolbar/table.svg");
}

.tiptap-toolbar-menu-panel .tiptap-toolbar-menu-item .tiptap-toolbar-menu-item-icon[data-icon-path="/images/icons/toolbar/movie.svg"] {
    mask-image: url("/images/icons/toolbar/movie.svg");
    -webkit-mask-image: url("/images/icons/toolbar/movie.svg");
}

.tiptap-toolbar-menu-panel .tiptap-toolbar-menu-item .tiptap-toolbar-menu-item-icon[data-icon-path="/images/icons/toolbar/importFile.svg"] {
    mask-image: url("/images/icons/toolbar/importFile.svg");
    -webkit-mask-image: url("/images/icons/toolbar/importFile.svg");
}

.tiptap-toolbar-menu-panel .tiptap-toolbar-menu-item .tiptap-toolbar-menu-item-icon[data-icon-path="/images/icons/hidden.svg"] {
    mask-image: url("/images/icons/hidden.svg");
    -webkit-mask-image: url("/images/icons/hidden.svg");
}

.tiptap-toolbar-menu-panel .tiptap-toolbar-menu-item:hover:not(:disabled) {
    background: var(--colour2);
    border-color: var(--colour2);
    color: var(--text-inverse);
}

.tiptap-toolbar button::before {
    content: "";
    width: 1.1em;
    height: 1.1em;
    display: block;
    background-color: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.tiptap-toolbar button.active {
    background: var(--colour2);
    border-color: var(--colour2);
    color: var(--text-inverse);
}

.tiptap-toolbar button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tiptap-toolbar button[data-action="heading1"]::before {
    mask-image: url("/images/icons/toolbar/h1.svg");
    -webkit-mask-image: url("/images/icons/toolbar/h1.svg");
}

.tiptap-toolbar button[data-action="heading2"]::before {
    mask-image: url("/images/icons/toolbar/h2.svg");
    -webkit-mask-image: url("/images/icons/toolbar/h2.svg");
}

.tiptap-toolbar button[data-action="bold"]::before {
    mask-image: url("/images/icons/toolbar/bold.svg");
    -webkit-mask-image: url("/images/icons/toolbar/bold.svg");
}

.tiptap-toolbar button[data-action="italic"]::before {
    mask-image: url("/images/icons/toolbar/italic.svg");
    -webkit-mask-image: url("/images/icons/toolbar/italic.svg");
}

.tiptap-toolbar button[data-action="underline"]::before {
    mask-image: url("/images/icons/toolbar/underline.svg");
    -webkit-mask-image: url("/images/icons/toolbar/underline.svg");
}

.tiptap-toolbar button[data-action="strike"]::before {
    mask-image: url("/images/icons/toolbar/strikethrough.svg");
    -webkit-mask-image: url("/images/icons/toolbar/strikethrough.svg");
}

.tiptap-toolbar button[data-action="bulletList"]::before {
    mask-image: url("/images/icons/toolbar/list.svg");
    -webkit-mask-image: url("/images/icons/toolbar/list.svg");
}

.tiptap-toolbar button[data-action="orderedList"]::before {
    mask-image: url("/images/icons/toolbar/list-numbers.svg");
    -webkit-mask-image: url("/images/icons/toolbar/list-numbers.svg");
}

.tiptap-toolbar button[data-action="blockquote"]::before {
    mask-image: url("/images/icons/toolbar/blockquote.svg");
    -webkit-mask-image: url("/images/icons/toolbar/blockquote.svg");
}

.tiptap-toolbar button[data-action="codeBlock"]::before {
    mask-image: url("/images/icons/toolbar/code.svg");
    -webkit-mask-image: url("/images/icons/toolbar/code.svg");
}

.tiptap-toolbar button[data-action="link"]::before {
    mask-image: url("/images/icons/toolbar/link.svg");
    -webkit-mask-image: url("/images/icons/toolbar/link.svg");
}

.tiptap-toolbar button[data-action="image"]::before {
    mask-image: url("/images/icons/toolbar/image.svg");
    -webkit-mask-image: url("/images/icons/toolbar/image.svg");
}

.tiptap-toolbar button[data-action="table"]::before {
    mask-image: url("/images/icons/toolbar/table.svg");
    -webkit-mask-image: url("/images/icons/toolbar/table.svg");
}

.tiptap-toolbar button[data-menu-toggle="insert"]::before {
    mask-image: url("/images/icons/toolbar/paperclip.svg");
    -webkit-mask-image: url("/images/icons/toolbar/paperclip.svg");
}

.tiptap-toolbar button[data-action="embed"]::before {
    mask-image: url("/images/icons/toolbar/embed.svg");
    -webkit-mask-image: url("/images/icons/toolbar/embed.svg");
}

.tiptap-table-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45em;
    align-items: center;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.4rem);
    padding: 0 0.625em;
    border-bottom: 0 solid var(--lighterLineColour);
    background: color-mix(in srgb, var(--colour6) 18%, var(--backgroundColour));
    transition:
        max-height 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        padding 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-bottom-width 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        visibility 0s linear 180ms;
}

.tiptap-table-controls.open {
    max-height: 12rem;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    padding: 0.45em 0.625em 0.625em;
    border-bottom-width: 1px;
    transition-delay: 0s;
}

.tiptap-table-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--lineColour);
    border-radius: calc(var(--borderRadius) * 0.75);
    background: var(--backgroundColour);
    color: inherit;
    padding: 0.38em;
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
}

.tiptap-table-controls button img {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
}

.tiptap-table-controls button:hover:not(:disabled) {
    background: color-mix(in srgb, var(--colour2) 10%, var(--backgroundColour));
    border-color: color-mix(in srgb, var(--colour2) 45%, var(--lineColour));
}

.tiptap-table-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tiptap-table-header-option {
    display: inline-flex;
    margin-left: 0.625em;
    align-items: center;
    gap: 0.35em;
    white-space: nowrap;
    cursor: pointer;
}

.tiptap-table-header-option:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

section.editor {
    border: 1px solid var(--lighterLineColour);
    border-radius: 8px;
}

#editor .tiptap-host {
    display: flex;
    flex: 1;
    min-height: 0;
}

.tiptap {
    flex: 1;
    min-height: 8em;
    overflow-y: auto;
    padding: 12px 15px;
    background: var(--backgroundColour);
    outline: none;

    hanging-punctuation: none;
    text-rendering: auto;
}

/* New Thread Page */

body.newThreadPage {

    .watchPartyVideo {
        display: none;

        &.shown {
            display: block;
        }
    }

    #watchPartyVideoTitle {
        font-weight: 500;
        margin-left: 0.625em;
        color: var(--colour2Bright);
    }

    div.checkBoxWithExplanation {
        display: flex;
        align-items: center;
        gap: 1.25em;

        &.watchPartyVideo {
            display: none;

            &.shown {
                display: flex;
            }
        }

        span.description {
            font-family: var(--uiTextTypeface);
            font-size: calc(var(--baseSize) * 0.75);
        }
    }

    div.pollOptions {
        padding: 1.25em;
        border: 1px solid var(--lighterLineColour);
        border-radius: 8px;
        margin-top: 1.25em;
        margin-bottom: 1.25em
    }

    div.pollInstructions {
        margin: 0.625em;
        margin-bottom: 2.5em;

        h1 {
            font-size: calc(var(--baseSize) * 1.5);
        }

        p {
            font-family: var(--uiTextTypeface);
        }
    }

    div.pollLifecycleContainer {
        display: flex;
        align-items: center;
        gap: 1.25em;
        margin: 1.25em;
        margin-top: 2em;
        margin-bottom: 2em;

        div {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background-color: var(--colour5);
            color: var(--text-primary);
            border-radius: 8px;
            font-family: var(--uiTextTypeface);
            font-weight: 400;
            max-width: 10em;
            min-height: 10em;
            padding: 1.25em;
        }

        img {
            max-height: 3em;
        }
    }

    section.heading {
        p {
            font-family: var(--uiTextTypeface);
        }
    }

    section.content {
        grid-template-columns: auto;
    }

    span.boardName {
        color: var(--colour2);
    }

    select.dropDown {
        font-size: 12pt;
        font-family: var(--uiTextTypeface);
        width: max-content;
        padding: 0.3125em;
    }

    .newThreadForm {
        display: grid;
        align-items: center;
        grid-template-columns: 1fr 6fr;
        gap: 0.625em 1.25em;

        input[type="text"] {
            font-family: var(--uiTextTypeface);
            font-size: var(--baseSize);
            background-color: var(--colour4);
            padding: 0.625em;
            border: none;
            outline: none;
            box-shadow: none;
        }

        div.optionGrid {
            display: grid;
            margin-top: 1.25em;
            margin-left: 0.625em;
            gap: 1.25em;
            grid-template-columns: min-content auto;
            align-items: center;
            text-align: left;

            .option-colossus {
                top: 0;
            }
        }

        div.showResultsOnClose {
            margin-bottom: 1.25em;
        }

        input[type=checkbox] {
            margin-left: 0.3125em;
            background-color: var(--colour2Light);
            transform: scale(1.5);
            justify-self: flex-start;
        }

        div.checkBoxWithExplanation {
            font-family: var(--uiTextTypeface);
        }

        label {
            font-family: var(--uiTextTypeface);

            &.tableLabel {
                text-align: right;
            }
        }

        input[type=text] {
            background-color: var(--colour5);
            width: 100%;
            border-radius: 8px;
        }

        div.postingInfo {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            font-family: var(--uiTextTypeface);

            div.embeddingInfo {
                a {
                    color: var(--lightLineColour);
                    font-weight: 400;
                }

                a:hover {
                    text-decoration: underline;
                }
            }

            div.postingAs {
                margin-top: 0.625em;
                margin-left: 0.3125em;
                color: var(--lightLineColour);

                span.name {
                    font-weight: 500;
                }
            }
        }
    }

    & button.colossus {
        padding: 0.625em;
        padding-left: 2em;
        padding-right: 2em;
    }

    & section+section {
        margin-top: 1.25em;
    }

    & section+section.controlPanel {
        margin-top: 0.625em;
    }
}

div.errorMessage {
    font-family: var(--uiTextTypeface);
    font-weight: 500;
    padding-left: 0;
    margin-top: 0.3125em;
    margin-bottom: 0.3125em;

    display: flex;
    gap: 1.25em;
    align-items: center;

    & img {
        width: 1.5em;
    }
}


/* .button-6 {
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: .25rem;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--TableTypeface);
    font-size: 16px;
    font-weight: 600;
    justify-content: center;
    line-height: 1.25;
    margin: 0;
    min-height: 3rem;
    padding: calc(.875rem - 1px) calc(1.5rem - 1px);
    position: relative;
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    width: auto;
}

.button-6:hover,
.button-6:focus {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
    color: rgba(0, 0, 0, 0.65);
}

.button-6:hover {
    transform: translateY(-1px);
}

.button-6:active {
    background-color: #F0F0F1;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
    color: rgba(0, 0, 0, 0.65);
    transform: translateY(0);
} */

/* Animate Button Icons */
@keyframes bounce-icon {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

button img.bounceIn,
span.bounceIn {
    display: inline-block;
    animation: bounce-icon 400ms ease-out;
    transform-origin: center;
}

.animate__animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes shakeX {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}

.animate__shakeX {
    animation-name: shakeX;
}

@keyframes disappear {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes disappear2 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

.disappear {
    animation: disappear 300ms ease-out forwards;
}

.disappear2 {
    animation: disappear2 300ms ease-out forwards;
}

button.updatePollItemButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pollTextEditorDialog .updateIndicator {
    width: 1.1em;
    height: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    right: 0.625em;
    top: 50%;
    transform: translateY(-50%);
}

.pollTextEditorDialog .updateIndicator img.tick {
    width: 1.1em;
    max-width: 1.1em;
    height: 1.1em;
    max-height: 1.1em;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.pollTextEditorDialog .updateIndicator img.tick.visible {
    opacity: 1;
}

.pollTextEditorDialog .pollItemInputContainer {
    position: relative;
    flex: 1 1 auto;
}

.pollTextEditorDialog .pollItemInputContainer input.pollItemInputField {
    padding-right: 2.5em;
    width: 100%;
}

/* Bookmarks */

*+section.bookmarksList {
    margin-top: 1em;
}


/* Entire viewport transparent thing to take a click event and dismiss the popup */

div.bookmarksOverlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9;
}

section.bookmarksList {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.625em;
    top: 1.25em;
    max-width: 50vw;
    max-height: 70vh;
    overflow-y: auto;
    width: max-content;
    right: 0em;
    background-color: var(--surface-raised);
    padding: 2em;
    box-shadow: 4px 4px 8px 4px var(--shadow-soft);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    z-index: 10;
    font-family: var(--uiTextTypeface);
    margin-bottom: 1.25em;
    font-size: 12pt;
    font-variant-numeric: normal;

    & h3 {
        color: var(--text-primary);
        font-size: 12pt;
        font-family: var(--uiHeadingTypeface);
        margin-top: 0;
        margin-bottom: 0.625em;
    }

    & hr {
        width: 100%;
        margin: 0 auto;
        border: none;
        margin-top: 0.3125em;
        margin-bottom: 0.3125em;
        border-top: 1px solid var(--border-default);
        display: none;
    }

    & a {
        font-family: var(--uiTextTypeface);
        line-height: 1.25;
        font-variant-numeric: normal;
        text-align: left;
        color: var(--linkColour);
    }

    & span.numberOfNewPosts {
        color: var(--text-primary);
    }
}

/* Debug */

div.messageId {
    background-color: #9999EE;
    color: var(--text-inverse);
    padding: 0.3125em;
    padding-left: 0.625em;
    padding-right: 0.625em;
    font-family: var(--TableTypeface);
    font-weight: 500;
    font-variant: normal;
    font-size: 10pt;
    margin-bottom: 0.625em;
    display: flex;
    margin-top: 0.625em;
    align-self: flex-end;
    width: fit-content;
    border-radius: 3px;
}

/* Error Page */

main.errorPage {

    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;

    & img {
        width: 90vw;
        height: 90vh;
        object-fit: contain;
    }

}

a.lastReadMessageURL {
    margin-top: 0.625em;
    margin-bottom: 0.625em;
    font-family: var(--uiTextTypeface);
    font-size: 14pt;
}

/* Emojis */

div.emojis {
    display: flex;
    margin-top: 0.625em;
    margin-left: 1.5em;
    margin-bottom: 0.625em;
    gap: 0.3125em;

    span.numberOfUsers {
        position: relative;
        top: 1.75em;
        right: -2em;
        font-size: 8pt;
    }

    span.icon {
        cursor: default;
    }
}


& span.icon {
    background-size: 24px 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
    cursor: pointer;

    &[data-emoji-id="0"],
    &[data-emoji-id="ThumbsUp"] {
        background-image: url('/images/icons/emojis/thumbsUp.svg');
    }

    &[data-emoji-id="1"],
    &[data-emoji-id="Laugh"] {
        background-image: url('/images/icons/emojis/laugh2.svg');
    }

    &[data-emoji-id="2"],
    &[data-emoji-id="Love"] {
        background-image: url('/images/icons/emojis/love.svg');
    }

    &[data-emoji-id="3"],
    &[data-emoji-id="Sad"] {
        background-image: url('/images/icons/emojis/sad.svg');
    }

    &[data-emoji-id="4"],
    &[data-emoji-id="Cry"] {
        background-image: url('/images/icons/emojis/cry.svg');
    }

    &[data-emoji-id="5"],
    &[data-emoji-id="Confused"] {
        background-image: url('/images/icons/emojis/confused.svg');
    }

    &[data-emoji-id="6"],
    &[data-emoji-id="EyebrowRaised"] {
        background-image: url('/images/icons/emojis/eyebrowRaised.svg');
    }

    &[data-emoji-id="7"],
    &[data-emoji-id="Scared"] {
        background-image: url('/images/icons/emojis/scared.svg');
    }

    &[data-emoji-id="8"],
    &[data-emoji-id="Wow"] {
        background-image: url('/images/icons/emojis/wow.svg');
    }
}

& div.postMetadata {
    display: flex;
    justify-content: flex-start;

    & div.postCreationDate,
    div.edited {
        font-size: 16px;
        font-weight: 400;
        color: var(--linkVisited);
    }
}

div.postMenu,
div.threadAdminMenu,
div.siteAdminMenu,
div.mediaPartyResyncMenu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9375em 1.25em;
    font-family: var(--uiTextTypeface);
    padding-top: 1.25em;
    padding-bottom: 1.25em;
    padding-left: 1.25em;
    margin-left: 0.5rem;
    /* The max-height needs to be in place for the animation, as it's that it animates */
    max-height: 0;
    overflow: hidden;
    padding: 0em 1.25em;
    transition: max-height 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        padding 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        margin 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);

    &+div.postMenu {
        margin-top: 0;
    }

    &.expanded {
        background-color: var(--surface-very-subtle);
        /* The max-height needs to be in place for the animation, as it's that it animates */
        max-height: 20em;
        padding: 1em 1.25em;
        border-left: 1px solid var(--border-faint);
        margin-top: 1.25em;
    }

    &.emojiContainer {
        background-color: var(--surface-emoji-menu);

        & div.menuButton.selected {
            background: radial-gradient(circle, rgba(255, 200, 0, 0.5) 0%, transparent 80%);
        }
    }

    &.adminMenu {
        padding-top: 0;
    }

    /* Permalinks */

    & div.menuButton {
        display: block;
        transform-origin: center center;
        will-change: transform;

        & a.menuButton {
            display: inline-flex;
            align-items: center;

            &:hover {
                cursor: pointer;
            }

            & .replyIcon {
                background-image: url('/images/icons/reply.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .linkIcon {
                background-image: url('/images/icons/link.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .favouriteIcon {
                background-image: url('/images/icons/favourite.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            &.favourited .favouriteIcon {
                background-image: url('/images/icons/favourite-red.svg');
            }

            & .flagIcon {
                background-image: url('/images/icons/flag.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            &.flagged .flagIcon {
                background-image: url('/images/icons/flag-red.svg');
            }

            & .muteIcon {
                background-image: url('/images/icons/mute.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            &.muted .muteIcon {
                background-image: url('/images/icons/mute-red.svg');
            }

            & .deleteIcon {
                background-image: url('/images/icons/delete-outline.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            &.deleted .deleteIcon {
                background-image: url('/images/icons/delete-outline-red.svg');
            }

            & .lockIcon {
                background-image: url('/images/icons/locked.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .createBoardIcon {
                background-image: url('/images/icons/add.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .addUserIcon {
                background-image: url('/images/icons/addUser.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            &.locked .lockIcon {
                background-image: url('/images/icons/locked-red.svg');
            }

            & .notWorksafeIcon {
                background-image: url('/images/icons/notWorksafe.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            /* Pay close attention to the name here, notWorksafeD, so as not to collide with the name of the button, notWorksafe */
            &.notWorksafed .notWorksafeIcon {
                background-image: url('/images/icons/notWorksafe-red.svg');
            }

            & .chatAllowedIcon {
                background-image: url('/images/icons/transmitter-on.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            &.chatDisabled .chatAllowedIcon {
                background-image: url('/images/icons/transmitter-red.svg');
            }

            & .deindexIcon {
                background-image: url('/images/icons/deindex.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            &.deindexed .deindexIcon {
                background-image: url('/images/icons/deindex-red.svg');
            }

            & .editIcon {
                background-image: url('/images/icons/edit.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .editPollIcon {
                background-image: url('/images/icons/editPollItems.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .adminIcon {
                background-image: url('/images/icons/admin.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .pendingRegistrationsIcon {
                background-image: url('/images/icons/queue.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .lockIcon {
                background-image: url('/images/icons/locked.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .clockIcon {
                background-image: url('/images/icons/clock.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .diagnosticsIcon {
                background-image: url('/images/icons/diagnostics.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .siteMessageIcon {
                background-image: url('/images/icons/siteMessage.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .openCloseSite {
                background-image: url('/images/icons/openClose.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .accessControlsIcon {
                background-image: url('/images/icons/accesscontrols.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .userAdminIcon {
                background-image: url('/images/icons/admin.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            & .flaggedPostsReportIcon {
                background-image: url('/images/icons/flag.svg');
                background-size: 24px 24px;
                display: inline-block;
                width: 24px;
                height: 24px;
                margin-right: 0.625em;
            }

            &:hover {
                text-decoration: none;
            }

            & img {
                display: inline;
                max-width: 1.25em;
                margin-right: 0.625em;
            }
        }
    }
}

div.threadAdminMenu {
    border-left: 1px solid var(--border-muted);
    margin-left: 0;
}

div.mediaPartyResyncMenu {
    margin-left: 0;
    margin: 0;
    padding: 0;

    button.resyncButton {
        margin: 0;
        margin-bottom: 0.3125em;
    }

    &.expanded {
        border-left: none;
        background-color: unset;
        padding: 0;
    }

}


@keyframes bounceElement {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.15);
    }

    60% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes bounceElementLight {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.025);
    }

    60% {
        transform: scale(0.975);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes bounceElementHeavy {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.15);
    }

    50% {
        transform: scale(1.3);
    }

    75% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}


.bounceElement {
    animation: bounceElement 300ms ease-in-out;
}

.bounceElementThreeTimes {
    animation: bounceElement 300ms ease-in-out;
    animation-iteration-count: 3;
}

.bounceElementLight {
    animation: bounceElementLight 300ms ease-in-out;
}

.bounceElementHeavy {
    animation: bounceElementHeavy 300ms ease-out;
    animation-iteration-count: 2;
    animation-delay: 1s;
}

div.pollResults {
    width: 100%;
    height: 600px;
    border-radius: 10px;
    margin-top: 0.625em;
    padding: 0 2em;
}

div.pollResultsTablesContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 2em;

    div.pollResultsTable {
        display: flex;
        max-width: 70%;
        justify-content: center;

        table.pollResults {
            border-bottom: none;

            th {
                padding: 0.3125em;

                &:first-child {
                    max-width: var(--maximumParagraphWidth);
                    padding-left: clamp(1em, 2em, 8em);
                    padding-right: 1.25em;
                    text-align: right;
                }

                &:last-child {
                    padding-right: clamp(1em, 2em, 8em);
                    padding-left: 1.25em;
                    text-align: center;
                }
            }

            & td:first-child {
                padding-left: clamp(1em, 2em, 8em);
                padding-right: 1.25em;
                text-align: right;
                vertical-align: middle;
            }

            & td:nth-child(2) {
                vertical-align: middle;
            }

            & td:last-child {
                padding-right: clamp(1em, 2em, 8em);
                padding-left: 1.25em;
                text-align: center;
                vertical-align: middle;
            }
        }

        & table.ranking {

            & th:first-child,
            td:first-child {
                text-align: right;
            }

            & th:nth-child(2),
            td:nth-child(2) {
                text-align: center;
            }

            & th:last-child,
            td:last-child {
                text-align: left;
            }
        }

        & table.yourRanking {
            max-width: 20em;

            td.matchingRank {
                color: var(--colour2);
            }

            td:last-child {
                padding-left: unset;
                padding-right: unset;
                text-align: left;
            }

            & colgroup {
                & col:first-child {
                    width: 3em;
                }
            }

            & th {
                padding-left: 2em;
                padding-right: 2em;
                text-align: left;
            }

            td:first-child {
                padding-left: 1.25em;
                text-align: right;
            }
        }
    }
}

section.whoVotedForWhat {
    display: flex;
    flex-direction: column;
    align-items: center;

    & p+p {
        padding-top: 0.625em;
    }

    & table {
        & a {
            font-size: 10pt;
            display: inline-block;
            line-height: 1.2em;
            margin-top: 0.625em;
        }
    }

    p {
        text-align: left;

        strong {
            font-weight: 500;
        }
    }
}

section.pollContainer {
    margin-bottom: 1.5em;
    border-radius: var(--borderRadius);

    section.chart {
        background-color: var(--surface-subtle);
        margin-bottom: 2.5em;
    }

    section+section {
        margin-top: 1.25em;
    }

    span.matchingRank {
        color: var(--colour2);
    }

    div.overallResultsTab,
    div.condorcetResultsTab {
        display: flex;
        flex-direction: column;
        align-items: center;

        >p {
            margin-top: 1.25em;
            text-align: left;
            max-width: 66ch;
            line-height: 1.25;
            font-family: var(--PostTypeface);
            font-weight: lighter;
            font-variant-numeric: oldstyle-nums;
        }
    }

    section.condorcet {
        display: flex;
        gap: 3em;
        justify-content: center;
        align-items: baseline;

        table {
            max-width: 20em;
        }
    }

    section:empty {
        display: none;
    }

    & caption {
        font-weight: 500;
    }

    & p {
        font-family: var(--TableTypeface);
        font-variant: normal;
    }

    section.chart+section.tableHeading {
        margin-top: 1.25em;
    }

    & p.downloadLink,
    p.resetLink {
        display: flex;
        align-items: center;
        gap: 0.625em;

        & img {
            width: 1.25em;
            height: 1.25em;
        }
    }

    & table.pollResults {
        margin-top: 1.25em;

        & thead th {
            font-weight: 400;
        }
    }

    & div.whoVotedForWhatTab,
    div.insightsTab {
        display: flex;
        justify-content: center;
        margin-left: 5em;
        margin-right: 5em;

        & div.tableWrapper {
            & th {
                font-weight: 400;
            }
        }

        & table.pollResults {
            width: fit-content;
            max-width: 100%;

            & tr {
                & td {
                    vertical-align: top;
                }

                & th {
                    text-align: left;
                }

                & td:first-child,
                th:first-child {
                    padding-left: 1.25em;
                    text-align: right;
                }

                & td:last-child,
                th:last-child {
                    padding-right: 1.25em;
                }
            }
        }
    }

    & div.insightsTab {
        font-family: var(--TableTypeface);
        font-variant-numeric: normal;

        & section.insights {
            display: flex;
            flex-direction: column;
            align-items: center;

            & #scatterChart {
                width: 100%;
                height: 600px;
            }

            & h3 {
                margin-top: 1.5em;
                margin-bottom: 1.25em;
            }

            & p+p {
                padding-top: 0.625em;
            }
        }

        & table+div,
        table+table {
            margin-top: 3em;
        }

        & table+div.footnotes {
            margin-top: 1.25em;
        }

        & caption {
            font-weight: 500;
            margin-bottom: 0.625em;
            text-align: left;
        }

        & p {
            font-family: var(--TableTypeface);
            font-variant-numeric: normal;

            & em {
                font-style: normal;
                font-weight: 500;
            }
        }

        div.tableWrapper {
            width: 80%;

            & table.pollResults.concordance {
                line-height: 1.25;

                & colgroup {
                    & col:first-child {
                        width: 35%;
                    }
                }

                & td {
                    vertical-align: baseline;

                    & span.optionName {
                        color: var(--colour2);
                        white-space: nowrap;
                    }
                }
            }
        }

        & table.pollResults.basics {
            line-height: 1.25;
        }

    }

    & section.tabular {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: center;
        gap: 3em;

        & table {
            padding-right: 2em;
            border-bottom: 0;
        }

        & span.youVotedFor {
            white-space: nowrap;
        }

        & table.whatYouVotedFor {
            & tr {
                & td:first-child {
                    vertical-align: middle;
                }
            }
        }
    }
}

section.voting {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1.25em;

    & p {
        font-family: var(--TableTypeface);
        font-weight: 500;
    }

    & div.yourRankings {
        display: flex;
        justify-content: left;
        align-items: center;
        flex-wrap: wrap;
        gap: 1em 0.625em;
        width: fit-content;
        max-width: 66ch;

        & div.option {
            padding: 0.625em 1.25em;
            font-family: var(--TableTypeface);
            background-color: var(--colour2);
            color: var(--text-inverse);
            border-radius: 6px;
            font-weight: 500;
        }

        & div.separator {
            font-size: var(--baseSize);
        }
    }
}

section.options {
    margin-top: 1.25em;
    width: 100%;

    section.displayOptions {
        display: grid;
        align-items: center;
        font-family: var(--uiTextTypeface);
        font-size: var(--baseSize);
        grid-template-columns: 2fr 1fr;
        gap: 1.25em;
        border-radius: 6px;
        background-color: var(--surface-ui-panel);
        color: var(--text-primary);
        padding: 1.875em;
        margin-bottom: 1.25em;

        &.accessibilitySettings {
            grid-template-columns: 1fr;
        }

        &.postDisplayMode {
            grid-template-columns: 2fr 3fr;
        }

        div.postSeparatorPreview {
            margin-top: 1.25em;

            /* & .dividerGraphic {
                display: none;
            } */
        }

        @media (max-width: 1400px) {
            grid-template-columns: 1fr;
        }

        div.header {
            display: flex;
            flex-direction: column;
            gap: 0.3125em;
            grid-column: 1 / -1;
        }

        div.example {
            max-width: 20em;
        }

        div.option {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.625em;

            &.horizontal {
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
            }

            button {
                margin-top: 0;
                margin-bottom: 0;
                margin-right: 0;
            }

            &.password {
                display: grid;
                grid-template-columns: max-content minmax(auto, 12em);
                gap: 0.625em;
                align-items: center;

                input {
                    background-color: var(--surface-input);
                    border-radius: 8px;
                    width: 12em;
                }

                div {
                    display: flex;
                    gap: 0.625em;
                }

                div.passwordVisibility {
                    align-items: center;
                }

                button {
                    margin: 0;
                }

                button.passwordVisibilityButton {
                    padding: 0.35em;
                    border: 1px solid var(--border-overlay);
                    border-radius: 8px;
                    background-color: transparent;
                    border: 0;
                    cursor: pointer;
                }

                button.passwordVisibilityButton[aria-pressed="true"] {
                    background-color: var(--surface-selected);
                }

                button.passwordVisibilityButton img {
                    display: block;
                    width: 1.25em;
                    height: 1.25em;
                }
            }

            label {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                text-align: right;
                font-weight: 400;
                font-size: var(--baseSize);
                font-family: var(--uiTextTypeface);
                font-weight: 400;
            }

            input[type=text] {
                font-variant-numeric: oldstyle-nums;
                font-family: var(--uiTextTypeface);

                &.error {
                    background-color: var(--status-error-input-background);
                }

                background-color: var(--surface-input);
                border-radius: 6px;
            }
        }

        input[type=checkbox] {
            transform: scale(1.5);
            margin-left: 6px;
        }

        section.example {
            display: flex;
            flex-direction: column;
            gap: 0.625em;
            padding-left: 1.25em;
            padding-top: 0.625em;
            padding-bottom: 0.625em;
            border-left: 1px solid gray;
            font-family: var(--PostTypeface);

            div.exampleText {
                font-size: var(--secondarySize);
            }

            button {
                justify-self: flex-end;
                margin-right: 0;
            }

            @media (max-width: 1400px) {
                border-left: none;
            }

            & h4 {
                font-size: 12pt;
                font-family: var(--uiTextTypeface);
                font-weight: 400;
                margin-bottom: 0.625em;
                margin-left: 4px;
            }

            & div.example {
                border-radius: 8px;
                background-color: var(--surface-raised);
                padding: 0.625em;

                & p {
                    font-family: var(--TableTypeface);
                    text-align: left;
                }
            }

            & div.postDisplayMode.example p {
                font-family: var(--PostTypeface);
                font-size: 12pt;
            }
        }
    }

    section.postDisplayMode {
        div.option {
            display: grid;
            align-items: center;
            gap: 0.625em;
            grid-template-columns: 2fr 3fr;
        }
    }

}


/* Check box and radio button stylings */

label-colossus {
    display: block;
    line-height: 30px;
}

.option-colossus {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    top: 5px;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    transition: all 0.15s ease-out 0s;
    background: var(--surface-input);
    border: none;
    color: var(--text-inverse);
    cursor: pointer;
    display: inline-block;
    outline: none;
    position: relative;
    border-radius: 3px;
}


.option-colossus:checked::before {
    width: 20px;
    height: 20px;
    display: flex;
    content: '✓';
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    position: absolute;
    align-items: center;
    justify-content: center;
}

.option-colossus:checked::after {
    -webkit-animation: click-wave 0.65s;
    -moz-animation: click-wave 0.65s;
    animation: click-wave 0.65s;
    background: #40e0d0;
    content: '';
    display: block;
    position: relative;
    z-index: 100;
}

label.label-option {
    line-height: 30px;
    margin-right: 1.25em;
    font-size: var(--baseSize);
}

input[type=radio].option-colossus {
    border-radius: 50%;
    border: 1px solid var(--grey-500);
    transform: scale(1.5);
    top: unset;
}

input[type=radio].option-colossus:checked::before {
    color: rbga(0, 0, 0, 0.6);
    content: '●';
    position: absolute;
    top: -1.5px;
    left: -1px;
}

input[type=radio].option-colossus:checked::after {
    border-radius: 50%;
}

@keyframes click-wave {
    0% {
        height: 20px;
        width: 20px;
        opacity: 0.35;
        position: relative;
    }

    100% {
        height: 60px;
        width: 60px;
        margin-left: -20px;
        margin-top: -20px;
        opacity: 0;
    }
}

a.search {
    position: relative;
    top: 1.5px;
}

span.threadIcons {
    display: inline-flex;
    align-items: center;
    gap: 0.625em;

    & img {
        width: 1.25em;
    }
}

.subHeader {
    display: flex;
    align-items: center;

    img {
        display: inline;
        height: 28px;
        margin-right: 0.625em;
    }
}

body.applicationPage {
    p {
        font-family: var(--uiTextTypeface);
        font-variant-numeric: normal;

        strong {
            font-weight: 500;
        }
    }

    a {
        font-family: var(--uiTextTypeface);
    }

    table {
        font-family: var(--uiTextTypeface);
    }
}

body.monthViewPage {

    section.monthViewFilters {
        display: flex;
        align-items: center;
        gap: 0.625em;
        width: fit-content;

        input[type=search] {
            width: fit-content;
        }
    }

    & div.noThreadsMessage {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2.5em;
        font-size: 14pt;
        font-weight: 500;
        font-family: var(--HeadingTypefaceText);
    }

    & .subHeader {
        & img {
            display: inline;
            height: 60px;
            margin-right: 0.625em;
        }
    }

    & section.threadsByDay {
        & h3 {
            margin-top: 1.5em;
            margin-bottom: 1.25em;
        }

        & section.pageControl+h3 {
            margin-top: 1.25em;
            margin-bottom: 0.625em;
        }

        & section.pageControl {
            display: flex;
            background-color: var(--colour3);
            padding: 0.625em;
            justify-content: space-between;
            margin-top: 3em;

            & a {
                display: inline-flex;
                margin-right: 1.25em;
                font-weight: 400;
                color: var(--text-inverse);
                font-size: 14pt;
            }
        }

        & div.thread {
            display: grid;
            grid-template-columns: 1fr 2fr;
            align-items: center;
            gap: 1.5em;
            margin-bottom: 1.25em;

            & div.threadInfo {
                display: flex;
                flex-direction: column;
                gap: 0.3125em;
                justify-content: center;
                padding-right: 1.25em;
                border-right: 1px solid var(--grey-500);
                height: 100%;
                padding-top: 0.625em;
                padding-bottom: 0.625em;
            }

            & div.threadInfo * {
                justify-content: flex-end;
                text-align: right;
            }

            & a {
                line-height: 1.25;
                font-size: 14pt;
                font-family: var(--uiTextTypeface);
                font-weight: 500;
                color: var(--linkColour);
            }

            & span.author {
                font-size: 12pt;
                color: var(--grey-600);

                & span.username {
                    font-weight: 400;
                }
            }

            & span.firstMessage {
                font-family: var(--PostTypeface);
                font-variant-numeric: oldstyle-nums;
                font-size: 12pt;
                max-width: 66ch;
                color: var(--text-secondary);

                & .smallcaps {
                    font-variant: small-caps;
                }
            }
        }
    }
}


body.chronologicalPage,
body.typographyPage .chronologicalPage {

    & section+h3 {
        margin-top: 1.5em;
    }

    & h3+section {
        margin-top: 1.25em;
    }

    & section#threadsOverTime {
        height: 400px;
        width: 100%;
    }

    & .subHeader {
        & img {
            display: inline;
            height: 60px;
            margin-right: 0.625em;
        }
    }

    & section.years {
        display: grid;
        grid-template-columns: repeat(13, minmax(0, 1fr));
        gap: 0.3125em;
        font-weight: 800;
        width: 100%;
        margin-top: 1.5em;
        font-family: var(--uiTextTypeface);

        & .yearCell,
        .monthCell {
            color: var(--heatmap-text-light);
            -webkit-user-drag: none;

            & span:last-child {
                font-weight: 100;
                color: inherit;
            }

            display: flex;
            gap: 0.3125em;
            flex-direction: column;
            width: auto;
            justify-content: center;
            align-items: center;
            aspect-ratio: 1 / 1;
            background: var(--heatmap-spacer-background);
            user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }

        .monthCell {
            font-weight: 400;
            /* Style sends --intensity as a normalized value between 0 and 1. */
            background-color: hsl(from var(--heatmap-base-colour) h calc(20% + 56% * var(--intensity)) calc(95% - 50% * var(--intensity)));
            color: var(--heatmap-text-light);

            & span {
                color: inherit;
            }

            &.darkText {
                color: var(--heatmap-text-dark);
            }
        }

        & div.yearCell {
            background: var(--heatmap-year-background);
        }

        & .monthCell:hover {
            background-color: hsl(from var(--heatmap-base-colour) h calc(20% + 56% * var(--intensity)) calc(45% + 50% * var(--intensity)));
            color: var(--heatmap-text-light);
            transition: 0.3s;

            &.hoverDarkText {
                color: var(--heatmap-text-dark);
            }

            & span:last-child {
                color: inherit;
            }
        }
    }
}

@media (max-width: 1000px) {

    body.chronologicalPage,
    body.typographyPage .chronologicalPage {
        section.years {
            font-size: calc(var(--baseSize) * 0.75);
        }
    }
}

@media (max-width: 800px) {

    body.chronologicalPage,
    body.typographyPage .chronologicalPage {
        section.years {
            font-size: calc(var(--baseSize) * 0.5);
        }
    }
}

section.searchPage {
    font-family: var(--uiTextTypeface);
    font-size: 14pt;
    font-weight: 500;
    color: var(--text-primary);

    & section.errorMessage {
        display: none;
        gap: 0.625em;
        align-items: center;
        grid-template-columns: 4em minmax(auto, 20em) min-content;
        margin-top: 0.625em;

        & div.errorMessage {
            background-color: var(--surface-raised);
            color: var(--text-primary);
            padding: 1.25em;
            padding-left: 0;
            padding-right: 0;
        }
    }

    & select.boardList {
        font-size: 12pt;
        padding: 0.3125em;
        width: fit-content;
        margin-left: 0.3125em;
    }

    & section.search {
        display: grid;
        gap: 0.625em;
        align-items: center;
        grid-template-columns: 8em minmax(auto, 20em) min-content;

        & label {
            margin-right: 0.625em;
            text-align: right;
            font-size: 12pt;
            font-weight: 500;
        }

        & input[type=search] {
            border-radius: 8px;
        }

        & div.usernameSuggestions {
            grid-column: 2 / 4;
        }
    }

    & section.searchOptions {
        display: grid;
        grid-template-columns: 8em auto;
        gap: 0.625em;
        margin-top: 1.25em;

        & div.option {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            text-align: right;
            font-size: 12pt;
            font-weight: 400;
        }

        div.narrowSearch {
            display: flex;
            align-items: baseline;
            gap: 2em;
            font-size: 12pt;
            font-weight: 400;

            label {
                display: flex;
                align-items: center;
                gap: 0.625em;
            }

            input[type=checkbox] {
                border: 1px solid var(--text-primary);
            }
        }

        & div.usernameFilter input {
            border-radius: var(--borderRadius);
            max-width: 20em;
        }

        & div.usernameSuggestions {
            margin-top: 0.4em;
        }

    }

    & div.usernameSuggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em;
        max-width: 28em;

        & button.usernameSuggestion {
            display: inline-flex;
            align-items: center;
            gap: 0.35em;
            border: 1px solid var(--colour2);
            border-radius: var(--borderRadius);
            background: var(--surface-raised);
            color: var(--text-primary);
            padding: 0.3125em 0.45em;
            font-family: var(--uiTextTypeface);
            font-size: 10pt;
            font-weight: 500;
            cursor: pointer;

            & img {
                width: 1.25em;
                height: 1.25em;
            }
        }
    }
}

& section.results {
    margin-top: 2em;

    & div.messageSearchLoading {
        display: flex;
        justify-content: center;
        padding: 2em;

        & img {
            animation: messageSearchLogoSpin 1s linear infinite;
            height: 3em;
        }
    }

    table {
        width: 100%;

        &.searchResultsTable {
            border-bottom: none;

            td,
            th {
                padding: 1.25em;
            }

            th {
                padding-top: 0;
                padding-bottom: 0.625em;
                border-bottom: none;
            }

            td:not(:first-child):not(:last-child),
            th:not(:first-child):not(:last-child) {
                padding-left: 0;
                padding-right: 0;
            }

            tbody {
                tr:nth-child(odd) {
                    background-color: var(--surface-table-row);
                }
            }

            colgroup {
                col:last-child {
                    text-align: center;
                }
            }

            a.title {
                display: inline-block;
                max-width: 55ch;
                font-family: var(--uiTextTypeface);
                line-height: 1.25;
                font-weight: 500;
            }

            div.creationDate {
                margin-top: 0.3125em;
            }

            div.creationDate,
            div.lastUpdated {
                font-size: calc(var(--baseSize) * 0.85);
            }

            span.createdBy {
                font-weight: 500;
            }

            div.messageSearchResult,
            div.threadSearchResult {
                display: flex;
                flex-direction: column;
                gap: 0.15625em;

                .firstMessage {
                    font-family: var(--PostTypeface);
                    max-width: var(--maximumParagraphWidth);
                    font-size: calc(var(--baseSize) * 0.85);
                    margin-top: 0.3125em;
                    color: var(--text-tertiary);
                }

                div.boardName {
                    font-variant-caps: all-small-caps;
                    color: var(--text-secondary);
                    line-height: 1.25rem;
                }

                div.postedBy {
                    color: var(--text-secondary);
                    font-family: var(--TableTypeface);
                    font-size: 10pt;

                    strong {
                        font-weight: 500;
                    }

                    span.creationDate {
                        text-transform: lowercase;
                    }
                }
            }
        }

        &.threadSearchResults {

            th:last-child,
            td:last-child {
                text-align: center;
            }

            colgroup {
                col:last-child {
                    text-align: center;
                }
            }
        }

        th {
            text-align: left;
        }

        td {
            text-align: left;
            vertical-align: middle;
        }

        small {
            word-break: break-word;
            overflow-wrap: anywhere;
            font-size: 10pt;
            font-family: var(--PostTypeface);
            display: flex;
        }
    }

    & section.nextPreviousLinks {
        display: flex;
        align-items: baseline;
        gap: 1.25em;
    }

    & section.searchingFor {
        margin-bottom: 1.25em;
        font-weight: normal;

        & span.searchType {
            text-transform: lowercase;
        }
    }

    & h3 {
        margin-top: 2em;
    }
}

@keyframes messageSearchLogoSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

section.timeline {
    margin-top: 2em;
}

section.timelineControls {
    margin-top: 1rem;
    min-height: 2rem;

    label.timelineControl {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 300;
        cursor: pointer;
    }
}


section.threadActivity {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;

    & p {
        font-family: var(--TableTypeface);
    }
}

h3.threadActivityCaption {
    text-transform: uppercase;
    font-size: calc(var(--baseSize) * 1.1);
    margin-left: 1.5em;
    letter-spacing: 0.03em;
}

section.topPosters {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 3em;
    min-height: 700px;

    & span {
        margin-bottom: 1.25em;
    }
}

section.topPosters:empty {
    height: 0;
    margin-top: 0;
    /* optional: also remove the gap */
}

table.bookmarks {

    & td {
        vertical-align: middle;
    }

    & a.deleteButton {
        display: inline-flex;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('/images/icons/delete2.svg');
        width: 18px;
        height: 18px;
        justify-self: center;
        align-self: center;
    }
}

/* Data Tables */

.dt-container {
    font-family: var(--uiTextTypeface);
}

table#bookmarksTable {
    margin-top: 1.5em;

    & div.dt-column-header {
        text-align: left;
    }
}

div.dt-length {
    display: flex;
    gap: 0.625em;
    align-items: center;
}

div.dt-column-header:hover {
    cursor: pointer;
}

div.dt-search {
    background-color: var(--surface-control);
    color: var(--text-primary);
    padding: 0.625em;
    padding-top: 0.625em;
    padding-bottom: 0.625em;
    margin-bottom: 1.25em;
    border-radius: 8px;

    & label+input {
        margin-left: 1.25em;
    }

    & label {
        margin-left: 1.25em;
    }

    & input[type=search] {
        padding: 0.3125em;
        background-color: var(--surface-raised);
        border-radius: 8px;
    }
}

div.dt-layout-row {
    margin-top: 0.625em;
}


@keyframes menuBounce {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    60% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.menuBounce {
    animation: menuBounce 250ms ease-out;
}

@keyframes menuDismiss {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    60% {
        transform: scale(0.4);
        opacity: 1;
    }

    100% {
        transform: scale(0);
    }
}

.menuDismiss {
    animation: menuDismiss 100ms ease-out forwards;
}


.radio-colossus {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    border-radius: 0.6125em;
    color: var(--text-primary);
    background-color: var(--surface-muted);
    box-sizing: border-box;
    box-shadow: 0 0 0px 1px var(--shadow-subtle);
    padding: 0.3125em;
    font-size: 14px;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.radio-colossus label {
    flex: 1 1 auto;
    text-align: center;
    width: 6em;
}

.radio-colossus label input {
    display: none;
}

.radio-colossus label .name {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: none;
    padding: .5rem 0;
    color: var(--text-muted);
    min-height: 4em;

    transition: all .25s ease-in-out;
}

.radio-colossus span {
    height: 100%;
}

.radio-colossus label input:checked+.name {
    background-color: var(--surface-radio);
    color: var(--text-primary);
    font-weight: 600;
}


section.displayChartOptions,
section.displayModeOptions {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    border-radius: 6px;
    background-color: var(--surface-ui-panel);
    color: var(--text-primary);
    padding: 1.875em;
    margin-bottom: 1.25em;

    div.header+* {
        margin-top: 1.25em;
    }

    h4 {
        margin-bottom: 0.625em;
    }

    div.explanation {
        margin-top: 1.25em;
        margin-bottom: 2.5em;

        strong {
            font-weight: 500;
        }
    }

    p {
        font-variant-numeric: normal;
        text-align: left;
    }

    section.pollChartType,
    section.displayModeType {

        display: flex;
        align-items: center;
        gap: 2em 1.5em;

        label {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.25em;
            text-align: center;
            line-height: 1.25;

            span {
                font-family: var(--uiTextTypeface);
                font-weight: 500;
                display: inline-block;
            }
        }

        .radio-hidden {
            display: none;
        }

        .radio-img {
            display: inline-block;
            width: 80px;
            height: 80px;
            background-size: cover;
            cursor: pointer;
            padding: 0.625em 1.25em;
            border-radius: 0.625em;
        }

        .radio-hidden:checked+.radio-img {
            background-color: var(--surface-selected);
        }

        .radio-img:hover {
            background-color: var(--surface-selected);
            transition: 0.25s
        }

        input[type="radio"]:checked+label .radio-img {
            outline: 3px solid var(--outline-strong);
            outline-style: dotted;
        }
    }
}

.toastify {
    display: flex;
    align-items: center;
    position: fixed;
    left: 2em;
    max-width: 40vw;
    padding: 1.5em 1.25em;
    background: var(--surface-ui-panel);
    color: var(--text-primary);
    font-family: var(--uiTextTypeface);
    line-height: 1.5em;
    border-radius: 6px;
    font-size: 1rem;
    box-shadow: 2px 2px 16px var(--shadow-dialog);
    outline: 4px solid var(--outline-inverse);
    opacity: 0.95;
    z-index: 9999;

    & div.notification {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 10em;
        gap: 0.625em;

        &.horizontal {
            display: block;
        }

        & div.username {
            font-weight: 500;
        }

        & span.icon {
            background-size: 72px 72px;
            width: 72px;
            height: 72px;
        }

        & a {
            hanging-punctuation: initial;
            word-break: break-word;
        }

    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.toastify.toastify-fadeout {
    animation: fadeOut 0.5s ease forwards;
}

body.favouritesPage {

    & table {
        & img {
            position: relative;
            top: 2px;
        }
    }

}


body.bookmarksPage {

    & div+h2 {
        margin-top: 1.5em;
    }

    & h2 {
        margin-bottom: 0.625em;
    }

    & span.instructions {
        display: inline-flex;
        font-size: 14pt;
        margin-bottom: 1.25em;
    }

    & table {
        word-break: break-word;
        font-size: 13pt;

        & th:first-child,
        td:first-child {
            text-align: center;
            width: 3%;

            & img {
                position: relative;
                top: 2px;
            }
        }

        & th:nth-child(2),
        td:nth-child(2) {
            text-align: left;
            width: 50%;
        }

        & th:nth-child(3),
        td:nth-child(3) {
            text-align: left;
            width: 20%;
        }

        & th:nth-child(4),
        td:nth-child(4) {
            text-align: left;
            width: 15%;
        }

        & th:nth-child(5),
        td:nth-child(4) {
            text-align: left;
            width: 10%;
        }
    }

    & section.updateAllBookmarksSection {
        display: flex;
        gap: 1.25em;
        align-items: center;
        margin-bottom: 1.5em;
    }
}

/* Tabs */

.tab-wrap {
    font-family: var(--uiTextTypeface);
    transition: 0.3s box-shadow ease;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    list-style: none;
    background-color: var(--tabDialogActiveBackgroundColour);
    margin-top: 2.5em;

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--uiHeadingTypeface);
    }
}

.tab {
    display: none;
}

.tab:checked:nth-of-type(1)~.tab__content:nth-of-type(1) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(2)~.tab__content:nth-of-type(2) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(3)~.tab__content:nth-of-type(3) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(4)~.tab__content:nth-of-type(4) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(5)~.tab__content:nth-of-type(5) {
    opacity: 1;
    transition: 0.5s opacity ease-in, 0.8s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:first-of-type:not(:last-of-type)+label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.tab:not(:first-of-type):not(:last-of-type)+label {
    border-radius: 0;
}

.tab:last-of-type:not(:first-of-type)+label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.tab:checked+label {
    background-color: var(--tabDialogActiveBackgroundColour);
    cursor: default;
    border-bottom: 0;
    font-weight: 500;
}

.tab+label {
    /* box-shadow: 0 -1px 0 #eee inset; */
    cursor: pointer;
    display: block;
    text-decoration: none;
    flex-grow: 3;
    text-align: center;
    background-color: var(--tabDialogInactiveBackgroundColour);
    color: var(--text-primary);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    transition: 0.3s background-color ease, 0.3s box-shadow ease;
    height: 50px;
    box-sizing: border-box;
    padding: 15px;
}

.tab+label:hover {
    background-color: var(--tabDialogHoverBackgroundColour);
}

.tab+label:focus-visible {
    outline: 3px solid var(--outline-strong);
    outline-offset: -3px;
}

.tab__content {
    padding: 2em;
    background-color: transparent;
    position: absolute;
    width: 100%;
    z-index: -1;
    opacity: 0;
    left: 0;
    transform: translateY(-3px);
    border-top: 0;
}

body {
    div.tooltip {
        padding: 1.25em;
        background-color: var(--tooltip-background);
        border: var(--tooltip-border);
        color: var(--text-primary);
        font-family: var(--uiTextTypeface);
        max-width: 25vw;
        min-width: 15ch;
        border-radius: 1.25em;
        box-shadow: 1px 1px 3px 0px var(--shadow-soft);

        h1 {
            font-family: var(--uiTextTypeface);
            text-transform: none;
            letter-spacing: 0em;
            font-size: 12pt;
            font-weight: 500;
            margin-bottom: 0.625em;
            width: 100%;
            border-bottom: 1px solid var(--border-strong);
            padding-bottom: 0.3125em;
            margin-bottom: 0.625em;
        }

        em {
            font-style: italic;
        }

        p {
            letter-spacing: 0em;
            line-height: 1.5em;
            font-size: 12pt;
            font-weight: normal;
            font-family: var(--uiTextTypeface);
            text-align: left;
            margin: 0;
            padding: 0;
            box-shadow: unset;
        }

        p+p {
            margin-top: 0.625em;
        }
    }
}

section.threadMetadata {

    display: flex;
    justify-self: flex-start;
    width: 100%;

    table {
        border: 0;
        width: 50%;
        font-family: var(--uiTextTypeface);

        tbody {
            border: 0;

            tr td:first-child {
                text-align: right;
            }
        }
    }
}

/* Media Queries / Responsiveness */

@media (max-width: 1500px) {
    header {
        padding-left: 15%;
        padding-right: 15%;
    }

    main {
        padding-left: 15%;
        padding-right: 15%;
    }

    footer {
        margin-left: 15%;
        margin-right: 15%;
    }
}

@media (max-width: 1400px) {
    header {
        padding-left: 10%;
        padding-right: 10%;
    }

    main {
        padding-left: 10%;
        padding-right: 10%;
    }

    footer {
        margin-left: 10%;
        margin-right: 10%;
    }
}

@media (max-width: 1100px) {

    header {
        padding-left: 5%;
        padding-right: 5%;
    }

    main {
        padding-left: 5%;
        padding-right: 5%;
    }

    footer {
        margin-left: 5%;
        margin-right: 5%;
    }

    div.breadcrumbs {
        & span {
            display: none;
        }
    }
}

@media (max-width: 900px) {

    /* Widen the editor dialog to take all the space available */

    & section.posting>div {
        display: none;
    }

    & section.posting {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    div.menuItem {

        & a,
        & button {
            & span {
                display: none;
            }
        }
    }

    table.boards {
        table-layout: auto;
        width: 100%;

        & colgroup {
            & col:nth-child(3) {
                display: none;
            }

            & col:nth-child(4) {
                display: none;
            }
        }

        & thead th:nth-child(3),
        tbody td:nth-child(3) {
            display: none;
        }

        & thead th:nth-child(4),
        tbody td:nth-child(4) {
            display: none;
        }
    }
}

div.mutedUsers,
div.mutedThreads {

    div.mutedUser,
    div.mutedThread {
        display: grid;
        grid-template-columns: 22em max-content;
        align-items: center;
        gap: 1.25em;

        span.username,
        span.boardAndThread {
            font-size: 14pt;
        }
    }
}

img.headingIcon {
    width: 96px;
    height: 96px;
}

body.infoPage {

    section#requestsPerMinute,
    section#threadsOverTime {
        height: 400px;
        width: 100%;
    }

    section#requestsPerMinute {
        height: 150px;
        width: 100%;
    }

    section#threadsOverTime {
        height: 200px;
    }

    section.serverUptime {
        em {
            font-style: normal;
            color: var(--surface-icon-inverse);
        }
    }

    section.explore {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
        align-items: stretch;
        justify-content: flex-start;
        gap: 1.25em;

        section+section {
            margin-top: 0;
        }

        section.panel,
        section.genericCard {
            background-color: var(--surface-icon-panel);
            color: var(--text-primary);
            padding: 1.25em;
            border-radius: var(--borderRadius);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.25em;
            font-size: var(--baseSize);
            font-family: var(--uiTextTypeface);

            a {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 1.25em;
                font-size: var(--baseSize);
                font-family: var(--uiTextTypeface);
            }

            img.headingIcon {
                display: flex;
                min-height: 72px;
                height: 72px;
            }

            span {
                text-align: center;
            }

            &:hover {
                background-color: var(--surface-icon-panel-hover);
                transition: 300ms;
            }

            &.highlight {
                background-color: var(--colour4);
            }

        }

        section.panel.requestsPerMinute {
            grid-column: span 2;
            gap: 0;
            font-family: var(--uiTextTypeface);
        }

        section.panel.threadsOverTime {
            grid-column: span 2;
            gap: 0;
        }

        @media (max-width: 1100px) {
            section.panel {
                grid-column: span 2;
            }
        }
    }
}

.pollResultsTable+.pollSection {
    margin-top: 0;
}

div.pollSection {
    display: flex;
    flex-direction: column;
    gap: 0.625em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding: 1.25em;
    padding-bottom: 0.625em;
    background-color: var(--surface-section);
    width: 66.4%;
    margin: 0 auto;
    border-radius: 10px;

    h1+*,
    h2+*,
    h3+*,
    h4+* {
        margin-top: 0;
    }

    & div.pollOptions {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        background-color: var(--colour2Light);
        height: fit-content;
        padding: 1.5em;
        gap: 1em 1.5em;
        font-size: var(--baseSize);
        font-family: var(--TableTypeface);
        border-radius: 10px;

        & span.youVotedFor {
            font-weight: 500;
            color: var(--colour2);
        }

        & label {
            text-align: left;
        }
    }

    & div#buttonContainer {
        display: flex;
        justify-content: flex-end;

        & button.colossus {
            width: fit-content;
            background-color: var(--surface-raised);
        }
    }
}

@media (max-width: 1200px) {
    div.pollSection {
        width: 100%;
    }
}

body.settingsPage {

    div.selectContainer {
        display: flex;
        align-items: center;
        gap: 0.625em;
    }

    #generatePasswordButton {
        visibility: hidden;
    }

    div.nicknameButtons {
        display: flex;
        gap: 0.625em;
    }

    font-variant-numeric: normal;

    p,
    li {
        font-variant-numeric: normal;
        font-size: var(--baseSize);
        text-align: left;
    }

    label.chicagoCapitalisation+p {
        margin-top: 0.625em;
    }

    input[type=checkbox] {
        margin-right: 1.25em;
    }

    & section.boardDisplay {
        font-family: var(--TableTypeface);

        & section.choice {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 1.25em;

            & label {
                display: flex;
                gap: 1.25em;
                align-items: center;
            }
        }

        & section.boards {
            /* Hidden by default, but shown if your preferences are set to customise */
            display: none;
        }
    }

    section.keyboardShortcuts {
        label+p {
            margin-top: 1.25em;
        }

        ul {
            font-family: var(--TableTypeface);
            font-size: 12pt;
        }
    }
}

@keyframes bounceInDialog {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    70% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

user-selector,
board-selector {
    display: block;

    .userSelector {
        position: relative;
        width: 100%;
    }

    .userSelector input[type="search"] {
        font-family: var(--uiTextTypeface);
        font-size: var(--baseSize);
        background-color: var(--surface-input-muted);
        padding: 0.625em;
        border: none;
        box-shadow: none;
        width: 100%;
        box-sizing: border-box;
    }
}

.userSelectorOptions {
    display: none;
    position: absolute;
    font-family: var(--TableTypeface);
    inset: calc(100% + 0.2em) 0 auto 0;
    z-index: 1000;
    max-height: min(14rem, 35vh);
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--surface-raised);
    border: 1px solid var(--lighterLineColour);
    box-shadow: 0 0.4em 1em var(--shadow-soft);

    &.open {
        display: block;
    }

    li {
        font-family: var(--uiTextTypeface);
        margin: 0;
        padding: 0.45em 0.6em;
        cursor: pointer;
        text-align: left;

        &.highlighted {
            background-color: var(--colour3);
        }

        &.empty {
            color: var(--lightLineColour);
            cursor: default;
        }
    }
}

dialog#resetPasswordDialog {
    width: min(90vw, 34rem);
    max-width: 90vw;
    overflow: visible;

    form {
        width: 100%;
        overflow: visible;
    }

    section.content {
        display: flex;
        align-items: center;
        gap: 1.25em;
        width: 100%;
        overflow: visible;
    }

    input#newPassword {
        width: 100%;
        box-sizing: border-box;
    }

    menu {
        width: 100%;
    }
}

user-selector,
board-selector {
    flex: 1 1 16rem;
    min-width: 0;
}

dialog {
    display: block;
    border: none;
    border-radius: var(--borderRadius);
    padding: 1.875em;
    background-color: var(--surface-page);
    color: var(--text-primary);
    box-shadow: 0 4px 12px var(--shadow-strong);
    box-sizing: border-box;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    animation: bounceInDialog 0.4s ease-in;
    font-size: var(--baseSize);
    font-family: var(--uiTextTypeface);
    min-width: 20%;
    margin: auto;

    section+section {
        margin-top: 0;
    }

    input[type=text],
    input[type=search] {
        border-radius: 8px;
    }

    input:focus {
        outline: 1px solid var(--lighterLineColour);
    }

    &.htmlContent {
        max-width: 80%;
        width: 80%;
        padding: 2em;
        overflow-y: hidden;

        form,
        section.form {
            overflow-y: visible;

            section.heading {
                h1 {
                    font-size: 22pt;
                    letter-spacing: -0.01em;
                }
            }

            section.content {
                overflow-y: auto;
            }
        }
    }

    p {
        text-align: left;
    }

    &.viewEditHistory {
        width: fit-content;
        padding-right: 2.5em;

        section.editHistory {
            max-height: 70vh;
            height: max-content;
            overflow-y: auto;

            div.editEntry+div.editEntry {
                margin-top: 1.25em;
            }

            div.editEntry {
                display: flex;
                gap: 1.25em;
                align-items: center;
                padding: 1.25em;
                background-color: var(--surface-subtle);
                width: 66ch;

                pre {
                    max-width: 64ch;
                    overflow-x: auto;
                }

                div.index {
                    font-weight: 500;
                }

                div.dateTime {
                    font-size: 12pt;
                    color: var(--colour2);
                }

                div.message {
                    margin-bottom: 0.625em;
                    border-radius: 6px;
                }
            }
        }

    }

    &.editorModalDialog {

        section#dialogPostEditor {
            max-height: 60vh;
            overflow-y: auto;
            width: 66ch;

            p {
                font-family: var(--PostTypeface);
            }
        }

        section.adminLogReason {
            margin-top: 1.25em;
            font-family: var(--TableTypeface);
            font-size: var(--baseSize);

            p {
                margin-bottom: 1.25em;
            }

            label {
                display: flex;
                align-items: center;

                input {
                    margin-left: 0.625em;
                    flex: 1;
                    border-radius: 6px;
                    background-color: var(--surface-input-muted);
                }
            }
        }

        span.timeRemaining {
            font-family: var(--uiTextTypeface);
            font-size: 12pt;
        }
    }

    &#textInputOkCancelDialog {
        width: min(90vw, 45rem);
        max-width: 90vw;

        form {
            width: 100%;
            align-items: stretch;
        }

        section.heading {
            section.title {
                display: flex;
                gap: 0.625em;
                justify-content: flex-start;
                align-items: center;

                p.explanation {
                    margin-left: 1.25em;
                }
            }

            textarea {
                height: 10em;
            }

            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1.25em;
            width: 100%;
        }

        section.heading img {
            grid-column: 1;
            grid-row: 1 / span 2;
        }

        section.heading p,
        section.heading h2 {
            grid-column: 2;
            margin: 0;
            width: 100%;
        }

        menu {
            width: 100%;
        }
    }

    &#insertLinkDialog {
        width: min(90vw, 42rem);
        max-width: 90vw;

        form {
            width: 100%;
            align-items: stretch;
        }

        section.heading {
            align-items: flex-start;

            section.content {
                gap: 0.35em;
                margin-bottom: 0;
            }
        }

        section.content {
            flex-direction: column;
            gap: 0.85em;
        }

        section.textInputSection {
            display: grid;
            grid-template-columns: 5em minmax(0, 1fr);
            align-items: center;
            gap: 0.625em;

            label {
                white-space: nowrap;
            }

            input {
                width: 100%;
                min-width: 0;
                padding: 0.45em 0.6em;
                border: 1px solid var(--lighterLineColour);
                border-radius: 6px;
                background-color: var(--surface-input);
                font-family: var(--TableTypeface);
                font-size: var(--baseSize);
                box-sizing: border-box;
            }
        }

        menu {
            width: 100%;
        }
    }

    &#insertMovieDialog {
        width: min(90vw, 42rem);
        max-width: 90vw;

        section.form {
            width: 100%;
            align-items: stretch;
        }

        section.heading {
            align-items: flex-start;

            section.content {
                gap: 0.35em;
                margin-bottom: 0;
            }
        }

        section.content {
            flex-direction: column;
            gap: 0.85em;
        }

        section.textInputSection {
            display: grid;
            grid-template-columns: 5em minmax(0, 1fr);
            align-items: center;
            gap: 0.625em;

            label {
                white-space: nowrap;
            }

            input {
                width: 100%;
                min-width: 0;
                padding: 0.45em 0.6em;
                border: 1px solid var(--lighterLineColour);
                border-radius: 6px;
                background-color: var(--surface-input);
                font-family: var(--TableTypeface);
                font-size: var(--baseSize);
                box-sizing: border-box;
            }
        }

        p.movieSearchStatus {
            min-height: 1.25em;
            color: var(--colour2);
        }

        div.movieSearchResults {
            display: flex;
            flex-direction: column;
            gap: 0.625em;
            height: 22rem;
            overflow-y: auto;
            border: 1px solid var(--lighterLineColour);
            padding: 0.625em;
            box-sizing: border-box;
        }

        button.movieSearchResult {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.2em;
            width: 100%;
            padding: 0.625em 0.9em;
            border: 1px solid var(--lighterLineColour);
            border-radius: 8px;
            background: var(--surface-subtle);
            text-align: left;
            cursor: pointer;

            &:hover,
            &:focus-visible {
                border-color: var(--colour2);
                background: var(--surface-raised);
                outline: none;
            }

            span.movieSearchResultTitle {
                font-family: var(--uiTextTypeface);
                font-size: calc(var(--baseSize) * 1.05);
                font-weight: 500;
            }

            span.movieSearchResultMeta {
                font-family: var(--TableTypeface);
                font-size: calc(var(--baseSize) * 0.9);
                color: var(--colour2);
            }
        }

        menu {
            width: 100%;
        }
    }

    textarea.dialogInputText {
        width: 100%;
        max-width: 100%;
        height: 6em;
        padding: 0.625em;
        resize: none;
        font-family: var(--TableTypeface);
        font-size: var(--baseSize);
        border: none;
        background-color: var(--surface-muted);
        border-radius: 6px;
        box-sizing: border-box;
        grid-column: 2;
    }

    input.threadTitleInput {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        grid-column: 2;
    }

    button.colossus {
        margin: 0;
    }

    form:not(.postBodyDialog),
    section.form {
        display: flex;
        flex-direction: column;
        gap: 1.25em;
        max-height: calc(100vh - 5rem);
        box-sizing: border-box;

        p {
            margin: 0;
        }

        /* Weirdly have to repeat this global style here, as it's overridden by the above */
        p+p {
            margin-top: 0.625em;
        }

        select {
            font-size: 12pt;
            padding: 0.3125em;
            width: 12em;
            margin-left: 0.625em;
        }

        span.boardName {
            font-weight: 500;
            color: var(--colour2);
        }

        section.heading {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 1.25em;

            section.content {
                display: flex;
                flex-direction: column;
                gap: 1.25em;
                margin-bottom: 2em;
            }

            img {
                width: 60px;
                height: 60px;
            }

            h1 {
                font-size: 18pt;
            }

            p {
                font-family: var(--uiTextTypeface);
                font-size: var(--baseSize);
            }

            div.message p {
                font-family: var(--PostTypeface);
            }
        }

        section.heading+section.content {
            margin-top: 0;
        }

        section.content {
            display: flex;
        }

        section.textInputSection {
            display: flex;
            align-items: baseline;
            gap: 1.25em;

            label {
                white-space: nowrap;
                text-align: left;
                font-weight: 400;
                font-size: var(--baseSize);
                font-family: var(--uiTextTypeface);
                font-weight: 400;
            }

            input[type=url] {
                font-variant-numeric: oldstyle-nums;
                font-family: var(--uiTextTypeface);

                &.error {
                    background-color: var(--status-error-input-background);
                }

                background-color: var(--surface-input-muted);
                border-radius: var(--borderRadius);
                width: 100%;
            }
        }

        button.colossus {
            display: inline-flex;
            margin-right: 0;
            width: 10em;
        }

        button.colossus+button.colossus {
            margin-left: 0.625em;
            margin-right: 0.625em;
        }

        menu {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-start;

            &.center {
                flex-direction: row;
                justify-content: center;
            }
        }
    }

    &#createBoardDialog {
        section.createBoardFields {
            display: grid;
            grid-template-columns: 1fr 4fr;
            align-items: center;
            gap: 0.625em;

            input {
                border-radius: 8px;

                &[type=checkbox] {
                    width: fit-content;
                }
            }

            select {
                margin: 0;
            }

            label {
                text-align: right;
            }
        }
    }

    section.addPrivateBoardMemberFields,
    section.adminEmailUserFields,
    section.createBoardAdminFields,
    section.createSiteAdminFields,
    section.editTrafficControlSettingFields {
        display: grid;
        grid-template-columns: 2fr 5fr;
        align-items: center;
        gap: 0.625em;

        p {
            max-width: 20em;
        }

        input[type=number],
        input[type=search],
        input[type=text],
        textarea {
            max-width: 20em;
            border-radius: 8px;

            &:focus {
                outline: 1px solid var(--lighterLineColour);
            }
        }

        textarea {
            min-height: 12em;
        }

        label {
            text-align: right;
        }

        select {
            width: fit-content;
            max-width: 20em;
            margin: 0;
        }
    }

    &#adminEmailUserDialog {
        width: min(50em, 90%);

        input,
        textarea {
            max-width: none;
        }

        textarea {
            font-family: var(--uiTextTypeface);
            padding: 0.625em;
            font-size: var(--baseSize);
        }
    }
}

@media (max-width: 1000px) {
    dialog.htmlContent {
        section.embeddingInfo {
            grid-template-columns: 1fr;
        }
    }
}

/* Ranking polls */

div.pollSection.ranking {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    background-color: var(--colour2Light);
    gap: 1.25em;
    padding: 1.5em 2em;

    & h1 {
        font-size: 18pt;
    }

    & h2 {
        font-size: 14pt;
        text-align: center;
    }

    & div.rankingListWrapper {
        display: flex;
        font-family: var(--uiTextTypeface);
        flex-direction: column;
        background-color: var(--colour3);
        padding: 1.25em;
        border-radius: 8px;
    }

    & div.unrankedList,
    div.rankedList {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-weight: 500;
        padding-bottom: 2em;
        background-color: var(--colour3);
        border-radius: 8px;
    }

    & div.rankingPollItem {
        user-select: none;
        -webkit-user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: var(--colour2);
        padding: 0.625em 1.25em;
        color: var(--text-inverse);
        border-radius: 8px;
    }

    & div.instructions {
        margin-bottom: 0.625em;

        & p {
            font-family: var(--TableTypeface);
            font-weight: 400;
            text-align: left;
            text-wrap: pretty;
            font-size: 13pt;
        }
    }

    & :last-child,
    :first-child {
        grid-column: 1 / span 2;
    }
}

.sortable-chosen {
    filter: drop-shadow(0 0 30px 10px rgba(0, 0, 0, 0.9));
    opacity: 0.8;
}

.sortable-ghost {
    opacity: 0.5;
}


.sortable-drag {
    filter: drop-shadow(0 0 30px 10px rgba(0, 0, 0, 0.9));
}

body.newThreadPage,
body.userPage {

    & section.draftsForBoardContainer+section.draftsForBoardContainer {
        margin-top: 1.5em;
    }

    & section.draftsContainer {
        margin-top: 3em;

        p {
            font-family: var(--TableTypeface);
        }

        & h2 {
            border-top: 1px dotted var(--lightLineColour);
            padding-top: 1.5em;
        }

        & h2+section {
            margin-top: 1.5em;
        }

        & button {
            display: inline-flex;
            margin-bottom: 0.625em;
        }

        & section.drafts {

            & table {
                width: auto;
            }

            & table,
            table * {
                border: none;
                text-align: left;
                padding-top: 0;
                padding-bottom: 0;
            }

            & table th {
                border-bottom: 1px solid var(--border-strong);
                padding-bottom: 0.3125em;
            }

            & table tbody tr:first-child td {
                padding-top: 0.625em;
            }

            & table button {
                margin: 0;
                margin-right: 0.3125em;
                margin-bottom: 0.3125em;
                padding-bottom: 0.625em;
                padding-top: 0.625em;
            }

            & table tr td:first-child {
                text-align: right;
            }

            & table tr th:first-child {
                text-align: center;
            }

            & table tr td:last-child,
            tr th:last-child {
                text-align: center;
            }
        }
    }
}

body.userPage {

    & section.draftsContainer {
        margin-top: 1.5em;
    }

    & section.userInformation {
        display: grid;
        grid-template-columns: fit-content(50ch) auto;
        gap: 0.625em 3em;

        & p {
            margin: 0;
        }
    }

    & section+h2 {
        margin-top: 1.5em;
    }
}

body.adminLogPage {

    table {
        width: 100%;
        table-layout: fixed;
        word-break: break-word;
        overflow-wrap: anywhere;
        font-size: 12pt;

        & em {
            font-style: normal;
            font-weight: 500;
        }

        & th {
            text-align: left;
        }

        & tr th:first-child {
            width: 5em;
        }

        & tr th:nth-child(2) {
            width: 8em;
        }

        & tr td:nth-child(3),
        tr td:nth-child(4) {

            & p,
            blockquote,
            pre,
            li {
                font-size: 12pt;
            }
        }
    }
}

button.dt-paging-button {
    border: none;
    padding: 0.625em;
    margin: 2px;
    margin-top: 0.625em;
    cursor: pointer;
    border-radius: 2px;
    font-size: 12pt;
    background-color: transparent;
}

body.iplPage {
    & h2.subHeader {
        margin-bottom: 1.25em;
    }
}

section.validatingForm {
    &>p {
        max-width: 66ch;
        text-align: left;
    }

    & div.details {
        margin-top: 1.5em;
        font-family: var(--TableTypeface);
        font-size: var(--baseSize);
        color: var(--text-primary);
        display: grid;
        grid-template-columns: max-content 20em minmax(0, 1fr);
        align-items: center;
        gap: 0.625em;
        max-width: 100%;

        &+div.details,
        +p {
            margin-top: 1.5em;
        }

        &.fixedLabels {
            grid-template-columns: 10em 20em minmax(0, 1fr);
        }

        & div.validationError {
            margin-left: 0.625em;

            & span {
                font-weight: 500;
                color: var(--colour1);
            }
        }

        & label {
            text-align: right;
        }

        @media (max-width: 800px) {
            grid-template-columns: 66.3%;
            justify-content: center;

            & label {
                text-align: left;
            }

            & div.validationError:not(:empty) {
                margin-bottom: 0.625em;
            }
        }

        & input {
            border-radius: 6px;
        }

        & input.invalidCharacters {
            background: #fdd;
        }

        & input:first-child {
            margin-bottom: 1.25em;
        }

        & div.buttonContainer {
            display: flex;
            justify-content: flex-end;

            & button {
                width: max-content;
                margin: 0;
            }
        }
    }

    & .hidden,
    & div.hidden {
        display: none;
    }
}

body.forgottenPasswordPage {

    button#togglePasswordVisibilityButton {
        background-color: transparent;
        border: none;

        img {
            height: 1.25em;
        }
    }


    & .hidden {
        display: none;
    }

    & h2.subHeader {
        & img {
            height: 48px;
        }
    }
}

body.registrationPage {

    main {
        margin: 0 auto;
    }

    & h2.subHeader {
        & img {
            height: 42px;
        }
    }

}

article.threadPanel {
    background-color: var(--surface-icon-panel);
    padding: 1.25em;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    border-radius: var(--borderRadius);
    gap: 0.625em;
    word-break: break-word;
    color: var(--text-primary);

    &:hover {
        transition: 300ms;
        background-color: var(--surface-icon-panel-hover);
    }

    &.newThreadCard {
        opacity: 0;
        transform: translateX(-2em);
        transition: opacity 100ms ease var(--thread-card-transition-delay, 0ms),
            transform 600ms cubic-bezier(0.22, 1, 0.36, 1) var(--thread-card-transition-delay, 0ms);

        &.visible {
            opacity: 1;
            transform: translateX(0);
            transition: 300ms;
        }
    }

    div.threadTitleRow {
        display: flex;
        align-items: center;
        gap: 0.625em;

        a {
            color: var(--text-primary);
        }

        img.pollIndicator {
            height: 1.1em;
            flex: 0 0 auto;
            transform: translateY(0.08em);
        }
    }

    div.title {
        display: flex;
        flex-direction: column;
        gap: 0.3125em;
        font-family: var(--uiHeadingTypeface);

        div.boardShortName {
            font-weight: 500;
        }

        a.threadTitle {
            font-size: calc(var(--baseSize) * 1.1);
            font-weight: 500;
        }
    }

    div.content {
        display: flex;
        flex-direction: column;
        gap: 0.625em;
    }

    p.firstMessage {
        max-width: var(--maximumParagraphWidth);
        font-family: var(--PostTypeface);
        font-size: calc(var(--baseSize) * 0.85);
        text-align: left;
        font-weight: 300;
        color: var(--text-secondary);
    }

    p.started {
        font-family: var(--uiTextTypeface);
        font-variant-numeric: normal;
        font-size: calc(var(--baseSize) * 0.85);
        text-align: left;
        border-top: 1px dotted var(--text-primary);
        padding-top: 0.625em;

        span.username {
            color: var(--colour2);
        }
    }

    span.username {
        color: var(--colour2Bright);
    }
}

body.randomThreadPage,
body.unansweredThreadsPage {

    section.randomThreads,
    section.unansweredThreads {
        margin-bottom: 1.25em;

        a {
            font-family: var(--uiHeadingTypeface);
            font-size: calc(var(--baseSize) * 1.2);
            word-break: break-word;
        }

        p.notice {
            a {
                font-size: var(--baseSize);
                color: var(--colour2Bright);
            }
        }
    }

    section.randomThreadsFilters,
    section.unansweredThreadsFilters {
        margin-bottom: 1.25em;
        color: var(--text-primary);
    }

    section.menu {
        display: flex;
        justify-content: flex-end;

        a {
            font-size: var(--baseSize);
        }

        a:hover {
            text-decoration: underline;
        }
    }

    section.randomThreadSelection,
    section.unansweredThreadList {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
        align-items: stretch;
        justify-content: flex-start;
        gap: 1.25em;
    }
}


body.randomThreadPage {
    h2.subHeader {
        img {
            height: 56px;
        }
    }
}

@media (prefers-reduced-motion: reduce) {

    article.threadPanel.newThreadCard {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

div.adminBanner {
    margin-top: 0.625em;
    font-size: var(--baseSize);
    font-family: var(--uiTextTypeface);
    display: flex;
    flex-direction: column;
    gap: 0.3125em;
    flex-wrap: wrap;

    div.userRegistrationAlert {
        display: flex;
        align-items: center;
        gap: 0.625em;

        &::before {
            position: relative;
            top: 1px;
            content: "";
            width: var(--baseSize);
            height: var(--baseSize);
            display: inline-block;
            background-image: url("/images/icons/register-red.svg");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            flex: 0 0 1em;
        }
    }

    div.flaggedPostAlert {
        display: flex;
        align-items: center;
        gap: 0.625em;

        &::before {
            position: relative;
            top: 1px;
            content: "";
            width: var(--baseSize);
            height: var(--baseSize);
            display: inline-block;
            background-image: url("/images/icons/flag-red.svg");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            flex: 0 0 1em;
        }
    }

    &:empty {
        display: none;
    }
}

body.pendingRegistrations {

    table {
        td {
            border-bottom: 1px solid var(--grey-300);
        }
    }

    div.controls {
        display: flex;
        flex-direction: column;
        gap: 0.625em;
        padding-top: 0.3125em;
        padding-bottom: 0.3125em;

        button {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
        }
    }

    a.attribution {
        display: block;
        margin-top: 1.25em;
    }

    img.flag {
        height: 24px;
    }

    h2.subHeader {
        & img {
            height: 36px;
        }
    }

    h3 {
        margin-top: 1.5em;
        margin-bottom: 1.25em;
    }

    table {

        img {
            height: 2em;
        }

        & thead,
        tbody {

            & th,
            td {
                vertical-align: middle;
                text-align: left;
            }

            & th:last-child,
            td:last-child {
                text-align: center;
            }
        }

        & button.colossus {
            display: inline-flex;
        }

        div.countryContainer {
            display: inline-flex;
            align-items: center;
            gap: 0.625em;
        }
    }
}

section.generatePassword {
    & h3 {
        margin-top: 1.25em;
        margin-bottom: 0.625em;
    }

    p {
        margin-bottom: 0.625em;
    }

    & div.details {
        margin: 0;
    }

    & button {
        width: fit-content;
        margin: 0;
    }

    & input#generatedPassword {
        margin: 0;
    }
}

section.notifications {
    margin-top: 1.25em;
    font-family: var(--TableTypeface);
    font-size: var(--baseSize);
    display: grid;
    grid-template-columns: fit-content(50ch) auto;
    gap: 0.625em 1.5em;
    align-items: center;

    & div.messageSnippet {
        text-align: right;
    }

    &+div.messageNotification {
        margin-top: 0.625em;
    }

    & div.emojisPosted {
        & div.emoji {
            display: grid;
            grid-template-columns: max-content auto;
            gap: 0.625em;
            align-items: center;
            /* grid-template-columns: 1fr 1fr; */

            &+div.emoji {
                margin-top: 0.3125em;
            }

            & span.posted.new {
                color: var(--colour1);
            }

        }
    }
}

button.chatAllowed {
    width: 13em;
}

p.fromOldSite {
    font-family: var(--TableTypeface);
    line-height: 1.5em;
    color: var(--status-alert-background);
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

table.activeUsers {

    th,
    td {
        vertical-align: middle;
    }

    img {
        padding-right: 0.625em;
        position: relative;
        top: 2px;
    }

    th:nth-child(1),
    th:nth-child(2) {
        text-align: left;
    }

}

table.recentlyLoggedInUsers,
table.activeUsers {

    display: inline-table;
    table-layout: auto;
    max-width: 100%;
    width: auto;

    & th {
        text-align: left;
    }

    span.countryCodeAndFlag {
        white-space: nowrap;
    }

    span.countryCodeAndFlag img {
        height: 0.625em;
        margin-right: 0.2em;
        margin-left: 0.2em;
        padding-right: 0;
        top: 0;
    }
}

/* System Diagnostics */

body.systemDiagnosticsPage {

    * {
        hanging-punctuation: none;
    }

    p.caption {
        font-size: calc(var(--baseSize) * 0.8);
        font-family: var(--uiTextTypeface);
        margin-top: 0.625rem;
        text-align: center;
        font-weight: 400;
        color: var(--text-secondary);
    }

    p.subtitle {
        margin: 0;
        font-size: calc(var(--baseSize) * 0.9);
        margin-top: 0.625em;
        margin-bottom: 1.25rem;
        text-align: left;
        font-weight: 400;
    }

    div#trafficControlPolicyEnglish {
        p {
            text-align: left;
            max-width: 66ch;
        }
    }

    div+table {
        margin-top: 1.25em;
    }

    p+section.diagnostics {
        margin-top: 2.5em;
    }

    button.colossus.editTrafficControlSetting {
        margin: 0;
        margin-left: 0.3125em;
        display: inline;
        padding: 0.3125em;
        padding-left: 0.625em;
        padding-right: 0.625em;
    }

    section+section {
        margin-top: 0;
    }

    section.trafficChart {
        max-width: 100%;
        margin-bottom: 2.5em;

        div.trafficCharts {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            row-gap: 3.75rem;
            column-gap: 0;
        }

        section.trafficBucketChart {
            min-width: 0;
        }

        div[id^="trafficControlChart"],
        div[id^="trafficControlInFlightChart"] {
            width: 100%;
            height: 12rem;
        }
    }

    @media screen and (max-width: 1100px) {
        section.trafficChart {
            & div.trafficCharts {
                grid-template-columns: 1fr;
            }
        }
    }

    section.tables {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25em;
    }

    table {
        display: inline-table;
        table-layout: auto;
        width: auto;
        margin-bottom: 1.5em;
        border-top: 1px solid var(--border-strong);
        padding-top: 0.625em;

        span.limit {
            display: inline-block;
            min-width: 5em;
        }

        th,
        td {
            text-align: center;
            vertical-align: middle;
            word-break: break-all;
            white-space: normal;
        }

        span.queryPlan {
            word-break: break-word;
            line-height: 1.5em;
        }

        td:last-child {
            min-width: max(50%, 30em);
        }

        td:first-child {
            word-break: break-all;
            text-align: right;
            padding-left: 0.625em;
        }

        td:nth-child(2) {
            text-align: left;
        }

        td:nth-child(3) {
            font-weight: 300;
        }

        td:last-child {
            padding-right: 0.625em;
        }
    }

    section.configFile {
        table {
            th {
                text-align: left;
            }

            th:first-child {
                text-align: right;
            }
        }
    }

    section.trafficControl {
        span.highlight {
            color: var(--colour2Bright);
            font-weight: 400;
        }
    }

    section.databaseConfig {
        max-width: 100%;

        table {
            td:nth-child(2) {
                color: var(--colour2);
            }

            td:nth-child(3) {
                text-align: left;
            }
        }
    }

    section.configFile {
        max-width: 100%;

        table {
            td:nth-child(2) {
                color: var(--colour2);

                &.defaultValue {
                    color: var(--colour3);
                }
            }

            td:nth-child(3) {
                text-align: left;
            }
        }
    }


    section.transactionStats {
        max-width: 100%;
        width: 100%;

        table {

            th {
                white-space: nowrap;
            }

            tbody {
                tr:nth-child(even) {
                    background-color: var(--surface-table-stripe)
                }
            }

            td {
                text-align: center;
                color: var(--text-primary);
                font-weight: 400;
                word-break: break-word;
            }

            td:first-child {
                text-align: left;
                line-height: 1.5em;
            }

            ol {
                li {
                    font-family: var(--uiTextTypeface);

                    &::marker {
                        font-variant-numeric: normal;
                    }
                }
            }
        }
    }

    section.queryPlans {
        span.lastExplained {
            display: inline-block;
            margin-top: 0.625em;
            color: var(--colour3);
        }

        table {
            th {
                text-align: left;

                &:first-child {
                    padding-left: 0.3125em;
                }
            }

            td:last-child {
                min-width: 24em;
                text-align: left;
                vertical-align: top;
            }

            summary {
                margin-top: 0.625em;
            }
        }
    }

    .highlight {
        color: var(--colour2);
        font-weight: 400;
    }

    .important {
        color: var(--colour1);
        font-weight: 500;
    }

    table {
        td.highlightNoIndex {
            color: var(--colour1) !important;
            font-weight: 500 !important;
        }
    }
}

body.trafficStatisticsPage {

    p+section.diagnostics {
        margin-top: 2.5em;
    }

    section.trafficChart {
        max-width: 100%;
        margin-bottom: 2.5em;

        div.trafficCharts {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.25rem;
        }

        section.trafficBucketChart {
            min-width: 0;
            max-width: 100%;
        }

        div[id^="trafficStatistics"]:not([id^="trafficStatisticsInFlight"]) {
            width: 100%;
            height: 24rem;
        }

        div[id^="trafficStatisticsInFlight"] {
            width: 100%;
            height: 10rem;
        }

        h4 {
            font-size: calc(var(--baseSize) * 1);
            font-family: var(--HeadingTypefaceText);
            color: var(--colour2Bright);
            margin-bottom: 0.3125em;
            text-align: left;
            font-weight: 500;
        }

        p.subtitle {
            margin: 0;
            font-size: calc(var(--baseSize) * 0.9);
            font-family: var(--HeadingTypefaceText);
            margin-bottom: 1.25rem;
            text-align: left;
            font-weight: 400;
        }
    }
}


iframe {
    display: block;
}

/* Spotify */

div.spotifyEmbed {
    max-width: 100%;
}

iframe.spotifyFrame {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 12px;
}

div.imdbEmbed {
    a {
        color: inherit;
    }
}


/* Mobile Phones */

@media (max-width: 550px) {

    div.youTubeCardLayout {
        grid-template-columns: 1fr;
    }

    div.imdbEmbed {
        max-width: 100%;
    }

    header {
        padding-bottom: 2em;

        nav.mainMenu {
            margin-bottom: 1.25em;

            a {
                font-size: 20pt;
            }

            div.menuItem.breadcrumbs {

                :nth-child(2),
                :nth-child(3) {
                    display: none;
                }
            }

            div.menuItem.logoutLink {
                display: none;
            }

            div {
                row-gap: 1.25em;
            }

            >div:last-child {
                padding-bottom: 1.25em;

                a,
                button {
                    span {
                        display: inline;
                    }
                }
            }
        }

        nav.contextMenu {

            h1,
            h3.boardName,
            button.chatAllowed,
            img.chatDisabledIndicator {
                display: none;
            }

            flex-direction: column;
            gap: 0.625em;
        }

    }

    #lastReadIndicator {
        display: none;
    }

    main {
        section.heading {
            display: flex;
            justify-content: center;
        }
    }

    div.messages .message {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        word-break: break-word;
        column-gap: 1.25em;
        cursor: default;
        width: 90vw;
    }

    div.messages .body {
        align-self: stretch;
        padding-left: 0;
        margin-left: 0;
        border-left: 0;
    }

    div.messages div.timeElapsedContainer {
        display: flex;
    }

    section.messages div.messages div.metadata {
        font-size: 14pt;
        font-weight: 500;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        align-self: flex-start;
        text-align: left;
        gap: 0.625em;
        margin-bottom: 0.625em;
    }
}

section.pollEditor {

    font-family: var(--uiTextTypeface);

    div.votingTypeOptions {
        display: grid;
        width: 50%;
        padding: 1.5em;
        grid-template-columns: 2em auto;
        align-items: center;
        gap: 0.625em;
        margin-top: 1.5em;
        margin-bottom: 2em;
        background-color: var(--colour5);
        border-radius: 8px;

        input[type=radio] {
            margin: 0;
            transform: unset;
        }

        label {
            text-align: left;
            font-weight: 400;
            line-height: 1.25;
        }
    }

    p.maxOptionsMessage {
        margin-left: 0.625em;
        font-family: var(--TableTypeface);
        margin-bottom: 0.625em;
        font-size: 12pt;
        font-weight: 500;
    }

    div.pollItem {
        display: flex;
        align-items: center;
        gap: 1.25em;

        span.pollItemNumber {
            min-width: 1em;
        }
    }

    div.pollItem+div.pollItem {
        margin-top: 0.625em;
    }

    button {
        margin: 0;
    }

    div.closingDate,
    div.openingDate {
        margin-left: 0.625em;
        display: flex;
        align-items: center;
        margin-bottom: 0.625em;
        margin-top: 0.625em;

        select {
            font-size: 12pt;
            width: 12em;
            margin-left: 0.625em;
            padding: 0.3125em;
        }
    }

    div.closingDate {
        select {
            width: fit-content;
        }
    }
}


section.pollOptionEditing {
    section.pollEditor {
        display: flex;
        flex-direction: column;

        span.pollOpeningDate {
            color: var(--colour2);
            font-weight: 500;
        }

        div.editablePollItems {
            margin-left: 0.625em;

            input.pollItemInputField {
                border-radius: 8px;
                background-color: var(--colour5);
                width: 100%;
                box-sizing: border-box;
            }
        }

        h2 {
            font-size: calc(var(--baseSize) * 1.075);
        }

        p {
            font-family: var(--TableTypeface);
        }

        div.pollOptions {
            margin-top: 1.25em;

            ul {
                margin-top: 1.25em;
                font-family: var(--TableTypeface);
                font-variant-numeric: normal;

            }
        }

        div.editablePollItems {
            margin-top: 1.25em;
        }

        div.editablePollItemControlPanel {
            margin-top: 1.25em;
            margin-left: 0.625em;
            display: flex;
            justify-content: flex-end;
            gap: 0.625em;
        }
    }
}

body.boardsPage {
    section.boards+section.boards {
        margin-top: 2.5em;
    }

    .smallcaps {
        font-variant: normal;
        font-size: var(--baseSize);
    }
}

body.accessControlsPage {

    h2+section,
    section+h2 {
        margin-top: 1.25em;
    }

    p {
        font-family: var(--TableTypeface);
    }

    img {
        height: 1.25em;
        cursor: pointer;
    }

    section.siteAdmins {
        span.adminName {
            font-family: var(--TableTypeface);
            font-size: var(--baseSize);

            &.goneAway {
                color: var(--colour1);
            }
        }

        button#createSiteAdmin {
            margin-top: 1.25em;
        }
    }

    section.boardAdmins,
    section.boardMembers {
        display: grid;
        grid-template-columns: 20em auto;
        column-gap: 1.25em;
        row-gap: 0.625em;
        align-items: flex-start;
        font-family: var(--TableTypeface);
        font-size: var(--baseSize);

        span.boardName {
            font-weight: 500;
            text-align: right;

            span.count {
                font-weight: 400;
            }
        }

        span.adminName {
            &.goneAway {
                color: var(--colour1);
            }
        }
    }
}

div.footnotes {
    display: grid;
    justify-content: left;
    font-size: 10pt;
    grid-template-columns: auto auto;
    gap: 0.625em;
    max-width: var(--maximumParagraphWidth);

    & div.footnoteNumber {
        text-align: right;
    }

    & em {
        font-style: normal;
    }
}

body.flaggedPostReport {
    main {
        div.userFlaggedPostsControls {
            display: flex;
            flex-wrap: wrap;
            gap: 1.25em;
            margin-bottom: 1.25em;

            label {
                display: flex;
                align-items: center;
                gap: 0.625em;
                font-size: calc(var(--baseSize) * 0.85);
                font-family: var(--TableTypeface);
                font-weight: 500;
            }

            select {
                min-width: 12rem;
                padding: 0.3125em;
                border-radius: 8px;
                font-size: calc(var(--baseSize) * 0.85);
                font-family: var(--uiTextTypeface);
            }
        }

        div.userFlaggedPostsChartCanvas {
            width: 100%;
            height: 28rem;
        }

        a {
            color: var(--colour2);
        }

        a.colossus {
            width: max-content;
            color: var(--text-primary);
        }

        div.flaggedPostMetadata {
            display: grid;
            grid-template-columns: 1fr;
            column-gap: 1.25em;
            align-items: baseline;
        }

        div.postSnippet {
            margin-bottom: 0.625em;

            p {
                font-family: var(--PostTypeface);
            }
        }

        table {
            span.title {
                font-weight: 500;
            }

            td:first-child {
                p {
                    text-align: left;
                }
            }

            p.postVersions {
                margin-top: 1.25em;
                margin-bottom: 0.625em;
                font-weight: 500;
            }
        }

        table {
            tr {

                th,
                td {
                    text-align: left;
                    padding-top: 0.625em;
                    padding-bottom: 0.625em;
                }

                th:first-child {
                    width: 25%;
                }

                th:nth-child(3) {
                    width: 50%;
                }

                td {
                    border-bottom: 1px solid var(--border-strong);
                }
            }
        }

        table.recentlyHandled {
            tr {

                th:nth-child(2),
                td:nth-child(2) {
                    width: 15%;
                }

                th:nth-child(3),
                td:nth-child(3) {
                    width: 35%;
                }
            }
        }

        h3+div {
            margin-top: 0.625em;
        }

        div+h3 {
            margin-top: 1.25em;
        }

        div+div {
            margin-top: 2.5em;
        }

        div.tab__content+div.tab__content {
            margin-top: 0;
        }

        p+div {
            margin-top: 1.25em;
        }

        div.footnotes {
            font-family: var(--TableTypeface);

            div+div {
                margin: 0;
            }
        }

        li {
            font-family: var(--TableTypeface);
        }
    }
}



body.individualFlaggedPostPage {

    #individualFlaggedPostReport {

        &>div+div,
        >div+section,
        >section+div,
        >div+h3,
        >section+h3 {
            margin-top: 1.25em;
        }

        &>h3+div,
        >h3+section {
            margin-top: 0.625em;
        }
    }

    #handlePostButton {
        min-width: fit-content;
    }

    font-family: var(--TableTypeface);
    font-variant-numeric: normal;
    font-size: var(--baseSize);

    li {
        font-family: var(--TableTypeface);
        font-variant-numeric: normal;
    }

    main {
        a {
            color: var(--colour2);
        }
    }

    div.overview {
        display: grid;
        grid-template-columns: max-content auto;
        gap: 0.625em;

        div.label {
            text-align: right;
            font-weight: 400;
        }

        span.flagCount {
            color: var(--colour2);
        }
    }

    div.postHistory {
        >p {
            margin-bottom: 0.625em;
        }

        div.message {
            display: grid;
            grid-template-columns: max-content auto;
            gap: 1.25em;
            align-items: center;

            div.versionNumber {
                text-align: right;
            }
        }
    }

    div.controls {
        display: flex;
        gap: 1.25em;
        align-items: center;
    }

    span.alreadyHandled {
        color: var(--colour1);
        font-weight: 400;
    }
}


input[type="date"],
input[type="time"] {
    font: inherit;
    font-size: 16px;
    box-sizing: border-box;
}

body.threadPage.mediaParty {

    header {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 1.25em;

        h1 {
            font-size: calc(var(--baseSize) * 1.4);
        }


        div.media {
            width: 100%;
            aspect-ratio: 16 / 9;
            max-height: 35vh;

            iframe {
                width: 100%;
                height: 100%;
                border: none;
            }

        }


        nav.mainMenu {
            grid-column: 1 / -1;
        }

        nav.contextMenu {
            gap: 0.625em;
            justify-content: center;
        }

        button.chatAllowed {
            display: none;
        }

        img.chatDisabledIndicator {
            display: none;
        }

        div.boardAndThreadName {
            flex: unset;
        }

        span#muteThreadText {
            display: none;
        }

        div.mediaPartyMetadata {
            display: flex;
            flex-direction: column;
            gap: 0.625em;

            span.startsAt {
                margin-right: 0.3125em;
            }

            live-countdown.startTime {
                font-weight: 500;
                display: inline;
                color: var(--colour2Bright);
            }

            span.title {
                font-weight: 500;
            }
        }

        div.channel {
            display: none;
        }
    }

    nav.contextMenu {
        flex-direction: column;
        align-items: flex-start;
    }

    div.adminBanner {
        display: none;
    }

    .media {
        /* max-height: 50vh; */
        max-width: 100%;
    }
}

body.userAdministrationPage {

    a.attribution {
        display: block;
        margin-top: 2.5em;
    }

    section.userInformation {
        span.heading {
            font-weight: 500;
            color: var(--colour2Bright);
        }

        p {
            display: flex;
            align-items: center;
            gap: 0.625em;
        }
    }

    img.flag {
        height: 24px;
        display: inline-flex;
    }

    table {
        th {
            text-align: left;
        }
    }

    section.flagHistory {
        div+div {
            margin-top: 1.25em;
        }
    }

    section.userAdministrationActions {
        button {
            margin: 0;
        }

        display: flex;
        gap: 0.625em;
    }
}

dialog#banUserDialog,
dialog#yellowCardUserDialog {
    min-width: 40vw;

    section.content {
        display: flex;
        flex-direction: column;
        gap: 0.625em;

        input[type=datetime-local] {
            width: 14em;
        }

        input[type=checkbox] {
            width: 1.5em;
            height: 1.5em;
        }

        div.moderationNote {
            display: grid;
            grid-template-columns: 1fr 3fr;
            align-items: center;
            gap: 0.625em;
            text-align: right;

            p {
                max-width: 66ch;
            }
        }

        label {
            display: grid;
            grid-template-columns: 1fr 3fr;
            align-items: center;
            gap: 0.625em;
            text-align: right;

            textarea {
                font-family: var(--TableTypeface);
                width: 100%;
                padding: 0.625em;
                font-size: var(--baseSize);
            }
        }
    }
}


div.yellowCard,
div.ban {
    display: flex;
    gap: 1.25em;
    align-items: center;
    padding: 0.625em;
    padding-left: 1.25em;
    padding-right: 1.25em;
    border-radius: 8px;
    background-color: var(--status-warning-background);
    color: var(--status-warning-text);
    border: 1px solid var(--status-warning-border);
    margin-top: 0.625em;

    img {
        max-height: 2em;
    }

    p {
        margin: 0;
        font-family: var(--uiTextTypeface);
    }

    +* {
        margin-top: 0.625em;
    }
}

div.yellowCard {
    p {
        color: var(--grey-1000);
    }
}

div.ban {
    background-color: var(--status-alert-background);
    border: 1px solid var(--status-alert-border);

    p {
        color: var(--grey-0);
    }

    img {
        filter: invert();
    }
}


body.typographyPage {

    p.textPrimary {
        color: var(--text-primary);
    }

    p.textSecondary {
        color: var(--text-secondary);
    }

    p.textTertiary {
        color: var(--text-tertiary);
    }

    p.textPrimarySize {
        font-size: var(--baseSize);
    }

    p.textOnePointFiveSize {
        font-size: var(--onePointFiveSize);
    }

    p.textSecondarySize {
        font-size: var(--secondarySize);
    }

    p.textTertiarySize {
        font-size: var(--tertiarySize);
    }

    p.textQuaternarySize {
        font-size: var(--quaternarySize);
    }

    header.typographyHeader {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        padding-bottom: 0;
        padding-top: 0;
        position: static;
    }

    div.inputHeader {
        font-weight: 500;
        color: var(--colour2);
    }

    section.smallCapsExamples {
        margin-top: 2.5em;
    }

    section.statusExamples {
        margin-top: 2.5em;

        div.statusExample {
            width: fit-content;
            font-family: var(--uiTextTypeface);
            max-width: min(100%, var(--maximumParagraphWidth));
        }

        div.statusExample+div.statusExample {
            margin-top: 1.25em;
        }

        div.statusExample>header {
            position: static;
            width: fit-content;
            padding: 0;
            margin: 0;
            background: transparent;
        }

        span.warning {
            display: inline-block;
            position: static;
            inset: auto;
        }

        header nav.mainMenu {
            padding: 0;
            margin: 0;
            border: 0;
            min-height: 0;
        }

        div.typographyNotificationCount div.alert {
            background-color: var(--status-notification-count-background);
        }

        div.errorMessage {
            margin: 0;
        }

        section.options {
            margin: 0;
        }
    }

    section.embedExamples {
        margin-top: 2.5em;
        max-width: var(--maximumParagraphWidth);
    }

    article.smallCapsExample {
        pre {
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    article.smallCapsExample+article.smallCapsExample {
        margin-top: 2.5em;
    }

    div.header {
        margin-bottom: 0.625em;
    }

    div.outputHeader {
        font-weight: 500;
        color: var(--colour2);
        margin-top: 1.25em;
    }

    p {
        font-variant-numeric: oldstyle-nums;
    }

    hr {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
    }

    span.section {
        display: block;
        margin-bottom: 0.625em;
    }

    h2+h1.threadName {
        margin-top: 0.1625em;
    }

    a {
        font-family: unset;
    }

    div.dividers {
        display: block;

        p {
            margin: 0;
            max-width: 60vw;
            font-family: var(--PostTypeface);
            font-variant-numeric: oldstyle-nums;
        }


        p+* {
            margin-top: 1.25em;
        }

        *+p {
            margin-top: 1.25em;
        }

        div.image {
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 60vw;
        }

        /* Add them all up to the nearest unit */

        img.divider-1 {
            margin-top: 0.0875em;
            max-height: 0.45em;
            margin-bottom: 0.0875em;
        }

        img.divider-2 {
            max-height: 0.05em;
        }

        img.divider-3 {
            margin-top: 0.1125em;
            max-height: 0.4em;
            margin-bottom: 0.1125em;
        }

        img.divider-4 {
            max-height: 0.625em;
        }

        img.divider-5 {
            max-height: 1.25em;
        }

        img.divider-6 {
            max-height: 2.5em;
        }

        img.divider-7 {
            max-height: 2.5em;
        }

        img.divider-8 {
            max-height: 1.25em;
        }

        img.divider-9 {
            margin-top: 0.125em;
            max-height: 1.25em;
            margin-bottom: 0.125em;
        }

        img.divider-10 {
            max-height: 0.625em;
        }

        img.divider-11 {
            margin-top: 0.15625em;
            max-height: 0.9375em;
            margin-bottom: 0.15625em;
        }

        img.divider-12 {
            max-height: 0.625em;
        }

        img.divider-13 {
            max-height: 1.25em;
        }

        img.divider-14 {
            max-height: 1.25em;
        }

        img.divider-15 {
            margin-top: 0.03125em;
            max-height: 0.3125em;
            margin-bottom: 0.03125em;
        }

        img.divider-16 {
            max-height: 1.25em;
        }

    }
}

dialog#siteMessageDialog {
    section.editingPost {
        width: 100%;
    }

    section.content {
        display: flex;
        flex-direction: column;
    }

    section.radioButtons {
        margin-top: 0.625em;
        margin-left: 0.625em;
        display: flex;
        gap: 0.625em;

        label {
            display: flex;
            align-items: center;
            gap: 0.3125em;
        }
    }

    #clearButton {
        width: 16em;
    }

    width: min(40em, 80vw);
}

section.siteMessage {
    background-color: var(--surface-ui-panel);
    padding: 0.9375em;
    border-radius: 8px;
    margin-top: 1.25em;

    p {
        font-family: var(--uiTextTypeface);
    }
}

dialog.queryPlanDialog {
    max-width: 80vw;
}

body.filterPage {
    section.controlPanel {
        background-color: var(--colour3Lighter);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1.25em;
        padding: 1.25em;
    }
}

#singleLineTextInputOkCancelDialog {
    width: 30em;
    min-width: 12em;

    input[type=text] {
        width: 100%;
    }

    section.title {
        display: flex;
        gap: 1.25em;
        align-items: center;
    }
}

[data-hidden-text-container] {
    background-color: var(--hiddenTextHighlight);
    padding: 3px 4px;
    border-radius: 8px;
    cursor: pointer;

    &.revealed {
        background-color: unset;
        padding: 0;
    }

}

[data-hidden-text-content] {
    display: none;
}

[data-hidden-text-container].revealed [data-hidden-text-label] {
    display: none;
}

[data-hidden-text-container].revealed [data-hidden-text-content] {
    display: inline;
}

::view-transition-group(hidden-text-reveal) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(hidden-text-reveal),
::view-transition-new(hidden-text-reveal) {
    animation-duration: 80ms;
    animation-timing-function: ease-out;
    mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {

    ::view-transition-group(hidden-text-reveal),
    ::view-transition-old(hidden-text-reveal),
    ::view-transition-new(hidden-text-reveal) {
        animation: none;
    }
}

body.whyRegisterPage {

    p,
    li {
        font-family: var(--uiTextTypeface);
        max-width: var(--maximumParagraphWidth);
    }
}

body.siteClosedPage {
    margin-top: 2.5em;

    img.siteClosedIcon {
        animation: siteClosedIconRock 0.5s ease-in-out infinite alternate;
        height: 2.5em;
    }

    h2+section {
        margin-top: 3.25em;
    }
}

@keyframes siteClosedIconRock {
    0% {
        transform: rotate(-20deg);
    }

    100% {
        transform: rotate(20deg);
    }
}

span.siteClosedMessage {
    animation: siteClosedMessageFadeIn 1s ease-out both;
    color: var(--colour1);
    font-weight: 500;
}

@keyframes siteClosedMessageFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

dialog.repliedToPost {
    div.message {
        display: block;
        width: var(--maximumParagraphWidth);

        div.body {
            padding-left: 0;
            margin-left: 0;
            border-left: 0;
        }
    }

    menu {
        display: flex;
        justify-content: flex-end;
        margin-top: 2.5em;
        padding-top: 1.25em;
        border-top: 1px solid var(--lighterLineColour);
    }
}

body.blogViewPage {
    label {
        font-family: var(--uiTextTypeface);
    }

    article {
        display: flex;
        flex-direction: column;
        gap: 0.625em;
        border-top: 1px dotted black;
        padding-top: 1.25em;

        &>.metadata {
            font-family: var(--uiTextTypeface);
            margin-top: 0;
        }

        &>div.messages {
            margin-top: 1.25em;
        }
    }
}