/* =========================================================
   NEURAGRIP EVIDENCE READER
========================================================= */

.evr-root {
    --evr-page: #fbf5ea;
    --evr-surface: #fffdf8;
    --evr-surface-alt: #f5ecdd;
    --evr-ink: #151714;
    --evr-muted: #756f64;
    --evr-line: #d9cfbd;
    --evr-gold: #c9a84c;
    --evr-link: #725a1d;

    --evr-reader-font:
        "DM Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --evr-reader-size: 18px;
    --evr-reader-line: 1.78;
    --evr-reader-width: 760px;

    position: relative;
    color: var(--evr-ink);
    background: var(--evr-page);
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.evr-root *,
.evr-root *::before,
.evr-root *::after {
    box-sizing: border-box;
}

/* =========================================================
   TYPEFACE
========================================================= */

.evr-root[data-reader-font="serif"] {
    --evr-reader-font:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;
}

.evr-root[data-reader-font="sans"] {
    --evr-reader-font:
        "DM Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* =========================================================
   PAGE THEMES
========================================================= */

.evr-root[data-reader-theme="paper"] {
    --evr-page: #fbf5ea;
    --evr-surface: #fffdf8;
    --evr-surface-alt: #f5ecdd;
    --evr-ink: #151714;
    --evr-muted: #756f64;
    --evr-line: #d9cfbd;
    --evr-link: #725a1d;
}

.evr-root[data-reader-theme="dim"] {
    --evr-page: #eee4d2;
    --evr-surface: #f7efdf;
    --evr-surface-alt: #e5d8c4;
    --evr-ink: #25241f;
    --evr-muted: #706a5e;
    --evr-line: #cabda7;
    --evr-link: #725713;
}

.evr-root[data-reader-theme="night"] {
    --evr-page: #151714;
    --evr-surface: #111310;
    --evr-surface-alt: #1f211e;
    --evr-ink: #f8f0e2;
    --evr-muted: #aaa397;
    --evr-line: #373a33;
    --evr-link: #e3c15e;
}

/* =========================================================
   STICKY READER TOOLBAR
========================================================= */

.evr-toolbar-wrap {
    position: sticky;
    top: 78px;
    z-index: 80;
    padding: 10px 0;
    background:
        color-mix(
            in srgb,
            var(--evr-page) 90%,
            transparent
        );
    border-top: 1px solid var(--evr-line);
    border-bottom: 1px solid var(--evr-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.evr-toolbar {
    display: grid;
    grid-template-columns:
        minmax(180px, 0.8fr)
        minmax(160px, 1fr)
        auto;
    align-items: center;
    gap: 20px;
}

.evr-toolbar-heading {
    min-width: 0;
}

.evr-toolbar-heading span {
    display: block;
    margin-bottom: 2px;
    color: var(--evr-muted);
    font-size: 9px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.evr-toolbar-heading strong {
    display: block;
    overflow: hidden;
    color: var(--evr-ink);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evr-progress-area {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.evr-progress-track {
    position: relative;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--evr-surface-alt);
}

.evr-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--evr-gold);
    transition: width 0.12s linear;
}

.evr-progress-label {
    min-width: 34px;
    color: var(--evr-muted);
    font-size: 10px;
    font-weight: 850;
    text-align: right;
}

.evr-settings-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 10px 16px;
    color: var(--evr-ink);
    background: var(--evr-surface);
    border: 1px solid var(--evr-line);
    border-radius: 999px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.evr-settings-trigger:hover,
.evr-settings-trigger:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(21, 23, 20, 0.1);
}

.evr-settings-trigger__icon {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 18px;
    font-weight: 700;
}

/* =========================================================
   READING AREA THEMES
========================================================= */

.evr-root .evidence-detail-body {
    background: var(--evr-page);
    transition: background-color 0.2s ease;
}

.evr-root .evidence-article-card {
    color: var(--evr-ink);
    background: var(--evr-surface);
    border-color: var(--evr-line);
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.evr-root .evidence-record-card {
    color: var(--evr-ink);
    background: var(--evr-surface-alt);
    border-color: var(--evr-line);
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.evr-root .evidence-record-card h2,
.evr-root .evidence-record-item dd {
    color: var(--evr-ink);
}

.evr-root .evidence-record-item {
    border-color: var(--evr-line);
}

.evr-root .evidence-record-item dt,
.evr-root .evidence-record-item small,
.evr-root .evidence-source-copy {
    color: var(--evr-muted);
}

.evr-root[data-reader-theme="night"]
.evidence-record-card
.site-cta-button--light {
    color: var(--evr-ink);
    background: var(--evr-surface);
    border-color: var(--evr-line);
}

/* =========================================================
   DYNAMIC ARTICLE TYPOGRAPHY
========================================================= */

.evr-root .evidence-content {
    width: 100%;
    max-width: var(--evr-reader-width);
    margin-inline: auto;
    color: var(--evr-ink);
    font-family: var(--evr-reader-font);
    font-size: var(--evr-reader-size);
    line-height: var(--evr-reader-line);
    overflow-wrap: anywhere;
    transition:
        color 0.2s ease,
        max-width 0.2s ease,
        font-size 0.2s ease,
        line-height 0.2s ease;
}

.evr-root .evidence-content > :first-child {
    margin-top: 0;
}

.evr-root .evidence-content > :last-child {
    margin-bottom: 0;
}

.evr-root .evidence-content h2,
.evr-root .evidence-content h3,
.evr-root .evidence-content h4 {
    color: var(--evr-ink);
    font-family: var(--evr-reader-font);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.evr-root .evidence-content h2 {
    margin: 2.1em 0 0.7em;
    padding-top: 0.9em;
    border-top: 1px solid var(--evr-line);
    font-size:
        clamp(
            32px,
            calc(var(--evr-reader-size) + 24px),
            54px
        );
    line-height: 1.03;
}

.evr-root .evidence-content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.evr-root .evidence-content h3 {
    margin: 1.8em 0 0.65em;
    font-size:
        clamp(
            25px,
            calc(var(--evr-reader-size) + 13px),
            40px
        );
    line-height: 1.1;
}

.evr-root .evidence-content h4 {
    margin: 1.6em 0 0.6em;
    font-size:
        clamp(
            20px,
            calc(var(--evr-reader-size) + 5px),
            31px
        );
    line-height: 1.2;
}

.evr-root .evidence-content p {
    margin: 0 0 1.15em;
}

.evr-root .evidence-content strong {
    font-weight: 800;
}

.evr-root .evidence-content em {
    font-family: inherit;
    font-size: inherit;
}

.evr-root .evidence-content a {
    color: var(--evr-link);
    text-decoration-color: var(--evr-gold);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.evr-root .evidence-content a:hover,
.evr-root .evidence-content a:focus-visible {
    color: var(--evr-ink);
}

.evr-root .evidence-content ul,
.evr-root .evidence-content ol {
    margin: 0 0 1.35em;
    padding-left: 1.5em;
}

.evr-root .evidence-content li {
    margin-bottom: 0.55em;
    padding-left: 0.25em;
}

.evr-root .evidence-content li::marker {
    color: var(--evr-gold);
    font-weight: 800;
}

.evr-root .evidence-content blockquote {
    margin: 2em 0;
    padding: 24px 26px;
    color: var(--evr-ink);
    background: var(--evr-surface-alt);
    border-left: 5px solid var(--evr-gold);
    border-radius: 0 20px 20px 0;
    font-family: var(--evr-reader-font);
    font-size: calc(var(--evr-reader-size) + 2px);
    font-style: italic;
    line-height: var(--evr-reader-line);
}

.evr-root .evidence-content blockquote > :last-child {
    margin-bottom: 0;
}

.evr-root .evidence-content hr {
    height: 1px;
    margin: 2.6em 0;
    border: 0;
    background: var(--evr-line);
}

.evr-root .evidence-content table {
    display: block;
    width: 100%;
    margin: 2em 0;
    overflow-x: auto;
    color: var(--evr-ink);
    border-spacing: 0;
    border-collapse: collapse;
    font-family: var(--evr-reader-font);
    font-size:
        max(
            13px,
            calc(var(--evr-reader-size) - 3px)
        );
    line-height: 1.55;
}

.evr-root .evidence-content th,
.evr-root .evidence-content td {
    min-width: 140px;
    padding: 13px 15px;
    border: 1px solid var(--evr-line);
    text-align: left;
    vertical-align: top;
}

.evr-root .evidence-content th {
    color: var(--evr-ink);
    background: var(--evr-surface-alt);
    font-weight: 800;
}

.evr-root .evidence-content sup,
.evr-root .evidence-content sub {
    font-size: 0.72em;
}

.evr-root .evidence-content-empty {
    max-width: var(--evr-reader-width);
    margin-inline: auto;
    color: var(--evr-muted);
    background: var(--evr-page);
    border-color: var(--evr-line);
}

/* =========================================================
   DRAWER OVERLAY
========================================================= */

body.evr-drawer-is-open {
    overflow: hidden;
}

.evr-scrim {
    position: fixed;
    inset: 0;
    z-index: 10020;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(10, 9, 6, 0.5);
    opacity: 0;
    cursor: default;
    transition: opacity 0.22s ease;
}

.evr-scrim.is-visible {
    opacity: 1;
}

.evr-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10030;
    display: flex;
    flex-direction: column;
    width: min(580px, 100vw);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    color: var(--evr-ink);
    background: var(--evr-surface);
    border-left: 1px solid var(--evr-line);
    box-shadow: -22px 0 70px rgba(15, 13, 10, 0.24);
    transform: translateX(102%);
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.25s ease;
}

.evr-drawer.is-visible {
    transform: translateX(0);
}

.evr-drawer-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 30px 30px 24px;
    border-bottom: 1px solid var(--evr-line);
}

.evr-drawer-heading {
    flex: 1;
    min-width: 0;
}

.evr-drawer-eyebrow {
    margin-bottom: 10px;
    color: var(--evr-gold);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.evr-drawer-head h2 {
    margin: 0;
    color: var(--evr-ink);
    font-family:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.evr-drawer-close {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 0;
    place-items: center;
    color: var(--evr-ink);
    background: var(--evr-surface);
    border: 1px solid var(--evr-line);
    border-radius: 50%;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

.evr-drawer-close:hover,
.evr-drawer-close:focus-visible {
    background: var(--evr-surface-alt);
}

.evr-drawer-body {
    flex: 1;
    min-height: 0;
    padding: 28px 30px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.evr-settings-grid {
    display: grid;
}

.evr-setting-row {
    padding: 0 0 21px;
    margin-bottom: 21px;
    border-bottom: 1px solid var(--evr-line);
}

.evr-setting-row:last-child {
    margin-bottom: 0;
}

.evr-setting-label {
    display: block;
    margin: 0 0 12px;
    color: var(--evr-muted);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.evr-setting-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.evr-setting-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 15px;
    color: var(--evr-ink);
    background: var(--evr-surface);
    border: 1px solid var(--evr-line);
    border-radius: 999px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.evr-setting-button:hover,
.evr-setting-button:focus-visible {
    transform: translateY(-1px);
}

.evr-setting-button.is-active {
    color: var(--evr-page);
    background: var(--evr-ink);
    border-color: var(--evr-ink);
}

.evr-root[data-reader-theme="night"]
.evr-setting-button.is-active {
    color: #151714;
    background: var(--evr-gold);
    border-color: var(--evr-gold);
}

.evr-setting-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
}

.evr-settings-note {
    margin: 20px 0 0;
    color: var(--evr-muted);
    font-size: 13px;
    line-height: 1.6;
}

.evr-reset-settings {
    margin-top: 22px;
}

.evr-drawer-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding:
        17px
        30px
        calc(17px + env(safe-area-inset-bottom, 0px));
    background: var(--evr-surface);
    border-top: 1px solid var(--evr-line);
}

.evr-return-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    color: #fbf5ea;
    background: #151714;
    border: 1px solid #151714;
    border-radius: 999px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.evr-drawer-foot span {
    color: var(--evr-muted);
    font-size: 11px;
    line-height: 1.45;
}

/* =========================================================
   COMPLETE EVIDENCE READING FLOW
========================================================= */

.evr-reading-flow {
    position: relative;
    color: var(--evr-ink);
    background: var(--evr-page);
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

/*
 * The Evidence begins with its featured image.
 * The toolbar appears immediately above this section.
 */
.evr-root .evidence-featured-section {
    margin-top: 0;
    padding-top: 32px;
    color: var(--evr-ink);
    background: var(--evr-page);
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.evr-root .evidence-featured-frame {
    background: var(--evr-surface);
    border-color: var(--evr-line);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

/*
 * Keep the actual image colours unchanged when switching
 * between Paper, Dim and Night reading modes.
 */
.evr-root .evidence-featured-image {
    background: #ffffff;
}

/*
 * The article follows the image without an unnecessarily
 * large visual separation.
 */
.evr-root .evidence-featured-section
+ .evidence-detail-body {
    padding-top: clamp(42px, 5vw, 68px);
}

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

@media (max-width: 820px) {
    .evr-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .evr-progress-area {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 700px) {
    .evr-toolbar-wrap {
        top: 68px;
        padding: 8px 0;
    }

    .evr-toolbar {
        gap: 9px;
    }

    .evr-toolbar-heading strong {
        font-size: 11px;
    }

    .evr-settings-trigger {
        min-height: 40px;
        padding: 9px 13px;
    }

    .evr-root .evidence-content {
        font-size: var(--evr-reader-size);
    }

    .evr-drawer-head {
        padding: 24px 20px 19px;
    }

    .evr-drawer-head h2 {
        font-size: 36px;
    }

    .evr-drawer-close {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .evr-drawer-body {
        padding: 24px 20px;
    }

    .evr-drawer-foot {
        padding:
            15px
            20px
            calc(15px + env(safe-area-inset-bottom, 0px));
    }

    .evr-root .evidence-featured-section {
        padding-top: 20px;
    }

    .evr-root .evidence-featured-section
    + .evidence-detail-body {
        padding-top: 38px;
    }
}

@media (max-width: 480px) {
    .evr-toolbar-heading span {
        font-size: 8px;
    }

    .evr-settings-text {
        display: none;
    }

    .evr-settings-trigger {
        width: 42px;
        padding-inline: 8px;
    }

    .evr-progress-label {
        font-size: 9px;
    }

    .evr-setting-button {
        min-height: 43px;
        padding: 9px 13px;
        font-size: 13px;
    }

    .evr-return-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .evr-scrim,
    .evr-drawer,
    .evr-progress-bar,
    .evr-setting-button,
    .evr-settings-trigger,
    .evr-root .evidence-content {
        transition: none !important;
    }
}