/* ─── ZEPHYY SUBPAGES — Shared styles
 * Extends zephyy.css. All oklch design system.
 * Each subpage sets --accent in :root to its theme color.
 */

/* ── Subpage nav ── */
.zp-sub-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    background: oklch(var(--space-oled) / 0.85);
    border-bottom: 1px solid oklch(var(--star-white) / 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100;
}

.zp-sub-back {
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: oklch(var(--brand-teal));
    text-decoration: none;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.zp-sub-back:hover { opacity: 0.7; }

.zp-sub-title {
    font-family: 'Fugaz One', system-ui, sans-serif;
    font-size: 0.9rem;
    color: var(--text-main);
    letter-spacing: 0.04em;
    flex: 1;
    text-align: center;
}

.zp-sub-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.zp-sub-links a {
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.zp-sub-links a:hover { color: oklch(var(--brand-teal)); }
.zp-sub-links a.active {
    color: oklch(var(--accent, var(--brand-teal)));
    font-weight: 600;
}
.zp-sub-doshus {
    display: inline-flex;
    align-items: center;
}
.zp-sub-doshus img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .zp-sub-nav {
        gap: 0.6rem;
        padding: 0 0.75rem;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .zp-sub-nav::-webkit-scrollbar { display: none; }
    .zp-sub-back { font-size: 0.72rem; }
    .zp-sub-title {
        flex: 0 0 auto;
        text-align: left;
    }
    .zp-sub-links {
        flex: 0 0 auto;
        gap: 0.6rem;
    }
    .zp-sub-links a {
        font-size: 0.7rem;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .zp-sub-title { display: none; }
}

/* ── Main content area ── */
.zp-subpage-main {
    padding-top: 52px; /* nav height */
}

/* Tighten section spacing on subpages */
.zp-subpage-main .zp-section {
    padding: 4rem 1.5rem;
}

/* ── Shared subpage utilities ── */
.zp-section-subtitle { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 0.5rem; }
.zp-card-note { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 1rem; }
.zp-section--tight { margin-bottom: 0.5rem; }

/* Heartbeat history opacity fade */
.st-beat-aged-1 { opacity: 0.7; }
.st-beat-aged-2 { opacity: 0.55; }
.st-beat-aged-3 { opacity: 0.4; }
.st-beat-aged-4 { opacity: 0.28; }
.st-beat-aged-5 { opacity: 0.18; }