/* empty-state-card.css — Localized card-level empty states for Dream Archive
 *
 * Used by Featured Highlights (index.html) and Dream Timeline cards
 * (dream-timeline-explorer.html) to render graceful, bordered empty
 * states when image / audio / theme / agent data is missing.
 *
 * Honors existing color tokens (--line, --panel, --muted, --cyan,
 * --copper, --ink) so it adapts to both page palettes.
 *
 * Usage:
 *   <div class="empty-card-state" role="status">
 *     <span class="ecs-icon" aria-hidden="true">✦</span>
 *     <span class="ecs-title">No image available</span>
 *     <span class="ecs-message">Artwork will appear here when the next dream is archived.</span>
 *   </div>
 */

.empty-card-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 16px;
    text-align: center;
    /* Card-border integrity: keeps the parent card frame stable even
       when no media asset is present. Border + dashed inset cue reads
       as "this slot is reserved" rather than "this card collapsed". */
    border: 1px dashed var(--line, rgba(128, 215, 233, 0.28));
    border-radius: 8px;
    background: rgba(128, 215, 233, 0.04);
    color: var(--muted, #aab8c8);
    /* Minimum height preserves card aspect even with no content,
       so neighboring cards don't shift up/down when assets load. */
    min-height: 110px;
    box-sizing: border-box;
}

.empty-card-state .ecs-icon {
    font-size: 1.4rem;
    color: var(--cyan, #80d7e9);
    opacity: 0.75;
    line-height: 1;
}

.empty-card-state .ecs-title {
    font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink, #f3eedc);
    line-height: 1.3;
}

.empty-card-state .ecs-message {
    font-size: 0.82rem;
    color: var(--muted, #aab8c8);
    line-height: 1.5;
    max-width: 32ch;
}

.empty-card-state .ecs-action {
    margin-top: 6px;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    border: 1px solid var(--line, rgba(128, 215, 233, 0.28));
    background: rgba(128, 215, 233, 0.08);
    color: var(--cyan, #80d7e9);
    font-size: 0.78rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.empty-card-state .ecs-action:hover {
    background: rgba(128, 215, 233, 0.18);
    text-decoration: none;
}

/* Compact variant for the small Featured Highlights thumb slot */
.empty-card-state.ecs-compact {
    min-height: 110px;
    padding: 12px 10px;
}

.empty-card-state.ecs-compact .ecs-icon { font-size: 1.2rem; }
.empty-card-state.ecs-compact .ecs-title { font-size: 0.9rem; }
.empty-card-state.ecs-compact .ecs-message { font-size: 0.74rem; }

/* Audio-slot variant — sits next to the Featured meta chips */
.empty-card-state.ecs-audio-slot {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    min-height: 32px;
    padding: 6px 12px;
    gap: 10px;
    border-radius: 100px;
    border-style: solid;
    background: rgba(251, 191, 36, 0.06);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.empty-card-state.ecs-audio-slot .ecs-icon { font-size: 0.95rem; color: #fbbf24; opacity: 1; }
.empty-card-state.ecs-audio-slot .ecs-title { font-size: 0.78rem; color: #fbbf24; font-family: inherit; font-weight: 600; }
.empty-card-state.ecs-audio-slot .ecs-message { display: none; }

/* Timeline explorer tokens override (uses --text-muted, --border, --bg-card) */
.theme-heat-card .empty-card-state,
.agents-card .empty-card-state,
.enrich-showcase-card .empty-card-state,
.range-card .empty-card-state {
    color: var(--text-muted, #64748b);
    background: rgba(128, 215, 233, 0.03);
    border-color: var(--border, rgba(128, 215, 233, 0.28));
}
/* Featured Highlights section: when the .featured section itself is
   rendered as the empty-state container (no dreams archived), the
   section has a panel border already, so the inner .empty-card-state
   uses no doubled border and fills the section width. Preserves the
   surrounding featured card border without collapsing into display:none.
*/
.featured[data-empty-state="true"] {
    display: flex;
}
.featured[data-empty-state="true"] > .empty-card-state {
    width: 100%;
    border: 1px dashed var(--line, rgba(128, 215, 233, 0.28));
    border-radius: 8px;
    background: rgba(128, 215, 233, 0.04);
    min-height: 120px;
}

/* P2 archive-review: keep the Featured Highlights and
   Dream Timeline card borders + min-height visually stable when
   image / audio assets are absent, and stop empty-state copy from
   wrapping awkwardly under ~480px. The default rules above keep
   desktop + tablet honest (110-120px min-heights reserve the slot),
   but at narrow widths three things break together:
     1. The audio-slot pill (flex-direction:row, border-radius:100px)
        overflows its parent and the title gets clipped against the
        right edge of the Featured meta chip row.
     2. The 32ch-max ecs-message stacks awkwardly against the
        18px-vertical-padding default, leaving a one-word last line
        that reads like a layout bug rather than "no data".
     3. The Featured empty card (min-height:120px) and the Explorer
        mount slot empty card (min-height:200px) keep their reserved
        borders but the inner copy crowds the borders so the dashed
        frame visually disappears into the message text.
   Collapse padding, switch the audio-slot to a stacked pill at the
   break point, and re-anchor max-width so the dashed reserved-slot
   border + min-height stay legible. No JS contract changes. */
@media (max-width: 480px) {
    .empty-card-state {
        padding: 12px 12px;
        min-height: 96px;
        gap: 4px;
    }
    .empty-card-state .ecs-icon { font-size: 1.2rem; }
    .empty-card-state .ecs-title { font-size: 0.92rem; line-height: 1.25; }
    .empty-card-state .ecs-message {
        max-width: 24ch;
        font-size: 0.78rem;
        line-height: 1.4;
    }
    .empty-card-state.ecs-compact {
        padding: 10px 8px;
        min-height: 96px;
    }
    /* Audio-slot pill: at narrow widths the row layout + 100px radius
       pins "Audio missing" against the chip-row right edge and clips
       the title. Stack into a compact column pill instead, so the
       surrounding .featured-meta chip row keeps its border + rhythm. */
    .empty-card-state.ecs-audio-slot {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 2px;
        border-radius: 8px;
        padding: 6px 10px;
        min-height: 44px;
    }
    .empty-card-state.ecs-audio-slot .ecs-icon { font-size: 0.95rem; }
    .empty-card-state.ecs-audio-slot .ecs-title {
        font-size: 0.78rem;
        line-height: 1.3;
    }
    /* Featured Highlights empty card: the parent's flex column at <=760px
       stacks thumb-above-info, so the empty card sits below the 180px
       image-missing-placeholder. Keep the dashed reserved-slot border
       and min-height at the narrow viewport too so the card frame
       stays visible — the title/message don't crowd the dashed border. */
    .featured[data-empty-state="true"] > .empty-card-state {
        min-height: 104px;
        padding: 12px 12px;
    }
    /* Explorer mount slot empty card: mirror the same narrow-viewport
       integrity so the .explorer-mount card border doesn't visually
       collapse against the empty-card dashed border. */
    .explorer-mount[data-empty-state="true"] > .empty-card-state {
        min-height: 168px;
        padding: 14px 12px;
    }
}