/* ============================================================================
   RPG PLOTS — Handlungsstränge & Story-Arcs
   LA MIDNIGHT BRUTALIST THEME
   Author: Rogue RPG BB

   Ablöse der alten tborder/trow-Tabellen durch Brutalist-Cards.
   Klassen-Prefix: .lam-plots__*  (BEM)

   Variablen aus 00-settings.css. Keine hardcoded Werte.
   ============================================================================ */


/* ============================================
   NAVIGATION
   Plot-Navi oberhalb jeder View (Alle / Meine / Vorschläge / Neuer Plot)
   ============================================ */
.lam-plots__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--text-dark);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.lam-plots__navlink {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s var(--ease);
    position: relative;
    padding: var(--space-xs) 0;
}

.lam-plots__navlink:hover,
.lam-plots__navlink--active {
    color: var(--accent);
}

/* Aktiver Link bekommt Akzent-Strich unten */
.lam-plots__navlink--active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--accent);
}

/* Spacer schiebt CTA an den rechten Rand */
.lam-plots__nav-spacer {
    flex: 1;
}

/* "Neuer Plot"-CTA — gefüllt, optisch klar vom Rest abgesetzt */
.lam-plots__nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent);
    color: var(--bg);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid var(--accent);
    transition: all 0.2s var(--ease);
}

.lam-plots__nav-cta:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--bg);
}


/* ============================================
   HEADER mit Ghost-Wording
   Datenattribut "data-ghost" steuert das große Outline-Wort rechts
   Konsistent mit Showteam / Places / Joblist
   ============================================ */
.lam-plots__header {
    position: relative;
    padding: var(--space-2xl) 0;
    margin-bottom: var(--space-xl);
    border-bottom: 1px solid var(--text-dark);
    overflow: hidden;
}

/* Ghost-Wort rechts — wird per data-ghost gesetzt,
   damit jede View ein eigenes Wort haben kann */
.lam-plots__header::before {
    content: attr(data-ghost);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: clamp(8rem, 18vw, 14rem);
    line-height: 0.8;
    color: transparent;
    /* --ghost-stroke ist semi-transparent → kein opacity nötig */
    -webkit-text-stroke: 1px var(--ghost-stroke);
    pointer-events: none;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.lam-plots__title-wrap {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.lam-plots__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--accent);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.lam-plots__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
    color: var(--text);
}

.lam-plots__title .accent {
    color: var(--accent);
}

.lam-plots__intro {
    font-size: 0.95rem;
    color: var(--text-muted);
    max-width: 580px;
    line-height: 1.7;
}

/* Breadcrumb-Zeile (nur in Detail-Views) */
.lam-plots__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.lam-plots__breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

.lam-plots__breadcrumb a:hover {
    color: var(--accent);
}

.lam-plots__breadcrumb i {
    font-size: 0.5rem;
    color: var(--text-dark);
}


/* ============================================
   FILTER-BAR (Overview)
   Drei Selects + Suche + Submit, alles in einer Zeile
   ============================================ */
.lam-plots__filter {
    padding: var(--space-md) 0;
    margin-bottom: var(--space-xl);
    border-top: 1px solid var(--text-dark);
    border-bottom: 1px solid var(--text-dark);
}

.lam-plots__filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
}

.lam-plots__filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.lam-plots__filter-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* Suchfeld darf wachsen, Selects bleiben fix */
.lam-plots__filter-group--search {
    flex: 1;
    min-width: 200px;
}


/* ============================================
   FORM-CONTROLS (Inputs, Selects, Textareas)
   Einheitlicher Stil für alle Formulare
   ============================================ */
.lam-plots__input,
.lam-plots__select,
.lam-plots__textarea {
    padding: 0.55rem 0.85rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--text-dark);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    transition: border-color 0.3s var(--ease);
    width: 100%;
}

.lam-plots__input:focus,
.lam-plots__select:focus,
.lam-plots__textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.lam-plots__textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
    padding: 0.75rem 0.85rem;
}

/* Select mit eigenem Pfeil (statt Browser-Default) */
.lam-plots__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    cursor: pointer;
}

/* Checkbox-Zeile inkl. Label */
.lam-plots__checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text);
}


/* ============================================
   BUTTONS — Brutalist (allgemein)
   ============================================ */
.lam-plots__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.7rem 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--text-dark);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all 0.3s var(--ease);
    line-height: 1.2;
}

.lam-plots__btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Primary — gefüllt rot */
.lam-plots__btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

.lam-plots__btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--bg);
}

/* Klein — für Inline-Aktionen */
.lam-plots__btn--sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.55rem;
}

/* Erfolgs-Button (Approve etc.) */
.lam-plots__btn--success {
    border-color: var(--success);
    color: var(--success);
}

.lam-plots__btn--success:hover {
    background: var(--success);
    color: var(--bg);
}

/* Gefahren-Button (Delete, Reject, Leave) */
.lam-plots__btn--danger {
    border-color: var(--error);
    color: var(--error);
}

.lam-plots__btn--danger:hover {
    background: var(--error);
    color: var(--bg);
}


/* ============================================
   PLOT-LISTE (Overview / Myplots)
   Statt Tabelle: gestapelte Karten mit Akzent-Strich beim Hover
   ============================================ */
.lam-plots__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.lam-plots__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-lg);
    align-items: center;
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--text-dark);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

/* Akzentstrich oben bei Hover — läuft von links nach rechts */
.lam-plots__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.4s var(--ease);
}

.lam-plots__item:hover {
    border-color: var(--accent-dim);
    background: rgba(255, 68, 34, 0.03);
}

.lam-plots__item:hover::before {
    width: 100%;
}

.lam-plots__item-main {
    min-width: 0;
}

/* Meta-Zeile oben: Typ-Badge + Datumsbereich + ggf. Geheim-Marker */
.lam-plots__item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.lam-plots__item-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--text);
    transition: color 0.3s var(--ease);
    margin-bottom: var(--space-sm);
    word-break: break-word;
}

.lam-plots__item:hover .lam-plots__item-title {
    color: var(--accent);
}

/* Unter-Zeile: kleine Stat-Counter (Teilnehmer, Threads, Updates) */
.lam-plots__item-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lam-plots__item-stats strong {
    color: var(--accent);
    font-weight: 700;
}

/* Rechtsbündige Marke (Status-Badge groß) */
.lam-plots__item-aside {
    text-align: right;
    flex-shrink: 0;
}


/* ============================================
   BADGES (Typ, Status, Geheim, Lead)
   Gemeinsame Basis, Varianten via Modifier-Klasse
   ============================================ */
.lam-plots__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.25rem 0.6rem;
    border: 1px solid currentColor;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
}

/* Typ-Varianten — Outline-Stil, nur Farbe wechselt */
.lam-plots__badge--type-main      { color: var(--accent); }
.lam-plots__badge--type-side      { color: var(--info); }
.lam-plots__badge--type-personal  { color: var(--text-muted); }
.lam-plots__badge--type-event     { color: var(--warning); }

/* Status-Varianten — gefüllt mit semi-transparenter Box */
.lam-plots__badge--status {
    padding: 0.3rem 0.75rem;
}

.lam-plots__badge--status-planned   { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.lam-plots__badge--status-active    { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.lam-plots__badge--status-paused    { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.lam-plots__badge--status-completed { background: var(--info-bg);    color: var(--info);    border-color: var(--info); }
.lam-plots__badge--status-archived  { background: rgba(255,255,255,0.03); color: var(--text-dim); border-color: var(--text-dark); }

/* Geheim-Marker (gestricheltes Outline-Badge) */
.lam-plots__badge--secret {
    color: var(--accent);
    border-style: dashed;
}

/* Lead-Marker (Plot-Leitung) — kompakt, damit nicht button-artig wirkt */
.lam-plots__badge--lead {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
    font-size: 0.5rem;
    padding: 0.2rem 0.5rem;
    flex-shrink: 0;
    align-self: flex-start;
}


/* ============================================
   DETAIL — Banner
   Optionales Hero-Bild über dem Kopfblock
   ============================================ */
.lam-plots__banner {
    margin-bottom: var(--space-xl);
    border: 1px solid var(--text-dark);
    overflow: hidden;
}

.lam-plots__banner img {
    width: 100%;
    height: auto;
    display: block;
}


/* ============================================
   DETAIL — Kopfblock
   Badges + Datum/Parent + Edit/Delete-Aktionen
   ============================================ */
.lam-plots__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    margin-bottom: var(--space-xl);
    border-bottom: 1px solid var(--text-dark);
}

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

/* Badge-Reihe direkt unter dem Titel */
.lam-plots__head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.lam-plots__head-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

/* Datumsbereich + Eltern-Plot-Verweis als Mono-Zeile */
.lam-plots__head-sub {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lam-plots__head-sub a {
    color: var(--accent);
    text-decoration: none;
}

.lam-plots__head-sub a:hover {
    text-decoration: underline;
}

/* Aktionen rechts (Edit / Delete) */
.lam-plots__head-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}


/* ============================================
   DETAIL — Beschreibung & Event-Block
   ============================================ */
.lam-plots__description {
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--text-dark);
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: var(--space-xl);
}

/* Event-Box — nur sichtbar bei plot_type == event */
.lam-plots__event {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
    padding: var(--space-lg);
    background: rgba(251, 191, 36, 0.04);
    border: 1px solid var(--warning);
    margin-bottom: var(--space-xl);
}

.lam-plots__event-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.25em;
    color: var(--warning);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.lam-plots__event-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text);
}


/* ============================================
   DETAIL — Sektion-Heading (Teilnehmer / Threads / Updates / Proposals)
   ============================================ */
.lam-plots__section {
    margin-bottom: var(--space-2xl);
}

.lam-plots__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--text-dark);
}

.lam-plots__section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--text);
}

.lam-plots__section-count {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--accent);
    letter-spacing: 0.15em;
}

/* Action-Slot rechts (z.B. "Verlassen" / "Beitreten" / "Update +") */
.lam-plots__section-action {
    margin-left: auto;
}


/* ============================================
   DETAIL — Teilnehmer-Grid
   Karten mit Name, Rolle, Lead-Badge + Aktionen
   ============================================ */
.lam-plots__participants {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-sm);
}

.lam-plots__participant {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--text-dark);
    transition: border-color 0.2s var(--ease);
}

.lam-plots__participant:hover {
    border-color: var(--accent-dim);
}

/* Head-Zeile: Name links, Lead-Badge oben rechts */
.lam-plots__participant-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.lam-plots__participant-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text);
    word-break: break-word;
    flex: 1;
    min-width: 0;
}

/* Member-Link erbt Größe/Font vom Wrapper — Usergroup-Farbe bleibt */
.lam-plots__participant-name a,
.lam-plots__participant-name span {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

.lam-plots__participant-name a:hover {
    color: var(--accent);
}

.lam-plots__participant-role {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--text-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    word-break: break-word;
}

/* Action-Bar unten: Buttons in eigener Zeile, mit Wrap für lange Labels */
.lam-plots__participant-actions {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--text-dark);
}

/* Inline-Forms in der Action-Bar: kein extra Margin, Button füllt Form */
.lam-plots__participant-actions .lam-plots__inline-form {
    flex: 1 1 auto;
    min-width: 0;
}

.lam-plots__participant-actions .lam-plots__btn {
    width: 100%;
    justify-content: center;
    padding: 0.4rem 0.6rem;
    font-size: 0.5rem;
    letter-spacing: 0.15em;
}


/* ============================================
   DETAIL — Teilnehmer-Hinzufügen-Form
   Kompakte Inline-Form unter dem Grid
   ============================================ */
.lam-plots__form-card {
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--text-dark);
    margin-top: var(--space-lg);
}

.lam-plots__form-card-title {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.lam-plots__form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.lam-plots__form-row--full {
    grid-column: 1 / -1;
}

.lam-plots__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.lam-plots__field-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    text-transform: uppercase;
}

/* Hint hinter Label (z.B. "(optional)") */
.lam-plots__field-hint {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-top: var(--space-xs);
    text-transform: none;
}

/* Submit-Reihe — Buttons nebeneinander, ggf. mit Hinweis */
.lam-plots__form-submit {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding-top: var(--space-md);
    margin-top: var(--space-md);
    border-top: 1px solid var(--text-dark);
}

/* Event-Block im Plot-Form — wird via JS ein-/ausgeblendet je nach Typ */
.lam-plots__event-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px dashed var(--text-dark);
}


/* ============================================
   DETAIL — Thread-Liste
   Verknüpfte Threads + Trennen-Action
   ============================================ */
.lam-plots__threads {
    display: flex;
    flex-direction: column;
}

.lam-plots__thread {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--text-dark);
    border-bottom: 0;
    transition: background 0.2s var(--ease);
}

.lam-plots__thread:last-child {
    border-bottom: 1px solid var(--text-dark);
}

.lam-plots__thread:hover {
    background: rgba(255, 68, 34, 0.03);
}

.lam-plots__thread-title {
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s var(--ease);
    word-break: break-word;
    flex: 1;
}

.lam-plots__thread-title:hover {
    color: var(--accent);
}


/* ============================================
   DETAIL — Updates (Logbuch-Stil)
   Vertikale Liste mit Verfasser-Meta und linkem Akzent-Strich
   ============================================ */
.lam-plots__updates {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.lam-plots__update {
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--text-dark);
    border-left: 3px solid var(--accent);
}

.lam-plots__update-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

.lam-plots__update-content {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: var(--space-md);
}

.lam-plots__update-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--text-dark);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--text-dim);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.lam-plots__update-meta a {
    color: var(--accent);
    text-decoration: none;
}

.lam-plots__update-actions {
    display: flex;
    gap: var(--space-xs);
    margin-left: auto;
}


/* ============================================
   PROPOSAL-KARTE
   Vorgeschlagener Plot mit Approve/Reject-Aktionen
   ============================================ */
.lam-plots__proposal {
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--text-dark);
    margin-bottom: var(--space-md);
}

.lam-plots__proposal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.lam-plots__proposal-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--text);
    flex: 1;
    min-width: 0;
}

.lam-plots__proposal-meta {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.lam-plots__proposal-meta a {
    color: var(--accent);
    text-decoration: none;
}

.lam-plots__proposal-description {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px dashed var(--text-dark);
}

.lam-plots__proposal-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}


/* ============================================
   EMPTY STATE — keine Plots / keine Teilnehmer / keine Threads
   ============================================ */
.lam-plots__empty {
    padding: var(--space-xl);
    text-align: center;
    border: 1px dashed var(--text-dark);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/* ============================================
   NOTICE-BOX (Thread-Notice im Showthread)
   Hinweis "Dieser Thread gehört zu Plot X"
   ============================================ */
.lam-plots__notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
    background: rgba(255, 68, 34, 0.04);
    border: 1px solid var(--accent-dim);
    border-left: 3px solid var(--accent);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--text);
    text-transform: uppercase;
}

.lam-plots__notice a {
    color: var(--accent);
    text-decoration: none;
}

.lam-plots__notice a:hover {
    text-decoration: underline;
}


/* ============================================
   NEWTHREAD/EDITPOST — Plot-Auswahl-Box
   Auswahl welchem Plot ein Thread zugeordnet ist
   ============================================ */
.lam-plots__plot-picker {
    padding: var(--space-md) var(--space-lg);
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--text-dark);
    margin: var(--space-md) 0;
}

.lam-plots__plot-picker-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}


/* ============================================
   PROFIL-INTEGRATION (rpgplots_profile)
   Anzeige der Plot-Mitgliedschaften auf der Profilseite

   Profile-Container im Theme erzwingt teilweise text-align: center
   und große Heading-Styles — daher höhere Spezifität via :where()-frei
   und explizite Resets pro Element.
   ============================================ */
.lam-plots__profile {
    padding: var(--space-md) 0;
    text-align: left;
}

.lam-plots__profile-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    color: var(--accent);
    text-transform: uppercase;
    margin: 0 0 var(--space-md) 0;
    text-align: left;
    line-height: 1.4;
}

.lam-plots__profile-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    margin: 0;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}

/* Link im Profile-Item: Display-Font, normalsize — überschreibt Profile-h-Styles */
.lam-plots__profile-item a {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text);
    text-decoration: none;
    text-transform: none;
    transition: color 0.2s var(--ease);
}

.lam-plots__profile-item a:hover {
    color: var(--accent);
}


/* ============================================
   INLINE-FORM (Mini-Formulare wie Join/Leave/Approve)
   Buttons werden direkt im Fluss eingebettet
   ============================================ */
.lam-plots__inline-form {
    display: inline-block;
    margin: 0;
}


/* ============================================
   FEHLER-MELDUNG (Inline-Errors über Formularen)
   ============================================ */
.lam-plots__error {
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
    background: var(--error-bg);
    border: 1px solid var(--error);
    color: var(--error);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 720px) {
    .lam-plots__item {
        grid-template-columns: 1fr;
    }
    .lam-plots__item-aside {
        text-align: left;
    }
    .lam-plots__head {
        flex-direction: column;
    }
    .lam-plots__head-actions {
        width: 100%;
    }
    .lam-plots__filter-form > * {
        width: 100%;
    }
    .lam-plots__filter-group--search {
        min-width: 0;
    }
    .lam-plots__form-grid {
        grid-template-columns: 1fr;
    }
    .lam-plots__proposal-actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .lam-plots__participants {
        grid-template-columns: 1fr;
    }
    .lam-plots__nav {
        font-size: 0.6rem;
    }
}