/* ============================================================================
   Mobile Stories List — vertical colored bands
   Replaces the desktop story-card grid for the Stories tab on mobile.
   ============================================================================ */

.mobile-stories-list {
    width: 100%;
    padding: 8px 0 96px 0; /* bottom pad clears tab bar + FAB */
    box-sizing: border-box;
}

.msl-bands {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
}

.msl-band {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 96px;
    padding: 16px 14px;
    background: #1a1d28;
    color: #fff;
    border: none;
    border-radius: 0;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    font-family: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.msl-band:active {
    transform: scale(0.98);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* Subtle inner glow so text reads on every gradient */
.msl-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
    pointer-events: none;
    border-radius: inherit;
}

.msl-band-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    font-size: 1.5rem;
    backdrop-filter: blur(6px);
    z-index: 1;
}

/* Thumbnail variant (deliberate-flooding-meridian I7/D7f) — when story has
   cover_image_id, render a real thumbnail instead of the emoji icon. */
.msl-band-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msl-band-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.msl-band-thumb.msl-band-thumb-fallback {
    font-size: 1.5rem;
}
.msl-band-thumb-icon { font-size: 1.5rem; }

/* Summary line (deliberate-flooding-meridian I7/D7f) */
.msl-band-summary {
    margin-top: 4px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.msl-band-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 1;
}

.msl-band-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.msl-band-subtitle {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.msl-band-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.msl-band-dot {
    opacity: 0.6;
}

.msl-band-draft,
.msl-band-training {
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.msl-band-training {
    background: rgba(255, 255, 255, 0.95);
    color: #6D28D9;
}

/* Watch chip — produced bio-Story bands tap straight into the animated Story
   (vaulting-paired-storycraft S6, Joe directive 2026-06-06 U132). A bright,
   high-contrast pill that reads as the primary "watch or play" affordance. */
.msl-band-watch {
    padding: 2px 9px;
    background: rgba(255, 255, 255, 0.95);
    color: #1e293b;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.msl-band-play {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1d28;
    border: none;
    border-radius: 22px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.msl-band-play:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.85);
}

.msl-band-chevron {
    flex: 0 0 auto;
    font-size: 1.6rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    z-index: 1;
    margin-left: -4px;
}

/* ---------- Empty / loading / error ---------- */
.msl-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
}

.msl-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(110, 168, 255, 0.2);
    border-top-color: #6ea8ff;
    border-radius: 50%;
    animation: msl-spin 0.85s linear infinite;
}

@keyframes msl-spin {
    to { transform: rotate(360deg); }
}

.msl-empty {
    text-align: center;
    padding: 80px 24px;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
}

.msl-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.msl-empty-msg {
    font-size: 1rem;
}

.msl-error {
    margin: 24px 12px;
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #fca5a5;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.msl-error-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #d92d20;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.msl-error-text {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.msl-error-retry {
    flex-shrink: 0;
    background: #d92d20;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.msl-error-retry:active {
    background: #b42318;
}

/* Compact band — enhancing-trio-biographies S2 (LS-004), Joe 2026-10-05: the
   official photo on the left sets the row height; bold title; as much analysis as
   fits (clamp MEASURED by FFAStoryCard.fit, js/core/story-card.js); no subtitle,
   no meta/Watch row. min-height (not height) so large text reflows, never clips. */
.msl-band.msl-band--compact {
    align-items: flex-start;
    min-height: 92px;
    padding: 10px 12px;
    gap: 12px;
}
.msl-band--compact .msl-band-thumb,
.msl-band--compact .msl-band-icon {
    width: 72px;
    height: 72px;
    border-radius: 12px;
}
.msl-band--compact .msl-band-body {
    gap: 2px;
}
.msl-band--compact .msl-band-summary {
    margin-top: 2px;
    -webkit-line-clamp: 2;
}
.msl-band--compact .msl-band-chevron {
    align-self: center;
}
.msl-band--compact .msl-band-title .msl-band-draft,
.msl-band--compact .msl-band-title .msl-band-training {
    font-size: 0.66rem;
    vertical-align: middle;
    margin-left: 4px;
}
.msl-band--compact .ffa-card-portrait--missing {
    visibility: hidden;
}

/* The Galleries bucket — a Life in Pictures band (converging-desktop-fleet S185;
   Joe 2026-10-27: "add back the Gallery tab of the Stories modal ... on both the
   desktop and the mobile surfaces"). The compact band above, in the Light Table
   dress of the Browse Media room every Life in Pictures door opens: the walnut-
   to-copper ground comes inline from js/core/life-in-pictures-list.js (one
   palette for both surfaces), a copper rule along the top, and the official
   headshot mounted like a print on a cream mat. */
.msl-band.msl-band--lip {
    box-shadow: inset 0 1px 0 rgba(201, 123, 74, 0.65), 0 2px 12px rgba(0, 0, 0, 0.18);
}
.msl-band--lip .msl-band-thumb {
    border-radius: 4px;
    overflow: visible;
    background: transparent;
    backdrop-filter: none;
}
.msl-band--lip .msl-band-thumb img {
    border-radius: 3px;
    box-shadow: 0 0 0 3px #F2E8D8, 0 0 0 4px rgba(201, 123, 74, 0.7), 0 4px 10px rgba(0, 0, 0, 0.35);
}
.msl-band--lip .msl-band-icon {
    background: rgba(242, 232, 216, 0.16);
}
@media (forced-colors: active) {
    .msl-band--lip .msl-band-thumb img { box-shadow: none; border: 2px solid CanvasText; }
}