/**
 * Foodways atlas — map and timeline.
 *
 * ⚠ THE HORIZONTAL AND VERTICAL TIMELINES ARE ONE LIST. Several specs asked
 * for both. Rendering the same <ol> twice would let the two drift; instead the
 * bands are absolutely positioned on wide screens and stack as a dated list on
 * narrow ones, so there is exactly one source of truth in the DOM.
 */

.mf-atlas {
    margin: 2rem 0;
    border: 1px solid var(--mf-rule, #d9d4cc);
    border-radius: 6px;
    background: var(--mf-panel, #fbfaf8);
    overflow: hidden;
}

.mf-atlas__head {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: baseline;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--mf-rule, #d9d4cc);
}

.mf-atlas__head h2 { margin: 0; font-size: 1.05rem; letter-spacing: .01em; }

.mf-atlas__status {
    margin: 0;
    font-size: .82rem;
    color: var(--mf-muted, #6b6459);
}

/* ── map ───────────────────────────────────────────────────────────────── */

.mf-atlas__map { background: #eef4f8; }

.mf-atlas__svg { display: block; width: 100%; height: auto; }

.mf-atlas__country {
    fill: #dfe7dc;
    stroke: #c3cfbf;
    stroke-width: .4;
    vector-effect: non-scaling-stroke;
}

.mf-atlas__halo {
    fill: #b4472e;
    opacity: .16;
    transition: opacity .12s ease;
}

.mf-atlas__dot {
    fill: #b4472e;
    stroke: #fff;
    stroke-width: .9;
    vector-effect: non-scaling-stroke;
}

.mf-atlas__pin { cursor: pointer; }
.mf-atlas__pin:hover .mf-atlas__halo,
.mf-atlas__pin:focus .mf-atlas__halo { opacity: .4; }
.mf-atlas__pin:focus { outline: none; }
.mf-atlas__pin:focus .mf-atlas__dot { stroke: #1d1b17; stroke-width: 1.6; }

/* ── detail panel ──────────────────────────────────────────────────────── */

.mf-atlas__detail {
    min-height: 4.6rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--mf-rule, #d9d4cc);
    background: #fff;
}

.mf-atlas__detail:empty::after {
    content: 'Hover a marker or a period for detail.';
    font-size: .82rem;
    color: var(--mf-muted, #6b6459);
}

.mf-atlas__when {
    margin: 0 0 .15rem;
    font-weight: 700;
    font-size: .92rem;
}

.mf-atlas__what { margin: 0 0 .2rem; font-size: .9rem; line-height: 1.45; }

.mf-atlas__src {
    margin: 0;
    font-size: .78rem;
    color: var(--mf-muted, #6b6459);
}

/* ── timeline ──────────────────────────────────────────────────────────── */

.mf-atlas__timeline { padding: .9rem 1rem 1.1rem; }

.mf-atlas__bands { list-style: none; margin: 0; padding: 0; }

.mf-atlas__band { margin: 0 0 .35rem; }

.mf-atlas__bar { display: none; }

.mf-atlas__bandtext { font-size: .84rem; line-height: 1.45; }
.mf-atlas__bandtext b { color: #8a3a24; }

.mf-atlas__axis { display: none; }

/* ⚠ ABOVE THIS WIDTH THE SAME LIST BECOMES THE HORIZONTAL CHART. Below it,
   the rules above have already rendered it as a readable vertical timeline —
   which is the correct fallback on a phone, not a degraded one. */
@media (min-width: 760px) {
    .mf-atlas__bands {
        position: relative;
        height: calc(12 * 1.55rem + .6rem);
        margin-bottom: .3rem;
    }

    .mf-atlas__band {
        position: absolute;
        left: var(--x);
        width: var(--w);
        top: calc(var(--row) * 1.55rem);
        margin: 0;
        min-width: 2px;
    }

    .mf-atlas__bar {
        display: block;
        height: .5rem;
        border-radius: 3px;
        background: #b4472e;
    }

    .mf-atlas__band.is-open .mf-atlas__bar {
        background: linear-gradient(90deg, #b4472e 65%, rgba(180, 71, 46, .15));
    }

    /* ⚠ A DISPUTED PERIOD IS DRAWN DIFFERENTLY, because the confidence is part
       of the claim and a solid bar would assert more than the data does. */
    .mf-atlas__band.is-disputed .mf-atlas__bar,
    .mf-atlas__band.is-folk_claim .mf-atlas__bar,
    .mf-atlas__band.is-probable .mf-atlas__bar {
        background: repeating-linear-gradient(
            45deg, #b4472e 0 4px, #e6b9ad 4px 8px);
    }

    .mf-atlas__bandtext {
        position: absolute;
        left: 0;
        top: .62rem;
        direction: ltr;
        white-space: nowrap;
        font-size: .72rem;
        color: var(--mf-muted, #6b6459);
        pointer-events: none;
        max-width: 42ch;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ⚠ RIGHT-HAND BANDS READ LEFTWARDS, or their captions leave the panel. */
    .mf-atlas__band.is-right .mf-atlas__bandtext {
        left: auto;
        right: 0;
        text-align: right;
    }

    .mf-atlas__band:hover .mf-atlas__bandtext,
    .mf-atlas__band:focus-within .mf-atlas__bandtext {
        z-index: 3;
        background: #fff;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
        padding: .15rem .4rem;
        border-radius: 3px;
        max-width: 60ch;
        white-space: normal;
    }

    .mf-atlas__axis {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid var(--mf-rule, #d9d4cc);
        padding-top: .3rem;
        font-size: .74rem;
        color: var(--mf-muted, #6b6459);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mf-atlas__halo { transition: none; }
}