/* Lifespan CSS - Age bar styling */

.lifespan-bar {
    background: linear-gradient(90deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0.1) 100%);
    border-bottom: 1px solid var(--ui-danger);
    color: var(--p-ffffff);
    text-align: center;
    padding: 8px 15px;
    font-weight: bold;
    font-size: 0.9em;
    flex-shrink: 0;
}

.lifespan-bar .lifespan {
    font-size: 1em;
    color: var(--ui-danger);
}

.lifespan-bar .lifespan span {
    color: var(--ui-gold);
}

/* Override old lifespan-container styling when used in new layout */
.content-area .lifespan-container {
    background: linear-gradient(90deg, rgba(255, 107, 107, 0.2) 0%, rgba(255, 107, 107, 0.1) 100%);
    border: none;
    border-bottom: 1px solid rgba(255, 107, 107, 0.5);
    border-radius: 0;
    padding: 8px 15px;
    margin-bottom: 0;
}

.content-area .lifespan-container .lifespan {
    font-size: 0.95em;
}

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    .content-area .lifespan-container {
        padding: 4px 10px;
    }

    .content-area .lifespan-container .lifespan {
        font-size: 0.8em;
    }
}