#mapSidebar #labels {
    background-image: url(../images/down-arrow-lines.svg), url(../images/map-colours-wheel.svg) !important;
    background-position: right 8px center, 12px center !important;
    background-size: 27px, 26px;
    padding-right: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#mapColoursSection { padding: 10px; color: #252525; font: 13px/1.4 Arial, sans-serif; }
#mapColoursSection * { box-sizing: border-box; }
#mapColoursSection .mapStyling { padding: 0; overflow: visible; }
#mapColoursSection .mc-group + .mc-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid #ddd; }
#mapColoursSection h3 { margin: 0 0 4px; padding: 0; color: #676b63; font: 600 13px/18px Arial, sans-serif; }
#mapColoursSection ul { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; list-style: none; }
#mapColoursSection .mapStyling li { float: none; width: auto; min-width: 0; margin: 0; padding: 0; background: none !important; }
#mapColoursSection .mc-colour-button {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    margin: 0;
    padding: 2px 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #252525;
    font: 13px/17px Arial, sans-serif;
    text-align: left;
    cursor: pointer;
}
#mapColoursSection .mc-colour-button:hover { background: #f0f4ed; }
#mapColoursSection .mc-colour-button:disabled { cursor: default; color: #72756e; }
#mapColoursSection .mc-row-label { min-width: 0; overflow-wrap: break-word; }
#mapColoursSection .mc-row-icon { display: block; width: 24px; height: 28px; overflow: visible; }
#mapColoursSection .mc-swatch { display: block; width: 30px; height: 30px; }
/* Decorative paths must not enter the legacy document-level polygon click handler. */
#mapColoursSection .mc-row-icon,
#mapColoursSection .mc-swatch { pointer-events: none; }
#mapColoursSection .mc-tint-fill,
#mapColoursSection .mc-swatch-fill { fill: var(--mc-colour, none); }
#mapColoursSection .mc-tint-stroke { stroke: var(--mc-colour, none); }
#mapColoursSection .mc-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #ddd; }
#mapColoursSection #resetColours { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; width: auto; height: 32px; margin: 0; padding: 5px 8px; background: #f2f2f2; border: 1px solid #999; border-radius: 4px; color: #252525; font: 13px/1.4 Arial, sans-serif; white-space: nowrap; }
#mapColoursSection #resetColours img { width: 19px; height: 19px; }
#mapColoursSection #resetColours:hover { background: #e8eee2; border-color: #66844e; }
#mapColoursSection .mc-footer .iconLink { position: static; display: block; flex: 0 0 28px; width: 28px; height: 28px; padding: 3px; }
#mapColoursSection button:focus-visible,
#mapColoursSection a:focus-visible { outline: 2px solid #426ab0; outline-offset: 2px; }
/* The legacy palette had a 450px wrapper and absolutely positioned floats inside a
   285px popup. Let the palette determine its height; never scroll that empty space. */
#modal_colour_selector.mc-panel-picker {
    box-sizing: border-box;
    width: 365px;
    max-width: calc(100vw - 16px);
    height: auto;
    overflow: visible;
}
#modal_colour_selector.mc-panel-picker #selectorWrap {
    height: auto;
    /* Only a genuinely short viewport needs scrolling. Keep its header accessible. */
    max-height: calc(100vh - 51px);
    overflow-x: hidden;
    overflow-y: auto;
}
#modal_colour_selector.mc-panel-picker #selectorWrap > div {
    position: static;
    float: none;
    display: grid;
    /* coloursz.php supplies 19 hue columns; reducing width must not rewrap them. */
    grid-template-columns: repeat(19, minmax(0, 1fr));
    gap: 4px;
    padding: 2px 3px;
}
#modal_colour_selector.mc-panel-picker #selectorWrap .colour {
    float: none;
    width: auto;
    height: auto;
    min-width: 0;
    aspect-ratio: 1;
    margin: 0;
    border: 0;
}
/* Outlines highlight a colour without changing its size or shifting its neighbours. */
#modal_colour_selector.mc-panel-picker #selectorWrap .colour.selected { outline: 2px solid #000; }
#modal_colour_selector.mc-panel-picker #selectorWrap .colour:hover { outline: 2px solid red; }
#modal_colour_selector.mc-panel-picker #selectorWrap svg { display: block; }
#modal_colour_selector.mc-panel-picker #selectorWrap br { display: none; }
#modal_colour_selector.mc-panel-picker #selectorWrap hr {
    grid-column: 1 / -1;
    float: none !important;
    width: auto !important;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid #aaa;
}
#modal_colour_selector.mc-panel-picker rect:focus { outline: 2px solid #426ab0; outline-offset: -2px; }