/* All steps remain available when JavaScript or the map cannot load. */
.report-step { margin: 0 0 1.5rem; }
.report-it-page #main { background: #f5f7fa; color: #253443; }
.report-it-page .mobile-nav-toggle { border: 0; background: transparent; min-width: 44px; min-height: 44px; padding: .35rem; }
.report-it-page .report-lead { font-size: 1.2rem; line-height: 1.55; max-width: 48rem; }
.report-welcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 24rem); gap: 2rem; align-items: center; min-height: 27rem; }
.report-welcome-copy { max-width: 46rem; }
.report-welcome-copy h1 { margin-bottom: 1rem; }
.report-welcome-photo { display: block; width: 100%; max-height: 24rem; object-fit: cover; object-position: center 22%; border-radius: .4rem; }
.report-eyebrow { text-transform: uppercase; font-size: .85rem; font-weight: 700; letter-spacing: .06em; color: #52667a; }
.report-quick-actions, .report-map-actions, .report-step-actions, .report-inline { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.report-inline input { flex: 1 1 12rem; max-width: 23rem; }
.report-help, .report-smallprint { color: #4c5c6a; font-size: .95rem; line-height: 1.6; }
.report-smallprint p:not(.report-powered) { font-size: .82rem; }
.report-smallprint .report-powered { font-weight: 400; }
.report-required, .report-optional { font-size: .9rem; font-weight: 400; }
.report-step > label { display: block; margin: 1.1rem 0 .4rem; }
.report-step legend { font-size: 1.35rem; margin-bottom: .75rem; }
.report-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.report-js-button, #postcodeSearch, #useMyLocation, #clearMapPoint, .same-problem { display: none; }
html.js .report-js-button, html.js #postcodeSearch, html.js #useMyLocation, html.js #clearMapPoint, html.js .same-problem { display: inline-flex; align-items: center; justify-content: center; }
html.js .report-step:not(.active) { display: none; }
#reportForm { width: 100%; }
#reportForm label, #reportForm legend { font-weight: 600; }
#reportForm input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
#reportForm select, #reportForm textarea, #postcodeLookup { font-size: 1.05rem; }
#reportForm textarea { min-height: 7rem; resize: vertical; }
#reportForm #description { min-height: 12rem; }
#reportForm .btn, [data-report-next], [data-report-back], #postcodeSearch,
#useMyLocation, #clearMapPoint, #clearRelatedReference, .same-problem {
  min-height: 44px;
  padding: .65rem 1rem;
  white-space: normal;
}
#reportForm :focus-visible, #postcodeSearch:focus-visible,
#useMyLocation:focus-visible, #clearMapPoint:focus-visible,
#clearRelatedReference:focus-visible, .same-problem:focus-visible {
  outline: 3px solid #174f9d;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #fff;
}
.report-controls { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.report-card { background: #fff; border: 1px solid #ccd4dd; border-radius: .5rem; padding: 1.25rem; margin-bottom: 1rem; }
#reportProgress { font-weight: 700; color: #263c50; margin-bottom: 1rem; }
#reportMap { display: none; width: 100%; min-height: 30rem; height: min(64vh, 39rem); border: 2px solid #7190a7; border-radius: .45rem; box-shadow: 0 .25rem .8rem rgba(26, 54, 73, .16); z-index: 0; }
html.js #reportMap { display: block; }
#reportMap .leaflet-control-attribution { font-size: 12px; background: #fff; }
#reportMap .leaflet-control-attribution a { color: #174f9d; }
#reportMap .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
#locationSummary, #relatedSummary { padding: .7rem 0; line-height: 1.5; }
#reportError, #reportSuccess { padding: 1rem 1.25rem; border: 2px solid; border-radius: .35rem; margin: 1rem 0; }
#reportError { color: #7d1921; background: #fff3f3; border-color: #a5212d; }
#reportSuccess { color: #174b2c; background: #f1fbf4; border-color: #2d7144; }
#reportError[hidden], #reportSuccess[hidden], #clearRelatedReference[hidden] { display: none !important; }
#reportReference { font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }
#reviewSummary dl { margin-bottom: 0; }
#reviewSummary dt { font-weight: 700; margin-top: .8rem; }
#reviewSummary dd { margin: .2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#publicReportsList { list-style: none; padding: 0; }
#publicReportsList > li, .report-public-item { border: 1px solid #ccd4dd; border-radius: .4rem; padding: 1rem; margin: 0 0 .85rem; overflow-wrap: anywhere; }
#publicReportsList h3 { font-size: 1.1rem; }
#publicReportsList p, .report-map-popup p { margin-bottom: .65rem; }
.report-photo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin: .85rem 0; }
.report-photo-gallery a { display: block; border: 1px solid #ccd4dd; border-radius: .35rem; overflow: hidden; background: #eef2f5; }
.report-photo-gallery a:focus-visible { outline: 3px solid #174f9d; outline-offset: 2px; }
.report-photo-gallery img { display: block; width: 100%; height: 9rem; object-fit: cover; }
.report-map-popup { max-width: 19rem; overflow-wrap: anywhere; }
.report-map-popup .report-photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-map-popup .report-photo-gallery img { height: 6rem; }
.report-map-popup .same-problem { width: 100%; }
.report-location-tools { display: flex; flex-wrap: wrap; gap: .65rem; align-items: end; margin-bottom: .85rem; }
.report-location-tools input { flex: 1 1 12rem; }
@media (max-width: 575px) {
  .report-welcome { grid-template-columns: 1fr; min-height: 0; }
  .report-welcome-photo { max-height: 16rem; object-position: center 18%; }
  #reportMap { min-height: 23rem; height: 55vh; }
  .report-card { padding: 1rem; }
  .report-controls > *, .report-location-tools button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  #reportForm *, #reportMap *, #publicReportsList * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}