.weekly-page--detail {
    --wr-index-active: #806016;
}

[data-theme="night"] .weekly-page--detail {
    --wr-index-active: #f7e27d;
}

.weekly-editorial-cover {
    --cover-gold: #805b12;
    --cover-silver: #486475;
    --cover-muted: #665d50;
    --cover-card-border: rgba(128, 91, 18, 0.18);
    --cover-card-bg: rgba(255, 255, 255, 0.7);
    --cover-up: #17683b;
    --cover-down: #a3332b;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    gap: clamp(18px, 3vw, 36px);
    align-items: center;
    min-width: 0;
    min-height: 228px;
    margin: 0 0 28px;
    padding: clamp(20px, 3vw, 34px);
    overflow: hidden;
    border: 1px solid rgba(128, 91, 18, 0.25);
    border-radius: 24px;
    background: radial-gradient(circle at 12% 12%, rgba(178, 195, 202, 0.24), transparent 35%),
        radial-gradient(circle at 85% 85%, rgba(212, 171, 79, 0.21), transparent 38%),
        #fffaf0;
    color: #302618;
    box-shadow: var(--wr-shadow);
}

[data-theme="night"] .weekly-editorial-cover {
    --cover-gold: #e8bd64;
    --cover-silver: #bfcbd3;
    --cover-muted: #c7c1b5;
    --cover-card-border: rgba(255, 255, 255, 0.14);
    --cover-card-bg: rgba(255, 255, 255, 0.055);
    --cover-up: #b9e1c2;
    --cover-down: #f0aaa1;
    border-color: rgba(226, 188, 100, 0.4);
    background: radial-gradient(circle at 12% 12%, rgba(191, 203, 211, 0.14), transparent 35%),
        radial-gradient(circle at 85% 85%, rgba(232, 189, 100, 0.2), transparent 38%),
        #151719;
    color: #f7f2e8;
}

.weekly-editorial-cover__intro,
.weekly-editorial-cover__market-copy {
    display: grid;
    justify-items: start;
    min-width: 0;
}

.weekly-editorial-cover__eyebrow {
    color: var(--cover-gold);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.weekly-editorial-cover__intro strong {
    margin: 10px 0;
    color: inherit;
    font-size: clamp(1.5rem, 2.7vw, 2.4rem);
    line-height: 1.25;
}

.weekly-editorial-cover__dates,
.weekly-editorial-cover__unit {
    color: var(--cover-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.weekly-editorial-cover__markets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.weekly-editorial-cover__market {
    position: relative;
    min-width: 0;
    min-height: 164px;
    padding: 17px;
    overflow: hidden;
    border: 1px solid var(--cover-card-border);
    border-radius: 16px;
    background: var(--cover-card-bg);
}

.weekly-editorial-cover__market--gold {
    --cover-line: var(--cover-gold);
}

.weekly-editorial-cover__market--silver {
    --cover-line: var(--cover-silver);
}

.weekly-editorial-cover__metal {
    color: var(--cover-line);
    font-size: 0.86rem;
    font-weight: 800;
}

.weekly-editorial-cover__market-copy strong {
    margin: 6px 0 1px;
    color: inherit;
    font-size: clamp(1.1rem, 1.8vw, 1.65rem);
    line-height: 1.3;
    white-space: nowrap;
}

.weekly-editorial-cover__change {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: baseline;
    color: var(--cover-up);
    font-size: 0.78rem;
}

.weekly-editorial-cover__change.is-down {
    color: var(--cover-down);
}

.weekly-editorial-cover__change span {
    color: var(--cover-muted);
}

.weekly-editorial-cover__unavailable {
    margin-top: 10px;
    color: var(--cover-muted);
    font-size: 0.8rem;
}

.weekly-editorial-cover__sparkline {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 8px;
    overflow: visible;
}

.weekly-editorial-cover__sparkline path {
    fill: none;
    stroke: var(--cover-line);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.weekly-editorial-cover__unit {
    position: absolute;
    inset-inline-start: clamp(20px, 3vw, 34px);
    bottom: 11px;
}

@media (max-width: 700px) {
    .weekly-editorial-cover {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        min-height: 0;
        padding: 18px 16px 32px;
        border-radius: 20px;
    }

    .weekly-editorial-cover__intro strong {
        margin: 4px 0;
    }

    .weekly-editorial-cover__market {
        min-height: 135px;
        padding: 12px;
    }

    .weekly-editorial-cover__market-copy strong {
        font-size: clamp(0.98rem, 4vw, 1.2rem);
    }

    .weekly-editorial-cover__sparkline {
        height: 34px;
        margin-top: 5px;
    }

    .weekly-editorial-cover__unit {
        inset-inline-start: 16px;
        bottom: 9px;
    }
}

@media (max-width: 360px) {
    .weekly-editorial-cover__markets {
        gap: 7px;
    }

    .weekly-editorial-cover__market {
        padding: 10px;
    }
}

.weekly-page--detail .ch-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin: 18px 0 16px;
    overflow: hidden;
    border: 1px solid var(--wr-border);
    border-radius: 16px;
    background: var(--wr-surface);
}

.weekly-page--detail .ch-stat {
    min-width: 0;
    padding: 14px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.weekly-page--detail .ch-stat--close,
.weekly-page--detail .ch-stat--change {
    grid-column: span 3;
    border-bottom: 1px solid var(--wr-border);
    background: var(--wr-stat-bg);
}

.weekly-page--detail .ch-stat--high,
.weekly-page--detail .ch-stat--low,
.weekly-page--detail .ch-stat--average {
    grid-column: span 2;
}

.weekly-page--detail .ch-stat--close,
.weekly-page--detail .ch-stat--high,
.weekly-page--detail .ch-stat--low {
    border-inline-end: 1px solid var(--wr-border);
}

.weekly-page--detail .ch-stat-lbl {
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 700;
}

.weekly-page--detail .ch-stat-val {
    color: var(--wr-text);
    font-size: clamp(1rem, 1.45vw, 1.27rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.weekly-page--detail .ch-stat-main {
    color: var(--wr-index-active);
}

.weekly-page--detail .ch-stat-val.ch-up {
    color: #237348;
}

.weekly-page--detail .ch-stat-val.ch-down {
    color: #ad3f3d;
}

[data-theme="night"] .weekly-page--detail .ch-stat-val.ch-up {
    color: #83d8a6;
}

[data-theme="night"] .weekly-page--detail .ch-stat-val.ch-down {
    color: #f2a09d;
}

.weekly-page--detail .ch-stat-note {
    margin-top: 2px;
    font-size: 0.72rem;
}

.weekly-page--detail .ch-chart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--wr-border);
}

.weekly-page--detail .ch-modes,
.weekly-page--detail .ch-footer {
    margin: 0;
}

.weekly-page--detail .ch-mode {
    padding: 7px 15px;
    border-radius: 8px;
}

.weekly-page--detail .ch-mode:focus-visible {
    outline: 2px solid var(--wr-index-active);
    outline-offset: 3px;
}

.weekly-page--detail .ch-footer {
    font-family: inherit;
    line-height: 1.5;
}

@media (max-width: 560px) {
    .weekly-page--detail .ch-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weekly-page--detail .ch-stat {
        padding: 11px 13px;
    }

    .weekly-page--detail .ch-stat--close,
    .weekly-page--detail .ch-stat--change,
    .weekly-page--detail .ch-stat--average {
        grid-column: span 2;
    }

    .weekly-page--detail .ch-stat--high,
    .weekly-page--detail .ch-stat--low {
        grid-column: span 1;
        border-bottom: 1px solid var(--wr-border);
    }

    .weekly-page--detail .ch-stat--close,
    .weekly-page--detail .ch-stat--low {
        border-inline-end: 0;
    }

    .weekly-page--detail .ch-stat--high {
        border-inline-end: 1px solid var(--wr-border);
    }

    .weekly-page--detail .ch-stat-val {
        font-size: 0.94rem;
    }
}

.weekly-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.weekly-detail-content {
    min-width: 0;
}

.weekly-detail-content :is(h2[id], h3[id]) {
    scroll-margin-top: 88px;
}

.weekly-page--detail .weekly-detail-index {
    position: static;
    z-index: 1;
    display: none;
    height: auto;
    margin-bottom: 22px;
    padding: 12px 16px;
    border: 1px solid var(--wr-border);
    border-radius: 14px;
    background: var(--wr-surface);
    box-shadow: none;
    backdrop-filter: none;
}

@media (min-width: 700px) {
    .weekly-page--detail .weekly-detail-index {
        display: block;
    }
}

.weekly-detail-index__title {
    display: block;
    margin-bottom: 8px;
    color: var(--wr-text);
    font-size: 13px;
    font-weight: 900;
}

.weekly-detail-index__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.weekly-detail-index__links a {
    display: block;
    padding: 5px 0;
    color: var(--wr-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
    text-underline-offset: 4px;
}

.weekly-detail-index__links a:hover,
.weekly-detail-index__links a.is-active {
    color: var(--wr-index-active);
    text-decoration: underline;
}

.weekly-detail-index__links a.is-active {
    font-weight: 900;
    text-decoration-thickness: 2px;
}

.weekly-detail-index__links a:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--wr-index-active);
    outline-offset: 3px;
}

@media (min-width: 1500px) {
    .weekly-page--detail {
        overflow-x: visible;
    }

    .weekly-detail-layout {
        align-items: start;
    }

    .weekly-page--detail .weekly-detail-index {
        position: sticky;
        top: 88px;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        width: 164px;
        margin: 0;
        padding: 8px 0;
        border: 0;
        border-inline-start: 1px solid var(--wr-border);
        border-radius: 0;
        background: transparent;
        transform: translateX(calc(100% + 16px));
    }

    .weekly-detail-index__title {
        padding-inline: 14px;
    }

    .weekly-detail-index__links {
        display: block;
    }

    .weekly-detail-index__links a {
        padding: 5px 14px;
        border-inline-start: 2px solid transparent;
    }

    .weekly-detail-index__links a:is(:hover, :focus-visible, .is-active) {
        border-inline-start-color: var(--wr-index-active);
    }

    .weekly-detail-content {
        grid-column: 1;
        grid-row: 1;
    }
}