/* ============================================================
   NATTERFLY NATTERCAST
   Public listing + individual NatterCast
============================================================ */

.nattercast-page {
    min-height: 650px;
    padding: 34px 0 70px;
    background: var(--page-background);
}

.nattercast-content { width: 100%; }

.nattercast-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: start;
    gap: 26px;
}

.nattercast-left-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.nattercast-side-card,
.nattercast-main-card,
.nattercast-not-found {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 5px 20px rgb(7 84 111 / 6%);
}

.nattercast-side-card { padding: 20px; }

.nattercast-intro-card {
    padding: 25px 22px 23px;
    text-align: center;
}

.nattercast-mark {
    display: grid;
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--header-light), var(--header));
    box-shadow: 0 7px 18px rgb(7 84 111 / 18%);
    font-size: 1.65rem;
}

.nattercast-kicker,
.nattercast-list-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nattercast-intro-card h1 {
    margin: 0 0 9px;
    color: var(--header);
    font-size: 2rem;
    line-height: 1.1;
}

.nattercast-intro-card p,
.nattercast-member-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: .87rem;
    line-height: 1.55;
}

.nattercast-side-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}

.nattercast-side-heading > i {
    width: 22px;
    color: var(--header-light);
    text-align: center;
}

.nattercast-side-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
}

.nattercast-filter-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nattercast-filter-list a {
    display: flex;
    align-items: center;
    min-height: 39px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
}

.nattercast-filter-list a:hover {
    border-color: var(--border);
    color: var(--header-light);
    background: var(--surface-muted);
}

.nattercast-filter-list a.is-active {
    border-color: var(--border-dark);
    color: var(--header);
    background: var(--surface-muted);
}

.nattercast-filter-list a span {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.nattercast-filter-list a i {
    width: 17px;
    color: var(--header-light);
    text-align: center;
}

.nattercast-member-card p { margin-bottom: 14px; }

.nattercast-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--header-light);
    border-radius: 5px;
    color: #fff;
    background: var(--header-light);
    font-size: .84rem;
    font-weight: 800;
    text-decoration: none;
}

.nattercast-action-button:hover { background: var(--header); }
.nattercast-inline-button { width: auto; display: inline-flex; }

/* Main list */
.nattercast-main-card {
    min-width: 0;
    overflow: hidden;
}

.nattercast-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 28px 22px;
    border-bottom: 1px solid var(--border);
}

.nattercast-list-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.35rem;
    line-height: 1.25;
}

.nattercast-result-count {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--surface-muted);
    font-size: .76rem;
    font-weight: 800;
}

.nattercast-list { display: block; }

.nattercast-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 20px;
    padding: 24px 28px;
    border-top: 1px solid var(--border);
}

.nattercast-row:first-child { border-top: 0; }
.nattercast-row:hover { background: color-mix(in srgb, var(--surface-muted) 60%, transparent); }

.nattercast-member-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.nattercast-avatar {
    display: grid;
    width: 90px;
    height: 90px;
    overflow: hidden;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(135deg, var(--header-light), var(--header));
    box-shadow: 0 3px 12px rgb(0 0 0 / 12%);
    font-size: 2rem;
    font-weight: 800;
    text-decoration: none;
}

.nattercast-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nattercast-username {
    display: block;
    max-width: 100%;
    margin-top: 9px;
    overflow: hidden;
    color: var(--header-light);
    font-size: .82rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nattercast-username:hover { text-decoration: underline; }
.nattercast-row-content { min-width: 0; }

.nattercast-title-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.nattercast-title-wrap { min-width: 0; }

.nattercast-title-wrap h3 {
    margin: 2px 0 0;
    font-size: 1.15rem;
    line-height: 1.35;
}

.nattercast-title-wrap h3 a {
    color: var(--text);
    text-decoration: none;
}

.nattercast-title-wrap h3 a:hover { color: var(--header-light); }

.nattercast-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
}

.nattercast-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.nattercast-badge-official {
    border: 1px solid #b9dbea;
    color: #07546f;
    background: #eaf7fb;
}

.nattercast-badge-featured {
    border: 1px solid #ecd69b;
    color: #684b00;
    background: #fff4d5;
}

[data-theme="dark"] .nattercast-badge-official {
    border-color: #31596a;
    color: #9bdcf3;
    background: #15313c;
}

[data-theme="dark"] .nattercast-badge-featured {
    border-color: #685b33;
    color: #f1d67c;
    background: #342f1d;
}

.nattercast-stats {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.nattercast-stats span,
.nattercast-meta span,
.nattercast-single-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nattercast-stats i,
.nattercast-meta i,
.nattercast-single-meta i { color: var(--header-light); }

.nattercast-excerpt {
    margin: 11px 0 15px;
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.6;
}

.nattercast-row-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.nattercast-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    color: var(--text-muted);
    font-size: .76rem;
}

.nattercast-play-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 84px;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--header-light);
    border-radius: 5px;
    color: #fff;
    background: var(--header-light);
    font: inherit;
    font-size: .78rem;
    font-weight: 850;
    cursor: pointer;
}

.nattercast-play-button:hover,
.nattercast-play-button.is-playing { background: var(--header); }

.nattercast-empty-state,
.nattercast-not-found {
    padding: 55px 30px;
    text-align: center;
}

.nattercast-empty-icon {
    display: grid;
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--header-light);
    font-size: 1.7rem;
}

.nattercast-empty-state h3,
.nattercast-not-found h1 { margin: 0 0 8px; color: var(--text); }
.nattercast-empty-state p,
.nattercast-not-found p { margin: 0 0 20px; color: var(--text-muted); }

/* Individual NatterCast */
.nattercast-profile-card { text-align: center; }

.nattercast-single-avatar {
    display: grid;
    width: 100%;
    height: 310px;
    margin-bottom: 16px;
    overflow: hidden;
    place-items: center;
    border: 5px solid #fff;
    border-radius: 4px;
    color: #fff;
    background: linear-gradient(135deg, var(--header-light), var(--header));
    box-shadow: 0 4px 16px rgb(0 0 0 / 14%);
    font-size: 4rem;
    font-weight: 800;
    text-decoration: none;
}

.nattercast-single-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nattercast-profile-name {
    margin: 0 0 16px;
    color: var(--header);
    font-size: 1.65rem;
}

.nattercast-profile-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: .82rem;
}

.nattercast-profile-detail i { color: var(--header-light); }
.nattercast-back-link { color: var(--header-light); font-size: .84rem; font-weight: 800; text-decoration: none; }
.nattercast-back-link:hover { text-decoration: underline; }

.nattercast-single-card { padding: 0 28px; }
.nattercast-single-heading { padding: 30px 0 25px; }
.nattercast-single-heading h1 { margin: 6px 0 13px; color: var(--text); font-size: 2rem; line-height: 1.2; }

.nattercast-single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 16px;
    color: var(--text-muted);
    font-size: .8rem;
}

.nattercast-single-player {
    display: grid;
    grid-template-columns: auto minmax(100px, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-muted);
}

.nattercast-play-button-large { min-width: 145px; min-height: 44px; }

.nattercast-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 34px;
    overflow: hidden;
}

.nattercast-wave span {
    flex: 1 1 3px;
    max-width: 4px;
    min-width: 2px;
    border-radius: 2px;
    background: var(--header-light);
    opacity: .5;
}
.nattercast-wave span:nth-child(5n+1) { height: 28%; }
.nattercast-wave span:nth-child(5n+2) { height: 65%; }
.nattercast-wave span:nth-child(5n+3) { height: 92%; }
.nattercast-wave span:nth-child(5n+4) { height: 50%; }
.nattercast-wave span:nth-child(5n) { height: 76%; }

.nattercast-player-duration { color: var(--text-muted); font-size: .78rem; font-weight: 800; }

.nattercast-single-section {
    padding: 28px 0 30px;
    border-top: 1px solid var(--border);
}

.nattercast-single-player + .nattercast-single-section { margin-top: 28px; }

.nattercast-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.nattercast-section-heading i { width: 23px; color: var(--header-light); text-align: center; }
.nattercast-section-heading h2 { margin: 0; color: var(--text); font-size: 1.12rem; }
.nattercast-description-full { color: var(--text); font-size: .94rem; line-height: 1.75; }

.nattercast-associations { display: grid; gap: 9px; }
.nattercast-associations > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-muted);
}
.nattercast-associations span { color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.nattercast-associations strong { color: var(--text); font-size: .9rem; }

@media (max-width: 900px) {
    .nattercast-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; }
    .nattercast-row { grid-template-columns: 92px minmax(0, 1fr); padding: 21px 20px; }
    .nattercast-avatar { width: 78px; height: 78px; }
    .nattercast-single-avatar { height: 190px; }
}

@media (max-width: 720px) {
    .nattercast-page { padding-top: 22px; }
    .nattercast-layout { grid-template-columns: 1fr; }
    .nattercast-left-column { gap: 14px; }
    .nattercast-intro-card { text-align: left; }
    .nattercast-mark { width: 54px; height: 54px; margin: 0 0 12px; }
    .nattercast-list-header { padding: 21px 20px; }
    .nattercast-row { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 20px; }
    .nattercast-avatar { width: 68px; height: 68px; border-width: 3px; }
    .nattercast-title-line { gap: 10px; }
    .nattercast-stats { display: none; }
    .nattercast-row-footer { align-items: flex-end; }
    .nattercast-single-card { padding: 0 20px; }
    .nattercast-single-avatar { width: 150px; height: 150px; margin-right: auto; margin-left: auto; border-radius: 7px; }
    .nattercast-single-player { grid-template-columns: 1fr auto; }
    .nattercast-wave { grid-column: 1 / -1; order: 3; }
}

@media (max-width: 480px) {
    .nattercast-row { grid-template-columns: 1fr; }
    .nattercast-member-block { flex-direction: row; align-items: center; gap: 10px; }
    .nattercast-avatar { width: 54px; height: 54px; }
    .nattercast-username { margin-top: 0; text-align: left; }
    .nattercast-row-footer { align-items: stretch; flex-direction: column; }
    .nattercast-play-button { width: 100%; }
    .nattercast-list-header { align-items: flex-start; flex-direction: column; gap: 9px; }
    .nattercast-single-heading h1 { font-size: 1.55rem; }
    .nattercast-single-player { grid-template-columns: 1fr; }
    .nattercast-play-button-large { width: 100%; }
    .nattercast-player-duration { text-align: center; }
    .nattercast-associations > div { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* ============================================================
   LIVE NATTERCAST ANALYSER + MORE FROM MEMBER
============================================================ */

.nattercast-wave span {
    transform: scaleY(var(--level, 1));
    transform-origin: center;
    transition: transform 70ms linear, opacity 140ms ease, background 140ms ease;
}

.nattercast-single-player.is-playing .nattercast-wave span.is-live {
    opacity: .95;
    background: var(--header-light);
}

.nattercast-more-list {
    display: grid;
    gap: 10px;
}

.nattercast-more-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 16px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-muted);
}

.nattercast-more-body {
    flex: 1 1 auto;
    min-width: 0;
}

.nattercast-more-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.nattercast-more-title-line a {
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
}

.nattercast-more-title-line a:hover {
    color: var(--header-light);
    text-decoration: underline;
}

.nattercast-more-item p {
    margin: 6px 0 8px;
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.5;
}

.nattercast-more-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--text-muted);
    font-size: .76rem;
}

.nattercast-more-meta i {
    color: var(--header-light);
}

.nattercast-mini-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border: 1px solid var(--border-dark);
    border-radius: 999px;
    color: var(--header);
    background: var(--surface);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.nattercast-more-play {
    flex: 0 0 auto;
    min-width: 82px;
}

@media (max-width: 600px) {
    .nattercast-more-item {
        align-items: stretch;
        flex-direction: column;
    }

    .nattercast-more-play {
        width: 100%;
    }
}

/* NatterCast listing: entire row opens the detail page */
.nattercast-row-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.nattercast-row-link:hover {
    background: var(--surface-muted);
}

.nattercast-row-link:focus-visible {
    outline: 2px solid var(--header-light);
    outline-offset: -2px;
}

.nattercast-row-link .nattercast-username,
.nattercast-row-link h3 {
    color: inherit;
}

.nattercast-row-link:hover h3 {
    color: var(--header-light);
}