@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/ui/theme-files/modern/InterVariable.woff2?v=4.0') format('woff2');
}
@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/ui/theme-files/modern/InterVariable-Italic.woff2?v=4.0') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }
:root {
    color-scheme: light dark;
    scroll-behavior: smooth;
    accent-color: var(--color--primary);

    --header-height: 52px;
    --border-radius: 0;

    --font-family--sans-serif: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-family--monospace: ui-monospace, monospace;
    --font-size--base: 11pt;

    --color--primary: #07d;
    --color--info: #0ac;
    --color--success: #0c8;
    --color--warning: #d90;
    --color--danger: #c08;
    --color--muted: #707d8a;

    --color--background: #fff;
    --color--text: #000;
    --color--links: var(--color--primary);
    
    --color--btn--default-bg: #000;
    --color--btn--default-fg: #fff;

    --color--btn--primary-bg: var(--color--primary);
    --color--btn--primary-fg: #fff;

    --color--btn--info-bg: var(--color--info);
    --color--btn--info-fg: #000;

    --color--btn--success-bg: var(--color--success);
    --color--btn--success-fg: #000;

    --color--btn--warning-bg: var(--color--warning);
    --color--btn--warning-fg: #000;

    --color--btn--danger-bg: var(--color--danger);
    --color--btn--danger-fg: #fff;

    --widget--border-width: 1px;
    --widget--border-color: #bbb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color--primary: #9cf;
        --color--info: #9ef;
        --color--success: #9fa;
        --color--warning: #fd9;
        --color--danger: #f9b;
        --color--muted: #97a3af;

        --color--background: #0b0b0b;
        --color--text: #e1e1e1;
        
        --color--btn--default-bg: #fff;
        --color--btn--default-fg: #000;

        --color--btn--primary-fg: #000;
        --color--btn--danger-fg: #000;

        --widget--border-color: #3b3b3b;

        select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e1e1e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        }
    }
}

html {
    height: 100%;
}

body {
    min-height: 100%;

    background: var(--color--background);
    color: var(--color--text);

    display: grid;
    max-inline-size: 1000px;
    margin-inline: auto;
    margin-block: 0;
    grid-template: "header" max-content
                   "main" minmax(0, 1fr)
                   "footer" max-content
                 / minmax(0, 1fr);
    font: var(--font-size--base) var(--font-family--sans-serif);
    font-optical-sizing: auto;
    box-shadow: calc(var(--widget--border-width) * -1) 0 0 var(--widget--border-color),
                var(--widget--border-width) 0 0 var(--widget--border-color);
}

[hidden] {
    display: none !important;
}

h1,
.h1 {
    font-size: 2em;
    font-weight: 200;
}

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

:focus-visible {
    outline: 1px solid var(--_focus-color, var(--_bg, var(--color--primary)));
    outline-offset: 2px;
}

header {
    grid-area: header;
    display: grid;
    grid-template: "brand nav" minmax(0, 1fr)
                 / max-content minmax(0, 1fr);
    /* padding: 16px 8px; */
    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
    position: sticky;
    top: 0;
    background: var(--color--background);
    z-index: 3;
    height: var(--header-height);
    align-items: stretch;
}
#brand {
    display: block;
    grid-area: brand;
    align-content: center;
    margin-left: 16px;
    font-weight: 400;
    text-decoration: none;
    color: inherit;
}
nav {
    display: flex;
    justify-content: end;
    align-items: stretch;
    grid-area: nav;
    padding-right: 8px;
    >p {
        margin: 0;
        align-content: center;
    }
    >a {
        padding: 16px 8px;
        color: inherit;
        text-decoration: none;
        align-content: center;
        &:hover {
            background-color: rgb(from var(--color--text) r g b / 10%);
        }
        >svg {
            display: block;
        }
        &.active {
            box-shadow: calc(var(--widget--border-width) * -1) 0 0 var(--widget--border-color),
                        var(--widget--border-width) 0 0 var(--widget--border-color);
        }
    }
    >* {
        display: block;
    }
}
main {
    grid-area: main;
    padding: 8px;
}
footer {
    grid-area: footer;
    display: grid;
    grid-template: "about prefs" minmax(0, 1fr)
                 / minmax(0, 1fr) max-content;
    align-items: center;
    padding: 16px;
    border-top: var(--widget--border-width) solid var(--widget--border-color);
    #about {
        grid-area: about;
    }
    #preferences {
        grid-area: prefs;
    }
}
.form-group {
    display: flex;
    flex-direction: column;
    margin-block: 8px;
    label {
        /* font-size: 80%;
        font-weight: bold; */
        align-self: start;
    }
    >input, >select, >textarea, >.input {
        align-self: stretch;
        width: 100%;
        display: block;
    }
    &.form-actions {
        flex-direction: row;
        justify-content: start;
        align-items: center;
        gap: 8px;
    }
    &.form-additional {
        display: block;
    }
}
.checkbox {
    margin-block: 8px;
}
.form-inline {
    display: inline-flex;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 8px;
    .form-group {
        margin: 0;
        flex-direction: row;
        align-items: center;
        label {
            margin-right: 0.25em;
        }
        >* {
            align-self: unset;
        }
    }
}

.main-form {
    max-inline-size: 480px;
    margin-inline: auto;
    margin-top: 32px;
}

input:is(
    :not([type]),
    [type="text"],
    [type="email"],
    [type="password"],
    [type="search"],
    [type="number"]
),
textarea,
select {
    appearance: none;
    border: var(--widget--border-width) solid var(--widget--border-color);
    background: none;
    font: inherit;
    border-radius: var(--border-radius);
    padding: 6px;

    &:focus-visible {
        background-color: rgb(from var(--color--primary) r g b / 10%);
    }

    &:disabled {
        color: var(--color--muted);
        background-color: rgb(from var(--color--muted) r g b / 10%);
        border-color: rgb(from var(--widget--border-color) r g b / 67%);
        cursor: not-allowed;
    }
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 24px;
}

button,
input:is(
    [type="button"],
    [type="submit"],
    [type="reset"]
),
.btn {
    appearance: none;
    background: none;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family--sans-serif);
    font-weight: 800;
    font-size: var(--font-size--base);
    gap: 0.25em;
    text-decoration: none;
    padding: 6px 16px;
    border-radius: var(--border-radius);
    border: var(--widget--border-width) solid var(--widget--border-color);
    cursor: pointer;
    color: var(--color--text);

    &:hover {
        background-color: rgb(from var(--color--text) r g b / 10%);
    }

    &.btn-link {
        border-color: transparent;
        color: var(--color--links);

        text-decoration: underline;
        font-weight: inherit;
    }

    &.btn-default {
        --_bg: var(--color--btn--default-bg);
        --_fg: var(--color--btn--default-fg);
    }
    &.btn-primary {
        --_bg: var(--color--btn--primary-bg);
        --_fg: var(--color--btn--primary-fg);
    }
    &.btn-info {
        --_bg: var(--color--btn--info-bg);
        --_fg: var(--color--btn--info-fg);
    }
    &.btn-success {
        --_bg: var(--color--btn--success-bg);
        --_fg: var(--color--btn--success-fg);
    }
    &.btn-warning {
        --_bg: var(--color--btn--warning-bg);
        --_fg: var(--color--btn--warning-fg);
    }
    &.btn-danger {
        --_bg: var(--color--btn--danger-bg);
        --_fg: var(--color--btn--danger-fg);
    }

    &:is(
        .btn-default,
        .btn-primary,
        .btn-info,
        .btn-success,
        .btn-warning,
        .btn-danger
    ) {
        box-shadow: none;
        background: var(--_bg);
        border-color: var(--_bg);
        color: var(--_fg);
        &:hover {
            border-color: hsl(from var(--_bg) h s calc(l + 15));
            background: hsl(from var(--_bg) h s calc(l + 15));
        }
    }

    &.btn-iconic {
        padding-inline: 6px;
    }
}

.icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.post-list {
    border-top: var(--widget--border-width) solid var(--widget--border-color);
    margin-inline: -8px;
    >._item {
        display: block;
        border-bottom: var(--widget--border-width) solid var(--widget--border-color);
        padding: 16px;
        color: inherit;
        text-decoration: none;
        &:hover {
            background-color: rgb(from var(--color--text) r g b / 10%);
        }
        >._heading {
            font-size: inherit;
            font-weight: bold;
            margin: 0;
        }
        >._text {
            margin: 0;
        }
    }
}

.actions {
    inline-size: max-content;
    margin-inline-start: auto;
    margin-bottom: 8px;
    white-space: nowrap;
    &:first-child {
        margin: -8px -8px 0 auto;
        >.btn {
            border-top: 0;
            border-bottom: 0;
            border-right: 0;
        }
    }
}

.page-actions {
    display: flex;
    justify-content: end;
    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
    margin-inline: -8px;
    gap: 8px;
    button,
    .btn {
        border-top: 0;
        border-bottom: 0;
    }
    form {
        display: contents;
        margin: 0;
        padding: 0;
    }
}

.rt-toolbar,
.btn-toolbar {
    display: flex;
    gap: 8px;
    button,
    .btn {
        border-width: 0;
        border-right-width: var(--widget--border-width);
        &:first-child {
            border-left-width: var(--widget--border-width);
        }
    }
    .rt-group,
    .btn-group {
        display: flex;
        &:first-child > button:first-child {
            border-left-width: 0;
        }
    }
}

.btn-toolbar .btn-group {
    border-top: var(--widget--border-width) solid var(--widget--border-color);
    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
}

.text-primary { color: var(--color--primary); }
.text-info { color: var(--color--info); }
.text-success { color: var(--color--success); }
.text-warning { color: var(--color--warning); }
.text-danger { color: var(--color--danger); }
.text-muted { color: var(--color--muted); }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.richtext-editor {
    display: flex;
    flex-direction: column;
    border: var(--widget--border-width) solid var(--widget--border-color);
    .rt-toolbar {
        border-bottom: var(--widget--border-width) solid var(--widget--border-color);
    }
    textarea {
        font-family: var(--font-family--monospace);
        border: none;
        resize: vertical;
        max-height: 500px;
    }
}

.post-reply .richtext-editor {
    margin-inline: -8px;
    border-left: 0;
    border-right: 0;
}

.sr-only {
    display: inline-block;
    position: absolute;
    width: 0;
    height: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    opacity: 0;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #000c;
    transition: opacity 0.2s ease;
    padding: 16px;
    &.fade {
        opacity: 0;
        pointer-events: none;
        .modal-dialog {
            translate: 0% -128px;
        }
    }
}
.modal-dialog {
    background: var(--color--background);
    color: var(--color--text);
    border: var(--widget--border-width) solid var(--widget--border-color);
    max-inline-size: 1002px;
    margin: auto;
    transition: inherit;
    transition-property: translate;
    &.modal-primary .modal-header {
        color: var(--color--primary);
        background-color: rgb(from var(--color--primary) r g b / 10%);
    }
    &.modal-info .modal-header {
        color: var(--color--info);
        background-color: rgb(from var(--color--info) r g b / 10%);
    }
    &.modal-success .modal-header {
        color: var(--color--success);
        background-color: rgb(from var(--color--success) r g b / 10%);
    }
    &.modal-warning .modal-header {
        color: var(--color--warning);
        background-color: rgb(from var(--color--warning) r g b / 10%);
    }
    &.modal-danger .modal-header {
        color: var(--color--danger);
        background-color: rgb(from var(--color--danger) r g b / 10%);
    }
}
.modal-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    padding: 0 16px;
    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
    align-items: center;
    >button,
    >.btn {
        border-top: 0;
        border-bottom: 0;
    }
    >.close {
        margin-right: -16px;
    }
}
.modal-header>.close {
    grid-column: 2;
}
.modal-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: inherit;
    font-weight: 800;
    &:has(>svg) {
        display: flex;
        gap: 0.25em;
        align-items: center;
        >svg {
            display: block;
        }
    }
}
.modal-footer {
    display: flex;
    border-top: var(--widget--border-width) solid var(--widget--border-color);
    padding: 0 16px;
    gap: 8px;
    justify-content: end;
    >button,
    >.btn {
        border-top: 0;
        border-bottom: 0;
    }
}
.modal-body {
    padding: 16px;
}

.edit-post-wrapper {
    padding: 0;
    >.richtext-editor {
        border: 0;
    }
}

.pull-right {
    float: right;
}

:has(>.pull-right)::after {
    content: "";
    display: block;
    clear: both;
}

.title-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    >form {
        display: contents;
    }
}

.page-header {
    padding-block-end: 8px;
    margin-bottom: 8px;
    margin-inline: -8px;
    padding-inline: 8px;
    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
    >h1 {
        margin: 0;
    }
}
.page-header:has(~ .post) {
    margin-bottom: 0;
}

.post {
    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    margin-inline: -8px;
    z-index: 0;
    position: relative;
}
.post-pfp {
    border-right: var(--widget--border-width) solid var(--widget--border-color);
    padding: 8px;
    position: relative;
    >a {
        &, >img {
            display: block;
        }
    }
}
.post-title {
    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
    padding: 8px;
    position: sticky;
    top: var(--header-height);
    background: var(--color--background);
    font-size: 80%;
}
.post-attachments {
    padding: 8px;
    border-top: var(--widget--border-width) solid var(--widget--border-color);
}
.post-main {
    padding: 8px;
}
.post-body:has(>.post-status) {
    align-content: center;
}
.post-status {
    padding: 8px;
    display: flex;
    gap: 0.25em;
    height: 100%;
    align-items: center;
    &.post-status-primary {
        color: var(--color--primary);
        background-color: rgb(from var(--color--primary) r g b / 10%);
    }
    &.post-status-info {
        color: var(--color--info);
        background-color: rgb(from var(--color--info) r g b / 10%);
    }
    &.post-status-success {
        color: var(--color--success);
        background-color: rgb(from var(--color--success) r g b / 10%);
    }
    &.post-status-warning {
        color: var(--color--warning);
        background-color: rgb(from var(--color--warning) r g b / 10%);
    }
    &.post-status-danger {
        color: var(--color--danger);
        background-color: rgb(from var(--color--danger) r g b / 10%);
    }
}
.post-content {
    word-break: break-word;
    hyphens: auto;
}

.icon-in-text {
    vertical-align: middle;
}

.is-you {
    color: var(--color--primary);
}

blockquote {
    padding: 8px;
    margin-left: 0;
    border-left: var(--widget--border-width) solid var(--widget--border-color);
}

#image-attachment-view,
#video-attachment-view {
    max-width: 100%;
    margin-inline: auto;
    display: block;
}

.spring-row {
    display: flex;
    align-items: center;
    gap: 8px;
    >.spring-fill {
        flex: 1;
    }
    >.spring-fit {
        flex-shrink: 0;
    }
}

.spring-fill input {
    display: block;
    width: 100%;
}

.post-anchor {
    position: absolute;
    left: 0;
    top: calc(-1 * var(--header-height));
    width: 0;
    height: 0;
}

.topic-info-box {
    padding: 16px;
    text-align: center;
    margin: 0 -8px calc(-8px - var(--widget--border-width));
    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
    &.primary {
        background-color: rgb(from var(--color--primary) r g b / 10%);
    }
    &.info {
        background-color: rgb(from var(--color--info) r g b / 10%);
    }
    &.success {
        background-color: rgb(from var(--color--success) r g b / 10%);
    }
    &.warning {
        background-color: rgb(from var(--color--warning) r g b / 10%);
    }
    &.danger {
        background-color: rgb(from var(--color--danger) r g b / 10%);
    }

    >h3 {
        margin: 0 0 8px;
    }
}

.alert {
    padding: 16px;
    margin-bottom: 16px;
    border: var(--widget--border-width) solid var(--widget--border-color);
    &.alert-primary {
        color: var(--color--primary);
        background-color: rgb(from var(--color--primary) r g b / 10%);
    }
    &.alert-info {
        color: var(--color--info);
        background-color: rgb(from var(--color--info) r g b / 10%);
    }
    &.alert-success {
        color: var(--color--success);
        background-color: rgb(from var(--color--success) r g b / 10%);
    }
    &.alert-warning {
        color: var(--color--warning);
        background-color: rgb(from var(--color--warning) r g b / 10%);
    }
    &.alert-danger {
        color: var(--color--danger);
        background-color: rgb(from var(--color--danger) r g b / 10%);
    }
    &:is(main>.alert) {
        padding: 24px;
        margin: -8px -8px 0;
        border-left: 0;
        border-top: 0;
        border-right: 0;
        &:is(.page-header:has(~ .post) + .alert) {
            margin-top: 0;
        }
    }
    >svg {
        vertical-align: sub;
    }
}

.result-alert {
    margin: 8px -8px 0;
    >.alert {
        padding: 24px;
        margin: 0;
        border-left: 0;
        border-right: 0;
    }
    &:is(.profile-edit-view .result-alert) {
        margin-inline: 0;
    }
}

.topic-locked {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.25em;
    color: var(--color--warning);
}

.profile-header {
    display: grid;
    grid-template: "image name" minmax(0, 1fr)
                   "image info" max-content
                 / max-content minmax(0, 1fr);
    column-gap: 8px;
    >._image {
        grid-area: image;
    }
    >._name {
        grid-area: name;
        align-self: center;
    }
    >._info {
        grid-area: info;
        align-self: center;
    }
}

main:has(>.profile-edit-view) {
    display: flex;
    flex-direction: column;
}

.profile-edit-view {
    margin: -8px;
    display: grid;
    grid-template: "posts edit" minmax(0, 1fr)
                 / minmax(0, 1fr) max-content;
    flex: 1;
    h3 {
        padding-inline: 8px;
    }
    >._posts {
        grid-area: posts;
        .post-list {
            margin-inline: 0;
        }
    }
    >._edit {
        grid-area: edit;
        border-left: var(--widget--border-width) solid var(--widget--border-color);
        width: 300px;
        h3 + form {
            border-top: var(--widget--border-width) solid var(--widget--border-color);
        }
        form {
            padding-inline: 8px;
        }
        form:has(+ h3) {
            border-bottom: var(--widget--border-width) solid var(--widget--border-color);
        }
    }
}

.post-images {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.image-attachment {
    display: block;
    margin-right: 8px;
    text-decoration: none;
    position: relative;
    .image-attachment-image {
        display: block;
        border: var(--widget--border-width) solid var(--widget--border-color);
    }
    .attachment-lock {
        position: absolute;
        color: white;
        right: 6px;
        top: 6px;
        text-shadow: 0 1px 3px rgba(0,0,0,.5);
    }
    .video-player-icon {
        position: absolute;
        color: white;
        inset: 0;
        margin: auto;
        filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 900px) {
    footer {
        display: block;
        #preferences {
            margin-top: 8px;
        }
    }
}

@media (max-width: 780px) {
    main:has(>.profile-edit-view) {
        display: block;
    }
    
    .profile-edit-view {
        grid-template: "edit" max-content
                       "posts" minmax(0, 1fr)
                     / minmax(0, 1fr);
        >._posts {
            margin-bottom: 8px;
        }
        >._edit {
            width: auto;
            border-bottom: var(--widget--border-width) solid var(--widget--border-color);
            border-left: 0;
        }
    }
}

@media (max-width: 560px) {
    .post {
        grid-template-columns: minmax(0, 1fr);
        .post-pfp {
            display: none;
        }
    }
    footer #preferences form {
        display: block;
        margin-top: 4px;
    }
}

#group0 {
    display: none !important;
}

@media (prefers-reduced-motion) {
    *, *::before, *::after {
        transition: none !important;
    }
}