/* ============================================================
   craft.css — experimental polish layer (Emil Kowalski craft +
   tasteskill notes). Loaded AFTER styles.v3.css so it can refine
   without touching the base sheet.

   REVERT: delete this file and remove its <link> in partials/head.php.
   Nothing else depends on it.
   ============================================================ */

:root {
    /* Stronger ease-out than the built-in `ease`; gives UI motion an
       intentional snap instead of a mushy curve. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ------------------------------------------------------------
   1. Tactile press feedback
   Pressable elements scale down briefly so the UI feels like it
   heard the tap. Subtle (0.97–0.98), transform-only (GPU-cheap).
   ------------------------------------------------------------ */
.button,
.theme-toggle,
.view-btn,
.page-link,
.tag-checkbox {
    transition: transform 0.16s var(--ease-out),
                box-shadow 0.3s ease,
                border-color 0.3s ease,
                background 0.15s ease;
}

.button:active {
    transform: scale(0.97);
}

.theme-toggle:active,
.view-btn:active,
.page-link:active,
.tag-checkbox:active {
    transform: scale(0.97);
}

.post-card:active {
    transform: scale(0.985);
}

/* ------------------------------------------------------------
   2. Entrance easing
   Reveal + staggered cards should ease-out (fast start = responsive),
   not the symmetric base `ease`.
   ------------------------------------------------------------ */
html.js [data-reveal] {
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

/* ------------------------------------------------------------
   3. Hover-gating for touch
   On touch devices :hover sticks after a tap, leaving cards/buttons
   stuck in their lifted state. Neutralise hover transforms where
   there is no real pointer. (Colour/border hovers are harmless and
   left intact.)
   ------------------------------------------------------------ */
@media (hover: none) {
    .post-card:hover,
    .button:hover,
    .card:hover,
    .theme-toggle:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------
   4. Tabular figures for data-ish numbers
   Stops dates, reading time, and the yield-curve year from jittering
   as digits change width.
   ------------------------------------------------------------ */
.article-meta,
.analysis-page .post-card small,
.post-card small,
.hero__chart-label__year,
.analysis-results {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   5. Cross-document View Transitions
   Native smooth transition between full page loads (this is a
   multi-page PHP site). Progressive enhancement: unsupported
   browsers simply hard-cut. Motivated motion = spatial continuity
   between a list and the article it opens.
   ------------------------------------------------------------ */
@view-transition {
    navigation: auto;
}

/* Keep the cross-fade quick and calm. */
::view-transition-group(root) {
    animation-duration: 0.25s;
    animation-timing-function: var(--ease-out);
}

/* Reduced-motion users get an instant cut, no slide/fade. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ------------------------------------------------------------
   6. "Current Work" as a divided list, not a third card grid
   The homepage already shows a 3-up card grid (Latest posts).
   Repeating the same card-grid family for Current Work flattens
   the page rhythm. Re-cast these as hairline-divided rows — same
   markup, different layout family. (Restyle only; revertable.)
   ------------------------------------------------------------ */
.section--panel .building-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.building-grid .building-card.card {
    background: none;
    box-shadow: none;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: var(--space-2) 0;
    transition: none;
}

.building-grid .building-card.card:first-child {
    border-top: 0;
    padding-top: 0;
}

.building-grid .building-card.card:hover {
    transform: none;
    border-color: var(--border);
}

/* Give each row room: title + status on one line, summary indented
   to a comfortable measure, focus pill trailing. */
.building-grid .building-card__summary {
    max-width: 64ch;
}

/* ------------------------------------------------------------
   7. Reading-progress bar (articles only)
   Pure CSS scroll-driven animation — no JS, no scroll listeners
   (both reviewed skills ban window.onscroll). The bar element only
   exists on post.php, so it never appears elsewhere. Browsers
   without scroll-timeline support leave it at scaleX(0) = invisible,
   so this is a clean progressive enhancement.
   ------------------------------------------------------------ */
.read-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2000;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--accent);
    pointer-events: none;
}

@supports (animation-timeline: scroll()) {
    .read-bar {
        animation: read-grow linear both;
        animation-timeline: scroll(root block);
    }
}

@keyframes read-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ------------------------------------------------------------
   8. "Keep reading" as a stacked list, not a grid
   The 3-up related-posts grid gets cramped at three cards. Recast as
   hairline-divided rows (same family as Current Work) so it stays
   clean no matter how many items. Clickability stays signalled by the
   title underline-on-hover already defined in the base sheet.
   Restyle only; revertable.
   ------------------------------------------------------------ */
.related-posts {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--space-1);
}

.related-posts .post-card.card {
    background: none;
    box-shadow: none;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: var(--space-2) 0;
}

.related-posts .post-card.card:first-child {
    border-top: 0;
}

.related-posts .post-card:hover {
    transform: none;
    box-shadow: none;
}

/* Tighten the inner rhythm for a list context. */
.related-posts .post-card h3 {
    margin: 0.15rem 0 0;
}

.related-posts .post-card p {
    max-width: 68ch;
}

/* ------------------------------------------------------------
   9. Single accent (cyan)
   Collapse the gold second accent (--accent-strong) onto cyan so the
   whole site speaks one colour. Then make sure the decorative chips
   that used to be gold gradients (.pill) read as quiet *labels*, not
   as the now-cyan primary buttons.
   ------------------------------------------------------------ */

/* Primary button: cyan fill, cyan-tinted hover shadow. */
.button:hover {
    box-shadow: 0 12px 28px rgba(81, 213, 255, 0.28);
}

/* .pill is a non-interactive focus-area label on the Current Work
   rows. Drop the filled gradient so it cannot be mistaken for a CTA:
   a tinted, thin-bordered chip with label weight (buttons are 600). */
.pill {
    background: rgba(81, 213, 255, 0.12);
    color: var(--accent);
    border: 1px solid rgba(81, 213, 255, 0.30);
    font-weight: 500;
}

html.is-light body .pill,
html.is-light body .pill:hover {
    background: rgba(81, 213, 255, 0.12);
    color: #0369a1;
    border: 1px solid rgba(3, 105, 161, 0.25);
}

/* Keep ONE functional accent (cyan), but let gold survive in a single
   semantic role: distinguishing Writing from Research kickers (most
   visible in "Keep reading"). Cyan = research, gold = writing. The token
   unification above turned the writing kicker cyan, so set it back
   explicitly here — gold now means exactly one thing, not a second
   general accent. */
.card-kicker--writing {
    color: #f4c95d;
}

html.is-light body .card-kicker--writing {
    color: #8a5a00;
}

/* Recolour the warm ambient glows to cyan so no gold remains. */
html.is-light body .hero-card {
    background:
        radial-gradient(900px 400px at 15% 10%, rgba(81, 213, 255, 0.18), transparent 60%),
        radial-gradient(700px 350px at 85% 0%, rgba(81, 213, 255, 0.12), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f1f5f9 70%, #eef2f7 100%);
}

body.analysis-page {
    background:
        radial-gradient(1500px 760px at 12% -18%, rgba(81, 213, 255, 0.12), transparent 72%),
        radial-gradient(1200px 680px at 88% -22%, rgba(81, 213, 255, 0.08), transparent 70%),
        var(--bg-ambient),
        var(--bg);
    background-repeat: no-repeat;
}

/* ------------------------------------------------------------
   10. Seamless hero → body transition (homepage)
   The dark hero's bottom fade only reached 85% of the background
   colour, leaving the hero's lighter/cyan bottom faintly visible as
   a tonal band against the flat body below (and showing at the
   rounded bottom corners). Fade fully to var(--bg) over a slightly
   taller run so the hero dissolves into the page with no seam.
   ------------------------------------------------------------ */
html:not(.is-light) body .hero-card::after {
    height: 200px;
    background: linear-gradient(to bottom, transparent, var(--bg));
}

/* ------------------------------------------------------------
   11. Footnote preview popover
   Hovering/focusing a footnote ref shows the note inline. Scales in
   from the ref (origin-aware), ease-out, ~150ms (Emil tooltip spec).
   ------------------------------------------------------------ */
.fn-popover {
    position: absolute;
    z-index: 1500;
    max-width: 360px;
    padding: 0.7rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: scale(0.96);
    transform-origin: var(--fn-origin-x, 50%) bottom;
    transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}

.fn-popover[data-origin="top"] {
    transform-origin: var(--fn-origin-x, 50%) top;
}

.fn-popover.is-visible {
    opacity: 1;
    transform: scale(1);
}

.fn-popover :first-child { margin-top: 0; }
.fn-popover :last-child  { margin-bottom: 0; }

html.is-light body .fn-popover {
    background: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .fn-popover { transition: opacity 0.12s ease; transform: none; }
    .fn-popover.is-visible { transform: none; }
}

/* ------------------------------------------------------------
   12. Heading anchor links
   A small "#" appears on heading hover/focus; click copies a deep
   link to that section.
   ------------------------------------------------------------ */
.article-content h2,
.article-content h3 {
    scroll-margin-top: 1.5rem;
}

.heading-anchor {
    margin-left: 0.4rem;
    font-size: 0.7em;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    vertical-align: middle;
}

.article-content h2:hover .heading-anchor,
.article-content h3:hover .heading-anchor,
.heading-anchor:focus {
    opacity: 0.55;
    outline: none;
}

.heading-anchor:hover {
    opacity: 1;
}

.heading-anchor.copied::after {
    content: " link copied";
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-left: 0.35rem;
    vertical-align: middle;
}

html.is-light body .heading-anchor {
    color: #0369a1;
}

/* ------------------------------------------------------------
   13. Print / PDF stylesheet
   Researchers and recruiters save articles as PDF. Strip the chrome,
   force black-on-white, expose link URLs, and keep figures/footnotes
   from splitting across pages.
   ------------------------------------------------------------ */
@media print {
    .analysis-header,
    .hero__nav-row,
    .read-bar,
    .article-toc,
    .hero__chart,
    .hero__chart-label,
    .article-back,
    .article-footer,
    .theme-toggle,
    .nav-toggle,
    .skip-link,
    .fn-popover,
    .heading-anchor,
    .site-footer__build {
        display: none !important;
    }

    html,
    body,
    body.analysis-page {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .analysis-page .article {
        max-width: none;
        margin: 0;
    }

    .analysis-page .article-content {
        font-size: 11.5pt;
        line-height: 1.5;
        color: #000000;
    }

    .article-content h1,
    .article-content h2,
    .article-content h3,
    .analysis-page .article h1 {
        color: #000000;
        break-after: avoid;
    }

    .article-content a {
        color: #000000;
        text-decoration: underline;
    }

    /* Reveal destinations of external links in print. */
    .article-content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        word-break: break-all;
    }

    .article-content figure,
    .article-content img,
    .article-content pre,
    .article-content blockquote,
    .article-content table,
    .article-content .embed,
    .footnotes li {
        break-inside: avoid;
    }

    /* HTML-embedded figures (charts/widgets) are drawn for the dark theme —
       their lines/labels are light, so they vanish on a white page. Keep the
       dark backdrop in print (print-color-adjust forces it) so they stay
       legible, and constrain the canvas/svg to the page width. */
    .article-content .embed {
        background: #0b1121;
        padding: 0.75rem;
        border-radius: 8px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .article-content .embed canvas,
    .article-content .embed svg,
    .article-content .embed img {
        max-width: 100% !important;
        height: auto !important;
    }

    .footnotes,
    .footnotes a,
    .article-content .footnotes li {
        color: #000000 !important;
    }

    @page {
        margin: 2cm;
    }
}