:root {
    /* Shared, theme-independent tokens */
    --font-body: "Lato", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: Impact, "Haettenschweiler", "Franklin Gothic Bold", "Arial Narrow", sans-serif;

    /* Brand identity (old rushers.dk) */
    --color-brand: #c13b37;
    --color-brand-strong: #d5514d;
    --color-brand-ink: #ffffff;

    /* Category chip colors (old catblock palette) */
    --cat-yellow: #ffe42d;
    --cat-green: #7dc20f;
    --cat-cyan: #25b7d1;
    --cat-orange: #ffb22d;
    --cat-red: #ff503c;

    --radius-scale: .40;
    --radius-xs-base: .35rem;
    --radius-sm-base: .55rem;
    --radius-md-base: .9rem;
    --radius-lg-base: 1.25rem;
    --radius-xs: calc(var(--radius-xs-base) * var(--radius-scale));
    --radius-sm: calc(var(--radius-sm-base) * var(--radius-scale));
    --radius-md: calc(var(--radius-md-base) * var(--radius-scale));
    --radius-lg: calc(var(--radius-lg-base) * var(--radius-scale));
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --content-width: 1320px;
    --content-width-wide: 1600px;

    font-family: var(--font-body);
}

/* Dark theme = faithful old-site look (default) */
:root,
[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #141414;
    --color-bg-deep: #0e0e0e;
    --color-surface: #333333;
    --color-surface-2: #3a3a3a;
    --color-surface-3: #444444;
    --color-border: #4a4a4a;
    --color-border-strong: #7f7f7f;
    --color-text: #dddddd;
    --color-text-strong: #ffffff;
    --color-text-muted: #8a8a8a;
    --color-accent: #c6c6c6;
    --color-accent-strong: #ffffff;
    --color-accent-ink: #141414;
    --color-accent-soft: rgba(193, 59, 55, .18);
    --color-link: #ffffff;
    --color-link-hover: var(--color-brand-strong);
    --color-danger: #ff503c;
    --color-warning: #ffb22d;
    --color-success: #7dc20f;
    --color-info: #25b7d1;
    --header-bg: var(--color-brand);
    --footer-bg: var(--color-brand);
    --subfooter-bg: #222222;
    --color-input-bg: #0a0f15;
    --color-input-placeholder: #718093;
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, .35);
    --shadow-glow: 0 0 36px rgba(193, 59, 55, .22);
}

/* Light theme = derived variant, keeps brand red header/footer */
[data-theme="light"] {
    color-scheme: light;
    --color-bg: #f4f4f4;
    --color-bg-deep: #e6e6e6;
    --color-surface: #ffffff;
    --color-surface-2: #f1f1f1;
    --color-surface-3: #e8e8e8;
    --color-border: #d3d3d3;
    --color-border-strong: #b3b3b3;
    --color-text: #232323;
    --color-text-strong: #111111;
    --color-text-muted: #6a6a6a;
    --color-accent: #3a3a3a;
    --color-accent-strong: #141414;
    --color-accent-ink: #ffffff;
    --color-accent-soft: rgba(193, 59, 55, .12);
    --color-link: var(--color-brand);
    --color-link-hover: var(--color-brand-strong);
    --color-danger: #d02a1e;
    --color-warning: #b8791a;
    --color-success: #4f8a0b;
    --color-info: #157f95;
    --header-bg: var(--color-brand);
    --footer-bg: var(--color-brand);
    --subfooter-bg: #333333;
    --color-input-bg: #ffffff;
    --color-input-placeholder: #8a8a8a;
    --shadow-soft: 0 12px 32px rgba(0, 0, 0, .14);
    --shadow-glow: 0 0 30px rgba(193, 59, 55, .16);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--color-bg);
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    accent-color: var(--color-brand);
}

::selection {
    background: color-mix(in srgb, var(--color-brand) 55%, transparent);
    color: #fff;
}

a {
    color: var(--color-link);
    text-decoration-color: color-mix(in srgb, var(--color-link) 45%, transparent);
    text-underline-offset: .2em;
}

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

/* No focus rings anywhere — deliberate design choice. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: none;
}

h1,
h2,
h3 {
    color: var(--color-text-strong);
    line-height: 1.12;
    letter-spacing: -.02em;
}

/* Old-site heading: centered uppercase title with a rule on each side */
h1,
.section-heading {
    align-items: center;
    display: flex;
    font-size: 1.6rem;
    font-weight: 700;
    gap: 1rem;
    letter-spacing: .03em;
    margin: 0 0 var(--space-4);
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

h1::before,
h1::after,
.section-heading::before,
.section-heading::after {
    background: var(--color-border-strong);
    content: "";
    flex: 1 1 auto;
    height: 1px;
    min-width: 2rem;
}

.section-heading {
    margin-top: var(--space-6);
}

h2 {
    margin-top: var(--space-6);
    font-size: clamp(1.45rem, 3vw, 2.1rem);
}

h3 {
    margin-bottom: var(--space-2);
}

p {
    margin-top: 0;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
}

img,
iframe,
video,
embed {
    max-width: 100%;
}

iframe,
video,
embed {
    border: 0;
    border-radius: var(--radius-md);
}

.markdown-embed {
    margin: var(--space-4) 0;
}

.markdown-embed iframe {
    display: block;
    width: 100%;
    max-width: 48rem;
    aspect-ratio: 16 / 9;
}

.markdown-embed--card iframe {
    aspect-ratio: auto;
    height: 32rem;
    max-width: 34rem;
}

.markdown-embed--audio iframe {
    aspect-ratio: auto;
    height: 10rem;
    max-width: 34rem;
}

.markdown-embed--square iframe {
    aspect-ratio: 4 / 3;
    max-width: 30rem;
}

.markdown-embed img {
    display: block;
    max-width: min(100%, 30rem);
    height: auto;
    border-radius: var(--radius-md);
}

code,
pre {
    border-radius: var(--radius-sm);
    background: var(--color-bg-deep);
    color: var(--color-text-strong);
}

code {
    padding: .12rem .32rem;
}

pre {
    overflow-x: auto;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
}

.content > :where(section, article, form, div, table):not(:last-child) {
    margin-bottom: var(--space-5);
}

/* Shared admin/console page heading. Previously duplicated across several scoped
   stylesheets, which left pages without their own .razor.css unstyled. */
.admin-page h1 {
    font-family: var(--font-display);
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-bottom: .25rem;
}

.admin-intro {
    color: var(--color-text-muted);
    margin-top: 0;
}

.card,
.panel,
.list-group,
.news-page,
.profile-page,
form:not(.nav-auth-form):not(.nav-search),
.news-comments-block,
.markdown-editor__preview,
.forum-create-topic[open] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015)), var(--color-surface);
    box-shadow: var(--shadow-soft);
}

form:not(.nav-auth-form):not(.nav-search),
.news-page,
.profile-page,
.news-comments-block,
.markdown-editor__preview,
.forum-create-topic[open] {
    padding: var(--space-5);
}

.button-link,
.btn,
button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.5rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding: .56rem .9rem;
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.button-link:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    background: var(--color-accent-ink);
    color: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-glow);
}

.btn-primary,
button[type="submit"],
.button-link {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: var(--color-brand-ink);
}

.btn-primary:hover,
button[type="submit"]:hover,
.button-link:hover {
    background: var(--color-brand-strong);
    border-color: var(--color-brand-strong);
    color: #fff;
}

.btn-secondary,
.btn-outline-secondary {
    border-color: var(--color-border-strong);
    background: var(--color-surface-3);
    color: var(--color-text-strong);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--color-surface-2);
    color: var(--color-text-strong);
    border-color: var(--color-border-strong);
}

.btn-danger,
.btn-outline-danger {
    border-color: var(--color-danger);
    background: var(--color-danger);
    color: #fff;
}

.btn-danger:hover,
.btn-outline-danger:hover {
    background: color-mix(in srgb, var(--color-danger) 82%, #000);
    border-color: var(--color-danger);
    color: #fff;
}

.btn-sm {
    min-height: 2rem;
    padding: .35rem .62rem;
    font-size: .9rem;
}

button:disabled,
.btn:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: .6;
    transform: none;
    box-shadow: none;
}

label,
.form-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-strong);
    font-weight: 700;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select,
.form-control,
.form-select {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .72rem .85rem;
    background: var(--color-input-bg);
    color: var(--color-text-strong);
    font: inherit;
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-input-placeholder);
}

.form-floating,
.form-row,
.mb-3 {
    margin-bottom: var(--space-4);
}

.form-text,
.text-muted,
small {
    color: var(--color-text-muted) !important;
}

.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.form-check-input {
    width: 1.1rem;
    height: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    border-color: var(--color-success);
    outline: 1px solid var(--color-success);
}

.invalid {
    border-color: var(--color-danger) !important;
    outline: 1px solid var(--color-danger);
}

.validation-message,
.text-danger {
    color: var(--color-danger) !important;
}

.validation-summary-errors,
.alert,
.status-message,
.news-status {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--color-surface-2);
}

.alert-warning,
.status-message,
.news-status {
    border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    color: var(--color-text-strong);
}

.alert-danger {
    border-color: color-mix(in srgb, var(--color-danger) 48%, transparent);
    background: color-mix(in srgb, var(--color-danger) 14%, transparent);
    color: var(--color-text-strong);
}

.alert-success {
    border-color: color-mix(in srgb, var(--color-success) 48%, transparent);
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    color: var(--color-text-strong);
}

.toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    display: grid;
    gap: 0.75rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.toast-card {
    pointer-events: auto;
    display: flex;
    gap: 0.75rem;
    align-items: start;
    justify-content: space-between;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(6px);
}

.toast-card--success {
    border-color: color-mix(in srgb, var(--color-success) 50%, transparent);
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
}

.toast-card--error {
    border-color: color-mix(in srgb, var(--color-danger) 50%, transparent);
    background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
}

.toast-card__body {
    min-width: 0;
}

.toast-card__body strong,
.toast-card__body p {
    display: block;
}

.toast-card__body p {
    margin: 0.15rem 0 0;
    white-space: pre-wrap;
}

.toast-card__close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    cursor: pointer;
}

table,
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

th,
td {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--color-text-strong);
    background: rgba(255, 255, 255, .035);
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

tr:last-child > td {
    border-bottom: 0;
}

tbody tr:hover {
    background: color-mix(in srgb, var(--color-brand) 9%, transparent);
}

.badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--color-brand) 45%, transparent);
    border-radius: 999px;
    padding: .22rem .58rem;
    background: color-mix(in srgb, var(--color-brand) 20%, transparent);
    color: var(--color-text-strong);
    font-size: .78rem;
    font-weight: 800;
}

.bg-info {
    border-color: color-mix(in srgb, var(--color-info) 48%, transparent);
    background: color-mix(in srgb, var(--color-info) 18%, transparent) !important;
    color: var(--color-text-strong) !important;
}

.bg-secondary {
    background: var(--color-surface-3) !important;
    color: var(--color-text-strong) !important;
}

.pager,
nav[aria-label="Sider"] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-5);
}

.pager a,
nav[aria-label="Sider"] a {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    background: var(--color-surface-2);
    text-decoration: none;
}

.pager a:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.pager .pager-current {
    display: inline-flex;
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    background: var(--color-brand);
    color: #fff;
    font-weight: 700;
}

.pager .pager-ellipsis {
    padding: .5rem .15rem;
    color: var(--color-text-muted);
}

.pager .pager-disabled {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    opacity: .5;
}

.pager-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.pager-bar .pager,
.pager-bar nav[aria-label="Sider"] {
    margin-top: 0;
}

.page-size-select {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: .9rem;
    white-space: nowrap;
}

.page-size-select select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .4rem .5rem;
    background: var(--color-surface-2);
    color: inherit;
}

.news-actions,
.d-flex {
    display: flex;
    gap: var(--space-4);
}

.flex-wrap {
    flex-wrap: wrap;
}

.align-items-center {
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-4,
.mt-4 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
}

.flex-grow-1 {
    flex-grow: 1;
}

.text-decoration-none {
    text-decoration: none;
}

.align-self-start {
    align-self: flex-start;
}

.vstack {
    display: flex;
    flex-direction: column;
}

.rounded {
    border-radius: var(--radius-md) !important;
}

.border {
    border: 1px solid var(--color-border) !important;
}

.p-3 {
    padding: var(--space-4) !important;
}

.list-group {
    overflow: hidden;
}

.list-group-item {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: transparent;
}

.list-group-item:last-child {
    border-bottom: 0;
}

.list-group-item-action {
    display: block;
    width: 100%;
    text-align: left;
}

.input-group {
    display: flex;
    gap: var(--space-2);
}

.input-group .form-control {
    flex: 1;
}

.news-page {
    padding: clamp(1rem, 3vw, 2rem);
}

.news-header {
    margin-bottom: var(--space-5);
}

.news-header p,
.news-meta,
.news-comments {
    color: var(--color-text-muted);
}

/* Author/date line on news cards with the reply bubble right-aligned */
.news-card .news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Moderation report status pills */
.report-status {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: var(--radius-xs);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.report-status--resolved {
    background: color-mix(in srgb, var(--cat-green) 18%, var(--color-surface));
    color: var(--cat-green);
    border: 1px solid color-mix(in srgb, var(--cat-green) 55%, transparent);
}

.report-status--dismissed {
    background: color-mix(in srgb, var(--cat-orange) 18%, var(--color-surface));
    color: var(--cat-orange);
    border: 1px solid color-mix(in srgb, var(--cat-orange) 55%, transparent);
}

/* Publish status on the news edit page */
.news-status-badge {
    display: inline-block;
    margin: 0 0 var(--space-4);
    padding: .35rem .9rem;
    border-radius: var(--radius-md);
    font-size: .95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.news-status-badge--published {
    background: color-mix(in srgb, var(--cat-green) 18%, var(--color-surface));
    color: var(--cat-green);
    border: 1px solid color-mix(in srgb, var(--cat-green) 55%, transparent);
}

.news-status-badge--draft {
    background: color-mix(in srgb, var(--cat-orange) 18%, var(--color-surface));
    color: var(--cat-orange);
    border: 1px solid color-mix(in srgb, var(--cat-orange) 55%, transparent);
}

.news-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: var(--space-5);
}

.news-card {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)), var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.news-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: linear-gradient(135deg, #251407, #101820);
}

.news-card > div {
    padding: var(--space-5);
}

.news-card h2 {
    margin: 0 0 var(--space-2);
}

.news-card h2 a {
    color: var(--color-text-strong);
    text-decoration: none;
}

.news-comments {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: .85rem;
}

.news-article {
    max-width: 860px;
    margin-inline: auto;
}

.news-hero {
    display: block;
    width: 100%;
    max-height: 28rem;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    margin-bottom: var(--space-6);
}

.news-body,
.reply-body {
    overflow-wrap: anywhere;
}

.news-body blockquote,
.reply-body blockquote {
    margin-left: 0;
    border-left: .25rem solid var(--color-brand);
    padding: var(--space-2) var(--space-4);
    background: color-mix(in srgb, var(--color-brand) 8%, transparent);
    color: var(--color-text-strong);
}

.news-body blockquote > :first-child,
.reply-body blockquote > :first-child {
    margin-top: 0;
}

.news-body blockquote > :last-child,
.reply-body blockquote > :last-child {
    margin-bottom: 0;
}

.news-body blockquote .quote-attribution,
.reply-body blockquote .quote-attribution {
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
}

/* Spoiler: content is blurred and unselectable until clicked (js/spoiler.js toggles
   is-revealed). Blur masks any inline content — text, emoticons, and images alike. */
.spoiler {
    cursor: pointer;
    border-radius: var(--radius-xs);
    padding: 0 .25em;
    background: color-mix(in srgb, var(--color-text-strong) 10%, transparent);
}

.spoiler:not(.is-revealed) {
    filter: blur(.4em);
    user-select: none;
}

.spoiler.is-revealed {
    cursor: text;
}

.forum-category {
    margin-bottom: var(--space-6);
}

.forum-list {
    display: grid;
    gap: var(--space-2);
}

.forum-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)), var(--color-surface);
}

.forum-row h3 {
    margin: 0;
    font-size: 1.05rem;
}

.forum-row__desc {
    margin: .15rem 0 0;
    color: var(--color-text-muted);
    font-size: .88rem;
}

.forum-row__stats {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem var(--space-3);
    margin: .35rem 0 0;
    color: var(--color-text-muted);
    font-size: .9rem;
}

.forum-row__stats strong {
    color: var(--color-text-strong);
    font-weight: 800;
}

/* Last author/date pushed to the right edge of the stats row */
.forum-row__latest {
    margin-left: auto;
    text-align: right;
}

/* Full-width tinted category header bar */
.forum-category__header {
    display: flex;
    align-items: center;
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border-left: .25rem solid var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 12%, var(--color-surface));
}

/* Same font size as .widget-title; extra specificity so the base .cat-chip rule (declared later) doesn't win */
.cat-chip.cat-chip--lg {
    padding: .2rem .7rem;
    font-size: .95rem;
}

/* Topic page header: title + subscribe icon on one line */
.topic-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.topic-header h1 {
    margin: 0;
    min-width: 0;
}

.topic-header .icon-btn {
    flex-shrink: 0;
    margin-top: .4rem;
}

.topic-header__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    margin-top: .4rem;
}

.topic-header__actions .icon-btn {
    margin-top: 0;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-btn:hover {
    background: var(--color-surface-3);
    color: var(--color-text-strong);
}

.icon-btn--active {
    color: var(--color-brand);
    border-color: color-mix(in srgb, var(--color-brand) 50%, var(--color-border));
}

.reply-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.reply-form-header h2 {
    margin: 0;
}

/* Compact boxed moderation toolbar */
.moderation-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: .85rem;
}

.moderation-tools__label {
    color: var(--color-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .72rem;
    margin-right: var(--space-2);
}

.moderation-tools button,
.moderation-tools select {
    font-size: .85rem;
    padding: .25rem .6rem;
}

.moderation-tools label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.forum-topic-list td:first-child a {
    color: var(--color-text-strong);
    font-weight: 800;
    text-decoration: none;
}

.forum-create-topic {
    margin-bottom: var(--space-5);
}

.forum-create-topic summary {
    width: fit-content;
    list-style: none;
}

.forum-replies {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.forum-reply {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    /* Keep anchored replies (#reply-n) clear of the sticky site header
       (~89px: 56px logo + 2x1rem padding + border) plus a little breathing room. */
    scroll-margin-top: 6.0rem;
}

/* Desktop card: author sidebar + content grid. Mobile card is hidden by default. */
.reply-card-desktop {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
}

.reply-card-mobile {
    display: none;
}

/* One flat card background: the author column shares the reply surface instead of
   sitting on its own tinted panel. Only the topbar keeps a separating strip. */
.forum-reply aside {
    padding: var(--space-2);
}

.forum-reply aside strong {
    display: block;
    color: var(--color-text-strong);
}

.forum-reply-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
}

.forum-reply-author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* No gap: the author lines carry their own line-height, and stacking a gap on top of
       that inflates the sidebar past the post body and leaves dead space beside it. */
    gap: 0;
}

.forum-reply-author .forum-avatar {
    width: 4.5rem;
    height: 4.5rem;
    margin-top: 0;
    margin-bottom: var(--space-1);
}

.forum-author-name {
    display: block;
    color: var(--color-text-strong);
    font-weight: 700;
    font-size: .95rem;
}

a.forum-author-name {
    text-decoration: underline;
}

.forum-author-role {
    color: color-mix(in srgb, var(--color-text-strong) 72%, var(--color-surface-2));
    font-size: .85rem;
}

.forum-author-badge {
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    padding: 0 var(--space-2);
    color: var(--color-text-muted);
    font-size: .75rem;
}

.forum-author-ip {
    color: color-mix(in srgb, var(--color-text-strong) 66%, var(--color-surface-2));
    font-size: .75rem;
}

.forum-author-epeen {
    color: color-mix(in srgb, var(--color-text-strong) 72%, var(--color-surface-2));
    font-size: .85rem;
}

.reply-card .reply-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
}

/* Paragraphs keep their default bottom margin, which stacks with the content padding and
   leaves a dead strip at the bottom of every reply. Drop it on the trailing element. */
.reply-card .reply-content > :last-child,
.reply-body > :last-child,
.signature > :last-child {
    margin-bottom: 0;
}

.forum-reply header.reply-topbar {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-1) var(--space-3);
    background: color-mix(in srgb, var(--color-text-strong) 8%, var(--color-surface-2));
    color: var(--color-text-muted);
    font-size: .85rem;
}

.reply-topbar-date {
    font-weight: 700;
    color: var(--color-text-strong);
}

.reply-edits {
    margin-top: var(--space-4);
    color: var(--color-text-muted);
    font-size: .85rem;
    font-style: italic;
}

.reply-edits p {
    margin: 0 0 .15rem;
}

.reply-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.reply-actions-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
}

.reply-actions > * + *::before {
    content: "|";
    margin: 0 var(--space-3);
    color: var(--color-text-muted);
}

.reply-actions {
    gap: 0;
}

.reply-actions .reply-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .2rem;
}

.reply-actions .reply-action-icon svg {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

.reply-actions .reply-action-icon:hover {
    text-decoration: none;
}

.reply-actions .reply-action,
.reply-topbar > .reply-action {
    width: auto;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--color-text-strong);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}

.reply-actions .reply-action:hover,
.reply-topbar > .reply-action:hover {
    color: var(--color-brand);
    text-decoration: underline;
}

.reply-actions .reply-permalink,
.reply-topbar > .reply-permalink {
    color: var(--color-text-strong);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.reply-action-panel {
    width: min(34rem, 100%);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.reaction-picker {
    position: relative;
    display: inline-flex;
}

.reaction-picker-popup {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 10;
    display: flex;
    gap: .15rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    padding: .25rem .5rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.25rem);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

.reaction-picker:hover .reaction-picker-popup,
.reaction-picker:focus-within .reaction-picker-popup,
.reaction-picker.open .reaction-picker-popup {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.reaction-picker-popup button {
    width: auto;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    padding: .15rem .25rem;
    background: none;
    box-shadow: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s ease;
}

.reaction-picker-popup button:hover {
    transform: scale(1.3);
}

.reaction-picker-popup button.active {
    background: color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.reaction-summary {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: .8rem;
    cursor: default;
}

.reaction-summary-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--color-surface);
    font-size: .8rem;
    line-height: 1;
}

.reaction-summary-emoji + .reaction-summary-emoji {
    margin-left: -.35rem;
}

.reaction-summary-count {
    margin-left: .35rem;
    font-weight: 700;
}

.forum-avatar {
    width: 6rem;
    height: 6rem;
    margin-top: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    object-fit: cover;
    background: var(--color-surface-2);
}

.signature {
    /* Signature (and reactions below it) pinned to the bottom of the reply box. */
    margin-top: auto;
    border-top: 1px dashed var(--color-border-strong);
    padding-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: .92rem;
}

.reply-body img,
.signature img {
    max-width: 100%;
    height: auto;
}

.markdown-editor {
    display: grid;
    gap: var(--space-3);
}

/* No border/background/padding: the icon buttons carry their own chrome, and an
   outer box would inset the first button relative to the textarea's left edge. */
.markdown-editor__toolbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.markdown-editor__toolbar button,
.markdown-editor__toolbar select,
.markdown-editor__insert-image {
    width: auto;
    min-height: 2.15rem;
    padding: .35rem .6rem;
    font-size: .9rem;
}

.markdown-editor__insert-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.markdown-editor__insert-image input[type="file"] {
    display: none;
}

.markdown-editor__input {
    min-height: 14rem;
}

.markdown-editor__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

.markdown-editor__thumbs img {
    display: block;
    height: 4.5rem;
    max-width: 9rem;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
}

.emoticon-picker {
    position: relative;
}

/* Anchored to the button itself; the button is the first toolbar item, so the
   panel opens directly beneath it without risk of being clipped off-screen. */
.emoticon-picker__panel {
    position: absolute;
    top: calc(100% + .3rem);
    left: 0;
    right: auto;
    z-index: 40;
    width: max-content;
    max-width: min(17rem, calc(100vw - 2rem));
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.emoticon-picker__group {
    margin: 0 0 .35rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}

.emoticon-picker__group + .emoticon-picker__grid {
    margin-bottom: var(--space-3);
}

.emoticon-picker__grid {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.emoticon-picker__grid:last-child {
    margin-bottom: 0;
}

.markdown-editor__toolbar .emoticon-picker__grid button {
    min-height: 0;
    padding: .25rem .35rem;
    font-size: 1.15rem;
    line-height: 1;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
}

.markdown-editor__toolbar .emoticon-picker__grid button:hover {
    border-color: var(--color-border);
    background: var(--color-surface-2);
}

.gif-picker {
    position: relative;
}

/* Anchored to the GIF button itself (second toolbar item), same as the emoticon
   panel, so it opens directly beneath the button instead of below the whole
   (possibly wrapped) toolbar. Width is viewport-capped to avoid clipping. */
.gif-picker__panel {
    position: absolute;
    top: calc(100% + .3rem);
    left: 0;
    z-index: 40;
    width: 21rem;
    max-width: min(21rem, calc(100vw - 2rem));
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.gif-picker__search {
    width: 100%;
    margin-bottom: var(--space-2);
}

.gif-picker__status {
    margin: 0;
    font-size: .85rem;
    color: var(--color-text-muted);
}

.gif-picker__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem;
    max-height: 18rem;
    overflow-y: auto;
}

.markdown-editor__toolbar .gif-picker__grid button {
    min-height: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    overflow: hidden;
}

.markdown-editor__toolbar .gif-picker__grid button:hover {
    border-color: var(--color-border);
}

.gif-picker__grid img {
    display: block;
    width: 100%;
    height: 6rem;
    object-fit: cover;
}

.gif-picker__attribution {
    margin: var(--space-2) 0 0;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    text-align: right;
}

/* Formatting tools: shown inline on roomy screens, collapsed into a dropdown on
   narrow ones so the toolbar never wraps onto a second row. The two copies are the
   same markup, so exactly one of them must be visible at any width. */
.markdown-editor__format-inline {
    display: contents;
}

.format-picker {
    position: relative;
    display: none;
}

.format-picker__panel {
    position: absolute;
    top: calc(100% + .3rem);
    left: 0;
    z-index: 40;
    display: flex;
    gap: .25rem;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

@media (max-width: 560px) {
    .markdown-editor__format-inline {
        display: none;
    }

    .format-picker {
        display: inline-block;
    }
}

.profile-avatar {
    width: 7rem;
    height: 7rem;
    border: 2px solid var(--color-border);
    border-radius: 1.4rem;
    object-fit: cover;
    background: var(--color-surface-2);
}

#blazor-error-ui {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 1000;
    display: none;
    max-width: min(32rem, calc(100vw - 2rem));
    border: 1px solid rgba(255, 92, 108, .5);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: #341219;
    color: #ffe4e7;
    box-shadow: var(--shadow-soft);
}

#blazor-error-ui .reload {
    margin-left: var(--space-2);
}

#blazor-error-ui .dismiss {
    margin-left: var(--space-3);
    cursor: pointer;
}

.blazor-error-boundary {
    border-radius: var(--radius-md);
    background: rgba(255, 92, 108, .16);
    padding: 1rem 1rem 1rem 3.7rem;
    color: #ffe4e7;
}

.blazor-error-boundary::after {
    content: "Der opstod en fejl.";
}

.darker-border-checkbox.form-check-input {
    border-color: var(--color-border-strong);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--color-text-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

@media (max-width: 760px) {
    .d-flex,
    .input-group {
        align-items: stretch;
        flex-direction: column;
    }

    .reply-card-desktop {
        display: none;
    }

    .reply-card-mobile {
        display: block;
    }

    table,
    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Mobile reply card internals (the card itself is only visible below 760px). */
.reply-card-mobile .reply-topbar {
    /* Only the date, the IP and the permalink live here, so they must never wrap. */
    flex-wrap: nowrap;
}

.reply-topbar-meta {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}

.reply-topbar-ip {
    color: var(--color-text-muted);
    font-size: .75rem;
    font-weight: 400;
}

/* The IP moves to the topbar on mobile, so drop the sidebar copy. */
.reply-card-mobile .forum-author-ip {
    display: none;
}

.reply-card-mobile-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
}

.reply-card-mobile aside {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: none;
}

.reply-card-mobile .forum-reply-author {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-3);
}

.reply-card-mobile .forum-reply-author .forum-avatar {
    flex-shrink: 0;
    /* Kept no taller than the author lines beside it so the head has no overhang. */
    width: 4.25rem;
    height: 4.25rem;
    margin: 0;
    border-radius: .8rem;
}

.reply-card-mobile .forum-reply-author-info {
    align-items: flex-start;
    gap: 0;
    min-width: 0;
}

.reply-card-mobile .reply-actions-wrap {
    flex-shrink: 0;
    align-self: flex-start;
}

/* Actions stacked in a compact grid to the right of the avatar. Every icon has a fixed
   cell so the buttons stay put no matter which of them a given user can see. */
.reply-actions-grid {
    display: grid;
    grid-template-columns: 1.9rem 1.9rem 2.4rem 1.9rem;
    grid-template-rows: repeat(2, 1.9rem);
    gap: .2rem;
    align-items: center;
    justify-items: center;
    flex-wrap: nowrap;
}

.reply-actions-grid > .reaction-summary { grid-area: 1 / 3; }
.reply-actions-grid > .reaction-picker { grid-area: 1 / 4; }
.reply-actions-grid > .reply-action-edit,
.reply-actions-grid > .reply-action-restore { grid-area: 2 / 1; }
.reply-actions-grid > .reply-action-delete { grid-area: 2 / 2; }
.reply-actions-grid > .reply-action-report { grid-area: 2 / 3; }
.reply-actions-grid > .reply-action-quote { grid-area: 2 / 4; }

.reply-actions-grid > * + *::before {
    /* The pipe separators from the inline action row make no sense in a grid. */
    content: none;
    margin: 0;
}

.reply-actions-grid .reply-action-icon,
.reply-actions-grid .reaction-picker > .reply-action {
    /* Touch-friendly hit area. */
    min-width: 1.9rem;
    min-height: 1.9rem;
    padding: .3rem;
}

.reply-actions-grid .reaction-picker,
.reply-actions-grid .reaction-summary {
    justify-content: center;
}

.reply-card-mobile .reply-action-panel {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Light/dark theme toggle button */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    min-height: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(0, 0, 0, .18);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: rgba(0, 0, 0, .32);
    border-color: #fff;
    color: #fff;
}

.theme-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle__icon .theme-icon {
    display: none;
    width: 1.15rem;
    height: 1.15rem;
}

/* No mode attribute yet (pre-hydration) falls back to the system icon. */
.theme-toggle__icon .theme-icon--system {
    display: block;
}

html[data-theme-mode="light"] .theme-toggle__icon .theme-icon--system,
html[data-theme-mode="dark"] .theme-toggle__icon .theme-icon--system {
    display: none;
}

html[data-theme-mode="light"] .theme-toggle__icon .theme-icon--light,
html[data-theme-mode="dark"] .theme-toggle__icon .theme-icon--dark {
    display: block;
}

/* Category color chips (old catblock palette) */
.cat-chip {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: var(--radius-xs);
    background: var(--color-surface-3);
    color: var(--color-text-strong);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.5;
    text-decoration: none;
}

.cat-chip--brand { background: var(--color-brand); color: var(--color-brand-ink); }

/* Right-hand magazine sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.widget {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}

.widget-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .7rem var(--space-4) .45rem;
    background: none;
    color: var(--color-text-strong);
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Old-site widget header: thin line extending right from the title text */
.widget-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border-strong);
}

.widget-body {
    padding: 0 var(--space-4) var(--space-4);
}

/* Forum statistics widget */
.widget-stats {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-4) var(--space-3);
}

.widget-stats li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: .9rem;
}

.widget-stats li:last-child {
    border-bottom: 0;
}

.widget-stats__value {
    font-weight: 700;
    color: var(--color-text-strong);
}

/* Online Rushers widget */
.online-summary {
    margin: 0 0 .6rem;
    font-size: .9rem;
}

.online-group {
    margin-bottom: .5rem;
}

.online-group__role {
    display: block;
    margin-bottom: .3rem;
    color: var(--color-text-strong);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.online-user {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 .75rem .3rem 0;
    color: var(--color-text);
    font-size: .88rem;
    text-decoration: none;
}

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

.online-user__avatar {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    object-fit: cover;
}

.online-record {
    margin: .6rem 0 0;
    color: var(--color-text-muted);
    font-size: .8rem;
}

.widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget-list li {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.widget-list li:last-child {
    border-bottom: 0;
}

.widget-list__title {
    color: var(--color-text-strong);
    font-weight: 600;
    text-decoration: none;
}

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

.widget-list__meta {
    color: var(--color-text-muted);
    font-size: .78rem;
}

.widget-thread__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.widget-list__badge,
.count-bubble {
    position: relative;
    flex-shrink: 0;
    background: var(--color-brand);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    padding: .35rem .5rem;
    border-radius: 3px;
    text-decoration: none;
}

.widget-list__badge {
    margin-bottom: .35rem;
}

/* Speech-bubble tail (bottom-right), like the old site */
.widget-list__badge::after,
.count-bubble::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: -5px;
    border-left: 7px solid transparent;
    border-top: 6px solid var(--color-brand);
}

.widget-list__badge:hover,
.count-bubble:hover {
    filter: brightness(1.1);
    color: #fff;
}

.widget-list__meta-link {
    color: var(--color-text-muted);
    text-decoration: underline;
}

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

.widget-empty {
    margin: 0;
    padding: .6rem var(--space-4);
    color: var(--color-text-muted);
}

/* Cookie banner: hidden once consent is stored (data attribute set on <html>
   by the inline head script / js/cookies.js — survives Blazor re-renders). */
html[data-cookies-ok] .cookie-banner {
    display: none;
}

/* Loading indicator: brand-red spinner + text, used for all "Indlæser..." states */
.loading-indicator {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: var(--space-3) 0;
    color: var(--color-text-muted);
}

.loading-indicator__spinner {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: loading-spin .8s linear infinite;
}

@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loading-indicator__spinner {
        animation: none;
    }
}


/* Country flags: Windows' Segoe UI Emoji has no flag glyphs, so regional
   indicator pairs render as bare letters ("DK"). Twemoji Country Flags only
   contains flag glyphs and is downloaded lazily - browsers fetch it solely on
   pages that actually render a .country-flag element (admin/statistics).
   Font: Twemoji (Twitter) - CC-BY 4.0. */
@font-face {
    font-family: 'Twemoji Country Flags';
    src: url('fonts/TwemojiCountryFlags.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+1F1E6-1F1FF;
}

.country-flag {
    font-family: 'Twemoji Country Flags', var(--font-body);
    font-style: normal;
    line-height: 1;
}

/* Emoticons: unicode emoji by default; the old dailyrush-emoticons font glyphs
   are shown for explicit special shortcodes (.emo-x) or for all emoticons when
   the viewer prefers them (.emo-always wrapper class). */
@font-face {
    font-family: 'wp-font-emots';
    src: url('fonts/wp-font-emots.woff') format('woff'),
         url('fonts/wp-font-emots.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.emo {
    font-style: normal;
    line-height: 1;
}

.emo-happy { --emo-glyph: '\e800'; }
.emo-wink { --emo-glyph: '\e801'; }
.emo-unhappy { --emo-glyph: '\e803'; }
.emo-sleep { --emo-glyph: '\e804'; }
.emo-devil { --emo-glyph: '\e806'; }
.emo-surprised { --emo-glyph: '\e807'; }
.emo-tongue { --emo-glyph: '\e808'; }
.emo-coffee { --emo-glyph: '\e809'; }
.emo-sunglasses { --emo-glyph: '\e80a'; }
.emo-displeased { --emo-glyph: '\e80b'; }
.emo-beer { --emo-glyph: '\e80c'; }
.emo-grin { --emo-glyph: '\e80d'; }
.emo-angry { --emo-glyph: '\e80e'; }
.emo-saint { --emo-glyph: '\e80f'; }
.emo-cry { --emo-glyph: '\e810'; }
.emo-shoot { --emo-glyph: '\e811'; }
.emo-squint { --emo-glyph: '\e812'; }
.emo-laugh { --emo-glyph: '\e813'; }

/* Glyph-capable emoticons (.emo-g): hide the emoji text and show the font glyph
   when explicitly requested by the author (.emo-x) or by the viewer (.emo-always). */
.emo-g.emo-x,
.emo-always .emo-g {
    font-size: 0;
}

.emo-g.emo-x::before,
.emo-always .emo-g::before {
    content: var(--emo-glyph);
    font-family: 'wp-font-emots';
    font-size: 1.4rem;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.75);
    display: inline-block;
    vertical-align: -0.2em;
    margin-right: 0.1em;
}

/* Feedback (bug/feature) triage status badges and dev tools */
.feedback-badge {
    display: inline-block;
    vertical-align: middle;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.feedback-badge--planned,
.feedback-badge--inprogress {
    background: color-mix(in srgb, var(--cat-cyan) 18%, var(--color-surface));
    color: var(--cat-cyan);
    border: 1px solid color-mix(in srgb, var(--cat-cyan) 55%, transparent);
}

.feedback-badge--implemented {
    background: color-mix(in srgb, var(--cat-green) 18%, var(--color-surface));
    color: var(--cat-green);
    border: 1px solid color-mix(in srgb, var(--cat-green) 55%, transparent);
}

.feedback-badge--needsinfo,
.feedback-badge--duplicate {
    background: color-mix(in srgb, var(--cat-orange) 18%, var(--color-surface));
    color: var(--cat-orange);
    border: 1px solid color-mix(in srgb, var(--cat-orange) 55%, transparent);
}

.feedback-badge--wontfix,
.feedback-badge--cannotreproduce {
    background: color-mix(in srgb, var(--cat-red) 18%, var(--color-surface));
    color: var(--cat-red);
    border: 1px solid color-mix(in srgb, var(--cat-red) 55%, transparent);
}

.feedback-status-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.feedback-status-tools__label {
    color: var(--color-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .72rem;
    margin-right: var(--space-2);
}

.feedback-status-tools__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.feedback-status-tools__button {
    font-size: .85rem;
    padding: .25rem .6rem;
}

.feedback-status-tools__button.is-active {
    outline: 2px solid var(--color-brand);
}

.feedback-status-tools__comment {
    display: flex;
    flex: 1 1 20rem;
    flex-direction: column;
    gap: .2rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: .8rem;
}

/* Guidance panel on the bug/feature request form */
.feedback-guide {
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.feedback-guide > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-text-strong);
}

.feedback-guide ul {
    margin: var(--space-2) 0 0;
    padding-left: 1.2rem;
    color: var(--color-text-muted);
    font-size: .9rem;
}

.feedback-guide li {
    margin-bottom: .35rem;
}

.feedback-guide__note {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: .85rem;
}