/* Only replace this heading's artwork; leave accordion colours and behaviour intact. */
#mapSidebar #titles {
    background-image: url(../images/down-arrow-lines.svg), url(../images/map-titles-heading.svg) !important;
    background-position: right 8px center, 12px center !important;
    background-size: 27px, 26px;
}

#titlesSection.map-titles-panel {
    padding: 10px;
    color: #252525;
    font: 14px/1.4 Arial, sans-serif;
}

#titlesSection .map-titles-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: end;
    gap: 8px;
}

#titlesSection .map-titles-row + .map-titles-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ddd;
}

/* The 42px artwork spans from the label's visible cap height to the input's bottom edge. */
#titlesSection .map-titles-diagram { display: block; width: 36px; height: 42px; object-fit: contain; }
#titlesSection .map-titles-field { display: grid; gap: 2px; min-width: 0; }

#titlesSection .map-titles-field label {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    font: 600 14px/18px Arial, sans-serif;
}

#titlesSection #mapTitleTextEditor,
#titlesSection #mapHeadingTextEditor {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    height: 26px;
    margin: 0;
    padding: 3px 4px;
    border: 1px solid #aaa;
    border-radius: 3px;
    background: #fff;
    color: #252525;
    font: 13px/1.4 Arial, sans-serif;
}

#titlesSection .map-titles-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

#titlesSection .map-titles-footer .iconLink {
    box-sizing: border-box;
    position: static;
    display: block;
    width: 28px;
    height: 28px;
    padding: 3px;
}

#titlesSection input:focus-visible,
#titlesSection .iconLink:focus-visible {
    outline: 2px solid #426ab0;
    outline-offset: 2px;
}