* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #fafafa;
}

#app-container {
    display: flex;
    flex-direction: column;
    width: 100vw;

    /* Fallback for older browsers */
    height: 100vh; 
    /* Perfect for mobile browsers and standalone PWAs */
    height: 100dvh; 
}

#legend-content {
    position: absolute;
    top: 84px;
    right: 84px;
    background-color: #fff;
    border-radius: 4px;
    max-height: unset; 
}

/* Header & Dynamic Accordion Panel */
#top-panel {
    background: #fafafa;
    color: #000;
    display: flex;
    flex-direction: column;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: max-height 10.8s ease-out;
}

#accordion-toggle {
    width: 100%;
    padding: 4px 50px 16px 10px;
    background: none;
    border: none;
    color: #000;
    font-size: 1.1rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    outline: none;
}

#toggle-icon {
    font-size: 0.9rem;
    font-weight: normal;
    opacity: 0.8;
}


.legend-inner {
    padding: 15px 20px;
}

.legend-inner h3 {
    margin-bottom: 10px;
    font-size: 1rem;
}

.legend-inner ul {
    list-style: none;
}

.legend-inner li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
}


/* Map takes up all remaining space */
#map {
    flex-grow: 1;
    width: 100%;
}

/* Custom Install Banner */
#install-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background: #317EFB;
    color: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    z-index: 100;
}

#install-banner p {
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.banner-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.banner-buttons button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

#btn-install {
    background: white;
    color: #317EFB;
}

#btn-dismiss {
    background: rgba(255,255,255,0.2);
    color: white;
}

h1 { 
    color: #32627a; 
    text-align: left; 
    padding: 4px; 
    margin: 0; 
    font: 36px/28px 'Raleway', Arial, Helvetica, sans-serif;
}

h1 img {
    width:52px; 
    height:52px; 
    border-radius: 50%; 
    border: 1px solid #fff; 
    position:relative; 
    top:5px; 
    margin: -5px 15px -5px 5px;
}


    .search-container {
      position:relative;
      top:10px;
      left:10px;
      z-index:2;
      background:#fff;
      border-radius:8px;
      box-shadow:0 4px 12px rgba(0,0,0,0.15);
      width: 80vw; 
	  max-width:360px;
      display:flex;
      flex-direction:column;
    }
    #search-input {
      padding:10px;
      border:none;
      outline:none;
      font-size:16px;
	  width: 65vw;
	  max-width: 300px;
      border-bottom:1px solid #ddd;
    }
	#search-clear, #share-close {
		background-color: #fff;
		font-size: 16px;
		width: 24px;
		border: none;
        display: inline;
        margin-right: 6px;
	}
	#share-close {
		float:right;
	}
	@media screen and (max-width: 640px) {
		#search-input, #search-clear {
			font-size: 24px;
		}
	}
    #suggestions {
      max-height:240px;
      overflow:auto;
	  text-align
    }
    .suggestion {
      padding:8px 10px;
      cursor:pointer;
      border-bottom:1px solid #f0f0f0;
    }
    .suggestion:last-child { border-bottom:none; }
    .suggestion:hover { background:#f7f7f7; }
    .suggestion-title { font-weight:600; }
    .suggestion-sub {
      font-size:12px;
      color:#555;
      display:flex;
      justify-content:space-between;
    }
    #directionsPrompt, #share-url-container {
      display:none;
      background:#fff;
      border-radius:8px;
      box-shadow:0 4px 12px rgba(0,0,0,0.15);
      padding:10px;
      z-index:2;
    }
	#share-url {
		width: 240px;
	}
    #directionsPrompt button {
      margin-top:8px;
      margin-right:8px;
      padding:6px 12px;
      border:none;
      border-radius:6px;
      cursor:pointer;
      background:#32627a;
      color:white;
      display: inline;
      width: 48px;
    }
    #directionsPrompt button:last-child {
      background:#ccc;
      color:black;
    }

.ward-routes {
	font: 11px 'Raleway', Arial, Helvetica, sans-serif;
	line-height: 16px;
	padding: 8px;
}

#reset-button {
    height: 40px;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #32627a;
    cursor: pointer;
    color: #32627a;
    font-size: 12px;
}

#mph, #mph-avg, #total-dist, #total-min {
	padding-top: 4px;
	font-size: 140%;
}

#ward {
	padding-bottom: 4px;
	font-size: 140%;
}

.ward-info-bubble {
	padding: 20px;
	font-size: 110%;
	text-align: left;
	width: 72vw;
}

#dashboard {
	min-width: 214px;
}

.dash-label {
	font-size: 11px;
	text-align: center;
}

.mapboxgl-ctrl button.mapboxgl-ctrl-follow-inactive .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml;utf8,<svg height="29" width="29" xmlns="http://www.w3.org/2000/svg" version="1.1"><line x1="5" y1="24" x2="12" y2="5" style="stroke:rgb(0,0,0);stroke-width:2" /><line x1="7" y1="24" x2="12" y2="5" style="stroke:rgb(0,0,0);stroke-width:2" /><line x1="9" y1="24" x2="12" y2="5" style="stroke:rgb(0,0,0);stroke-width:2" /><line x1="24" y1="24" x2="18" y2="5" style="stroke:rgb(0,0,0);stroke-width:2" /><line x1="22" y1="24" x2="18" y2="5" style="stroke:rgb(0,0,0);stroke-width:2" /><line x1="20" y1="24" x2="18" y2="5" style="stroke:rgb(0,0,0);stroke-width:2" /></svg>'); 
}

.mapboxgl-ctrl button.mapboxgl-ctrl-follow-active .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml;utf8,<svg height="29" width="29" xmlns="http://www.w3.org/2000/svg" version="1.1"><line x1="5" y1="24" x2="12" y2="5" style="stroke:rgb(51,181,229);stroke-width:2" /><line x1="7" y1="24" x2="12" y2="5" style="stroke:rgb(51,181,229);stroke-width:2" /><line x1="9" y1="24" x2="12" y2="5" style="stroke:rgb(51,181,229);stroke-width:2" /><line x1="24" y1="24" x2="18" y2="5" style="stroke:rgb(51,181,229);stroke-width:2" /><line x1="22" y1="24" x2="18" y2="5" style="stroke:rgb(51,181,229);stroke-width:2" /><line x1="20" y1="24" x2="18" y2="5" style="stroke:rgb(51,181,229);stroke-width:2" /></svg>'); 
}

.mapboxgl-ctrl button.mapboxgl-ctrl-share-path .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml;utf8,<svg viewBox="138.086 156.066 25.528 25.528" width="25.528" height="25.528" xmlns="http://www.w3.org/2000/svg" version="1.1">  <rect x="138.086" y="156.066" width="25.528" height="25.528" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgba(255, 255, 255,0); stroke-opacity: 0;"></rect>  <ellipse style="stroke: rgb(51, 182, 229); paint-order: fill; fill: rgba(255, 255, 255,0); stroke-width: 2px;" cx="156.89" cy="175.201" rx="3.269" ry="3.269"></ellipse>  <ellipse style="stroke: rgb(51, 181, 229); fill: rgba(255, 255, 255,0); stroke-width: 2px;" cx="144.181" cy="168.261" rx="3.269" ry="3.269"></ellipse>  <ellipse style="stroke: rgb(51, 181, 229); stroke-width: 2px; fill: rgb(51, 181, 229);" cx="156.103" cy="161.015" rx="2.32" ry="2.32"></ellipse>  <line style="stroke: rgb(51, 181, 229); stroke-linecap: round; fill: rgb(210, 125, 125); stroke-width: 2px;" x1="154.117" y1="161.842" x2="147.659" y2="166.974" transform="matrix(0.995789, 0.091677, -0.091677, 0.995789, 15.707851, -13.140602)"></line>  <line style="stroke: rgb(51, 181, 229); stroke-linecap: round; fill: rgb(210, 125, 125); stroke-width: 2px;" x1="153.204" y1="169.841" x2="147.852" y2="174.62" transform="matrix(-0.350618, -0.936519, 0.936519, -0.350618, 42.008736, 373.58988)"></line></svg>');
}

.mapboxgl-ctrl button.mapboxgl-ctrl-battery-saver-inactive .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg width="22px" height="22px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="round" stroke-width="1" stroke="rgb(0,0,0)" fill="none"><path d="M14.25 13h-1.583l1.483 4.717L9.75 13h1.583L9.85 8.283zM18 5v16a2.006 2.006 0 0 1-2 2H8a2.006 2.006 0 0 1-2-2V5a2.006 2.006 0 0 1 2-2h1V2a1.003 1.003 0 0 1 1-1h4a1.003 1.003 0 0 1 1 1v1h1a2.006 2.006 0 0 1 2 2zm-1 0a1 1 0 0 0-1-1h-2V2h-4v2H8a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1z"/></g><path fill="none" d="M0 0h24v24H0z"/></svg>'); 
}

.mapboxgl-ctrl button.mapboxgl-ctrl-battery-saver-active .mapboxgl-ctrl-icon {
background-image: url('data:image/svg+xml;utf8,<svg width="22px" height="22px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="round" stroke-width="1" stroke="rgb(51,181,229)" fill="none"><path d="M14.25 13h-1.583l1.483 4.717L9.75 13h1.583L9.85 8.283zM18 5v16a2.006 2.006 0 0 1-2 2H8a2.006 2.006 0 0 1-2-2V5a2.006 2.006 0 0 1 2-2h1V2a1.003 1.003 0 0 1 1-1h4a1.003 1.003 0 0 1 1 1v1h1a2.006 2.006 0 0 1 2 2zm-1 0a1 1 0 0 0-1-1h-2V2h-4v2H8a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1z"/></g><path fill="none" d="M0 0h24v24H0z"/></svg>'); 
}

.geocoder-icon {
width: 0;
height: 0;
}
.geocoder-icon-close {
background-size: 0px
}




.mapboxgl-ctrl-directions {
    width: 260px;
}
				
.mapbox-directions-destination {
    background-color: #fff;
}
.mapbox-directions-origin {
    background-color: #fff;
}

.mapbox-form-label {
	height: 12px;
	width: 12px;
}

.mapbox-form-label .directions-icon {
	height: 12px;
	width: 12px;
}

.mapbox-directions-destination .mapbox-form-label {
    margin: 12px 0 0 12px;
    background-color: #ffee00;
    border-radius: 6px;
	border: 2px solid #33b5e5;
    z-index: 1;
}		

.mapbox-directions-origin .mapbox-form-label {
    margin: 12px 0 0 12px;
	background-color: #ffffff;
    border-radius: 6px;
	border: 2px solid #33b5e5;
    z-index: 1;
}		

.directions-icon-depart {
    background-image: none;
}
.directions-icon-arrive {
    background-image: none;
}

.mapboxgl-ctrl-geocoder .geocoder-pin-right * {
	right: 25px;
}	

#three-one-one-panel, #ward-panel {
	width: 40px;
	padding: 4px 2px;
    text-align: center;
}

#wardreport { 
	display: none;
	padding: 5vh 5vw;
    z-index: 99;
    position: absolute;
    top: 2vh;
    left: 2vw;
    width: 85vw;
    height: 85vh;
    overflow: auto;
    background-color: #fff;
	text-align: left;
}

.wardreportrow {
	display: inline-block;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-align: left;
    width: 255px;
    height: 200px;
	margin: 2px;
}

.wardreportrow h2 {
	margin: 4px;
}
.btn-311 {
    padding: 6px 4px 2px 4px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    margin: 5px;
    font-size: 11px;
    max-width: 74px;
    background-color: #fefefe;
    color: #000;
    display: inline-block;
    height: 40px;
    width: 72px;
}
.btn-311 a {
	text-decoration: none;
}

#dashboard {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

#dashboard .metric-box {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    padding: 8px;
    border-radius: 4px;
    background-color: #f3f4f6;
    margin: 0 4px;
}

#dashboard .metric{
    font-size: 24px;
    font-weight: bold;
}

#dashboard .metric-label{
    font-size: 11px;
    font-weight: normal;
    text-align: center;
    width: 100%;
}

.custom-controls-topright {
    position:relative; 
    top:148px;
}

.custom-controls-bottomright .mapboxgl-ctrl-bottom-right {
    bottom:100px;
}

#dashboard {
    display: none;
}


@media screen and (max-width: 840px) {

    #legend-content {
        /* Set to maximum of 1/3 of screen height minus toggle button space */
        position: unset;
        top: unset;
        right: unset;
        max-height: calc(33.33vh - 54px); 
        overflow-y: auto;
        border-top: 1px solid #333;
    }

    #accordion-toggle {
        padding: 3px 5px 9px 0px;
    }

    #dashboard {
        display: flex;
    }
}

@media screen and (max-width: 640px) {

    h1 {
        font-size: 26px;
        line-height: 20px;
    }

    h1 span {
        display: inline-block;
    }

    h1 span::first-letter {
        font-size: 32px;
    }
    
    h1 img {
        width:42px; 
        height:42px; 
        margin-right: 4px;
    }

    #toggle-icon {
        font-size: 0rem;
        padding-right: 6px;
    }

    #toggle-icon::first-letter {
        font-size: 1.3rem;
    }

    .custom-controls-topright {
        top:222px;
    }
	
    #bikechi-svc-show-opts {
        zoom: 125%;
    }

	input[type="checkbox"] {
		zoom: 140%;
		padding:0;
		margin:0;
	}
	
	.mapboxgl-ctrl-top-right{
		zoom: 150%;
	}
	
	.mapboxgl-ctrl-bottom-right, 
	.mapboxgl-ctrl-bottom-left {
		zoom: 130%; 
	}
}