/**
 * SITE LAYOUT - ENTANGLED AT A DISTANCE
 * Deep space station aesthetic — midnight blue-black void,
 * translucent panels, amber station lighting, parallax starfield.
 */

/* ========================================================================
   ANIMATED NEBULA — @property-driven gradient drift
   Slow-moving color clouds behind the starfield for atmosphere.
   ======================================================================== */

@property --nebula-x1 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 20%;
}
@property --nebula-y1 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 65%;
}
@property --nebula-x2 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 75%;
}
@property --nebula-y2 {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 30%;
}

@keyframes nebulaDrift {
    0%   { --nebula-x1: 20%; --nebula-y1: 65%; --nebula-x2: 75%; --nebula-y2: 30%; }
    33%  { --nebula-x1: 40%; --nebula-y1: 35%; --nebula-x2: 60%; --nebula-y2: 70%; }
    66%  { --nebula-x1: 65%; --nebula-y1: 55%; --nebula-x2: 30%; --nebula-y2: 45%; }
    100% { --nebula-x1: 20%; --nebula-y1: 65%; --nebula-x2: 75%; --nebula-y2: 30%; }
}

/* ========================================================================
   STARFIELD BACKGROUND — 3-layer parallax + nebula
   Layer 1 (body::before): 80 distant 1px stars, slow drift
   Layer 2 (.starfield-mid): 40 mid-range 1.5px stars, moderate drift
   Layer 3 (body::after): 20 near 2px stars, fast drift + twinkle
   Nebula: body background with @property animated radial gradients
   All animations use transform/opacity only (GPU composited).
   ======================================================================== */

body {
    overflow-x: hidden;
    /* Nebula v2 (owner: "not screaming space yet", 2026-08-08). The v1
       single-stop gradients read as flat haze; real nebulae have a BRIGHT
       CORE inside a wide halo, so each cloud now falls off in two stops
       (core -> halo -> void). Four clouds: violet + deep blue carry the
       drift, a long teal wisp cuts across, a rose glow anchors the far
       corner (mirrored animated positions, no extra @property machinery).
       Alphas are core values; text always sits on panels, never raw void. */
    background:
        radial-gradient(1000px 650px at var(--nebula-x1) var(--nebula-y1),
            rgba(140, 70, 255, 0.32), rgba(90, 40, 190, 0.14) 45%, transparent 72%),
        radial-gradient(750px 950px at var(--nebula-x2) var(--nebula-y2),
            rgba(40, 110, 235, 0.28), rgba(25, 70, 180, 0.12) 50%, transparent 75%),
        radial-gradient(1300px 500px at calc(100% - var(--nebula-x2)) var(--nebula-y1),
            rgba(45, 200, 200, 0.14), transparent 70%),
        radial-gradient(1200px 900px at calc(100% - var(--nebula-x1)) calc(100% - var(--nebula-y2)),
            rgba(220, 80, 150, 0.16), transparent 75%),
        var(--bg-base);
    animation: nebulaDrift 90s ease-in-out infinite;
}

/* Layer 1: Distant stars — tiny, dim, slow drift */
body::before {
    content: '';
    position: fixed;
    top: -2px;
    left: -2px;
    /* Star size pass 2026-08-07: each layer's dot size scales EVERY star in
       its box-shadow list at once — the cheap way to strengthen a weak
       field without touching hundreds of shadow entries. */
    width: 1.5px;
    height: 1.5px;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    animation: starDrift1 200s ease-in-out infinite alternate;
    box-shadow:
        1329px 248px rgba(255,255,255,0.35),
        521px 477px rgba(200,220,255,0.35),
        1405px 1136px rgba(255,255,255,0.32),
        85px 81px rgba(255,255,255,0.24),
        1054px 74px rgba(200,220,255,0.34),
        1456px 1136px rgba(255,245,230,0.24),
        1226px 589px rgba(255,255,255,0.35),
        346px 885px rgba(180,200,255,0.26),
        460px 709px rgba(255,255,255,0.22),
        218px 755px rgba(180,200,255,0.32),
        1672px 108px rgba(255,245,230,0.31),
        1908px 795px rgba(255,255,255,0.31),
        1718px 760px rgba(200,220,255,0.34),
        113px 486px rgba(180,200,255,0.4),
        1771px 496px rgba(255,255,255,0.28),
        948px 767px rgba(200,220,255,0.27),
        449px 566px rgba(255,255,255,0.32),
        370px 1113px rgba(200,220,255,0.23),
        797px 572px rgba(200,220,255,0.34),
        1746px 134px rgba(200,220,255,0.36),
        1668px 666px rgba(255,245,230,0.25),
        452px 1181px rgba(180,200,255,0.24),
        1042px 830px rgba(255,245,230,0.23),
        305px 525px rgba(180,200,255,0.35),
        897px 837px rgba(180,200,255,0.24),
        303px 1063px rgba(255,245,230,0.22),
        116px 244px rgba(200,220,255,0.33),
        1642px 884px rgba(255,255,255,0.28),
        1240px 978px rgba(180,200,255,0.39),
        1782px 43px rgba(255,255,255,0.34),
        1119px 566px rgba(180,200,255,0.22),
        910px 343px rgba(255,245,230,0.2),
        1498px 559px rgba(200,220,255,0.3),
        237px 631px rgba(200,220,255,0.23),
        1581px 350px rgba(255,255,255,0.32),
        1020px 59px rgba(255,255,255,0.39),
        1819px 649px rgba(200,220,255,0.21),
        1818px 1181px rgba(255,255,255,0.22),
        1015px 161px rgba(200,220,255,0.23),
        993px 1145px rgba(200,220,255,0.25),
        1806px 886px rgba(200,220,255,0.39),
        1566px 431px rgba(180,200,255,0.28),
        1395px 784px rgba(255,245,230,0.38),
        944px 267px rgba(200,220,255,0.24),
        712px 63px rgba(200,220,255,0.32),
        34px 165px rgba(255,255,255,0.25),
        1874px 84px rgba(180,200,255,0.21),
        507px 590px rgba(255,245,230,0.24),
        290px 1189px rgba(255,245,230,0.25),
        988px 853px rgba(200,220,255,0.22),
        1369px 902px rgba(180,200,255,0.28),
        976px 130px rgba(255,255,255,0.21),
        1511px 714px rgba(255,255,255,0.25),
        409px 1118px rgba(255,245,230,0.23),
        395px 590px rgba(255,245,230,0.25),
        1910px 174px rgba(255,245,230,0.36),
        1773px 1147px rgba(255,255,255,0.21),
        1127px 50px rgba(255,255,255,0.39),
        1758px 504px rgba(200,220,255,0.28),
        1005px 457px rgba(255,245,230,0.38),
        357px 796px rgba(255,255,255,0.4),
        563px 951px rgba(180,200,255,0.28),
        1980px 1158px rgba(255,245,230,0.23),
        627px 465px rgba(255,255,255,0.32),
        1130px 144px rgba(180,200,255,0.21),
        1216px 996px rgba(200,220,255,0.21),
        1060px 184px rgba(200,220,255,0.21),
        159px 501px rgba(255,245,230,0.22),
        1843px 1186px rgba(200,220,255,0.32),
        101px 187px rgba(255,245,230,0.33),
        1177px 1090px rgba(180,200,255,0.39),
        438px 663px rgba(200,220,255,0.25),
        288px 634px rgba(255,245,230,0.26),
        1559px 168px rgba(255,255,255,0.29),
        1173px 224px rgba(255,255,255,0.31),
        1056px 563px rgba(200,220,255,0.39),
        1824px 160px rgba(200,220,255,0.27),
        343px 917px rgba(180,200,255,0.32),
        1672px 1103px rgba(255,255,255,0.33),
        1155px 633px rgba(255,255,255,0.39);
}

/* Layer 2: Mid-range stars — moderate brightness (size pass 2026-08-07) */
.starfield-mid {
    position: fixed;
    top: -2px;
    left: -2px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    animation: starDrift2 140s ease-in-out infinite alternate;
    box-shadow:
        847px 799px 0 0 rgba(200,220,255,0.5),
        491px 528px 0 0 rgba(200,220,255,0.54),
        534px 804px 0 0 rgba(255,255,255,0.58),
        1022px 428px 0 0 rgba(255,245,230,0.53),
        1225px 463px 0 0 rgba(180,200,255,0.56),
        1784px 455px 0 0 rgba(200,220,255,0.47),
        386px 1181px 0 0 rgba(180,200,255,0.37),
        1487px 1102px 0 0 rgba(255,255,255,0.47),
        844px 107px 0 0 rgba(180,200,255,0.49),
        890px 437px 0 0 rgba(180,200,255,0.6),
        1114px 185px 0 0 rgba(255,245,230,0.48),
        425px 967px 0 0 rgba(255,255,255,0.44),
        462px 349px 0 0 rgba(255,245,230,0.5),
        383px 1050px 0 0 rgba(200,220,255,0.36),
        67px 370px 0 0 rgba(255,245,230,0.52),
        878px 186px 0 0 rgba(255,245,230,0.51),
        312px 654px 0 0 rgba(255,255,255,0.45),
        298px 1091px 0 0 rgba(255,245,230,0.4),
        1632px 133px 0 0 rgba(200,220,255,0.46),
        1137px 847px 0 0 rgba(200,220,255,0.44),
        1443px 995px 0 0 rgba(255,255,255,0.38),
        1789px 328px 0 0 rgba(255,245,230,0.38),
        263px 314px 0 0 rgba(180,200,255,0.39),
        383px 859px 0 0 rgba(200,220,255,0.58),
        1823px 1168px 0 0 rgba(180,200,255,0.54),
        1654px 499px 0 0 rgba(180,200,255,0.38),
        1704px 760px 0 0 rgba(200,220,255,0.52),
        1046px 609px 0 0 rgba(255,255,255,0.5),
        117px 711px 0 0 rgba(200,220,255,0.44),
        709px 837px 0 0 rgba(255,245,230,0.45),
        779px 1114px 0 0 rgba(255,255,255,0.4),
        96px 783px 0 0 rgba(255,245,230,0.54),
        491px 657px 0 0 rgba(200,220,255,0.51),
        656px 236px 0 0 rgba(180,200,255,0.4),
        1677px 531px 0 0 rgba(255,245,230,0.42),
        1559px 184px 0 0 rgba(255,245,230,0.46),
        1878px 544px 0 0 rgba(255,255,255,0.48),
        1877px 676px 0 0 rgba(255,245,230,0.48),
        1924px 545px 0 0 rgba(255,245,230,0.57),
        858px 346px 0 0 rgba(180,200,255,0.44);
}

/* Layer 3: Near stars — bright, twinkle (size pass 2026-08-07) */
body::after {
    content: '';
    position: fixed;
    top: -2px;
    left: -2px;
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    animation: starDrift3 90s ease-in-out infinite alternate, starTwinkle 8s ease-in-out infinite;
    box-shadow:
        1656px 537px 0 1px rgba(180,200,255,0.61),
        415px 255px 0 1px rgba(180,200,255,0.69),
        1162px 507px 0 1px rgba(200,220,255,0.72),
        1373px 1045px 0 1px rgba(255,255,255,0.81),
        78px 1038px 0 1px rgba(200,220,255,0.79),
        411px 1058px 0 1px rgba(255,245,230,0.6),
        678px 260px 0 1px rgba(255,255,255,0.72),
        553px 1113px 0 1px rgba(255,245,230,0.61),
        412px 167px 0 1px rgba(255,255,255,0.8),
        1447px 1167px 0 1px rgba(255,245,230,0.73),
        1123px 176px 0 1px rgba(255,255,255,0.8),
        1468px 454px 0 1px rgba(180,200,255,0.8),
        214px 964px 0 1px rgba(255,255,255,0.83),
        1626px 1121px 0 1px rgba(255,255,255,0.63),
        1304px 1150px 0 1px rgba(255,255,255,0.66),
        1104px 135px 0 1px rgba(255,245,230,0.78),
        1957px 1107px 0 1px rgba(200,220,255,0.62),
        987px 844px 0 1px rgba(200,220,255,0.78),
        807px 46px 0 1px rgba(255,255,255,0.57),
        1315px 100px 0 1px rgba(180,200,255,0.78);
}

@keyframes starDrift1 {
    from { transform: translate(0, 0); }
    to   { transform: translate(-60px, -35px); }
}

@keyframes starDrift2 {
    from { transform: translate(0, 0); }
    to   { transform: translate(40px, -25px); }
}

@keyframes starDrift3 {
    from { transform: translate(0, 0); }
    to   { transform: translate(-80px, 45px); }
}

@keyframes starTwinkle {
    0%   { opacity: 1; }
    25%  { opacity: 0.5; }
    50%  { opacity: 0.85; }
    75%  { opacity: 0.35; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    body, body::before, body::after, .starfield-mid {
        animation: none !important;
    }
}

/* ========================================================================
   PAGE STRUCTURE
   ======================================================================== */

#outerFrame {
    max-width: 1200px;
    margin: 0 auto;
    background-color: transparent;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* ========================================================================
   HEADER — Translucent station glass
   ======================================================================== */

header {
    background: linear-gradient(180deg,
        rgba(6, 11, 24, 0.3) 0%,
        rgba(12, 27, 58, 0.8) 100%);
    position: relative;
    color: var(--white);
    padding: var(--spacing-xxl) var(--spacing-lg);
    text-align: center;
    border-bottom: 1px solid rgba(212, 160, 39, 0.25);
}

/* Subtle amber glow along header bottom */
header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: radial-gradient(ellipse at center,
        rgba(212, 160, 39, 0.5) 0%,
        transparent 70%);
    pointer-events: none;
}

header > * {
    position: relative;
    z-index: 1;
}

.header-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: var(--spacing-xs);
    text-shadow: 0 0 30px rgba(212, 160, 39, 0.15);
}

.site-tagline {
    font-family: var(--font-heading);
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-warm);
    margin: 0;
    opacity: 0.85;
}

/* ========================================================================
   NAVIGATION — Station control bar
   ======================================================================== */

nav {
    background-color: rgba(6, 11, 24, 0.85);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    z-index: 20;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    font-family: var(--font-heading);
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
    display: block;
    text-decoration: none;
    color: var(--text-on-dark-accent);
    font-size: var(--font-size-sm);
    letter-spacing: 0.03em;
}

.nav-link:hover {
    background-color: rgba(212, 160, 39, 0.15);
    color: var(--accent-warm);
    text-decoration: none;
}

.nav-link.active {
    background-color: rgba(212, 160, 39, 0.2);
    color: var(--accent-warm);
    border-bottom: 2px solid var(--accent-warm);
}

/* ========================================================================
   DROPDOWN MENUS
   ======================================================================== */

.nav-item.dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(6, 11, 24, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-sm);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-normal);
    z-index: 1000;
    list-style: none;
    padding: var(--spacing-sm) 0;
    margin: 0;
    border: 1px solid var(--border);
}

.nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-item {
    color: var(--text-on-dark-accent);
    padding: 0.75rem 1.25rem;
    display: block;
    text-decoration: none;
    transition: all var(--transition-normal);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
}

.dropdown-item:hover {
    background-color: rgba(212, 160, 39, 0.15);
    color: var(--accent-warm);
    text-decoration: none;
}

.dropdown-item.active {
    background-color: rgba(212, 160, 39, 0.2);
    color: var(--accent-warm);
}

/* Dropdown arrow indicator */
.nav-item.dropdown > .nav-link::after {
    content: ' \25BC';
    font-size: 0.7rem;
    margin-left: var(--spacing-sm);
    transition: transform var(--transition-normal);
}

.nav-item.dropdown:hover > .nav-link::after {
    transform: rotate(180deg);
}

/* ========================================================================
   INSTAGRAM LINK (Site-Specific)
   ======================================================================== */

.instagram-link {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
    text-decoration: none;
}

.instagram-link:hover {
    background-color: var(--hover-lighten);
    text-decoration: none;
}

.instagram-link:hover svg {
    transform: scale(1.1);
    transition: transform 0.2s;
}

/* ========================================================================
   HERO SECTION — Landing page cinematic intro
   ======================================================================== */

.hero-section {
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-lg);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--spacing-xl);
}

.hero-tagline {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 500;
    color: var(--accent-warm);
    font-style: italic;
    margin-bottom: var(--spacing-xl);
    letter-spacing: 0.02em;
    position: relative;
    min-height: 3.5em;
}

.tagline-quote {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    margin: 0;
    text-align: center;
}

.tagline-quote.active {
    opacity: 1;
}

.tagline-attribution {
    display: block;
    font-size: 0.75em;
    font-style: normal;
    font-weight: 400;
    color: var(--text-on-dark-secondary);
    margin-top: 0.3em;
    letter-spacing: 0.06em;
}

.hero-description {
    max-width: 720px;
    margin: 0 auto;
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--text-on-dark-secondary);
}

.hero-description p:last-child {
    margin-bottom: 0;
}

.hero-station-label {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-warm);
    border: 1px solid var(--accent-warm-transparent);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-lg);
    opacity: 0.8;
}

/* ========================================================================
   CONTENT SECTIONS — Translucent station panels
   ======================================================================== */

.content-section {
    background: var(--surface-base);
    padding: var(--spacing-xl) var(--spacing-lg);
    margin: 0;
    border-left: none;
    border-radius: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.content-section + .content-section {
    border-top: 1px solid var(--border);
}

.content-section .section-title {
    font-family: var(--font-heading);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: var(--font-size-h3);
    color: var(--text-on-dark-accent);
}

.content-section .section-subtitle {
    text-align: center;
    color: var(--text-on-dark-secondary);
    margin-top: calc(-1 * var(--spacing-lg));
    margin-bottom: var(--spacing-xl);
    font-size: var(--font-size-md);
}

.content-section fieldset {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-light);
}

.content-section fieldset legend {
    font-weight: 600;
    color: var(--text-on-dark-accent);
    padding: 0 var(--spacing-md);
    background: var(--surface-light);
}

/* ========================================================================
   CONTENT CARDS — Vertical feed with type identification
   ======================================================================== */

.content-feed {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 800px;
    margin: 0 auto;
}

.content-card {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-left: 4px solid var(--card-accent, var(--primary-accent));
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--spacing-lg);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.content-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    border-left-color: var(--card-accent-bright, var(--card-accent, var(--primary-accent)));
}

/* Card type accents — selectors match the contentType slugs stored in
   siteContent.contentType (defined via the column-comment Options[] list).
   Renaming a slug = update both the column comment and these selectors. */
.content-card[data-type="Audio_Episode"]          { --card-accent: var(--accent-warm); --card-accent-bright: var(--accent-warm-bright); }
.content-card[data-type="Released_Script"]        { --card-accent: #5CB870; --card-accent-bright: #6FCC83; }
.content-card[data-type="Codex_Entry"]            { --card-accent: var(--primary-accent); --card-accent-bright: #6BB4F0; }
.content-card[data-type="Dev_Notes_Station_Log"]  { --card-accent: var(--tertiary); --card-accent-bright: var(--tertiary-bright); }
.content-card[data-type="Store"]                  { --card-accent: var(--accent-warm); --card-accent-bright: var(--accent-warm-bright); }
.content-card[data-type="Comm"]                   { --card-accent: #E87040; --card-accent-bright: #F08A60; }
.content-card[data-type="Fan_Content"]            { --card-accent: #7AB648; --card-accent-bright: #8EC85C; }
.content-card[data-type="Sneak_Peek"]             { --card-accent: var(--accent-warm-dark); --card-accent-bright: var(--accent-warm); }

/* Card header */
.content-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    gap: var(--spacing-sm);
}

.content-card__type {
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--card-accent, var(--primary-accent));
}

.content-card__status {
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 99px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.content-card__status--active {
    background: rgba(74, 158, 232, 0.15);
    color: var(--primary-accent);
}

.content-card__status--production {
    background: var(--accent-warm-transparent);
    color: var(--accent-warm);
}

.content-card__status--coming {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-on-dark-secondary);
}

.content-card__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
    color: var(--text-on-dark);
}

.content-card__body {
    color: var(--text-on-dark-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Dev Notes card — handwritten bubble preview */
.content-card[data-type="Dev_Notes_Station_Log"] .content-card__body {
    font-family: var(--font-handwritten);
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--text-on-dark);
}

.dev-note-bubble {
    background: rgba(255, 107, 53, 0.06);
    border: 1px solid rgba(255, 107, 53, 0.15);
    border-radius: 12px;
    padding: var(--spacing-md) var(--spacing-lg);
    font-family: var(--font-handwritten);
    font-size: 1.2rem;
    line-height: 1.5;
    position: relative;
    transform: rotate(var(--rotate, 0deg));
    margin-bottom: var(--spacing-sm);
}

.dev-note-bubble + .dev-note-bubble {
    margin-top: calc(-1 * var(--spacing-sm));
}

/* ========================================================================
   TEASER CARD TYPES
   ======================================================================== */

.content-card[data-type="Character_File"]      { --card-accent: #C4A035; --card-accent-bright: #D4B045; }
.content-card[data-type="Scene_Fragment"]      { --card-accent: #4A90A4; --card-accent-bright: #5EAABB; }
.content-card[data-type="Incident_Report"]     { --card-accent: #CC4444; --card-accent-bright: #DD5555; }
.content-card[data-type="Encrypted_Fragment"]  { --card-accent: #7B68AE; --card-accent-bright: #9080C0; }

/* ========================================================================
   INLINE REVEAL — <details> expanders within content
   ======================================================================== */

.inline-reveal {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: var(--spacing-sm) 0;
    background: rgba(0, 0, 0, 0.15);
}

.inline-reveal > summary {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--font-size-sm);
    letter-spacing: 0.04em;
    color: var(--accent-warm);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: background var(--transition-fast);
}

.inline-reveal > summary::-webkit-details-marker { display: none; }

.inline-reveal > summary::before {
    content: '\25B6';
    font-size: 0.6em;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.inline-reveal[open] > summary::before {
    transform: rotate(90deg);
}

.inline-reveal > summary:hover {
    background: rgba(255, 255, 255, 0.03);
}

.inline-reveal .reveal-content {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border);
    color: var(--text-on-dark-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

.inline-reveal .reveal-content p:last-child {
    margin-bottom: 0;
}

.inline-reveal.subtle {
    border: none;
    background: rgba(255, 255, 255, 0.02);
}

/* ========================================================================
   KEYWORD REVEAL — Hover/focus tooltip
   ======================================================================== */

.keyword-reveal {
    position: relative;
    display: inline;
    color: var(--accent-warm);
    border-bottom: 1px dotted var(--accent-warm-transparent);
    cursor: help;
}

.keyword-reveal__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 280px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--surface-lighter);
    border: 1px solid var(--accent-warm-transparent);
    border-radius: var(--radius-sm);
    color: var(--text-on-dark);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.keyword-reveal__tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--surface-lighter);
}

.keyword-reveal:hover .keyword-reveal__tip,
.keyword-reveal:focus-within .keyword-reveal__tip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 768px) {
    .keyword-reveal__tip {
        left: 0;
        transform: none;
        max-width: 240px;
    }

    .keyword-reveal__tip::after {
        left: 16px;
        transform: none;
    }
}

/* ========================================================================
   SWIPE CONTAINER — Card navigation
   ======================================================================== */

.swipe-container {
    position: relative;
    overflow: hidden;
}

.swipe-viewport {
    position: relative;
    min-height: 60px;
    overflow: hidden;
}

.swipe-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    margin-top: var(--spacing-xs);
}

.swipe-counter {
    font-family: var(--font-heading);
    font-size: var(--font-size-xs);
    color: var(--text-on-dark-secondary);
    letter-spacing: 0.05em;
    user-select: none;
}

.swipe-arrows {
    display: flex;
    gap: var(--spacing-xs);
}

.swipe-arrow {
    background: var(--surface-lighter);
    color: var(--text-on-dark-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--transition-fast);
    padding: 0;
    min-height: auto;
}

.swipe-arrow:hover:not(:disabled) {
    background: var(--accent-warm-transparent);
    color: var(--accent-warm);
    border-color: var(--accent-warm-transparent);
    transform: none;
}

.swipe-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Collapsed feed type */
.feed-type-collapsed {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-lg);
}

.feed-type-collapsed > summary {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    color: var(--text-on-dark-secondary);
    letter-spacing: 0.04em;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.feed-type-collapsed > summary::-webkit-details-marker { display: none; }

.feed-type-collapsed > summary::before {
    content: '\25B6';
    font-size: 0.6em;
    transition: transform var(--transition-fast);
}

.feed-type-collapsed[open] > summary::before {
    transform: rotate(90deg);
}

/* Card media */
.content-card__image {
    margin: var(--spacing-sm) 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.content-card__image img {
    width: 100%;
    height: auto;
    display: block;
}

.content-card__audio {
    margin: var(--spacing-sm) 0;
}

.content-card__audio audio {
    width: 100%;
}

.content-card__link {
    margin-top: var(--spacing-sm);
}

.content-card__subtitle {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
}

/* ========================================================================
   FOOTER
   ======================================================================== */

footer {
    background-color: rgba(12, 27, 58, 0.85);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 768px) {
    #outerFrame {
        margin: 0;
    }

    header {
        padding: var(--spacing-xl) var(--spacing-md);
    }

    nav {
        padding: var(--spacing-md);
    }

    .nav-menu {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .nav-container {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .instagram-link {
        align-self: flex-end;
        margin-top: var(--spacing-sm);
    }

    .content-section {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .hero-section {
        padding: var(--spacing-xl) var(--spacing-md);
    }

    .content-card {
        padding: var(--spacing-md);
    }

    .swipe-arrow {
        width: 40px;
        height: 40px;
        min-height: 44px;
        min-width: 44px;
    }
}

@media (max-width: 480px) {
    .nav-link {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    .content-card__header {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ========================================================================
   NAV DROPDOWN CLOSE-ON-SELECT (mobile sticky :hover fix)
   Temporarily forces dropdown menus closed after a nav link is clicked,
   so the sticky hover state on touch devices releases cleanly.
   JS adds .nav-force-closed on click and removes it after 400ms.
   ======================================================================== */
nav.nav-force-closed .dropdown-menu,
nav.nav-force-closed .nav-item.dropdown:hover .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ========================================================================
   AUTO-SELECT NESTED FORMS
   When makeSmartNestedForm() is called with 'auto_select' => true,
   the select triggers submission on change via data-ajax-change.
   The submit button stays in the DOM as a progressive-enhancement fallback
   but is hidden since no manual click is needed.
   ======================================================================== */
.nested-form.auto-select button[type="submit"],
.nested-form.auto-select .form-actions {
    display: none;
}

/* ========================================================================
   STORY WORKSPACE (drag-to-reorder scene tree)
   Generic sortable behaviour + drop affordance live in universal.css;
   these are EAD-only cosmetics for the chapter/scene workspace.
   ======================================================================== */
.story-chapter-wrap { position: relative; margin: 0.5rem 0; }
.story-chapter { margin: 0; }
.story-chapter > summary {
    cursor: pointer;
    font-weight: 600;
    min-height: 2rem;
    align-items: center;
    /* clear space for the overlaid controls (stage bar + Edit button) so the
       title/count cluster on the left never collides with them */
    padding-right: 290px;
}
/* count rides with the title on the left now, not pushed to the right edge */
.story-chapter-title .scene-meta { font-weight: 400; }
/* Open/close indicator: a +/- on the FAR LEFT of the chapter header, before
   anything, replacing the default disclosure triangle. + collapsed, - open. */
.story-chapter > summary { list-style: none; }
.story-chapter > summary::-webkit-details-marker { display: none; }
.story-chapter > summary::before {
    content: "+";
    flex: 0 0 auto;
    width: 1em;
    margin-right: 0.5rem;
    font-family: monospace;
    font-weight: 700;
    opacity: 0.6;
    text-align: center;
}
.story-chapter[open] > summary::before { content: "\2212"; }
/* Suppress the framework's right-side summary::after +/- cue for chapters
   (we use the far-left ::before above instead). Both selectors are needed:
   the open-state rule must out-specify universal.css's details[open] rule. */
.story-chapter > summary::after,
.story-chapter[open] > summary::after { content: none; }
/* Chapter controls (stage bar, etc.) sit on the summary row but OUTSIDE the
   <summary> element, so clicking them never toggles the chapter open/closed.
   This is the toggle-hit-zone exclusion: the summary owns open/close, the
   overlay owns the controls. */
.story-chapter-controls {
    position: absolute;
    top: 0;
    right: 0.6rem;
    height: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
}
#story-workspace .story-chapter-controls .stage-bar { margin-left: 0; }
/* Two-child split: title hugs left, count+pill cluster hugs right. The
   baseline summary is already flex + space-between, so grouping is all
   that's needed. */
.story-chapter-title { flex: 1 1 auto; min-width: 0; }
.story-chapter-meta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.story-chapter-meta .story-stage { margin: 0; }  /* cluster gap owns spacing */
.scene-list { display: flex; flex-direction: column; gap: 0.25rem; }
.scene-row {
    display: flex;
    flex-wrap: wrap;   /* inline-edit slot drops to its own full-width row */
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--surface-light);
    border-radius: 4px;
}
.scene-row:hover { background: var(--surface-lighter); }
.scene-grip { cursor: grab; opacity: 0.5; font-family: monospace; }
.scene-title { flex: 1 1 auto; }
.scene-meta { opacity: 0.7; font-size: 0.85em; white-space: nowrap; }
.scene-row .button.small { flex: 0 0 auto; }
/* Synopsis hover card: an "i" badge that reveals the scene synopsis on
   rollover (and keyboard focus) and hides on rollout. Pure CSS, no JS. */
.scene-syn { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; margin-left: 0.4rem; vertical-align: middle; }
.scene-syn-icon {
    width: 16px; height: 16px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.72rem; font-style: italic; font-weight: 700;
    line-height: 1;
    border: 1px solid var(--border);
    color: var(--text-on-dark-secondary);
    cursor: help;
}
.scene-syn:hover .scene-syn-icon,
.scene-syn:focus-visible .scene-syn-icon {
    color: var(--text-on-dark);
    border-color: var(--text-on-dark-secondary);
}
/* The in-row .scene-syn-card is now ONLY the accessible text source (it
   carries .sr-only in the markup). It is no longer the visible reveal: a
   position:absolute card is clipped by any ancestor with overflow != visible
   (scroll panels, the details body, body{overflow-x}), and z-index cannot
   escape an overflow clip. universal.js (setupSynopsisHovercards) mirrors the
   text into #syn-hovercard below, promoted to <body> and fixed-positioned, so
   nothing can clip it. Mirrors the timeline tooltip pattern in
   story-timeline.js. */
.syn-hovercard {
    display: none;
    position: fixed;
    width: 260px; max-width: 60vw;
    padding: 0.5rem 0.65rem;
    background: var(--surface-lightest);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem; font-weight: 400; line-height: 1.45;
    color: var(--text-on-dark);
    white-space: normal;
    z-index: 1000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
.syn-hovercard.is-visible { display: block; }
/* "small" carries no size in the base framework (only a flex rule), so
   workspace buttons inherited full .button padding. Give them a real
   compact size, scoped to the workspace, for both + Scene and Edit. */
#story-workspace .button.small {
    padding: 0.25rem 0.6rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
}
.story-add-scene { margin: 0.35rem 0 0.75rem; align-self: flex-start; }
.story-reorder-actions {
    position: sticky;
    bottom: 0;
    padding: 0.6rem 0;
    background: var(--surface-light);
}
/* Nothing to commit until a drag marks the form dirty (serializeSortable adds
   .sortable-dirty). So the reorder bar only appears once the order changed. */
form:not(.sortable-dirty) .story-reorder-actions {
    display: none;
}
form.sortable-dirty .story-reorder-actions .button {
    box-shadow: 0 0 0 2px var(--primary);
}

/* ========================================================================
   STORY: devStage chip. Heading-line status, separated + color-coded.
   Progress ramp idea>draft>wip>final = red>orange>yellow>green, wired to
   the framework --accent-* tokens (per-site retunable in config.php).
   Element-first single span; transparency applied here via color-mix, the
   token stays a solid hue. Never inline.
   ======================================================================== */
.story-stage {
    --stage-c: var(--border);
    display: inline-block;
    flex: 0 0 auto;
    margin: 0 0.15rem 0 0.5rem;       /* spaced a tad from other info */
    padding: 0.04rem 0.42rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.55;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: baseline;
    border: 1px solid var(--stage-c);
    border-radius: 999px;             /* thin pill cell */
    background: color-mix(in srgb, var(--stage-c) 16%, transparent);
    color: color-mix(in srgb, var(--stage-c) 55%, var(--white));
}
.story-stage--idea    { --stage-c: var(--accent-red);    }  /* brainstorm  */
.story-stage--draft   { --stage-c: var(--accent-orange); }  /* drafting    */
.story-stage--wip     { --stage-c: var(--accent-yellow); }  /* in progress */
.story-stage--final   { --stage-c: var(--accent-green);  }  /* final       */
.story-stage--unknown { --stage-c: var(--border); }

/* ========================================================================
   STORY WORKSPACE: dev-stage bar (timeline-styled, tap to set + autosave).
   Reuses the shared .stage-bar markup + setupStageBars() JS (which toggles
   is-past / is-current / is-future on tap), restyled to echo the site
   timeline: a connecting rail with a gradient progress fill that stops at
   the current dot, plus a single current-stage pill in a fixed right slot.
   Fully class-driven (the tap updates the look instantly with no server
   round-trip); the same tap fires the button-AJAX that persists the value
   to the hidden #story-stage-sink. EAD-scoped on purpose; the generic bar
   stays untouched for any future makeFormFields use.
   ======================================================================== */
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar {
    position: relative;
    display: inline-block;
    width: 196px;            /* 132 track + 64 pill slot */
    height: 18px;
    margin-left: 0.5rem;
    vertical-align: middle;
}
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar > input[type="hidden"] { display: none; }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-track {
    position: absolute;
    left: 0; top: 0;
    width: 132px; height: 18px;
}
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-rail {
    position: absolute;
    left: 5px; right: 5px; top: 50%;
    height: 2px; transform: translateY(-1px);
    background: color-mix(in srgb, var(--border) 100%, transparent);
    background-color: rgba(255, 255, 255, 0.10);
}
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-fill {
    position: absolute;
    left: 5px; top: 50%;
    width: 0; height: 2px; transform: translateY(-1px);
    background: linear-gradient(to right,
        var(--accent-red), var(--accent-orange),
        var(--accent-yellow), var(--accent-green));
    background-size: 122px 2px;
    transition: width 0.15s ease;
}
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-step {
    --stage-c: var(--border);
    position: absolute; top: 0;
    width: 18px; height: 18px;
    /* Fully override the generic form-bar sizing (universal.css gives steps
       min-width 5.5rem + 44px touch floor for LABELLED form bars) — without
       these zeroes the compact dots ballooned and the rail rode above them
       (owner-caught overlap, 2026-08-08). */
    min-width: 0; min-height: 0;
    padding: 0; margin: 0;
    background: none; border: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-step[data-stage-value="idea"]  { --stage-c: var(--accent-red);    left: -4px;  }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-step[data-stage-value="draft"] { --stage-c: var(--accent-orange); left: 37px;  }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-step[data-stage-value="wip"]   { --stage-c: var(--accent-yellow); left: 77px;  }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-step[data-stage-value="final"] { --stage-c: var(--accent-green);  left: 118px; }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-dot {
    position: relative; z-index: 1;
    width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box;
    background: transparent;
    border: 2px solid color-mix(in srgb, var(--stage-c) 50%, transparent);
}
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-step.is-past .stage-bar-dot {
    background: color-mix(in srgb, var(--stage-c) 55%, transparent);
    border-color: transparent;
}
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-step.is-current .stage-bar-dot {
    width: 12px; height: 12px;
    background: var(--stage-c); border-color: transparent;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-c) 22%, transparent);
}
/* progress fill stops at the current dot (centres: idea 5, draft 46, wip 86, final 127) */
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar:has(.stage-bar-step[data-stage-value="idea"].is-current)  .stage-bar-fill { width: 0;     }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar:has(.stage-bar-step[data-stage-value="draft"].is-current) .stage-bar-fill { width: 41px;  }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar:has(.stage-bar-step[data-stage-value="wip"].is-current)   .stage-bar-fill { width: 81px;  }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar:has(.stage-bar-step[data-stage-value="final"].is-current) .stage-bar-fill { width: 122px; }
/* the step labels are not shown inline; the current stage renders in the pill slot */
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-step-label { display: none; }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar .stage-bar-pill {
    --p: var(--border);
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    display: inline-block;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; line-height: 1.4; white-space: nowrap;
    padding: 0.04rem 0.42rem; border-radius: 999px;
    border: 1px solid var(--p);
    background: color-mix(in srgb, var(--p) 16%, transparent);
    color: color-mix(in srgb, var(--p) 55%, var(--white));
}
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar:has([data-stage-value="idea"].is-current)  .stage-bar-pill { --p: var(--accent-red);    }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar:has([data-stage-value="draft"].is-current) .stage-bar-pill { --p: var(--accent-orange); }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar:has([data-stage-value="wip"].is-current)   .stage-bar-pill { --p: var(--accent-yellow); }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar:has([data-stage-value="final"].is-current) .stage-bar-pill { --p: var(--accent-green);  }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar:has([data-stage-value="idea"].is-current)  .stage-bar-pill::after { content: "Idea";  }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar:has([data-stage-value="draft"].is-current) .stage-bar-pill::after { content: "Draft"; }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar:has([data-stage-value="wip"].is-current)   .stage-bar-pill::after { content: "WIP";   }
#story-workspace :is(.scene-row, .story-chapter-controls) > .stage-bar:has([data-stage-value="final"].is-current) .stage-bar-pill::after { content: "Final"; }
/* fire-and-forget AJAX target for stage saves; visual already updated client-side */
.story-stage-sink { display: none; }

/* ========================================================================
   STORY: Act block header + scene-context breadcrumb
   ======================================================================== */
.story-act { margin: 0.75rem 0 0.25rem; }
.story-act-header {
    margin: 0;
    padding: 0.35rem 0;
    border-bottom: 2px solid var(--primary);
    font-weight: 700;
}
.story-scene-context {
    font-size: 0.9em;
    opacity: 0.75;
    margin: 0 0 0.5rem;
}

/* ========================================================================
   PARSED AUDIO-DRAMA PREVIEW (classes emitted by parseAudioDramaScript()).
   Dialogue / narration are monochromatic weight+opacity variations;
   production tags use the theme's semantic tokens for distinct,
   theme-consistent hues. Cosmetic, tune freely later.
   ======================================================================== */
/* One flex gap = identical spacing between every line, immune to the
   margin-collapse / per-class inconsistency that mixed <p> produced. */
.ads-render { display: flex; flex-direction: column; gap: 1rem; }
.ads-render > p { margin: 0; line-height: 1.4; }
.ads-dialogue    { color: var(--text); }
.ads-speaker     { font-weight: 700; }
.ads-variant     { font-weight: 400; opacity: 0.6; font-size: 0.85em; }
.ads-narration   { color: var(--text); opacity: 0.7; font-style: italic; }
.ads-location,
.ads-time,
.ads-duration    { font-size: 0.85em; letter-spacing: 0.03em; opacity: 0.7; }
.ads-fx--sound   { color: var(--accent-blue); }
.ads-fx--music   { color: var(--success); }
.ads-fx--ambient { color: var(--warning); }
.ads-shift       { color: var(--primary); font-weight: 600; }
.ads-memory-begin,
.ads-memory-end  { color: var(--info-dark, var(--info)); font-style: italic; }
.ads-unknown     {
    opacity: 0.55;
    border-left: 2px dashed var(--border);
    padding-left: 0.5rem;
}

/* Edit and Preview share one fixed-height box that scrolls INTERNALLY, so
   the two panes are the same size and the toggle preserves the scroll
   position by source line (see script-editor.js read/applyAnchor). The
   preview's own text styling (gap, line-height, colors) above is unchanged.
   EAD-specific: overrides the framework's content-growing textarea. */
/* ========================================================================
   SCENE TIMELINE v2 (swimlanes). Horizontal axis = SFUT time, one lane
   per location. Geometry rides as inline custom props from
   renderScaledTimeline(): --stl-w (canvas px), --x / --w (block px),
   --accent (era/category). Navigator wired by story-timeline.js.
   Token-based, element-first. Functional first, tune visuals later.
   ======================================================================== */
.stl2-empty { padding: 1rem; }

.stl2-nav {
    position: sticky;
    top: 0;
    z-index: 4;
    height: 20px;
    margin-bottom: 0.4rem;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    touch-action: none;
}
.stl2-nav-inner { position: relative; width: 100%; height: 100%; }
/* Jump-bar marker: a dot, same shape language as the visitor timeline's
   .timeline-event__dot (minus its hover pulse, unwanted on this view). */
.stl2-tick {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--accent, var(--primary));
}
.stl2-window {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 10px;
    pointer-events: none;
    border: 1px solid var(--primary);
    border-radius: 3px;
    background: color-mix(in srgb, var(--primary) 20%, transparent);
}

.stl2-scroll {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
}
.stl2-canvas { position: relative; width: var(--stl-w, 100%); min-width: 100%; }
/* Era wash: low-opacity gradient behind everything, keyed to era x-bands
   by renderScaledTimeline (--stl-era). Lanes sit above it (z-index: 1). */
.stl2-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--stl-era, transparent);
    opacity: 0.16;
}

.stl2-lane { position: relative; z-index: 1; border-bottom: 1px solid var(--border); }
.stl2-lane:last-child { border-bottom: 0; }
/* The lane's vector is one SVG path drawn by story-timeline.js (thin,
   swelling before/through/after each measured label, back to thin), so
   there is no CSS pseudo-line here. See .stl2-vec below. */
.stl2-lane-label {
    position: sticky;
    left: 0;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    box-sizing: border-box;
    background: var(--surface-light);
    border-right: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.82em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stl2-lane-n { opacity: 0.6; font-weight: 400; }

/* A scene = the lane's thin line thickening into a labelled band here.
   Band width = the content-driven column width (shared across lanes at the
   same instant, so simultaneous scenes align). Within one location no two
   scenes share an instant, so each band owns its space; no alternating.
   Full title + SFUT ride the title attribute (hover tooltip). */
/* Scene wrapper: positions at time-x, full lane height, the click target.
   No shape, background, or hover; the vector is the SVG below. */
.stl2-swell {
    position: absolute;
    left: var(--x, 0);
    top: 0;
    height: 100%;
    width: var(--w, 90px);
    box-sizing: border-box;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
button.stl2-swell { font: inherit; color: inherit; }
/* One SVG per lane (built by story-timeline.js): a single path, ONE
   colour end to end, thin then swelling around each label then thin.
   Behind the labels; never intercepts clicks. */
.stl2-vec {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}
.stl2-vec path {
    fill: var(--text-on-dark-secondary);
    opacity: 0.5;
}
/* Plain label on top of the vector. Natural width (consistent, never
   truncated), never tapered, never animated. */
.stl2-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: max-content;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 7px;
    background: var(--surface-lighter);
    border: 1px solid var(--accent, var(--primary));
    border-radius: 5px;
    text-align: left;
}
.stl2-s-title {
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
}
.stl2-s-sfut {
    font-size: 0.66rem;
    opacity: 0.7;
    line-height: 1.1;
    white-space: nowrap;
}

/* Custom hover tooltip for swells. Native title attribute is rendered by
   the browser/OS and cannot be styled (width/height/line breaks). Story-
   timeline.js shares ONE of these elements per page, repopulated per
   swell from data-tip-cs / data-tip-syn. Block-level children give the
   line break between C#-S# and synopsis automatically. */
.stl2-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    max-width: 220px;
    padding: 8px 10px;
    background: var(--surface-lightest);
    border: 1px solid var(--accent-blue, var(--primary));
    border-radius: 5px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    font-size: 0.75rem;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: normal;
    display: none;
}
.stl2-tooltip.is-visible { display: block; }
.stl2-tt-cs {
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.stl2-tt-syn { opacity: 0.85; }
.stl2-tt-cs:empty,
.stl2-tt-syn:empty { display: none; }

.scene-timeline-unplaced { margin-top: 1rem; }
.scene-timeline-unplaced > summary { cursor: pointer; font-weight: 600; }
.stl2-unplaced-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
}
.stl2-u-row {
    display: grid;
    grid-template-columns: 11rem 1fr auto;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    padding: 0.35rem 0.5rem;
    box-sizing: border-box;
    background: var(--surface-light);
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
}
button.stl2-u-row { font: inherit; color: inherit; }
.stl2-u-row:hover { background: var(--surface-lighter); }
.stl2-u-loc   { opacity: 0.7; font-size: 0.85em; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
.stl2-u-title { font-weight: 600; }
.stl2-u-sfut  { opacity: 0.6; font-size: 0.8em; white-space: nowrap; }

/* ── Story/Codex download toolbar + Codex Workspace ─────────────────────────
   Subtle separated fieldsets at the top of the Story and Codex workspaces
   (download the compiled script / codex doc; browse lenses + name filter).
   The codex workspace reuses the #story-workspace scope (same visual
   language: chapters -> groups, scenes -> entries); .codex-* classes carry
   only the deltas. */

.story-download-bar,
.codex-toolbar {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
.story-download-bar legend,
.codex-toolbar legend {
    font-size: var(--font-size-sm);
    color: var(--text-on-dark-secondary);
    padding: 0 var(--spacing-xs);
}
.story-download-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}
.story-download-bar .form-text { margin: var(--spacing-xs) 0 0; }

.codex-toolbar .button-group { margin-bottom: var(--spacing-sm); }
.codex-filter-input {
    width: 100%;
    max-width: 28rem;
}

/* Entry name doubles as the read-view opener: a link-styled button so the
   row reads as a reference index, not a wall of buttons. */
.codex-name-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-accent);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.codex-name-link:hover,
.codex-name-link:focus-visible { text-decoration: underline; }

/* Dependency indent: one step per generation, so a child sits under its
   parent and a grandchild sits under THAT child. The list is flat (rows are
   flex boxes with their own background, and the name filter hides rows
   individually), so depth rides on data-depth from codex.php's row renderer
   rather than nested <ul>s. Beyond level 5 the indent holds steady so deep
   branches can't march off the right edge. */
.codex-row[data-depth="1"] { margin-left: var(--spacing-lg); }
.codex-row[data-depth="2"] { margin-left: calc(var(--spacing-lg) * 2); }
.codex-row[data-depth="3"] { margin-left: calc(var(--spacing-lg) * 3); }
.codex-row[data-depth="4"] { margin-left: calc(var(--spacing-lg) * 4); }
.codex-row[data-depth="5"] { margin-left: calc(var(--spacing-lg) * 5); }

/* Published-to-visitor-site marker dot (inline inside .scene-title). */
.codex-pub {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent-green);
    margin-left: var(--spacing-xs);
    vertical-align: middle;
}

/* Read view rides above the edit form as its own collapsed <details>. */
.codex-read-details { margin-bottom: var(--spacing-md); }
.codex-read-details > summary { cursor: pointer; }

/* Read view: comfortable reference-page rhythm. */
.codex-read-body { max-width: 46rem; }
.codex-read-body p,
.codex-read-body ul { margin-bottom: var(--spacing-sm); }
.codex-read-body h4,
.codex-read-body h5,
.codex-read-body h6 { margin: var(--spacing-md) 0 var(--spacing-xs); }
.codex-read-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--spacing-md) 0;
}

/* ════════════════════════════════════════════════════════════════════════
   STORY PAGE + SCENE READER (public, pages/story.php, 2026-08-07)
   One place per scene: readable script, floating audio controls, fan-works
   panel. Chapter cards tease locked tiers instead of hiding them.
   Script markup = .ads-* classes from parseAudioDramaScript() — the SAME
   parser the admin preview and export use (exactly-one-parser rule).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Chapter cards ─────────────────────────────────────────────────── */
.story-chapter {
    margin-bottom: var(--spacing-md);
}

.story-chapter__meta {
    color: var(--text-on-dark-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.story-scene-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.story-scene-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--border-light);
}

.story-scene-list li:last-child {
    border-bottom: none;
}

.story-scene__title {
    flex: 1 1 12rem;
}

.story-scene__meta {
    color: var(--text-on-dark-secondary);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

/* Locked chapter/scene: present, desaturated, honest about the tier. */
.story-locked {
    opacity: 0.75;
}

.story-locked__tag {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 99px;
    font-size: var(--font-size-xs);
    color: var(--text-on-dark-secondary);
    white-space: nowrap;
}

/* ── Scene reader ──────────────────────────────────────────────────── */
.scene-reader__header {
    margin-bottom: var(--spacing-md);
}

.scene-reader__meta {
    color: var(--text-on-dark-secondary);
    font-size: var(--font-size-sm);
}

/* Floating audio bar: sticks below the top of the viewport so the controls
   ride along while reading. When no audio exists yet, the page renders a
   quiet one-line note instead of this bar. */
.scene-audio {
    position: sticky;
    top: var(--spacing-sm);
    z-index: 15;
    background: rgba(6, 11, 24, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.scene-audio audio {
    width: 100%;
    display: block;
}

.scene-audio__label {
    font-size: var(--font-size-xs);
    color: var(--text-on-dark-secondary);
    margin-bottom: var(--spacing-xs);
}

.scene-audio-pending {
    font-size: var(--font-size-sm);
    color: var(--text-on-dark-secondary);
    font-style: italic;
    margin-bottom: var(--spacing-md);
}

/* ── Script typography (reader mode for .ads-* parser output) ──────── */
.scene-script {
    max-width: 46rem;
    margin: 0 auto;
    line-height: 1.8;
}

.scene-script .ads-location,
.scene-script .ads-time,
.scene-script .ads-duration {
    font-size: var(--font-size-sm);
    color: var(--text-on-dark-secondary);
    margin-bottom: var(--spacing-xs);
}

.scene-script .ads-fx {
    color: var(--text-on-dark-secondary);
    font-style: italic;
    text-align: center;
    margin: var(--spacing-md) 0;
}

.scene-script .ads-shift,
.scene-script .ads-memory-begin,
.scene-script .ads-memory-end {
    color: var(--text-on-dark-secondary);
    font-style: italic;
    text-align: center;
    letter-spacing: 0.06em;
    margin: var(--spacing-md) 0;
}

.scene-script .ads-narration {
    font-style: italic;
    margin: var(--spacing-md) 0;
}

.scene-script .ads-dialogue {
    margin: var(--spacing-sm) 0 var(--spacing-md);
}

.scene-script .ads-speaker {
    display: block;
    font-weight: 700;
    color: var(--primary-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
}

.scene-script .ads-variant {
    font-weight: 400;
    text-transform: none;
    color: var(--text-on-dark-secondary);
}

/* ── Reader navigation + tier CTA ──────────────────────────────────── */
.scene-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: space-between;
    margin: var(--spacing-lg) 0 var(--spacing-md);
}

.story-tier-cta {
    border: 1px solid var(--primary-accent);
    border-radius: var(--radius-md);
    background: rgba(12, 27, 58, 0.5);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    text-align: center;
}

/* ── Fan works panel (scaffold for the community phase) ────────────── */
.fan-works {
    margin-top: var(--spacing-lg);
}

/* Hero CTA row (story-first pass 2026-08-08): the primary action on the
   whole site is reading the story; centered under the hero description. */
.hero-cta {
    justify-content: center;
    margin: var(--spacing-md) 0;
}

/* Continue Reading (crew bookmark, serial-fiction canon) + read markers */
.story-continue {
    display: flex;
    justify-content: center;
    margin: var(--spacing-md) 0 var(--spacing-lg);
}

.story-caught-up {
    text-align: center;
    color: var(--text-on-dark-secondary);
    font-style: italic;
}

.story-scene__read {
    color: var(--primary-accent);
    font-weight: 700;
}

/* ── Story inventory v2 (accordion + in-place reading slots, 2026-08-08) ──
   Row states: --read (amber-tinted, checkmark), --wip (grayed teaser),
   .story-locked (tier tease). The reader renders into the row's own
   .inline-edit-slot (single-open via enforceSingleInlineEditor). */

.story-chapter > summary > span:first-child {
    flex: 1;
}

.story-scene-list li.story-scene--read {
    background: color-mix(in srgb, var(--primary-accent) 9%, transparent);
    border-radius: var(--radius-sm);
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.story-scene-list li.story-scene--wip {
    opacity: 0.55;
}

.story-scene-list li.story-scene--wip .story-scene__title {
    color: var(--text-on-dark-secondary);
}

.story-scene__tease {
    flex: 0 0 100%;
    font-size: var(--font-size-xs);
    color: var(--text-on-dark-secondary);
    font-style: italic;
    margin: 0.15rem 0 0.35rem;
}

.story-pay-placeholder {
    opacity: 0.7;
    border-style: dashed;
}

/* The reader as an in-row panel: station glass, clearly nested under its
   scene row. */
.inline-edit-slot .scene-reader {
    background: rgba(6, 11, 24, 0.55);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-sm) 0;
}