/* Keep the original Atlas value in the layout and accessibility tree throughout the roll. */
:is(.atlas-stats, #catalogResultCount, #mobileResultCount, #mappedCount, #regionalCount, #unmappedCount, .source-registry__metrics)
  :is(span.atlas-number-roll, .atlas-number-roll span) {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit;
  margin: 0; padding: 0; border: 0; min-height: 0; gap: 0;
}
span.atlas-number-roll { position: relative; display: inline-block; }
span.atlas-number-roll__value { display: inline; }
span.atlas-number-roll__faces { display: none; }

@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .atlas-number-roll__value { opacity: 0; }
  span.atlas-number-roll__faces {
    position: absolute; inset: 0; display: flex; justify-content: center; align-items: stretch;
    pointer-events: none; user-select: none; white-space: nowrap;
  }
  .atlas-number-roll__faces > span { position: relative; display: block; overflow: hidden; }
  .atlas-number-roll__faces > span::before,
  .atlas-number-roll__faces > span::after {
    display: block; animation-duration: 1120ms;
    animation-timing-function: cubic-bezier(.22,.68,.25,1);
    animation-fill-mode: both; animation-delay: var(--atlas-roll-delay, 0ms);
  }
  .atlas-number-roll__faces > span::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(currentColor,currentColor) center / 60% .08em no-repeat;
    animation-name: atlas-digit-out;
  }
  .atlas-number-roll__faces > span::after { content: attr(data-digit); animation-name: atlas-digit-in; }
  .atlas-number-roll__faces > span:nth-child(2) { --atlas-roll-delay: 130ms; }
  .atlas-number-roll__faces > span:nth-child(n+3) { --atlas-roll-delay: 230ms; }
  @keyframes atlas-digit-out {
    from { transform: translateY(0) rotateX(0); }
    65%, to { transform: translateY(-110%) rotateX(70deg); }
  }
  @keyframes atlas-digit-in {
    from { transform: translateY(110%) rotateX(-70deg); }
    to { transform: translateY(0) rotateX(0); }
  }
}

@media screen {
  #catalogResultCount.atlas-filter-count-active, #mobileResultCount.atlas-filter-count-active {
    border-radius: .2em; outline: 2px solid #51752e; outline-offset: 2px;
    background: #e4f3c1; color: #163d26;
  }
  .atlas-filter-count-note {
    position: fixed; z-index: 2; display: inline-flex; align-items: center;
    padding: 5px 10px; border: 1px solid #9caf85; border-radius: 20px;
    background: #eff7df; color: #193f2a; font: 700 13px/1.25 system-ui,sans-serif;
    white-space: nowrap; pointer-events: none;
  }
  @media (forced-colors: active) {
    #catalogResultCount.atlas-filter-count-active, #mobileResultCount.atlas-filter-count-active {
      outline-color: Highlight;
    }
    .atlas-filter-count-note { border-color: Highlight; }
  }
}
@media print { .atlas-filter-count-note { display: none; } }

/* Signal the atlas adapter's actual selected geometry, markers or national scope. */
@media (max-width: 1180px) {
  #detailPanel:has(> .detail-record[data-atlas-map-first]) { display: none; }
}
@media (max-width: 820px) {
  #atlasLayout:has(> #detailPanel > .detail-record[data-atlas-map-first]) { grid-template-columns: minmax(0,1fr); }
}
#mapStage .atlas-location-signal > .marker-selection-pulse > b { display: none; }
#mapStage :is(.map-marker,.google-marker,.map-area-point,.google-area-point).atlas-location-signal > .marker-selection-pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  box-sizing: border-box;
  border: 3px solid #168045;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px #e9ffc6;
}
#mapStage :is(.map-area-label,.google-area-label,.map-national-badge).atlas-location-signal {
  outline: 3px solid #168045;
  outline-offset: 2px;
  box-shadow: 0 0 0 7px #fff;
}
#mapStage .map-area-shape.atlas-location-signal {
  stroke: #087542;
  stroke-width: 6px;
  filter: drop-shadow(0 1px 1px #fff) drop-shadow(0 -1px 1px #fff);
}
#mapStage[data-atlas-signal-label] .map-area-label.is-selected { display: inline-flex; }
@media (max-width: 820px) {
  #mapStage[data-atlas-signal-scope] .map-national-badges { display: flex !important; width: max-content; max-width: calc(100% - 72px); }
  #mapStage[data-atlas-signal-scope] .map-national-badge:not(.is-selected) { display: none; }
}
@keyframes atlas-locate-ring {
  from { transform: scale(.87); opacity: 1; }
  to { transform: scale(1.55); opacity: .55; }
}
@media (prefers-reduced-motion: no-preference) {
  #mapStage .atlas-location-signal > .marker-selection-pulse::after { animation: atlas-locate-ring 1.15s ease-out 3; }
}
@media (forced-colors: active) {
  #mapStage .atlas-location-signal > .marker-selection-pulse::after { border-color: Highlight; }
  #mapStage :is(.map-area-label,.google-area-label,.map-national-badge).atlas-location-signal { outline-color: Highlight; }
  #mapStage .map-area-shape.atlas-location-signal { stroke: Highlight; }
}