:root {
    --c-header-bg: #13202e;
    --c-primary: #1d74b8;
    --c-primary-hover: #175f97;
    --c-primary-light: rgba(29, 116, 184, 0.08);
    --c-primary-border: rgba(29, 116, 184, 0.28);
    --c-bg: #f8f9fa;
    --c-surface: #ffffff;
    --c-hover: #f3f4f6;
    --c-code-bg: #1e1e2e;
    --c-code-text: #cdd6f4;
    --c-text: #1a1a2e;
    --c-text-muted: #6b7280;
    --c-border: #e5e7eb;
    --c-border-strong: #d1d5db;
    --c-success: #059669;
    --c-danger: #dc2626;
    --c-warning: #d97706;
    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

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

body {
    /* The fallback repeats the default stack so the page still reads
       correctly if the theme's <style> block is missing for any reason. */
    font-family: var(--font-body, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

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

a:hover {
    text-decoration: underline;
}

.container {
    /* Set by the theme. The fallback is the shipped default rather than the
       old 980px, so a page still looks right if the token block is missing. */
    max-width: var(--container, 1200px);
    margin: 0 auto;
    /* Enough that the full-width setting still breathes rather than sitting
       against the glass. */
    padding: 0 1.5rem;
}

/* Header */
.site-header {
    /* A deep blue-slate in the logo's own hue family, exposed as a variable
       so the sticky header's translucent version reads the same colour. */
    background: var(--c-header-bg, #13202e);
    color: #fff;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    gap: 1rem;
}

.site-logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: -0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.site-logo:hover {
    text-decoration: none;
    opacity: 0.9;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header-nav a {
    color: rgba(255,255,255,0.8);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}

.header-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
    text-decoration: none;
}

.header-nav .btn-sm {
    background: var(--c-primary);
    color: #fff;
    padding: 0.35rem 0.9rem;
    border-radius: 6px;
}

.header-nav .btn-sm:hover {
    background: var(--c-primary-hover);
}

.header-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-username {
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Main */
.site-main {
    padding: 1.5rem 0 3rem;
    min-height: calc(100vh - 56px - 60px);
}

/* Footer */
.site-footer {
    padding: 1.25rem 0;
    text-align: center;
    color: var(--c-text-muted);
    font-size: 0.82rem;
    border-top: 1px solid var(--c-border);
}

/* Page header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 0.85rem;
    color: var(--c-text-muted);
    margin-bottom: 1rem;
}

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

.breadcrumb a:hover {
    color: var(--c-primary);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    text-decoration: none;
    line-height: 1.4;
}

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

.btn-primary {
    background: var(--c-primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--c-primary-hover);
    color: #fff;
}

.btn-danger {
    background: var(--c-danger);
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: var(--c-text);
    border: 1px solid var(--c-border-strong);
}

.btn-outline:hover {
    background: var(--c-bg);
}

/* Forms */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--c-text);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--c-border-strong);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-light);
}

/* Alerts */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.alert-error {
    background: #fef2f2;
    color: var(--c-danger);
    border: 1px solid #fecaca;
}

.alert-success {
    background: #f0fdf4;
    color: var(--c-success);
    border: 1px solid #bbf7d0;
}

.alert-warning {
    background: #fffbeb;
    color: var(--c-warning);
    border: 1px solid #fde68a;
}

/* Forum index */
.forum-category {
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.category-header {
    padding: 0.75rem 1rem;
    background: var(--c-hover);
    border-bottom: 1px solid var(--c-border);
}

.category-header h3 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
}

.forum-row {
    display: flex;
    align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
    text-decoration: none;
    transition: background 0.1s;
    gap: 0.85rem;
}

.forum-row:last-child {
    border-bottom: none;
}

.forum-row:hover {
    background: var(--c-hover);
    text-decoration: none;
}

.forum-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary-light);
    border-radius: 8px;
    color: var(--c-primary);
}

.forum-info {
    flex: 1;
    min-width: 0;
}

.forum-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.forum-desc {
    font-size: 0.82rem;
    color: var(--c-text-muted);
    margin-top: 0.15rem;
}

.forum-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.82rem;
    color: var(--c-text-muted);
    flex-shrink: 0;
}

/* Topic list */
.topic-list {
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.topic-row {
    display: flex;
    align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
    text-decoration: none;
    transition: background 0.1s;
    gap: 0.75rem;
}

.topic-row:last-child {
    border-bottom: none;
}

.topic-row:hover {
    background: var(--c-hover);
    text-decoration: none;
}

.topic-meta {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.topic-info {
    flex: 1;
    min-width: 0;
}

.topic-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.topic-starter {
    font-size: 0.82rem;
    color: var(--c-text-muted);
    margin-top: 0.1rem;
}

.topic-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.82rem;
    color: var(--c-text-muted);
    flex-shrink: 0;
}

.topic-meta-bar {
    font-size: 0.85rem;
    color: var(--c-text-muted);
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.15em 0.55em;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
}

.badge-pin {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-lock {
    background: #fef3c7;
    color: #92400e;
}

/* Post list */
.post-list {
    margin-bottom: 1.5rem;
}

.post {
    display: flex;
    gap: 1rem;
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
}

.post-sidebar {
    flex-shrink: 0;
    width: 100px;
    text-align: center;
}

.post-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 auto 0.5rem;
}

.post-author {
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
    color: var(--c-text);
}

.post-author:hover {
    color: var(--c-primary);
}

.post-author-stats {
    font-size: 0.75rem;
    color: var(--c-text-muted);
    margin-top: 0.15rem;
}

.post-content {
    flex: 1;
    min-width: 0;
}

.post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    color: var(--c-text-muted);
}

.post-number {
    color: var(--c-text-muted);
    font-weight: 500;
}

.post-number:hover {
    color: var(--c-primary);
}

.post-body {
    font-size: 0.95rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}

.post-body p {
    margin-bottom: 0.75rem;
}

.post-body p:last-child {
    margin-bottom: 0;
}

.post-body h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 1.25rem 0 0.75rem;
}

.post-body h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
}

.post-body ul, .post-body ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.post-body blockquote {
    border-left: 3px solid var(--c-border-strong);
    padding-left: 1rem;
    margin: 0.75rem 0;
    color: var(--c-text-muted);
}

.post-body pre {
    background: var(--c-code-bg);
    color: var(--c-code-text);
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.75rem 0;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
}

.post-body code {
    background: var(--c-hover);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.875em;
}

.post-body pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

.post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.post-body hr {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: 1.5rem 0;
}

.post-edited {
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: var(--c-text-muted);
    font-style: italic;
}

/* Reply form */
.reply-form-wrapper {
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}

.reply-form-wrapper h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Topic form */
.topic-form {
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--c-text);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.page-link:hover {
    background: var(--c-hover);
    text-decoration: none;
}

.page-link.active {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--c-text-muted);
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Profile */
.profile-card {
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    text-align: center;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}

.profile-username {
    font-size: 1.5rem;
    font-weight: 700;
}

.profile-title {
    color: var(--c-text-muted);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.profile-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--c-text-muted);
}

.profile-stats strong {
    display: block;
    font-size: 1.1rem;
    color: var(--c-text);
}

/* Auth forms */
.auth-form {
    max-width: 400px;
    margin: 2rem auto;
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}

.auth-form h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.auth-form .btn {
    width: 100%;
    margin-top: 0.5rem;
}

.auth-links {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--c-text-muted);
}

/* Forum description */
.forum-description {
    color: var(--c-text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

/* Tag badges */
.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.65em;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
}

.tag-badge i {
    font-size: 0.75em;
}

.tag-badge-sm {
    font-size: 0.72rem;
    padding: 0.15em 0.5em;
}

.topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.topic-tags-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.2rem;
}

/* Tag picker */
.tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-picker-item {
    cursor: pointer;
    display: inline-flex;
}

.tag-picker-item input[type="checkbox"] {
    display: none;
}

.tag-picker-item .tag-badge {
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s, box-shadow 0.15s;
}

.tag-picker-item input[type="checkbox"]:checked + .tag-badge {
    opacity: 1;
    box-shadow: 0 0 0 2px currentColor;
}

.tag-picker-item:hover .tag-badge {
    opacity: 0.85;
}

/* Responsive */
@media (max-width: 640px) {
    .post {
        flex-direction: column;
    }

    .post-sidebar {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-align: left;
    }

    .post-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        margin: 0;
    }

    .post-author-stats {
        display: none;
    }

    .forum-stats,
    .topic-stats {
        display: none;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Mod toolbar */
.mod-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.mod-toolbar-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mod-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    background: var(--c-surface);
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--c-text);
    transition: background 0.15s;
}

.mod-btn:hover {
    background: var(--c-hover);
}

.mod-btn-danger {
    color: #dc2626;
    border-color: #fecaca;
}

.mod-btn-danger:hover {
    background: #fef2f2;
}

.mod-btn-sm {
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
}

.mod-indicator {
    display: inline-block;
    padding: 0.15em 0.5em;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
}

.mod-locked { background: #fef3c7; color: #92400e; }
.mod-pinned { background: #dbeafe; color: #1d4ed8; }
.mod-hidden { background: #fef2f2; color: #991b1b; }

.post-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--c-border);
}

/* Report modal */
.report-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}

.report-modal-box {
    position: relative;
    background: var(--c-surface);
    border-radius: 8px;
    padding: 1.5rem;
    width: 90%;
    max-width: 440px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.report-modal-box h3 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.btn-outline {
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
}

.btn-outline:hover {
    background: var(--c-hover);
}

/* Header search */
.header-search {
    flex: 0 1 280px;
    margin-left: auto;
    margin-right: 1rem;
}

.header-search input {
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 0.875rem;
}

.header-search input::placeholder {
    color: rgba(255,255,255,0.45);
}

.header-search input:focus {
    outline: none;
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.3);
}

/* Search page */
.search-panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.search-main-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.search-input {
    flex: 1;
    font-size: 1rem;
}

.search-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.search-filter label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-text-muted);
    margin-bottom: 0.3rem;
}

.search-results-header {
    font-size: 0.9rem;
    color: var(--c-text-muted);
    margin-bottom: 1rem;
}

.search-result {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.search-result-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-primary);
    text-decoration: none;
    margin-bottom: 0.35rem;
}

.search-result-title:hover {
    text-decoration: underline;
}

.search-result-excerpt {
    font-size: 0.9rem;
    color: var(--c-text);
    line-height: 1.55;
    margin-bottom: 0.5rem;
}

.search-result-meta {
    font-size: 0.82rem;
    color: var(--c-text-muted);
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.search-result-meta a {
    color: var(--c-text-muted);
}

.search-empty {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--c-text-muted);
}

/* Notification bell */
.header-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    text-decoration: none;
    color: rgba(255,255,255,0.8);
}

.header-bell:hover {
    background: rgba(255,255,255,0.16);
}

.bell-icon {
    font-size: 0.7rem;
}

.bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Notification list */
.notification {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.25rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: var(--c-text);
    transition: background 0.15s;
}

.notification:hover {
    background: var(--c-hover);
}

.notification-unread {
    border-left: 3px solid var(--c-primary);
    background: var(--c-primary-light);
}

.notification-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.notification-body {
    flex: 1;
    min-width: 0;
}

.notification-text {
    font-size: 0.92rem;
    line-height: 1.45;
}

.notification-time {
    font-size: 0.8rem;
    color: var(--c-text-muted);
    margin-top: 0.15rem;
}

.notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-primary);
    flex-shrink: 0;
}

/* Conversations */
.conversation {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: var(--c-text);
    transition: background 0.15s;
}

.conversation:hover {
    background: var(--c-hover);
}

.conversation-unread {
    border-left: 3px solid var(--c-primary);
    background: var(--c-primary-light);
}

.conversation-main {
    flex: 1;
    min-width: 0;
}

.conversation-subject {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.conversation-participants {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.participant-chip {
    display: inline-block;
    padding: 0.1em 0.5em;
    font-size: 0.75rem;
    border-radius: 4px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    text-decoration: none;
}

.conversation-meta {
    text-align: right;
    font-size: 0.82rem;
    color: var(--c-text-muted);
    flex-shrink: 0;
}

.conversation-time {
    margin-top: 0.15rem;
}

.conversation-participants-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.6rem 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.participants-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-text-muted);
}

/* Messages */
.message {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.message-own {
    background: var(--c-primary-light);
    border-color: var(--c-primary-border);
}

.message-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.message-content {
    flex: 1;
    min-width: 0;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

.message-header time {
    font-size: 0.8rem;
    color: var(--c-text-muted);
}

.message-body {
    line-height: 1.6;
}

.message-body p:first-child { margin-top: 0; }
.message-body p:last-child { margin-bottom: 0; }

.alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Mentions */
.mention {
    display: inline-block;
    padding: 0 0.25em;
    border-radius: 3px;
    background: var(--c-primary-light);
    color: var(--c-primary);
    font-weight: 500;
    text-decoration: none;
}

.mention:hover {
    background: rgba(29, 116, 184, 0.16);
}

.mention-dropdown {
    position: absolute;
    z-index: 1000;
    min-width: 180px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.25rem;
}

.mention-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.6rem;
    border: none;
    background: none;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--c-text);
    cursor: pointer;
}

.mention-item:hover,
.mention-item.active {
    background: var(--c-primary);
    color: #fff;
}

/* Quoted content inside posts */
.post-body blockquote,
.message-body blockquote {
    margin: 0.75rem 0;
    padding: 0.6rem 1rem;
    border-left: 3px solid var(--c-primary);
    background: var(--c-bg);
    border-radius: 0 6px 6px 0;
    color: var(--c-text);
}

.post-body blockquote p:first-child,
.message-body blockquote p:first-child {
    margin-top: 0;
}

.post-body blockquote p:last-child,
.message-body blockquote p:last-child {
    margin-bottom: 0;
}

/* Reactions */
.reaction-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.reaction-counts {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.reaction-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    font-size: 0.8rem;
    color: var(--c-text-muted);
}

.reaction-emoji {
    font-size: 0.9rem;
    line-height: 1;
}

.reaction-picker {
    position: relative;
}

.reaction-trigger {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: var(--c-surface);
    font-size: 0.78rem;
    color: var(--c-text-muted);
    cursor: pointer;
}

.reaction-trigger:hover {
    background: var(--c-primary-light);
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.reaction-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    gap: 0.15rem;
    padding: 0.3rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.reaction-menu.open {
    display: flex;
}

.reaction-option {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
}

.reaction-option:hover {
    background: var(--c-primary-light);
    transform: scale(1.15);
}

.reaction-option.selected {
    background: var(--c-primary);
}

.profile-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

/* Activity stream */
.activity-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.activity-filters form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.activity-filters label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-text-muted);
}

.activity-filters select {
    max-width: 240px;
}

.activity-total {
    font-size: 0.85rem;
    color: var(--c-text-muted);
}

.activity-item {
    display: flex;
    gap: 0.85rem;
    padding: 0.9rem 1.25rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.activity-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.activity-body {
    flex: 1;
    min-width: 0;
}

.activity-headline {
    font-size: 0.92rem;
    margin-bottom: 0.25rem;
}

.activity-headline a {
    font-weight: 600;
    text-decoration: none;
    color: var(--c-primary);
}

.activity-headline a:hover {
    text-decoration: underline;
}

.activity-verb {
    display: inline-block;
    padding: 0.05em 0.4em;
    margin: 0 0.15em;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.activity-verb-topic { background: #dcfce7; color: #166534; }
.activity-verb-reply { background: #dbeafe; color: #1d4ed8; }

.activity-excerpt {
    font-size: 0.88rem;
    color: var(--c-text-muted);
    line-height: 1.5;
    margin-bottom: 0.3rem;
}

.activity-meta {
    font-size: 0.8rem;
    color: var(--c-text-muted);
}

.activity-meta a {
    color: var(--c-text-muted);
}

/* Attachments — composer */
.attach-btn {
    margin-top: 0.5rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-surface);
    font-size: 0.83rem;
    color: var(--c-text-muted);
    cursor: pointer;
}

.attach-btn:hover {
    background: var(--c-primary-light);
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.drop-active {
    outline: 2px dashed var(--c-primary);
    outline-offset: 3px;
}

.attachment-strip {
    margin-top: 0.5rem;
}

.attachment-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.25rem;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-surface);
    font-size: 0.85rem;
}

.attachment-row.pending {
    color: var(--c-text-muted);
    font-style: italic;
}

.attachment-row.error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Attachments — rendered on posts */
.post-attachments {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--c-border);
}

.post-attachments-label {
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
    margin-bottom: 0.15rem;
}

.attachment-thumb {
    display: block;
    width: 108px;
    height: 108px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--c-border);
}

.attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.18s;
}

.attachment-thumb:hover img {
    transform: scale(1.06);
}

.attachment-file {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-bg);
    text-decoration: none;
    color: var(--c-text);
    font-size: 0.85rem;
}

.attachment-file:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.attachment-size {
    font-size: 0.78rem;
    color: var(--c-text-muted);
    margin-left: auto;
}

/* Inline images inside posts */
.post-body img,
.message-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    cursor: zoom-in;
}

/* Lightbox */
body.lightbox-open {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    padding: 2rem;
}

.lightbox img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 6px;
    cursor: zoom-out;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.lightbox-caption {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    max-width: 80%;
    text-align: center;
}

/* Theme toggle */
.theme-toggle-form {
    display: inline-flex;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 640px) {
    .header-nav a { padding: 0.4rem 0.5rem; font-size: 0.85rem; }
}

/* ---------------------------------------------------------------------------
   Dark mode adjustments.

   The palette variables cover surfaces and text, but semantic badges (alerts,
   mod indicators, verb chips) use fixed tints that were picked against a white
   background. These re-tune them for a dark one. Applies both when the visitor
   has chosen dark explicitly and when 'auto' resolves to dark via the OS.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] .alert-error,
:root[data-theme="dark"] .admin-alert-error {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.3);
    color: #fca5a5;
}

:root[data-theme="dark"] .alert-success,
:root[data-theme="dark"] .admin-alert-success {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.3);
    color: #6ee7b7;
}

:root[data-theme="dark"] .alert-warning {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fcd34d;
}

:root[data-theme="dark"] .mod-toolbar {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.25);
}

:root[data-theme="dark"] .mod-toolbar-label {
    color: #fcd34d;
}

:root[data-theme="dark"] .mod-locked { background: rgba(251,191,36,0.16); color: #fcd34d; }
:root[data-theme="dark"] .mod-pinned { background: rgba(96,165,250,0.16); color: #93c5fd; }
:root[data-theme="dark"] .mod-hidden { background: rgba(248,113,113,0.16); color: #fca5a5; }

:root[data-theme="dark"] .activity-verb-topic { background: rgba(52,211,153,0.16); color: #6ee7b7; }
:root[data-theme="dark"] .activity-verb-reply { background: rgba(96,165,250,0.16); color: #93c5fd; }

:root[data-theme="dark"] .mod-btn,
:root[data-theme="dark"] .attach-btn,
:root[data-theme="dark"] .reaction-trigger,
:root[data-theme="dark"] .btn-outline {
    background: var(--c-surface);
    border-color: var(--c-border-strong);
    color: var(--c-text-muted);
}

:root[data-theme="dark"] .mod-btn:hover,
:root[data-theme="dark"] .attach-btn:hover,
:root[data-theme="dark"] .reaction-trigger:hover,
:root[data-theme="dark"] .btn-outline:hover {
    background: var(--c-hover);
    color: var(--c-text);
}

:root[data-theme="dark"] .mod-btn-danger {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.35);
}

:root[data-theme="dark"] .report-content-preview {
    background: rgba(251, 191, 36, 0.08);
    border-left-color: #fbbf24;
}

:root[data-theme="dark"] .search-empty,
:root[data-theme="dark"] .report-reason {
    background: var(--c-hover);
}


.header-nav form button,
.header-user form button {
    white-space: nowrap;
}

.header-user {
    flex-shrink: 0;
}

/* Who's online */
.online-block {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    margin-top: 1.5rem;
    overflow: hidden;
}

.online-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background: var(--c-hover);
    border-bottom: 1px solid var(--c-border);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
}

.online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-success);
    flex-shrink: 0;
}

.online-body {
    padding: 0.9rem 1rem;
}

.online-counts {
    font-size: 0.9rem;
    color: var(--c-text-muted);
}

.online-counts strong {
    color: var(--c-text);
}

.online-members {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.online-member {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--c-primary-light);
    color: var(--c-primary);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
}

.online-member:hover {
    text-decoration: none;
    background: var(--c-primary);
    color: #fff;
}

.online-total {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--c-border);
    font-size: 0.82rem;
    color: var(--c-text-muted);
}

/* Topic prefixes */
.prefix-badge {
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    white-space: nowrap;
}

.page-header h2 .prefix-badge {
    font-size: 0.7rem;
    position: relative;
    top: -2px;
}

.prefix-filter {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.prefix-chip {
    --chip: var(--c-text-muted);
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 14px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-text-muted);
    text-decoration: none;
}

.prefix-chip:hover {
    text-decoration: none;
    border-color: var(--chip);
    color: var(--chip);
}

.prefix-chip.active {
    background: var(--chip);
    border-color: var(--chip);
    color: #fff;
}

/* Logo */
.site-logo {
    display: inline-flex;
    align-items: center;
}

.site-logo-img {
    height: 30px;
    width: auto;
    display: block;
}

@media (max-width: 640px) {
    .site-logo-img { height: 26px; }
}


/* Search trigger */
.search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.search-trigger:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Search modal */
body.search-open {
    overflow: hidden;
}

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 1rem;
}

.search-modal[hidden] {
    display: none;
}

.search-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 11, 16, 0.55);
    backdrop-filter: blur(3px);
}

.search-modal-panel {
    position: relative;
    width: 100%;
    max-width: 580px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    animation: search-in 0.14s ease-out;
}

@keyframes search-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .search-modal-panel { animation: none; }
}

.search-modal-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--c-border);
}

.search-modal-icon {
    flex-shrink: 0;
    color: var(--c-text-muted);
}

.search-modal-head input {
    flex: 1;
    border: none;
    background: none;
    font-size: 1rem;
    font-family: inherit;
    color: var(--c-text);
    padding: 0;
}

.search-modal-head input:focus {
    outline: none;
}

.search-modal-esc {
    flex-shrink: 0;
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--c-border);
    border-radius: 5px;
    background: var(--c-bg);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--c-text-muted);
    cursor: pointer;
}

.search-modal-esc:hover {
    color: var(--c-text);
}

.search-modal-results {
    max-height: 46vh;
    overflow-y: auto;
}

.search-modal-note {
    padding: 1.4rem 1rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--c-text-muted);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: var(--c-text);
    border-left: 2px solid transparent;
}

.search-result-item:hover,
.search-result-item.active {
    background: var(--c-hover);
    border-left-color: var(--c-primary);
    text-decoration: none;
}

.search-result-kind {
    flex-shrink: 0;
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kind-topic { background: rgba(52, 211, 153, 0.18); color: #059669; }
.kind-post  { background: rgba(96, 165, 250, 0.18); color: #1d4ed8; }

:root[data-theme="dark"] .kind-topic { color: #6ee7b7; }
:root[data-theme="dark"] .kind-post  { color: #93c5fd; }

.search-result-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.search-result-heading {
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-sub {
    font-size: 0.8rem;
    color: var(--c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-by {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--c-text-muted);
}

.search-modal-foot {
    display: flex;
    gap: 1rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--c-border);
    background: var(--c-bg);
    font-size: 0.72rem;
    color: var(--c-text-muted);
}

.search-modal-foot kbd {
    display: inline-block;
    min-width: 16px;
    padding: 0 0.2em;
    margin-right: 0.15em;
    border: 1px solid var(--c-border-strong);
    border-radius: 3px;
    background: var(--c-surface);
    font-family: inherit;
    font-size: 0.7rem;
    text-align: center;
}

@media (max-width: 640px) {
    .search-modal { padding-top: 6vh; }
    .search-modal-foot { display: none; }
    .search-result-by { display: none; }
}

/* Menus
   ------------------------------------------------------------------------
   The header links are admin-managed (Admin -> Menus). .menu-link inherits
   the .header-nav a rules above; only the dropdown needs anything new.

   Submenus open on :hover and on :focus-within, with no JavaScript. That
   means they work before scripts load, and tabbing into the parent reveals
   the children without a roving-tabindex implementation to get wrong.      */

.menu-parent {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Labels are admin-written and can be long. Wrapping one across two lines
   inside a single-row header is worse than letting the row scroll. */
.menu-link { white-space: nowrap; }

.menu-caret {
    margin-left: 0.3rem;
    font-size: 0.7em;
    opacity: 0.75;
}

.menu-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 12rem;
    padding: 0.35rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius, 10px);
    box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,0.12));

    /* Hidden with opacity and pointer-events rather than display:none, so
       the panel keeps a size and the transition has something to animate. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}

.menu-parent:hover .menu-submenu,
.menu-parent:focus-within .menu-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* A small bridge across the gap between the trigger and the panel, so the
   pointer does not fall through it on the way down and close the menu. */
.menu-parent::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.5rem;
}

.menu-sublink {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--c-text);
    text-decoration: none;
    white-space: nowrap;
}

.menu-sublink:hover {
    background: var(--c-hover);
    color: var(--c-text);
    text-decoration: none;
}

.footer-links {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
    margin-right: 1rem;
}

.footer-link {
    color: var(--c-text-muted);
    text-decoration: none;
}

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

@media (max-width: 640px) {
    /* No hover on a touch screen, so the dropdown becomes a plain indented
       list rather than a panel that can never be opened. */
    .menu-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .menu-parent { display: block; }
    .menu-caret { display: none; }
    .menu-sublink { color: rgba(255,255,255,0.7); padding-left: 1.25rem; }
}


/* Headings follow their own token, so a theme can pair a display face with a
   readable body face — the one typographic choice worth exposing. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, inherit);
}

/* Preview banner. Fixed, so it is visible wherever the previewer scrolls to,
   and unmistakable — being unsure whether you are looking at the live site is
   the failure mode this exists to prevent. */
.theme-preview-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 200;
    padding: 0.5rem 1rem;
    background: #78350f;
    color: #fef3c7;
    font-size: 0.85rem;
    text-align: center;
}

.theme-preview-bar a { color: #fde68a; text-decoration: underline; }
.theme-preview-bar + * { margin-top: 2.25rem; }

/* Per-member theme choice
   ------------------------------------------------------------------------ */

.theme-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.theme-choice {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 0.15rem;
    padding: 0.85rem;
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    cursor: pointer;
}

.theme-choice:hover { border-color: var(--c-border-strong); }
.theme-choice.is-chosen { border-color: var(--c-primary); }

/* The radio stays in the DOM for keyboard and screen readers; the card is
   the visible control. */
.theme-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-choice:focus-within { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.theme-choice-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius) - 2px);
}

.theme-choice-default {
    background: linear-gradient(135deg, var(--c-surface) 50%, var(--c-bg) 50%);
}

.theme-choice-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-primary);
}

.theme-choice-name { font-weight: 600; font-size: 0.92rem; }
.theme-choice-note { font-size: 0.8rem; color: var(--c-text-muted); }

.theme-choice-footnote {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--c-text-muted);
}

/* Pages
   ------------------------------------------------------------------------ */

.page-body { max-width: 100%; }
.page-width-narrow { max-width: 42rem; margin: 0 auto; }
.page-width-wide { max-width: none; }

.page-title { font-size: 1.9rem; margin-bottom: 1rem; }

.page-notice {
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius);
    background: var(--c-primary-light);
    border: 1px solid var(--c-primary);
    font-size: 0.88rem;
}

.page-block-heading { margin: 1.75rem 0 0.6rem; }
.page-block-rich { margin-bottom: 1rem; line-height: 1.7; }
.page-block-rich p { margin-bottom: 0.85rem; }
.page-block-html { margin-bottom: 1rem; }

.page-block-image { margin: 1.25rem 0; }
.page-block-image img { max-width: 100%; height: auto; border-radius: var(--radius); }
.page-block-image figcaption {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--c-text-muted);
}

/* A 16:9 box, so the page does not jump as the iframe loads. */
.page-block-embed {
    position: relative;
    margin: 1.25rem 0;
    padding-bottom: 56.25%;
    border-radius: var(--radius);
    overflow: hidden;
}

.page-block-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.page-block-topics {
    display: grid;
    gap: 0.5rem;
    margin: 1.25rem 0;
}

.page-topic {
    display: block;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    text-decoration: none;
    color: inherit;
}

.page-topic:hover { border-color: var(--c-border-strong); text-decoration: none; }
.page-topic-title { display: block; font-weight: 600; }
.page-topic-meta { display: block; font-size: 0.8rem; color: var(--c-text-muted); }

.post-edit-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
}

/* ============================================================================
   Modern pass — 2026-08-04
   ============================================================================

   A refresh toward something less flat: cards that sit on the page rather than
   being drawn on it, larger radii, more air, and a stronger typographic
   hierarchy. Direction only — the layout metaphors, palette and spacing are
   Convoro's own, per ROADMAP.md's originality rules.

   Everything here still reads the theme tokens, so a site that has picked its
   own accent, radius or neutrals keeps them. Nothing is hardcoded.

   Written as a final section that refines the base rules above rather than a
   rewrite of them: the base is what a theme with everything turned down still
   gets, and it stays intact.
   ========================================================================= */

:root {
    /* Derived from the theme's radius so the control still means something —
       a site that sets 0 gets square corners everywhere, not square inputs
       inside rounded cards. */
    --radius-card: calc(var(--radius, 12px) * 1.35);
    --radius-pill: 999px;
    --lift: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
    --lift-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 16px 32px -16px rgba(15, 23, 42, 0.25);
}

:root[data-theme="dark"] {
    /* The light shadow disappears on a dark surface, so depth comes from a
       darker drop plus a faint top edge instead. */
    --lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
    --lift-hover: 0 2px 6px rgba(0, 0, 0, 0.55), 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}

/* ---- Header ------------------------------------------------------------ */

.site-header {
    padding: 0.35rem 0;
    /* A hairline rather than a hard edge, so the header reads as a surface
       above the page instead of a band drawn across it. */
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.header-inner { gap: 0.75rem; }

.header-nav { gap: 0.15rem; }

.header-nav a,
.menu-link {
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-pill);
    font-weight: 500;
}

.header-nav .btn-sm {
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
}

.search-trigger,
.theme-toggle {
    border-radius: var(--radius-pill);
    width: 36px;
    height: 36px;
}

/* ---- Page rhythm ------------------------------------------------------- */

.site-main { padding-top: 2rem; padding-bottom: 3rem; }

.page-header {
    margin-bottom: 1.5rem;
    align-items: flex-end;
}

.page-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-family: var(--font-heading, inherit);
}

/* ---- Forum list -------------------------------------------------------- */

/* The category is now a grouping, not a container: its forums are cards in
   their own right, and wrapping them in another card was a box inside a box. */
.forum-category {
    margin-bottom: 2rem;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

/*
   The category name becomes a label sitting above its forums rather than a
   filled bar inside the card. It groups without competing with the forum
   titles, which are the thing somebody is actually scanning for.
*/
.category-header {
    background: none;
    border: 0;
    padding: 0 0.25rem 0.6rem;
}

.category-header h3 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

/* Each forum is its own card, so the list reads as a set of destinations
   rather than rows in a table. */
.forum-row {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card);
    background: var(--c-surface);
    box-shadow: var(--lift);
    padding: 1.15rem 1.25rem;
    margin-bottom: 0.75rem;
    gap: 1.1rem;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.forum-row:last-child { margin-bottom: 0; }

.forum-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--lift-hover);
    border-color: var(--c-primary);
    text-decoration: none;
}

.forum-icon {
    width: 46px;
    height: 46px;
    border-radius: calc(var(--radius-card) * 0.7);
    background: var(--c-primary-light);
    color: var(--c-primary);
    flex-shrink: 0;
}

.forum-title {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.forum-desc { margin-top: 0.15rem; }

/* Stats stack into a tidy column instead of sitting in a row, which stops
   them colliding with the description on a narrow screen. */
.forum-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
}

/* ---- Topic list -------------------------------------------------------- */

/*
    Cards sit on the page, not inside a panel. The original list was a single
    bordered surface with rows in it; once the rows became cards the wrapper
    was left showing through the gaps as a second, pointless surface.
*/
.topic-list {
    gap: 0.6rem;
    display: flex;
    flex-direction: column;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.topic-row {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card);
    background: var(--c-surface);
    box-shadow: var(--lift);
    padding: 1rem 1.15rem;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.topic-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--lift-hover);
    border-color: var(--c-primary);
    text-decoration: none;
}

.topic-title {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.topic-stats { font-variant-numeric: tabular-nums; }

/* ---- Posts ------------------------------------------------------------- */

.post {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card);
    box-shadow: var(--lift);
    overflow: hidden;
}

.post-avatar {
    border-radius: calc(var(--radius-card) * 0.65);
    font-weight: 700;
}

/* ---- Blocks and controls ----------------------------------------------- */

.online-block,
.empty-state,
.reply-form-wrapper,
.profile-card,
.auth-form,
.alert {
    border-radius: var(--radius-card);
}

.online-block,
.profile-card,
.auth-form { box-shadow: var(--lift); }

.online-header {
    background: none;
    border-bottom: 1px solid var(--c-border);
    font-size: 0.75rem;
    letter-spacing: 0.09em;
}

.btn,
.btn-primary,
.btn-outline {
    border-radius: var(--radius-pill);
    padding: 0.6rem 1.35rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--lift);
}

.badge,
.tag-badge,
.prefix-badge,
.page-link { border-radius: var(--radius-pill); }

.page-link { padding: 0.45rem 0.9rem; }

.form-input,
.form-textarea,
.form-select {
    border-radius: calc(var(--radius, 12px) * 0.9);
    padding: 0.7rem 0.9rem;
}

/* ---- Search palette ----------------------------------------------------
   The roadmap names this as the reference point for Convoro's visual
   language, so it gets the same treatment rather than being left behind. */

.search-modal-panel {
    border-radius: var(--radius-card);
    box-shadow: var(--lift-hover);
}

@media (max-width: 640px) {
    /* The lift is a pointer affordance. On a touch screen it costs paint and
       buys nothing, and the tighter spacing matters more. */
    .forum-row:hover,
    .topic-row:hover { transform: none; }

    .forum-row { padding: 0.95rem 1rem; }
    .page-header h2 { font-size: 1.45rem; }
}

/* ============================================================================
   Second pass — content, not just surfaces
   ========================================================================= */

/* ---- Avatars ------------------------------------------------------------
   The fallback colour comes from the username, so it is set inline; only the
   shape and size live here. */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    /* Squircle rather than a circle — the same family as the cards, so
       avatars read as part of the same system rather than borrowed. */
    border-radius: 32%;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar-sm { width: 26px; height: 26px; font-size: 0.68rem; }
.avatar-md { width: 40px; height: 40px; font-size: 0.95rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; border-radius: 26%; }

/* ---- The stats band ----------------------------------------------------- */

.stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 1.15rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card);
    box-shadow: var(--lift);
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    /* Tabular, so a row of tiles does not jitter as the numbers change. */
    font-variant-numeric: tabular-nums;
    font-family: var(--font-heading, inherit);
}

.stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.stat-tile-person {
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.stat-tile-person:hover {
    border-color: var(--c-primary);
    transform: translateY(-2px);
    text-decoration: none;
}

.stat-person { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.stat-person-name {
    font-weight: 650;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Row stats ----------------------------------------------------------
   A number and its label as one unit, rather than loose text at the end of a
   row. The value leads; the label is support. */

.stat-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.25rem;
}

.stat-pair-value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.stat-pair-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

/* ---- Forum rows --------------------------------------------------------- */

.forum-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1.1rem;
}

.forum-stats {
    flex-direction: row;
    gap: 0.35rem;
    align-items: stretch;
}

.forum-latest {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 15rem;
    padding-left: 1.1rem;
    border-left: 1px solid var(--c-border);
    min-height: 2.4rem;
}

.forum-latest-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.forum-latest-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forum-latest-meta,
.forum-latest-empty {
    font-size: 0.76rem;
    color: var(--c-text-muted);
}

/* ---- Topic rows --------------------------------------------------------- */

.topic-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.9rem;
}

/* The badge column collapses to nothing when a topic is neither pinned nor
   locked, which is most of them — so it takes no space rather than leaving a
   gap in every row. */
.topic-row .topic-meta:empty { display: none; }
.topic-replies-label { font-weight: 600; opacity: 0.85; }

.topic-starter {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Replies is the number people judge a thread by, so it is a chip. Views are
   context, so they stay quiet underneath. */
.topic-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.topic-replies {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--c-primary-light);
    color: var(--c-primary);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.topic-views { font-size: 0.72rem; color: var(--c-text-muted); }

/* ---- Sticky header ------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

@supports (backdrop-filter: blur(10px)) {
    /* Content passing underneath should read as passing underneath, not as
       being clipped by a solid bar. */
    .site-header {
        backdrop-filter: blur(12px) saturate(140%);
        background-color: color-mix(in srgb, var(--c-header-bg, #16171f) 88%, transparent);
    }
}

/* ---- Empty states ------------------------------------------------------- */

.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--c-surface);
    border: 1px dashed var(--c-border-strong);
}

.empty-state p { color: var(--c-text-muted); margin-bottom: 1rem; }

@media (max-width: 900px) {
    /* The last-post column is the first thing to go: it is the widest and the
       least essential of the four. */
    .forum-latest { display: none; }
    .forum-row { grid-template-columns: auto 1fr auto; }
}

@media (max-width: 640px) {
    .forum-stats { display: none; }
    .forum-row { grid-template-columns: auto 1fr; }
    .stat-band { grid-template-columns: repeat(2, 1fr); }
    .stat-value { font-size: 1.35rem; }
}

/* ============================================================================
   Third pass — the topic view
   ========================================================================= */

/* The gutter is gone: post text gets the full width, which is what people
   came for. The identity moved into the header where it reads as a sentence. */
.post {
    display: block;
    padding: 1.25rem 1.4rem;
    margin-bottom: 0.85rem;
}

.post-sidebar { display: none; }

.post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--c-border);
}

.post-identity {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.post-identity:hover { text-decoration: none; }
.post-identity:hover .post-author { color: var(--c-primary); }

.post-identity-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.post-author {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 650;
    font-size: 0.95rem;
    color: var(--c-text);
    transition: color 0.14s ease;
}

.post-author-stats { font-size: 0.76rem; color: var(--c-text-muted); }

.post-header-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.post-number {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-text-muted);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--c-hover);
    text-decoration: none;
    transition: background 0.14s ease, color 0.14s ease;
}

.post-number:hover {
    background: var(--c-primary-light);
    color: var(--c-primary);
    text-decoration: none;
}

.post-number.is-copied { background: var(--c-success); color: #fff; }

.post-body { font-size: 0.98rem; line-height: 1.75; }

/* ---- Role badges --------------------------------------------------------
   Only admin and moderator. A badge for every group is noise; these two are
   the ones that change how an answer reads. */

.role-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.15em 0.5em;
    border-radius: var(--radius-pill);
    line-height: 1.5;
}

.role-admin { background: var(--c-primary-light); color: var(--c-primary); }

.role-moderator {
    background: color-mix(in srgb, var(--c-success) 16%, transparent);
    color: var(--c-success);
}

/* ---- Post actions -------------------------------------------------------
   Faded until wanted, so they stop competing with the text — but only where
   there is a pointer to hover with. A hover-only control does not exist on a
   phone, and it must never hide from the keyboard. */

@media (hover: hover) and (pointer: fine) {
    .post-actions {
        opacity: 0;
        transition: opacity 0.16s ease;
    }

    .post:hover .post-actions,
    .post:focus-within .post-actions { opacity: 1; }
}

.post-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

.reaction-bar { margin-top: 0.85rem; }

/* ---- Profile ------------------------------------------------------------ */

.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 2.25rem 1.5rem 1.75rem;
}

.profile-username {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

/* The member's numbers should look like the site's numbers. */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
    width: 100%;
    margin: 1.5rem 0 0.5rem;
    border: 0;
    padding: 0;
}

.profile-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.85rem 0.5rem;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius-card) * 0.75);
}

.profile-stats strong {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.profile-stats > div { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); font-weight: 700; }
.profile-stats strong { color: var(--c-text); text-transform: none; letter-spacing: -0.02em; }

.profile-actions { margin-top: 1.25rem; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }

@media (max-width: 640px) {
    .post { padding: 1rem; }
    .post-header { flex-wrap: wrap; gap: 0.5rem; }
}

/* ============================================================================
   Widgets
   ========================================================================= */

/* The sidebar is a grid column that only exists when the markup is there, so
   a site with no sidebar widgets gets the same full-width page it had. */
.site-main.has-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.75rem;
    align-items: start;
}

.site-sidebar { display: flex; flex-direction: column; gap: 1rem; }

.widget-area { display: flex; flex-direction: column; gap: 1rem; }
.widget-area-index\.top, .widget-area-index\.bottom,
.widget-area-forum\.top, .widget-area-topic\.top { margin-bottom: 1.75rem; }

.widget {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card);
    box-shadow: var(--lift);
    padding: 1.1rem 1.2rem;
}

/* A content widget with no title is bare markup on purpose — that is how a
   banner goes into an area without a panel wrapped round it. */
.widget-bare {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.widget-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: 0.85rem;
}

.widget-empty { font-size: 0.85rem; color: var(--c-text-muted); }

/* ---- Statistics --------------------------------------------------------- */

/* Named for the container, not the widget type: the wrapper already carries
   .widget-stats from its type, and a shared name made the whole panel a grid. */
.widget-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    text-align: center;
}

.widget-stat { display: flex; flex-direction: column; gap: 0.1rem; }

.widget-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.widget-stat-label {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.widget-newest {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--c-border);
    font-size: 0.82rem;
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ---- People ------------------------------------------------------------- */

.widget-people { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.widget-person {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem;
    border-radius: var(--radius-pill);
    background: var(--c-hover);
    font-size: 0.8rem;
    color: var(--c-text);
    text-decoration: none;
}

.widget-person:hover { background: var(--c-primary-light); color: var(--c-primary); text-decoration: none; }
.widget-person-name { font-weight: 600; }

.widget-ranked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.widget-ranked li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.widget-ranked-count {
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--c-text-muted);
}

/* ---- Topics ------------------------------------------------------------- */

/* Named for the container, never after a widget type: the wrapper already
   carries .widget-<type>, so .widget-topics here zeroed the panel's own
   padding and put the text against the edge. See widget-stat-grid above —
   this is the second instance, which is why there is now a test for it. */
.widget-topic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.widget-topic-list li + li { border-top: 1px solid var(--c-border); }

.widget-topic-list a {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0;
    text-decoration: none;
    color: inherit;
}

.widget-topic-list a:hover .widget-topic-title { color: var(--c-primary); }

.widget-topic-title {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.35;
    transition: color 0.14s ease;
}

.widget-topic-meta { font-size: 0.74rem; color: var(--c-text-muted); }

/* ---- Sign-up prompt ----------------------------------------------------- */

.widget-welcome-text { font-size: 0.88rem; line-height: 1.6; margin-bottom: 0.85rem; }
.widget-welcome-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.widget-welcome-actions .btn { padding: 0.5rem 1rem; font-size: 0.85rem; }

@media (max-width: 900px) {
    /* The sidebar drops under the content rather than squeezing it. */
    .site-main.has-sidebar { grid-template-columns: minmax(0, 1fr); }
    .site-sidebar { margin-top: 1.75rem; }
}

/* ============================================================================
   Traditional post layout, drawn modern
   ============================================================================

   Who is speaking down the left, what they said on the right — the shape
   people know from every forum. The modernising is in how it is drawn: a
   large squircle avatar, a quiet fact list rather than a stack of labels, and
   a hairline rule instead of a filled column.
   ========================================================================= */

.post {
    display: grid;
    /* Wide enough that an ordinary username and a "Aug 2026" both sit on one
       line. At 10.5rem "DemoUser" broke across two, which is the kind of
       detail that makes a layout look unfinished. */
    grid-template-columns: 12.5rem minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.post-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    /* The original stylesheet pins this to 100px for the old flex layout.
       As a grid item that width wins over the track, which is why the name
       was breaking mid-word in a column that looked wide enough. */
    width: auto;
    padding: 1.35rem 0.9rem;
    text-align: center;
    /* A rule rather than a filled panel: the column should read as part of
       the card, not as a second card stuck to its side. */
    border-right: 1px solid var(--c-border);
}

.post-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    max-width: 100%;
}

.post-identity:hover { text-decoration: none; }
.post-identity:hover .post-author { color: var(--c-primary); }

.post-author {
    display: block;
    font-weight: 650;
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--c-text);
    /* break-word, not anywhere: a long name should break only when it truly
       cannot fit, never in the middle of one that would have. */
    overflow-wrap: break-word;
    hyphens: none;
    max-width: 100%;
    transition: color 0.14s ease;
}

.post-author-facts {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.35rem;
    width: 100%;
}

.post-author-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
}

.post-author-facts dt {
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.62rem;
}

.post-author-facts dd {
    margin: 0;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    /* "Aug 2026" is one value, not two words to be split up. */
    white-space: nowrap;
}

.post-content { padding: 1.35rem 1.4rem; min-width: 0; }

.post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--c-border);
}

.post-when { font-size: 0.78rem; color: var(--c-text-muted); }

@media (max-width: 640px) {
    /* The column becomes a row above the post: a 10rem gutter on a phone is
       most of the screen. */
    .post { grid-template-columns: minmax(0, 1fr); }

    .post-sidebar {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0.7rem;
        text-align: left;
        padding: 0.9rem 1rem;
        border-right: 0;
        border-bottom: 1px solid var(--c-border);
    }

    .post-identity { flex-direction: row; align-items: center; gap: 0.6rem; }
    .post-identity .avatar-lg { width: 38px; height: 38px; font-size: 1rem; }
    .post-author-facts { flex-direction: row; gap: 0.9rem; margin: 0 0 0 auto; width: auto; }
    .post-author-facts > div { flex-direction: column; align-items: flex-end; gap: 0; }
    .post-content { padding: 1rem; }
}


/* ---- Sub-header --------------------------------------------------------
   The breadcrumb gets a bar of its own under the header, so it reads as part
   of the chrome rather than floating on the page background. Sticky under the
   header for the same reason the header is: on a long topic, knowing where
   you are should not need a scroll back to the top. */

.site-subheader {
    position: sticky;
    top: var(--header-height, 60px);
    z-index: 90;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.site-subheader .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
    margin: 0;
    padding: 0.7rem 0;
    font-size: 0.82rem;
    color: var(--c-text-muted);
    min-height: 1rem;
}

.site-subheader .breadcrumb a {
    color: var(--c-text-muted);
    font-weight: 500;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    transition: background 0.14s ease, color 0.14s ease;
}

.site-subheader .breadcrumb a:hover {
    background: var(--c-hover);
    color: var(--c-text);
    text-decoration: none;
}

/* The last crumb is where you are, so it reads as the current place rather
   than as one more link that happens not to work. */
.site-subheader .breadcrumb span {
    color: var(--c-text);
    font-weight: 600;
    padding: 0.15rem 0.35rem;
}

/* The page content no longer needs to clear a floating breadcrumb. */
.site-main { padding-top: 1.75rem; }

/* ---- A plain content card ----------------------------------------------
   The front end had no generic card class — every panel rolled its own. This
   is the shared one, matching the widget and forum-row treatment. */

.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card);
    box-shadow: var(--lift);
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.25rem;
}

.card-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: 1.1rem;
}

/* ---- API tokens --------------------------------------------------------- */

/* Loud on purpose: this is the only moment the token is readable. */
.token-reveal {
    background: var(--c-primary-light);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-card);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.25rem;
}

.token-reveal p { font-size: 0.86rem; color: var(--c-text-muted); margin: 0.4rem 0 0.9rem; }

.token-value {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.token-value code {
    flex: 1;
    min-width: 14rem;
    padding: 0.6rem 0.8rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius) * 0.9);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.token-abilities { display: flex; flex-direction: column; gap: 0.5rem; }

.token-ability {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
}

.token-ability code { font-size: 0.82rem; font-weight: 700; }
.token-ability-note { display: block; font-size: 0.82rem; color: var(--c-text-muted); }

.token-list { display: flex; flex-direction: column; gap: 0.6rem; }

.token-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius-card) * 0.8);
}

/* A revoked token stays listed — "this was used at 3am and is now revoked"
   should remain answerable — but it should not read as usable. */
.token-row.is-revoked { opacity: 0.6; }

.token-name { font-weight: 650; display: flex; align-items: center; gap: 0.5rem; }
.token-meta { font-size: 0.78rem; color: var(--c-text-muted); margin-top: 0.15rem; overflow-wrap: anywhere; }
.token-empty, .token-docs { font-size: 0.86rem; color: var(--c-text-muted); }
.token-docs { margin-top: 0.5rem; }

/* ---- Security and two-step verification --------------------------------- */

.code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.15rem;
    letter-spacing: 0.25em;
    max-width: 12rem;
}

.auth-intro { font-size: 0.9rem; color: var(--c-text-muted); margin-bottom: 1.25rem; }

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.recovery-codes code {
    padding: 0.5rem 0.6rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius) * 0.8);
    font-size: 0.88rem;
    text-align: center;
    letter-spacing: 0.05em;
}

.security-state { font-size: 0.95rem; margin-bottom: 0.75rem; }
.security-on strong { color: var(--c-success); }

.security-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin: 1rem 0 1.25rem;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius-card) * 0.8);
}

.security-key-manual code {
    display: block;
    margin-top: 0.2rem;
    font-size: 1rem;
    letter-spacing: 0.12em;
}

/*
    The inputs are narrow, not the form: constraining the whole thing squeezed
    the explanatory text under the code field into three short lines.
*/
.security-form .form-input { max-width: 22rem; }
.security-form .form-hint { max-width: 34rem; }
.security-divider { border: 0; border-top: 1px solid var(--c-border); margin: 1.5rem 0; }

/* Settings sub-navigation, shared by every settings page. */
.settings-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: -0.25rem 0 1.5rem;
    border-bottom: 1px solid var(--c-border);
}

.settings-nav-item {
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--c-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.settings-nav-item:hover { color: var(--c-text); text-decoration: none; }

.settings-nav-item.is-active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}

.security-heading {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
    color: var(--c-text);
}

.security-form .form-group { margin-bottom: 1rem; }
.security-form + .security-divider { margin-top: 1.5rem; }

/*
    Corrections from looking at the rendered page:
    - the count sat flush against the label under it;
    - `.security-form .form-input` out-specified `.code-input`, so the code
      box rendered at full width instead of the width of a code;
    - hints inside and outside the forms wrapped at different widths.
*/
.security-form .form-input.code-input { max-width: 12rem; }

.card > .form-hint,
.security-heading + .form-hint { max-width: 34rem; }

.security-heading + .form-hint,
.security-form .form-group > .form-hint { margin-bottom: 0.9rem; }

/* ---- Bulk moderation ---------------------------------------------------- */

/*
    The row is a link, so the checkbox has to sit beside it rather than inside
    it — ticking a box must not open the topic.
*/
.topic-item { display: flex; align-items: stretch; }
.topic-item > .topic-row { flex: 1; min-width: 0; }

/* A quiet gutter beside the card, not a column with its own surface. */
.topic-select {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.25rem;
    cursor: pointer;
}

.topic-select input { cursor: pointer; }

.topic-item.is-selected > .topic-row {
    background: var(--c-primary-light);
    border-color: var(--c-primary-border);
}

/*
    Pinned to the bottom of the viewport: a moderator scrolling a long list to
    pick the last few topics should not have to scroll back to act on them.
*/
.bulk-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.7rem 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-primary-border);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: var(--lift-hover, 0 6px 20px rgba(0, 0, 0, 0.1));
}

.bulk-bar[hidden] { display: none; }

.bulk-count {
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
}

.bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.bulk-sep {
    width: 1px;
    align-self: stretch;
    margin: 0 0.25rem;
    background: var(--c-border);
}

.bulk-forum {
    width: auto;
    max-width: 14rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

.bulk-actions button[disabled] { opacity: 0.45; cursor: not-allowed; }
.bulk-actions button[disabled]:hover { background: var(--c-surface); }

/* ---- Signatures --------------------------------------------------------- */

.post-signature {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--c-border);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--c-text-muted);
}

.post-signature p { margin: 0 0 0.35rem; }
.post-signature p:last-child { margin-bottom: 0; }
.post-signature a { color: var(--c-primary); }

/* ---- Profile settings --------------------------------------------------- */

.avatar-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem;
}

.avatar-editor-actions {
    flex: 1;
    min-width: 15rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.avatar-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* A file input is as wide as its own control; padding it out to 20rem just
   pushed the Upload button away from it. */
.avatar-upload input[type="file"] {
    width: auto;
    max-width: 100%;
    border: 0;
    padding: 0;
    background: none;
    font-size: 0.88rem;
}

.btn-quiet { align-self: flex-start; font-size: 0.85rem; padding: 0.35rem 0.75rem; }

.timezone-select { max-width: 24rem; }

.account-form .form-input { max-width: 22rem; }
.account-form .form-hint { max-width: 34rem; }

/* Beats the composer's 200px: a signature is two lines, and a box the size of
   a post invites one. */
.convoro-editor-content.signature-editor-content { min-height: 5rem; }

.signature-preview {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius-card) * 0.8);
}

.signature-preview-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
}

.signature-preview .post-signature { margin-top: 0.25rem; padding-top: 0; border-top: 0; }

.inline-form { display: inline; }

.link-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--c-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Following ---------------------------------------------------------- */

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.follow-control { display: inline-flex; align-items: center; gap: 0.4rem; }

.follow-select {
    padding: 0.4rem 1.9rem 0.4rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--c-text);
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.follow-select:hover { background: var(--c-hover); }

/*
    Following is the ordinary state for a thread somebody has replied to, so
    it is marked rather than shouted about.
*/
.follow-select:not([data-idle]) { border-color: var(--c-border-strong); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

.follow-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.9rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--c-border);
}

.follow-list-item:last-child { border-bottom: 0; }
.follow-list-title { flex: 1; min-width: 12rem; font-weight: 500; }

.follow-list-mode {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-muted);
}

/* ---- Read state --------------------------------------------------------- */

/*
    An unread thread is marked, not shouted about: the title carries most of
    the signal and a row of loud badges makes a busy forum unreadable.
*/
.topic-row.is-unread .topic-title { font-weight: 700; }

/*
    A fixed gutter, present whether or not there is anything in it, so the
    rows line up instead of shuffling sideways as threads are read.
*/
.topic-unread {
    flex: 0 0 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.topic-unread::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c-primary);
}

.topic-unread.is-read::before { background: none; }

.topic-unread:hover::before { transform: scale(1.25); }
.topic-unread::before { transition: transform 0.12s ease; }

.forum-row.is-unread .forum-title { font-weight: 700; }

.read-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.forum-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: var(--c-primary);
    vertical-align: 0.1em;
}

/* A stream spans forums, so the row says which one it is in. */
.topic-forum { color: var(--c-text-muted); font-weight: 600; }

/* ---- Activity streams --------------------------------------------------- */

.stream-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: -0.25rem 0 0.75rem;
    border-bottom: 1px solid var(--c-border);
}

.stream-nav-item {
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--c-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.stream-nav-item:hover { color: var(--c-text); text-decoration: none; }

.stream-nav-item.is-active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}

.stream-hint {
    margin: 0 0 1.25rem;
    font-size: 0.88rem;
    color: var(--c-text-muted);
}

/*
    Marked, not alarming. A destructive area people arrive at deliberately
    should be recognisable without the whole page shouting.
*/
.card-danger { border-color: var(--c-danger-border, rgba(179, 38, 30, 0.35)); }
.card-danger .card-title { color: var(--c-danger, #b3261e); }

.consent-block {
    margin: 1rem 0 1.25rem;
    padding: 0.85rem 1rem;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius-card) * 0.8);
    font-size: 0.88rem;
}

.consent-block .admin-checkbox-label { margin-bottom: 0.5rem; }
.consent-block .admin-checkbox-label:last-child { margin-bottom: 0; }

/* ---- Polls -------------------------------------------------------------- */

.poll {
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card);
    box-shadow: var(--lift);
}

.poll.is-closed { background: var(--c-bg); }

.poll-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.9rem;
}

.poll-question { margin: 0; font-size: 1.05rem; font-weight: 700; }

.poll-meta {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-muted);
    white-space: nowrap;
}

.poll-results { list-style: none; margin: 0 0 1rem; padding: 0; }
.poll-result + .poll-result { margin-top: 0.7rem; }

.poll-result-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.poll-result.is-mine .poll-label { font-weight: 700; }
.poll-count { color: var(--c-text-muted); white-space: nowrap; }

/* A bar, because a column of numbers is not a result anybody reads. */
.poll-bar {
    height: 8px;
    background: var(--c-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.poll-bar span {
    display: block;
    height: 100%;
    background: var(--c-primary);
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
}

.poll-result.is-mine .poll-bar span { background: var(--c-primary); }

.poll-voters { margin-top: 0.3rem; font-size: 0.78rem; }
.poll-voter { color: var(--c-text-muted); }
.poll-voter::after { content: ','; }
.poll-voter:last-child::after { content: ''; }

.poll-hidden {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    color: var(--c-text-muted);
    font-style: italic;
}

.poll-choices { list-style: none; margin: 0 0 0.85rem; padding: 0; }
.poll-choices li + li { margin-top: 0.35rem; }

.poll-choice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    cursor: pointer;
}

.poll-public-note { display: inline-block; margin-left: 0.6rem; }

.poll-admin {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--c-border);
    font-size: 0.85rem;
}

.poll-builder {
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius-card) * 0.8);
}

.poll-builder summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.poll-builder[open] summary { margin-bottom: 0.9rem; }
.poll-option-input + .poll-option-input { margin-top: 0.35rem; }

/* ---- Merging and splitting ---------------------------------------------- */

.mod-surgery {
    margin: -0.5rem 0 1rem;
    padding: 0.6rem 0.9rem;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius-card) * 0.8);
    font-size: 0.88rem;
}

.mod-surgery summary { cursor: pointer; font-weight: 600; }
.mod-surgery[open] summary { margin-bottom: 0.75rem; }
.mod-surgery .form-input { max-width: 26rem; }
.mod-surgery .form-hint { max-width: 38rem; }

.post-list.is-selectable .post { position: relative; }

.post-select {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    padding: 0.2rem;
    cursor: pointer;
}

.post.is-selected { outline: 2px solid var(--c-primary); outline-offset: -2px; }

.split-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    margin-top: 0.6rem;
    background: var(--c-surface);
    border: 1px solid var(--c-primary-border);
    border-radius: var(--radius-card);
    box-shadow: var(--lift-hover, 0 6px 20px rgba(0, 0, 0, 0.1));
}

.split-bar[hidden] { display: none; }
.split-count { font-size: 0.86rem; font-weight: 600; white-space: nowrap; }
.split-title { flex: 1; min-width: 14rem; max-width: 28rem; }

.field-required {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-muted);
}

/* ---- Profile fields ----------------------------------------------------- */

.profile-fields {
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--c-border);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    font-size: 0.9rem;
}

.profile-fields dt { font-weight: 600; color: var(--c-text-muted); }
.profile-fields dd { margin: 0; }

/*
    Quieter than the post stats above them: these are read on every post of
    every thread, so they must not compete with what somebody wrote.
*/
.post-fields {
    margin: 0.6rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--c-border);
    font-size: 0.72rem;
    line-height: 1.4;
}

.post-fields dt {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
}

.post-fields dd { margin: 0 0 0.35rem; color: var(--c-text); }
.post-fields dd:last-child { margin-bottom: 0; }

/* ---- Points, ranks and the leaderboard ---------------------------------- */

.rank-badge {
    display: inline-block;
    padding: 0.1em 0.5em;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rank, var(--c-text-muted));
    background: color-mix(in srgb, var(--rank, #888) 12%, transparent);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

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

.leader {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card);
    margin-bottom: 0.5rem;
}

.leader.is-top { border-color: var(--c-primary-border); }

.leader-place {
    min-width: 1.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text-muted);
    text-align: right;
}

.leader.is-top .leader-place { color: var(--c-primary); }

.leader-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.leader-name { font-weight: 600; }

.leader-points {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.05rem;
}

.post-points {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
}

.post-rank { margin: 0.5rem 0 0.35rem; }

.profile-points {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: calc(var(--radius-card) * 0.8);
}

.profile-points-total {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--c-text-muted);
}

.profile-points-total strong { font-size: 1.3rem; color: var(--c-text); }

.profile-points-why {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    font-size: 0.82rem;
    color: var(--c-text-muted);
}

/* ---- Badges ------------------------------------------------------------- */

.badge-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem 0 0;
    padding: 0;
}

.badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--badge, var(--c-text-muted));
    background: color-mix(in srgb, var(--badge, #888) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--badge, #888) 30%, transparent);
    border-radius: var(--radius-pill);
    cursor: default;
}

.badge-icon { font-size: 0.95em; line-height: 1; }

/* Beside posts: the glyph alone, because the sidebar is read on every post. */
.post-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin: 0.5rem 0 0;
    padding: 0;
}

.badge-chip-sm { padding: 0.15rem 0.35rem; font-size: 0.9rem; }

/* ============================================================================
   Small screens
   ============================================================================

   Everything above is written for a screen with room. This is the layer that
   says what happens when there isn't any. It comes last on purpose: it is the
   authority, and it should not have to fight an ordering it cannot see.

   There are two widths in the whole stylesheet and both are here:

     640px  a phone. One column, the header collapses, controls go full width.
     900px  narrower than a laptop. Side columns fold under the main one.

   Reasoning is in docs/design/2026-08-05-mobile.md.
   ========================================================================= */

/* ---- The header menu ---------------------------------------------------- */

/*
   One set of markup in two shapes. On a wide screen the summary is hidden and
   the panel is given a `display` of its own — which overrides a closed
   <details> and leaves the ordinary horizontal bar. On a phone the element is
   left alone to be what it already is: a disclosure that opens, closes, takes
   Escape, and reads correctly aloud, with no script anywhere near it.
*/
.header-menu {
    display: flex;
    align-items: center;
    min-width: 0;
}

.header-menu > .header-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

/*
   The checkbox is never seen and never removed from the page: `display: none`
   would take it out of the tab order, and it being reachable by keyboard is
   the whole reason the panel needs no script. Clipped to nothing instead, the
   way a skip link is.
*/
.header-menu-check {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* Focus has to land somewhere visible, and the checkbox is not visible — so
   it lands on the button beside it. */
.header-menu-check:focus-visible + .header-menu-button {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}

.header-menu-button { display: none; }

.header-link {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

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

.header-logout {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill, 6px);
    font-size: 0.85rem;
}

.header-logout:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

/*
   The bell lives in the bar beside search at every width, not inside the
   panel. It was hidden above the phone breakpoint at first, which quietly took
   notifications off the desktop header altogether — the count is the whole
   point of the thing, and a count nobody can see is not a notification.
*/
.header-bell-standalone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.header-bell-standalone:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
}

/* The theme toggle is a glyph in the bar and a labelled row in the panel. */
.theme-toggle-label { display: none; }

@media (max-width: 640px) {
    /*
       A closed <details> hides its children — unless a child has a `display`
       of its own, which overrides it. `.header-nav` has had `display: flex`
       since long before there was a panel, so the closed panel has to be
       closed explicitly. Without this it renders inside the header bar,
       invisible but tabbable, and a keyboard walks through eight links that
       are not on the screen.
    */
    .header-menu-check:not(:checked) ~ .header-menu > .header-nav { display: none; }

    .header-inner {
        gap: 0.35rem;
        /* The logo takes the space, the controls take what they need. */
        justify-content: flex-start;
    }

    /* The logo is the way home, so it is a target like any other. */
    .site-logo { display: inline-flex; align-items: center; min-height: 44px; }

    .site-logo { margin-right: auto; }

    .header-bell-standalone { width: 44px; height: 44px; }

    .search-trigger {
        width: 44px;
        height: 44px;
        margin-left: 0;
        flex: none;
    }

    .header-menu { position: static; }

    .header-menu-button {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        height: 44px;
        padding: 0 0.75rem 0 0.65rem;
        border-radius: var(--radius-pill, 999px);
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        list-style: none;
        user-select: none;
    }

    .header-menu-button:hover { background: rgba(255, 255, 255, 0.18); }

    .header-menu-button:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.7);
        outline-offset: 2px;
    }

    /*
       Three bars drawn in one element. The middle is the element's own
       background; the outer two are its shadows. No extra markup, and it
       cannot get out of step with the label beside it.
    */
    .header-menu-bars {
        width: 16px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
        transition: box-shadow 0.15s, background 0.15s, transform 0.15s;
    }

    /* Open, it becomes a cross — the same three bars, rearranged. */
    .header-menu-check:checked ~ .header-menu-button .header-menu-bars {
        background: transparent;
        box-shadow: 0 0 0 currentColor;
        transform: rotate(45deg);
    }

    .header-menu-check:checked ~ .header-menu-button .header-menu-bars::before,
    .header-menu-check:checked ~ .header-menu-button .header-menu-bars::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
    }

    .header-menu-check:checked ~ .header-menu-button .header-menu-bars::after { transform: rotate(90deg); }

    .header-menu-bars { position: relative; }

    /*
       The panel hangs from the header across the full width. Positioned
       against the header rather than the button so it lines up with the bar
       above it whatever the button's own width turns out to be.
    */
    .header-menu-check:checked ~ .header-menu > .header-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 200;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 0;
        background: var(--c-header-bg, #13202e);
        box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.5);
        /* Long menus scroll rather than run off the bottom of the screen. */
        max-height: calc(100dvh - 56px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Every row in the panel is a row: full width, and tall enough to hit. */
    .header-menu-check:checked ~ .header-menu > .header-nav a,
    .header-menu-check:checked ~ .header-menu > .header-nav .menu-link,
    .header-menu-check:checked ~ .header-menu > .header-nav button {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 0 1.1rem;
        border-radius: 0;
        font-size: 1rem;
        text-align: left;
        justify-content: flex-start;
    }

    .header-menu-check:checked ~ .header-menu > .header-nav .header-user {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        /* A rule above the account rows, so the panel reads as two groups:
           where you can go, and who you are. */
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        margin-top: 0.4rem;
        padding-top: 0.4rem;
    }

    .header-menu-check:checked ~ .header-menu .header-logout-form,
    .header-menu-check:checked ~ .header-menu .theme-toggle-form { display: block; width: 100%; }

    .header-menu-check:checked ~ .header-menu .header-logout {
        background: none;
        font-size: 1rem;
        font-weight: 500;
    }

    .header-menu-check:checked ~ .header-menu .theme-toggle {
        width: 100%;
        height: auto;
        gap: 0.6rem;
        background: none;
    }

    .header-menu-check:checked ~ .header-menu .theme-toggle-label { display: inline; }

    .header-menu-check:checked ~ .header-menu > .header-nav .btn-sm {
        /* Register keeps its colour: it is the one thing in the panel that is
           an action rather than a destination. */
        margin: 0.4rem 1.1rem;
        width: auto;
        justify-content: center;
        border-radius: var(--radius-pill, 999px);
    }

    /* The username is a row like the others rather than a bare word. */
    .header-menu-check:checked ~ .header-menu .header-username { font-weight: 600; }

    /*
       Submenus open on hover on a desktop, which a touch screen does not have.
       Inside the panel they are simply always shown, indented under
       their parent — a phone has vertical room and no hover.
    */
    .header-menu-check:checked ~ .header-menu .menu-parent { display: block; width: 100%; }

    .header-menu-check:checked ~ .header-menu .menu-dropdown {
        position: static;
        display: block;
        box-shadow: none;
        background: none;
        border: 0;
        padding: 0;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .header-menu-check:checked ~ .header-menu .menu-dropdown a { padding-left: 2.1rem; font-size: 0.95rem; }
}

/* ---- Anything you press is big enough to press ------------------------- */

/*
   44px, not WCAG's 24px: 24px is the size below which a target is a failure,
   which is a different question from the size a target ought to be.

   A `min-height` rather than padding on each control, so something added next
   year inherits it. Inline links inside prose are exempt — the rule is for
   controls, and blocking out every link in a sentence would wreck the
   sentence.
*/
@media (max-width: 640px) {
    .btn,
    .btn-sm,
    .btn-secondary,
    .btn-danger,
    button[type="submit"],
    input[type="submit"],
    .pagination a,
    .pagination span,
    .tab-link,
    .settings-nav a,
    .filter-link,
    .prefix-chip,
    .stream-tab,
    .period-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Text inputs get the same floor: a 30px field is a fiddly field, and
       under 16px iOS zooms the page on focus and never zooms back. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;
    }

    textarea { min-height: 7rem; }
}

/* ---- The row is the target --------------------------------------------- */

/*
   A 17px title link inside a 70px row means the row is mostly dead space, and
   on a phone the row is what the thumb is aiming at. The link is stretched
   over its row with a pseudo-element, so the whole row is pressable while the
   markup stays a heading containing a link — which is what it is, and what a
   screen reader should hear.

   Anything else in the row that is itself a link needs to sit above the
   stretched one, or it becomes unreachable.
*/
@media (max-width: 640px) {
    .topic-row,
    .forum-row,
    .leader-row,
    .stream-row,
    .activity-item,
    .search-result {
        position: relative;
    }

    .topic-title-link::after,
    .forum-name-link::after,
    .leader-name::after,
    .activity-topic::after,
    .search-result-title::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    /*
       Anything else in the row that is itself a link has to sit above the
       stretched one, or it becomes unreachable — the author's name in an
       activity line goes to their profile, and it should still go there.
    */
    .topic-row a:not(.topic-title-link),
    .topic-row button,
    .topic-row form,
    .forum-row a:not(.forum-name-link),
    .leader-row a:not(.leader-name),
    .activity-item a:not(.activity-topic),
    .search-result a:not(.search-result-title) {
        position: relative;
        z-index: 2;
    }
}

/* ---- One column -------------------------------------------------------- */

@media (max-width: 640px) {
    .container { padding-left: 0.85rem; padding-right: 0.85rem; }

    /* Page headings and their action button stack rather than fight. The
       stretch matters: with flex-start the controls shrink to their text and
       the `width: 100%` below resolves against nothing. */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .page-header h2 { font-size: 1.5rem; }
    .page-header .btn { width: 100%; }

    /* Two-and-three-column grids become one. Written once here rather than
       per-feature, which is how there came to be seven breakpoints. */
    .form-row,
    .settings-grid,
    .profile-grid,
    .admin-grid { grid-template-columns: minmax(0, 1fr); }

    /* A table that will not fit scrolls inside itself rather than taking the
       page with it. */
    .table-wrap,
    .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Long unbroken strings — URLs, tokens, a pasted stack trace — are the
       other way a page ends up wider than the screen. */
    .post-content,
    .post-body,
    .message-body {
        overflow-wrap: anywhere;
    }

    .post-content pre,
    .post-body pre {
        overflow-x: auto;
        max-width: 100%;
    }

    /* Toolbars wrap instead of scrolling off the edge. */
    .topic-actions,
    .post-actions,
    .moderation-bar,
    .editor-toolbar {
        flex-wrap: wrap;
    }
}

/* ---- The rest of what the check found ---------------------------------- */

@media (max-width: 640px) {
    /*
       These are all the same shape of mistake: a control drawn as a line of
       small text, sized by its font rather than by the thumb aiming at it.
       Listed rather than caught by a blanket rule, because a blanket rule
       over every `a` would take the prose with it.
    */
    .breadcrumb a,
    .breadcrumb span,
    /* "Forgot your password?" is a link alone on its own line under a form —
       standalone, so a target, not prose. */
    .auth-links a,
    .widget-person,
    .stream-nav-item,
    .settings-nav a,
    .profile-tab,
    .toolbar-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* The breadcrumb becomes a row of targets, so it needs room to be one. */
    .breadcrumb { flex-wrap: wrap; row-gap: 0; }

    /* The editor toolbar: square buttons, so width matters as much as height. */
    .toolbar-btn { min-width: 44px; justify-content: center; }

    /* A person chip in a sidebar widget is a link to a profile. */
    .widget-person { padding-top: 0.35rem; padding-bottom: 0.35rem; }
}

/* ---- The topic row on a phone ------------------------------------------ */

/*
   Wide, the row is one line: avatar, badges, title and author, replies and
   views, all beside each other. At 375px that same line gives the title about
   90px, and "Hello Convoro World" comes out as three words on three lines
   with the reply count squeezed against the edge.

   Narrow, it becomes a block: the avatar down the left, and everything else
   stacked beside it in the order it is read — badges, title, who and when,
   then the numbers.
*/
@media (max-width: 640px) {
    .topic-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        column-gap: 0.8rem;
        row-gap: 0;
        padding: 0.9rem 1rem;
    }

    /* The avatar runs down the side of everything stacked beside it. */
    .topic-row > .avatar,
    .topic-row > .avatar-md,
    .topic-row > .avatar-sm {
        grid-column: 1;
        grid-row: 1 / span 3;
    }

    .topic-row .topic-meta,
    .topic-row .topic-info,
    .topic-row .topic-stats {
        grid-column: 2;
        min-width: 0;
    }

    /* The badge strip is often empty, and an empty grid row must not leave a
       gap behind it — hence row-gap: 0 above and margins here instead. */
    .topic-row .topic-meta:not(:empty) { margin-bottom: 0.3rem; }

    .topic-row .topic-title { font-size: 1.02rem; line-height: 1.3; }

    /* The numbers go under the title as a quiet line rather than a column
       fighting it for width. */
    .topic-row .topic-stats {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 0.75rem;
        margin-top: 0.35rem;
        text-align: left;
    }

    /* The selection gutter is the moderator's, and on a phone it is taking
       width from everybody. It keeps a target but stops keeping a column. */
    .topic-select { flex: 0 0 1.75rem; }

    .forum-row .forum-desc { font-size: 0.85rem; }
}

/* ---- Two corrections the screenshots found ----------------------------- */

@media (max-width: 640px) {
    /*
       Log out is a .btn-sm, so it was picking up the pill treatment meant for
       Register and sitting 1.1rem further in than every row above it. In the
       panel it is a row like the others; Register is the exception because it
       is an action rather than a destination.
    */
    .header-menu-check:checked ~ .header-menu > .header-nav .btn-sm.header-logout {
        margin: 0;
        border-radius: 0;
        width: 100%;
        justify-content: flex-start;
    }

    /*
       The moon and sun glyph is what the toggle *is* when it is a 44px button
       in the bar. In the panel the row says "Dark mode" in words, and the
       glyph only pushes that text out of line with every label above it.
    */
    .header-menu-check:checked ~ .header-menu .theme-toggle-glyph { display: none; }

    /* The forum's follow control and its New Topic button are a pair, so they
       are the same width rather than one full and one not. */
    .page-header select,
    .page-header .follow-form,
    .page-header form { width: 100%; }
    .page-header select { max-width: none; }
}