html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}

.whole-area-button {
    color: #333333;
}

.whole-area-button svg {
    display: block;
    margin: auto;
}

/* Mapbox sizes control buttons as 29px squares; this one holds a word. */
.mapboxgl-ctrl-group .satellite-button {
    width: auto;
    padding: 0 8px;
    font-family: sans-serif;
    font-size: 12px;
    color: #333333;
}

/* Title (top left), boxed like the map controls. */
.map-title {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    font-family: sans-serif;
    pointer-events: none;  /* never blocks clicks on the map beneath */
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* The (i) button is the one clickable part of the title box. */
.about-button {
    pointer-events: auto;
    display: flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: #555555;
    cursor: pointer;
}

.about-button:hover {
    color: #000000;
}

/* "About this map" disclaimer. Padding is on the inner box so a click on
   the dialog element itself means the backdrop (see about.js). */
dialog.about {
    padding: 0;
    border: 0;
    border-radius: 6px;
    max-width: min(28rem, calc(100vw - 32px));
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    font-family: sans-serif;
}

dialog.about::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

.about-body {
    padding: 16px 20px;
}

.about-body h2 {
    margin: 0 0 8px;
    font-size: 17px;
}

.about-body p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.45;
    color: #333333;
}

.about-body form {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.about-body button {
    padding: 6px 18px;
    border: 0;
    border-radius: 4px;
    background: #333333;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.map-title h1 {
    margin: 0;
    font-size: 18px;
    letter-spacing: 0.04em;
}

.map-title p {
    margin: 2px 0 0;
    font-size: 13px;
    color: #555555;
}

/* Find box (top right, above the zoom buttons); styled to match Mapbox's own controls.
   Input and magnifier share the top row; the suggestion list wraps below. */
.find-control {
    display: flex;
    flex-wrap: wrap;
    width: 16rem;
    max-width: calc(100vw - 190px);  /* leave room for the title on phones */
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
    font-family: sans-serif;
}

.find-control input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 14px;
    background: transparent;
}

/* Our own clear button replaces the browser's (hover-only) one. */
.find-control input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

.find-clear,
.find-button {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: #555555;
    cursor: pointer;
}

.find-clear {
    padding: 0 4px;
}

.find-clear[hidden] {
    display: none;
}

.find-clear:hover,
.find-button:hover {
    color: #000000;
}

.find-results {
    flex-basis: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #dddddd;
    max-height: 50vh;
    overflow-y: auto;
}

.find-results li {
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
}

.find-results li.active {
    background: #eef3fb;
}

.find-results .find-kind {
    margin-left: 8px;
    color: #777777;
    font-size: 11px;
}

.find-results li.find-empty {
    color: #777777;
    cursor: default;
}

/* Phones: smaller title so the Find box keeps a usable width beside it. */
@media (max-width: 500px) {
    .map-title {
        max-width: 150px;  /* subtitle wraps rather than running under the Find box */
        padding: 4px 8px;
    }

    .map-title h1 {
        font-size: 13px;
        letter-spacing: 0;
    }

    .map-title p {
        font-size: 11px;
    }

    .find-control {
        max-width: calc(100vw - 190px);
    }
}