.cycling-controls {
  margin: 1.5rem 0 .8rem;
  padding: 1rem;
  border: 1px solid #b9cdb5;
  border-radius: 14px;
  background: linear-gradient(135deg, #f4fbf0, #e4f4de);
  color: #1e3b24;
  font-family: "Times New Roman", Times, serif;
}
.cycling-test-badge {
  display: inline-block;
  margin-bottom: .65rem;
  color: #315638;
  font-size: .95rem;
  font-weight: 700;
}
.cycling-controls .cycling-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.cycling-controls .cycling-buttons button {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
  min-height: 52px;
  padding: .75rem 1rem;
  border: 2px solid #a9c1a2;
  border-radius: 10px;
  background: #fff;
  color: #1e3b24;
  font-family: inherit;
  text-align: center;
  align-items: center;
  font-size: 1.08rem;
  cursor: pointer;
  touch-action: manipulation;
}
.cycling-controls .cycling-buttons button strong { font-size: 1.15rem; line-height: 1.25; }
.cycling-controls .cycling-buttons button span { font-size: .9rem; line-height: 1.2; }
.cycling-controls .cycling-buttons button[aria-pressed="true"] { border-color: #1e3b24; background: #ccffcc; box-shadow: inset 0 0 0 1px #1e3b24; }
.cycling-controls .cycling-buttons button:hover:not(:disabled) { background: #ddf6d5; }
.cycling-controls .cycling-buttons button:focus-visible { outline: 3px solid #1e3b24; outline-offset: 3px; }
.cycling-controls .cycling-buttons button:disabled { cursor: wait; opacity: .65; }
.cycling-status { margin: .7rem 0 0; font-size: 1rem; line-height: 1.4; }
.cycling-status[hidden] { display: none; }
#dtMap .opr-detail-weather-popup-shell .maplibregl-popup-content {
  max-height: var(--opr-cycling-popup-max-height, 170px);
  box-sizing: border-box;
  overflow-y: auto;
}
@media (max-width: 520px) {
  .cycling-controls { padding: .75rem; }
  .cycling-controls .cycling-buttons { gap: .5rem; }
  .cycling-controls .cycling-buttons button { flex-basis: 100%; min-height: 52px; }
}


.cycling-controls .cycling-buttons { margin: 0; }
.cycling-controls .cycling-buttons button[aria-pressed="true"] { color: #1e3b24; }
/* BEGIN SURFACE FRAGMENT */
.cycling-surface { margin-top: 1rem; border-top: 1px solid #bfd2b9; padding-top: .85rem; }
.cycling-surface-toggle { display: flex; align-items: center; gap: .7rem; min-height: 44px; font-size: 1.13rem; font-weight: bold; cursor: pointer; }
.cycling-surface-toggle input { width: 1.25rem; height: 1.25rem; accent-color: #1e3b24; flex-shrink: 0; }
.cycling-surface-toggle input:focus-visible { outline: 3px solid #1e3b24; outline-offset: 3px; }
.cycling-surface p { font-size: 1rem; line-height: 1.4; margin: .55rem 0 0; }
.cycling-surface-list { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; list-style: none; padding: 0; margin: .7rem 0; }
.cycling-surface-list li { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.cycling-surface-swatch { width: 1.8rem; height: .4rem; border: 1px solid #fff; border-radius: 2px; box-shadow: 0 0 0 1px #7c8b78; flex-shrink: 0; }
.cycling-surface-note a { color: inherit; }
.cycling-surface [hidden] { display: none; }
@media (max-width: 520px) { .cycling-surface-list { display: grid; grid-template-columns: 1fr; gap: .75rem; } }

/* END SURFACE FRAGMENT */