/*
 * Temperature Zero — Article Telemetry Layer (tz-article) — v1.0
 *
 * 2026-07-03. Brings single posts into the mission-control language the
 * homepage established. Until now articles were the least-HUD surface on
 * the site: a centered column with no chrome. This layer adds:
 *
 *   1. Reading-progress bar — 2px gradient line fixed under the header,
 *      driven by tz-article.1.0.js (scaleX transform, rAF-throttled).
 *   2. "On this page" section tracker — sticky rail in the dead right
 *      margin (≥1200px only), built by JS from the article's h2s when
 *      there are 3 or more. Scrollspy marks the active section with the
 *      glowing diamond used by interior page kickers.
 *   3. Hero meta additions — mono read-time chip rendered by single.php.
 *   4. Quiet chrome — hairline frames on body images, a mono
 *      end-of-transmission marker after the last paragraph, and a
 *      dateline treatment for the briefing "Daily Signal — <date>" h3.
 *
 * Constraints honored: no flashing or strobing anywhere (steady glows,
 * opacity/transform transitions only), prefers-reduced-motion respected,
 * versioned filename bypasses CF caching. Rollback = dequeue tz-article.
 */

/* ════════════════════════════════════════════════════════════
   1. Reading progress — fixed hairline under the header.
   JS sets transform: scaleX(0→1); transform-origin left keeps it
   a smooth wipe. Static (full-width, low opacity) if JS is absent.
   ════════════════════════════════════════════════════════════ */
.tz-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 300;               /* above .tz-header (site header is sticky) */
    background: linear-gradient(90deg, var(--tz-c-cyan), var(--tz-c-blue) 55%, var(--tz-c-violet));
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    opacity: 0.9;
}
.no-js .tz-progress { display: none; }

/* ════════════════════════════════════════════════════════════
   2. Section tracker — "ON THIS PAGE" sticky rail.
   Lives inside .tz-article-content; position: sticky within the
   article so it never chases the footer. Hidden below 1200px and
   when the article has fewer than 3 h2 sections (JS decides).
   ════════════════════════════════════════════════════════════ */
.tz-toc {
    display: none;
}
@media (min-width: 1200px) {
    .tz-toc {
        display: block;
        position: sticky;
        top: 96px;
        float: right;
        /* park the rail in the margin right of the 720px content column */
        width: 216px;
        margin-right: calc((100% - 720px) / 2 - 216px - 48px);
        margin-left: -216px;    /* don't displace the centered column */
        padding-left: 16px;
        border-left: 1px solid var(--tz-border);
        font-family: var(--tz-mono);
        z-index: 2;
    }
}
.tz-toc__label {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tz-muted);
    margin: 0 0 0.9rem;
}
.tz-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}
.tz-toc__item a {
    position: relative;
    display: block;
    padding-left: 16px;
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: var(--tz-muted);
    text-decoration: none;
    transition: color 200ms ease;
}
.tz-toc__item a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 6px;
    height: 6px;
    transform: rotate(45deg) scale(0.8);
    border-radius: 1px;
    background: var(--tz-border);
    transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.tz-toc__item a:hover { color: var(--tz-text); }
.tz-toc__item.is-active a { color: var(--tz-c-cyan); }
.tz-toc__item.is-active a::before {
    background: var(--tz-c-cyan);
    box-shadow: 0 0 8px var(--tz-c-cyan);
    transform: rotate(45deg) scale(1);
}

/* ════════════════════════════════════════════════════════════
   3. Hero meta — mono chips (date / author / read time).
   single.php renders .tz-hero-meta content in spans; give the
   read-time chip the dashboard data voice.
   ════════════════════════════════════════════════════════════ */
.tz-hero-meta {
    font-family: var(--tz-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.tz-hero-meta .tz-readtime { color: var(--tz-c-cyan); }

/* ════════════════════════════════════════════════════════════
   4. Quiet chrome — image frames, end marker, briefing dateline.
   ════════════════════════════════════════════════════════════ */
/* Hairline frame cleans the ragged edges of dark generated art. */
.entry-content img {
    border: 1px solid var(--tz-border);
    border-radius: var(--tzr-radius-sm);
}

/* End-of-transmission marker (rendered by single.php after content).
   Echoes the footer tz° TERMINAL voice: quiet, mono, steady. */
.tz-eot {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 720px;
    margin: 3.5rem auto 0;
    font-family: var(--tz-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tz-muted);
}
.tz-eot::before,
.tz-eot::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tz-border);
}
.tz-eot .tz-deg { color: var(--tz-c-cyan); }

/* Briefing dateline — the "Daily Signal — <date>" h3 that opens every
   briefing body reads as a stray heading; set it as a mono dateline so
   it becomes chrome, not content. (Scoped to the daily-briefing
   category via post_class on article.tz-article.) */
.tz-article.category-daily-briefing .entry-content > h3:first-child {
    font-family: var(--tz-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tz-c-cyan);
    margin: 0 0 2.2rem;
}

@media (prefers-reduced-motion: reduce) {
    .tz-toc__item a,
    .tz-toc__item a::before { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   5. v1.1 — Read next module (UX roadmap #3, 2026-07-03).
   Dense HUD rows: thumb, title, mono meta. Sits inside
   .tz-article-content after the end-of-transmission marker.
   ════════════════════════════════════════════════════════════ */
.tz-readnext {
    max-width: 720px;
    margin: 3rem auto 0;
}
.tz-readnext__header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
}
.tz-readnext__mark {
    width: 7px; height: 7px;
    transform: rotate(45deg);
    border-radius: 1px;
    background: var(--tz-c-cyan);
    box-shadow: 0 0 8px var(--tz-c-cyan);
}
.tz-readnext__label {
    font-family: var(--tz-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tz-muted);
}
.tz-readnext__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--tz-border);
}
.tz-readnext__item { border-bottom: 1px solid var(--tz-border); }
.tz-readnext__item a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0.25rem;
    text-decoration: none;
    transition: background 200ms ease;
}
.tz-readnext__item a:hover { background: rgba(74,240,200,0.04); }
.tz-readnext__thumb {
    flex: 0 0 92px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--tzr-radius-sm);
    border: 1px solid var(--tz-border);
}
.tz-readnext__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;        /* the generic entry-content img frame doesn't apply here, but be explicit */
    border-radius: 0;
}
.tz-readnext__text { display: grid; gap: 0.3rem; min-width: 0; }
.tz-readnext__title {
    font-family: var(--tz-sans);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tz-heading);
    transition: color 200ms ease;
}
.tz-readnext__item a:hover .tz-readnext__title { color: var(--tz-c-cyan); }
.tz-readnext__meta {
    font-family: var(--tz-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tz-muted);
}
@media (max-width: 560px) {
    .tz-readnext__thumb { flex-basis: 72px; height: 46px; }
}

/* ════════════════════════════════════════════════════════════
   6. v1.2 — Daily Signal conversion chip (UX roadmap #7).
   Injected after the briefing dateline by the content filter.
   ════════════════════════════════════════════════════════════ */
.tz-signal-chip { margin: 0 0 2.2rem; }
.tz-signal-chip a,
.entry-content .tz-signal-chip a {
    display: inline-flex;
    align-items: center;
    font-family: var(--tz-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tz-c-cyan);
    text-decoration: none;
    border: 1px solid rgba(74,240,200,0.3);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.entry-content .tz-signal-chip a::after { display: none; }
.tz-signal-chip a:hover {
    border-color: var(--tz-c-cyan);
    box-shadow: 0 0 14px -4px rgba(74,240,200,0.5);
}
/* tighten the dateline above the chip */
.tz-article.category-daily-briefing .entry-content > h3:first-child:has(+ .tz-signal-chip) {
    margin-bottom: 1rem;
}