/* ================================================================
   MEDIA COCKPIT — audio / video / episode / instrumental singles (single-tcn_audio.php)
   Styles moved out of the template (no inline <style>). Tokens: tcn-base.css §0.
   ================================================================ */
he media cockpit: audio / video / episode / instrumental singles (single-tcn_audio.php)/* ═══ Type badge colors ═══ */
.type-badge--video{background:rgba(13,148,136,.15);color:#0d9488}
.type-badge--audio{background:rgba(192,132,252,.15);color:#c084fc}
.type-badge--episode{background:rgba(251,191,36,.15);color:#fbbf24}
.type-badge--article{background:rgba(52,211,153,.15);color:#34d399}
.type-badge--code{background:rgba(244,114,182,.15);color:#f472b6}
.type-badge--ticket{background:rgba(251,146,60,.15);color:#fb923c}
.type-badge--product{background:rgba(251,146,60,.15);color:#fb923c}
.type-badge--photo{background:rgba(96,165,250,.15);color:#60a5fa}
.type-badge--drop{background:rgba(255,140,0,.15);color:#ff8c00}

/* Header type badges */
.tcn-sp-badges{display:flex;gap:6px;margin-bottom:6px}
.tcn-sp-badge{display:inline-block;padding:3px 10px;border-radius:4px;font-size:.55rem;font-weight:800;letter-spacing:.1em;white-space:nowrap}
.tcn-sp-badge--price{background:var(--clr-primary-soft);color:var(--clr-primary);border:1px solid var(--clr-primary-soft-border)}

/* Metadata type badge */
.tcn-meta-type{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.65rem;font-weight:800;letter-spacing:.08em}

/* ═══ Cross-link Layout C cards ═══ */
.tcn-cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.tcn-cl-card{display:block;text-decoration:none;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s ease}
.tcn-cl-card:hover{border-color:var(--clr-primary-soft-border)}
.tcn-cl-card-img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--clr-surface-light)}
.tcn-cl-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.tcn-cl-card:hover .tcn-cl-card-img img{transform:scale(1.05)}
.tcn-cl-card-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;background:var(--clr-surface-light)}
.tcn-cl-badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:4px;font-size:.55rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;z-index:2}
.tcn-cl-card-body{padding:12px 14px 14px}
.tcn-cl-card-title{font-family:var(--dp-serif);color:var(--clr-text-main);font-size:.75rem;margin:0 0 4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; text-transform: uppercase; }
.tcn-cl-card-artist{color:var(--clr-primary);font-size:.65rem;font-weight:600;letter-spacing:.04em}
.tcn-cl-card-divider{border:none;border-top:1px dashed var(--clr-border);margin:8px 0}
.tcn-cl-card-type{font-size:.6rem;color:var(--clr-text-muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* Close button */
.tcn-close-btn {
    position:fixed;top:20px;right:20px;z-index:100;
    width:44px;height:44px;border-radius:50%;
    background:var(--clr-surface);
    border:1px solid var(--clr-border);
    color:var(--clr-text-main);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s, border-color .2s;
}
.tcn-close-btn:hover { background:var(--clr-surface-light);border-color:var(--clr-border); }

/* YouTube facade play button */
.tcn-yt-facade:hover > div { background:rgba(0,0,0,0.15) !important; }
.tcn-play-circle {
    width:72px;height:72px;border-radius:50%;
    background:rgba(0,0,0,0.6);
    border:2px solid rgba(255,255,255,0.2);
    display:flex;align-items:center;justify-content:center;
    transition:background .2s, border-color .2s, transform .2s;padding-left:4px;
}
.tcn-yt-facade:hover .tcn-play-circle {
    background:rgba(13,148,136,0.85);border-color:rgba(13,148,136,0.9);
    transform:scale(1.08);
}

/* ═══ Light theme (2026-09-12) — these single content "cockpit" pages
   (audio/video/episode/instrumental, all four served by this one shared
   template) were deliberately left dark earlier in this same visual-
   cohesion pass ("stays dark by design," the launch-pad-is-the-dark-part
   idea) but the site's actual direction moved everything else to light
   — direct instruction to bring these in line too, "to start."
   --clr-surface/--clr-text-main/--clr-border are already light values
   globally (#f7f7f8/#0a0a0a/rgba(0,0,0,.08)) — .cinematic-container was
   already a light card, just floating on the dark global --clr-bg
   canvas. Flipping --clr-bg here (scoped to these four post types'
   body classes, not :root) is the whole fix — same one-token-away
   pattern already used for every other page in this pass. The media/
   player zone (.tcn-sp-media and its embed placeholders) is
   deliberately left dark on purpose — a video/audio player reads as a
   "screen," the same way it would on a light page anywhere else. */
body.single-tcn_audio,
body.single-tcn_video,
body.single-tcn_episode,
body.single-tcn_instrumental {
    --clr-bg: var(--paper);
}
/* ═══ Override theme — hide featured-image hero bleed & match modal container ═══ */
.site-main::before { display:none !important; }
/* Body background */
body {
    background: var(--clr-bg,#ffffff) !important;
    background-attachment: fixed !important;
}
.cinematic-container {
    max-width:900px !important;
    margin:0 auto !important;
    padding:0 !important;
    background:var(--clr-surface);
    border-radius:var(--radius-lg);
    border:1px solid var(--clr-border);
    overflow:hidden;
    margin-top:110px !important;
    margin-bottom:60px !important;
    position:relative;
}

/* ═══ Modal-style single page header ═══ */
.tcn-sp-header {
    display:flex;align-items:center;gap:16px;
    padding:20px 24px;
    background:var(--clr-surface);
    border-bottom:1px solid var(--clr-border);
    position:relative;z-index:1;
}
.tcn-sp-thumb-wrap {
    flex-shrink:0;width:56px;height:56px;border-radius:var(--radius-sm);
    overflow:hidden;background:var(--clr-primary-soft);
    display:flex;align-items:center;justify-content:center;
}
.tcn-sp-thumb-wrap img {
    width:100%;height:100%;object-fit:cover;
}
.tcn-sp-thumb-wrap svg {
    color:var(--clr-primary);opacity:0.5;
}
.tcn-sp-title-text {
    flex:1;min-width:0;
}
.tcn-sp-title {
    font-size:clamp(1rem,2.5vw,1.3rem);
    font-family:var(--font-title,'Dela Gothic One',sans-serif);
    margin:0;line-height:1.2;color:var(--clr-text-main);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis; text-transform: uppercase; }
.tcn-sp-artist {
    font-size:0.78rem;color:var(--clr-primary);
    font-weight:600;margin-top:4px;
}
.tcn-sp-media {
    width:100%;background:var(--panel-2);overflow:hidden;
}
@media(max-width:600px){
    .tcn-sp-header{padding:14px 16px;gap:12px}
    .tcn-sp-thumb-wrap{width:44px;height:44px;border-radius:var(--radius-sm)}
}

@media (max-width: 900px) { .cinematic-container { margin-top: 84px !important; } }