/* ==========================================================================
   Byværkstederne Design System: "Industrial Brutalism Refined"
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
    /* Primary: Green Community / Garden */
    --primary: #13483b;
    --primary-container: #2e6052;
    --on-primary: #ffffff;
    --on-primary-container: #a4d8c6;
    --primary-fixed: #b9eedb;
    --primary-fixed-dim: #9dd1bf;

    /* Secondary: Makerspace / Industrial Blue */
    --secondary: #325f9b;
    --secondary-container: #93bdff;
    --on-secondary: #ffffff;
    --on-secondary-container: #194b86;
    --secondary-fixed: #d5e3ff;

    /* Tertiary: Creative Fitness / Terracotta */
    --tertiary: #712800;
    --tertiary-container: #943b0c;
    --on-tertiary: #ffffff;
    --on-tertiary-container: #ffbea3;
    --tertiary-fixed: #ffdbcd;
    --tertiary-fixed-dim: #ffb597;

    /* Surfaces */
    --background: #f9f9f9;
    --surface: #f9f9f9;
    --surface-dim: #dadada;
    --surface-bright: #f9f9f9;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f4f3f3;
    --surface-container: #eeeeee;
    --surface-container-high: #e8e8e8;
    --surface-container-highest: #e2e2e2;
    --surface-variant: #e2e2e2;

    /* On-surface */
    --on-background: #1a1c1c;
    --on-surface: #1a1c1c;
    --on-surface-variant: #42474a;

    /* Outline */
    --outline: #73787b;
    --outline-variant: #c2c7ca;

    /* Error */
    --error: #ba1a1a;

    /* Inverse */
    --inverse-surface: #2f3131;
    --inverse-on-surface: #f1f1f1;

    /* Kulturhus (neutral dark) */
    --kulturhus: #c2410c;

    /* Typography */
    --font-headline: 'Space Grotesk', sans-serif;
    --font-body: 'Work Sans', sans-serif;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Max widths */
    --container: 80rem;
    --container-sm: 42rem;
    --container-md: 64rem;

    /* Event-card design tokens (v2 handoff) — the visible workshop-accent
       left border and the title's tightened letter-spacing. */
    --border-thick: 4px;
    --tracking-tight: -0.02em;
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }

body, .bv-body {
    font-family: var(--font-body);
    color: var(--on-background);
    background: var(--background);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection { background: var(--primary-fixed); color: var(--on-surface); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Blueprint grid background */
.blueprint-grid {
    background-image:
        linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    background-color: #f0f4ff;
}

/* ---------- Typography ---------- */
.bv-display {
    font-family: var(--font-headline);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.95;
    font-size: clamp(2rem, 7vw, 5rem);
}

.bv-headline {
    font-family: var(--font-headline);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-size: clamp(1.5rem, 5vw, 3rem);
}

.bv-title {
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
}

.bv-label {
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
}

.bv-body-lg { font-size: 1.125rem; color: var(--on-surface-variant); line-height: 1.7; }

/* ---------- Layout ---------- */
.bv-main { padding-top: 5rem; min-height: 100vh; }

.bv-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-8);
}

.bv-section { padding: var(--space-10) 0; }
.bv-section--sm { padding: var(--space-6) 0; }
.bv-section--centered { text-align: center; }

.bv-grid { display: grid; gap: var(--space-8); }
.bv-grid--2 { grid-template-columns: repeat(2, 1fr); }
.bv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bv-grid--4 { grid-template-columns: repeat(4, 1fr); }
.bv-grid--12 { grid-template-columns: repeat(12, 1fr); }

/* ---------- Navigation ---------- */
.bv-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    background: rgba(244, 243, 243, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.2s;
}

.bv-nav__logo a {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    color: var(--on-surface);
}

.bv-nav__links { display: none; gap: var(--space-8); align-items: center; }
.bv-nav__links .bv-btn { margin-left: var(--space-4); }

.bv-nav__link {
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    color: var(--on-surface-variant);
    transition: color 0.2s;
    padding-bottom: 0.25rem;
}
.bv-nav__link:hover { color: var(--on-surface); }
.bv-nav__link.is-active {
    color: var(--primary);
    border-bottom: 4px solid var(--primary);
}

.bv-nav__actions { display: none; }
.bv-nav__hamburger {
    background: none;
    border: none;
    color: var(--on-surface);
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
}

/* Mobile menu */
.bv-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: none;
    padding: 6rem var(--space-8) var(--space-10);
    /* When the menu is taller than the screen (logged-in members get the extra
       account entries, and short phones have little height), the overflowing
       items were clipped with no way to reach them. Let the menu scroll. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.menu-open .bv-mobile-menu { display: block; }
.menu-open .bv-nav { z-index: 51; }

.bv-mobile-menu__nav { display: flex; flex-direction: column; gap: var(--space-4); }
.bv-mobile-menu__link {
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    padding: var(--space-2) 0;
}
.bv-mobile-menu__link--secondary { font-size: 1rem; color: var(--on-surface-variant); }
.bv-mobile-menu__divider { border: none; border-top: 2px solid var(--surface-container-high); margin: var(--space-2) 0; }
.bv-mobile-menu__cta { margin-top: var(--space-4); text-align: center; }

/* ---------- Buttons ---------- */
.bv-btn {
    display: inline-block;
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    border-radius: 0;
}
.bv-btn:active { transform: scale(0.97); }

.bv-btn--primary {
    background: var(--primary);
    color: var(--on-primary);
    padding: var(--space-4) var(--space-8);
}
.bv-btn--primary:hover { background: var(--primary-container); }

.bv-btn--secondary {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    padding: var(--space-4) var(--space-8);
}

.bv-btn--dark {
    background: var(--inverse-surface);
    color: var(--inverse-on-surface);
    padding: var(--space-4) var(--space-8);
}
.bv-btn--dark:hover { background: #3f4141; }

.bv-btn--outlined {
    background: transparent;
    color: var(--on-surface);
    border: 4px solid var(--on-surface);
    padding: calc(var(--space-4) - 4px) calc(var(--space-8) - 4px);
}
.bv-btn--outlined:hover { background: var(--on-surface); color: var(--surface); }

.bv-btn--sm { padding: var(--space-2) var(--space-6); font-size: 0.875rem; }
.bv-btn--lg { padding: var(--space-6) var(--space-10); font-size: 1.125rem; }
.bv-btn--full { width: 100%; }

.bv-btn--tertiary {
    background: var(--tertiary);
    color: var(--on-tertiary);
    padding: var(--space-4) var(--space-8);
}

/* ---------- Cards ---------- */
.bv-card {
    background: var(--surface-container-lowest);
    padding: var(--space-8);
    transition: background 0.2s;
}
.bv-card--elevated { background: var(--surface-container-low); }
.bv-card--container { background: var(--surface-container); }
.bv-card--dark { background: var(--inverse-surface); color: var(--inverse-on-surface); }

.bv-card--accent-primary { border-left: 8px solid var(--primary); }
.bv-card--accent-secondary { border-left: 8px solid var(--secondary); }
.bv-card--accent-tertiary { border-left: 8px solid var(--tertiary); }
.bv-card--accent-top-secondary { border-top: 8px solid var(--secondary-container); }

/* ---------- Badges / Tags ---------- */
.bv-badge {
    display: inline-block;
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
}
.bv-badge--primary { background: var(--primary); color: var(--on-primary); }
.bv-badge--secondary { background: var(--secondary); color: var(--on-secondary); }
.bv-badge--tertiary { background: var(--tertiary); color: var(--on-tertiary); }
.bv-badge--kulturhus { background: var(--kulturhus); color: #fff; }
.bv-badge--error { background: var(--error); color: #fff; }
.bv-badge--outline { background: transparent; border: 2px solid currentColor; }

/* ---------- Progress Bar ---------- */
.bv-progress { background: var(--surface-container-highest); height: 1rem; position: relative; overflow: hidden; }
.bv-progress__fill { height: 100%; transition: width 0.6s ease; }
.bv-progress__fill--primary { background: var(--primary); }
.bv-progress__fill--secondary { background: var(--secondary); }
.bv-progress__fill--tertiary { background: var(--tertiary); }

/* ---------- Forms ---------- */
.bv-input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-variant);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    outline: none;
    transition: border-color 0.2s;
}
.bv-input:focus { border-bottom-color: var(--primary); }
.bv-input::placeholder { color: var(--outline); }

.bv-textarea { resize: vertical; min-height: 6rem; }

.bv-checkbox {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--primary);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    flex-shrink: 0;
}
.bv-checkbox:checked { background: var(--primary); }
.bv-checkbox--secondary { border-color: var(--secondary); }
.bv-checkbox--secondary:checked { background: var(--secondary); }
.bv-checkbox--tertiary { border-color: var(--tertiary); }
.bv-checkbox--tertiary:checked { background: var(--tertiary); }

.bv-form-label {
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    color: var(--on-surface-variant);
}

/* ---------- Checkbox option (workshop selector) ---------- */
.bv-check-option {
    display: flex;
    align-items: center;
    padding: var(--space-4);
    background: var(--surface-container-lowest);
    cursor: pointer;
    transition: background 0.2s;
    gap: var(--space-4);
}
.bv-check-option:hover { background: var(--surface-container-low); }
.bv-check-option--primary { border-left: 4px solid var(--primary); }
.bv-check-option--secondary { border-left: 4px solid var(--secondary); }
.bv-check-option--tertiary { border-left: 4px solid var(--tertiary); }

.bv-check-option__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* ---------- Hero Components ---------- */
.bv-hero {
    position: relative;
    width: 100%;
    min-height: 70vh;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.bv-hero--full { min-height: 870px; }
.bv-hero--short { min-height: auto; padding: var(--space-16) 0; }

.bv-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.4;
}

.bv-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--background) 0%, rgba(249,249,249,0.4) 50%, transparent 100%);
}

.bv-hero__content {
    position: relative;
    z-index: 10;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-8);
    width: 100%;
}

.bv-hero__title {
    font-family: var(--font-headline);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.95;
    font-size: clamp(2.5rem, 8vw, 7rem);
    max-width: 56rem;
}

.bv-hero__title--accent { color: var(--primary); }

.bv-hero__subtitle {
    font-size: 1.25rem;
    color: var(--on-surface-variant);
    max-width: 42rem;
    margin-top: var(--space-8);
    line-height: 1.7;
}

.bv-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* Hero split (text left, image right) */
.bv-hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 70vh;
}
.bv-hero-split__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
}
.bv-hero-split__image {
    position: relative;
    overflow: hidden;
}
.bv-hero-split__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.5;
}

/* Text-only hero */
.bv-hero-text { padding: var(--space-12) 0 var(--space-6); }

/* ---------- Section split (sidebar + main) ---------- */
/* Generic two-column section layout: fixed-third sidebar + fluid main.
   Used by the home event-highlight section (sidebar = heading + featured
   event card, main = todo list). Card-agnostic by design — the event-card
   markup inside comes from partials/event_card.html.twig. Stacks to a
   single column at <= 1023px (see the Responsive section). */
.bv-section-split { display: flex; gap: var(--space-16); align-items: flex-start; }
.bv-section-split__sidebar { width: 33.333%; flex-shrink: 0; }
.bv-section-split__main { flex: 1; }

/* Todo list */
.bv-todo-item {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--surface-container-low);
}
.bv-todo-item--primary { border-left: 20px solid var(--primary); }
.bv-todo-item--secondary { border-left: 20px solid var(--secondary); }
.bv-todo-item--tertiary { border-left: 20px solid var(--tertiary); }
.bv-todo-item--neutral { border-left: 20px solid var(--outline-variant); }
.bv-todo-item--kulturhus { border-left: 20px solid var(--kulturhus); }

/* ---------- To-Do Overlay ---------- */
.bv-todo-trigger { transition: transform 0.25s, box-shadow 0.25s; }
.bv-todo-trigger:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.06); }

.bv-todo-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(26, 28, 28, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.bv-todo-overlay.is-open { opacity: 1; visibility: visible; }

.bv-todo-overlay__panel {
    width: 90vw;
    max-width: 56rem;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 8px solid var(--secondary-container);
    transform: translateY(2rem);
    transition: transform 0.3s;
}
.bv-todo-overlay.is-open .bv-todo-overlay__panel { transform: translateY(0); }

.bv-todo-overlay__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-8) var(--space-10);
    border-bottom: 1px solid var(--surface-container-high);
    flex-shrink: 0;
}

.bv-todo-overlay__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--on-surface-variant);
    padding: var(--space-2);
    transition: color 0.15s;
}
.bv-todo-overlay__close:hover { color: var(--on-surface); }
.bv-todo-overlay__close .material-symbols-outlined { font-size: 1.75rem; }

.bv-todo-overlay__body {
    overflow-y: auto;
    padding: var(--space-8) var(--space-10) var(--space-12);
    flex: 1;
}

.bv-todo-overlay__group { margin-bottom: var(--space-10); }
.bv-todo-overlay__group:last-child { margin-bottom: 0; }

.bv-todo-overlay__group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    margin-bottom: var(--space-4);
    background: var(--surface-container);
}
.bv-todo-overlay__group-header--primary { border-left: 20px solid var(--primary); }
.bv-todo-overlay__group-header--secondary { border-left: 20px solid var(--secondary); }
.bv-todo-overlay__group-header--tertiary { border-left: 20px solid var(--tertiary); }
.bv-todo-overlay__group-header--kulturhus { border-left: 20px solid var(--kulturhus); }
.bv-todo-overlay__group-header--neutral { border-left: 20px solid var(--outline-variant); }

/* ---------- Login Overlay ---------- */
/* ---------- Registration Form (Grav form override) ---------- */
.bv-register-card .form-wrapper { max-width: 100%; }
.bv-register-card .form-field { margin-bottom: var(--space-6); }
.bv-register-card label {
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    color: var(--primary);
    display: block;
    margin-bottom: var(--space-2);
}
.bv-register-card input[type="text"],
.bv-register-card input[type="email"],
.bv-register-card input[type="password"] {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: var(--space-4);
    background: var(--surface-container-low);
    border: none;
    border-bottom: 2px solid var(--outline-variant);
    border-radius: 0;
    outline: none;
    transition: border-color 0.2s;
}
.bv-register-card input:focus { border-bottom-color: var(--primary); }
.bv-register-card .form-input-wrapper { margin: 0; }
.bv-register-card .buttons { margin-top: var(--space-8); }
.bv-register-card button[type="submit"],
.bv-register-card .form-submit input[type="submit"] {
    width: 100%;
    background: var(--primary);
    color: var(--on-primary);
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-6) var(--space-8);
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    border-radius: 0;
    transition: background 0.15s;
}
.bv-register-card button[type="submit"]:hover,
.bv-register-card .form-submit input[type="submit"]:hover { background: var(--primary-container); }
.bv-register-card .form-data .sublabel,
.bv-register-card .form-data .form-help {
    font-size: 0.75rem;
    color: var(--outline);
    margin-top: var(--space-1);
    font-style: italic;
}
/* Help text shown below label */
.bv-register-card .bv-help-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.75rem;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    color: var(--outline);
    margin-top: 0.125rem;
    margin-bottom: 0.5rem;
}
/* Register's forms-plugin messages share the .bv-message identity (centred,
   elevated, same success/error colours) so account creation matches the other
   auth surfaces (auth-surface UI/UX spec: one feedback component). */
.bv-register-card .form-messages { margin-bottom: var(--space-6); }
.bv-register-card .form-messages .alert {
    padding: var(--space-4) var(--space-5);
    font-weight: 600;
    text-align: center;
    border-left: 6px solid currentColor;
    box-shadow: 0 0.5rem 1.25rem rgba(26, 28, 28, 0.18);
}
.bv-register-card .form-messages .alert-success {
    background: #d8f3dc;
    color: #1b4332;
}
.bv-register-card .form-messages .alert-error,
.bv-register-card .form-messages .alert-danger {
    background: #ffdad6;
    color: #93000a;
}
.bv-register-card .has-error input {
    border-bottom-color: var(--error) !important;
}
.bv-register-card .has-error .help-block {
    color: var(--error);
    font-size: 0.75rem;
    margin-top: var(--space-1);
    font-weight: 600;
}

/* ---------- Login Overlay ---------- */
.bv-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(26, 28, 28, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.bv-login-overlay.is-open { opacity: 1; visibility: visible; }

.bv-login-overlay__panel,
.bv-auth-card {
    width: 90vw;
    max-width: 64rem;
    max-height: 90vh;
    display: flex;
    background: var(--surface-container-lowest);
    position: relative;
    transform: translateY(2rem);
    transition: transform 0.3s;
    overflow: hidden;
}
.bv-login-overlay.is-open .bv-login-overlay__panel { transform: translateY(0); }

.bv-login-overlay__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 10;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--on-surface-variant);
    padding: var(--space-2);
    transition: color 0.15s;
}
.bv-login-overlay__close:hover { color: var(--on-surface); }
.bv-login-overlay__close .material-symbols-outlined { font-size: 1.75rem; }

.bv-login-overlay__image,
.bv-auth-card__image {
    width: 50%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.bv-login-overlay__image img,
.bv-auth-card__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keep the brand-green art in colour — the old grayscale+0.4 filter was
       for the previous hotlinked PHOTO and turns login-panel.svg murky gray.
       A slight darken preserves white-text legibility over the panel. */
    filter: brightness(0.92);
}
.bv-login-overlay__image-content,
.bv-auth-card__image-content {
    position: relative;
    z-index: 1;
    padding: var(--space-12);
}

/* Same column-fit fix as .bv-auth-card__header .bv-display: the global
   .bv-display (clamp …, 5rem) overflows the overlay's form column on the long
   single word "Medlemslogin", forcing a horizontal slider. */
.bv-login-overlay__form .bv-display {
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    overflow-wrap: break-word;
    word-break: break-word;
}
.bv-login-overlay__form,
.bv-auth-card__body {
    width: 50%;
    padding: var(--space-12);
    display: flex;
    flex-direction: column;
    /* safe center: vertically centre when the form fits, but fall back to
       start (scrollable from the top) when it's taller than the panel — the
       registration form is tall, the login form is short. */
    justify-content: safe center;
    overflow-y: auto;
}

/* ---------- Auth surfaces (standalone routes) ---------- */
/* The PRIMARY auth UX is the modals (login / forgot / register overlays) that
   open over the current page — see partials/*_overlay.html.twig. These rules
   are only for DIRECT access to the routes (/login, /opret-medlemskab,
   /forgot_password, /reset_password) and the email reset link: a plain card
   centred within the normal site shell (header + footer), NOT a dimmed
   full-screen overlay (which, on a standalone route, would dim an empty page).
   The card reuses the login-overlay panel/image/form styling (merged above). */
.bv-auth-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-4);
    background: var(--surface-container);
}
/* Cancel the modal slide-in transform, and let the in-flow page card grow with
   the form (the page scrolls) instead of capping at 90vh with internal scroll
   the way the modal does. */
.bv-auth-card {
    transform: none;
    transition: none;
}
.bv-auth-page .bv-auth-card { max-height: none; }
.bv-auth-page .bv-auth-card__body { overflow-y: visible; }
/* Close affordance (back to the site), mirroring .bv-login-overlay__close. */
.bv-auth-card__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 2;
    color: var(--on-surface-variant);
    line-height: 1;
    transition: color 0.15s;
}
.bv-auth-card__close:hover { color: var(--on-surface); }
.bv-auth-card__close .material-symbols-outlined { font-size: 1.75rem; }
.bv-auth-card__image-title { color: #fff; margin-top: var(--space-4); }
/* Form-side header — mirrors the overlay's inline green heading + accent rule. */
.bv-auth-card__header { margin-bottom: var(--space-8); }
.bv-auth-card__header .bv-display {
    color: var(--primary);
    /* Scale the global .bv-display (clamp …, 5rem) to the column so a long
       single word ("Medlemslogin") doesn't force a horizontal slider. */
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    overflow-wrap: break-word;
    word-break: break-word;
}
.bv-auth-card__rule {
    width: 6rem;
    height: 0.375rem;
    background: var(--tertiary);
    margin: var(--space-2) 0 var(--space-6);
}
/* The register form keeps its field styling but drops its own card chrome
   inside the auth card (no panel-in-panel). */
.bv-auth-card .bv-register-card {
    background: none;
    border: none;
    padding: 0;
}
/* Collapse to one column on narrow viewports; hide the brand image. */
@media (max-width: 48rem) {
    .bv-auth-card { flex-direction: column; }
    .bv-auth-card__image { display: none; }
    .bv-auth-card__body { width: 100%; padding: var(--space-8); }
}

/* Stock login-plugin form (#grav-login: forgot + reset) — bring the
   plugin-rendered email/password fields and the submit button onto the design
   system WITHOUT editing the plugin's field markup (spec: target #grav-login
   via CSS). Field sizing mirrors .bv-input. */
#grav-login form { display: flex; flex-direction: column; gap: var(--space-6); }
#grav-login input[type="email"],
#grav-login input[type="password"],
#grav-login input[type="text"] {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-variant);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    outline: none;
    color: var(--on-surface);
    transition: border-color 0.2s;
}
#grav-login input:focus { border-bottom-color: var(--primary); }
#grav-login label {
    font-family: var(--font-headline);
    font-weight: 600;
    color: var(--outline);
    display: block;
    margin-bottom: var(--space-2);
}
#grav-login .form-actions { margin-top: var(--space-2); }

/* ---------- Shared form-feedback component ---------- */
/* One identity for every auth flash. Variants are mapped from Grav's message
   scopes in partials/messages.html.twig (info/success -> success, error ->
   error, warning -> warning). Centred + elevated so it reads as floating over
   the form. */
.bv-messages { max-width: 48rem; margin: 0 auto var(--space-6); padding: 0 var(--space-4); }
.bv-auth-card .bv-messages { max-width: none; margin: 0 0 var(--space-6); padding: 0; }
.bv-message {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
    font-weight: 600;
    text-align: center;
    border-left: 6px solid currentColor;
    box-shadow: 0 0.5rem 1.25rem rgba(26, 28, 28, 0.18);
}
.bv-message:last-child { margin-bottom: 0; }
.bv-message--success { background: #d8f3dc; color: #1b4332; }
.bv-message--error   { background: #ffdad6; color: #93000a; }
.bv-message--warning { background: #fff3cd; color: #664d03; }

/* Nav user display */
.bv-nav__user {
    font-family: var(--font-headline);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ---------- Workgroup Cards ---------- */
.bv-workgroups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
/* Per-section override for grids with fewer than 4 cards (e.g. the Krea
   Café ateliers, which has 3) so each card is wider and long titles like
   "Smykkeværkstedet" fit on one line. Only desktop is overridden here;
   the ≤1023px (2-up) and ≤767px (1-up) base rules below are later in
   source with equal specificity, so they still win on tablet/mobile. */
.bv-workgroups--cols-3 { grid-template-columns: repeat(3, 1fr); }

.bv-workgroup-card {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-8);
}
.bv-workgroup-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    opacity: 0.5;
    filter: grayscale(1);
    transition: transform 0.7s;
}
/* On the dark card variant (--kulturhus, #27272a), multiply blending
   crushes the image to near-black because the background is already
   so dark — the fade-in becomes invisible. Switch to screen blending
   (the additive inverse of multiply) so the image lightens the dark
   background instead, matching how multiply tints the lighter cards. */
.bv-workgroup-card--dark .bv-workgroup-card__bg {
    mix-blend-mode: screen;
    opacity: 0.4;
}
.bv-workgroup-card:hover .bv-workgroup-card__bg { transform: scale(1.05); }

.bv-workgroup-card__content { position: relative; z-index: 1; }
.bv-workgroup-card__title {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 1.75rem;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: var(--space-2);
}

/* Smykkeværkstedet intro: an airy text column in the middle, flanked by
   a portrait photo in each side margin, with a wide photo beneath the
   text. Uses the full container width so the page's side space is filled
   and the prose gets room to breathe. Collapses to one column on tablet. */
.bv-prose-sides {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas:
        "left text  right"
        ".    wide  .";
    gap: var(--space-12);
    align-items: center;
}
.bv-prose-sides__text { grid-area: text; }
.bv-prose-sides__left  { grid-area: left; }
.bv-prose-sides__right { grid-area: right; }
.bv-prose-sides__wide  { grid-area: wide; margin-top: var(--space-10); }
.bv-prose-sides__left,
.bv-prose-sides__right {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}
.bv-prose-sides__wide {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 900px) {
    .bv-prose-sides {
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "wide"
            "left"
            "right";
        gap: var(--space-8);
    }
    .bv-prose-sides__left,
    .bv-prose-sides__right {
        max-width: 26rem;
        margin: 0 auto;
        aspect-ratio: auto;
    }
}

.bv-workgroup-card__desc {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: var(--space-6);
    opacity: 0;
    transition: opacity 0.3s;
}
.bv-workgroup-card:hover .bv-workgroup-card__desc { opacity: 1; }
.bv-workgroup-card__line { width: 3rem; height: 0.25rem; background: #fff; }

/* Centered card titles with hover reveal (opt-in via card_center: true) —
   used on the Krea Café "Vores atelierer" section. The title's TOP sits about
   a third down the card and the accent line sits directly beneath it;
   the description is collapsed to zero height so there is no gap. On hover
   the description expands (fades + grows), which pushes the line downward —
   the "line animates down, sub-paragraph appears" behaviour. The title stays
   anchored so it never jumps. Other sections keep the bottom-left default. */
.bv-workgroups--center .bv-workgroup-card__content {
    position: absolute;
    top: 33%;
    left: 0;
    right: 0;
    padding: 0 var(--space-4);
    text-align: center;
}
/* Slightly smaller title on the centered cards so long single-word names
   (EVENTVÆRKSTEDET, SMYKKEVÆRKSTEDET) fit the narrow 4-up / 3-up cards down
   to iPad widths without clipping. Home-page cards keep the 1.75rem size. */
.bv-workgroups--center .bv-workgroup-card__title {
    font-size: 1.5rem;
}
.bv-workgroups--center .bv-workgroup-card__line {
    margin-left: auto;
    margin-right: auto;
}
.bv-workgroups--center .bv-workgroup-card__desc {
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-bottom 0.4s ease;
}
.bv-workgroups--center .bv-workgroup-card:hover .bv-workgroup-card__desc {
    max-height: 12rem;
    margin-bottom: var(--space-6);
    opacity: 1;
}

.bv-workgroup-card--primary { background: var(--primary); }
.bv-workgroup-card--secondary { background: var(--secondary); }
.bv-workgroup-card--tertiary { background: var(--tertiary); }
.bv-workgroup-card--tertiary-alt { background: var(--tertiary-container); }
.bv-workgroup-card--dark { background: var(--kulturhus); }
.bv-workgroup-card--kulturhus { background: var(--kulturhus); }

/* ---------- Calendar ---------- */
/* Desktop: every filter on a single row. nowrap keeps them on one line;
   overflow-x:auto is a safety net so a narrow desktop scrolls the row instead
   of breaking the layout (wide screens fit with no scrollbar). Mobile stacks
   them one per line — see the max-width:767px override below. */
.bv-filters { display: flex; flex-wrap: nowrap; gap: var(--space-2); align-items: center; overflow-x: auto; }
/* Keep the label + each button at natural width so the row scrolls rather than
   squishing labels (e.g. "Makerspace & Reparation") when it is tight. */
.bv-filters > * { flex-shrink: 0; }
@media (max-width: 767px) {
    /* Mobile: every filter on its own line, with comfortable vertical spacing. */
    .bv-filters { flex-direction: column; align-items: flex-start; overflow-x: visible; gap: var(--space-3); }
}
.bv-filter-btn {
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--outline-variant);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}
.bv-filter-btn:hover { border-color: var(--on-surface); }
.bv-filter-btn.is-active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.bv-filter-btn--primary.is-active { background: var(--primary); border-color: var(--primary); }
.bv-filter-btn--secondary.is-active { background: var(--secondary); border-color: var(--secondary); }
.bv-filter-btn--tertiary.is-active { background: var(--tertiary); border-color: var(--tertiary); }
.bv-filter-btn--kulturhus.is-active { background: var(--kulturhus); border-color: var(--kulturhus); }
/* "Alle aktiviteter" is not a workshop — give it a neutral slate so it reads as
   distinct from Grønt BYværksted (which owns --primary/green). Must sit after
   the generic .bv-filter-btn.is-active rule to win the same-specificity fill. */
.bv-filter-btn--all.is-active { background: var(--on-surface-variant); border-color: var(--on-surface-variant); }

.bv-filter-dot {
    width: 0.5rem;
    height: 0.5rem;
    display: inline-block;
}
.bv-filter-dot--primary { background: var(--primary); }
.bv-filter-dot--secondary { background: var(--secondary); }
.bv-filter-dot--tertiary { background: var(--tertiary); }
.bv-filter-dot--kulturhus { background: var(--kulturhus); }
.bv-filter-dot--all { background: var(--on-surface-variant); }

/* "Mine aktiviteter" uses a star glyph rather than a workshop-colour dot — it
   is a personal filter, not a category. Sized to sit like the dots; inherits
   the button text colour (→ on-primary when the button is active). */
.bv-filter-btn__icon { font-size: 1.05rem; line-height: 1; }

/* Event list — v2 handoff canonical layout. The <ul> wrapper is just a
   semantic container for the .bv-event-item entries; reset its default
   chrome (bullets, padding, margin) so the canonical card layout owns
   its own spacing. */
.bv-event-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Each entry is its own query container; the row (descendant) reacts.
   An element cannot react to its own container-type — putting it on
   .bv-event-row makes the container query inert (the v1 latent bug
   the v2 handoff fixes). */
.bv-event-item { container-type: inline-size; container-name: event-row; }
.bv-event-item + .bv-event-item { margin-top: var(--space-3); }

.bv-event-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-4);
    background: var(--surface-container-lowest);
    border-left: var(--border-thick) solid var(--bv-accent, var(--primary));
}
/* Legacy-DOM spacing — preserved so synthetic <div class="bv-event-row">
   rows injected by tests/mobile/event-row.js still get the inter-row
   gap when they sit as direct siblings outside a .bv-event-item wrapper. */
.bv-event-row + .bv-event-row { margin-top: var(--space-3); }

/* DATE */
.bv-event-row__date {
    flex-shrink: 0;
    min-width: 4rem;
    text-align: center;
    font-family: var(--font-headline);
    font-weight: 700;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bv-event-row__date-month { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--on-surface-variant); }
.bv-event-row__date-day { font-size: 1.5rem; }

/* Expand affordance — a large chevron pinned to the bottom of the date
   column (under the date, left side). Points down when collapsed, up when
   expanded (CSS rotation). Rendered (Twig) only for cards that carry rich
   details. The date column stretches to the card's height and CENTRES the
   month/day (justify-content), while the chevron is taken out of flow
   (absolute) and dropped to the column's bottom edge — so the date stays
   vertically centred exactly as on a detail-less card, and the card gains no
   empty space. */
.bv-event-row--expandable .bv-event-row__date { align-self: stretch; justify-content: center; position: relative; }
.bv-event-row__chevron {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 3.75rem;
    line-height: 0.6;
    color: var(--bv-accent);
    transition: transform 0.15s ease;
    pointer-events: none;
}
.bv-event-row.is-expanded .bv-event-row__chevron { transform: translateX(-50%) rotate(180deg); }

/* Attending highlight (event_rsvp): a confirmed Tilmeld participant sees the
   date block filled with a light tint of the event's workshop colour. The
   fill bleeds only vertically (into the card's top/bottom padding) so it spans
   the card height; the date's horizontal box is left untouched, keeping the
   month/day — and every downstream control — aligned across attending and
   non-attending cards alike. */
.bv-event-row--attending .bv-event-row__date {
    background: color-mix(in srgb, var(--bv-accent) 18%, white);
    align-self: stretch;
    justify-content: center;
    margin-block: calc(-1 * var(--space-6));
    padding-block: var(--space-6);
}
.bv-event-row--featured.bv-event-row--attending .bv-event-row__date {
    margin-block: calc(-1 * var(--space-8));
    padding-block: var(--space-8);
}
/* The attending state adds vertical padding to the date column, which would
   drop the absolutely-positioned chevron by that amount. Offset its bottom by
   the same padding so it stays put whether or not you've joined. */
.bv-event-row--attending .bv-event-row__chevron { bottom: var(--space-6); }
.bv-event-row--featured.bv-event-row--attending .bv-event-row__chevron { bottom: var(--space-8); }

/* BODY: badge + h3 + time + description */
.bv-event-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}
.bv-event-row__badge { margin-bottom: var(--space-1); }
.bv-event-row__title {
    margin: 0;
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
    font-size: 1.25rem;
    line-height: 1.15;
}
.bv-event-row__location,
.bv-event-row__organizer {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--on-surface-variant);
}
.bv-event-row__location .material-symbols-outlined,
.bv-event-row__organizer .material-symbols-outlined { font-size: 1rem; }
.bv-event-row__time {
    margin: 0;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.85rem;
}
.bv-event-row__desc {
    margin: 0;
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    text-wrap: pretty;
}

/* META: price over CTA over capacity (each independently optional) */
.bv-event-row__meta {
    flex-shrink: 0;
    min-width: 9rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    text-align: right;
}
.bv-event-row__price {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
}
.bv-event-row__capacity {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--on-surface-variant);
}
.bv-event-row__capacity .material-symbols-outlined { font-size: 1.1rem; }

/* Live RSVP (event_rsvp): the availability line replaces the static capacity
   readout, and a small inline note surfaces server errors (full/past/nonce)
   next to the signup button. */
.bv-event-row__availability {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
}
/* Uniform Deltag/Interesseret size. Width: floor every signup button to the
   wider 'Interesseret' label incl. its checkbox (measured ~185px) so 'Deltag'
   renders at the exact same size on every surface (the 141px measured for
   'Deltag' is padded up to the floor). Height: pin the small-button padding —
   the element+class selector outranks every single-class .bv-btn--<variant>
   rule regardless of source order, so a tertiary/kulturhus accent button is
   the same height as a primary/secondary one. */
button.bv-event-row__signup {
    min-width: 188px;
    padding: var(--space-2) var(--space-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
}
/* Checkbox before the label — empty until you have joined/marked, checked once
   you have (driven by .is-signed-up; JS just toggles that class). Rendered with
   the Material Symbols font on a ::before so the label itself stays a plain word
   ('Deltag' / 'Interesseret'). text-transform/letter-spacing are reset so the
   uppercase button styling doesn't break the icon ligature. */
.bv-event-row__signup::before {
    font-family: 'Material Symbols Outlined';
    content: 'check_box_outline_blank';
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    font-size: 1.35em;
    line-height: 1;
    flex: none;
}
.bv-event-row__signup.is-signed-up::before { content: 'check_box'; }
.bv-event-row__signup.is-signed-up { font-weight: 700; }
.bv-event-row__signup.is-busy { opacity: 0.6; pointer-events: none; }
/* A full (or past) event keeps the 'Deltag' label but is greyed + not clickable
   — the availability line carries the "Alle pladser er optaget" message. */
.bv-event-row__signup:disabled { opacity: 0.5; cursor: not-allowed; }
.bv-event-row__rsvp-note {
    display: block;
    font-size: 0.8rem;
    color: var(--error);
    margin-top: var(--space-1);
    max-width: 14rem;
}

/* Inline card expansion (event_rsvp §4): a click expands the card in place and
   the rich details unfold in a panel below it (accordion), pushing the other
   events down. No modal. The panel is a sibling of the card inside
   .bv-event-item and inherits --bv-accent from that wrapper. */
.bv-event-row--expandable { cursor: pointer; }
.bv-event-row--expandable:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.bv-event-details-panel {
    padding: var(--space-5) var(--space-6);
    border-left: var(--border-thick) solid var(--bv-accent, var(--primary));
    background: var(--surface-container-lowest);
    border-top: 1px solid var(--surface-container-high);
    /* Anything wider than the panel (a wide table) scrolls inside it rather
       than escaping the right edge. */
    overflow-x: auto;
}
.bv-event-details-panel[hidden] { display: none; }
.bv-event-details-panel > :first-child { margin-top: 0; }
.bv-event-details-panel > :last-child { margin-bottom: 0; }
.bv-event-details-panel img { max-width: 100%; height: auto; }
/* The panel body is DetailsSanitizer output — bare elements, no classes — so
   the global `* { margin: 0; padding: 0 }` reset must be undone here per
   element (same pattern as .bv-legal__content). Without the list padding the
   bullets hang outside the panel's left edge. */
.bv-event-details-panel h2,
.bv-event-details-panel h3,
.bv-event-details-panel h4 {
    font-family: var(--font-headline);
    margin: var(--space-4) 0 var(--space-2);
}
.bv-event-details-panel p,
.bv-event-details-panel ul,
.bv-event-details-panel ol,
.bv-event-details-panel blockquote,
.bv-event-details-panel table { margin: 0 0 var(--space-3); }
.bv-event-details-panel ul,
.bv-event-details-panel ol { padding-left: 1.5em; }
.bv-event-details-panel li { margin-bottom: var(--space-1); }
.bv-event-details-panel blockquote {
    border-left: 3px solid var(--outline-variant);
    padding-left: var(--space-3);
    color: var(--on-surface-variant);
}
.bv-event-details-panel th,
.bv-event-details-panel td {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--outline-variant);
    text-align: left;
}

/* Featured modifier — used by calendar_featured.html.twig and the
   primary featured card in event_highlight.html.twig in sprint 2.
   Desktop-only typography bump and tighter spacing; mobile inherits
   the stacked layout without modifier-specific overrides. */
.bv-event-row--featured { padding: var(--space-8) var(--space-6); }
.bv-event-row--featured .bv-event-row__date-day { font-size: 2rem; }
.bv-event-row--featured .bv-event-row__date-month { font-size: 0.875rem; }
.bv-event-row--featured .bv-event-row__title { font-size: 1.5rem; }

/* STACKED: when the ROW itself is < 540px — the container query fires
   on the .bv-event-item wrapper (container-name: event-row), so the
   row stacks as soon as ITS OWN width crosses the breakpoint, whether
   that happens because of a narrow viewport, a narrow sidebar, or a
   2-column tablet grid. */
@container event-row (max-width: 540px) {
    .bv-event-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .bv-event-row__date { flex-direction: row; align-items: baseline; gap: var(--space-2); min-width: auto; text-align: left; }
    .bv-event-row__date-day { order: -1; font-size: 1.25rem; }
    .bv-event-row__date-month { font-size: 0.8rem; }
    /* Horizontal date row: the chevron sits inline after the month (static,
       not the desktop absolute pin), the date content stays left-aligned, and
       the chevron scales back to fit the row. */
    /* Chevron: when the card stacks on mobile, drop the expand affordance to
       the bottom-centre of the CARD — horizontally centred, under the
       availability ("tilmeldte") line — instead of leaving it inline beside the
       date. It is positioned against the card (padding-bottom reserves the room)
       rather than the date column, so the date is no longer its positioning
       context here. The --expandable qualifier + later source order let this win
       over the desktop and attending chevron rules on mobile. */
    .bv-event-row--expandable { position: relative; padding-bottom: var(--space-12); }
    .bv-event-row--expandable .bv-event-row__date { justify-content: flex-start; position: static; }
    .bv-event-row--expandable .bv-event-row__chevron {
        position: absolute; left: 50%; bottom: var(--space-2); transform: translateX(-50%);
        font-size: 2rem; line-height: 1;
    }
    .bv-event-row--expandable.is-expanded .bv-event-row__chevron { transform: translateX(-50%) rotate(180deg); }
    /* Attending, stacked: keep the date left-aligned (not centred) and stop the
       date tint bleeding down into the workshop badge — restore air below it.
       The desktop full-height left-stripe design doesn't translate to the
       column layout, so neutralise the vertical bleed here. */
    .bv-event-row--attending .bv-event-row__date {
        justify-content: flex-start;
        margin-block: 0;
        padding-block: var(--space-3);
    }
    .bv-event-row__body,
    .bv-event-row__meta { width: 100%; }
    .bv-event-row__meta { align-items: flex-start; text-align: left; margin-top: var(--space-2); }
    .bv-event-row__meta .bv-btn { width: 100%; }
    /* Long Danish workshop titles (the "TEGN OG SNIT GUMMISTEMPEL" case
       from PR #35's screenshot 2) must break mid-token at narrow widths
       so they cannot push the body's bounding box past the row's right
       edge. Identical PR #35 fix, scoped to the container-query block
       where it is needed. */
    .bv-event-row__title { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
    .bv-event-row__desc { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
    .bv-event-row__body { padding-right: var(--space-2); }
}

/* ---------- Technique / Pitch Cards (atelier_techniques.html.twig) ----------
   The decorative numeral was previously inline-styled directly in the Twig
   template; promoted to a class so the mobile breakpoint can target it
   (screenshot 5: faded "5" overlapped "DU HAR SCENESKRÆK …" on a narrow
   column). The desktop visual intent — large faded outline numeral anchored
   top-right — is preserved unchanged here. */
.bv-technique-card__index {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    color: var(--on-surface-variant);
    opacity: 0.1;
    pointer-events: none;
}
.bv-technique-card__body { position: relative; z-index: 1; }

/* ---------- Team Cards ---------- */
.bv-team-card {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--surface-container-lowest);
    transition: background 0.2s;
}
.bv-team-card:hover { background: var(--surface-container); }

.bv-team-card__photo {
    width: 5rem;
    height: 5rem;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface-container-high);
}
.bv-team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.5s;
}
.bv-team-card:hover .bv-team-card__photo img { filter: grayscale(0); }

.bv-team-card__name {
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: 1.125rem;
}
.bv-team-card__role {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--on-surface-variant);
    margin-bottom: 0.25rem;
}
.bv-team-card__email {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* ---------- Location / Info Card ---------- */
.bv-info-card {
    background: var(--inverse-surface);
    color: var(--inverse-on-surface);
    padding: var(--space-8);
}
.bv-info-card__title {
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: 1.5rem;
    margin-bottom: var(--space-6);
}
.bv-info-card__item {
    display: flex;
    gap: var(--space-4);
    color: var(--outline);
    font-weight: 500;
}
.bv-info-card__item + .bv-info-card__item { margin-top: var(--space-4); }
.bv-info-card__item .material-symbols-outlined { color: var(--primary-fixed-dim); }

/* ---------- Newsletter ---------- */
.bv-newsletter { text-align: center; }
.bv-newsletter__form {
    display: flex;
    max-width: var(--container-sm);
    margin: 0 auto;
}
.bv-newsletter__input {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-body);
    font-size: 1rem;
    border: 4px solid var(--on-surface);
    background: var(--surface-container-lowest);
    border-radius: 0;
    outline: none;
}
.bv-newsletter__input:focus { border-color: var(--primary); }

/* ---------- Wishlist ---------- */
.bv-wishlist-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: var(--surface-container-lowest);
    transition: all 0.2s;
    border-left: 4px solid transparent;
}
.bv-wishlist-item:hover { border-left-color: var(--primary); }
.bv-wishlist-item + .bv-wishlist-item { margin-top: var(--space-2); }

.bv-wishlist-item__checkbox {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--outline);
    flex-shrink: 0;
}
.bv-wishlist-item__name { flex: 1; font-weight: 500; }
.bv-wishlist-item__priority { font-size: 0.7rem; }

.bv-priority--high { background: var(--error); color: #fff; padding: 0.125rem 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.bv-priority--critical { background: var(--tertiary); color: var(--on-tertiary); padding: 0.125rem 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.bv-priority--medium { background: var(--secondary); color: var(--on-secondary); padding: 0.125rem 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.bv-priority--low { background: var(--surface-container-high); color: var(--on-surface-variant); padding: 0.125rem 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }

/* ---------- Gallery Bento ---------- */
.bv-bento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.bv-bento__item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    /* Neutral surface behind the contained image — visible as letterbox /
       pillarbox when the image aspect ratio doesn't match the 4:3 cell.
       Required because we use object-fit: contain (not cover) so portrait
       works (e.g. Lene Pels' 1128x1600 photos) are never cropped. */
    background: var(--surface-container);
}
.bv-bento__item--wide { grid-column: span 2; }
.bv-bento__item img {
    width: 100%;
    height: 100%;
    /* `contain` instead of `cover`: scale the image to fit inside the cell
       without ever cropping. Trade-off is letterboxing for non-matching
       aspect ratios — accepted because no-crop is the explicit contract
       for this gallery. */
    object-fit: contain;
    transition: transform 0.5s;
}
.bv-bento__item:hover img { transform: scale(1.05); }

/* ---------- Document list / Archive ---------- */
.bv-search-bar {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) 0;
    position: sticky;
    top: 5rem;
    background: var(--background);
    z-index: 10;
}
.bv-search-input {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    border: 2px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    border-radius: 0;
    outline: none;
}
.bv-search-input:focus { border-color: var(--primary); }

.bv-archive-year {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 6rem;
    color: var(--surface-container-high);
    line-height: 1;
    margin-bottom: var(--space-4);
}

.bv-doc-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6);
    background: var(--surface-container-lowest);
    transition: all 0.2s;
}
.bv-doc-card:hover { background: var(--surface-container-low); }
.bv-doc-card + .bv-doc-card { margin-top: var(--space-3); }

.bv-doc-card__title {
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
}
.bv-doc-card__date { font-size: 0.875rem; color: var(--on-surface-variant); }

/* ---------- Legal content with sidebar TOC ---------- */
.bv-legal { display: grid; grid-template-columns: 1fr 3fr; gap: var(--space-12); }
.bv-legal__sidebar { position: sticky; top: 6rem; align-self: start; }
.bv-legal__toc { display: flex; flex-direction: column; gap: var(--space-3); }
.bv-legal__toc-link {
    font-family: var(--font-headline);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    padding: var(--space-2) var(--space-4);
    border-left: 3px solid transparent;
    transition: all 0.2s;
}
.bv-legal__toc-link:hover,
.bv-legal__toc-link.is-active {
    color: var(--primary);
    border-left-color: var(--primary);
}

.bv-legal__content h2 {
    font-family: var(--font-headline);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.75rem;
    margin-top: var(--space-12);
    margin-bottom: var(--space-6);
}
.bv-legal__content h3 {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.25rem;
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}
.bv-legal__content p { margin-bottom: var(--space-4); color: var(--on-surface-variant); line-height: 1.7; }
.bv-legal__content ul { margin-bottom: var(--space-4); padding-left: var(--space-6); }
.bv-legal__content li { margin-bottom: var(--space-2); color: var(--on-surface-variant); }

/* ---------- Press ---------- */
.bv-press-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.bv-press-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/2;
}
.bv-press-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.5s;
}
.bv-press-photo:hover img { filter: grayscale(0); }

/* Stats bar */
.bv-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    text-align: center;
    padding: var(--space-12) 0;
}
.bv-stat__value {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1;
}
.bv-stat__label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-surface-variant);
    margin-top: var(--space-2);
}

/* ---------- Workshop Status ---------- */
.bv-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }

/* ---------- Footer ---------- */
.bv-footer { background: var(--surface-container-low); }

.bv-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-12);
    padding: var(--space-20) var(--space-8);
    max-width: var(--container);
    margin: 0 auto;
}

.bv-footer__logo {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.75rem;
    text-transform: uppercase;
    letter-spacing: -0.04em;
}
.bv-footer__about { color: var(--on-surface-variant); margin-top: var(--space-6); max-width: 20rem; line-height: 1.6; }

.bv-footer__heading {
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    color: var(--outline);
    margin-bottom: var(--space-8);
}

.bv-footer__nav { display: flex; flex-direction: column; gap: var(--space-4); }
.bv-footer__nav a {
    font-family: var(--font-headline);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--on-surface-variant);
    padding: var(--space-1) var(--space-2);
    margin: 0 calc(var(--space-2) * -1);
    transition: background 0.1s;
}
.bv-footer__nav a:hover { background: var(--surface-container-high); }
.bv-footer__nav button {
    font-family: var(--font-headline);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--on-surface-variant);
    padding: var(--space-1) var(--space-2);
    margin: 0 calc(var(--space-2) * -1);
    transition: background 0.1s;
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    text-align: left;
    display: block;
    width: 100%;
}
.bv-footer__nav button:hover { background: var(--surface-container-high); }

.bv-footer__contact { display: flex; flex-direction: column; gap: var(--space-6); }
.bv-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.bv-footer__contact-item .material-symbols-outlined { color: var(--outline); margin-top: 0.125rem; }
.bv-footer__contact-item a:hover { text-decoration: underline; }

/* EU co-funding acknowledgement row — aligned with the footer grid's left
   edge and its container width, so the logo lines up under the brand column
   on every breakpoint. The asset has a transparent background, so it sits on
   the footer surface without a white box around it. */
.bv-footer__funding {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-8) var(--space-12);
}
.bv-footer__funding-logo {
    display: block;
    width: 100%;
    max-width: 15rem;
    height: auto;
}

.bv-footer__bottom {
    background: var(--surface-container);
    padding: var(--space-8);
}
.bv-footer__bottom-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.bv-footer__copyright {
    font-family: var(--font-headline);
    text-transform: uppercase;
    font-size: 0.875rem;
    color: var(--on-surface-variant);
}
/* Version + build line in the footer bottom strip. Inherits the
   surrounding bottom-strip typography so it sits unobtrusively next to
   the copyright — same colour family, same font size, no badge or
   button styling, no monospace, no background. */
.bv-footer__version {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    font-weight: 400;
}
.bv-footer__version em {
    font-style: italic;
}
.bv-footer__social {
    display: flex;
    gap: var(--space-4);
    border-left: 1px solid var(--outline-variant);
    padding-left: var(--space-6);
}
.bv-footer__social a { color: var(--outline); transition: color 0.2s; }
.bv-footer__social a:hover { color: var(--primary); }
.bv-footer__location-tag {
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--outline);
}

/* ---------- Utilities ---------- */
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mt-10 { margin-top: var(--space-10); }
.u-mt-12 { margin-top: var(--space-12); }
.u-mt-16 { margin-top: var(--space-16); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-8 { margin-bottom: var(--space-8); }
.u-mb-16 { margin-bottom: var(--space-16); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-6 { gap: var(--space-6); }
.u-gap-8 { gap: var(--space-8); }
.u-text-primary { color: var(--primary); }
.u-text-secondary { color: var(--secondary); }
.u-text-tertiary { color: var(--tertiary); }
.u-text-muted { color: var(--on-surface-variant); }
.u-bg-highest { background: var(--surface-container-highest); }

/* ---------- Responsive ---------- */

/* Nav: show full nav only above 1024px (landscape phones/tablets get hamburger) */
@media (min-width: 1024px) {
    .bv-nav__links { display: flex; }
    .bv-nav__hamburger { display: none; }
}

@media (max-width: 1023px) {
    .bv-workgroups { grid-template-columns: repeat(2, 1fr); }
    .bv-section-split { flex-direction: column; }
    .bv-section-split__sidebar { width: 100%; }
    .bv-hero-split { grid-template-columns: 1fr; }
    .bv-hero-split__image { min-height: 40vh; }
    .bv-footer__grid { grid-template-columns: repeat(2, 1fr); }
    .bv-legal { grid-template-columns: 1fr; }
    .bv-legal__sidebar { position: static; }
    .bv-press-grid { grid-template-columns: 1fr; }
    .bv-stats { grid-template-columns: repeat(2, 1fr); }
    .bv-status-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    /* Fluid typography: scale headings to fill container width on mobile */
    /* A single long compound word (e.g. "Værkstedskalenderen") must not spill
       past the viewport at 9vw — wrap/hyphenate it instead (lang="da" drives
       the hyphenation; break-word is the guaranteed fallback). Short headlines
       are unaffected. Mobile-only — desktop typography is untouched. */
    .bv-display, .bv-display[style*="font-size"] { font-size: clamp(1.75rem, 9vw, 5rem) !important; width: 100%; overflow-wrap: break-word; hyphens: auto; }
    .bv-headline, .bv-headline[style*="font-size"] { font-size: clamp(1.5rem, 7vw, 3rem) !important; width: 100%; }
    .bv-title, .bv-title[style*="font-size"] { font-size: clamp(1rem, 3.5vw, 1.5rem) !important; }
    .bv-hero__title { font-size: clamp(1.75rem, 8.5vw, 7rem) !important; max-width: calc(100vw - var(--space-8)); word-break: break-word; }

    /* Tighter padding on mobile */
    .bv-container { padding: 0 var(--space-4); }
    .bv-hero__content { padding: 0 var(--space-4); }
    .bv-nav { padding: var(--space-3) var(--space-4); }

    /* Force no overflow on mobile */
    .bv-hero, .bv-main, .bv-section, .bv-footer { max-width: 100vw; overflow-x: hidden; }
    .bv-hero__bg { width: 100%; }

    /* Workgroups: single column, shorter cards */
    .bv-workgroups { grid-template-columns: 1fr; }
    /* Mobile workgroup cards (screenshot 1, BILLEDKUNST clipped at top edge of
       the krea-cafe atelier card): the fixed 16:9 aspect-ratio collapsed the
       card below the height needed by the bottom-anchored title + description
       + line stack, and overflow:hidden then clipped the heading. Drop the
       fixed aspect on mobile and let the card grow to fit its content while
       still presenting an image-shaped silhouette via min-height (≈ 16:9 of a
       full-width column on a 390 px viewport ≈ 220 px). Image-as-background
       and bottom-anchored content stack are preserved. */
    .bv-workgroup-card {
        aspect-ratio: auto;
        min-height: 14rem;
        height: auto;
    }
    .bv-footer__grid { grid-template-columns: 1fr; padding: var(--space-12) var(--space-4); }
    .bv-footer__funding { padding: 0 var(--space-4) var(--space-8); }
    .bv-newsletter__form { flex-direction: column; }
    .bv-stats { grid-template-columns: 1fr 1fr; }
    .bv-bento { grid-template-columns: 1fr; }
    .bv-bento__item--wide { grid-column: span 1; }

    /* Hero: no right padding overflow */
    .bv-hero { max-width: 100vw; }

    /* Event-row responsive stacking moved to the @container event-row
       (max-width: 540px) block above — PR #35's media-query rules are
       superseded by the v2 handoff's container query, which fires on
       the row's own width rather than the viewport. Container query
       reaches narrow sidebars and 2-column tablet grids the media
       query never did. */

    /* Mobile pitch / technique cards (screenshot 5, "DU HAR SCENESKRÆK — OG
       EN HEMMELIG DRØM" overlapped by the faded "05"). Two coupled rules
       guarantee bounding-box non-intersection at 390 px width:
         a) numeral is tucked into the top-right corner and capped to ~2.5 rem
            wide so its left edge sits well inside the card's right padding.
         b) title's max-width reserves space for the numeral on its right and
            (crucially) makes the h3's bounding box stop short of the numeral
            even though the surrounding body has no padding-right.
       The numeral stays visible (no display:none / visibility:hidden — the
       design-intent guard called out in the spec). */
    .bv-technique-card__index {
        font-size: 1.75rem;
        top: var(--space-2);
        right: var(--space-2);
        width: 2.5rem;
        text-align: right;
        z-index: 0;
        opacity: 0.08;
    }
    .bv-technique-card__title {
        position: relative;
        z-index: 2;
        max-width: calc(100% - 3.5rem);
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* To-Do card: match inner padding to container padding on mobile */
    .bv-todo-trigger { padding: var(--space-4) !important; }
    .bv-todo-trigger .bv-headline { margin-bottom: var(--space-6) !important; }
    .bv-todo-item { padding: var(--space-4); gap: var(--space-3); }

    /* To-Do item: date below title on mobile */
    .bv-todo-item div[style*="display: flex; justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem;
    }

    /* Universal: stack ALL inline multi-column grids on mobile */
    [style*="grid-template-columns: 7fr 5fr"],
    [style*="grid-template-columns: 8fr 4fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: repeat(3"],
    .bv-projects-grid {
        grid-template-columns: 1fr !important;
    }

    /* Universal: stack inline flex rows with large gaps on mobile */
    [style*="display: flex; gap: var(--space-20)"],
    [style*="display: flex; gap: var(--space-16)"],
    [style*="display: flex; gap: var(--space-12)"] {
        flex-direction: column !important;
    }

    /* Fix fixed-width sidebar items going full width */
    [style*="width: 33%"] { width: 100% !important; }

    /* Makerspace/Kulturhus dark sections: tighter padding on mobile */
    section[style*="padding: var(--space-24) var(--space-8)"] {
        padding: var(--space-12) var(--space-4) !important;
    }
    div[style*="max-width: var(--container); margin: 0 auto; display: grid"] {
        padding: 0 var(--space-4) !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-8) !important;
    }

    /* Cards and panels: tighter padding on mobile */
    .bv-card, [style*="padding: var(--space-12)"], [style*="padding: var(--space-8)"] {
        padding: var(--space-4) !important;
    }

    /* Press grid */
    .bv-press-grid { grid-template-columns: 1fr !important; }

    /* Search bar: stack on mobile */
    .bv-search-bar { flex-direction: column; align-items: stretch; }

    /* Doc card: stack on mobile */
    .bv-doc-card { flex-direction: column; align-items: flex-start; gap: var(--space-4); }

    /* Archive year: smaller on mobile */
    .bv-archive-year { font-size: clamp(3rem, 15vw, 6rem) !important; }

    /* Footer bottom: center on mobile */
    .bv-footer__bottom-inner { justify-content: center; text-align: center; }
    .bv-footer__social { border-left: none; padding-left: 0; }

    /* Status grid */
    .bv-status-grid { grid-template-columns: 1fr !important; }

    /* Legal sidebar */
    .bv-legal { grid-template-columns: 1fr !important; }
    .bv-legal__sidebar { position: static !important; }

    /* Login overlay: stack vertically on mobile */
    .bv-login-overlay__panel { flex-direction: column; max-height: 95vh; }
    .bv-login-overlay__image { width: 100%; height: 30vh; min-height: 12rem; }
    .bv-login-overlay__form { width: 100%; padding: var(--space-6); overflow-y: auto; }

    /* Bug report overlay: full-width on mobile */
    .bv-bug-report-overlay__panel { width: 100%; max-width: 100%; max-height: 100vh; border-left: none; border-right: none; }
    .bv-bug-report-trigger { bottom: var(--space-4); right: var(--space-4); }
    .bv-bug-report-trigger__label { display: none; }
}

/* ---------- Bug Report Overlay ---------- */

/* Floating trigger button */
.bv-bug-report-trigger {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--secondary);
    color: var(--on-secondary);
    border: none;
    cursor: pointer;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.25);
}
.bv-bug-report-trigger:hover { background: var(--secondary-container); color: var(--on-secondary-container); }
.bv-bug-report-trigger:focus-visible {
    outline: 3px solid var(--tertiary);
    outline-offset: 2px;
}
.bv-bug-report-trigger .material-symbols-outlined { font-size: 1.25rem; }

/* Overlay backdrop */
.bv-bug-report-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(26, 28, 28, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
    padding: var(--space-4);
}
.bv-bug-report-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.bv-bug-report-overlay[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

/* Overlay panel */
.bv-bug-report-overlay__panel {
    width: 100%;
    max-width: 42rem;
    max-height: 90vh;
    background: var(--surface-container-lowest);
    display: flex;
    flex-direction: column;
    position: relative;
    border: 4px solid var(--inverse-surface);
    box-shadow: 8px 8px 0 var(--secondary);
    transform: translateY(1rem);
    transition: transform 0.3s;
    overflow: hidden;
}
.bv-bug-report-overlay.is-open .bv-bug-report-overlay__panel {
    transform: translateY(0);
}

/* Header */
.bv-bug-report-overlay__header {
    background: var(--inverse-surface);
    color: var(--inverse-on-surface);
    padding: var(--space-6) var(--space-8);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}
.bv-bug-report-overlay__header-inner { display: flex; flex-direction: column; gap: var(--space-2); }
.bv-bug-report-overlay__header-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.65rem;
    font-family: var(--font-headline);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--secondary-fixed-dim);
}
.bv-bug-report-overlay__title {
    font-family: var(--font-headline);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--inverse-on-surface);
    margin: 0;
}
.bv-bug-report-overlay__close {
    background: none;
    border: none;
    color: var(--inverse-on-surface);
    cursor: pointer;
    padding: var(--space-2);
    display: flex;
    align-items: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.bv-bug-report-overlay__close:hover { background: rgba(255,255,255,0.12); }
.bv-bug-report-overlay__close:focus-visible {
    outline: 3px solid var(--tertiary-fixed);
    outline-offset: 2px;
}

/* Body */
.bv-bug-report-overlay__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) var(--surface-container-low);
}
.bv-bug-report-overlay__body::-webkit-scrollbar { width: 4px; }
.bv-bug-report-overlay__body::-webkit-scrollbar-track { background: var(--surface-container-low); }
.bv-bug-report-overlay__body::-webkit-scrollbar-thumb { background: var(--secondary); }

/* Form fields */
.bv-bug-report-form { display: flex; flex-direction: column; gap: var(--space-6); }
.bv-bug-report-field { display: flex; flex-direction: column; gap: var(--space-2); }
.bv-bug-report-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--on-surface-variant);
}
.bv-bug-report-label__dot {
    width: 0.375rem;
    height: 0.375rem;
    background: var(--secondary);
    flex-shrink: 0;
}
.bv-bug-report-required { color: var(--error); margin-left: 0.125rem; }
.bv-bug-report-optional { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.7rem; color: var(--outline); }
.bv-bug-report-textarea { min-height: 5rem; }
.bv-bug-report-field-error {
    color: var(--error);
    font-size: 0.8rem;
    font-weight: 600;
    min-height: 1.2em;
}

/* Reproduction steps */
.bv-bug-report-steps { display: flex; flex-direction: column; gap: var(--space-2); }
.bv-bug-report-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface-container-low);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--surface-container-highest);
}
.bv-bug-report-step__num {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 0.65rem;
    color: var(--outline-variant);
    min-width: 1.5rem;
    flex-shrink: 0;
}
.bv-bug-report-step__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--on-surface);
    padding: 0;
}
.bv-bug-report-step__input:focus { border-bottom: 1px solid var(--secondary); }
.bv-bug-report-step__remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--outline);
    display: flex;
    align-items: center;
    padding: var(--space-1);
    transition: color 0.15s;
}
.bv-bug-report-step__remove:hover { color: var(--error); }
.bv-bug-report-step__remove:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.bv-bug-report-add-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--secondary);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-2) 0;
    transition: opacity 0.15s;
    align-self: flex-start;
}
.bv-bug-report-add-step:hover { opacity: 0.75; }
.bv-bug-report-add-step:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* Upload area */
.bv-bug-report-upload-area {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.bv-bug-report-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 2px solid var(--outline-variant);
    padding: var(--space-3) var(--space-6);
    cursor: pointer;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-surface-variant);
    transition: background 0.15s, border-color 0.15s;
}
.bv-bug-report-upload-btn:hover { background: var(--surface-container-low); border-color: var(--secondary); }
.bv-bug-report-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.bv-bug-report-image-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--outline);
    display: flex;
    align-items: center;
    padding: var(--space-1);
    transition: color 0.15s;
}
.bv-bug-report-image-clear:hover { color: var(--error); }
.bv-bug-report-image-clear:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* Context metadata box */
.bv-bug-report-context {
    background: var(--surface-container);
    border-left: 4px solid var(--outline-variant);
    padding: var(--space-4);
    margin-top: var(--space-2);
}
.bv-bug-report-context__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.bv-bug-report-context__title {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--outline);
}
.bv-bug-report-context__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.bv-bug-report-context__label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--outline);
    margin-bottom: 0.25rem;
}
.bv-bug-report-context__value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--on-surface-variant);
}
.bv-bug-report-context__value--url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Footer */
.bv-bug-report-overlay__footer {
    padding: var(--space-6) var(--space-8);
    border-top: 2px solid var(--surface-container-highest);
    background: var(--surface-container-low);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-6);
    flex-shrink: 0;
}
.bv-bug-report-cancel {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--outline);
    transition: color 0.15s;
    padding: var(--space-2);
}
.bv-bug-report-cancel:hover { color: var(--on-surface); }
.bv-bug-report-cancel:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* Accent strip */
.bv-bug-report-accent-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 0.375rem;
    flex-shrink: 0;
}

/* Message box */
.bv-bug-report-message {
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-4);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    border-left: 4px solid;
}
.bv-bug-report-message--success {
    background: var(--primary-fixed);
    color: var(--on-primary-fixed);
    border-color: var(--primary);
}
.bv-bug-report-message--error {
    background: #ffdad6;
    color: #93000a;
    border-color: var(--error);
}

/* ==========================================================================
   Feature Suggestion Page
   ========================================================================== */

/* Page hero / headline area */
.bv-fs-page { padding-top: var(--space-10); }

.bv-fs-hero {
    margin-bottom: var(--space-12);
}

.bv-fs-hero__eyebrow {
    display: block;
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    color: var(--tertiary);
    margin-bottom: var(--space-3);
}

.bv-fs-hero__title {
    margin-bottom: var(--space-4);
}

.bv-fs-hero__divider {
    width: 6rem;
    height: 0.5rem;
    background: var(--primary);
    margin-bottom: var(--space-6);
}

.bv-fs-hero__lead {
    max-width: 42rem;
}

/* Two-column layout */
.bv-fs-layout {
    display: flex;
    gap: var(--space-12);
    align-items: flex-start;
}

/* Guidelines sidebar */
.bv-fs-sidebar {
    flex: 0 0 28rem;
    max-width: 28rem;
    background: var(--surface-container-low);
    border-left: 8px solid var(--secondary);
    padding: var(--space-8);
}

.bv-fs-sidebar__heading {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: var(--space-6);
    letter-spacing: -0.02em;
}

.bv-fs-sidebar__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.bv-fs-sidebar__item {
    display: flex;
    gap: var(--space-4);
}

.bv-fs-sidebar__num {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 2rem;
    color: rgba(50, 95, 155, 0.25);
    flex-shrink: 0;
    line-height: 1;
}

.bv-fs-sidebar__principle {
    display: block;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--on-surface);
    margin-bottom: var(--space-1);
}

.bv-fs-sidebar__text {
    font-size: 0.9rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

.bv-fs-sidebar__link {
    color: var(--secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bv-fs-sidebar__link:hover { color: var(--primary); }

/* Form area */
.bv-fs-form-area {
    flex: 1;
    min-width: 0;
}

/* Form fields */
.bv-fs-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.bv-fs-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bv-fs-label {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--on-surface);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.bv-fs-required {
    color: var(--error);
    margin-left: 0.125rem;
}

.bv-fs-title-input {
    font-weight: 700;
    font-size: 1.125rem;
    padding: var(--space-4) var(--space-6);
}

.bv-fs-textarea {
    min-height: 8rem;
    padding: var(--space-4) var(--space-6);
}
.bv-fs-textarea--sm { min-height: 5rem; }

.bv-fs-field-error {
    color: var(--error);
    font-size: 0.8rem;
    font-weight: 600;
    min-height: 1.2em;
}

/* Submit row */
.bv-fs-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding-top: var(--space-8);
    border-top: 2px solid var(--surface-container);
}

.bv-fs-submit-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--outline);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bv-fs-submit-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
}

/* Success / error message */
.bv-fs-message {
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
    font-size: 0.9rem;
    font-weight: 600;
    border-left: 4px solid;
}
.bv-fs-message--success {
    background: var(--primary-fixed);
    color: var(--on-surface);
    border-color: var(--primary);
}
.bv-fs-message--error {
    background: #ffdad6;
    color: #93000a;
    border-color: var(--error);
}

/* Confirmation block (replaces form after success) */
.bv-fs-confirmation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-10);
    background: var(--primary-fixed);
    border-left: 8px solid var(--primary);
}

.bv-fs-confirmation__icon .material-symbols-outlined {
    font-size: 3rem;
    color: var(--primary);
}

.bv-fs-confirmation__title {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--primary);
}

.bv-fs-confirmation__text {
    color: var(--on-surface);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 32rem;
}

/* Login prompt (unauthenticated) */
.bv-fs-login-prompt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-10);
    background: var(--surface-container-low);
    border-left: 8px solid var(--outline-variant);
}

.bv-fs-login-prompt__icon .material-symbols-outlined {
    font-size: 2.5rem;
    color: var(--outline);
}

.bv-fs-login-prompt__title {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--on-surface);
}

.bv-fs-login-prompt__text {
    color: var(--on-surface-variant);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 28rem;
}

.bv-fs-login-prompt__register {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
}

.bv-fs-login-prompt__link {
    color: var(--secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.bv-fs-login-prompt__link:hover { color: var(--primary); }

/* Responsive: stack at < 768px */
@media (max-width: 767px) {
    .bv-fs-layout {
        flex-direction: column;
        gap: var(--space-8);
    }

    .bv-fs-sidebar {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .bv-fs-form-area {
        width: 100%;
    }

    .bv-fs-submit-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .bv-fs-submit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Roadmap Page
   ========================================================================== */

/* Page wrapper */
.bv-rm-page {
    padding-top: var(--space-10);
    padding-bottom: var(--space-20);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.bv-rm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.bv-rm-header__eyebrow {
    display: block;
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    color: var(--tertiary);
    margin-bottom: var(--space-3);
}

.bv-rm-header__title {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.95;
    margin-bottom: var(--space-4);
}

.bv-rm-header__lead {
    max-width: 44rem;
    font-size: 1rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

.bv-rm-header__badges {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-shrink: 0;
}

.bv-rm-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: 2px solid var(--on-surface);
}

.bv-rm-badge--status {
    background: var(--surface-container-highest);
    color: var(--on-surface);
}

.bv-rm-badge--version {
    background: var(--tertiary-fixed);
    color: var(--tertiary);
    border-color: var(--tertiary);
}

.bv-rm-badge__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    animation: bv-rm-pulse 2s ease-in-out infinite;
}

@keyframes bv-rm-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ── "Forstå processen" button ───────────────────────────────────────────── */
.bv-rm-process-row {
    margin-bottom: var(--space-10);
}

.bv-rm-process-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    border: 2px solid var(--on-surface);
    background: var(--primary);
    color: var(--on-primary);
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.bv-rm-process-btn:hover    { background: var(--primary-container); }
.bv-rm-process-btn:active   { transform: translate(2px, 2px); }
.bv-rm-process-btn:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }

/* ── "Forstå processen" overlay panel ───────────────────────────────────── */
.bv-rm-process-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(26, 28, 28, 0.6);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.bv-rm-process-overlay.is-open {
    display: flex;
}

.bv-rm-process-overlay__inner {
    background: var(--surface-container-lowest);
    border: 4px solid var(--on-surface);
    box-shadow: 12px 12px 0 rgba(26, 28, 28, 0.9);
    max-width: 56rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.bv-rm-process-overlay__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) var(--space-8);
    border-bottom: 4px solid var(--on-surface);
    background: var(--surface-container-low);
}

.bv-rm-process-overlay__title {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 1.75rem;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

.bv-rm-process-overlay__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    color: var(--on-surface);
    display: flex;
    align-items: center;
    transition: background 0.15s;
}
.bv-rm-process-overlay__close:hover { background: var(--surface-container); }
.bv-rm-process-overlay__close:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

.bv-rm-process-overlay__body {
    padding: var(--space-8);
}

.bv-rm-process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
}

.bv-rm-process-section p {
    font-size: 0.9rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.bv-rm-process-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-3);
}

.bv-rm-process-statuses {
    background: var(--surface-container-low);
    padding: var(--space-6);
    border: 2px solid var(--on-surface);
}

.bv-rm-process-status-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.bv-rm-process-status {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.bv-rm-process-status__bar {
    width: 0.5rem;
    min-height: 2.5rem;
    flex-shrink: 0;
}
.bv-rm-process-status__bar--rapporteret             { background: var(--outline); }
.bv-rm-process-status__bar--under-afklaring         { background: var(--secondary); }
.bv-rm-process-status__bar--klar-til-implementation { background: var(--tertiary); }
.bv-rm-process-status__bar--under-implementation    { background: var(--on-secondary-container); }
.bv-rm-process-status__bar--klar-til-test           { background: var(--tertiary-container); }
.bv-rm-process-status__bar--loest                   { background: var(--primary-container); }

.bv-rm-process-status p {
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    margin-top: var(--space-1);
    margin-bottom: 0;
    line-height: 1.4;
}

/* ── Status badges (shared across cards & process panel) ─────────────────── */
.bv-rm-status-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.bv-rm-status--rapporteret             { background: var(--surface-container-high); color: var(--on-surface); }
.bv-rm-status--under-afklaring         { background: var(--secondary);           color: var(--on-secondary); }
.bv-rm-status--klar-til-implementation { background: var(--tertiary-container);  color: var(--on-tertiary-container); }
.bv-rm-status--under-implementation    { background: var(--primary);             color: var(--on-primary); }
.bv-rm-status--klar-til-test           { background: var(--secondary-container); color: var(--on-secondary-container); }
.bv-rm-status--loest                   { background: var(--primary);             color: var(--on-primary); }

/* ── Priority badges ─────────────────────────────────────────────────────── */
.bv-rm-priority-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Bug priorities */
.bv-rm-priority--kritisk   { background: var(--error); color: var(--on-primary); }
.bv-rm-priority--hoej      { background: var(--tertiary-fixed); color: var(--tertiary); }
.bv-rm-priority--middel    { background: var(--surface-container-highest); color: var(--on-surface); }
.bv-rm-priority--lav       { background: var(--surface-container-highest); color: var(--on-surface); }
/* Feature priorities */
.bv-rm-priority--nyhed      { background: var(--secondary-fixed); color: var(--on-secondary-container); }
.bv-rm-priority--forbedring { background: var(--surface-container-highest); color: var(--on-surface); }

/* ── ID badge ─────────────────────────────────────────────────────────────── */
.bv-rm-id-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--surface-container-highest);
    color: var(--on-surface);
}

/* ── Vote budget counter ─────────────────────────────────────────────────── */
.bv-rm-budget {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--surface-container-low);
    border: 2px solid var(--on-surface);
    margin-bottom: var(--space-4);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-surface-variant);
}

.bv-rm-budget__count {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--on-surface);
    line-height: 1;
    min-width: 1.5rem;
    text-align: center;
}

/* ── Two-column board ────────────────────────────────────────────────────── */
.bv-rm-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
}

/* ── Column ──────────────────────────────────────────────────────────────── */
.bv-rm-column {}

.bv-rm-column__header {
    border-left: 8px solid;
    padding-left: var(--space-4);
    margin-bottom: var(--space-4);
}
.bv-rm-column__header--bugs     { border-color: var(--error); }
.bv-rm-column__header--features { border-color: var(--secondary); }

.bv-rm-column__title {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 1.75rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.bv-rm-column__subtitle {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--outline);
    margin-top: var(--space-1);
}

.bv-rm-cards {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bv-rm-empty {
    color: var(--outline);
    font-size: 0.9rem;
    padding: var(--space-8) var(--space-4);
    border: 2px dashed var(--outline-variant);
    text-align: center;
}

/* ── Roadmap card ────────────────────────────────────────────────────────── */
.bv-rm-card {
    background: var(--surface);
    border: 2px solid var(--on-surface);
    border-left: 4px solid var(--primary);
    padding: var(--space-6);
    cursor: pointer;
    transition: background 0.15s;
}
.bv-rm-card[data-item-type="bug"]     { border-left: 4px solid var(--error); }
.bv-rm-card[data-item-type="feature"] { border-left: 4px solid var(--secondary); }
.bv-rm-card:hover:not(.bv-rm-card--solved):not(.bv-rm-card--locked) { background: var(--surface-container-low); }
.bv-rm-card:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }

.bv-rm-card--locked {
    background: var(--secondary-fixed);
    cursor: default;
}

.bv-rm-card--solved {
    background: var(--surface-container-low);
    cursor: default;
}

.bv-rm-card.is-expanded {
    border: 3px solid var(--primary);
}

.bv-rm-card__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}

.bv-rm-card__content {
    flex: 1;
    min-width: 0;
}

.bv-rm-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.bv-rm-card__lock-icon {
    font-size: 0.875rem;
    color: var(--outline);
}

.bv-rm-card__title {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
    margin-bottom: var(--space-2);
    word-break: break-word;
}

.bv-rm-card:hover:not(.bv-rm-card--solved):not(.bv-rm-card--locked) .bv-rm-card__title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.bv-rm-card__desc {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Vote area on card ───────────────────────────────────────────────────── */
.bv-rm-card__vote-area {
    flex-shrink: 0;
}

.bv-rm-card__vote-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 4rem;
    padding: var(--space-2);
    border: 2px solid var(--on-surface);
    background: var(--surface);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: var(--font-headline);
}
.bv-rm-card__vote-btn .material-symbols-outlined {
    font-size: 1.5rem;
    color: var(--tertiary);
    font-variation-settings: 'FILL' 0;
}
.bv-rm-card__vote-btn:hover:not([aria-disabled="true"]) {
    background: var(--on-surface);
    color: var(--surface);
}
.bv-rm-card__vote-btn:hover:not([aria-disabled="true"]) .material-symbols-outlined {
    color: var(--tertiary-fixed-dim);
}
.bv-rm-card__vote-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

.bv-rm-card__vote-btn.is-voted .material-symbols-outlined {
    color: var(--tertiary);
    font-variation-settings: 'FILL' 1;
}
.bv-rm-card__vote-btn.is-voted {
    background: var(--tertiary-fixed);
    border-color: var(--tertiary);
}

.bv-rm-card__vote-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.bv-rm-card__vote-btn--locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--surface-container);
}
.bv-rm-card__vote-btn--unauth {
    cursor: default;
    opacity: 0.7;
}

.bv-rm-card__vote-count {
    font-weight: 900;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: -0.03em;
}

.bv-rm-card__vote-solved {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    min-width: 4rem;
    padding: var(--space-2);
    border: 2px solid var(--primary-fixed-dim);
    background: var(--primary-fixed);
}
.bv-rm-card__vote-solved .material-symbols-outlined {
    font-size: 1.5rem;
    color: var(--primary);
    font-variation-settings: 'FILL' 1;
}
.bv-rm-card__vote-solved .bv-rm-card__vote-count {
    color: var(--primary);
    font-size: 1.125rem;
}

/* ── Inline action bar ───────────────────────────────────────────────────── */
.bv-rm-card__action-bar {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 2px dashed rgba(26, 28, 28, 0.2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.bv-rm-card__action-bar[hidden] { display: none; }

.bv-rm-card__action-locked,
.bv-rm-card__action-login {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
    color: var(--outline);
    width: 100%;
}
.bv-rm-card__action-login a {
    color: var(--secondary);
    text-decoration: underline;
}

.bv-rm-vote-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--on-surface);
    background: var(--surface);
    cursor: pointer;
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background 0.15s;
    min-height: 2.5rem;
}
.bv-rm-vote-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

.bv-rm-vote-btn--add {
    background: var(--tertiary-fixed);
    border-color: var(--tertiary);
    color: var(--on-surface);
}
.bv-rm-vote-btn--add:hover:not([aria-disabled="true"]) {
    background: var(--tertiary);
    color: var(--on-tertiary);
}
.bv-rm-vote-btn--add[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--surface-container-low);
    border-color: var(--outline-variant);
}

.bv-rm-vote-btn--remove {
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
}
.bv-rm-vote-btn--remove:hover:not([aria-disabled="true"]) {
    background: var(--surface-container-highest);
    color: var(--on-surface);
}
.bv-rm-vote-btn--remove[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

.bv-rm-vote-btn--hidden {
    display: none;
}

.bv-rm-vote-btn__hint {
    font-size: 0.6rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--outline);
}

/* ── Login notice ─────────────────────────────────────────────────────────── */
.bv-rm-login-notice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding: var(--space-4) var(--space-6);
    background: var(--surface-container-low);
    border-left: 4px solid var(--outline-variant);
    font-size: 0.9rem;
    color: var(--on-surface-variant);
}
.bv-rm-login-notice .material-symbols-outlined {
    color: var(--secondary);
    font-size: 1.5rem;
    flex-shrink: 0;
}
.bv-rm-login-notice__link {
    color: var(--secondary);
    text-decoration: underline;
    font-weight: 600;
}

/* ── Toast notification ──────────────────────────────────────────────────── */
.bv-rm-toast {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    z-index: 300;
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    max-width: 24rem;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.bv-rm-toast.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.bv-rm-toast--error {
    background: var(--tertiary-fixed);
    color: var(--tertiary);
    border-left: 4px solid var(--error);
}
.bv-rm-toast--info {
    background: var(--primary);
    color: var(--on-primary);
    border-left: 4px solid var(--primary-fixed);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bv-rm-board {
        grid-template-columns: 1fr;
    }

    .bv-rm-header {
        flex-direction: column;
        gap: var(--space-6);
    }

    .bv-rm-header__badges {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .bv-rm-process-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

@media (max-width: 480px) {
    .bv-rm-header__title {
        font-size: 2.25rem;
    }

    .bv-rm-process-overlay__inner {
        max-height: 95vh;
    }

    .bv-rm-process-overlay__body {
        padding: var(--space-4);
    }

    .bv-rm-toast {
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
        max-width: none;
    }
}

/* ── Roadmap info row (badges + process button) ───────────────────────────── */
.bv-rm-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* ── Tab navigation ──────────────────────────────────────────────────────── */
.bv-rm-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 4px solid var(--on-surface);
    margin-bottom: var(--space-8);
}

.bv-rm-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: none;
    border-bottom: none;
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    position: relative;
    bottom: -4px;
    border: 2px solid transparent;
    border-bottom: none;
}

.bv-rm-tab:hover {
    background: var(--surface-container);
    color: var(--on-surface);
}

.bv-rm-tab.is-active {
    background: var(--surface);
    color: var(--on-surface);
    border: 2px solid var(--on-surface);
    border-bottom: 4px solid var(--surface);
}

.bv-rm-tab:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 2px;
}

.bv-rm-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    background: var(--on-surface);
    color: var(--surface);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0;
}

.bv-rm-tab.is-active .bv-rm-tab__count {
    background: var(--primary);
    color: var(--on-primary);
}

/* ── Tab panel ───────────────────────────────────────────────────────────── */
.bv-rm-tabpanel {
    min-height: 8rem;
}

.bv-rm-tabpanel[hidden] {
    display: none;
}

/* ── Card detail panel (expanded bug/feature metadata) ───────────────────── */
.bv-rm-card__detail-panel {
    width: 100%;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--outline-variant);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bv-rm-card__detail-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.bv-rm-card__detail-label {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-surface-variant);
}

.bv-rm-card__detail-value {
    font-size: 0.85rem;
    color: var(--on-surface);
    line-height: 1.5;
}

.bv-rm-card__detail-steps {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    color: var(--on-surface);
    line-height: 1.5;
}

.bv-rm-card__detail-steps li + li {
    margin-top: var(--space-1);
}

.bv-rm-card__detail-empty {
    font-size: 0.8rem;
    color: var(--outline);
    font-style: italic;
}

/* ── Card community value ─────────────────────────────────────────────────── */
.bv-rm-card__community-value {
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    line-height: 1.5;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--secondary-fixed);
    border-left: 3px solid var(--secondary);
}

.bv-rm-card__community-value-label {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-secondary-container);
    display: block;
    margin-bottom: var(--space-1);
}

/* ── Card footer: date + submitter ───────────────────────────────────────── */
.bv-rm-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--outline-variant);
}

.bv-rm-card__date,
.bv-rm-card__submitter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    color: var(--outline);
    font-family: var(--font-headline);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bv-rm-card__date .material-symbols-outlined,
.bv-rm-card__submitter .material-symbols-outlined {
    font-size: 0.875rem;
    color: var(--outline);
}

/* ── Vote label on card face button ──────────────────────────────────────── */
.bv-rm-card__vote-label {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: inherit;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.bv-rm-empty-state {
    padding: var(--space-12) var(--space-8);
    text-align: center;
    border: 2px dashed var(--outline-variant);
    background: var(--surface-container-lowest);
}

.bv-rm-empty-state__icon {
    font-size: 3rem;
    color: var(--outline);
    display: block;
    margin-bottom: var(--space-4);
}

.bv-rm-empty-state__title {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-3);
}

.bv-rm-empty-state__text {
    font-size: 0.9rem;
    color: var(--on-surface-variant);
    max-width: 36rem;
    margin: 0 auto;
    line-height: 1.6;
}

.bv-rm-empty-state__link {
    color: var(--secondary);
    text-decoration: underline;
    font-weight: 600;
}

@media (max-width: 640px) {
    .bv-rm-tabs {
        flex-wrap: wrap;
        border-bottom: none;
    }

    .bv-rm-tab {
        bottom: 0;
        flex: 1 1 auto;
        justify-content: center;
        border: 2px solid var(--outline-variant);
    }

    .bv-rm-tab.is-active {
        border-color: var(--on-surface);
        border-bottom: 2px solid var(--on-surface);
    }

    .bv-rm-info-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Type badge ──────────────────────────────────────────────────────────── */
.bv-rm-type-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.bv-rm-type-badge--bug     { background: var(--error);     color: var(--on-primary); }
.bv-rm-type-badge--feature { background: var(--secondary);  color: var(--on-secondary); }

/* ── Resolved card: de-emphasis ─────────────────────────────────────────── */
.bv-rm-card--solved {
    opacity: 0.8;
    cursor: default;
}
.bv-rm-card--solved:hover {
    opacity: 0.8;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.bv-rm-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: var(--surface-container-low);
    border: 2px solid var(--outline-variant);
    margin-bottom: var(--space-6);
}

.bv-rm-filter-bar__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.bv-rm-filter-bar__label {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-surface-variant);
}

.bv-rm-filter-select {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--on-surface);
    background: var(--surface-container-lowest);
    border: 2px solid var(--on-surface);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    min-width: 9rem;
}

.bv-rm-filter-select:focus {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.bv-rm-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: none;
    border: 2px solid var(--on-surface);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    color: var(--on-surface);
    transition: background 0.15s;
}
.bv-rm-filter-clear:hover {
    background: var(--surface-container);
}
.bv-rm-filter-clear:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}
.bv-rm-filter-clear[hidden] {
    display: none;
}

/* ── "Vis løste" toggle ──────────────────────────────────────────────────── */
.bv-rm-solved-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.bv-rm-solved-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: none;
    border: 2px solid var(--outline-variant);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    color: var(--on-surface-variant);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bv-rm-solved-toggle:hover {
    background: var(--surface-container);
    color: var(--on-surface);
    border-color: var(--on-surface);
}
.bv-rm-solved-toggle.is-active {
    background: var(--surface-container-high);
    color: var(--on-surface);
    border-color: var(--on-surface);
}
.bv-rm-solved-toggle:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}
.bv-rm-solved-toggle__count {
    color: var(--outline);
    font-weight: 400;
}
.bv-rm-solved-toggle__hint {
    font-size: 0.8rem;
    color: var(--outline);
}

/* ── Deep-link highlight animation ──────────────────────────────────────── */
@keyframes bv-rm-highlight {
    0%   { outline: 4px solid var(--secondary); outline-offset: 4px; }
    50%  { outline: 4px solid var(--secondary); outline-offset: 2px; }
    100% { outline: none; }
}

.bv-rm-card--highlighted {
    animation: bv-rm-highlight 2s ease-out forwards;
}

@media (max-width: 640px) {
    .bv-rm-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .bv-rm-filter-select {
        width: 100%;
    }
}

/* ── Copy-link button (Feature 8) ─────────────────────────────────────────── */
.bv-rm-card__copy-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    padding: 0 var(--space-1);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--outline);
    transition: color 0.15s;
    margin-left: auto;
}
.bv-rm-card__copy-btn:hover {
    color: var(--secondary);
}
.bv-rm-card__copy-btn:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}
.bv-rm-card__copy-btn .material-symbols-outlined {
    font-size: 0.9rem;
    vertical-align: middle;
}
.bv-rm-card__copy-btn-label {
    font-size: 0.75rem;
}
.bv-rm-card__copy-btn.bv-rm-card__copy-btn--copied {
    color: var(--primary);
}

/* ── Status step-bar (Feature 10) ────────────────────────────────────────── */
.bv-rm-step-bar {
    margin-top: var(--space-4);
}
.bv-rm-step-bar__stages {
    display: flex;
    gap: var(--space-1);
    height: 4px;
}
.bv-rm-step-bar__step {
    flex: 1;
    height: 4px;
    background: var(--outline-variant);
    border-radius: 2px;
}
.bv-rm-step-bar__step--active {
    background: var(--primary);
}
.bv-rm-step-bar__labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-1);
}
.bv-rm-step-bar__label-start,
.bv-rm-step-bar__label-end {
    font-size: 0.65rem;
    color: var(--outline);
    font-family: var(--font-body);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Løst: single check indicator */
.bv-rm-step-bar--solved {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.bv-rm-step-bar__check {
    font-size: 1.25rem;
    color: var(--primary);
    font-variation-settings: 'FILL' 1;
}
.bv-rm-step-bar__solved-label {
    font-size: 0.75rem;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── v7: Under-implementation card state ─────────────────────────────────── */
.bv-rm-card--under-implementation {
    background-color: #eef2ff;
}

/* ── v7: Star budget widget ──────────────────────────────────────────────── */
.bv-rm-star-budget {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--on-surface);
    margin-top: var(--space-3);
    background: var(--surface-container-lowest);
    max-width: 100%;
    box-sizing: border-box;
}

.bv-rm-star-budget__label {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--on-surface-variant);
    margin-right: var(--space-1);
}

.bv-rm-star-budget__star {
    font-size: 1.1rem;
    line-height: 1;
}

.bv-rm-star-budget__star--filled {
    color: var(--tertiary);
    font-variation-settings: 'FILL' 1;
}

.bv-rm-star-budget__star--empty {
    color: var(--outline-variant);
    font-variation-settings: 'FILL' 0;
}

/* ── v7: Hero section ────────────────────────────────────────────────────── */
.bv-rm-hero {
    margin-bottom: var(--space-10);
}

.bv-rm-hero__heading {
    font-family: var(--font-headline);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.95;
    font-size: clamp(3rem, 7vw, 5rem);
    margin-bottom: var(--space-6);
}

.bv-rm-hero__row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.bv-rm-hero__intro {
    max-width: 44rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--on-surface-variant);
}

.bv-rm-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex-shrink: 0;
    align-items: flex-start;
}

/* Utility classes for highlighted span */
.bg-primary {
    background-color: var(--primary);
}

.text-on-primary {
    color: var(--on-primary);
}

/* Responsive: hero row stacks on narrow screens */
@media (max-width: 1023px) {
    .bv-rm-hero__row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Feature Suggestion Overlay
   ========================================================================== */

/* Overlay backdrop */
.bv-feature-suggestion-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(26, 28, 28, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
    padding: var(--space-4);
}
.bv-feature-suggestion-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.bv-feature-suggestion-overlay[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

/* Overlay panel */
.bv-feature-suggestion-overlay__panel {
    width: 100%;
    max-width: 42rem;
    max-height: 90vh;
    background: var(--surface-container-lowest);
    display: flex;
    flex-direction: column;
    position: relative;
    border: 4px solid var(--inverse-surface);
    box-shadow: 8px 8px 0 var(--secondary);
    transform: translateY(1rem);
    transition: transform 0.3s;
    overflow: hidden;
}
.bv-feature-suggestion-overlay.is-open .bv-feature-suggestion-overlay__panel {
    transform: translateY(0);
}

/* Header */
.bv-feature-suggestion-overlay__header {
    background: var(--inverse-surface);
    color: var(--inverse-on-surface);
    padding: var(--space-6) var(--space-8);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}
.bv-feature-suggestion-overlay__header-inner { display: flex; flex-direction: column; gap: var(--space-2); }
.bv-feature-suggestion-overlay__header-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.65rem;
    font-family: var(--font-headline);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--secondary-fixed-dim);
}
.bv-feature-suggestion-overlay__title {
    font-family: var(--font-headline);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--inverse-on-surface);
    margin: 0;
}
.bv-feature-suggestion-overlay__close {
    background: none;
    border: none;
    color: var(--inverse-on-surface);
    cursor: pointer;
    padding: var(--space-2);
    display: flex;
    align-items: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.bv-feature-suggestion-overlay__close:hover { background: rgba(255,255,255,0.12); }
.bv-feature-suggestion-overlay__close:focus-visible {
    outline: 3px solid var(--tertiary-fixed);
    outline-offset: 2px;
}

/* Body */
.bv-feature-suggestion-overlay__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) var(--surface-container-low);
}
.bv-feature-suggestion-overlay__body::-webkit-scrollbar { width: 4px; }
.bv-feature-suggestion-overlay__body::-webkit-scrollbar-track { background: var(--surface-container-low); }
.bv-feature-suggestion-overlay__body::-webkit-scrollbar-thumb { background: var(--secondary); }

/* Footer */
.bv-feature-suggestion-overlay__footer {
    padding: var(--space-6) var(--space-8);
    border-top: 2px solid var(--surface-container-highest);
    background: var(--surface-container-low);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-6);
    flex-shrink: 0;
}
.bv-feature-suggestion-cancel {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--outline);
    transition: color 0.15s;
    padding: var(--space-2);
}
.bv-feature-suggestion-cancel:hover { color: var(--on-surface); }
.bv-feature-suggestion-cancel:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* Accent strip */
.bv-feature-suggestion-accent-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 0.375rem;
    flex-shrink: 0;
}

/* Responsive: full-width panel on narrow screens */
@media (max-width: 600px) {
    .bv-feature-suggestion-overlay__panel { width: 100%; max-width: 100%; max-height: 100vh; border-left: none; border-right: none; }
}

/* ============================================================================
   Event management surface (frontend event CRUD)
   /begivenheder/{mine,opret,rediger/<key>,slet/<key>} + event detail view.
   House style: square corners, 4px accent borders, .bv-btn variants.
   ============================================================================ */

/* Detail view */
.bv-event-detail { margin-top: var(--space-8); max-width: 46rem; }
.bv-event-detail__facts { margin: var(--space-8) 0; display: grid; gap: var(--space-2); }
.bv-event-detail__facts div { display: flex; gap: var(--space-4); }
.bv-event-detail__facts dt {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    min-width: 7rem;
    color: var(--outline);
}
.bv-event-detail__facts dd { margin: 0; }
.bv-event-detail__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }

/* Dashboard */
.bv-event-dashboard__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}
.bv-event-dashboard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

/* Compact row grid: [status] [title+date] [actions]. Fixed status/button
   widths keep every column vertically aligned across rows, whatever the
   status. Attendees fold out full-width beneath (row 2). */
.bv-event-dashboard__item {
    display: grid;
    grid-template-columns: 7rem 1fr auto;
    align-items: center;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-left: 4px solid var(--primary);
}
.bv-event-dashboard__item[data-event-status="kladde"] { border-left-color: var(--secondary); }
.bv-event-dashboard__item[data-event-status="arkiveret"] { border-left-color: var(--outline); }
.bv-event-dashboard__item[data-event-status="slettet"] { border-left-color: var(--outline); opacity: 0.72; }

/* Status badge — fixed size so the first column lines up on every row. */
.bv-event-dashboard__status {
    width: 7rem;
    text-align: center;
    box-sizing: border-box;
    align-self: center;
}
.bv-event-dashboard__status--publiceret { background: var(--primary); color: var(--on-primary); }
.bv-event-dashboard__status--kladde { background: var(--secondary); color: var(--on-secondary); }
.bv-event-dashboard__status--arkiveret { background: var(--tertiary); color: var(--on-tertiary); }
.bv-event-dashboard__status--slettet { background: var(--outline); color: #fff; }

.bv-event-dashboard__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bv-event-dashboard__title { font-weight: 700; color: var(--on-surface); }
.bv-event-dashboard__date { color: var(--on-surface-variant); font-size: 0.875rem; }
.bv-event-dashboard__owner { color: var(--outline); font-size: 0.8rem; }

/* Actions — right-aligned, Rediger flush with the card's right edge. */
.bv-event-dashboard__actions { justify-self: end; display: flex; align-items: center; gap: var(--space-2); }
.bv-event-dashboard__inline-form { display: inline; margin: 0; }
/* Uniform button size (width + height). The two-class selector outranks every
   single-class .bv-btn--<variant> so padding stays constant regardless of the
   cascade order that bit the calendar buttons. */
.bv-event-dashboard__actions .bv-btn {
    min-width: 6.5rem;
    padding: var(--space-2) var(--space-4);
    text-align: center;
    box-sizing: border-box;
}
.bv-event-dashboard__actions .bv-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Slet / Slet-helt confirmation — a floating popover hanging from the button
   (native <details>, so it also works without JS; JS adds cancel/outside/Esc). */
.bv-event-dashboard__confirm { position: relative; display: inline-block; }
.bv-event-dashboard__confirm > summary { cursor: pointer; list-style: none; }
.bv-event-dashboard__confirm > summary::-webkit-details-marker { display: none; }
.bv-event-dashboard__confirm > summary::marker { content: ''; }
.bv-event-dashboard__confirm-pop {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 30;
    width: 17rem;
    max-width: 82vw;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    padding: var(--space-4);
    text-align: left;
}
.bv-event-dashboard__confirm-pop::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 1.75rem;
    width: 12px;
    height: 12px;
    background: inherit;
    border-left: 1px solid var(--outline);
    border-top: 1px solid var(--outline);
    transform: rotate(45deg);
}
.bv-event-dashboard__confirm-text { margin: 0 0 var(--space-3); font-size: 0.9rem; line-height: 1.4; }
.bv-event-dashboard__confirm-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin: 0; }

/* RSVP attendee list (owner/super only). Native <details>; the summary sits
   under the actions (right), the table folds out full-width below. */
.bv-event-dashboard__attendees { grid-column: 1 / -1; margin-top: var(--space-1); }
.bv-event-dashboard__attendees > summary {
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--secondary);
}
.bv-event-dashboard__attendee-empty { margin: var(--space-3) 0 0; }
.bv-event-dashboard__attendee-table {
    display: grid;
    grid-template-columns: max-content minmax(6rem, auto) 1fr;
    gap: var(--space-1) var(--space-6);
    margin-top: var(--space-3);
    font-size: 0.875rem;
    align-items: baseline;
}
/* Row wrappers are transparent on desktop — their cells flow into the grid
   above exactly as when they were direct children (mobile turns them into
   stacked blocks; see the @media rule below). */
.bv-event-dashboard__attendee-row { display: contents; }
.bv-event-dashboard__attendee-head {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-variant);
}
.bv-event-dashboard__attendee-ts { color: var(--on-surface-variant); white-space: nowrap; }
.bv-event-dashboard__attendee-name { font-weight: 600; }
.bv-event-dashboard__attendee-email { word-break: break-word; }
/* Mobile: stack each attendee's tidspunkt / navn / email under one another,
   centred, with a horizontal rule (2/3 of the card width, centred) between
   attendees. The desktop 3-column grid is untouched (rules above). */
@media (max-width: 767px) {
    .bv-event-dashboard__attendee-table { display: block; }
    /* Each attendee's data stays left-aligned; only the divider (below) is
       centred. */
    .bv-event-dashboard__attendee-row { display: block; text-align: left; }
    /* Hide the column header on the stacked layout — must come AFTER the row
       rule above so it wins the same-specificity tie. */
    .bv-event-dashboard__attendee-row--head { display: none; }
    .bv-event-dashboard__attendee-row > span { display: block; }
    .bv-event-dashboard__attendee-ts { white-space: normal; }
    .bv-event-dashboard__attendee-row:not(:last-child)::after {
        content: "";
        display: block;
        width: 66.6667%;
        margin: var(--space-4) auto 0;
        border-top: 1px solid var(--outline-variant);
    }
}

/* Narrow screens: stack the row so nothing overflows. */
@media (max-width: 640px) {
    .bv-event-dashboard__item { grid-template-columns: 1fr; }
    .bv-event-dashboard__actions { justify-self: stretch; flex-wrap: wrap; }
    .bv-event-dashboard__confirm-pop { right: auto; left: 0; }
    .bv-event-dashboard__confirm-pop::before { right: auto; left: 1.75rem; }
}

/* Orange button variant — Eventværkstedet. Completes the accent set the
   event cards use (primary/secondary/tertiary/kulturhus). */
.bv-btn--kulturhus {
    background: var(--kulturhus);
    color: #fff;
}
.bv-btn--kulturhus:hover { filter: brightness(1.15); }

/* Clickable event-card titles (flex-backed cards link to their detail view) */
.bv-event-row__title-link { color: inherit; text-decoration: none; }
.bv-event-row__title-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Calendar list header — heading + the arrangør's contextual create button */
.bv-event-list__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}
/* Arrangør actions on the calendar header: Arrangørpanel + Opret begivenhed
   on one line. */
.bv-event-list__head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Form pages (create / edit / delete): two-column surface — grouped form in
   a house-style card on the left, sticky live event-card preview on the
   right (stacks on narrow screens). */
.bv-event-form__head { max-width: 46rem; margin-bottom: var(--space-8); }
.bv-event-form__head h1 { margin-bottom: var(--space-4); }
/* Full-width preview on top; the form (with its own two frontmatter-defined
   columns) below. */
.bv-event-form__layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}
/* The form's two columns (columns/column layout fields) */
.bv-event-form-card .form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-12);
    align-items: start;
}
@media (max-width: 900px) {
    .bv-event-form-card .form-columns { grid-template-columns: 1fr; }
}

.bv-event-form-card {
    background: var(--surface);
    border-top: 4px solid var(--primary);
    padding: var(--space-10);
}
.bv-event-form-card .form-group,
.bv-event-form-card .form-field { margin-bottom: var(--space-8); }
.bv-event-form-card .form-label label {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: var(--space-2);
}
/* Section headers (display fields in the form definition) */
.bv-event-form-card [data-grav-field="display"] h3 {
    font-family: var(--font-headline);
    font-size: 1.125rem;
    font-weight: 700;
    margin: var(--space-10) 0 var(--space-2);
    padding-top: var(--space-6);
    border-top: 1px solid var(--outline-variant, #ddd);
}
.bv-event-form-card [data-grav-field="display"] p {
    color: var(--outline);
    font-size: 0.9rem;
    margin: 0 0 var(--space-2);
}
/* Visible help texts: JS in partials/event_form.html.twig converts the
   stock templates' data-tooltip attributes (double-escaped — a CSS attr()
   display would show literal &#039;) into these decoded .bv-help-text
   lines under the labels. */
.bv-event-form-card .bv-help-text {
    font-family: var(--font-body, inherit);
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    color: var(--outline);
    margin: 2px 0 var(--space-2);
}
.bv-event-form-card input[type="text"],
.bv-event-form-card textarea,
.bv-event-form-card select {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--outline);
    border-radius: 0;
    background: var(--background, #fff);
    color: var(--on-surface);
    font-family: inherit;
    font-size: 1rem;
}
.bv-event-form-card input:focus-visible,
.bv-event-form-card textarea:focus-visible,
.bv-event-form-card select:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.bv-event-form-card .bv-field--muted { opacity: 0.45; }
/* Client-side per-field validation (blur) */
.bv-event-form-card .bv-input--invalid { border-color: #93000a; outline: 1px solid #93000a; }
.bv-event-form-card .bv-field-error {
    background: #ffdad6;
    color: #93000a;
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    font-weight: 600;
    font-size: 0.85rem;
}
.bv-event-form-card__footer { margin-top: var(--space-8); }

/* Live preview panel (full width above the form) */
.bv-event-preview { max-width: 62rem; }
.bv-event-preview__heading {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--outline);
    margin-bottom: var(--space-4);
}
.bv-event-preview .bv-event-item { pointer-events: none; }
.bv-event-preview .bv-event-item .bv-btn { pointer-events: auto; cursor: default; }
.bv-event-preview__note {
    margin-top: var(--space-4);
    font-size: 0.9rem;
    color: var(--outline);
}

/* ============================================================================
   Inline card editor — /begivenheder/opret (event_create.html.twig).
   The organizer edits the event directly on the card as it will appear in the
   calendar; popovers capture each value. "Industrial Brutalism Refined":
   border-radius 0, hard offset shadows, Space Grotesk structure.
   ============================================================================ */
/* Honeypot anti-spam field — off-screen, never shown or focusable. Global so
   every honeypot (event editor, Form-plugin honeypots) is hidden without an
   inline <style>. */
.form-honeybear {
    position: absolute !important; left: -10000px !important;
    width: 1px; height: 1px; overflow: hidden;
}

.bv-event-editor {
    background-color: #f0f4ff;
    background-image:
        linear-gradient(rgba(26, 28, 28, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 28, 28, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    padding: var(--space-16) 0 6rem;
}
.bv-event-editor__inner { max-width: 70rem; }
.bv-event-editor__head { max-width: 46rem; margin-bottom: var(--space-10); }
.bv-event-editor__title { font-size: 2.75rem; margin-bottom: var(--space-4); }
.bv-event-editor__head p { color: var(--on-surface-variant); }

/* Invisible click-outside layer for popovers. */
.bv-ee-backdrop { position: fixed; inset: 0; z-index: 60; }

/* Control line: draft/public + Gem. */
.bv-ee-controls {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap;
}
.bv-ee-seg { display: inline-flex; }
.bv-ee-seg__btn {
    font-family: var(--font-headline); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; font-size: 0.875rem; padding: 10px 24px;
    border: 1px solid var(--outline); background: #fff; color: var(--on-surface-variant);
    cursor: pointer; border-radius: 0; transition: all 0.15s;
}
.bv-ee-seg__btn:active { transform: scale(0.97); }
.bv-ee-seg__btn.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* The active Kladde toggle matches the dashboard's blue "Kladde" status badge
   (--secondary); Offentlig stays primary green, matching the "Publiceret" badge. */
.bv-ee-seg__btn[data-published="0"].is-active { background: var(--secondary); border-color: var(--secondary); color: var(--on-secondary); }
.bv-ee-seg--sm .bv-ee-seg__btn { padding: 8px 18px; font-size: 0.8rem; }
/* Locked toggle option (e.g. capacity "Nej" is disabled for Drop-in events). */
.bv-ee-seg__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bv-ee-save {
    font-family: var(--font-headline); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; font-size: 0.875rem; padding: 12px 40px;
    border: none; border-radius: 0; cursor: pointer; transition: all 0.15s;
    background: var(--primary); color: #fff;
}
.bv-ee-save:not(:disabled):hover { background: var(--primary-container, #2e6052); }
.bv-ee-save:not(:disabled):active { transform: scale(0.97); }
.bv-ee-save:disabled { background: var(--surface-container-highest); color: var(--outline); cursor: not-allowed; }

/* The editable card — builds on .bv-event-row but heavier chrome, no hover slide. */
.bv-ee-card {
    align-items: center; gap: var(--space-6); padding: var(--space-8) var(--space-6);
    background: #fff; border-left-width: 8px;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.15);
    transition: none; margin-bottom: var(--space-12); position: relative;
}
.bv-ee-card:hover { transform: none; }
.bv-ee-field { position: relative; }

/* Editable-element hover affordance (dashed outline). The transparent
   triggers reset their background/border; the badge + CTA keep their accent
   background (added by bv-badge--*/bv-btn--*), so they are excluded here. */
.bv-ee-datebtn, .bv-ee-line, .bv-ee-metaval, .bv-ee-capchip {
    cursor: pointer; background: none; border: none; font: inherit;
}
.bv-ee-badge, .bv-ee-cta { cursor: pointer; }
.bv-ee-datebtn:hover, .bv-ee-badge:hover, .bv-ee-line:hover,
.bv-ee-metaval:hover, .bv-ee-cta:hover, .bv-ee-capchip:hover,
.bv-ee-title:hover, .bv-ee-desc:hover {
    outline: 2px dashed var(--outline); outline-offset: 2px;
}
.bv-ee-title:focus, .bv-ee-desc:focus { outline: 2px dashed var(--secondary); outline-offset: 2px; }

/* Date block button. */
.bv-ee-datebtn {
    min-width: 4.5rem; text-align: center; display: flex; flex-direction: column;
    align-items: center; gap: 2px; padding: 8px; font-family: var(--font-headline); font-weight: 700; line-height: 1;
}
.bv-ee-datebtn .bv-event-row__date-day { font-size: 1.75rem; }

/* Group badge (button). Empty = dashed ghost. */
.bv-ee-badge {
    display: inline-block; border: none; font-family: var(--font-headline); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem;
    padding: 4px 12px; margin-bottom: var(--space-1); color: #fff;
}
.bv-ee-badge--empty {
    background: transparent !important; color: var(--outline);
    border: 2px dashed var(--outline); font-style: italic; font-weight: 400; letter-spacing: 0.05em;
}

/* Title input (transparent, in-card). */
.bv-ee-title {
    box-sizing: border-box; width: 100%; border: none; background: transparent;
    margin: 0; padding: 4px 0; font-family: var(--font-headline); font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--tracking-tight); font-size: 1.5rem;
    line-height: 1.15; color: var(--on-surface); cursor: text;
}
.bv-ee-title::placeholder { color: var(--outline); font-style: italic; font-weight: 400; }

/* Time / location clickable lines. */
.bv-ee-line {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px;
    font-family: var(--font-headline); font-weight: 700; font-size: 0.875rem; color: var(--on-surface);
}
.bv-ee-line .material-symbols-outlined { font-size: 16px; color: var(--on-surface-variant); }
.bv-ee-line--ghost { color: var(--outline); font-style: italic; font-weight: 400; }
#ee-loc-line { font-family: 'Work Sans', sans-serif; font-weight: 400; }

/* Description textarea (transparent). */
.bv-ee-desc {
    box-sizing: border-box; width: 100%; border: none; background: transparent; margin: 0;
    padding: 2px 0; font-family: 'Work Sans', sans-serif; font-size: 0.875rem; line-height: 1.5;
    color: var(--on-surface-variant); resize: none; cursor: text;
}
.bv-ee-desc::placeholder { color: var(--outline); font-style: italic; }

/* Meta column. */
.bv-ee-meta { min-width: 10rem; gap: 10px; }
.bv-ee-metaval { font-family: var(--font-headline); font-weight: 700; font-size: 0.95rem; line-height: 1.2; padding: 2px 4px; }
.bv-ee-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
    min-width: 188px; /* same fixed size as the live Deltag/Interesseret button */
    font-family: var(--font-headline); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; font-size: 0.875rem; padding: 8px 24px; color: #fff; border: none;
}
/* Preview the live card's checkbox affordance (always the unmarked default in
   the editor). */
.bv-ee-cta::before {
    font-family: 'Material Symbols Outlined';
    content: 'check_box_outline_blank';
    text-transform: none; letter-spacing: normal; font-weight: normal;
    font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga';
    font-size: 1.35em; line-height: 1; flex: none;
}
/* Drop-in locks the CTA to "Interesseret": still readable, but clearly not
   changeable. */
.bv-ee-cta:disabled { cursor: not-allowed; opacity: 0.9; }
.bv-ee-capchip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; padding: 2px 4px; color: var(--on-surface-variant); }
.bv-ee-capchip .material-symbols-outlined { font-size: 17px; }
.bv-ee-ghost { color: var(--outline) !important; font-style: italic; font-weight: 400; }

/* Popovers. */
.bv-ee-pop {
    position: absolute; top: 100%; margin-top: 12px; z-index: 70; background: #fff;
    border: 2px solid var(--on-surface); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
    padding: 20px; width: max-content; max-width: min(24rem, 90vw); text-align: left;
}
.bv-ee-pop--left { left: 0; }
.bv-ee-pop--right { right: 0; }
.bv-ee-pop__label {
    display: block; font-family: var(--font-headline); font-weight: 700; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 4px;
}
.bv-ee-pop__help { margin: 0 0 12px; font-size: 0.85rem; line-height: 1.4; color: var(--outline); }
.bv-ee-popinput {
    box-sizing: border-box; width: 100%; padding: 12px; border: 1px solid var(--outline);
    border-radius: 0; background: #fff; color: var(--on-surface); font-size: 1rem;
}
.bv-ee-popinput--num { width: 96px; }
.bv-ee-dateinput { width: 170px; }

/* Option lists (group / type / cta). */
.bv-ee-optlist { display: flex; flex-direction: column; gap: 8px; }
.bv-ee-opt {
    display: block; width: 100%; text-align: left; font-family: var(--font-headline); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.875rem; padding: 12px 16px;
    border: 1px solid var(--outline-variant); cursor: pointer; border-radius: 0; background: #fff;
    color: var(--on-surface); transition: all 0.15s;
}
.bv-ee-opt:hover { background: var(--surface-container-high); }
.bv-ee-groupopt { border-left: 8px solid var(--opt-accent, var(--primary)); }
.bv-ee-groupopt.is-active { background: var(--surface-container-high); }
.bv-ee-typeopt.is-active, .bv-ee-ctaopt.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Location chips. */
.bv-ee-chips { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.bv-ee-chip {
    font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    font-size: 0.8rem; padding: 8px 14px; border: 1px solid var(--outline-variant); background: #fff;
    color: var(--on-surface); cursor: pointer; border-radius: 0; transition: all 0.15s;
}
.bv-ee-chip:hover { background: var(--surface-container-high); }

/* Time picker. */
.bv-ee-timegrid { display: flex; gap: 16px; }
.bv-ee-timefield { position: relative; width: 128px; }
.bv-ee-timefield > div:first-child, .bv-ee-timefield { }
.bv-ee-timefield { display: flex; flex-direction: column; }
.bv-ee-timeinput {
    box-sizing: border-box; width: 100%; padding: 12px 4px 12px 12px; border: 1px solid var(--outline);
    border-right: none; background: #fff; color: var(--on-surface); font-size: 1rem;
}
.bv-ee-timefield { border: none; }
.bv-ee-timefield > .bv-ee-timeinput { border-right: none; }
.bv-ee-timefield { }
.bv-ee-timeicon {
    position: absolute; top: 0; right: 0; height: 100%; display: flex; align-items: center;
    padding: 0 8px; border: 1px solid var(--outline); border-left: none; background: #fff;
    cursor: pointer; color: var(--on-surface-variant);
}
.bv-ee-timeicon .material-symbols-outlined { font-size: 20px; }
.bv-ee-timelist {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 80;
    background: #fff; border: 2px solid var(--on-surface); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
    height: 240px; overflow: hidden;
}
.bv-ee-timelist__grid { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.bv-ee-timelist__col { overflow-y: auto; min-height: 0; }
.bv-ee-timelist__col--hours { border-right: 1px solid var(--outline-variant); }
.bv-ee-timelist__opt {
    padding: 10px 16px; text-align: center; font-family: var(--font-headline); font-weight: 700;
    font-size: 0.95rem; cursor: pointer;
}
.bv-ee-timelist__opt:hover { background: var(--primary); color: #fff; }
.bv-ee-timelist__opt.is-sel { background: var(--primary); color: #fff; }

/* Capacity count field disabled state. */
.bv-ee-cap-count { margin-top: 16px; }
.bv-ee-cap-count.is-disabled { opacity: 0.45; }

/* Details panel. */
.bv-ee-details { background: var(--surface); border-top: 4px solid var(--primary); padding: var(--space-10); }
.bv-ee-details__title { margin: 0 0 8px; font-family: var(--font-headline); font-weight: 700; font-size: 1.125rem; }
.bv-ee-details__help { font-size: 0.85rem; line-height: 1.4; color: var(--outline); margin: 2px 0 16px; }
.bv-ee-details .tox-tinymce { border: 1px solid var(--outline); }
.bv-ee-foot { margin-top: var(--space-8); }

/* ── Responsive: stacked card, popovers open upward ── */
@media (max-width: 720px) {
    .bv-event-editor { padding: var(--space-8) 0 3rem; }
    .bv-event-editor__title { font-size: 1.875rem; }
    .bv-ee-card {
        flex-direction: column; align-items: stretch; gap: 10px;
        padding: var(--space-5) var(--space-4); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15);
    }
    .bv-ee-title { font-size: 1.25rem; }
    /* date + badge on one row */
    .bv-ee-card > .bv-event-row__date { flex-direction: row; align-items: flex-start; }
    /* Stack the meta fields vertically on mobile — begivenhedstype, the
       Deltag/Interesseret CTA preview, and antal pladser sit one above the
       other (over hinanden) rather than sharing a wrapping row. */
    .bv-ee-meta {
        flex-direction: column; align-items: flex-start; min-width: 0;
        border-top: 1px solid var(--surface-container-highest); padding-top: 10px; text-align: left;
    }
    /* Meta-row popovers open upward to stay on screen. */
    .bv-ee-meta .bv-ee-pop { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 12px; }
    /* The meta fields sit at the left of the (stacked) meta column, so their
       right-anchored popovers (begivenhedstype, antal pladser) spilled off the
       left edge — anchor them to the left here and clamp width so they stay
       fully on screen. */
    .bv-ee-meta [data-ee-pop="event-type"],
    .bv-ee-meta [data-ee-pop="capacity"] { left: 0; right: auto; max-width: calc(100vw - var(--space-8)); }
    .bv-ee-details { padding: var(--space-6) var(--space-4); }
}

/* =============================================================================
   Account self-service (/konto) — account_self_service_specification.md §5.
   The page reuses the shared .bv-auth-card identity; the --account modifier
   (set via the auth_card_class embed variable) widens the card and drops the
   brand image so the stacked operation sections get the full width.
   ============================================================================= */
.bv-auth-card--account .bv-auth-card__image { display: none; }
.bv-auth-card--account .bv-auth-card__body { width: 100%; }
.bv-auth-card--account { max-width: 56rem; }

.bv-account-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}
.bv-account-section {
    padding-top: var(--space-8);
    border-top: 1px solid var(--surface-container-highest);
    /* Deep links from the header dropdown land here; keep the heading clear
       of the viewport edge. */
    scroll-margin-top: 6rem;
}
.bv-account-section:first-child { border-top: none; padding-top: 0; }
.bv-account-section__heading {
    font-size: 1.25rem;
    color: var(--primary);
    margin-bottom: var(--space-4);
}
.bv-account-section__intro { margin-bottom: var(--space-4); }
.bv-account-section__hint { font-size: 0.9rem; color: var(--outline); }

.bv-account-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
    max-width: 28rem;
}
.bv-account-form__field { width: 100%; }
.bv-account-form__field .bv-input { width: 100%; margin-top: var(--space-2); }
.bv-account-form__row { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }

/* Pending-state notice (unconfirmed email change / open access request). */
.bv-account-pending {
    background: #fff3cd;
    color: #664d03;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: 0.95rem;
}

.bv-account-roles {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    margin: 0 0 var(--space-4);
}
.bv-account-roles__item {
    background: var(--surface-variant);
    color: var(--on-surface);
    padding: var(--space-1) var(--space-3);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Destructive action — the delete section's submit. */
.bv-btn--danger { background: var(--error); color: #fff; }
.bv-btn--danger:hover { background: #93000a; color: #fff; }
.bv-account-section--danger .bv-account-section__heading { color: var(--error); }
.bv-account-confirm {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

/* Header account dropdown (account_self_service). The chip keeps the
   .bv-nav__user identity; the --menu modifier strips button chrome. */
.bv-nav__account { position: relative; }
.bv-nav__user--menu {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.bv-account-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    min-width: 13rem;
    background: var(--surface-container-lowest);
    box-shadow: 0 0.5rem 1.25rem rgba(26, 28, 28, 0.18);
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0;
    z-index: 60;
}
.bv-account-menu__item {
    display: block;
    padding: var(--space-2) var(--space-4);
    color: var(--on-surface);
    font-size: 0.9rem;
    white-space: nowrap;
}
.bv-account-menu__item:hover,
.bv-account-menu__item:focus-visible {
    background: var(--surface-variant);
    outline: none;
}
.bv-account-menu__item--danger { color: var(--error); }

/* Mobile overlay: account entries render inline under the user name. */
.bv-mobile-menu__link--account {
    padding-left: var(--space-8);
    font-size: 0.95rem;
}

/* ==========================================================================
   Access-request result page (/konto/access-request/approve|reject)
   Fact sheet for the admin after acting on a mail link.
   ========================================================================== */
.bv-ar-result {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.bv-ar-result__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-6);
    margin: 0;
}

.bv-ar-result__facts dt {
    color: var(--on-surface-variant);
    font-weight: 600;
}

.bv-ar-result__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.bv-ar-result__actions {
    margin-top: var(--space-6);
}

@media (max-width: 480px) {
    .bv-ar-result__facts {
        grid-template-columns: 1fr;
        gap: var(--space-1) 0;
    }
    .bv-ar-result__facts dd {
        margin-bottom: var(--space-3);
    }
}