/* ==========================================================================
   Bullet Boards - Warm Editorial Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts - Using distinctive, characterful choices
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Source+Sans+3:ital,wght@0,300..900;1,300..900&family=JetBrains+Mono:wght@400;500&display=swap');

/* --------------------------------------------------------------------------
   Design Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Warm paper palette */
    --clr-cream: #FAF7F2;
    --clr-cream-dark: #F0EBE3;
    --clr-cream-darker: #E5DFD5;

    /* Ink & text */
    --clr-ink: #1A1A18;
    --clr-ink-soft: #3D3D3A;
    --clr-ink-muted: #6B6B66;

    /* Accent - Burnt Terracotta */
    --clr-accent: #C75B39;
    --clr-accent-hover: #B04A2A;
    --clr-accent-light: #E8D5CF;

    /* Primary action color - defaults to ink; board theming (BoardThemeStyle)
       overrides these and the accent trio per board, so anything brandable
       must read these tokens rather than --clr-ink directly. */
    --clr-primary: var(--clr-ink);
    --clr-primary-hover: var(--clr-ink-soft);

    /* Utility */
    --clr-success: #2D6A4F;
    --clr-error: #9B2C2C;
    --clr-error-bg: #FEE2E2;

    /* Typography */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Source Sans 3', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Sizing */
    --max-width: 1100px;
    --max-width-narrow: 480px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(26, 26, 24, 0.05);
    --shadow-md: 0 4px 12px rgba(26, 26, 24, 0.08);
    --shadow-lg: 0 12px 40px rgba(26, 26, 24, 0.12);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--clr-ink);
    background-color: var(--clr-cream);
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-blend-mode: soft-light;
    background-size: 200px 200px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--clr-ink);
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h3 {
    font-size: 1.25rem;
}

p {
    margin-bottom: var(--space-md);
    color: var(--clr-ink-soft);
}

p:last-child {
    margin-bottom: 0;
}

strong {
    font-weight: 600;
    color: var(--clr-ink);
}

small {
    font-size: 0.875rem;
    color: var(--clr-ink-muted);
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
a {
    color: var(--clr-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: all var(--transition-fast);
}

a:hover {
    color: var(--clr-accent-hover);
    text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Layout - Site Header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 247, 242, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--clr-cream-darker);
}

.site-header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-md) var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-ink);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.site-logo:hover {
    color: var(--clr-ink);
    text-decoration: none;
}

.site-logo::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background: var(--clr-accent);
    border-radius: 50%;
}

/* Navigation */
.main-nav {
    padding: 0;
}

.main-nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.main-nav-item a,
.main-nav-link {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--clr-ink-soft);
    text-decoration: none;
    padding: var(--space-xs) 0;
    position: relative;
    transition: color var(--transition-fast);
}

.main-nav-item a::after,
.main-nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--clr-accent);
    transition: width var(--transition-base);
}

.main-nav-item a:hover,
.main-nav-link:hover {
    color: var(--clr-ink);
}

.main-nav-item a:hover::after,
.main-nav-link:hover::after {
    width: 100%;
}

.main-nav-signout {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--clr-ink-muted);
    background: none;
    border: none;
    padding: var(--space-xs) 0;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.main-nav-signout:hover {
    color: var(--clr-error);
}

/* Notification Badge */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--clr-accent);
    color: white;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    margin-left: var(--space-xs);
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Layout - Main Content
   -------------------------------------------------------------------------- */
main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
}

.container {
    max-width: 720px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Hero Section (Home Page)
   -------------------------------------------------------------------------- */
.hero {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4xl) 0;
    max-width: 800px;
}

.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--clr-accent);
    margin-bottom: var(--space-lg);
    opacity: 0;
    animation: fadeSlideUp 0.6s ease forwards;
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    opacity: 0;
    animation: fadeSlideUp 0.6s ease 0.1s forwards;
}

.hero h1 em {
    font-style: italic;
    color: var(--clr-accent);
}

.hero-description {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--clr-ink-soft);
    max-width: 540px;
    margin-bottom: var(--space-2xl);
    opacity: 0;
    animation: fadeSlideUp 0.6s ease 0.2s forwards;
}

.hero-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeSlideUp 0.6s ease 0.3s forwards;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
a.btn,
button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    padding: 0.875rem 1.75rem;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background: none;
}

.btn.btn-primary {
    background: var(--clr-primary);
    color: var(--clr-cream);
}

.btn.btn-primary:hover {
    background: var(--clr-primary-hover);
    color: var(--clr-cream);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.color-field-row {
    display: flex;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.color-field-group input[type="color"] {
    width: 64px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 4px;
    background: var(--clr-cream);
    cursor: pointer;
}

.color-form-actions {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    margin-top: var(--space-md);
}

.btn.btn-secondary {
    background: transparent;
    color: var(--clr-ink);
    border: 2px solid var(--clr-ink);
}

.btn.btn-secondary:hover {
    background: var(--clr-ink);
    color: var(--clr-cream);
    text-decoration: none;
}

.btn.btn-accent {
    background: var(--clr-accent);
    color: var(--clr-cream);
}

.btn.btn-accent:hover {
    background: var(--clr-accent-hover);
    color: var(--clr-cream);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

button.btn:disabled,
button.btn[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

button.btn:disabled:hover,
button.btn[disabled]:hover {
    background: inherit;
    color: inherit;
    text-decoration: none;
    transform: none;
    box-shadow: none;
}

.btn.btn-ghost {
    background: transparent;
    color: var(--clr-ink-soft);
}

.btn.btn-ghost:hover {
    background: var(--clr-cream-dark);
    color: var(--clr-ink);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 8px;
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-header {
    margin-bottom: var(--space-lg);
}

.card-title {
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
}

.card-description {
    font-size: 0.9375rem;
    color: var(--clr-ink-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-group {
    margin-bottom: var(--space-lg);
}

label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--clr-ink);
    margin-bottom: var(--space-sm);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="datetime-local"],
textarea,
select {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.875rem 1rem;
    background: white;
    border: 2px solid var(--clr-cream-darker);
    border-radius: 6px;
    color: var(--clr-ink);
    transition: all var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--clr-ink);
    box-shadow: 0 0 0 3px rgba(26, 26, 24, 0.08);
}

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

textarea {
    min-height: 120px;
    resize: vertical;
}

input[type="submit"] {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.875rem 1.75rem;
    background: var(--clr-ink);
    color: var(--clr-cream);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

input[type="submit"]:hover {
    background: var(--clr-ink-soft);
    transform: translateY(-1px);
}

.form-hint {
    font-size: 0.8125rem;
    color: var(--clr-ink-muted);
    margin-top: var(--space-xs);
    margin-bottom: 0;
}

.form-error {
    padding: var(--space-md);
    background: var(--clr-error-bg);
    border: 1px solid rgba(155, 44, 44, 0.2);
    border-radius: 6px;
    color: var(--clr-error);
    font-size: 0.9375rem;
    margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Auth Pages
   -------------------------------------------------------------------------- */
.auth-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

.auth-card {
    width: 100%;
    max-width: var(--max-width-narrow);
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 12px;
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.auth-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.auth-header h1 {
    font-size: 1.75rem;
    margin-bottom: var(--space-sm);
}

.auth-header p {
    color: var(--clr-ink-muted);
    margin: 0;
}

.login-form,
.signup-form {
    display: flex;
    flex-direction: column;
}

.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="email"] {
    margin-bottom: var(--space-md);
}

.login-form input[type="submit"] {
    width: 100%;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.login-form label {
    margin-bottom: var(--space-xs);
}

.login-page-heading {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--space-xl);
    color: var(--clr-ink);
}

.auth-link {
    display: block;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--clr-ink-muted);
}

.auth-link:hover {
    color: var(--clr-accent);
}

/* Auth card standalone buttons (after success messages) */
.auth-card > .btn {
    width: 100%;
    margin-top: var(--space-md);
}

.auth-card .form-success + .btn,
.auth-card .form-error + .btn {
    margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Dashboard / App Page
   -------------------------------------------------------------------------- */
.dashboard {
    display: grid;
    gap: var(--space-2xl);
}

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

.dashboard-header h1 {
    margin: 0;
}

/* Board List */
.board-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
    list-style: none;
}

.board-item {
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 8px;
    padding: var(--space-xl);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

.board-item:hover {
    border-color: var(--clr-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.board-item-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--clr-ink);
    margin-bottom: var(--space-sm);
}

.board-item-description {
    font-size: 0.9375rem;
    color: var(--clr-ink-muted);
    flex: 1;
    margin-bottom: var(--space-md);
}

.board-item-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--clr-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.board-item-link::after {
    content: '→';
    transition: transform var(--transition-fast);
}

.board-item:hover .board-item-link::after {
    transform: translateX(4px);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
    background: var(--clr-cream-dark);
    border-radius: 12px;
    border: 2px dashed var(--clr-cream-darker);
}

.empty-state h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.empty-state p {
    color: var(--clr-ink-muted);
    margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Board Page
   -------------------------------------------------------------------------- */
.board-header {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--clr-cream-darker);
}

.board-header h1 {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.board-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) var(--space-sm);
    background: var(--clr-cream-dark);
    border-radius: 4px;
    color: var(--clr-ink-muted);
}

.board-status::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--clr-success);
    border-radius: 50%;
}

.board-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.board-actions a {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--clr-ink-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--clr-cream-dark);
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.board-actions a:hover {
    background: var(--clr-cream-darker);
    color: var(--clr-ink);
}

.board-actions a.danger:hover {
    background: var(--clr-error-bg);
    color: var(--clr-error);
}

/* Admin Messages */
.admin-messages {
    margin-bottom: var(--space-2xl);
}

.admin-message {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--clr-accent-light);
    border-left: 3px solid var(--clr-accent);
    border-radius: 0 8px 8px 0;
    margin-bottom: var(--space-md);
}

.admin-message:last-child {
    margin-bottom: 0;
}

.admin-message-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.admin-message-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--clr-ink);
}

.admin-message-content p {
    font-size: 0.9375rem;
    color: var(--clr-ink-soft);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Create / Settings Form Pages
   -------------------------------------------------------------------------- */
.page-header {
    margin-bottom: var(--space-2xl);
}

/* When page-header has actions (form or buttons alongside content) */
.page-header:has(> form),
.page-header:has(> .btn) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.page-header:has(> form) > div:first-child,
.page-header:has(> .btn) > div:first-child {
    flex: 1;
}

.page-header h1 {
    margin-bottom: var(--space-sm);
}

.page-header .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--clr-ink-muted);
    text-decoration: none;
    margin-bottom: var(--space-lg);
}

.page-header .back-link:hover {
    color: var(--clr-accent);
}

.create-new-board-form,
.board-settings-form {
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 12px;
    padding: var(--space-2xl);
    box-shadow: var(--shadow-sm);
}

.create-new-board-form label,
.board-settings-form label {
    margin-bottom: var(--space-sm);
}

.create-new-board-form input[type="text"],
.create-new-board-form textarea,
.board-settings-form input[type="text"],
.board-settings-form textarea {
    margin-bottom: var(--space-lg);
}

.create-new-board-form input[type="submit"],
.board-settings-form input[type="submit"] {
    width: 100%;
    margin-top: var(--space-md);
}

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

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

.text-accent {
    color: var(--clr-accent);
}

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Posts Section
   Shared header style for the three board-page sections (Events / Polls /
   Posts) lives here — keep them identical so the page reads as one rhythm.
   -------------------------------------------------------------------------- */
.posts-section {
    margin-top: var(--space-2xl);
}

.events-header,
.polls-header,
.posts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--clr-cream-darker);
}

.events-header h2,
.polls-header h2,
.posts-header h2 {
    font-size: 1.25rem;
    margin: 0;
}

.post-filters {
    display: flex;
    gap: var(--space-lg);
    align-items: end;
    margin-bottom: var(--space-lg);
}

.post-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.post-filters label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--clr-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.post-filters select {
    width: auto;
    min-width: 160px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.post-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.post-card {
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 8px;
    padding: var(--space-xl);
    transition: all var(--transition-base);
    position: relative;
}

.post-card:hover {
    border-color: var(--clr-accent);
    box-shadow: var(--shadow-md);
}

.post-card-pinned {
    border-left: 3px solid var(--clr-accent);
    background: linear-gradient(to right, var(--clr-accent-light), white 8%);
}

.post-pin-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) var(--space-sm);
    background: var(--clr-accent);
    color: white;
    border-radius: 4px;
    margin-bottom: var(--space-sm);
}

.post-card-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.post-card-title a {
    color: var(--clr-ink);
    text-decoration: none;
}

.post-card-title a:hover {
    color: var(--clr-accent);
}

.post-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-size: 0.8125rem;
    color: var(--clr-ink-muted);
    margin-bottom: var(--space-md);
}

.post-card-meta span::before {
    content: '•';
    margin-right: var(--space-md);
}

.post-card-meta span:first-child::before {
    display: none;
}

.post-card-excerpt {
    font-size: 0.9375rem;
    color: var(--clr-ink-soft);
    line-height: 1.5;
    margin: 0;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) 0;
    margin-top: var(--space-md);
    border-top: 1px solid var(--clr-cream-darker);
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--clr-ink-muted);
    font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   Post Detail — the "notice": an editorial article set on the paper.

   Scoped to .postview. This is a top-down board, so the notice is the message
   from the top and must dominate the page (dateline, big headline, byline
   rule, readable column). The comments below stay deliberately quiet — see
   the Comments section. New .pv-* classes are bare (like .bv-*); shared/global
   classes are overridden under .postview, matching the board-view convention.
   -------------------------------------------------------------------------- */
.postview { max-width: 720px; }

.postview .pv-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--clr-ink-muted);
    text-decoration: none;
    margin-bottom: var(--space-xl);
}
.postview .pv-back:hover { color: var(--clr-accent); }

.pv-notice { margin-bottom: var(--space-2xl); }

.pv-dateline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-ink-muted);
    margin-bottom: var(--space-sm);
}
.pv-dateline__pin { color: var(--clr-accent); }
.pv-dateline__sep { color: var(--clr-cream-darker); }

.pv-title {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-sm);
}

.pv-byline {
    font-size: 0.9375rem;
    color: var(--clr-ink-muted);
    margin: 0 0 var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--clr-cream-darker);
}
.pv-byline strong { color: var(--clr-ink-soft); font-weight: 600; }
.pv-byline__edited { font-style: italic; }

.pv-body {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--clr-ink-soft);
}
.postview .reaction-pills { margin-top: var(--space-lg); }

.pv-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--clr-cream-darker);
}
.postview .pv-tools .inline-form { display: inline-flex; }
.postview .pv-tools .btn {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 6px;
    color: var(--clr-ink-muted);
    background: none;
}
.postview .pv-tools .btn:hover {
    color: var(--clr-accent);
    border-color: var(--clr-accent);
    background: none;
    transform: none;
    box-shadow: none;
    text-decoration: none;
}
.postview .pv-tools .btn.danger:hover {
    color: var(--clr-error);
    border-color: var(--clr-error);
    background: var(--clr-error-bg);
}

.inline-form {
    display: inline;
}

.btn-ghost.danger:hover {
    background: var(--clr-error-bg);
    color: var(--clr-error);
}

/* --------------------------------------------------------------------------
   Comments — a quiet, subordinate ledger of responses.

   Top-down board: the notice above is the message; comments are light
   acknowledgements, not a discussion. Styled flat (hairline-separated rows,
   no cards, no connecting thread) and low-weight so the page never invites
   back-and-forth or competes with the notice. Scoped to .postview — the
   wrapper, list, and HTMX-appended comment fragments all render inside it.
   -------------------------------------------------------------------------- */
.postview .comments-section { margin-top: var(--space-2xl); }

.pv-comments-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-ink-muted);
    margin-bottom: var(--space-lg);
}
.pv-comments-label__count { color: var(--clr-accent); }

/* Composer — modest; a small box gently signals "keep it brief". */
.postview .comment-form {
    background: var(--clr-cream-dark);
    border: 1px solid var(--clr-cream-darker);
    border-radius: 10px;
    padding: var(--space-md);
    margin-bottom: var(--space-xl);
}
.postview .comment-form textarea {
    min-height: 60px;
    margin-bottom: var(--space-sm);
    background: white;
}
.postview .comment-form input[type="submit"] {
    width: auto;
    padding: 0.55rem 1.2rem;
    font-size: 0.9375rem;
}

/* Responses — flat hairline-separated rows, not cards. */
.postview .comment-list { display: block; }
.postview .comment {
    background: none;
    border: 0;
    border-top: 1px solid var(--clr-cream-darker);
    border-radius: 0;
    padding: var(--space-md) 0;
}
.postview .comment:first-child { border-top: 0; padding-top: 0; }
.postview .comment-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}
.postview .comment-author { font-weight: 600; color: var(--clr-ink); font-size: 0.9375rem; }
.postview .comment-date {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: var(--clr-ink-muted);
}
.postview .comment-content { font-size: 0.9375rem; color: var(--clr-ink-soft); }
.postview .comment .reaction-pills { margin-top: var(--space-sm); }
.postview .comment-actions { margin-top: var(--space-xs); }

.postview .btn-delete-comment {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--clr-ink-muted);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.postview .btn-delete-comment:hover { color: var(--clr-error); }

.pv-no-comments {
    font-size: 0.9375rem;
    color: var(--clr-ink-muted);
    padding: var(--space-sm) 0;
}

/* --------------------------------------------------------------------------
   Post Form
   -------------------------------------------------------------------------- */
.post-form {
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 12px;
    padding: var(--space-2xl);
    box-shadow: var(--shadow-sm);
}

.post-form label {
    margin-bottom: var(--space-sm);
}

.post-form input[type="text"],
.post-form textarea {
    margin-bottom: var(--space-lg);
}

.post-form textarea {
    min-height: 200px;
}

.post-form input[type="submit"] {
    width: 100%;
    margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   Admin Settings
   -------------------------------------------------------------------------- */
.admin-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.settings-section {
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 12px;
    padding: var(--space-xl);
}

.settings-section h2 {
    font-size: 1.125rem;
    margin-bottom: var(--space-sm);
}

.settings-section > p {
    margin-bottom: var(--space-lg);
}

.add-admin-form .form-row {
    display: flex;
    gap: var(--space-md);
}

.add-admin-form input[type="text"] {
    flex: 1;
    margin-bottom: 0;
}

.add-admin-form input[type="submit"] {
    width: auto;
    white-space: nowrap;
}

.admin-list {
    list-style: none;
}

.admin-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--clr-cream-darker);
}

.admin-item:last-child {
    border-bottom: none;
}

.admin-username {
    font-weight: 500;
    color: var(--clr-ink);
}

/* --------------------------------------------------------------------------
   Member Settings
   -------------------------------------------------------------------------- */
.member-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.add-member-form .form-row {
    display: flex;
    gap: var(--space-md);
}

.add-member-form input[type="text"] {
    flex: 1;
    margin-bottom: 0;
}

.add-member-form input[type="submit"] {
    width: auto;
    white-space: nowrap;
}

.member-list {
    list-style: none;
}

.member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--clr-cream-darker);
}

.member-item:last-child {
    border-bottom: none;
}

.member-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.member-username {
    font-weight: 500;
    color: var(--clr-ink);
}

.member-role {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) var(--space-sm);
    background: var(--clr-cream-dark);
    border-radius: 4px;
    color: var(--clr-ink-muted);
}

.member-actions {
    display: flex;
    gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Invite Settings
   -------------------------------------------------------------------------- */
.invite-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.create-invite-form .form-group {
    margin-bottom: var(--space-lg);
}

.create-invite-form input[type="number"] {
    width: 120px;
}

.invite-list {
    list-style: none;
}

.invite-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--clr-cream-darker);
    gap: var(--space-md);
}

.invite-item:last-child {
    border-bottom: none;
}

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

.invite-url {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    background: var(--clr-cream-dark);
    padding: var(--space-sm) var(--space-md);
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: var(--space-sm);
}

.invite-meta {
    display: flex;
    gap: var(--space-md);
    font-size: 0.8125rem;
    color: var(--clr-ink-muted);
}

.invite-meta span::before {
    content: '•';
    margin-right: var(--space-md);
}

.invite-meta span:first-child::before {
    display: none;
}

/* --------------------------------------------------------------------------
   Invite Preview Page
   -------------------------------------------------------------------------- */
.invite-card {
    text-align: center;
}

.invite-preview-details {
    margin-bottom: var(--space-xl);
}

.invite-preview-details .board-description {
    color: var(--clr-ink-soft);
    font-size: 1rem;
}

.invite-auth-prompt {
    margin-top: var(--space-lg);
}

.invite-auth-prompt p {
    margin-bottom: var(--space-lg);
    color: var(--clr-ink-muted);
}

.invite-auth-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

/* Form success message */
.form-success {
    padding: var(--space-md);
    background: rgba(45, 106, 79, 0.1);
    border: 1px solid rgba(45, 106, 79, 0.2);
    border-radius: 6px;
    color: var(--clr-success);
    font-size: 0.9375rem;
    margin-bottom: var(--space-lg);
}

/* Settings links */
.settings-links {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Board action button (for leave board) */
.board-action-btn {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--clr-ink-muted);
    background: var(--clr-cream-dark);
    border: none;
    border-radius: 6px;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.board-action-btn:hover {
    background: var(--clr-cream-darker);
    color: var(--clr-ink);
}

.board-action-btn.danger:hover {
    background: var(--clr-error-bg);
    color: var(--clr-error);
}

/* --------------------------------------------------------------------------
   Polls Section
   -------------------------------------------------------------------------- */
.polls-section {
    margin-top: var(--space-2xl);
}

.poll-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.poll-card {
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 8px;
    padding: var(--space-xl);
    transition: all var(--transition-base);
}

.poll-card:hover {
    border-color: var(--clr-accent);
    box-shadow: var(--shadow-md);
}

.poll-card-ended {
    opacity: 0.7;
}

.poll-card-header {
    margin-bottom: var(--space-md);
}

.poll-card-question {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.poll-card-question a {
    color: var(--clr-ink);
    text-decoration: none;
}

.poll-card-question a:hover {
    color: var(--clr-accent);
}

.poll-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-size: 0.8125rem;
    color: var(--clr-ink-muted);
}

.poll-card-meta span::before {
    content: '•';
    margin-right: var(--space-md);
}

.poll-card-meta span:first-child::before {
    display: none;
}

.poll-ended-badge {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) var(--space-sm);
    background: var(--clr-cream-dark);
    color: var(--clr-ink-muted);
    border-radius: 4px;
}

/* Poll Detail */
.poll-detail {
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 12px;
    padding: var(--space-2xl);
}

.poll-detail-header {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--clr-cream-darker);
}

.poll-detail-header h1 {
    font-size: 1.75rem;
    margin-bottom: var(--space-md);
}

.poll-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-size: 0.875rem;
    color: var(--clr-ink-muted);
    margin-bottom: var(--space-md);
}

.poll-detail-meta span::before {
    content: '•';
    margin-right: var(--space-md);
}

.poll-detail-meta span:first-child::before {
    display: none;
}

.poll-detail-meta .poll-ended {
    color: var(--clr-error);
}

.poll-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.poll-badge {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) var(--space-sm);
    background: var(--clr-cream-dark);
    color: var(--clr-ink-muted);
    border-radius: 4px;
}

.poll-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--clr-cream-darker);
}

/* Poll Voting */
.poll-voting-section {
    margin-top: var(--space-lg);
}

.poll-vote-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.poll-vote-form-compact .poll-submit-btn {
    align-self: flex-start;
}

.poll-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.poll-option-label {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--clr-cream-dark);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 400;
    margin-bottom: 0;
}

.poll-option-label:hover {
    background: var(--clr-cream-darker);
}

.poll-option-label input[type="radio"],
.poll-option-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--clr-accent);
}

.poll-option-label span {
    flex: 1;
}

/* Poll Results */
.poll-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.poll-results-summary {
    font-size: 0.875rem;
    color: var(--clr-ink-muted);
    margin-bottom: var(--space-sm);
}

.poll-results-detail {
    margin-bottom: var(--space-lg);
}

.poll-result-option {
    position: relative;
    background: var(--clr-cream-dark);
    border-radius: 6px;
    overflow: hidden;
}

.poll-result-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--clr-accent-light);
    transition: width var(--transition-slow);
}

.poll-result-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    z-index: 1;
}

.poll-option-text {
    font-weight: 500;
    color: var(--clr-ink);
}

.poll-option-count {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--clr-ink-muted);
}

.poll-result-selected {
    border: 2px solid var(--clr-accent);
}

.poll-result-selected .poll-result-bar {
    background: rgba(199, 91, 57, 0.25);
}

.poll-change-vote {
    display: inline-block;
    margin-top: var(--space-sm);
    font-size: 0.875rem;
}

.poll-change-prompt {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    color: var(--clr-ink-muted);
}

/* Poll Form */
.poll-form {
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 12px;
    padding: var(--space-2xl);
    box-shadow: var(--shadow-sm);
}

.poll-form label {
    margin-bottom: var(--space-sm);
}

.poll-form input[type="text"],
.poll-form textarea {
    margin-bottom: var(--space-lg);
}

.poll-form input[type="submit"] {
    width: 100%;
    margin-top: var(--space-md);
}

.poll-options-fieldset,
.poll-settings-fieldset {
    border: 1px solid var(--clr-cream-darker);
    border-radius: 8px;
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.poll-options-fieldset legend,
.poll-settings-fieldset legend {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    padding: 0 var(--space-sm);
}

.poll-options-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.poll-option-input input {
    margin-bottom: 0;
}

.poll-checkbox-group {
    margin-bottom: var(--space-md);
}

.poll-checkbox-group:last-child {
    margin-bottom: 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 400;
    cursor: pointer;
    margin-bottom: var(--space-xs);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--clr-accent);
}

.poll-checkbox-group .form-hint {
    margin-left: calc(18px + var(--space-sm));
    margin-top: 0;
}

.poll-form .form-group {
    margin-bottom: var(--space-lg);
}

.poll-form input[type="datetime-local"] {
    width: auto;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --space-xl: 1.5rem;
        --space-2xl: 2rem;
        --space-3xl: 2.5rem;
        --space-4xl: 3rem;
    }

    .site-header-inner {
        padding: var(--space-md);
    }

    .main-nav-list {
        gap: var(--space-md);
    }

    .hero {
        min-height: auto;
        padding: var(--space-2xl) 0;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    .board-list {
        grid-template-columns: 1fr;
    }

    .auth-card {
        padding: var(--space-xl);
    }

    .add-admin-form .form-row,
    .add-member-form .form-row {
        flex-direction: column;
    }

    .add-admin-form input[type="submit"],
    .add-member-form input[type="submit"] {
        width: 100%;
    }

    .member-item,
    .invite-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .member-actions,
    .settings-links {
        flex-direction: column;
        width: 100%;
    }

    .settings-links .btn {
        width: 100%;
        text-align: center;
    }

    .invite-auth-actions {
        flex-direction: column;
    }

    .invite-auth-actions .btn {
        width: 100%;
    }

    .page-header:has(> form),
    .page-header:has(> .btn) {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header > form {
        align-self: flex-start;
    }

    .notification-link {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

/* --------------------------------------------------------------------------
   Board Search
   -------------------------------------------------------------------------- */
.board-controls {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.board-search {
    flex: 1;
}

.board-search-input {
    width: 100%;
    max-width: 400px;
    padding: var(--space-sm) var(--space-md);
    font-size: 1rem;
    font-family: var(--font-body);
    border: 1px solid var(--clr-cream-darker);
    border-radius: 4px;
    background: white;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.board-search-input:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px var(--clr-accent-light);
}

.board-sort {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    white-space: nowrap;
}

.board-sort label {
    font-size: 0.875rem;
    color: var(--clr-ink-muted);
}

.board-sort select {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    font-family: var(--font-body);
    border: 1px solid var(--clr-cream-darker);
    border-radius: 4px;
    background: white;
    cursor: pointer;
    width: auto;
}

.board-item {
    position: relative;
}

.favorite-toggle {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
}

.btn-favorite {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--clr-ink-muted);
    padding: var(--space-xs);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.btn-favorite:hover {
    transform: scale(1.2);
    color: var(--clr-accent);
}

.btn-favorite.active {
    color: var(--clr-accent);
}

/* --------------------------------------------------------------------------
   Error Pages
   -------------------------------------------------------------------------- */
.error-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--space-xl);
}

.error-content {
    text-align: center;
    max-width: 480px;
}

.error-code {
    display: block;
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 700;
    color: var(--clr-accent);
    line-height: 1;
    margin-bottom: var(--space-md);
}

.error-content h1 {
    margin-bottom: var(--space-sm);
}

.error-content .text-muted {
    margin-bottom: var(--space-xl);
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
}

/* --------------------------------------------------------------------------
   Profile Page
   -------------------------------------------------------------------------- */
.profile-settings {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.profile-settings .settings-section {
    margin-bottom: 0;
}

.profile-settings .settings-section h2 {
    margin-bottom: var(--space-lg);
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.profile-form .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: 0;
}

.profile-form .form-group label {
    margin-bottom: 0;
}

.profile-form input[type="submit"],
.profile-form .btn {
    margin-top: var(--space-sm);
    align-self: flex-start;
}

.email-verified {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--clr-success);
    background: rgba(45, 106, 79, 0.1);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    margin-top: var(--space-xs);
}

.email-unverified {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--clr-error);
    background: var(--clr-error-bg);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    margin-top: var(--space-xs);
}

.danger-zone {
    border-color: var(--clr-error);
    border-width: 1px;
    border-top-width: 3px;
}

.danger-zone h2 {
    color: var(--clr-error);
}

/* Tier / Subscription */
.tier-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

/* Manage / cancel / resume controls — buttons and the portal link in one row */
.subscription-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.tier-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
}

.tier-free {
    color: var(--clr-ink-muted);
    background: var(--clr-cream-dark);
    border: 1px solid var(--clr-cream-darker);
}

.tier-pro {
    color: var(--clr-accent);
    background: var(--clr-accent-light);
    border: 1px solid var(--clr-accent);
}

/* Upgrade plan selector — profile subscription section */
.upgrade-plan-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.upgrade-plan-period {
    font-size: 0.85em;
    opacity: 0.85;
}

.upgrade-plan-annual {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.upgrade-plan-save {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 2px var(--space-xs);
    border-radius: 4px;
    background: var(--clr-cream);
    color: var(--clr-accent);
}

/* --------------------------------------------------------------------------
   Success Message
   -------------------------------------------------------------------------- */
.form-success {
    background-color: #D4EDDA;
    color: var(--clr-success);
    padding: var(--space-md);
    border-radius: 4px;
    margin-bottom: var(--space-lg);
    border-left: 3px solid var(--clr-success);
}

/* --------------------------------------------------------------------------
   Markdown Content
   -------------------------------------------------------------------------- */
.markdown-content {
    line-height: 1.7;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.markdown-content p {
    margin-bottom: var(--space-md);
}

.markdown-content ul,
.markdown-content ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.markdown-content li {
    margin-bottom: var(--space-xs);
}

.markdown-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--clr-cream-dark);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

.markdown-content pre {
    background: var(--clr-ink);
    color: var(--clr-cream);
    padding: var(--space-md);
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: var(--space-md);
}

.markdown-content pre code {
    background: transparent;
    padding: 0;
}

.markdown-content blockquote {
    border-left: 3px solid var(--clr-accent);
    padding-left: var(--space-md);
    margin: var(--space-md) 0;
    color: var(--clr-ink-muted);
    font-style: italic;
}

.markdown-content a {
    color: var(--clr-accent);
}

.markdown-content a:hover {
    text-decoration: underline;
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Notifications
   -------------------------------------------------------------------------- */
.notification-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.notification-item {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--clr-cream-darker);
    transition: all var(--transition-fast);
}

.notification-item:hover {
    border-color: var(--clr-accent);
    box-shadow: var(--shadow-sm);
}

.notification-unread {
    border-left: 3px solid var(--clr-accent);
    background: linear-gradient(to right, var(--clr-accent-light), white 3%);
}

.notification-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    text-decoration: none;
    color: inherit;
    gap: var(--space-md);
}

.notification-title {
    color: var(--clr-ink);
    font-weight: 500;
}

.notification-unread .notification-title {
    font-weight: 600;
}

.notification-time {
    font-size: 0.8125rem;
    color: var(--clr-ink-muted);
    white-space: nowrap;
}

/* Search */
.nav-search-form {
    display: flex;
    align-items: center;
}

.nav-search-form input[type="text"].nav-search-input {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.8125rem;
    background: var(--clr-cream);
    color: var(--clr-ink);
    width: 130px;
}

.nav-search-form input[type="text"].nav-search-input:focus {
    outline: none;
    border-color: var(--clr-accent);
}

.search-page .page-header h1 {
    font-size: 1.75rem;
}

.search-form--page {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
}

.search-form--page .form-input {
    flex: 1;
}

.search-section {
    margin-bottom: var(--space-2xl);
}

.search-section h2 {
    font-size: 1.25rem;
    margin-bottom: var(--space-md);
}

.search-results {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.search-result-item {
    border: 1px solid var(--clr-cream-darker);
    border-radius: 6px;
    transition: border-color 0.15s;
}

.search-result-item:hover {
    border-color: var(--clr-accent);
}

.search-result-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    text-decoration: none;
    color: inherit;
}

.search-result-title {
    font-weight: 600;
    color: var(--clr-ink);
}

.search-result-snippet {
    font-size: 0.875rem;
    color: var(--clr-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-meta {
    font-size: 0.8rem;
    color: var(--clr-ink-muted);
}

.text-sm {
    font-size: 0.875rem;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   HTMX Transitions & States
   -------------------------------------------------------------------------- */

.htmx-swapping {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.htmx-added {
    opacity: 0;
}
.htmx-added.htmx-settling {
    opacity: 1;
    transition: opacity 300ms ease-in;
}

.htmx-request {
    opacity: 0.65;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.htmx-error-toast {
    background: var(--clr-error-bg);
    color: var(--clr-error);
    border: 1px solid var(--clr-error);
    border-radius: 6px;
    padding: var(--space-sm) var(--space-md);
    margin-top: var(--space-sm);
    font-family: var(--font-body);
    font-size: 0.875rem;
    transition: opacity 300ms ease;
}

.htmx-error-toast-hide {
    opacity: 0;
}

/* ── Reactions ────────────────────────────────────── */
.reaction-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    margin-top: var(--space-sm);
    position: relative;
}

.reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.15em 0.5em;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 1em;
    background: var(--clr-cream);
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.15s, background 0.15s;
}

.reaction-pill:hover {
    border-color: var(--clr-accent);
}

.reaction-pill-active {
    border-color: var(--clr-accent);
    background: color-mix(in srgb, var(--clr-accent) 10%, var(--clr-cream));
}

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

.reaction-count {
    font-size: 0.8rem;
    color: var(--clr-ink-muted);
}

.reaction-add {
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-ink-muted);
    min-width: 2em;
    justify-content: center;
}

.reaction-add:hover {
    color: var(--clr-accent);
}

.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 100;
    background: var(--clr-cream);
    border: 1px solid var(--clr-cream-darker);
    border-radius: 0.5rem;
    padding: var(--space-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: var(--space-xs);
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.25em;
}

.emoji-picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    border: none;
    background: transparent;
    border-radius: 0.25em;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background 0.1s;
}

.emoji-picker-item:hover {
    background: var(--clr-cream-dark);
}

/* --------------------------------------------------------------------------
   Board Banner & Icon
   -------------------------------------------------------------------------- */

/* Banner — full-width image strip above board content */
.board-banner {
    width: 100%;
    max-height: 200px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.board-banner img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* Board icon — circular avatar shown on the board page */
.board-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--clr-cream-dark);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

/* Smaller variant used in board list cards */
.board-icon-sm {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Letter-based placeholder when no icon image is set */
.board-icon-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--clr-accent-light);
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid var(--clr-cream-dark);
    box-shadow: var(--shadow-sm);
    line-height: 1;
}

.board-icon-placeholder.board-icon-sm {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}

/* Board header title row — icon + h1 side by side */
.board-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.board-title-row h1 {
    margin-bottom: 0;
    flex: 1;
}

/* Board list item — add icon to left of text content */
.board-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.board-item-header .board-icon,
.board-item-header .board-icon-placeholder {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Settings — Appearance Section
   -------------------------------------------------------------------------- */

/* Re-uses .settings-section; this adds no overrides unless a distinct layout
   is needed. The class exists for specificity and future customisation. */
.appearance-section {
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 12px;
    padding: var(--space-xl);
}

.appearance-section h2 {
    font-size: 1.125rem;
    margin-bottom: var(--space-sm);
}

.appearance-section > p {
    margin-bottom: var(--space-lg);
}

/* Spacing between the banner and icon upload groups */
.image-upload-group {
    margin-bottom: var(--space-xl);
}

.image-upload-group:last-child {
    margin-bottom: 0;
}

.image-upload-group label {
    margin-bottom: var(--space-sm);
}

/* Preview container — banner is wider, icon is square */
.image-preview {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: var(--space-md);
    display: inline-block;
    max-width: 400px;
}

.image-preview--icon {
    max-width: 128px;
    border-radius: 50%;
}

.image-preview img {
    max-width: 100%;
    display: block;
}

/* --------------------------------------------------------------------------
   Pro Badge & Upgrade Message
   -------------------------------------------------------------------------- */

.pro-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    background: var(--clr-accent);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    vertical-align: middle;
}

.pro-upgrade-message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--clr-cream-dark);
    border-radius: 8px;
    border: 1px solid var(--clr-cream-darker);
    font-size: 0.9375rem;
    color: var(--clr-ink-soft);
    margin-top: var(--space-sm);
}

.pro-upgrade-content {
    flex: 1;
}

.pro-upgrade-content p {
    margin: 0;
}

.pro-upgrade-form {
    margin-top: var(--space-md);
}

.pro-upgrade-hint {
    margin-top: var(--space-sm);
}

.pro-upgrade-message .pro-badge {
    flex-shrink: 0;
    margin-top: 0.15em;
}

.events-section {
    margin-top: var(--space-2xl);
}

.event-card-header,
.event-detail-heading,
.event-rsvp-form,
.event-card-stats,
.event-detail-badges,
.event-detail-meta {
    display: flex;
    gap: var(--space-sm);
}

.event-card-header,
.event-detail-heading {
    align-items: flex-start;
    justify-content: space-between;
}

.event-list,
.event-attendee-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-list {
    display: grid;
    gap: var(--space-lg);
}

.event-card,
.event-detail,
.event-rsvp-panel,
.event-attendee-group {
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.event-card,
.event-rsvp-panel,
.event-attendee-group {
    padding: var(--space-lg);
}

.event-detail {
    padding: var(--space-xl);
}

.event-card-past {
    opacity: 0.8;
}

.event-card-title,
.event-card-title a,
.event-detail h1,
.event-attendee-group h3 {
    margin: 0;
}

.event-card-time,
.event-detail-description,
.event-attendee-list,
.event-attendee-list li + li {
    margin-top: var(--space-sm);
}

.event-card-description {
    margin: var(--space-sm) 0 0;
    color: var(--clr-ink-soft);
}

.event-card-stats,
.event-detail-meta {
    flex-wrap: wrap;
    color: var(--clr-ink-soft);
    font-size: 0.9375rem;
}

.event-card-stats span,
.event-detail-meta span,
.event-status-badge,
.event-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--clr-cream-dark);
}

.event-type-badge {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.event-status-badge-past {
    background: var(--clr-cream-darker);
}

.empty-state-compact {
    padding: var(--space-lg);
}

.event-attendees {
    margin-top: var(--space-lg);
}

.event-form-grid,
.event-attendee-grid {
    display: grid;
    gap: var(--space-lg);
}

.event-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.event-form-grid > .form-group {
    margin-bottom: 0;
}

.event-form .form-hint {
    margin-top: var(--space-md);
}

.event-form input[type="submit"] {
    margin-top: var(--space-lg);
}

.event-rsvp-panel,
.event-attendees {
    margin-top: var(--space-xl);
}

.event-rsvp-panel {
    display: grid;
    gap: var(--space-md);
}

.event-rsvp-form {
    flex-wrap: wrap;
}

.event-rsvp-active {
    background: var(--clr-accent);
    color: white;
    border-color: var(--clr-accent);
}

.event-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.event-detail-content {
    margin-top: var(--space-lg);
}

.event-attendee-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: var(--space-md);
}

.event-attendee-list li + li {
    border-top: 1px solid var(--clr-cream-darker);
    padding-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Image Remove Button
   -------------------------------------------------------------------------- */

.image-remove-btn {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--clr-error);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.image-remove-btn:hover {
    background: var(--clr-error-bg);
    border-color: rgba(155, 44, 44, 0.2);
}

/* ==========================================================================
   Board view redesign
   Scoped to .boardview so the public board, search, and detail pages (which
   reuse .post-card / .event-card / .poll-card) keep their existing styles.
   The mobile nav (.bv-navtoggle / .bv-burger) is the one deliberately-global
   change — it improves every page.
   ========================================================================== */

/* --- Global mobile nav (checkbox-hack hamburger) -------------------------- */
.bv-navtoggle,
.bv-burger { display: none; }

@media (max-width: 768px) {
    .site-header-inner { position: relative; }

    .bv-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: 1px solid var(--clr-cream-darker);
        border-radius: 8px;
        background: var(--clr-cream);
        color: var(--clr-ink);
        cursor: pointer;
    }
    .bv-burger svg { width: 20px; height: 20px; }

    .main-nav {
        position: absolute;
        top: 100%;
        right: var(--space-md);
        left: var(--space-md);
        margin-top: var(--space-sm);
        padding: var(--space-md);
        background: var(--clr-cream);
        border: 1px solid var(--clr-cream-darker);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        display: none;
        z-index: 200;
    }
    .bv-navtoggle:checked ~ .main-nav { display: block; }

    .main-nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }
    .main-nav-item { width: 100%; }
    .main-nav-item a,
    .main-nav-link,
    .main-nav-signout { padding: var(--space-sm) 0; }
    .nav-search-form,
    .nav-search-form input[type="text"].nav-search-input { width: 100%; }
}

/* --- Page scope ----------------------------------------------------------- */
.boardview { max-width: 1140px; }
/* No polls and no way to start one: drop the rail, cap the reading column. */
.boardview--solo { max-width: 820px; }

/* Two-column body: content column (notices + events, then the feed below) and
   a polls rail. Source order is main, aside, feed — so when the grid collapses
   on a narrow screen, polls sit between events and the feed instead of below
   it. On desktop, explicit rows keep the feed under the content while the rail
   spans alongside both. Each block's own top margin lines the columns up. */
.bv-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: var(--space-2xl);
    row-gap: 0;
    align-items: start;
}
.boardview--solo .bv-body { grid-template-columns: minmax(0, 1fr); }
.bv-main { grid-column: 1; grid-row: 1; min-width: 0; }
.bv-feed { grid-column: 1; grid-row: 2; min-width: 0; }
.bv-aside { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }

.boardview .bv-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--clr-accent);
    margin-bottom: var(--space-sm);
}
.boardview .bv-subhead {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--clr-ink-muted);
    margin: var(--space-lg) 0 var(--space-sm);
}
.boardview .bv-muted { color: var(--clr-ink-muted); font-size: 0.9375rem; }
.boardview .bv-dot { color: var(--clr-cream-darker); }

/* --- Masthead ------------------------------------------------------------- */
.bv-masthead { padding-top: var(--space-sm); }
.bv-masthead__id {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.bv-masthead__icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}
.bv-masthead__icon--mono {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-accent-light);
    color: var(--clr-accent);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
}
.bv-masthead__heading { min-width: 0; }
.bv-masthead__title {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.05;
}
.bv-masthead__desc {
    color: var(--clr-ink-soft);
    margin-top: var(--space-xs);
    max-width: 60ch;
}
.bv-masthead__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--clr-cream-darker);
}
.bv-masthead__spacer { flex: 1 1 auto; }
.bv-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--clr-ink-muted);
}
.bv-action {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--clr-ink-soft);
    background: none;
    border: 0;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.bv-action:hover { color: var(--clr-ink); background: var(--clr-cream-dark); }
.bv-action--danger { color: var(--clr-ink-muted); }
.bv-action--danger:hover { color: var(--clr-error); background: var(--clr-error-bg); }
.bv-masthead__bar .inline-form { display: inline; }

/* --- Pinned admin notice (restyle of .admin-message under board view) ----- */
.boardview .admin-messages { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.boardview .admin-message {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    padding: var(--space-md) var(--space-lg);
    background: var(--clr-accent-light);
    border: 0;
    border-left: 3px solid var(--clr-accent);
    border-radius: 0 10px 10px 0;
}
.boardview .admin-message-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--clr-accent);
    color: var(--clr-cream);
    font-family: var(--font-display);
    font-weight: 700;
}
.boardview .admin-message-icon:empty { display: none; }
.boardview .admin-message-content h4 { font-size: 1rem; margin-bottom: 0.1rem; }
.boardview .admin-message-content p { color: var(--clr-ink-soft); font-size: 0.9375rem; margin: 0; }

/* --- Notices (pinned posts, top of the main column) ----------------------- */
.bv-notice-list { display: flex; flex-direction: column; gap: var(--space-md); }
.bv-notice {
    display: block;
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-left: 3px solid var(--clr-accent);
    border-radius: 0 12px 12px 0;
    padding: var(--space-md) var(--space-lg);
    text-decoration: none;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.bv-notice:hover { box-shadow: var(--shadow-md); border-color: var(--clr-accent); border-left-color: var(--clr-accent); }
.bv-notice__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-accent);
    margin-bottom: var(--space-xs);
}
.bv-notice__title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--clr-ink);
}
.bv-notice:hover .bv-notice__title { color: var(--clr-accent); }
.bv-notice__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: var(--space-xs);
    color: var(--clr-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.bv-notice__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--clr-ink-muted);
}
.bv-notice__by { font-weight: 500; color: var(--clr-ink-soft); }

/* --- Section scaffolding -------------------------------------------------- */
.bv-section,
.boardview .polls-section,
.boardview .posts-section { margin-top: var(--space-2xl); }
.bv-section__head,
.boardview .polls-header,
.boardview .posts-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.bv-h2,
.boardview .polls-header h2,
.boardview .posts-header h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.boardview .bv-section__action,
.boardview .polls-header .btn,
.boardview .posts-header .btn {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--clr-ink-muted);
    background: none;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.boardview .bv-section__action:hover,
.boardview .polls-header .btn:hover,
.boardview .posts-header .btn:hover {
    color: var(--clr-accent);
    border-color: var(--clr-accent);
}

.boardview .bv-empty {
    padding: var(--space-lg);
    text-align: center;
    color: var(--clr-ink-muted);
    background: var(--clr-cream-dark);
    border: 1px dashed var(--clr-cream-darker);
    border-radius: 10px;
}
.boardview .bv-empty h3 { font-size: 1.05rem; margin-bottom: var(--space-xs); }
.boardview .bv-empty p { font-size: 0.9375rem; }

/* --- "Next up" hero (thesis + date-leaf signature) ------------------------ */
.bv-hero {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 14px;
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
}
.bv-leaf {
    width: 74px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--clr-cream-darker);
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.bv-leaf__m {
    display: block;
    background: var(--clr-accent);
    color: var(--clr-cream);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0;
}
.bv-leaf__d {
    display: block;
    background: white;
    color: var(--clr-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
    padding: 0.25rem 0 0.1rem;
}
.bv-leaf__dow {
    display: block;
    background: white;
    color: var(--clr-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: 0.4rem;
}
.bv-hero__body { flex: 1; min-width: 0; }
.bv-hero__title { font-size: 1.5rem; font-weight: 600; margin-bottom: var(--space-sm); }
.bv-hero__title a { color: var(--clr-ink); text-decoration: none; }
.bv-hero__title a:hover { color: var(--clr-accent); }
.bv-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem var(--space-md);
    color: var(--clr-ink-soft);
    font-size: 0.9375rem;
    margin-bottom: var(--space-md);
}
.bv-fact { display: inline-flex; align-items: center; gap: 0.4rem; }
.bv-fact time { color: inherit; }
.bv-fact__dash { color: var(--clr-ink-muted); }
.bv-icon { width: 15px; height: 15px; color: var(--clr-ink-muted); flex-shrink: 0; }

.bv-rsvp { display: flex; flex-direction: column; gap: var(--space-sm); }
.bv-rsvp__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.bv-rsvp__label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-ink-muted);
}
.bv-rsvp__btn {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    border: 1.5px solid var(--clr-cream-darker);
    background: white;
    color: var(--clr-ink-soft);
    transition: all var(--transition-fast);
}
.bv-rsvp__btn:hover { border-color: var(--clr-ink); color: var(--clr-ink); }
.bv-rsvp__btn--go.bv-on { background: var(--clr-success); border-color: var(--clr-success); color: white; }
.bv-rsvp__btn--maybe.bv-on { background: var(--clr-ink); border-color: var(--clr-ink); color: var(--clr-cream); }
.bv-rsvp__btn--no.bv-on { background: var(--clr-ink-muted); border-color: var(--clr-ink-muted); color: var(--clr-cream); }
.bv-rsvp__counts { font-family: var(--font-mono); font-size: 0.75rem; color: var(--clr-ink-muted); }
.bv-rsvp__form.htmx-request { opacity: 0.55; pointer-events: none; }

/* --- "Also coming up" / past rows (distinct from posts) ------------------- */
.bv-rows { display: flex; flex-direction: column; gap: var(--space-sm); }
.bv-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: 10px;
    border: 1px solid var(--clr-cream-darker);
    background: white;
    text-decoration: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.bv-row:hover { border-color: var(--clr-accent); box-shadow: var(--shadow-sm); }
.bv-row--past { opacity: 0.7; }
.bv-chip {
    flex-shrink: 0;
    width: 52px;
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--clr-cream-darker);
}
.bv-chip__m {
    display: block;
    background: var(--clr-cream-dark);
    color: var(--clr-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.15rem 0;
}
.bv-chip__d {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--clr-ink);
    padding: 0.05rem 0 0.2rem;
}
.bv-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bv-row__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--clr-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bv-row__time { font-size: 0.875rem; color: var(--clr-ink-muted); }
.bv-row__rsvp {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--clr-ink-muted);
    white-space: nowrap;
}

.bv-past { margin-top: var(--space-md); }
.bv-past summary {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-ink-muted);
    cursor: pointer;
    padding: var(--space-xs) 0;
}
.bv-past summary:hover { color: var(--clr-ink); }
.bv-past .bv-rows { margin-top: var(--space-sm); }

/* --- Poll "ballot" (inset, result bars are the hook) ---------------------- */
.boardview .poll-list { display: flex; flex-direction: column; gap: var(--space-md); }
.boardview .poll-card {
    background: var(--clr-cream-dark);
    border: 1px solid var(--clr-cream-darker);
    border-radius: 14px;
    padding: var(--space-lg) var(--space-xl);
    box-shadow: none;
}
.boardview .poll-card:hover { transform: none; box-shadow: none; }
.boardview .poll-card-header { margin-bottom: var(--space-md); }
.boardview .poll-card-question { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--space-xs); }
.boardview .poll-card-question a { color: var(--clr-ink); text-decoration: none; }
.boardview .poll-card-question a:hover { color: var(--clr-accent); }
.boardview .poll-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--clr-ink-muted);
}
.boardview .poll-card-meta span::before { content: none; }
.boardview .poll-results { display: flex; flex-direction: column; gap: var(--space-sm); }
.boardview .poll-result-option {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--clr-cream);
    border: 1px solid var(--clr-cream-darker);
}
.boardview .poll-result-bar {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    background: var(--clr-accent-light);
    opacity: 0.6;
}
.boardview .poll-result-selected .poll-result-bar { background: var(--clr-accent); opacity: 0.28; }
.boardview .poll-result-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0.55rem 0.85rem;
    font-size: 0.9375rem;
}
.boardview .poll-result-selected .poll-option-text { font-weight: 600; }
.boardview .poll-option-text { color: var(--clr-ink); }
.boardview .poll-option-count { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--clr-ink-muted); }
.boardview .poll-vote-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.boardview .poll-options { display: flex; flex-direction: column; gap: var(--space-xs); }
.boardview .poll-option-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.6rem 0.85rem;
    background: var(--clr-cream);
    border: 1px solid var(--clr-cream-darker);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.boardview .poll-option-label:hover { border-color: var(--clr-accent); }
.boardview .poll-submit-btn { align-self: flex-start; margin-top: var(--space-xs); }
.boardview .poll-change-vote {
    display: inline-block;
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    font-weight: 600;
}
.boardview .poll-ended-badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-ink-muted);
}

/* --- Polls in the side rail: tighter than a full-width section ------------ */
.boardview .bv-aside .polls-header { margin-bottom: var(--space-md); padding-bottom: 0; border-bottom: 0; }
.boardview .bv-aside .polls-header h2 { font-size: 1.15rem; }
.boardview .bv-aside .poll-card { padding: var(--space-md) var(--space-lg); }
.boardview .bv-aside .poll-card-question { font-size: 1.05rem; }
.boardview .bv-aside .poll-list { gap: var(--space-md); }

/* --- Posts (editorial feed) ----------------------------------------------- */
.boardview .post-filters {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.boardview .post-filters .filter-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.boardview .post-filters label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-ink-muted);
}
.boardview .post-filters select {
    font-family: inherit;
    font-size: 0.875rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 6px;
    background: white;
    min-width: 160px;
}
.boardview .post-filters.htmx-request::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    border: 2px solid var(--clr-cream-darker);
    border-top-color: var(--clr-accent);
    border-radius: 50%;
    animation: bv-spin 0.7s linear infinite;
}

.boardview .post-list { display: flex; flex-direction: column; gap: var(--space-md); }
.boardview .post-card {
    position: relative;
    background: white;
    border: 1px solid var(--clr-cream-darker);
    border-radius: 10px;
    padding: var(--space-lg) var(--space-xl);
    box-shadow: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.boardview .post-card:hover { border-color: var(--clr-accent); box-shadow: var(--shadow-md); transform: none; }
.boardview .post-card-pinned { border-left: 3px solid var(--clr-accent); }
.boardview .post-pin-badge {
    position: static;
    display: inline-block;
    margin-bottom: var(--space-sm);
    padding: 0;
    background: none;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-accent);
}
.boardview .post-card-title { font-size: 1.3rem; font-weight: 600; margin-bottom: var(--space-sm); }
.boardview .post-card-title a { color: var(--clr-ink); text-decoration: none; }
.boardview .post-card-title a:hover { color: var(--clr-accent); }
.boardview .post-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    font-size: 0.8125rem;
    color: var(--clr-ink-muted);
    margin-bottom: var(--space-sm);
}
.boardview .post-card-meta span::before { content: none; }
.boardview .post-card-meta .post-author { font-weight: 600; color: var(--clr-ink-soft); }
.boardview .post-card-excerpt { color: var(--clr-ink-soft); font-size: 0.9375rem; line-height: 1.55; }
.boardview .reaction-pills { margin-top: var(--space-md); }

.boardview .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--clr-cream-darker);
}
.boardview .pagination-info { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--clr-ink-muted); }
.boardview .pagination a.htmx-request { opacity: 0.55; }

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

/* --- Responsive ----------------------------------------------------------- */
/* Below 900px the rail can't hold a usable width, so the body collapses to one
   column. Resetting the rows lets the blocks flow in source order — notices,
   events, polls, then the feed — so polls land under events, not at the foot. */
@media (max-width: 900px) {
    .bv-body,
    .boardview--solo .bv-body { grid-template-columns: minmax(0, 1fr); }
    .bv-main,
    .bv-feed,
    .bv-aside {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 768px) {
    .bv-hero { gap: var(--space-md); padding: var(--space-md); }
    .bv-leaf { width: 58px; }
    .bv-leaf__d { font-size: 1.6rem; }
    .bv-hero__title { font-size: 1.25rem; }
    .boardview .post-filters { flex-direction: column; }
    .boardview .post-filters select { width: 100%; }
    .boardview .post-card,
    .boardview .poll-card { padding: var(--space-lg); }
}