*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: var(--space-none);
    padding: var(--space-3);
    background: var(--color-canvas);
    color: var(--color-text);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
}

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

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

[hidden] {
    display: none;
}

:where(textarea, select, input:not([type="button"], [type="checkbox"], [type="color"], [type="file"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"])) {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.page-shell {
    max-width: var(--size-page);
    margin-inline: auto;
    padding: var(--space-4);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-panel);
}

.page-shell__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    background: linear-gradient(var(--color-header), var(--color-header-end));
    border-radius: var(--radius-panel);
    color: var(--color-header-text);
}

.page-shell__brand {
    color: var(--color-header-text);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-strong);
    line-height: var(--line-height-tight);
}

.page-shell__brand:hover {
    color: var(--color-header-text);
}

.page-shell__description {
    margin: var(--space-1) var(--space-none) var(--space-none);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-strong);
}

.page-shell__search {
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-control);
    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
}

.page-shell__search input {
    width: var(--size-search);
    min-height: var(--size-control);
    padding: var(--space-none) var(--space-1);
    border: none;
    border-start-start-radius: var(--radius-control);
    border-end-start-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-small);
}

.page-shell__search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control);
    border: none;
    border-inline-start: var(--border-width) solid var(--color-border-strong);
    background: linear-gradient(var(--color-button), var(--color-button-end));
    color: var(--color-text-muted);
    cursor: pointer;
}

.page-shell__search-button:last-child {
    border-start-end-radius: var(--radius-control);
    border-end-end-radius: var(--radius-control);
}

.page-shell__search-button:hover {
    color: var(--color-link-hover);
    text-decoration: none;
}

.navbar {
    margin-block-start: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--color-navbar);
    border-radius: var(--radius-panel);
    font-size: var(--font-size-small);
}

.navbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.navbar__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin: var(--space-none);
    padding: var(--space-1) var(--space-none);
    list-style: none;
}

.navbar__links--end {
    margin-inline-start: auto;
}

.navbar__link {
    padding: var(--space-none);
    border: none;
    background: none;
    color: var(--color-link);
    font: inherit;
    cursor: pointer;
}

.navbar__link:hover {
    color: var(--color-link-hover);
}

.navbar__member {
    color: var(--color-action);
    font-weight: var(--font-weight-strong);
}

.navbar__home {
    font-weight: var(--font-weight-strong);
}

.navbar__note {
    color: var(--color-text-muted);
}

.scheme-toggle {
    display: inline-flex;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-control);
    overflow: hidden;
}

.scheme-toggle__choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control);
    min-height: var(--size-control);
    padding: var(--space-none);
    border: none;
    background: linear-gradient(var(--color-button), var(--color-button-end));
    color: var(--color-text-muted);
    font: inherit;
    cursor: pointer;
}

.scheme-toggle__choice + .scheme-toggle__choice {
    border-inline-start: var(--border-width) solid var(--color-border-strong);
}

.scheme-toggle__choice:hover {
    color: var(--color-link-hover);
}

.scheme-toggle__choice[aria-pressed="true"] {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.scheme-toggle__choice:focus-visible {
    outline: var(--border-width-focus) solid var(--color-focus);
    outline-offset: calc(var(--border-width-focus) * -1);
}

.navbar .breadcrumbs {
    margin-block-start: var(--space-1);
    padding-block: var(--space-1);
    border-block-start: var(--border-width) solid var(--color-surface);
}

.page-shell__main {
    padding-block: var(--space-2);
}

.page-shell__footer {
    margin-block-start: var(--space-2);
}

.page-shell__credit {
    margin: var(--space-3) var(--space-none) var(--space-none);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    text-align: center;
}

.skip-link {
    position: absolute;
    width: var(--space-none);
    height: var(--space-none);
    overflow: hidden;
    clip-path: inset(var(--size-clip));
}

.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    background: var(--color-surface-raised);
    color: var(--color-text);
    padding: var(--space-2);
}

.page-title {
    margin: var(--space-2) var(--space-none) var(--space-1);
    color: var(--color-text);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-tight);
}

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

.page-description {
    margin: var(--space-none) var(--space-none) var(--space-2);
    font-size: var(--font-size-small);
}

.back-link {
    margin: var(--space-3) var(--space-none);
    font-size: var(--font-size-small);
}

.visually-hidden {
    position: absolute;
    width: var(--space-none);
    height: var(--space-none);
    overflow: hidden;
    clip-path: inset(var(--size-clip));
}

.inline-form {
    display: inline-flex;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-block: var(--space-2);
}

.link-button {
    padding: var(--space-none);
    border: none;
    background: none;
    color: var(--color-link);
    font: inherit;
    cursor: pointer;
}

.link-button:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.board-tools {
    margin-block-end: var(--space-1);
    font-size: var(--font-size-small);
    text-align: end;
}

.alerts:not([hidden]) {
    margin-block-end: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-panel);
}

.alerts[data-tone="success"] {
    background: var(--color-notice-success-bg);
    color: var(--color-notice-success-text);
}

.alerts[data-tone="error"] {
    background: var(--color-notice-error-bg);
    color: var(--color-notice-error-text);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: var(--space-none);
    padding: var(--space-none);
    list-style: none;
    font-weight: var(--font-weight-strong);
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "›";
    margin-inline-end: var(--space-2);
    color: var(--color-text-muted);
}

.breadcrumbs span[aria-current] {
    color: var(--color-link);
}

.panel {
    margin-block-end: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border-radius: var(--radius-panel);
}

.panel__header {
    margin-block-end: var(--space-2);
    padding-block-end: var(--space-1);
    border-block-end: var(--border-width) solid var(--color-rule);
}

.panel__header h2 {
    margin: var(--space-none);
    color: var(--color-link);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-tight);
}

.panel__body > :first-child {
    margin-block-start: var(--space-none);
}

.panel__body > :last-child {
    margin-block-end: var(--space-none);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.forum-list {
    margin-block: var(--space-1) var(--space-3);
    padding: var(--space-none) var(--space-1) var(--space-1);
    background: linear-gradient(var(--color-header-end), var(--color-header));
    border-radius: var(--radius-panel);
}

.forum-list__header,
.forum-row,
.topic-row {
    display: grid;
    grid-template-columns: var(--size-row-icon) minmax(var(--space-none), 1fr) var(--size-forum-count) var(--size-forum-count) var(--size-forum-last);
    column-gap: var(--space-2);
}

.forum-list__header {
    align-items: center;
    padding: var(--space-2) var(--space-none) var(--space-1);
    color: var(--color-header-text);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
}

.forum-list__title {
    grid-column: 1 / 3;
    margin: var(--space-none);
    padding-inline-start: var(--space-1);
    font-size: var(--font-size-caption);
}

.forum-list__title a {
    color: var(--color-header-text);
}

.forum-list__column {
    text-align: center;
}

.forum-list__column:last-child {
    padding-inline-start: var(--space-2);
    text-align: start;
}

.forum-list__rows {
    background: var(--color-border-row);
}

.forum-list__empty {
    margin: var(--space-none);
    padding: var(--space-3);
    background: var(--color-row);
}

.forum-row,
.topic-row {
    align-items: stretch;
    background: var(--color-row);
    border-block-end: var(--border-width) solid var(--color-border-row);
}

.forum-row:nth-child(even),
.topic-row:nth-child(even) {
    background: var(--color-row-alt);
}

.forum-row:last-child,
.topic-row:last-child {
    border-block-end: none;
}

.forum-row__icon,
.topic-row__icon {
    display: grid;
    place-items: center;
    align-self: center;
    width: var(--size-row-icon);
    height: var(--size-row-icon);
    margin-inline-start: var(--space-2);
    border: var(--border-width) solid var(--color-link);
    border-radius: var(--radius-round);
    background: var(--color-surface);
    color: var(--color-link);
    font-size: var(--font-size-body);
}

.forum-row--unread .forum-row__icon,
.topic-row--unread .topic-row__icon {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.forum-row__main,
.topic-row__main {
    min-width: var(--space-none);
    padding: var(--space-2) var(--space-none) var(--space-2) var(--space-2);
}

.forum-row__title,
.topic-row__title {
    margin: var(--space-none);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-strong);
    line-height: var(--line-height-tight);
}

.forum-row__description,
.topic-row__meta {
    margin: var(--space-1) var(--space-none) var(--space-none);
    font-size: var(--font-size-small);
}

.forum-row__stats,
.topic-row__stats {
    position: absolute;
    width: var(--space-none);
    height: var(--space-none);
    margin: var(--space-none);
    overflow: hidden;
    clip-path: inset(var(--size-clip));
}

.forum-row__count,
.topic-row__count,
.forum-row__last,
.topic-row__last {
    margin: var(--space-none);
    padding: var(--space-2);
    border-inline-start: var(--border-width) solid var(--color-border-row);
    font-size: var(--font-size-small);
}

.forum-row__count,
.topic-row__count {
    text-align: center;
}

.unread-marker {
    margin: var(--space-1) var(--space-none) var(--space-none);
    color: var(--color-action);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-strong);
}

.forum-row .unread-marker,
.topic-row .unread-marker,
.topic-row .hot-marker {
    position: absolute;
    width: var(--space-none);
    height: var(--space-none);
    margin: var(--space-none);
    overflow: hidden;
    clip-path: inset(var(--size-clip));
}

.topic-row--hot .topic-row__icon {
    border-color: var(--color-action);
    color: var(--color-action);
}

.forum-row__moderators {
    margin: var(--space-1) var(--space-none) var(--space-none);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.last-post {
    display: flex;
    flex-direction: column;
    gap: var(--space-none);
    line-height: var(--line-height-body);
}

.last-post__subject {
    overflow: hidden;
    font-weight: var(--font-weight-strong);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.last-post__empty {
    color: var(--color-text-muted);
}

.board-time {
    margin: var(--space-2) var(--space-none) var(--space-none);
    font-size: var(--font-size-small);
}

.search-box {
    display: inline-flex;
    align-items: stretch;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
}

.search-box input {
    width: var(--size-search);
    min-height: var(--size-control);
    padding: var(--space-none) var(--space-1);
    border: none;
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-small);
}

.search-box__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control);
    border: none;
    border-inline-start: var(--border-width) solid var(--color-border-strong);
    border-start-end-radius: var(--radius-control);
    border-end-end-radius: var(--radius-control);
    background: linear-gradient(var(--color-button), var(--color-button-end));
    color: var(--color-text-muted);
    cursor: pointer;
}

.search-box__button:hover {
    color: var(--color-link-hover);
}

.jump-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.forum-jump {
    position: relative;
    margin-inline-start: auto;
    font-size: var(--font-size-small);
}

.forum-jump__toggle {
    list-style: none;
}

.forum-jump__toggle::-webkit-details-marker {
    display: none;
}

.forum-jump__menu {
    position: absolute;
    inset-block-end: 100%;
    inset-inline-end: var(--space-none);
    z-index: 2;
    min-width: var(--size-dropdown);
    max-height: var(--size-jump-menu);
    margin: var(--space-none) var(--space-none) var(--space-1);
    padding: var(--space-none);
    overflow-y: auto;
    list-style: none;
    background: var(--color-row);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-panel);
    white-space: nowrap;
}

.forum-jump__link {
    display: block;
    padding: var(--space-1) var(--space-2);
}

.forum-jump__link--top {
    background: var(--color-header);
    color: var(--color-header-text);
    font-weight: var(--font-weight-strong);
}

.forum-jump__link--top:hover {
    color: var(--color-header-text);
}

.forum-jump__link:hover,
.forum-jump__link[aria-current] {
    background: var(--color-row-alt);
}

.forum-jump__link--top:hover,
.forum-jump__link--top[aria-current] {
    background: var(--color-header-end);
}

.permission-list {
    margin: var(--space-none);
    padding: var(--space-none);
    list-style: none;
}

.group-legend {
    margin-block: var(--space-2) var(--space-4);
    font-size: var(--font-size-small);
}

.group-legend h2 {
    display: inline;
    margin: var(--space-none);
    font-size: var(--font-size-small);
    font-style: italic;
    font-weight: var(--font-weight-body);
}

.group-legend h2::after {
    content: ":";
}

.group-legend ol {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: var(--space-none);
    padding: var(--space-none) var(--space-1);
    list-style: none;
}

.group-legend li {
    font-style: italic;
}

.group-legend li:not(:last-child)::after {
    content: ",";
}

.badge {
    display: inline-block;
    min-width: var(--size-icon);
    margin-inline-start: var(--space-1);
    padding: var(--space-none) var(--space-1);
    border-radius: var(--radius-control);
    background: var(--color-action);
    color: var(--color-accent-text);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-strong);
    text-align: center;
}

.notification-menu {
    min-width: var(--size-dialog);
    padding: var(--space-none);
}

.notification-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2);
    border-block-end: var(--border-width) solid var(--color-border);
}

.notification-menu .notification-menu__header button {
    width: auto;
    padding: var(--space-none);
}

.notification-menu__push {
    border-block-end: var(--border-width) solid var(--color-border);
}

.dropdown__menu .notification-menu__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-none);
    border-block-end: var(--border-width) solid var(--color-border);
}

.notification-menu__item--unread {
    background: var(--color-row);
}

.notification-menu__title {
    font-weight: var(--font-weight-strong);
}

.notification-menu__when {
    color: var(--color-text-muted);
}

.notification-menu__empty {
    margin: var(--space-none);
    padding: var(--space-2);
}

.dropdown__menu .notification-menu__all {
    justify-content: center;
}

@media (max-width: 43.75em) {
    .dropdown--end .notification-menu {
        position: fixed;
        inset-inline: var(--space-2);
        min-width: auto;
    }
}

.action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block: var(--space-1);
}

.action-bar__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.action-bar__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
    font-size: var(--font-size-small);
}

.action-bar__count {
    margin: var(--space-none);
    color: var(--color-text-muted);
}

.topic-posts {
    margin-block: var(--space-1);
}

.live-replying,
.live-new-replies {
    margin-block: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-style: italic;
}

.live-replying:empty {
    margin-block: var(--space-none);
}

.post {
    display: grid;
    grid-template-columns: minmax(var(--space-none), 1fr) var(--size-profile);
    grid-template-areas: "main profile";
    column-gap: var(--space-3);
    margin-block-end: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--color-row);
    border-radius: var(--radius-panel);
}

.topic-posts > .post:nth-child(even) {
    background: var(--color-row-alt);
}

.post-profile {
    grid-area: profile;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-inline-start: var(--space-2);
    border-inline-start: var(--border-width) solid var(--color-surface);
    font-size: var(--font-size-small);
}

.post-profile p {
    margin: var(--space-none);
}

.post__main {
    grid-area: main;
    min-width: var(--space-none);
}

.post-profile__avatar {
    display: grid;
    place-items: center;
    width: var(--size-row-icon);
    height: var(--size-row-icon);
    border-radius: var(--radius-round);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

.post-profile__name {
    color: var(--color-link);
    font-weight: var(--font-weight-strong);
}

.post-profile__rank {
    color: var(--color-text-muted);
}

.post-profile__avatar--image {
    width: auto;
    height: auto;
    background: none;
}

.post-profile__avatar--image img {
    display: block;
    max-width: var(--size-avatar);
    max-height: var(--size-avatar);
}

.post-profile__facts {
    margin: var(--space-none);
}

.post-profile__facts div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.post-profile__facts dt {
    font-weight: var(--font-weight-strong);
}

.post-profile__facts dd {
    margin: var(--space-none);
    color: var(--color-text-muted);
}

.post__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.post__subject {
    margin: var(--space-none);
    color: var(--color-link);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-strong);
    line-height: var(--line-height-tight);
}

.post__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-inline-start: auto;
}

.post__actions .inline-form {
    display: inline-flex;
    margin: var(--space-none);
}

.post__actions .button {
    min-height: auto;
    padding: var(--space-none) var(--space-1);
    font-size: var(--font-size-small);
}

.post__meta {
    margin: var(--space-1) var(--space-none) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.post__author {
    color: var(--color-link);
}

.post__edited {
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-1);
    border-block-start: var(--border-width) solid var(--color-rule);
}

.post__signature {
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-1);
    border-block-start: var(--border-width) solid var(--color-rule);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.post__body {
    margin: var(--space-none);
    line-height: var(--line-height-body);
}

.panel__body > .post__signature:first-child {
    padding-block-start: var(--space-none);
    border-block-start: none;
}

.post__body,
.post__signature,
.poll__question,
.poll__text {
    overflow-wrap: anywhere;
}

.post__body img,
.post__signature img,
.poll__question img,
.poll__text img {
    max-width: 100%;
    height: auto;
}

blockquote {
    margin: var(--space-4) var(--border-width) var(--space-4) var(--size-quote-indent);
    padding: var(--space-quote);
    border: var(--border-width) solid var(--color-quote-border);
    background: var(--color-quote);
    font-size: var(--font-size-quote);
    overflow: hidden;
}

blockquote blockquote {
    margin-inline-start: var(--size-quote-indent-nested);
    background: var(--color-quote-nested);
}

blockquote blockquote blockquote {
    background: var(--color-quote);
}

blockquote cite {
    display: block;
    font-size: var(--font-size-small);
    font-style: normal;
    font-weight: var(--font-weight-strong);
}

blockquote cite::before,
blockquote.uncited > div::before {
    content: "\f10d";
    padding-inline-end: var(--space-quote);
    color: var(--color-text-muted);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

blockquote cite > span {
    float: right;
    font-weight: var(--font-weight-body);
}

blockquote cite > a:last-of-type:not(:first-child) {
    margin-inline-start: var(--space-1);
}

.codebox {
    margin: var(--space-4) var(--space-none) var(--space-4);
    border: var(--border-width) solid var(--color-code-border);
    background: var(--color-code-bg);
}

.codebox p {
    display: block;
    margin: var(--space-none);
    padding: var(--space-half);
    border-block-end: var(--border-width) solid var(--color-code-rule);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
}

.codebox button {
    padding: var(--space-none);
    border: var(--space-none);
    background: none;
    color: var(--color-link);
    font: inherit;
    text-transform: none;
    cursor: pointer;
}

.codebox button:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.codebox pre {
    margin: var(--space-none);
}

.codebox code {
    display: block;
    max-height: var(--size-code-max);
    padding: var(--space-quote) var(--space-half);
    overflow: auto;
    color: var(--color-code-text);
    font-family: var(--font-family-code);
    font-size: var(--font-size-code);
    line-height: var(--line-height-code);
}

blockquote .codebox {
    margin-inline-start: var(--space-none);
}

.post__top {
    margin: var(--space-none);
    text-align: end;
}

.post__top a {
    color: var(--color-text-muted);
}

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

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: var(--size-control);
    padding: var(--space-none) var(--space-2);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: linear-gradient(var(--color-button), var(--color-button-end));
    color: var(--color-action);
    font: inherit;
    font-weight: var(--font-weight-strong);
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    border-color: var(--color-accent);
    color: var(--color-action);
    text-decoration: none;
}

.button .fa-solid {
    color: var(--color-text-muted);
}

.button--secondary {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-body);
}

.button--secondary:hover {
    color: var(--color-link-hover);
}

.button--plain {
    color: var(--color-text);
}

.button--danger {
    border-color: var(--color-danger);
    background: var(--color-danger);
    color: var(--color-danger-text);
}

.button--danger:hover {
    background: var(--color-danger-hover);
    color: var(--color-danger-text);
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control);
    height: var(--size-control);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: linear-gradient(var(--color-button), var(--color-button-end));
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    cursor: pointer;
}

.icon-button:hover {
    border-color: var(--color-accent);
    color: var(--color-link-hover);
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown__menu {
    position: absolute;
    inset-inline-start: var(--space-none);
    z-index: 2;
    min-width: var(--size-dropdown);
    margin-block-start: var(--space-1);
    padding: var(--space-1);
    background: var(--color-surface-raised);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-panel);
    font-size: var(--font-size-small);
}

.dropdown--end .dropdown__menu {
    inset-inline: auto var(--space-none);
}

.dropdown__menu a,
.dropdown__menu button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: var(--size-full);
    padding: var(--space-1) var(--space-2);
    border: none;
    background: none;
    color: var(--color-link);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.dropdown__menu a:hover,
.dropdown__menu button:hover {
    background: var(--color-row);
    color: var(--color-link-hover);
    text-decoration: none;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-none);
    font-size: var(--font-size-small);
}

.pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-control);
    padding: var(--space-none) var(--space-1);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    font-weight: var(--font-weight-strong);
}

.pagination__page:hover {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-text);
    text-decoration: none;
}

.pagination__page--current {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent);
}

.tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: var(--space-none);
    padding: var(--space-none) var(--space-2);
    list-style: none;
}

.tabs__tab {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-start-start-radius: var(--radius-control);
    border-start-end-radius: var(--radius-control);
    background: var(--color-navbar);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-strong);
}

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

.tabs__tab--selected {
    background: var(--color-panel);
    color: var(--color-text);
}

.tabs__panel {
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border-radius: var(--radius-panel);
}

.tabs__panel + .tabs__panel {
    margin-block-start: var(--space-1);
}

.form-row {
    display: grid;
    grid-template-columns: var(--size-label) minmax(var(--space-none), 1fr);
    gap: var(--space-1) var(--space-3);
    align-items: start;
    margin-block-end: var(--space-2);
}

.form-row__label {
    padding-block-start: var(--space-1);
    color: var(--color-text);
    font-weight: var(--font-weight-strong);
}

.form-row__hint {
    grid-column: 2;
    margin: var(--space-none);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.form-row input,
.form-row select,
.quick-login input {
    width: var(--size-full);
    max-width: var(--size-dialog);
    min-height: var(--size-control);
    padding: var(--space-none) var(--space-1);
    border: var(--border-width) solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.form-row textarea,
.posting-editor__input {
    width: var(--size-full);
    padding: var(--space-1);
    border: var(--border-width) solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.quick-login input:focus,
.posting-editor__input:focus {
    border-color: var(--color-accent);
}

.form-row input[type="file"] {
    min-height: auto;
    border: none;
    background: none;
}

.fieldset {
    margin: var(--space-none) var(--space-none) var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-panel);
    background: var(--color-panel);
}

.fieldset > legend {
    float: inline-start;
    width: var(--size-full);
    margin-block-end: var(--space-2);
    padding: var(--space-none) var(--space-none) var(--space-1);
    border-block-end: var(--border-width) solid var(--color-rule);
    color: var(--color-link);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
}

.fieldset > legend + * {
    clear: both;
}

.poll__question {
    margin: var(--space-none) var(--space-none) var(--space-2);
    color: var(--color-link);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lead);
}

.poll__options {
    margin: var(--space-none);
    padding: var(--space-none);
    list-style: none;
}

.poll__option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-block-end: var(--border-width) solid var(--color-surface);
}

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

.poll__count,
.poll__total {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-strong);
}

.poll__total {
    margin: var(--space-2) var(--space-none) var(--space-none);
}

.attachment-list {
    margin: var(--space-3) var(--space-none) var(--space-none);
    padding: var(--space-none);
    list-style: none;
}

.notice {
    margin-block-end: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-panel);
    background: var(--color-notice-info-bg);
    color: var(--color-notice-info-text);
}

.notice--success {
    background: var(--color-notice-success-bg);
    color: var(--color-notice-success-text);
}

.notice--warning {
    background: var(--color-notice-warning-bg);
    color: var(--color-notice-warning-text);
}

.notice--error {
    background: var(--color-notice-error-bg);
    color: var(--color-notice-error-text);
    font-weight: var(--font-weight-strong);
}

.confirm-dialog {
    max-width: var(--size-dialog);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-panel);
    background: var(--color-panel);
    color: var(--color-text);
}

.confirm-dialog::backdrop {
    background: var(--color-overlay);
}

.confirm-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
}

.posting-editor {
    margin-block-start: var(--space-2);
}

.posting-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-block-end: var(--space-1);
}

.posting-editor__palette {
    display: grid;
    grid-template-columns: repeat(15, var(--space-3));
    margin-block-end: var(--space-1);
}

.posting-editor__palette[hidden] {
    display: none;
}

.posting-editor__swatch {
    width: var(--space-3);
    height: var(--space-3);
    padding: var(--space-none);
    border: none;
    cursor: pointer;
}

.posting-editor__size {
    min-height: var(--size-control);
    border: var(--border-width) solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.posting-editor__input {
    display: block;
    min-height: var(--size-editor);
    resize: vertical;
}

:focus-visible {
    outline: var(--border-width-focus) solid var(--color-focus);
    outline-offset: var(--border-width);
}

.ucp,
.mcp {
    display: grid;
    grid-template-columns: var(--size-profile) minmax(var(--space-none), 1fr);
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-2);
    background: var(--color-navbar);
    border-radius: var(--radius-panel);
}

.ucp__nav,
.mcp__nav {
    display: flex;
    flex-direction: column;
    padding-block-start: var(--space-3);
}

.ucp__nav a,
.mcp__nav a {
    padding: var(--space-1) var(--space-2);
    border-block-end: var(--border-width) solid var(--color-surface);
    color: var(--color-link);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-strong);
}

.ucp__nav a:hover,
.mcp__nav a:hover {
    background: var(--color-panel);
    text-decoration: none;
}

.ucp__nav a[aria-current="page"],
.mcp__nav a[aria-current="page"] {
    background: var(--color-surface);
    color: var(--color-action);
}

.ucp__main,
.mcp__main {
    min-width: var(--space-none);
    padding: var(--space-2) var(--space-3);
    background: var(--color-panel);
    border-radius: var(--radius-panel);
}

.ucp__main .panel,
.mcp__main .panel {
    background: var(--color-surface);
}

.cookie-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    max-width: var(--size-page);
    margin: var(--space-none) auto var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-panel);
    background: var(--color-notice-info-bg);
    color: var(--color-notice-info-text);
}

.cookie-notice p {
    margin: var(--space-none);
}

.section-title {
    margin: var(--space-3) var(--space-none) var(--space-1);
    padding-block-end: calc(var(--space-1) / 2);
    border-block-end: var(--border-width) solid var(--color-rule);
    color: var(--color-link);
    font-family: var(--font-family-subheading);
    font-size: var(--font-size-subheading);
    font-weight: var(--font-weight-strong);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
}

.board-block {
    margin-block: var(--space-4);
    font-size: var(--font-size-small);
}

.board-block__title {
    margin: var(--space-none) var(--space-none) var(--space-1);
    padding-block-end: var(--space-1);
    border-block-end: var(--border-width) solid var(--color-rule);
    color: var(--color-link);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
}

.birthdays {
    margin-block: var(--space-3);
    font-size: var(--font-size-small);
}

.birthdays h2 {
    margin: var(--space-none) var(--space-none) var(--space-1);
    padding-block-end: var(--space-1);
    border-block-end: var(--border-width) solid var(--color-rule);
    color: var(--color-link);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
}

.birthdays ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-none);
    padding: var(--space-none);
    list-style: none;
}

.board-block p {
    margin: var(--space-none);
}

.member-name {
    color: var(--color-link);
}

.member-name--coloured {
    font-weight: var(--font-weight-strong);
}

.quick-login {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
}

.quick-login input {
    width: var(--size-search);
}

.listing-row {
    padding: var(--space-2) var(--space-none);
    border-block-end: var(--border-width) solid var(--color-rule);
}

.listing-row:last-child {
    border-block-end: none;
}

.listing-row__title {
    margin: var(--space-none);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-strong);
}

.listing-row__meta {
    margin: var(--space-1) var(--space-none) var(--space-none);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.message-sender-fields {
    margin: var(--space-1) var(--space-none) var(--space-2);
    font-size: var(--font-size-small);
}

.message-sender-fields div {
    display: flex;
    gap: var(--space-1);
}

.message-sender-fields dt {
    color: var(--color-text-muted);
}

.message-sender-fields dd {
    margin: var(--space-none);
}

.member-profile {
    position: relative;
    overflow: hidden;
    background: var(--color-row);
}

.member-profile__details {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.member-profile__avatar {
    margin: var(--space-none);
}

.member-profile__avatar img {
    display: block;
    max-width: var(--size-profile);
    height: auto;
}

.member-profile__online {
    position: absolute;
    inset-block-start: calc(var(--size-ribbon) / 2);
    inset-inline-end: calc(var(--size-ribbon) / 2);
    width: calc(var(--size-ribbon) * 1.4142);
    margin: var(--space-none);
    background: var(--color-border);
    color: var(--color-accent);
    font-size: var(--font-size-ribbon);
    font-weight: var(--font-weight-strong);
    text-align: center;
    text-transform: uppercase;
    transform: translate(50%, -50%) rotate(45deg);
}

.member-profile__signature {
    font-size: var(--font-size-small);
}

.member-profile .section-title,
.profile-columns .section-title {
    margin-block-start: var(--space-1);
}

.profile-columns {
    background: var(--color-row-alt);
}

.profile-columns > .panel__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(var(--space-none), 1fr));
    gap: var(--space-5);
}

.profile-facts {
    display: grid;
    grid-template-columns: 3fr 7fr;
    margin: var(--space-none);
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
}

.profile-facts--wide {
    flex: 1;
    grid-template-columns: 6fr 19fr;
}

.profile-facts dt {
    grid-column: 1;
    color: var(--color-text);
    text-align: end;
}

.profile-facts dd {
    grid-column: 2;
    margin: var(--space-none) var(--space-none) var(--space-1);
    padding-inline-start: var(--space-1);
    color: var(--color-text-muted);
}

.profile-facts__name {
    color: var(--color-text);
}

.profile-facts__note {
    display: block;
}

.profile-facts__links {
    white-space: nowrap;
}

.profile-facts__action {
    font-weight: var(--font-weight-strong);
}

.profile-facts__groups {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.profile-facts__groups select,
.profile-facts__groups button {
    border: var(--border-width) solid var(--color-text-muted);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    line-height: var(--line-height-body);
}

.profile-facts__groups button {
    padding: var(--space-none) var(--space-1);
    background: linear-gradient(var(--color-button-end), var(--color-button));
    cursor: pointer;
}

.login-form > .panel__body {
    font-size: var(--font-size-small);
}

.login-form .panel__header h2 {
    font-size: var(--font-size-heading);
}

.login-form .form-row {
    grid-template-columns: var(--size-login-label) minmax(var(--space-none), 1fr);
    column-gap: var(--space-none);
}

.login-form .form-row__label {
    padding-block-start: var(--space-none);
}

.login-form .form-row input:not([type='checkbox']) {
    width: auto;
    min-height: auto;
    padding: calc(var(--space-1) / 2);
}

.login-form .choice {
    margin-block: var(--space-none);
}

.message-history {
    margin-block: var(--space-3);
}

.message-history__title {
    margin: var(--space-none) var(--space-none) var(--space-1);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lead);
}

.message-history__item {
    margin-block-end: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--color-row);
    border-radius: var(--radius-panel);
}

.message-history__item:nth-child(odd) {
    background: var(--color-row-alt);
}

.listing-row--friend,
.topic-row--friend,
.post--friend,
.search-hit--friend {
    background: var(--color-notice-success-bg);
    color: var(--color-notice-success-text);
}

.listing-row--foe,
.post--foe {
    background: var(--color-notice-warning-bg);
    color: var(--color-notice-warning-text);
}

.topic-posts > .post--friend:nth-child(even) {
    background: var(--color-notice-success-bg);
}

.topic-posts > .post--foe:nth-child(even) {
    background: var(--color-notice-warning-bg);
}

.friend-marker,
.foe-marker {
    margin: var(--space-1) var(--space-none);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-strong);
}

.search-hits {
    margin-block: var(--space-1);
}

.search-hit {
    display: grid;
    grid-template-columns: minmax(var(--space-none), 1fr) var(--size-forum-last);
    gap: var(--space-3);
    margin-block-end: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--color-row);
    border-radius: var(--radius-panel);
}

.search-hit:nth-child(even) {
    background: var(--color-row-alt);
}

.search-hit__title {
    margin: var(--space-none);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lead);
}

.search-hit__excerpt {
    margin: var(--space-1) var(--space-none) var(--space-none);
}

.search-hit__meta {
    margin: var(--space-none);
    padding: var(--space-none) var(--space-none) var(--space-none) var(--space-2);
    list-style: none;
    border-inline-start: var(--border-width) solid var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.search-hit__author {
    color: var(--color-action);
}

.search-hit mark {
    border-radius: var(--radius-small);
    background: var(--color-notice-error-bg);
    color: var(--color-notice-error-text);
}

.search-query {
    color: var(--color-link);
}

.search-refine,
.member-filter {
    margin-block: var(--space-2);
}

.letter-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-block: var(--space-2) var(--space-1);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-strong);
}

.letter-filter a {
    padding-inline: var(--space-1);
    text-decoration: none;
}

.letter-filter a[aria-current] {
    border-radius: var(--radius-small);
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.search-refine summary,
.member-filter summary {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-panel);
    background: var(--color-panel);
    color: var(--color-link);
    font-size: var(--font-size-small);
    cursor: pointer;
}

.search-refine[open] summary,
.member-filter[open] summary {
    margin-block-end: var(--space-1);
}

.data-table {
    margin-block: var(--space-2);
    padding: var(--space-none) var(--space-1) var(--space-1);
    background: linear-gradient(var(--color-header-end), var(--color-header));
    border-radius: var(--radius-panel);
    overflow-x: auto;
}

.data-table table {
    width: var(--size-full);
    border-collapse: collapse;
}

.data-table th {
    padding: var(--space-2) var(--space-1) var(--space-1);
    color: var(--color-header-text);
    font-size: var(--font-size-caption);
    text-align: start;
    text-transform: uppercase;
}

.data-table td {
    padding: var(--space-1) var(--space-2);
    background: var(--color-row);
    border-block-end: var(--border-width) solid var(--color-border-row);
    font-size: var(--font-size-small);
}

.data-table tbody tr:nth-child(even) td {
    background: var(--color-row-alt);
}

.data-table__number {
    width: var(--size-forum-count);
}

.data-table th.data-table__number,
.data-table td.data-table__number {
    text-align: center;
}

.data-table__wide span + span::before {
    content: " · ";
}

.choice-list {
    margin: var(--space-none);
    padding: var(--space-none);
    list-style: none;
}

.choice {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-block: var(--space-1);
}

.choice input[type='checkbox'],
.choice input[type='radio'],
.form-row input[type='checkbox'],
.form-row input[type='radio'] {
    width: auto;
    min-height: auto;
}

.avatar-preview {
    width: var(--size-avatar);
    height: var(--size-avatar);
    border-radius: var(--radius-round);
    object-fit: cover;
}

.print-sheet {
    margin: var(--space-none);
    padding: var(--space-none);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
}

.print-sheet__main {
    width: min(var(--size-full), var(--size-page));
    margin-inline: auto;
    padding: var(--space-4);
}

.print-sheet__title {
    margin: var(--space-none) var(--space-none) var(--space-3);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-strong);
    line-height: var(--line-height-tight);
}

.print-sheet__meta {
    margin: var(--space-none) var(--space-none) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.dropdown__caret {
    padding-inline-start: var(--space-1);
    border-inline-start: var(--border-width) solid var(--color-border);
    font-size: var(--font-size-caption);
}

.dropdown__menu form {
    margin: var(--space-none);
}

.dropdown__menu .dropdown__form {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-block-start: var(--border-width) solid var(--color-rule);
}

.dropdown__menu .dropdown__form .button {
    justify-content: center;
    border: var(--border-width) solid var(--color-border-strong);
    background: linear-gradient(var(--color-button), var(--color-button-end));
}

.topic-search {
    display: inline-flex;
    align-items: stretch;
    margin: var(--space-none);
}

.topic-search__input {
    width: var(--size-search);
    min-height: var(--size-control);
    padding: var(--space-none) var(--space-1);
    border: var(--border-width) solid var(--color-border-strong);
    border-inline-end: none;
    border-radius: var(--radius-control) var(--space-none) var(--space-none) var(--radius-control);
    font: inherit;
    font-size: var(--font-size-small);
}

.topic-search__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control);
    border: var(--border-width) solid var(--color-border-strong);
    background: linear-gradient(var(--color-button), var(--color-button-end));
    color: var(--color-text-muted);
    cursor: pointer;
}

.topic-search__button + .topic-search__button {
    border-inline-start: none;
    border-radius: var(--space-none) var(--radius-control) var(--radius-control) var(--space-none);
}

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

.quick-reply__input {
    width: var(--size-full);
    min-height: var(--size-quick-reply);
    margin-block-end: var(--space-2);
    font: inherit;
}

.preview-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    max-width: var(--size-page);
    margin: var(--space-none) auto var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-panel);
    background: var(--color-panel);
    color: var(--color-text);
}

.print-sheet .post {
    display: block;
    padding-block: var(--space-4);
    border-block-start: var(--border-width) solid var(--color-border);
    border-radius: var(--space-none);
    background: none;
}

@media (max-width: 56em) {
    .forum-list__header,
    .forum-row,
    .topic-row {
        grid-template-columns: var(--size-row-icon) minmax(var(--space-none), 1fr) var(--size-forum-count) var(--size-forum-count) var(--size-forum-meta);
    }
}

@media (max-width: 43.75em) {
    body {
        padding: var(--space-none);
    }

    .page-shell {
        padding: var(--space-none);
        border: none;
        border-radius: var(--space-none);
    }

    .page-shell__header {
        justify-content: center;
        padding: var(--space-2);
        border-radius: var(--space-none);
        text-align: center;
    }

    .page-shell__description,
    .page-shell__search {
        display: none;
    }

    .navbar {
        margin-block-start: var(--space-none);
        border-radius: var(--space-none);
    }

    .navbar__label {
        position: absolute;
        width: var(--space-none);
        height: var(--space-none);
        overflow: hidden;
        clip-path: inset(var(--size-clip));
    }

    .page-shell__main {
        padding: var(--space-2) var(--space-1);
    }

    .forum-list,
    .member-profile,
    .profile-columns {
        margin-inline: calc(var(--space-1) * -1);
        border-radius: var(--space-none);
    }

    .profile-columns > .panel__body {
        grid-template-columns: minmax(var(--space-none), 1fr);
        gap: var(--space-none);
    }

    .member-profile__online {
        inset-block-start: calc(var(--size-ribbon-compact) / 2);
        inset-inline-end: calc(var(--size-ribbon-compact) / 2);
        width: calc(var(--size-ribbon-compact) * 1.4142);
        font-size: var(--font-size-ribbon-compact);
    }

    .profile-facts,
    .profile-facts--wide {
        grid-template-columns: minmax(var(--space-none), 1fr);
    }

    .profile-facts dt,
    .profile-facts dd {
        grid-column: 1;
    }

    .profile-facts dt {
        text-align: start;
    }

    .profile-facts dd {
        padding-inline-start: var(--space-5);
    }

    .forum-list__header,
    .forum-row,
    .topic-row {
        grid-template-columns: var(--size-row-icon) minmax(var(--space-none), 1fr);
    }

    .forum-list__title {
        text-align: center;
        font-size: var(--font-size-small);
        text-transform: none;
    }

    .forum-list__column,
    .forum-row__count,
    .topic-row__count,
    .forum-row__last,
    .topic-row__last {
        display: none;
    }

    .forum-row__stats,
    .topic-row__stats {
        position: static;
        width: auto;
        height: auto;
        margin-block-start: var(--space-1);
        clip-path: none;
        font-size: var(--font-size-small);
    }

    .action-bar__pages {
        justify-content: center;
        width: var(--size-full);
    }

    .post {
        grid-template-columns: minmax(var(--space-none), 1fr);
        grid-template-areas:
            "profile"
            "main";
        padding: var(--space-2);
        border-radius: var(--space-none);
    }

    .post-profile {
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
        margin-block-end: var(--space-2);
        padding: var(--space-none) var(--space-none) var(--space-1);
        border-inline-start: none;
        border-block-end: var(--border-width) solid var(--color-surface);
    }

    .form-row,
    .login-form .form-row {
        grid-template-columns: minmax(var(--space-none), 1fr);
    }

    .form-row__hint {
        grid-column: 1;
    }

    .ucp,
    .mcp {
        grid-template-columns: minmax(var(--space-none), 1fr);
        border-radius: var(--space-none);
    }

    .ucp__nav,
    .mcp__nav {
        flex-direction: row;
        flex-wrap: wrap;
        padding: var(--space-none);
    }

    .search-hit {
        grid-template-columns: minmax(var(--space-none), 1fr);
    }

    .search-hit__meta {
        padding: var(--space-none);
        border: none;
    }

    .page-shell__footer .navbar {
        border-radius: var(--space-none);
    }

    .navbar__note {
        display: none;
    }

    .quick-login {
        flex-direction: column;
        align-items: stretch;
    }

    .quick-login input {
        width: var(--size-full);
        max-width: none;
    }

    .quick-login .button {
        align-self: center;
    }
}

.posting-editor__main {
    min-width: var(--space-none);
}

.posting-editor__body {
    display: grid;
    grid-template-columns: minmax(var(--space-none), 1fr) auto;
    gap: var(--space-3);
    align-items: start;
}

.posting-editor__field {
    position: relative;
}

.smiley-panel {
    width: var(--size-dropdown);
    font-size: var(--font-size-small);
}

.smiley-panel__title {
    margin: var(--space-none) var(--space-none) var(--space-1);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-strong);
}

.smiley-panel__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding-block-end: var(--space-1);
    border-block-end: var(--border-width) solid var(--color-rule);
}

.smiley-panel__smiley,
.smiley-page__smiley,
.mention-list__choice {
    padding: var(--space-none);
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.smiley-panel__smiley img {
    display: block;
    width: var(--size-icon);
    height: var(--size-icon);
}

.smiley-panel__more {
    display: inline-block;
    margin-block-start: var(--space-1);
}

.smiley-panel__status {
    margin: var(--space-1) var(--space-none) var(--space-none);
    padding: var(--space-none);
    list-style: none;
}

.smiley-panel__list + .smiley-panel__more + .smiley-panel__status,
.smiley-panel__status + .smiley-panel__review {
    padding-block-start: var(--space-1);
    border-block-start: var(--border-width) solid var(--color-rule);
}

.smiley-panel__review {
    margin: var(--space-1) var(--space-none) var(--space-none);
    font-weight: var(--font-weight-strong);
}

.smiley-page {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-none);
    padding: var(--space-none);
    list-style: none;
}

.smiley-page__smiley {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.mention-list {
    position: absolute;
    inset-inline-start: var(--space-none);
    inset-block-start: var(--size-full);
    z-index: 2;
    min-width: var(--size-dropdown);
    margin: var(--space-none);
    padding: var(--space-1) var(--space-none);
    list-style: none;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border-strong);
    box-shadow: var(--shadow-panel);
}

.mention-list__choice {
    display: block;
    width: var(--size-full);
    padding: var(--space-1) var(--space-2);
    text-align: start;
}

.mention-list__choice:hover,
.mention-list__choice:focus-visible,
.mention-list__choice[aria-selected="true"] {
    background: var(--color-row-alt);
}

.choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    align-items: center;
}

.choice-list__item {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    font-weight: var(--font-weight-body);
}

.choice-list__icon {
    width: var(--size-icon);
    height: var(--size-icon);
}

.drop-zone {
    padding: var(--space-3);
    border: var(--border-width-strong) dashed var(--color-border-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
}

.drop-zone[data-dragging] {
    border-color: var(--color-accent);
    background: var(--color-row-alt);
}

.topic-review__heading {
    margin: var(--space-5) var(--space-none) var(--space-1);
    padding-block-end: var(--space-1);
    border-block-end: var(--border-width) solid var(--color-rule);
    color: var(--color-link);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-strong);
    text-transform: uppercase;
}

.topic-review__toggle {
    float: inline-end;
}

.topic-review {
    max-height: var(--size-review);
    overflow: auto;
}

.topic-review--expanded {
    max-height: none;
}

.topic-review__post {
    margin-block-end: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--color-row);
    border-radius: var(--radius-panel);
}

.topic-review__post:nth-child(even) {
    background: var(--color-row-alt);
}

.topic-review__post .post__actions {
    float: inline-end;
}

.topic-review__post .post__subject {
    margin-inline-end: var(--space-6);
}

.topic-review__top {
    margin-block: var(--space-2);
}

@media (max-width: 43.75em) {
    .posting-form .form-row {
        grid-template-columns: minmax(var(--space-none), 1fr);
    }

    .posting-editor__body {
        grid-template-columns: minmax(var(--space-none), 1fr);
    }

    .smiley-panel {
        width: auto;
    }
}

.posting-form .form-row {
    grid-template-columns: var(--size-posting-label) minmax(var(--space-none), 1fr);
    margin-block-end: var(--space-1);
    font-size: var(--font-size-small);
}

.posting-form .form-row__label {
    padding-block-start: var(--space-half);
}

.posting-form .form-row input:not([type="radio"], [type="checkbox"], [type="file"]) {
    max-width: var(--size-subject);
    min-height: auto;
    padding: var(--space-half) var(--space-1);
}

.posting-form .form-actions .button {
    min-height: auto;
    padding: var(--space-half) var(--space-1);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-body);
    line-height: 1.5;
}

.posting-form .form-actions .button:last-child {
    font-weight: var(--font-weight-strong);
}

@media (max-width: 43.75em) {
    .posting-form .form-row {
        grid-template-columns: minmax(var(--space-none), 1fr);
    }

    .posting-editor__body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .posting-editor__main {
        display: contents;
    }

    .posting-editor__toolbar {
        order: 1;
    }

    .posting-editor__palette {
        order: 2;
    }

    .smiley-panel {
        order: 3;
        width: var(--size-full);
        margin-block-end: var(--space-1);
    }

    .posting-editor__field {
        order: 4;
    }

    .smiley-panel__more,
    .smiley-panel__status {
        display: none;
    }

    .smiley-panel__list {
        border-block-end: none;
    }
}