h1.thread-title {
    grid-column: breakout;
    font-size: 1.666rem;
    text-align: left;
    text-wrap: initial;
    padding-inline: 2.4rem var(--gaps);
    margin-block-end: var(--gutter);
    padding-bottom: 1.2rem;
    display: flex;
    gap: var(--smol-gutter);
    align-items: end;
    justify-content: space-between;

    small {
        font-size: .666em;
    }
}

:root {
    --reply-aside-width: 8rem;
}

#categories,
#threads,
#replies {
    grid-column: breakout;
    margin-block: var(--gutter);
    display: grid;
    gap: var(--gutter);
}

.unreadbelow,
.tumbleweeds{
    display: flex;
    align-items: center;
    color: var(--color-text-primary);
    user-select: none;
}
.tumbleweeds {
    color: var(--color-text-secondary)
}
    .unreadbelow::before,
    .tumbleweeds::before {
        content: '';
        width: calc(var(--reply-aside-width) + var(--gutter));
        margin-inline-end: var(--gutter);
    }
    .unreadbelow::after,
    .tumbleweeds::after {
        content: '';
        flex-grow: 1;
        margin-inline-start: var(--gutter);
    }
    /* unreadbelow additionally gets a neat line */
    .unreadbelow::after, .unreadbelow::before {
        background: var(--color-shadows);
        display: inline-block;
        height: .1em;
    }

.thread-actions {
    grid-column: breakout;
    display: flex;
    margin: 0;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
}

ul.pager {
    font-size: var(--smol-font-size);
    --gutter: .666em;
}
    ul.pager li > * {
        width: 3em;
        aspect-ratio: 1;
        display: block;
        align-content: center;
        text-align: center;
        padding: 0;
    }
    ul.pager li.MarkupPagerNavPrevious > *,
    ul.pager li.MarkupPagerNavNext > * {
        height: 3em;
        width: 5em;
        aspect-ratio: initial;
    }
    ul.pager li > a {
        transition: transform .666s;
    }
    ul.pager li > a:hover {
        transition: all .1s;
        transform: scale(1.1333);
    }
    ul.pager li > span {
        user-select: none;
        font-weight: bold;
        transform: scale(1.1333);
    }


/**
 * x-reply-form-wrapper only wraps the reply form at the bottom of a thread.
 * It’s not there when editing a reply.
 */
x-reply-form-wrapper {
    grid-column: breakout;
    display: flex;
    flex-flow: row;
    align-items: start;
    gap: var(--gutter);
    border: 1px solid var(--color-secondary-25);
}
x-reply-form-wrapper:focus-within {
    border-color: var(--color-secondary);
    box-shadow: 0 0 6px var(--color-secondary-25);
}
    x-reply-form-wrapper > img {
        width: 3.333rem;
        aspect-ratio: 1;
        border-radius: var(--border-radius);
    }

#poll_inputs:empty {
    display: none;
}
#poll_inputs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
    align-items: start;
    margin-block-start: var(--gutter);
}
#poll_inputs > fieldset {
    border-radius: var(--border-radius);
    padding: var(--gutter);
    gap: var(--smol-gutter);
    background: var(--color-secondary-25);
}
#poll_inputs input[name$="[question]"] {
    font-weight: bold;
}
#poll_inputs ol li:not(:last-child) {
    margin-block-end: var(--smol-gutter);
}
#poll_inputs ol li input {
    width: calc(100% - 2em) !important;
}
#poll_inputs ol {
    list-style: upper-alpha;
    padding-inline-start: 2em;
}
#poll_inputs > fieldset + a.addPoll {
    align-self: center;
    width: auto;
    justify-self: center;
}
#poll_inputs button.addOption {
    margin-inline: auto;
    width: auto;
}

@media only screen and (min-width: 800px)
{
    #poll_inputs a.addPoll:first-child {
        transform: translateY(1.5em);
        position: absolute;
    }
    #poll_inputs:has(.addPoll:first-child) {
        margin-block-start: 0;
    }
}


.replyform {
    flex-grow: 1;
}
    .replyform textarea,
    .replyform input[name='title'],
    .replyform select,
    #poll_inputs input[type='text'] {
        width: 100%;
        margin: 0;
        border-radius: var(--border-radius);
        border: 1px solid var(--color-secondary-25);
        background: white;
    }
    .replyform input[name='title'] {
        font-weight: 600;
        margin-block-end: var(--gutter);
    }
    .replyform textarea {
        display: block;
        border-block-end: 0;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        max-height: 60vh;
    }
    .replyform textarea:focus,
    .replyform textarea:focus-within,
    .replyform textarea:focus-visible {
        outline: none;
    }
    .replyform x-actions {
        display: flex;
        flex-direction: row;
        justify-content: end;
        margin-block-start: var(--gutter);
        gap: var(--gutter);
        align-items: baseline;
    }

    x-attachments  {
        background: var(--color-secondary-25);
        display: block;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        padding: var(--smol-gutter);
    }
    x-attachments ul {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--smol-gutter);
        margin-block-start: var(--smol-gutter);
    }
    x-attachments ul:empty {
        margin: 0;
    }
    x-attachments ul li {
        font-size: var(--smol-font-size);
        padding: .333rem;
        background: var(--color-bg-text);
        box-shadow: 0 2px 3px var(--color-shadows);
        border-radius: var(--border-radius);
        text-align: center;
        transition: opacity .666s;
        position: relative;
        min-width: 0; /* fixes weird grd behaviour with white-space: nowrap inside items */
    }
    x-attachments ul li[data-status="pending"],
    x-attachments ul li[data-delete] img {
        opacity: .5;
    }
    x-attachments ul li[data-delete] {
        background: #ddd;
        color: var(--color-text-secondary);
    }
    x-attachments ul li p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .333rem;
        padding-inline: .333rem;
        line-height: var(--line-height-tight);
        margin-block: var(--smol-gutter);
    }
    x-attachments ul li p strong {
        overflow: hidden;
        max-height: 2lh;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-word;
        height: 1.1lh; /*fixes clipped descenders*/
    }
    x-attachments ul li x-buttons {
        visibility: hidden;
        opacity: 0;
        transition: opacity .333s;
        position: absolute;
        top: 30%;
        left: 0;
        right: 0;
        display: flex;
        gap: var(--smol-gutter);
        justify-content: center;
    }
    x-attachments ul li:hover x-buttons {
        visibility: visible;
        opacity: 1;
    }
    x-attachments ul li x-buttons button {
        font-size: var(--smol-font-size) !important;
    }
    x-attachments ul li:hover x-buttons .delete {
        background-color: var(--color-error);
        color: var(--color-bg-text);
    }
    x-attachments ul li[data-status="error"] p strong {
        color: var(--color-error);
        text-decoration: line-through;
    }
    x-attachments ul li[data-status="error"] insertImgMarkdown {
        display: none;
    }
    x-attachments ul li[data-delete] p strong {
        text-decoration: line-through;
    }
    x-attachments ul li img,
    x-attachments ul li .large-icon
    {
        display: block;
        width: 100%;
        aspect-ratio: 16/10;
        object-fit: contain;
        align-content: center;
        margin-block: var(--smol-gutter);
    }

    x-attachments ul li x-size,
    x-attachments ul li x-status {
        display: inline-block;
        color: var(--color-text-secondary);
        flex-shrink: 0;
    }
    x-attachments ul li[data-status='pending'] x-status {
        animation: spin 1s steps(8) infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }










@media only screen and (max-width: 800px)
{
    h1.thread-title {
        padding-inline: var(--gutter);
    }

    ul.pager li {
        display: none;
        aspect-ratio: initial;
    }
    ul.pager li > * {
        width: auto;
        aspect-ratio: initial;
        min-width: 2.5em;
        min-height: 2.5em;
    }

    ul.pager li.MarkupPagerNavOn,
    ul.pager li:has(+ .MarkupPagerNavOn),
    ul.pager li.MarkupPagerNavOn + li,
    ul.pager li.MarkupPagerNavSeparator,
    ul.pager li.MarkupPagerNavPrevious,
    ul.pager li.MarkupPagerNavFirstNum,
    ul.pager li.MarkupPagerNavLastNum,
    ul.pager li.MarkupPagerNavNext {
        display: initial;
    }
    ul.pager li.MarkupPagerNavPrevious > *,
    ul.pager li.MarkupPagerNavNext > * {
        height: auto;
        width: auto;
    }

    :root {
        --reply-aside-width: 2.5rem;
    }

    
    #poll_inputs {
        grid-template-columns: 1fr;
    }
    #poll_inputs .addPoll {
        width: auto;
        justify-self: center;
    }
}