/* =========================================================================
   UARO WoE — Sessions chronicle (sessions.php)
   ========================================================================= */

/* ---------- Total-count pill in hero ---------- */
.sx-total-pill {
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-pill);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--df-gold) 38%, var(--woe-border));
    background: color-mix(in srgb, var(--df-gold) 6%, var(--woe-surface));
    color: var(--woe-text-accent);
}

[data-bs-theme="light"] .sx-total-pill {
    /* Color flips via --woe-text-accent. Override the frame to blood-deep tint. */
    border-color: color-mix(in srgb, var(--df-blood-deep) 38%, var(--woe-border));
    background: color-mix(in srgb, var(--df-blood-deep) 4%, var(--woe-surface));
}


/* ---------- Month group separators ---------- */
.sx-month-row td {
    background: transparent !important;
    border: none !important;
    padding: 1.4rem 0 0.6rem !important;
}

.sx-month-cell {
    font-family: var(--woe-font-display);
    font-weight: 700;
    font-size: var(--woe-text-display-sm);
    letter-spacing: var(--woe-track-eyebrow);
    text-transform: uppercase;
    color: var(--woe-text-accent);
    text-align: left;
    position: relative;
    padding-left: 2px !important;
}

.sx-month-cell::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, var(--df-gold), transparent);
    margin-right: 0.8rem;
    vertical-align: middle;
}

/* Month-cell color flips automatically via --woe-text-accent. */

[data-bs-theme="light"] .sx-month-cell::before {
    background: linear-gradient(90deg, var(--df-blood-deep), transparent);
}


/* ---------- Type badges (FE / SE / TE / CUSTOM) ---------- */
.sx-type {
    display: inline-block;
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-pill);
    letter-spacing: var(--woe-track-pill);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid var(--woe-border);
    color: var(--woe-text-secondary);
    background: var(--woe-surface);
}

.sx-type--FE {
    color: var(--woe-text-accent);
    border-color: color-mix(in srgb, var(--df-gold) 50%, var(--woe-border));
    background: color-mix(in srgb, var(--df-gold) 8%, var(--woe-surface));
}
.sx-type--SE {
    color: #6B7AA1;  /* steel */
    border-color: color-mix(in srgb, #6B7AA1 60%, var(--woe-border));
    background: color-mix(in srgb, #6B7AA1 10%, var(--woe-surface));
}
.sx-type--TE {
    color: var(--df-ember);
    border-color: color-mix(in srgb, var(--df-ember) 55%, var(--woe-border));
    background: color-mix(in srgb, var(--df-ember) 10%, var(--woe-surface));
}

[data-bs-theme="light"] .sx-type--FE {
    /* FE color flips via --woe-text-accent. Override frame to blood-deep tint. */
    border-color: color-mix(in srgb, var(--df-blood-deep) 40%, var(--woe-border));
    background: color-mix(in srgb, var(--df-blood-deep) 6%, var(--woe-surface));
}

/* Steel SE badge — gold tinted by default; on cream the steel #6B7AA1 reads
   marginal so we swap to the darker info value (#4A6877) which is AAA. */
[data-bs-theme="light"] .sx-type--SE {
    color: #4A6877;
    border-color: color-mix(in srgb, #4A6877 40%, var(--woe-border));
    background: color-mix(in srgb, #4A6877 6%, var(--woe-surface));
}

/* Ember TE badge — #DC8A38 on cream is borderline; darken to #8C4A14. */
[data-bs-theme="light"] .sx-type--TE {
    color: #8C4A14;
    border-color: color-mix(in srgb, #8C4A14 40%, var(--woe-border));
    background: color-mix(in srgb, #8C4A14 6%, var(--woe-surface));
}


/* ---------- Status badges ---------- */
.sx-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--woe-font-mono);
    font-size: var(--woe-text-pill);
    letter-spacing: var(--woe-track-pill);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid var(--woe-border);
}

.sx-status--Completed {
    color: #84BD8E;
    border-color: color-mix(in srgb, #84BD8E 50%, var(--woe-border));
    background: color-mix(in srgb, #84BD8E 8%, var(--woe-surface));
}

.sx-status--Interrupted {
    color: var(--df-ember);
    border-color: color-mix(in srgb, var(--df-ember) 55%, var(--woe-border));
    background: color-mix(in srgb, var(--df-ember) 10%, var(--woe-surface));
}

.sx-status--Live {
    color: var(--df-blood);
    border-color: color-mix(in srgb, var(--df-blood) 55%, var(--woe-border));
    background: color-mix(in srgb, var(--df-blood) 12%, var(--woe-surface));
    animation: woe-emp-pulse 2.4s ease-in-out infinite;
}

[data-bs-theme="light"] .sx-status--Completed {
    color: #2D6B3F;
    border-color: color-mix(in srgb, #2D6B3F 40%, var(--woe-border));
    background: color-mix(in srgb, #2D6B3F 6%, var(--woe-surface));
}
[data-bs-theme="light"] .sx-status--Interrupted {
    color: #8C4A14;
    border-color: color-mix(in srgb, #8C4A14 40%, var(--woe-border));
    background: color-mix(in srgb, #8C4A14 6%, var(--woe-surface));
}
[data-bs-theme="light"] .sx-status--Live {
    color: var(--df-blood-deep);
    border-color: color-mix(in srgb, var(--df-blood-deep) 50%, var(--woe-border));
    background: color-mix(in srgb, var(--df-blood-deep) 6%, var(--woe-surface));
}


/* ---------- Live row glow ---------- */
.woe-row--live td {
    background: color-mix(in srgb, var(--df-blood) 4%, transparent);
}

/* Shared .woe-table chrome and pagination chrome live in base.css.
   The .sx-month-row hover-exempt is encoded there via :not(.sx-month-row). */