/* The selected "Cards" history design, scoped independently of legacy popups. */
.mapHistory {
    --history-surface: #292d32;
    --history-text: #f2f3f5;
    --history-muted: #adb5bf;
    --history-line: #41474f;
    --history-red: #f18d85;
    --history-active: #48302f;
    --history-yellow: #e6c75b;
    --history-yellow-active: #443d29;
    --history-top: max(24px, env(safe-area-inset-top, 0px));
    --history-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    width: min(680px, calc(100% - 32px));
    height: min(740px, calc(100dvh - var(--history-top) - var(--history-bottom)));
    max-width: none;
    max-height: calc(100vh - var(--history-top) - var(--history-bottom));
    max-height: calc(100dvh - var(--history-top) - var(--history-bottom));
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: var(--history-text);
    background: var(--history-surface);
    border: 1px solid var(--history-line);
    border-radius: 12px;
    box-shadow: 0 20px 70px #090b0f33;
    font-family: inherit;
    text-align: left;
}
.mapHistory[open] { display: flex; flex-direction: column; }
.mapHistory *, .mapHistory *::before, .mapHistory *::after { box-sizing: border-box; }
.mapHistory::backdrop { background: #0b101ac9; }
body.map-history-open { overflow: hidden; }
html.light .mapHistory {
    --history-surface: #fff;
    --history-text: #252b33;
    --history-muted: #606b78;
    --history-line: #dde2e8;
    --history-red: #ac3933;
    --history-active: #fcf0ee;
    --history-yellow: #796015;
    --history-yellow-active: #fbf5df;
}
.mapHistory__head { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 26px 28px 20px; flex: 0 0 auto; }
.mapHistory__head > div { min-width: 0; }
.mapHistory__head span { display: block; font-size: 12px; line-height: 1.5; color: var(--history-muted); margin-bottom: 5px; }
.mapHistory__head h2 { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.mapHistory__close { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; color: var(--history-text); background: transparent; border: 1px solid var(--history-line); border-radius: 50%; font-family: inherit; font-weight: 300; font-size: 29px; line-height: 1; }
.mapHistory__close:focus-visible, .mapHistory button[data-history-retry]:focus-visible { outline: 2px solid #78a2ed; outline-offset: 3px; }
.mapHistory__body { padding: 24px 28px; border-top: 1px solid var(--history-line); overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--history-line) transparent; }
.mapHistory__day + .mapHistory__day { margin-top: 24px; }
.mapHistory__day > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--history-muted); font-size: 12px; line-height: 1.5; font-weight: 400; }
.mapHistory__day > h3::after { content: ""; flex: 1; height: 1px; background: var(--history-line); }
.mapHistoryCard { border: 1px solid var(--history-line); border-radius: 8px; padding: 17px; }
.mapHistoryCard + .mapHistoryCard { margin-top: 10px; }
.mapHistoryCard.is-active { border-color: color-mix(in srgb, var(--history-red) 55%, var(--history-line)); background: var(--history-active); }
.mapHistoryCard.is-yellow { --history-red: var(--history-yellow); --history-active: var(--history-yellow-active); }
.mapHistoryCard__top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.mapHistoryCard__identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mapHistoryCard__identity > img { width: 28px; height: 28px; flex: 0 0 28px; }
.mapHistoryCard__identity > div { min-width: 0; }
.mapHistoryCard strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.mapHistoryCard__level { display: block; color: var(--history-red); font-size: 11px; line-height: 1.5; margin-top: 2px; }
.mapHistoryCard__region { display: block; color: var(--history-muted); font-size: 11px; line-height: 1.5; margin-top: 5px; overflow-wrap: anywhere; }
.mapHistoryCard__ongoing { flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--history-red) 35%, transparent); border-radius: 4px; color: var(--history-red); background: var(--history-active); font-size: 10px; line-height: 1.5; padding: 3px 6px; }
.mapHistoryCard__bottom { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--history-line); font-size: 14px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.mapHistoryCard__bottom > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.mapHistoryCard__duration { color: var(--history-muted); white-space: nowrap; font-size: 12px; }
.mapHistory__message { margin: 0; padding: 32px 8px; color: var(--history-muted); font-size: 14px; line-height: 1.7; text-align: center; }
.mapHistory__message p { margin: 0 0 16px; }
.mapHistory button[data-history-retry] { padding: 10px 14px; border: 1px solid var(--history-line); border-radius: 6px; background: transparent; color: var(--history-text); font: inherit; }
@media (max-width: 600px) {
    .mapHistory { --history-top: max(16px, env(safe-area-inset-top, 0px)); --history-bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: calc(100% - 24px); margin: var(--history-top) auto auto; }
    .mapHistory__head { padding: 22px 18px 18px; }
    .mapHistory__head h2 { font-size: 21px; }
    .mapHistory__body { padding: 20px 18px; scrollbar-width: none; }
    .mapHistory__body::-webkit-scrollbar { display: none; }
    .mapHistoryCard { padding: 13px; }
    .mapHistoryCard strong { font-size: 12px; }
    .mapHistoryCard__bottom { font-size: 12px; }
    .mapHistoryCard__duration { font-size: 11px; }
}
@media (max-width: 992px) {
    /* Edge-to-edge WebViews may report zero iOS insets. Keep the same fallback
       as the map controls, and reserve the app's bottom-banner clearance. */
    html.only-map .mapHistory { --history-top: var(--only-map-controls-top, calc(max(64px, env(safe-area-inset-top, 0px)) + 12px)); --history-bottom: calc(var(--only-map-host-banner-height, 60px) + var(--only-map-host-banner-bottom, 0px) + var(--only-map-host-banner-gap, 12px) + env(safe-area-inset-bottom, 0px)); margin-top: var(--history-top); margin-bottom: var(--history-bottom); }
}
/* Cache refresh:  alert history cards. */
/* Cache refresh.                               */