:root {
    /* light to dark */

    --palette-accent-10: #77c9f3;
    --palette-accent-30: #3ba4c7;
    --palette-accent-60: #2D7C96;
    --palette-accent-90: #1e5263;

    --palette-accent-contrast: white;

    --palette-00: #ffffff;
    --palette-10: #eeeeee;
    --palette-20: #e1e3e4;
    --palette-30: #cbd5d8;
    --palette-40: #bfcace;
    --palette-50: #9db7bf;
    --palette-60: #50707b;
    --palette-70: #2a4d59;
    --palette-80: #0b272f;
    --palette-90: #032029
}

:root {
    --sp-xs: 4px;
    --sp-s: 8px;
    --sp-m: 16px;
    --sp-l: 32px;
    --sp-xl: 64px;
}

:root {
    --page-bg: var(--palette-10);
    --content-bg: var(--palette-20);
    --header-bg: var(--palette-30);
    --panel-title-bg: var(--palette-20);
    --post-bg: var(--palette-20);
    --reply-bg: var(--palette-30);
    --reply-preview-bg: var(--palette-40);
    --form-bg: var(--palette-20);

    --text-primary: var(--palette-90);
    --text-secondary: var(--palette-60);
    --text-accented: var(--palette-accent-60);
    --text-on-accent: var(--palette-accent-contrast);
    --text-quote: #5e8d10;

    --border-default: var(--palette-90);
    --border-strong: var(--palette-70);

    --button-primary-bg: var(--palette-accent-60);
    --button-primary-text: var(--text-on-accent);
    --button-primary-hover-bg: var(--palette-accent-30);
    --button-primary-active-bg: var(--palette-accent-90);

    --button-secondary-bg: var(--palette-50);
    --button-secondary-text: var(--text-primary);
    --button-secondary-hover-bg: var(--palette-30);
    --button-secondary-active-bg: var(--palette-50);

    --button-inline-bg: #fff00;
    --button-inline-text: var(--palette-accent-30);
    --button-inline-hover-text: var(--palette-accent-10);
    --button-inline-active-text: var(--palette-accent-60);

    --button-disabled-bg: lightgray;
    --button-disabled-text: darkgray;

    --status-success: #0a840a;
    --status-info: #1270a7;
    --status-warn: #cf560a;

    --shadow: #00000088;

    --border-radius: var(--sp-xs);
    --page-width: 80%;

    --title-font-size: 1.5em;
    --title-font-weight: 600;
}


/*
 * common
 */

html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

body{
    font-family: sans-serif;
    background: var(--page-bg);
    color: var(--text-primary);
    line-height: 1.5;
    font-size: 1em;

}

button {
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    font-size: 1em;
}

button:disabled {
    color: var(--button-disabled-text);
    cursor: initial;
    background-color: var(--button-disabled-bg);
    border: 1px solid var(--button-disabled-text);
}


button.btn-primary {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    padding: var(--sp-xs);
    margin: var(--sp-xs);
}

button.btn-primary:hover{
    background-color: var(--button-primary-hover-bg);
}

button.btn-primary:active{
    background-color: var(--button-primary-active-bg);
}

button.btn-secondary{
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    padding: var(--sp-xs);
    margin: var(--sp-xs);
}

button.btn-secondary:hover{
    background-color: var(--button-secondary-hover-bg);
}

button.btn-secondary:active{
    background-color: var(--button-secondary-active-bg);
}

.btn-inline, button.btn-inline{
    background-color: transparent;
    border: none;
    color: var(--button-inline-text);
    cursor: pointer;
    text-decoration: none;
}

.btn-inline:hover, button.btn-inline:hover {
    color: var(--button-inline-hover-text);
}

.btn-inline:active, button.btn-inline:active {
    color: var(--button-inline-active-text);
}

.btn-inline:disabled, button.btn-inline:disabled {
    color: var(--text-primary);
}


/*
 * nav bar
 */

#top-navigation-container{
    background-color: var(--header-bg);
    border-radius: var(--border-radius);

}

#top-navigation {
    display: flex;
    align-items: center;
    padding: 16px;
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}

.nav-link-top {
    margin: var(--sp-l);
    border: none;
    border-radius: var(--border-radius);
    padding: var(--sp-s);
    background-color: #fff0;
    cursor: pointer;
}

.nav-link-top:hover{
    background-color: #fff5
}

.nav-link-top:active{
    background-color: #eee3
}

.auth-btn-container{
    margin-left: auto;
}

.footer {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--sp-l);
}


/*
 * post form
 */
.topic-form-panel {
    margin: var(--sp-s) auto auto;
    background-color: var(--form-bg);
    border-radius: var(--border-radius);
    width: 40%;
}

.reply-form-panel {
    background-color: var(--form-bg);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    width: 40%;
    margin: var(--sp-s) auto auto;
}

.post-form-container{
    display: flex;
    flex-direction: column;
    gap: var(--title-font-size);
    margin: var(--sp-xs);
    padding-bottom: var(--sp-l);
}

.post-form {
    display: flex;
    flex-direction: column;
}


.post-form input[type="text"], .post-form textarea {
    padding: var(--sp-xs);
    margin-bottom: var(--sp-s);

    font-family: inherit;
    font-size: 1rem;
}

.post-form textarea{
    min-height: var(--sp-xl);
    resize: vertical;
}

.titlebar{
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    background-color: var(--panel-title-bg);
    padding: var(--sp-xs);
    cursor: pointer;
}


.form-title-row {
    white-space: nowrap;
}


/*
 * page
 */

.thread-index, .thread-view {
    padding-left: var(--sp-l);
    padding-right: var(--sp-l);
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}

/*
 * posts
 */

.post {
    box-sizing: border-box;
    border-radius: var(--border-radius);
    max-width: 100vw;
    overflow-wrap: break-word;
    word-break: break-word;
    width: 100%;
}

.child-post{
    background: var(--reply-bg);
    color: var(--text-primary);
    display: table;
    padding-bottom: var(--sp-m);
    padding: var(--sp-s);
    padding: var(--sp-s);
    margin-bottom: var(--sp-s);
}

.preview-post{
    background: var(--reply-preview-bg);
    color: var(--text-primary);
    padding-bottom: var(--sp-m);
    padding-left: var(--sp-s);
    padding-right: var(--sp-s);
    margin-bottom: var(--sp-s);
}

.op-highlighted{
    animation: highlight-fade-op 2s ease-in forwards;
}

.reply-highlighted{
    animation: highlight-fade-reply 2s ease-in forwards;
}

.post-hidden .post-content {
    display: none;
}

/* threads */

.thread-preview, .thread-view{
    border-radius: var(--border-radius);
    margin-bottom: var(--sp-l);
    background: var(--post-bg);
    padding: var(--sp-s);
}

.update-box {
    display: block;
    padding: var(--sp-xs);
    margin-bottom: var(--sp-xs);
    height:100%;
}

.update-box-active {
    border-radius: var(--border-radius);
    color: var(--text-accented);
    cursor:pointer;
}

/* catalog */

.catalog-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-m);
}

.catalog-op{
    display: flex;
    flex-direction: column;
    height: 350px;
    padding-bottom: var(--sp-m);
    background-color: var(--reply-bg);
    vertical-align: top;
    border: 1px solid var(--border-default);
    word-wrap: anywhere;
    text-align: center;
    cursor: pointer;
}

.catalog-op > .catalog-op-thumb img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    flex-shrink: 0;
    background-color: var(--reply-bg);
}

.catalog-op-title {
    flex-shrink: 0;
}

.catalog-op-teaser{
    flex-grow: 1;
    overflow: hidden;
    min-height: 0;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 2em), transparent);
    mask-image: linear-gradient(to bottom, black calc(100% - 2em), transparent);
}

.catalog-op-summary {
    flex-shrink: 0;
    margin-top: auto;
}

/* files */
.files-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-m);
    align-items: flex-start;
}

.file-box {
    font-style: italic;
    padding: var(--sp-s);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 200px;
    transition: width 0.3s ease;
}

.file-box img {
    max-width: 100%;
    height: auto;
    display: block;
}

.file-box.expanded {
    width: 100%;
}

.expanded-container {
    position: relative;
    display: inline-block;
}


.file-info {
    color: var(--text-secondary);
}

/* headers */

.post-header {
    width: 100%;
    color: var(--text-secondary);
    display: flex;
    align-items: baseline;
    gap: var(--sp-xs);
    text-decoration: none;
}

.post-title, .catalog-op-title{
    background: inherit;
    font-variant: petite-caps;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.5em;
}

.post-poster-name, .display-name-text {
    color: var(--text-secondary);
    font-weight: 600;
}

.parent-post .post-header{
    padding: var(--sp-xs);
}

.post-title{
    text-decoration: none;
    color: var(--palette-accent-90);
}

.post-title:hover{
    text-decoration:underline;
}

.op-info{
    color: var(--text-secondary);
}

/* post menu */

.post-actions-menu-btn{
    margin-left:auto;
}

.post-actions-menu {
    list-style: none;
}

.post-actions-menu a {
    text-decoration: none;
    color: inherit;
}

/* body */

.blockquote {
    margin: 0;
    padding-left: 0;
    color: var(--text-quote);
}


blockquote blockquote {
    margin-left: 0;
}

.reply blockquote,
blockquote :last-child {
    margin-bottom: 0em;
}

/*
 * alerts
 */


.alerts-container{
    position: fixed;
    text-align: center;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
}

.alert{
    padding: var(--sp-m);
    z-index: 0;
    width: min-content;
    text-wrap: nowrap;
    margin: var(--sp-s) auto auto;
    color: var(--palette-00);
    line-height: 100%;
    box-shadow: 4px 4px var(--shadow);
}


.alert-icon{
    vertical-align: middle;
    padding-right: var(--sp-s);
}

.alert-success{
    background-color: var(--status-success);
}

.alert-warning{
    background-color: var(--status-warn);
}

.alert-info{
    background-color: var(--status-info);
}

/*
 * panels
 */

.Wt-popup, .Wt-dialog {
    background: var(--form-bg);
    padding: var(--sp-xs);
    box-shadow: 1px 1px 2px var(--shadow);
    border-radius: var(--border-radius);
}


.Wt-form h2{
    display: none;
}


.Wt-fields {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}

.Wt-fields label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    margin-bottom: var(--sp-xs);
}

.Wt-fields label span {
    font-weight: 400;
    color: var(--text-secondary);
}

/*
 * captchungo
 */

.captcha-prompt {
    font-weight: 600;
    margin-bottom: var(--sp-s);
    font-size: 1.1em;
    display: block;
}

.captcha-grid {
    display: grid;
    grid-template-columns: repeat(4, 150px);
    gap: var(--sp-m);
    margin-bottom: var(--sp-s);
}

.captcha-tile {
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    transition: border-color 0.15s ease;
}

.captcha-tile:hover {
    border-color: var(--palette-accent-30, #888);
}

.captcha-tile-selected {
    border-color: var(--palette-accent-60, #4a90d9);
    box-shadow: 0 0 8px var(--palette-accent-60, #4a90d9);
}

.captcha-error {
    display: block;
    color: var(--status-warn);
    margin-top: var(--sp-xs);
    font-weight: 600;
}



/* animations */

@keyframes highlight-fade-reply {
    from {
        background: var(--palette-accent-10);
    }
    to {
        background: var(--reply-bg);
    }
}

@keyframes highlight-fade-op {
    from {
        background: var(--palette-accent-10);
    }
    to {
        background: var(--post-bg);
    }
}