/* Scoped to the demo. Explicit px sizes avoid Twenty Twenty's 10px rem base. */
.rt-snoop[data-rt-snooping] {
  color: #252b30;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
}
.rt-snoop[data-rt-snooping] *, .rt-snoop[data-rt-snooping] *::before, .rt-snoop[data-rt-snooping] *::after { box-sizing: border-box; }
.rt-snoop[data-rt-snooping] p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; }
.rt-snoop[data-rt-snooping] .rt-intro { margin-bottom: 24px; font-size: 18px; }
.rt-snoop[data-rt-snooping] .rt-card {
  --rt-accent: #b71d49;
  padding: clamp(18px, 4vw, 26px);
  margin: 0 0 22px;
  border: 1px solid #d8d4c9;
  border-top: 4px solid var(--rt-accent);
  border-radius: 8px;
  background: #fffefa;
}
.rt-snoop[data-rt-snooping] .rt-device { --rt-accent: #196963; background: #f3faf7; }
.rt-snoop[data-rt-snooping] .rt-eyebrow {
  color: var(--rt-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.rt-snoop[data-rt-snooping] h2 {
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.rt-snoop[data-rt-snooping] .rt-note { color: #525b5b; font-size: 14px; margin-bottom: 18px; }
.rt-snoop[data-rt-snooping] a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rt-snoop[data-rt-snooping] button {
  background: var(--rt-accent);
  color: #fff;
  border: 2px solid transparent;
  border-radius: 5px;
  padding: 12px 20px;
  min-height: 46px;
  max-width: 100%;
  font: 700 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .03em;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}
.rt-snoop[data-rt-snooping] button:hover { filter: brightness(.9); text-decoration: none; }
.rt-snoop[data-rt-snooping] button:disabled { opacity: .65; cursor: wait; }
.rt-snoop[data-rt-snooping] :is(button, summary, a, textarea):focus-visible { outline: 3px solid #252b30; outline-offset: 4px; }
.rt-snoop[data-rt-snooping] .rt-results { border-top: 1px solid #d8ded8; margin-top: 22px; padding-top: 16px; }
.rt-snoop[data-rt-snooping] .rt-empty { color: #59615f; font-size: 14px; margin: 0; }
.rt-snoop[data-rt-snooping] dl { margin: 0; }
.rt-snoop[data-rt-snooping] dl > div { display: flex; flex-wrap: wrap; gap: 2px 18px; padding: 7px 0; }
.rt-snoop[data-rt-snooping] dt { flex: 0 1 164px; font-size: 13px; line-height: 1.65; font-weight: 500; color: #525b5b; margin: 0; }
.rt-snoop[data-rt-snooping] dd { flex: 1 1 180px; font-size: 15px; line-height: 1.5; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.rt-snoop[data-rt-snooping] .rt-log { border-bottom: 1px solid #d2cfc3; padding: 0 0 20px; margin: 4px 0 24px; }
.rt-snoop[data-rt-snooping] summary { cursor: pointer; font-size: 15px; font-weight: 600; padding: 8px 0; }
.rt-snoop[data-rt-snooping] label { display: block; font-size: 13px; margin-top: 10px; }
.rt-snoop[data-rt-snooping] textarea { display: block; width: 100%; min-height: 180px; resize: vertical; margin-top: 6px; padding: 12px; background: #fffefa; color: #252b30; border: 1px solid #aaa; font: 12px/1.6 ui-monospace, monospace; }
.rt-snoop[data-rt-snooping] .rt-about h2 { font-size: 18px; }
.rt-snoop[data-rt-snooping] .rt-about p { font-size: 15px; color: #48514f; }
.rt-snoop[data-rt-snooping] .rt-about .rt-credits { font-size: 13px; margin-top: 18px; }

/* Comparison map. Keep theme link/image/button rules out of Leaflet controls. */
.rt-snoop[data-rt-snooping] [hidden] { display: none !important; }
.rt-snoop[data-rt-snooping] .rt-compare { --rt-accent: #434f70; background: #fafbff; }
.rt-snoop[data-rt-snooping] .rt-map-status { font-size: 15px; font-weight: 600; margin: 18px 0 0; }
.rt-snoop[data-rt-snooping] .rt-map-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.rt-snoop[data-rt-snooping] .rt-map-tools button, .rt-snoop[data-rt-snooping] .rt-map-retry {
  background: transparent; color: #434f70; border: 1px solid #adb4c7;
  padding: 8px 12px; min-height: 44px; font-size: 13px; letter-spacing: 0; text-transform: none;
}
.rt-snoop[data-rt-snooping] .rt-map-tools button:disabled, .rt-snoop[data-rt-snooping] [data-map-open]:disabled { cursor: default; }
.rt-snoop[data-rt-snooping] .rt-map {
  height: 350px; width: 100%; border: 1px solid #cbd1df; border-radius: 6px;
  background: #e8edf0; isolation: isolate; z-index: 0;
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.rt-snoop[data-rt-snooping] .rt-map img { border: 0; padding: 0; margin: 0; }
.rt-snoop[data-rt-snooping] .rt-map .leaflet-control a { color: #252b30; text-decoration: none; }
.rt-snoop[data-rt-snooping] .rt-map .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; }
.rt-snoop[data-rt-snooping] .rt-map .leaflet-control-attribution { font-size: 11px; line-height: 1.5; background: #fff; padding: 2px 5px; }
.rt-snoop[data-rt-snooping] .rt-map .leaflet-control-attribution a { text-decoration: underline; }
.rt-snoop[data-rt-snooping] .rt-map .leaflet-popup-content { font-size: 14px; line-height: 1.5; }
.rt-snoop[data-rt-snooping] .rt-map-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; list-style: none; padding: 0; margin: 16px 0 10px; }
.rt-snoop[data-rt-snooping] .rt-map-legend li { display: flex; gap: 7px; align-items: center; margin: 0; padding: 0; font-size: 13px; }
.rt-snoop[data-rt-snooping] .rt-pin { background: transparent; border: 0; }
.rt-snoop[data-rt-snooping] .rt-pin span, .rt-snoop[data-rt-snooping] .rt-map-legend span {
  display: flex; align-items: center; justify-content: center; background: #b71d49;
  color: #fff; font: 700 11px/1 sans-serif; border: 2px solid #fff;
}
.rt-snoop[data-rt-snooping] .rt-pin span { width: 32px; height: 32px; border-radius: 50% 50% 50% 0; box-shadow: 0 1px 4px #0006; }
.rt-snoop[data-rt-snooping] .rt-pin-device span, .rt-snoop[data-rt-snooping] .rt-legend-device { background: #196963 !important; border-radius: 50%; }
.rt-snoop[data-rt-snooping] .rt-map-legend span { width: 24px; height: 24px; border-radius: 4px; }
.rt-snoop[data-rt-snooping] .rt-map-caption { margin-bottom: 0; font-size: 13px; }
.rt-snoop[data-rt-snooping] .rt-map-error { color: #8a2937; font-size: 14px; margin: 16px 0 8px; }
@media (max-width: 400px) {
  .rt-snoop[data-rt-snooping] .rt-map { height: 300px; }
}