/* Modal Path Ethics — Convergence Point event, sitewide UI layer.
   Deliberately leaves page backgrounds and typography alone. Specialist article
   skins load after this file and remain free to override these shared details. */

:root {
    --mpe-event-gold: #eec643;
    --mpe-event-green: #98fb98;
    --mpe-event-paper: #f7f3e8;
    --mpe-event-rule: url("convergence-rule.svg");
    --mpe-event-search-edge: url("search-penrose-edge.svg");
}

/* A small piece of the Convergence visual grammar now belongs to the site:
   real Chirality tiles replace default rules without turning the page into a grid. */
.gh-content hr {
    border: 0;
    background: var(--mpe-event-rule) center / contain no-repeat;
    height: 2.7rem;
    margin: 4.2rem auto;
    max-width: 21rem;
    opacity: .66;
}

/* Event feature-image mount. No page background, no typography changes. */
html:not(.mpe-convergence-point-page):not(.mpe-inner-apocalypse-page) .post-template .gh-article-image {
    box-sizing: border-box;
    border: 1px solid rgba(238,198,67,.16);
    padding: .45rem;
    position: relative;
}

html:not(.mpe-convergence-point-page):not(.mpe-inner-apocalypse-page) .post-template .gh-article-image::before,
html:not(.mpe-convergence-point-page):not(.mpe-inner-apocalypse-page) .post-template .gh-article-image::after {
    content: "";
    position: absolute;
    pointer-events: none;
    height: 2.65rem;
    width: 2.65rem;
    z-index: 3;
}

html:not(.mpe-convergence-point-page):not(.mpe-inner-apocalypse-page) .post-template .gh-article-image::before {
    left: -.42rem;
    top: -.42rem;
    border-left: 1.5px solid var(--mpe-event-gold);
    border-top: 1.5px solid var(--mpe-event-gold);
}

html:not(.mpe-convergence-point-page):not(.mpe-inner-apocalypse-page) .post-template .gh-article-image::after {
    right: -.42rem;
    bottom: -.42rem;
    border-right: 1.5px solid var(--mpe-event-green);
    border-bottom: 1.5px solid var(--mpe-event-green);
}

/* Latest receives a quiet event divider. */
html:not(.mpe-convergence-point-page):not(.mpe-inner-apocalypse-page) .post-template .gh-read-next:not(.gh-comments) .gh-pagehead-title::after {
    content: "";
    display: inline-block;
    width: clamp(6rem, 12vw, 11rem);
    height: 1.4rem;
    margin-left: 1rem;
    vertical-align: .05em;
    background: var(--mpe-event-rule) center / contain no-repeat;
    opacity: .52;
}

/* Return-to-top: a small playable object rather than a generic chevron. */
.mpe-return-top-wrap {
    display: flex !important;
    justify-content: center;
    margin: clamp(4.4rem, 7vw, 7rem) auto clamp(2.2rem, 4vw, 3.5rem);
    width: min(100% - 32px, var(--content-width, 720px));
    max-width: var(--content-width, 720px);
}

.mpe-return-top {
    align-items: center;
    color: inherit;
    display: inline-flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 7.2rem;
    opacity: .76;
    text-decoration: none;
    transition: opacity .16s ease, transform .16s ease;
}

.mpe-return-top img {
    display: block;
    height: 4.9rem;
    width: 6.2rem;
}

.mpe-return-top span {
    font-family: var(--gh-font-heading, system-ui, sans-serif);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .105em;
    line-height: 1;
    text-transform: uppercase;
}

.mpe-return-top:hover,
.mpe-return-top:focus-visible {
    color: var(--mpe-event-gold);
    opacity: 1;
    transform: translateY(-2px);
}

.mpe-return-top:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: .55rem;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Search: Ghost/Sodo owns the controls; this layer owns the field behind them.
   The SVG has no center tiling: Penrose fragments live only at the viewport edges. */
#mpe-search-event-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147481000;
    pointer-events: none;
    background-color: rgba(8,10,13,.34);
    background-image: var(--mpe-event-search-edge);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-backdrop-filter: blur(13px) saturate(.82);
    backdrop-filter: blur(13px) saturate(.82);
    opacity: 0;
    transition: opacity .16s ease;
}

html[data-mpe-search-open="true"] #mpe-search-event-backdrop {
    opacity: 1;
}

html[data-color-scheme="light"] #mpe-search-event-backdrop {
    background-color: rgba(247,243,232,.34);
    -webkit-backdrop-filter: blur(13px) saturate(.72);
    backdrop-filter: blur(13px) saturate(.72);
}

/* Keep the Sodo interface above the blurred page. JS styles the isolated
   search document so its own panel remains readable and opaque. */
#sodo-search-root {
    position: relative !important;
    z-index: 2147483001 !important;
    isolation: isolate;
    filter: none !important;
    -webkit-filter: none !important;
}

html[data-mpe-search-open="true"] #sodo-search-root iframe {
    background: transparent !important;
}

@media (max-width: 767px) {
    html:not(.mpe-convergence-point-page):not(.mpe-inner-apocalypse-page) .post-template .gh-article-image { padding: .32rem; }
    html:not(.mpe-convergence-point-page):not(.mpe-inner-apocalypse-page) .post-template .gh-article-image::before,
    html:not(.mpe-convergence-point-page):not(.mpe-inner-apocalypse-page) .post-template .gh-article-image::after { height: 1.9rem; width: 1.9rem; }
    html:not(.mpe-convergence-point-page):not(.mpe-inner-apocalypse-page) .post-template .gh-read-next:not(.gh-comments) .gh-pagehead-title::after { display: none; }
    .mpe-return-top-wrap { margin-top: 4rem; }
}

/* ==================================================================
   v6.38 — native article controls + interactive convergence divider
   ================================================================== */
:root {
    --mpe-native-control-bg: #0f1115;
    --mpe-native-control-ink: #f7f3e8;
    --mpe-native-control-muted: #b8bdc6;
    --mpe-native-control-panel: #15181d;
}

html[data-color-scheme="light"] {
    --mpe-native-control-bg: #fffdf8;
    --mpe-native-control-ink: #17191d;
    --mpe-native-control-muted: #5d626a;
    --mpe-native-control-panel: #f7f3e8;
}

/* Ghost button cards and theme-created article CTAs inherit the divider grammar:
   gold enters from the left, green from the right, with readable ink in both modes. */
.gh-content .kg-button-card .kg-btn,
.gh-content a.kg-btn,
.gh-content .mpe-article-button,
.gh-content .mpe-link-button {
    background:
        linear-gradient(var(--mpe-native-control-bg), var(--mpe-native-control-bg)) padding-box,
        linear-gradient(90deg, var(--mpe-event-gold), rgba(247,243,232,.22) 49%, var(--mpe-event-green)) border-box !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--mpe-native-control-ink) !important;
    font-weight: 760;
    letter-spacing: .015em;
    text-decoration: none !important;
    text-shadow: none !important;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}

.gh-content .kg-button-card .kg-btn:hover,
.gh-content .kg-button-card .kg-btn:focus-visible,
.gh-content a.kg-btn:hover,
.gh-content a.kg-btn:focus-visible,
.gh-content .mpe-article-button:hover,
.gh-content .mpe-article-button:focus-visible,
.gh-content .mpe-link-button:hover,
.gh-content .mpe-link-button:focus-visible {
    background:
        linear-gradient(var(--mpe-native-control-panel), var(--mpe-native-control-panel)) padding-box,
        linear-gradient(90deg, var(--mpe-event-gold), #f7f3e8 50%, var(--mpe-event-green)) border-box !important;
    color: var(--mpe-native-control-ink) !important;
    box-shadow: 0 .8rem 2.2rem -1.5rem rgba(0,0,0,.52) !important;
    transform: translateY(-1px);
}

.gh-content .kg-button-card .kg-btn:focus-visible,
.gh-content a.kg-btn:focus-visible,
.gh-content .mpe-article-button:focus-visible,
.gh-content .mpe-link-button:focus-visible {
    outline: 2px solid var(--mpe-event-green) !important;
    outline-offset: .24rem;
}

/* File/download cards were the worst contrast offender. Keep the full card native
   and force every Ghost-generated label/icon back into the local ink color. */
.gh-content .kg-file-card-container,
.gh-content a.kg-file-card-container {
    background:
        linear-gradient(var(--mpe-native-control-bg), var(--mpe-native-control-bg)) padding-box,
        linear-gradient(90deg, var(--mpe-event-gold), rgba(247,243,232,.18) 50%, var(--mpe-event-green)) border-box !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--mpe-native-control-ink) !important;
    text-decoration: none !important;
}

.gh-content .kg-file-card-container *,
.gh-content a.kg-file-card-container * {
    color: var(--mpe-native-control-ink) !important;
    fill: currentColor !important;
    text-shadow: none !important;
}

.gh-content .kg-file-card-metadata,
.gh-content .kg-file-card-caption,
.gh-content .kg-file-card-filesize {
    color: var(--mpe-native-control-muted) !important;
}

.gh-content .kg-file-card-button {
    background: var(--mpe-native-control-panel) !important;
    border: 1px solid color-mix(in srgb, var(--mpe-event-gold) 48%, var(--mpe-event-green)) !important;
    border-radius: 0 !important;
    color: var(--mpe-native-control-ink) !important;
}

.gh-content .kg-file-card-container:hover,
.gh-content .kg-file-card-container:focus-visible {
    background:
        linear-gradient(var(--mpe-native-control-panel), var(--mpe-native-control-panel)) padding-box,
        linear-gradient(90deg, var(--mpe-event-gold), #f7f3e8 50%, var(--mpe-event-green)) border-box !important;
}

.gh-content .kg-file-card-container:focus-visible {
    outline: 2px solid var(--mpe-event-green) !important;
    outline-offset: .24rem;
}

/* The stock SVG remains the non-JS fallback. Once enhanced, its geometry becomes
   a tappable tiny field event instead of a passive horizontal rule. */
.mpe-field-divider {
    height: 2.7rem;
    margin: 4.2rem auto;
    max-width: 21rem;
    position: relative;
    width: min(100%, 21rem);
}

.mpe-field-divider > hr {
    background: none !important;
    height: 100% !important;
    margin: 0 !important;
    max-width: none !important;
    opacity: 0 !important;
}

.mpe-field-divider__trigger {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    height: 100%;
    inset: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
}

.mpe-field-divider__trigger svg {
    display: block;
    height: 100%;
    overflow: visible;
    width: 100%;
}

.mpe-field-divider__line,
.mpe-field-divider__center,
.mpe-field-divider__diamond,
.mpe-field-divider__spawn {
    fill: none;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.mpe-field-divider__line--left,
.mpe-field-divider__diamond--gold { stroke: var(--mpe-event-gold); }
.mpe-field-divider__line--right,
.mpe-field-divider__diamond--green { stroke: var(--mpe-event-green); }
.mpe-field-divider__center,
.mpe-field-divider__spawn { stroke: #f7f3e8; }

html[data-color-scheme="light"] .mpe-field-divider__center,
html[data-color-scheme="light"] .mpe-field-divider__spawn {
    stroke: #17191d;
}

.mpe-field-divider__line,
.mpe-field-divider__center,
.mpe-field-divider__diamond,
.mpe-field-divider__spawn {
    transform-box: fill-box;
    transform-origin: center;
}

.mpe-field-divider__spawn { opacity: 0; }

.mpe-field-divider__trigger:hover,
.mpe-field-divider__trigger:focus-visible {
    filter: drop-shadow(0 0 .35rem rgba(238,198,67,.25)) drop-shadow(0 0 .4rem rgba(152,251,152,.18));
    outline: none;
}

.mpe-field-divider__trigger:focus-visible::after {
    border: 1px solid color-mix(in srgb, var(--mpe-event-gold) 50%, var(--mpe-event-green));
    content: "";
    inset: -.18rem;
    pointer-events: none;
    position: absolute;
}

.mpe-field-divider.is-crashing .mpe-field-divider__diamond--gold {
    animation: mpe-divider-gold-crash 1.25s cubic-bezier(.3,.76,.22,1) both;
}
.mpe-field-divider.is-crashing .mpe-field-divider__diamond--green {
    animation: mpe-divider-green-crash 1.25s cubic-bezier(.3,.76,.22,1) both;
}
.mpe-field-divider.is-crashing .mpe-field-divider__line--left {
    animation: mpe-divider-left-line 1.25s cubic-bezier(.3,.76,.22,1) both;
    transform-origin: left center;
}
.mpe-field-divider.is-crashing .mpe-field-divider__line--right {
    animation: mpe-divider-right-line 1.25s cubic-bezier(.3,.76,.22,1) both;
    transform-origin: right center;
}
.mpe-field-divider.is-crashing .mpe-field-divider__center {
    animation: mpe-divider-center-break 1.25s ease both;
}
.mpe-field-divider.is-crashing .mpe-field-divider__spawn--left {
    animation: mpe-divider-spawn-left 1.25s ease-out both;
}
.mpe-field-divider.is-crashing .mpe-field-divider__spawn--right {
    animation: mpe-divider-spawn-right 1.25s ease-out both;
}

@keyframes mpe-divider-gold-crash {
    0%,12% { transform: translateX(0) rotate(0); }
    46%,72% { transform: translateX(24px) rotate(90deg); }
    100% { transform: translateX(0) rotate(180deg); }
}
@keyframes mpe-divider-green-crash {
    0%,12% { transform: translateX(0) rotate(0); }
    46%,72% { transform: translateX(-24px) rotate(-90deg); }
    100% { transform: translateX(0) rotate(-180deg); }
}
@keyframes mpe-divider-left-line {
    0%,12% { transform: scaleX(1); opacity: .9; }
    46%,72% { transform: scaleX(1.31); opacity: 1; }
    100% { transform: scaleX(1); opacity: .9; }
}
@keyframes mpe-divider-right-line {
    0%,12% { transform: scaleX(1); opacity: .9; }
    46%,72% { transform: scaleX(1.31); opacity: 1; }
    100% { transform: scaleX(1); opacity: .9; }
}
@keyframes mpe-divider-center-break {
    0%,28% { opacity: 1; transform: scale(1) rotate(0); }
    43% { opacity: 1; transform: scale(1.45) rotate(45deg); }
    50%,72% { opacity: 0; transform: scale(.05) rotate(135deg); }
    100% { opacity: 1; transform: scale(1) rotate(180deg); }
}
@keyframes mpe-divider-spawn-left {
    0%,48% { opacity: 0; transform: translateX(14px) scale(.05) rotate(45deg); }
    62%,76% { opacity: 1; transform: translateX(-1px) scale(.72) rotate(45deg); }
    100% { opacity: 0; transform: translateX(-7px) scale(.35) rotate(90deg); }
}
@keyframes mpe-divider-spawn-right {
    0%,48% { opacity: 0; transform: translateX(-14px) scale(.05) rotate(45deg); }
    62%,76% { opacity: 1; transform: translateX(1px) scale(.72) rotate(45deg); }
    100% { opacity: 0; transform: translateX(7px) scale(.35) rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mpe-field-divider.is-crashing .mpe-field-divider__diamond,
    .mpe-field-divider.is-crashing .mpe-field-divider__line,
    .mpe-field-divider.is-crashing .mpe-field-divider__center,
    .mpe-field-divider.is-crashing .mpe-field-divider__spawn {
        animation-duration: .01ms !important;
    }
}