/*
 * Custom styles on top of Pico CSS.
 *
 * Pico provides the page shell (container, nav, form controls, tables, prose).
 * Everything local - font sizes, weights, colors, component layout - lives here
 * so that Pico's opinionated typography scale never leaks into the widgets.
 */

:root {
    --main-font: Inter,sans-serif;
    --monospace-font: monospace;
    --alt-font: Inter, sans-serif;
    --light-grey: #ECECEC;
    --lighter-grey: #F5F5F5;
    --form-bg-color:#f9f6f4;
    --has-answers_bg: #5b8c3e;
    --has-answers_fg: #ffffff;
    --unread_bg: #cc0f35;
    --unread_fg: #ffffff;
    --new_message_navbar_fg: #df43bd;
    --new_message_item_bg: #e9f3e2;
    --new_message_fg: #333333;
    --open_bg: #8f2c47;
    --open_fg: #ffffff;
    --news_bg: #762C90;
    --news_fg: #ffffff;
    --forum_bg: #b79538;
    --forum_fg: #ffffff;
    --job_bg: #e9530f;
    --job_fg: #ffffff;
    --tool_bg: #265040;
    --tool_fg: #ffffff;
    --herald-bg:#df6cbc;
    --herald-fg:#f9f3f9;
    --text-color: #333333;
    --muted-color: #808080;
    --tag-color: #6b3e4a;
    --tag-background: #ececec;
    --tag-border: #bbbbbb;
    --comment-color: #666666;
    --comment-background: #f5f5f5;
    --voteicon-color: #8f2c47;
    --link-color: #4183c4;
    --active-tab-color:  #3e3d3d;
    --error-color: #cc0f35;
    --font-size: 1rem;
}

/*
 * Pico settings. 87.5% pins 1rem to 14px, which also stops Pico from growing
 * the root font size at every breakpoint. Everything Pico sizes in rem
 * (buttons, inputs, spacing) then matches our body text.
 *
 * The [data-theme] part is only there to outrank Pico's own colour scheme
 * block, which is more specific than a bare :root.
 */
:root[data-theme="light"] {
    --pico-font-size: 1rem;
    --pico-font-family: var(--main-font);
    --pico-font-family-monospace: var(--monospace-font);
    --pico-line-height: 1.2;
    --pico-color: var(--text-color);
    --pico-muted-color: var(--muted-color);
    --pico-primary: var(--link-color);
    --pico-border-radius: 3px;
    --pico-spacing: 0.75rem;
    --pico-block-spacing-vertical: 0.75rem;
    --pico-typography-spacing-vertical: 0.75rem;
    --pico-form-element-spacing-vertical: 0.5rem;
}

footer.container {
    text-align: center;
    color: var(--muted-color);
}

footer.container div {
    padding: 1ex;
}

footer.container img {
    height: 2.5ex;
}

/* Links carry their own color per component; underline only on hover. */
a {
    --pico-text-decoration: none;
}

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

blockquote {
    border-radius: 1px;
}

blockquote p {
    margin: 0;
}

/* Pico renders inline code as a padded inline-block, too heavy for metadata. */
:not(pre) > code {
    padding: 0 0.25em;
}

body {
    font-family: var(--main-font);
    font-size: var(--font-size);
    color: var(--text-color);
    line-height: 1.428571429;
}

/* Header and main only supply the container; keep the vertical rhythm tight. */
body > header,
body > main {
    padding-block: 1ex;
}

/* Hourly traffic counter tucked into the page corner (see forum/traffic.py). */
.visitor_count {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 3px;
    color: var(--muted-color);
    background-color: white;
    font-size: 0.7em;
    border-radius: 1px;
}

.bt {
    border-bottom: 1px solid var(--light-grey);
}

/* Pico .grid stacks below 768px; above that use ~2/3 content, 1/3 sidebar. */
@media (min-width: 768px) {
    .page_grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }
    .page_grid_half {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .user_grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
    .grid3x1 {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }
    .grid1x2 {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }
}

.line_item {
    padding: 1ex 1ex 1ex 0px;
    border-bottom: 1px solid var(--light-grey);
}

ul li {
    list-style: disc;
  }

/* Sidebar activity widgets: recent locations, later votes/awards/etc. */
.sidebar_block {
    margin-left: 2rem;
    margin-bottom: 1.25rem;
}

.sidebar_block > .title {
    margin: 0 0 1em;
    color: var(--text-color);
    font-size: 1.15rem;
    font-weight: 700;
}

.sidebar_block > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar_block > ul > li {
    margin: 0;
    padding: 0;
    padding-bottom: 0.1em;
    list-style: none;
}

.sidebar_block > ul > li + li {
    margin-top: 0.35rem;
}

.sidebar_block > ul > li > a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25em 0.5em;
}

.sidebar_block > ul > li > a:hover {
    color: var(--link-color);
    text-decoration: none;
}

/* Icon and title are one run of text, so the line wraps like a sentence. */
.sidebar_block.recent_votes > ul > li > a {
    display: inline;
    color: var(--link-color);
}

.sidebar_block.recent_votes i {
    margin-right: 0.35em;
}

/* Title and by line run as one sentence, the excerpt sits below them. */
.sidebar_block.recent_replies > ul > li + li {
    margin-top: 0.75rem;
}

/* Override flex list links and .post_author inline-flex so the line shares one baseline. */
.sidebar_block.recent_replies > ul > li > .post_author,
.sidebar_block.recent_replies > ul > li > .reply_title {
    display: inline;
    vertical-align: baseline;
    align-items: unset;
    gap: unset;
}

.recent_replies .reply_title {
    color: var(--link-color);
}

.recent_replies .reply_content {
    color: var(--muted-color);
}

/* Title on its own line, bold, default link color; excerpt and by-line below it. */
.sidebar_block.related_posts > ul > li + li {
    margin-top: 0.75rem;
}

.sidebar_block.related_posts > ul > li > a {
    display: block;
    font-weight: 700;
}

.related_posts .related_excerpt {
    color: var(--muted-color);
}

.sidebar_block time {
    color: var(--muted-color);
}

.sidebar_block > p {
    margin: 0;
    color: var(--muted-color);
}

#navbar-logo {
    display: flex;
    align-items: flex-end;
}

nav {
    border-bottom: 1px solid var(--light-grey);
}

#navbar-logo img {
    /* Explicit height: SVG has viewBox only, so width:auto + max-height collapses to 0. */
    height: 4rem;
    width: auto;
    object-fit: contain;
}

nav li {
    display: flex;
    font-size: 1.1rem;
}

nav li > a,
nav li > form {
    display: flex;
    align-items: flex-end;
}

nav ul {
    align-items: stretch;
}

nav li>a:hover {
    background-color: var(--light-grey);
}

.link_button {
    border: 1px solid var(--light-grey);
    border-radius: 3px;
    margin-left: calc(var(--pico-nav-link-spacing-horizontal) * -1 + 5px);
}


.nav_stack {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    gap: 0.5rem;
}

.nav_stack:hover {
    color: var(--link-color);
    text-decoration: none;
}

.navbar_user {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--alt-font);
    font-weight: 600;
}
    
.navbar_user_image {
    width: 2em;
    height: 2em;
    border-radius: 50%;
}

/* Secondary navbar for logged in users. Only the bottom-most nav keeps the rule. */
nav:has(+ .user_nav) {
    border-bottom: none;
}

.user_nav {
    position: relative;
    padding-block: 0;
    border-bottom: 1px solid var(--light-grey);
    background-color: transparent;
}

/* Plain divs instead of ul/li: Pico styles nav ul/li directly, which fought
   the tab look. Divs sidestep that. */
.user_nav_list {
    display: flex;
    width: 100%;
    margin: 0;
    gap: 1ex;
    align-items: flex-end;
}

/* Every tab is outlined and capped with rounded corners, like a folder tab,
   even before it's selected. */
.user_nav_item {
    position: relative;
    display: flex;
    flex: 1;
    font-size: 1rem;
    border: 1px solid var(--light-grey);
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: var(--form-bg-color);
}

.user_nav_item > a {
    display: flex;
    flex: 1;
    margin: 0;
    padding: 0.6rem 0.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    color: var(--text-color);
}

.user_nav_item > a:hover {
    background-color: transparent;
    color: var(--link-color);
    text-decoration: none;
}

/* Pops when there are unread messages; colors are tunable via the variables. */
.user_nav_item.has_unread > a {
    color: var(--new_message_navbar_fg);
    font-weight: bold;
}

.user_nav_item.has_unread > a:hover {
    color: var(--new_message_fg);
}

/* Active tab: pops in the page background and bridges the nav's bottom
   border so it reads as open toward the content below. */
.user_nav_item.active {
    background-color: var(--pico-background-color);
}

.user_nav_item.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background-color: var(--pico-background-color);
}

.user_nav_item.active > a {
    color: var(--active-tab-color);
    font-weight: bold;
}

/* Flash messages. Pico has no notification component, so this is all local. */
.message_list {
    margin-bottom: 1rem;
}

.message_item {
    padding: 0.5rem 0.75rem;
    border-radius: 3px;
    border: 1px solid var(--light-grey);
    margin-bottom: 1ex;
    background-color: var(--form-bg-color);
}

.message_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25em 0.35em;
}

.message_text > .block {
    align-self: stretch;
}

.message_unread {
    background-color: var(--new_message_item_bg);
    color: var(--new_message_fg);
}

.message {
    position: relative;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 3px;
    background-color: var(--light-grey);
}

.message.info {
    background-color: #eef6fc;
}

.message.success {
    background-color: #effaf3;
}

.message.warning {
    background-color: #fffbeb;
}

.message.error {
    background-color: #feecf0;
}

.message_close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted-color);
    font-size: 1.2em;
    line-height: 1;
}

/* Transient toasts, placed next to the clicked element by biostar.js. */
.toast {
    position: absolute;
    z-index: 100;
    max-width: 20rem;
    padding: 0.4rem 0.7rem;
    border-radius: 3px;
    background-color: #8f2c47;
    color: #fff;
    font-size: 1em;
    line-height: 1.3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    animation: toast_fade 2.5s ease forwards;
}

@keyframes toast_fade {
    0% { opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* Login and, later, signup. */
.auth_box {
    max-width: 26rem;
    margin: 2rem auto;
    border: 1px solid var(--light-grey);
    border-radius: 3px;
    box-shadow: none;
    background-color: var(--form-bg-color);
    margin-bottom: 5ex;
}

.auth_box > div {
    padding: 1ex;
}

.auth_title {
    padding: 1ex;
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 1px solid var(--light-grey);
}

.auth_box label {
    font-size: 1em;
    font-weight: 600;
}

.auth_error {
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
    color: var(--error-color);
    font-size: 0.9em;
}

.auth_social_list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 1.1rem;
}

.auth_social_list a {
    display: block;
}

.auth_divider {
    max-width: 26rem;
    margin: 0 auto;
    text-align: center;
}

.g-recaptcha {
    margin: 0.75rem 0 1rem;
}

/* Content submission forms: post creation and, later, editing. */
.new_post {
    padding: 1.5rem;
    margin: 1rem 0 2rem 0;
    border: 1px solid var(--light-grey);
    border-radius: 3px;
    box-shadow: none;
    max-width: 70rem;
    margin-inline: auto;
    background-color: var(--form-bg-color);
}

.answer_form {
    border: 1px solid var(--light-grey);
    border-radius: 3px;
    background-color: var(--lighter-grey);
}

button[type="submit"] {
    width: fit-content;
}

.form_title {
    margin-bottom: 1.25rem;
    font-size: 1.15em;
    font-weight: 600;
}

.form_box label {
    font-size: 1em;
    font-weight: 600;
}

.form_box small {
    display: block;
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
    color: var(--muted-color);
}

.form_error {
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
    color: var(--error-color);
    font-size: 0.9em;
}

.icon_select_row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.icon_select_row select {
    width: auto;
    margin-bottom: 0;
}

.icon_preview {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

[role="search"] {
    margin-bottom: 0px;
}

/* Search box: flatten Pico's [role=search] group (pill radii + focus ring)
   into a plain flex row with square-ish corners. */
.search_form_wrap {
    display: flex;
    justify-content: center;
}

.search_form {
    --pico-border-radius: 3px;
    --pico-group-box-shadow: none;
    display: flex;
    gap: 0.5rem;
    width: 100%;
    max-width: 75%;
    border-radius: 3px;
    box-shadow: none;
}

.search_form > * {
    border-radius: 3px;
}

.search_form input[type="search"] {
    --pico-border-radius: 3px;
    flex: 1;
    margin-bottom: 0;
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
}

.search_form input[type="search"]:focus {
    --pico-box-shadow: none;
    border-color: var(--muted-color);
    box-shadow: none;
}

.search_form button {
    width: fit-content;
    flex: 0 0 auto;
    margin-bottom: 0;
    padding-inline: 1rem;
    border: 1px solid var(--light-grey);
    border-radius: 3px;
    background: var(--lighter-grey);
    color: var(--text-color);
    white-space: nowrap;
}

.search_form button:hover {
    background: var(--light-grey);
}

.block {
    padding: 1ex;
    display: block;
}

.debug {
    margin-top: 1rem;
    padding: 1ex;
    border-radius: 3px;
    background-color: var(--form-bg-color);
}

.post_item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--light-grey);
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--alt-font);
}

/* Last post item has no bottom border */
.post_item:last-child {
    border-bottom: none;
}

/* Post.css maps the post status onto these classes. Open posts get no styling. */
.post_item.pending {
    background-color: #fffbeb;
}

.post_item.off-topic,
.post_item.closed {
    background-color: #f4f4f4;
}

.post_item.deleted,
.post_item.spam {
    background-color: #fff1f0;
    opacity: 0.7;
}

.counts {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
}

/* Box counter */
.count_box {
    display: flex;
    width: 3.5em;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
    color: #3b4045;
    line-height: 1;
    padding: 4px 4px 4px 4px;
}

.count_box.vote_count {
    background-color: #e8e8e8;
}

.post_item.has_answers .answer_count {
    background-color: var(--has-answers_bg);
    color: var(--has-answers_fg);
}

.post_item.open .answer_count {
    background-color: var(--open_bg);
    color: var(--open_fg);
}

/* Type colors take precedence over the status colors above. */
.post_item.news .answer_count {
    background-color: var(--news_bg);
    color: var(--news_fg);
}

.post_item.forum .answer_count {
    background-color: var(--forum_bg);
    color: var(--forum_fg);
}

.post_item.job .answer_count {
    background-color: var(--job_bg);
    color: var(--job_fg);
}

.post_item.tool .answer_count {
    background-color: var(--tool_bg);
    color: var(--tool_fg);
}

.post_item.herald .answer_count {
    background-color: var(--herald-bg);
    color: var(--herald-fg);
}


.box_value {
    font-size: 1.15em;
    font-weight: 900;
    padding-bottom: .2em;
}

.box_label {
    font-size: 0.80em;
    font-weight: 500;
}

.post_info {
    flex: 1;
    min-width: 0;
}

.post_title {
    margin-top: 0;
    margin-bottom: 0.25rem;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.428571429;
    overflow-wrap: anywhere;
}

.post_title a {
    color: var(--link-color);
}

.post_foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em 0.75em;
}

.thread_view .post_foot {
    padding-top: 1ex;
    padding-bottom: 1ex;
}

.post_foot .tags {
    margin-bottom: 0;
}

/* Action links stay left, the user line is pushed to the right edge. */
.post_foot .post_meta {
    margin-left: auto;
}

.foot_links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em 0.35em;
}

[role="search"] > :last-child {
    border-radius: 3px;
  }

.post_meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em 0.35em;
    color: var(--muted-color);
    font-size: 1rem;
}

.post_author {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: #0a73c0;
    vertical-align: middle;
}

.user_inline_image {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.post_empty {
    padding: 2rem 0;
    color: #5f6a72;
    text-align: center;
}

.post_snippet {
    margin: 0.25rem 0;
    color: #5f6a72;
    line-height: 1.4;
}

.post_snippet mark {
    background-color: #fff3b8;
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.paginator {
    display: block;
    width: 100%;
    /* Drop the global nav bottom border; place classes own the edge. */
    border-bottom: none;
}

.paginator_top {
    border-bottom: 1px solid var(--light-grey);
}

.paginator_bottom {
    border-top: 1px solid var(--light-grey);
}


.paginator > ul {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.paginator_prev {
    justify-self: start;
}

.paginator_next {
    justify-self: end;
}

.paginator_control a,
.paginator_control .paginator_disabled {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.paginator_control a {
    text-decoration: none;
}

.paginator_control a:hover {
    text-decoration: none;
}

.paginator_disabled {
    color: #b0b8bd;
}

.paginator_status {
    justify-self: center;
    color: #5f6a72;
    text-align: center;
}

.thread_post {
    padding: 1rem 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--light-grey);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.thread_post > .post_head {
    padding: 0.5em 0 0.2em;
    margin-top: 0;
    margin-bottom: 1em;
    border-bottom: 1px solid var(--light-grey);
    color: var(--text-color);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.05);
}

.thread_content {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
}

.thread_score {
    display: flex;
    min-width: 3.75rem;
    flex-direction: column;
    align-items: center;
    color: var(--text-color);
    text-align: center;
}


.thread_score .score_value {
    margin-bottom: 0.5rem;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1;
}

.thread_score .score_label {
    color: var(--muted-color);
    font-size: smaller;
}

/* Icon only toggle; green once the user has cast that vote. */
.vote_button {
    width: auto;
    padding: 0.15rem 0.3rem;
    border: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    color: var(--muted-color);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.m0 {
    margin: 0;
}

.m5 {
    margin-top: 0.5rem;
}

.vote_button:hover,
.vote_button:focus {
    background: none;
    color: var(--link-color);
}

.vote_button.voted,
.vote_button.voted:hover {
    color: #21ba45;
}

.Spammer {
    background-color: #fff1f0;
    padding: 1rem;
}
.thread_main {
    min-width: 0;
    flex: 1;
}

.post_body {
    line-height: 1.428571429;
    overflow-wrap: anywhere;
}

.author_box {
    float: right;
    width: 10rem;
    margin: 0 0 0.5em 1em;
    padding: 0.5em;
    border: 1px solid var(--light-grey);
    border-radius: 4px;
    text-align: center;
    font-size: 0.9em;
    background-color: var(--lighter-grey);
}

.author_box > div {
    margin-bottom: 0.5ex;
}

.author_box > a {
    color: var(--link-color);
    text-decoration: none;
}

.author_box img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--light-grey);
}

.author_box .author_name {
    margin-top: 0.3em;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.author_box .author_score {
    color: var(--muted-color);
    font-size: smaller;
}

.community_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 9.5rem);
    gap: 1em;
    justify-content: center;
    margin: 1em 0;
}

.community_card {
    display: block;
    width: 9.5rem;
    height: 11.5rem;
    padding: 0.75em;
    border: 1px solid var(--light-grey);
    border-radius: 4px;
    color: var(--link-color);
    text-decoration: none;
    text-align: center;
}

.community_card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--light-grey);
}

.community_card .community_name,
.community_card .community_score,
.community_card .community_location {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.community_card .community_name {
    margin-top: 0.5em;
    color: var(--text-color);
    font-weight: 600;
}

.community_card .community_score,
.community_card .community_location {
    color: var(--muted-color);
    font-size: smaller;
}

.comment_body {
    border-radius: 1px;
}

h1 {
    font-size: 1.2em;
    margin-top: 1ex;
}

h2 {
    font-size: 1.1em;
    margin-top: 1ex;
}

.post_body h1,
.comment_body h1 {
    font-size: 1.2em;
}

.post_body h2,
.comment_body h2 {
    font-size: 1.3rem;
}

.post_body blockquote,
.comment_body blockquote {
    padding: 1ex;
    margin: 1ex;
    border-left: 5px solid #f4d2b5;
    background-color: #fff6ee;
}

.post_body pre,
.comment_body pre {
    padding: 1em;
    overflow-x: auto;
    background: #eeeeee;
}

.post_body pre > code,
.comment_body pre > code {
    padding: 0;
}

.post_body :not(pre) > code,
.comment_body :not(pre) > code {
    color: orangered;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pad1 {
    padding-bottom: 1ex;
}

.tag {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 3px;
    background-color: var(--tag-background);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    color: var(--tag-color);
    font-size: 1em;
    font-weight: 400;
    line-height: 1.428571429;
}

.tag.alert {
    background-color: #feecf0;
    color: var(--error-color);
}

.thread_post.accepted {
    border-left: 0;
    padding-left: 0;
}

.accepted_mark {
    margin-top: 0.35rem;
    color: #21ba45;
    font-size: 1.25rem;
}

.thread_answers {
    margin-top: 1rem;
    margin-bottom: 0;
}

.section_head {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    font-size: 1.2rem;
    font-weight: 700;
}

.mod_log_list {
    margin-bottom: 1rem;
}

.mod_log_item {
    padding: 0.5rem 0.75rem;
    border-radius: 3px;
    border: 1px solid var(--light-grey);
    margin: 1ex 0;
    background-color: var(--form-bg-color);
}

.mod_log_item time {
    margin-right: 0.35em;
    color: var(--pico-muted-color);
}

.comment_list {
    margin-left: 4.25em;
}

.comment_branch {
    padding-left: 0;
    border-left: 0;
}

.comment_branch > .comment_list {
    margin-left: 2em;
}

.thread_comment {
    display: flex;
    gap: 0.5em;
    padding: 1ex;
    margin-bottom: 0.3em;
    border-radius: 3px;
    background: var(--comment-background);
    box-shadow: none;
    color: var(--comment-color);
}

.comment_score {
    display: flex;
    min-width: 1.5em;
    flex-direction: column;
    align-items: center;
    color: var(--comment-color);
    font-size: 100%;
    font-weight: 700;
    text-align: center;
}

.comment_score .vote_button {
    font-size: 0.85rem;
    margin-bottom: 1ex;
}

.comment_score .score_value {
    line-height: 1;
}

.comment_main {
    min-width: 0;
    flex: 1;
}

.comment_body {
    margin-bottom: 0.25rem !important;
    line-height: 1.428571429;
    overflow-wrap: anywhere;
}

/*
 * Marks freshly inserted content so the eye can find it in the tree.
 * A wide inset shadow tints the whole box without touching its own
 * background, so the element keeps its normal colour once this ends.
 *
 * Comment flashes live on #branch-{uid}; the visible tint is on the
 * article inside, which owns the comment background.
 */
@keyframes flash {
    from {
        box-shadow: inset 0 0 0 100vmax rgba(255, 200, 40, 0.55);
    }
    to {
        box-shadow: inset 0 0 0 100vmax rgba(255, 200, 40, 0);
    }
}

article.error {
    padding: 1rem;
    border: 1px solid var(--light-grey);
    background-color: var(--warning-color);
    border-radius: 3px;
    box-shadow: none;
}

.error h1 {
    font-size: 1.2rem;
}

.flash:not(.comment_branch),
.comment_branch.flash > .thread_comment {
    animation: flash 2s ease-out;
}

/* Kept as a run of the animation so the cleanup in the script still fires. */
@media (prefers-reduced-motion: reduce) {
    .flash:not(.comment_branch),
    .comment_branch.flash > .thread_comment {
        animation-duration: 1ms;
    }
}

.label {
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
  margin: 0 .14285714em;
  margin-left: 0.142857em;
  background-color: var(--lighter-grey);
  padding: 5px;
  margin: 0;
  color: rgba(0,0,0,.6);
  text-transform: none;
  font-weight: 700;
  border: 1px solid var(--light-grey);
  border-radius: 4px;

}

/* Small button in the post foot; opens the comment form in the slot below. */
/* Looks like a tag, acts like a button. */
.comment_add {
    width: fit-content;
    margin: 0;
    border-top: 0;
    border-left: 0;
    box-shadow: none;
    font-size: 0.7em;
    line-height: 1.428571429;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);

}

.comment_add:hover {
    background-color: var(--tag-background);
    color: var(--link-color);
}

.foot_links a.permalink {
    width: fit-content;
    font-size: 0.7em;
    line-height: 1.428571429;
    color: rgba(0, 0, 0, .6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.foot_links a.permalink:hover {
    background-color: var(--tag-background);
    color: var(--link-color);
}

/* Slot the comment form is swapped into; collapses while it is closed. */
.comment_slot {
    margin: 0.5em 0;
    margin-left: 4.25em;
}

.comment_branch > .comment_slot {
    margin-left: 2em;
}

.comment_slot:empty {
    margin: 0;
}


.comment_form > textarea {
    margin-bottom: 0.4em;
    padding: 1ex;
}

/* Pico stacks border-color + box-shadow on focus; drop the ring for an even 1px edge. */
.comment_form > textarea:focus {
    --pico-box-shadow: none;
    border-color: var(--light-grey);
}

.post_edit {
    background-color: var(--form-bg-color);
    padding: 1rem;
    margin: 1rem;
}
.post_edit_actions {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.5em;
}

.post_edit_actions button {
    width: fit-content;
    margin: 0;
}

.post_edit_actions .post_delete_button,
.comment_form_actions .post_delete_button {
    margin-left: auto;
}

.post_deleted {
    color: var(--muted-color);
    font-style: italic;
}

.comment_form_actions {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.comment_form_actions > button {
    width: fit-content;
    margin: 0;
    padding: 0 0.8em;
    font-size: 0.8rem;
    line-height: 1.9;
}

.comment_form_hint {
    margin: 0 0 0 auto;
    color: #999;
}

.user_info {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--light-grey);
}

.user_card {
    text-align: center;
}

.moderator_actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1ex;
}

.moderator_actions form {
    margin-bottom: 0;
}

.moderate_buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.moderate_help {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    list-style-position: inside;
    text-align: left;
    color: var(--pico-muted-color);
}

.moderate_form {
    margin-bottom: 0;
}

.moderate_btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    color: #fff;
    border-color: transparent;
}

.moderate_suspend {
    background-color: var(--pico-color-amber-550, #d97706);
}

.moderate_spam {
    background-color: var(--pico-color-orange-600, #ea580c);
}

.moderate_ban {
    background-color: var(--pico-color-red-600, #dc2626);
}

.moderate_reinstate {
    background-color: var(--pico-color-green-600, #16a34a);
}

.moderate_login_as {
    background-color: var(--pico-color-blue-600, #2563eb);
}

.moderate_cancel {
    background-color: var(--pico-color-grey-500, #6b7280);
}

.user_image {
    display: block;
    width: 150px;
    height: 150px;
    margin-inline: auto;
    border-radius: 50%;
    background-color: var(--light-grey);
}

.user_name {
    margin-top: 1em;
    margin-bottom: 0.2em;
    color: var(--text-color);
    font-size: 130%;
    font-weight: 700;
}

.user_score .score_value {
    color: var(--text-color);
    font-size: 130%;
    font-weight: 700;
}

.user_score {
    color: var(--muted-color);
}

.user_meta {
    margin: 0.75em auto 0;
    font-family: var(--alt-font);
}

.user_meta > div {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 2px 0;
}

.user_meta dt {
    margin: 0;
    color: var(--muted-color);
    white-space: nowrap;
}

.user_meta dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.user_text {
    overflow-wrap: anywhere;
}

.user_posts {
    margin-top: 1rem;
    margin-bottom: 0;
}

@media screen and (max-width: 600px) {
    .post_item {
        align-items: stretch;
        flex-direction: column;
        gap: 0.75rem;
    }

    .count_box {
        width: auto;
        min-width: 4.25rem;
        min-height: 2.75rem;
        padding: 0.25rem 0.6rem;
    }

    .thread_content {
        gap: 0.5em;
    }

    .comment_list {
        margin-left: 1em;
    }

    .comment_branch > .comment_list {
        margin-left: 1em;
    }

    .comment_slot:not(:empty),
    .comment_branch > .comment_slot:not(:empty) {
        margin-left: 1em;
    }
}