/**
 * FileName: assets/css/caravan.css
 * Version: 3.0.2
 * Written based on the version: 3.0.1
 * Purpose: Caravan skin — transparent surfaces, theme-adaptive text via
 *          currentColor derivation, host-theme isolation, board/list scoping,
 *          accordion, timeline layouts, canvas modal, follow UI.
 *
 * Decision Log:
 *   - 3.0.2 FIX: Board inner wrapper rules (.asun-caravan-body) are now
 *                scoped under .asun-caravan — the unscoped rule matched the
 *                host <body> (same class name) and turned the whole site into
 *                a horizontal flex row (header / content / footer side-by-side).
 *   - 3.0.2 NEW: Hard body reset for every plugin-owned body class
 *                (asun-caravan-shell / -body / -page): display:block forced.
 *   - 3.0.1 FIX: Container geometry removed; body class separated from
 *                content wrapper class.
 *
 * Dependencies: tokens.css
 * Impact Map: templates/caravan-board.php, templates/caravan-list.php
 * Used By: Frontend Caravan UI
 * Namespace-location: CSS component (.asun-caravan-*)
 * Owner: A-SUN Studio
 */

/* ═══════════════════════════════════════════════════════════
   ROOT LAYOUT TOKENS
═══════════════════════════════════════════════════════════ */
:root {
    --caravan-radius: 0 7px 0 7px;
    --caravan-gap: 16px;
}

/* Host-body hard reset: the plugin adds one of these classes to
   <body>. Body must ALWAYS stay a normal block container, no
   matter what component classes share the same name. */
body.asun-caravan-shell,
body.asun-caravan-body,
body.asun-caravan-page {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════
   TRANSPARENT CORE
═══════════════════════════════════════════════════════════ */
.asun-caravan-page,
.asun-caravan,
.asun-caravan-list {
    direction: rtl;
    color: inherit;
    background: transparent;

    /* fallbacks for browsers without color-mix */
    --caravan-line: rgba(128, 128, 128, 0.22);
    --caravan-line-strong: rgba(128, 128, 128, 0.32);
    --caravan-surface: rgba(128, 128, 128, 0.08);
    --caravan-surface-soft: rgba(128, 128, 128, 0.045);
    --caravan-card: rgba(128, 128, 128, 0.06);
    --caravan-shadow: rgba(0, 0, 0, 0.10);

    /* currentColor-derived layers */
    --caravan-line: color-mix(in srgb, currentColor 16%, transparent);
    --caravan-line-strong: color-mix(in srgb, currentColor 26%, transparent);
    --caravan-surface: color-mix(in srgb, currentColor 8%, transparent);
    --caravan-surface-soft: color-mix(in srgb, currentColor 4%, transparent);
    --caravan-card: color-mix(in srgb, currentColor 6%, transparent);
    --caravan-shadow: color-mix(in srgb, currentColor 10%, transparent);

    /* solid surface — only where opacity is mandatory (modal, options) */
    --caravan-solid: #f6f6f6;
}

.asun-caravan,
.asun-caravan-list {
    margin: 24px 0;
}

.asun-caravan-notice {
    padding: 16px;
    border: 1px dashed var(--caravan-line-strong);
    border-radius: var(--caravan-radius);
    background: transparent;
    color: inherit;
}

.asun-caravan-muted {
    opacity: 0.72;
    font-size: 0.86rem;
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════
   DARK-CONTEXT TEXT FALLBACK — text only, never backgrounds.
═══════════════════════════════════════════════════════════ */
body.dark-mode .asun-caravan-page,
body.dark-mode .asun-caravan,
body.dark-mode .asun-caravan-list,
body.dark .asun-caravan-page,
body.dark .asun-caravan,
body.dark .asun-caravan-list,
html.dark .asun-caravan-page,
html.dark .asun-caravan,
html.dark .asun-caravan-list,
body.ahura-dark-mode .asun-caravan-page,
body.ahura-dark-mode .asun-caravan,
body.ahura-dark-mode .asun-caravan-list,
body.ahura-dark .asun-caravan-page,
body.ahura-dark .asun-caravan,
body.ahura-dark .asun-caravan-list,
.asun-caravan-page--dark,
.asun-caravan-page--dark .asun-caravan,
.asun-caravan-page--dark .asun-caravan-list {
    color: #e8e8e8;
    --caravan-solid: #232323;
}

/* ═══════════════════════════════════════════════════════════
   HIDDEN STATES
═══════════════════════════════════════════════════════════ */
.asun-caravan-page [hidden],
.asun-caravan [hidden],
.asun-caravan-list [hidden] {
    display: none !important;
}

.asun-caravan-page .is-hidden,
.asun-caravan .is-hidden,
.asun-caravan-list .is-hidden {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   BOARD THEME VARIANTS — subtle tints only
═══════════════════════════════════════════════════════════ */
.asun-caravan {
    border: 1px solid var(--caravan-line);
    border-radius: var(--caravan-radius);
    overflow: hidden;
}

.asun-caravan--theme-light {
    background: color-mix(in srgb, #ffffff 5%, transparent);
}

.asun-caravan--theme-dark {
    background: color-mix(in srgb, #000000 12%, transparent);
}

.asun-caravan--theme-accent {
    background: color-mix(in srgb, var(--color-accent, #2d5c4d) 7%, transparent);
}

.asun-caravan-list {
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════
   SHARED CONTROLS
═══════════════════════════════════════════════════════════ */
.asun-caravan input[type="text"],
.asun-caravan input[type="number"],
.asun-caravan input[type="search"],
.asun-caravan textarea,
.asun-caravan select,
.asun-caravan-list input[type="text"],
.asun-caravan-list input[type="number"],
.asun-caravan-list input[type="search"],
.asun-caravan-list textarea,
.asun-caravan-list select,
.asun-caravan-page input[type="text"],
.asun-caravan-page input[type="number"],
.asun-caravan-page input[type="search"],
.asun-caravan-page textarea,
.asun-caravan-page select {
    width: 100%;
    font: inherit;
    color: inherit;
    background-color: var(--caravan-surface-soft);
    border: 1px solid var(--caravan-line-strong);
    border-radius: var(--caravan-radius);
    padding: 10px 12px;
    box-sizing: border-box;
}

.asun-caravan select option,
.asun-caravan-list select option,
.asun-caravan-page select option {
    background-color: var(--caravan-solid, #f6f6f6);
    color: inherit;
}

.asun-caravan input::placeholder,
.asun-caravan textarea::placeholder,
.asun-caravan-list input::placeholder,
.asun-caravan-list textarea::placeholder,
.asun-caravan-page input::placeholder,
.asun-caravan-page textarea::placeholder {
    color: color-mix(in srgb, currentColor 50%, transparent);
}

.asun-caravan input:focus,
.asun-caravan textarea:focus,
.asun-caravan select:focus,
.asun-caravan-list input:focus,
.asun-caravan-list textarea:focus,
.asun-caravan-list select:focus,
.asun-caravan-page input:focus,
.asun-caravan-page textarea:focus,
.asun-caravan-page select:focus {
    outline: 2px solid var(--color-primary, #a46497);
    outline-offset: 1px;
    border-color: var(--color-primary, #a46497);
}

.asun-caravan-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.asun-caravan-checkbox input[type="checkbox"] {
    width: auto;
    accent-color: var(--color-primary, #a46497);
}

.asun-caravan-field {
    display: grid;
    gap: 6px;
    font-size: 0.95rem;
}

.asun-caravan-field > span {
    font-weight: 600;
    color: inherit;
}

.asun-caravan-field-hint {
    font-size: 0.78rem;
    line-height: 1.6;
    opacity: 0.65;
    color: inherit;
}

.asun-caravan-form-title {
    margin: 0;
    font-size: 1.1rem;
    color: inherit;
}

.asun-caravan-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.asun-caravan-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.asun-caravan-btn {
    font: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--caravan-line-strong);
    background: transparent;
    color: inherit;
    border-radius: var(--caravan-radius);
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.asun-caravan-btn:hover {
    border-color: var(--color-primary, #a46497);
    color: var(--color-primary, #a46497);
}

.asun-caravan-btn--primary {
    background: var(--color-primary, #a46497);
    border-color: var(--color-primary, #a46497);
    color: #fff;
}

.asun-caravan-btn--primary:hover {
    background: color-mix(in srgb, var(--color-primary, #a46497) 88%, black);
    color: #fff;
}

.asun-caravan-btn--danger,
.asun-caravan-btn--reject {
    background: #b34040;
    border-color: #b34040;
    color: #fff;
}

.asun-caravan-btn--danger:hover,
.asun-caravan-btn--reject:hover {
    background: color-mix(in srgb, #b34040 88%, black);
    color: #fff;
}

.asun-caravan-btn--success {
    background: #2d7d46;
    border-color: #2d7d46;
    color: #fff;
}

.asun-caravan-btn--success:hover {
    background: color-mix(in srgb, #2d7d46 88%, black);
    color: #fff;
}

.asun-caravan-icon-btn {
    font: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 36px;
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid var(--caravan-line-strong);
    background: transparent;
    color: inherit;
    border-radius: var(--caravan-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.asun-caravan-icon-btn:hover {
    border-color: var(--color-primary, #a46497);
    color: var(--color-primary, #a46497);
}

/* ═══════════════════════════════════════════════════════════
   FOLLOW UI
═══════════════════════════════════════════════════════════ */
.asun-caravan-follow-btn {
    opacity: 0.7;
}

.asun-caravan-follow-btn:hover {
    opacity: 1;
    border-color: var(--color-primary, #a46497);
    color: var(--color-primary, #a46497);
}

.asun-caravan-follow-btn.is-active {
    opacity: 1;
    border-color: var(--color-primary, #a46497);
    color: var(--color-primary, #a46497);
    background: color-mix(in srgb, var(--color-primary, #a46497) 12%, transparent);
}

.asun-caravan-followers-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--caravan-line);
    border-radius: var(--caravan-radius);
    font-size: 0.8rem;
    opacity: 0.85;
    color: inherit;
    white-space: nowrap;
}

.asun-caravan-list-followers {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    opacity: 0.75;
    color: inherit;
}

.asun-caravan-list-followers [data-caravan-followers-count] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.asun-caravan-goto-btn {
    opacity: 0.7;
}

.asun-caravan-goto-btn:hover {
    opacity: 1;
    border-color: var(--color-accent, #2d5c4d);
    color: var(--color-accent, #2d5c4d);
}

/* ═══════════════════════════════════════════════════════════
   LIST / HUB
═══════════════════════════════════════════════════════════ */
.asun-caravan-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.asun-caravan-list-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.asun-caravan-list-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.4;
    color: inherit;
}

.asun-caravan-filters {
    margin-bottom: 20px;
}

.asun-caravan-filters-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 8px;
    align-items: stretch;
}

.asun-caravan-filters-row input,
.asun-caravan-filters-row select {
    width: 100%;
    min-width: 0;
}

.asun-caravan-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--caravan-gap);
}

/* ── List Item ── */
.asun-caravan-list-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--caravan-line);
    border-radius: var(--caravan-radius);
    background: var(--caravan-card);
    color: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.asun-caravan-list-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary, #a46497);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary, #a46497) 15%, transparent);
}

.asun-caravan-list-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.asun-caravan-list-item-link {
    text-decoration: none;
    color: inherit;
    flex: 1 1 auto;
    min-width: 0;
}

.asun-caravan-list-item-link:hover {
    color: var(--color-primary, #a46497);
}

.asun-caravan-list-item-link .asun-caravan-list-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.asun-caravan-list-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.asun-caravan-list-item-actions .asun-caravan-icon-btn {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 6px;
}

.asun-caravan-list-desc {
    font-size: 0.9rem;
    opacity: 0.8;
    line-height: 1.6;
    color: inherit;
}

.asun-caravan-list-owner {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    opacity: 0.85;
    color: inherit;
}

.asun-caravan-list-owner strong {
    color: var(--color-primary, #a46497);
}

.asun-caravan-list-meta {
    font-size: 0.82rem;
    opacity: 0.65;
    margin-top: auto;
    color: inherit;
}

.asun-caravan-list-date {
    font-size: 0.78rem;
    opacity: 0.55;
    color: inherit;
}

.asun-caravan-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--caravan-radius);
    font-size: 0.72rem;
    background: color-mix(in srgb, var(--color-primary, #a46497) 15%, transparent);
    color: inherit;
    width: fit-content;
}

.asun-caravan-status-badge--archived {
    background: color-mix(in srgb, #b8860b 20%, transparent);
}

.asun-caravan-status-badge--closed {
    background: color-mix(in srgb, #b34040 18%, transparent);
}

/* ── Create form — dual hidden strategy (attr + classes) ── */
.asun-caravan-create-form {
    display: none;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--caravan-line);
    border-radius: var(--caravan-radius);
    background: var(--caravan-card);
    margin-bottom: 20px;
}

.asun-caravan-create-form.is-visible {
    display: grid;
}

/* ═══════════════════════════════════════════════════════════
   ACCORDION (hub cards)
═══════════════════════════════════════════════════════════ */
.asun-caravan-accordion {
    margin-top: 12px;
    border-top: 1px dashed var(--caravan-line);
    padding-top: 12px;
}

.asun-caravan-accordion-toggle {
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--caravan-line-strong);
    border-radius: var(--caravan-radius);
    color: inherit;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s;
}

.asun-caravan-accordion-toggle:hover {
    border-color: var(--color-primary, #a46497);
    color: var(--color-primary, #a46497);
}

.asun-caravan-accordion-toggle.is-open {
    background: var(--caravan-surface-soft);
}

.asun-caravan-accordion-panel {
    margin-top: 12px;
    display: grid;
    gap: 12px;
}

.asun-caravan-accordion-panel .asun-caravan-timeline-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding: 16px 0 16px 24px;
}

.asun-caravan-accordion-panel .asun-caravan-timeline-wrapper::before {
    content: '';
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 8px;
    width: 2px;
    background: var(--caravan-line-strong);
    z-index: 0;
}

.asun-caravan-accordion-panel .asun-caravan-timeline-wrapper .asun-caravan-card {
    position: relative;
    z-index: 1;
    min-width: 200px;
    max-width: 100%;
}

.asun-caravan-accordion-panel .asun-caravan-timeline-wrapper .asun-caravan-card::before {
    content: '';
    position: absolute;
    top: 16px;
    left: -20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary, #a46497);
    box-shadow: 0 0 0 2px var(--caravan-line);
    z-index: 2;
}

.asun-caravan-accordion-panel img {
    max-width: 100%;
    height: auto;
}

/* ═══════════════════════════════════════════════════════════
   TIMELINE LAYOUTS (board)
═══════════════════════════════════════════════════════════ */
.asun-caravan[data-layout="timeline_h"] .asun-caravan-cards,
.asun-caravan[data-layout="timeline_v"] .asun-caravan-cards {
    display: flex;
    position: relative;
    padding: 24px 0;
}

.asun-caravan[data-layout="timeline_h"] .asun-caravan-cards {
    flex-direction: row;
    overflow-x: auto;
    gap: 32px;
    align-items: flex-start;
}

.asun-caravan[data-layout="timeline_v"] .asun-caravan-cards {
    flex-direction: column;
    gap: 32px;
}

.asun-caravan[data-layout="timeline_h"] .asun-caravan-cards::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--caravan-line-strong);
    z-index: 0;
}

.asun-caravan[data-layout="timeline_v"] .asun-caravan-cards::before {
    content: '';
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 12px;
    width: 2px;
    background: var(--caravan-line-strong);
    z-index: 0;
}

.asun-caravan[data-layout="timeline_h"] .asun-caravan-card,
.asun-caravan[data-layout="timeline_v"] .asun-caravan-card {
    position: relative;
    z-index: 1;
    min-width: 240px;
    max-width: 280px;
}

.asun-caravan[data-layout="timeline_h"] .asun-caravan-card::before,
.asun-caravan[data-layout="timeline_v"] .asun-caravan-card::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary, #a46497);
    box-shadow: 0 0 0 2px var(--caravan-line);
    z-index: 2;
}

.asun-caravan[data-layout="timeline_h"] .asun-caravan-card::before {
    top: -18px;
    left: 16px;
}

.asun-caravan[data-layout="timeline_v"] .asun-caravan-card::before {
    top: 16px;
    left: -18px;
}

/* ═══════════════════════════════════════════════════════════
   CANVAS MODAL (add-card)
═══════════════════════════════════════════════════════════ */
.asun-caravan-canvas-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.asun-caravan-canvas-modal.is-visible {
    display: flex;
}

.asun-caravan-canvas-modal-content {
    background: var(--caravan-solid, #f6f6f6);
    color: inherit;
    border: 1px solid var(--caravan-line);
    border-radius: var(--caravan-radius);
    padding: 24px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: grid;
    gap: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

.asun-caravan-canvas-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.asun-caravan-canvas-modal-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: inherit;
}

.asun-caravan-canvas-modal-close {
    font: inherit;
    background: transparent;
    border: 1px solid var(--caravan-line-strong);
    border-radius: var(--caravan-radius);
    color: inherit;
    padding: 4px 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.asun-caravan-canvas-modal-close:hover {
    border-color: var(--color-primary, #a46497);
    color: var(--color-primary, #a46497);
}

/* ═══════════════════════════════════════════════════════════
   BOARD SHELL
═══════════════════════════════════════════════════════════ */
.asun-caravan-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--caravan-line);
    background: transparent;
}

.asun-caravan-title {
    margin: 0;
    flex: 1 1 auto;
    font-size: 1.25rem;
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

.asun-caravan-description {
    margin: 0;
    padding: 12px 16px;
    opacity: 0.85;
    color: inherit;
}

.asun-caravan-board-filters {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--caravan-line);
    background: transparent;
    flex-wrap: wrap;
}

.asun-caravan-board-filters select {
    max-width: 200px;
}

.asun-caravan-back {
    flex: 0 0 auto;
}

/* SCOPED: this wrapper exists ONLY inside a board. It must never
   apply to any element outside .asun-caravan (especially <body>). */
.asun-caravan .asun-caravan-body {
    display: flex;
    position: relative;
}

.asun-caravan-canvas {
    flex: 1 1 auto;
    padding: 16px;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════
   SIDE MENU / PANELS
═══════════════════════════════════════════════════════════ */
.asun-caravan-side {
    width: 300px;
    max-width: 85vw;
    padding: 16px;
    border-inline-end: 1px solid var(--caravan-line);
    background: transparent;
    color: inherit;
    display: none;
}

.asun-caravan.is-side-open .asun-caravan-side {
    display: block;
}

.asun-caravan-side-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.asun-caravan-side-tabs button {
    font: inherit;
    border: 1px solid var(--caravan-line-strong);
    background: transparent;
    color: inherit;
    border-radius: var(--caravan-radius);
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.88rem;
    transition: background 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.asun-caravan-side-tabs button:hover {
    border-color: var(--color-primary, #a46497);
}

.asun-caravan-side-tabs button.is-active {
    background: var(--color-primary, #a46497);
    color: #fff;
    border-color: var(--color-primary, #a46497);
}

.asun-caravan-panel {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.asun-caravan-inline-form {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    margin-bottom: 12px;
}

.asun-caravan-settings-group {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--caravan-line);
    border-radius: var(--caravan-radius);
    background: var(--caravan-surface-soft);
}

.asun-caravan-settings-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    opacity: 0.85;
    color: inherit;
}

.asun-caravan-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.asun-caravan-url-row input {
    direction: ltr;
    text-align: left;
    opacity: 0.85;
}

.asun-caravan-danger-zone {
    border-color: color-mix(in srgb, #b34040 45%, transparent);
}

.asun-caravan-danger-zone .asun-caravan-settings-title {
    color: #e05c5c;
}

/* ═══════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════ */
.asun-caravan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--caravan-gap);
    align-items: start;
}

.asun-caravan[data-layout="shelf"] .asun-caravan-cards {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
}

.asun-caravan[data-layout="shelf"] .asun-caravan-card {
    min-width: 260px;
    max-width: 280px;
}

.asun-caravan-card {
    background: var(--caravan-card);
    color: inherit;
    border: 1px solid var(--caravan-line);
    border-radius: var(--caravan-radius);
    padding: 14px;
    display: grid;
    gap: 12px;
    box-shadow: 0 1px 3px var(--caravan-shadow);
}

.asun-caravan-card--color-primary {
    border-inline-start: 4px solid var(--color-primary, #a46497);
}

.asun-caravan-card--color-accent {
    border-inline-start: 4px solid var(--color-accent, #2d5c4d);
}

.asun-caravan-card--color-dark {
    border-inline-start: 4px solid var(--bg-dark, #323232);
}

.asun-caravan-card.is-pending {
    opacity: 0.85;
}

.asun-caravan-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.asun-caravan-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.asun-caravan-avatar--sm {
    width: 28px;
    height: 28px;
}

.asun-caravan-meta {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.asun-caravan-author {
    overflow-wrap: anywhere;
    font-size: 0.92rem;
    color: inherit;
}

.asun-caravan-date {
    font-size: 0.78rem;
    opacity: 0.7;
    color: inherit;
}

.asun-caravan-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--caravan-radius);
    font-size: 0.72rem;
    background: color-mix(in srgb, var(--color-primary, #a46497) 15%, transparent);
    color: inherit;
    width: fit-content;
}

.asun-caravan-badge--pending {
    background: color-mix(in srgb, #b8860b 18%, transparent);
}

.asun-caravan-card-content {
    overflow-wrap: anywhere;
    line-height: 1.75;
    font-size: 0.95rem;
    color: inherit;
}

.asun-caravan-card-content a {
    color: var(--color-primary, #a46497);
}

.asun-caravan-attachment img {
    width: 100%;
    border-radius: var(--caravan-radius);
    display: block;
}

.asun-caravan-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--caravan-line);
}

.asun-caravan-actions--pending {
    gap: 8px;
}

.asun-caravan-actions .asun-caravan-icon-btn {
    min-width: 32px;
    min-height: 32px;
    padding: 4px 6px;
}

.asun-caravan-vote.is-active {
    background: var(--color-primary, #a46497);
    color: #fff;
    border-color: var(--color-primary, #a46497);
}

.asun-caravan-rank {
    min-width: 24px;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0 4px;
    color: inherit;
}

.asun-caravan-count {
    font-size: 0.72rem;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--color-primary, #a46497);
    color: #fff;
    min-width: 16px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   REPLIES
═══════════════════════════════════════════════════════════ */
.asun-caravan-replies {
    display: grid;
    gap: 10px;
    border-top: 1px dashed var(--caravan-line);
    padding-top: 12px;
}

.asun-caravan-reply,
.asun-caravan-reply-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.asun-caravan-reply.is-pending,
.asun-caravan-reply-row.is-pending {
    opacity: 0.85;
}

.asun-caravan-reply-row .asun-caravan-avatar--sm {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.asun-caravan-reply-body {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--caravan-surface);
    color: inherit;
    border: 1px solid var(--caravan-line);
    border-radius: var(--caravan-radius);
    padding: 10px;
    font-size: 0.9rem;
    display: grid;
    gap: 8px;
}

.asun-caravan-reply-body strong {
    color: inherit;
}

.asun-caravan-reply-content {
    color: inherit;
}

.asun-caravan-reply-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.asun-caravan-delete-reply {
    border: 0;
    background: transparent;
    color: #e05c5c;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--caravan-radius);
}

.asun-caravan-reply-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 4px;
}

.asun-caravan-reply-form textarea {
    min-height: 40px;
}

/* ═══════════════════════════════════════════════════════════
   MODERATION
═══════════════════════════════════════════════════════════ */
.asun-caravan-moderation-list {
    display: grid;
    gap: 12px;
}

.asun-caravan-moderation-item {
    border: 1px solid var(--caravan-line);
    border-radius: var(--caravan-radius);
    padding: 12px;
    background: var(--caravan-surface-soft);
    color: inherit;
}

.asun-caravan-moderation-item-header {
    display: grid;
    gap: 4px;
    font-size: 0.85rem;
    opacity: 0.85;
    margin-bottom: 8px;
    color: inherit;
}

.asun-caravan-moderation-type {
    width: fit-content;
    padding: 1px 8px;
    border-radius: var(--caravan-radius);
    background: color-mix(in srgb, var(--color-accent, #2d5c4d) 15%, transparent);
    font-size: 0.75rem;
    color: inherit;
}

.asun-caravan-moderation-item-excerpt {
    font-size: 0.92rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
    color: inherit;
}

.asun-caravan-moderation-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   MEMBERS / RECORDS
═══════════════════════════════════════════════════════════ */
.asun-caravan-member-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.asun-caravan-member {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--caravan-line);
    border-radius: var(--caravan-radius);
    background: var(--caravan-surface-soft);
    color: inherit;
}

.asun-caravan-member span {
    flex: 1 1 auto;
}

.asun-caravan-member em {
    font-style: normal;
    font-size: 0.8rem;
    opacity: 0.75;
}

.asun-caravan-remove-member {
    border: 0;
    background: transparent;
    color: #e05c5c;
    cursor: pointer;
    padding: 4px;
}

.asun-caravan-records {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    margin: 0 0 14px;
}

.asun-caravan-records dt {
    opacity: 0.75;
    color: inherit;
}

.asun-caravan-records dd {
    margin: 0;
    font-weight: 600;
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════
   LOADING STATE
═══════════════════════════════════════════════════════════ */
.asun-caravan-btn.is-loading,
.asun-caravan-actions button.is-loading,
.asun-caravan-icon-btn.is-loading,
.asun-caravan-accordion-toggle.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   FOCUS / ACCESSIBILITY
═══════════════════════════════════════════════════════════ */
.asun-caravan-btn:focus-visible,
.asun-caravan-icon-btn:focus-visible,
.asun-caravan-side-tabs button:focus-visible,
.asun-caravan-accordion-toggle:focus-visible,
.asun-caravan-canvas-modal-close:focus-visible {
    outline: 2px solid var(--asun-focus, var(--color-primary, #a46497));
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .asun-caravan *,
    .asun-caravan-list *,
    .asun-caravan-page *,
    .asun-caravan *::before,
    .asun-caravan *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — all board-shell rules stay scoped to .asun-caravan
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .asun-caravan .asun-caravan-body {
        flex-direction: column;
    }

    .asun-caravan-side {
        width: 100%;
        border-inline-end: 0;
        border-bottom: 1px solid var(--caravan-line);
    }

    .asun-caravan-cards {
        grid-template-columns: 1fr;
    }

    .asun-caravan-filters-row {
        grid-template-columns: 1fr;
    }

    .asun-caravan-board-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .asun-caravan-board-filters select {
        max-width: none;
    }

    .asun-caravan-inline-form {
        grid-template-columns: 1fr;
    }

    .asun-caravan-canvas-modal-content {
        max-width: 100%;
        padding: 16px;
    }
}

@media (max-width: 600px) {
    .asun-caravan-settings-grid {
        grid-template-columns: 1fr;
    }
}