/* ==========================================================================
   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-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-8);
}
.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;
}
.bv-register-card .form-messages { margin-bottom: var(--space-6); }
.bv-register-card .form-messages .alert {
    padding: var(--space-4);
    font-weight: 600;
    font-size: 0.875rem;
}
.bv-register-card .form-messages .alert-success {
    background: var(--primary-fixed);
    color: var(--primary);
}
.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 {
    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 {
    width: 50%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.bv-login-overlay__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.4);
}
.bv-login-overlay__image-content {
    position: relative;
    z-index: 1;
    padding: var(--space-12);
}

.bv-login-overlay__form {
    width: 50%;
    padding: var(--space-12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
}

/* 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 ---------- */
.bv-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.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-4);
    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);
}
.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); }

.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); }

/* 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));
    transition: transform 0.2s ease;
}
.bv-event-row:hover { transform: translateX(0.25rem); }
/* 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; }

/* 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__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; }

/* 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; }
    .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; }

.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 */
    .bv-display, .bv-display[style*="font-size"] { font-size: clamp(1.75rem, 9vw, 5rem) !important; width: 100%; }
    .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-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; }
}