/* ========================================================================== 
   Broadhectare Map
   All theme colours and layout measurements are centralised in :root.
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */

    --layout-header-height: 64px;
    --layout-toolbar-height: 46px;
    --layout-panel-width: 380px;
    --layout-panel-mobile-width-maximum: 380px;
    --layout-responsive-breakpoint: 900px;

    --layout-header-padding-horizontal: 14px;
    --layout-toolbar-padding-horizontal: 10px;
    --layout-panel-header-padding-horizontal: 10px;
    --layout-panel-content-padding: 16px;
    --layout-geocoder-height: 42px;
    --layout-geocoder-border-width: 2px;
    --layout-geocoder-border-radius: 6px;
    --layout-geocoder-border-focus-width: 3px;
    --layout-geocoder-border-focus-offset: 2px;		
    --layout-geocoder-margin-bottom: 16px;
    --layout-geocoder-icon-size: 20px;
    --layout-geocoder-result-padding-vertical: 10px;
    --layout-geocoder-result-padding-horizontal: 12px;
    --layout-geocoder-region-icon-gap: 6px;
	
	--layout-logo-height: 80%;
	--layout-logo-width-maximum: 40vw;

    --layout-toolbar-button-gap: 5px;
    --layout-toolbar-button-margin-right: 18px;

    --layout-toolbar-border-width: 5px;
    --layout-panel-border-width: 1px;

    --layout-toolbar-button-min-height: 38px;
    --layout-toolbar-button-padding-vertical: 5px;
    --layout-toolbar-button-padding-horizontal: 8px;
    --layout-toolbar-button-border-radius: 3px;

    --layout-close-button-size: 38px;
    --layout-focus-outline-width: 2px;
    --layout-focus-outline-offset: 1px;
	
	--layout-map-result-padding: 40px;

    --layout-legend-section-gap: 16px;
    --layout-legend-heading-height: 36px;
    --layout-legend-heading-padding-horizontal: 6px;
	--layout-legend-heading-border-width: 0px;
    --layout-legend-grid-row-height: 38px;
    --layout-legend-grid-column-gap: 0px;
    --layout-legend-grid-padding-horizontal: 6px;	
	--layout-legend-label-offset:8px;
    --layout-legend-symbol-size: 36px;
    --layout-legend-symbol-column-width: 76px;
	--layout-legend-symbol-offset:10px;	
	--layout-legend-symbol-border-width: 2px;
	--layout-legend-symbol-border-dotted-width: 2px;
	--layout-legend-symbol-border-dotted-size: 4px;
    --layout-legend-symbol-border-dotted-gap: 3px;		
    --layout-legend-divider-width: 2px;
    --layout-legend-copy-margin-top: 12px;
    --layout-legend-feature-gap: 12px;
    --layout-legend-feature-column-gap: 20px;	
    --layout-legend-feature-symbol-size: 36px;
    --layout-legend-feature-line-svg-size: 56px;
    --layout-legend-feature-line-width: 3px;
    --layout-legend-feature-line-dash-length: 3px;
    --layout-legend-feature-line-dash-gap: 2px;
    --layout-toggle-height: 22px;
    --layout-toggle-option-min-width: 30px;
    --layout-toggle-border-width: 1px;
    --layout-toggle-border-radius: 3px;
    --layout-toggle-option-padding-horizontal: 5px;
    --layout-notes-divider-margin-vertical: 14px;
    --layout-creative-commons-width: 96px;

    /* Used by JavaScript to apply responsive body classes. */
    --layout-script-breakpoint: 900px;

    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */

    --font-family-primary: "Noto Sans", Helvetica, Arial, sans-serif;

    --font-title-size: 22px;
    --font-title-weight: 600;
    --font-title-line-height: 1;

    --font-subtitle-size: 16px;
    --font-subtitle-weight: 400;
    --font-subtitle-line-height: 1.15;

    --font-toolbar-size: 18px;
    --font-toolbar-weight: 300;
    --font-toolbar-line-height: 1;

    --font-panel-content-size: 16px;
    --font-geocoder-size: 16px;
    --font-geocoder-weight: 300;
    --font-geocoder-result-size: 14px;
    --font-geocoder-secondary-size: 12px;
    --font-geocoder-region-icon-size: 18px;
	--font-geocoder-region-title-weight: 600;
	
    --font-icon-size: 20px;
    --font-icon-weight: 100;
	
    --font-legend-heading-size: 15px;
    --font-legend-heading-weight: 600;
    --font-legend-column-heading-size: 13px;
    --font-legend-column-heading-weight: 600;
    --font-legend-row-size: 13px;
    --font-legend-copy-size: 12px;
    --font-legend-copy-line-height: 1.35;
    --font-notes-heading-size: 15px;
    --font-notes-heading-weight: 600;
    --font-notes-size: 12px;
    --font-notes-line-height: 1.35;
    --font-toggle-size: 11px;
    --font-download-heading-size: 15px;
    --font-download-heading-weight: 600;


    /* ----------------------------------------------------------------------
       Colours
       ---------------------------------------------------------------------- */

    --colour-header-background: #005eb8;
    --colour-header-text: #ffffff;

    --colour-toolbar-background: #ffffff;
    --colour-toolbar-text: #353535;
    --colour-toolbar-icon: #307edb;
    --colour-toolbar-hover-background: #f2f6fa;

    --colour-highlight-border: #84d3ff;

    --colour-panel-background: #fafafa;
    --colour-panel-text: #353535;
    --colour-panel-border: #003552;

    --colour-workspace-background: #e9eef2;
    --colour-overlay-background: rgba(0, 0, 0, 0.30);

    --colour-focus-outline: #307edb;
    --colour-geocoder-background: #ffffff;
    --colour-geocoder-text: #353535;
    --colour-geocoder-placeholder: #6b6b6b;
    --colour-geocoder-border: #848484;  
	--colour-geocoder-border-focus-inner: #ebebeb;
	--colour-geocoder-border-focus-outer: #002e85;
    --colour-geocoder-icon: #307edb;
    --colour-geocoder-result-hover: #f2f6fa;
    --colour-geocoder-secondary-text: #6b6b6b;
    --colour-geocoder-region-icon: #307edb;
	
	--colour-section-heading-background: #dddddd;
    --colour-section-heading-border: #c7c7c7;
    --colour-legend-divider: #dddddd;
    --colour-legend-symbol-border: #dddddd;
    --colour-toggle-border: #b8b8b8;
    --colour-toggle-background: #eeeeee;
    --colour-toggle-text: #6b6b6b;
    --colour-toggle-active-background: #7b7b7b;
    --colour-toggle-active-text: #ffffff;
    --colour-link: #005eb8;

    --colour-bh-urban-0-2: rgb(255, 0, 0);
    --colour-bh-urban-2-5: rgb(255, 255, 0);
    --colour-bh-urban-5-10: rgb(0, 0, 255);
    --colour-bh-urban-10-plus: rgb(160, 80, 0);
    --colour-bh-urban-unspecified: rgb(255, 112, 255);

    --colour-bh-rural-0-2: rgb(255, 176, 176);
    --colour-bh-rural-2-5: rgb(255, 255, 176);
    --colour-bh-rural-5-10: rgb(192, 213, 255);
    --colour-bh-rural-10-plus: rgb(255, 216, 176);
    --colour-bh-rural-unspecified: rgb(160, 0, 160);

    --colour-legend-feature-symbol-background: #ffffff;
    --colour-legend-lga-boundary: #f1bb27;
    --colour-legend-pda-boundary: #000000;
    --colour-legend-urban-footprint: #d7c8bc;
	--colour-legend-urban-footprint-border: #c1a995;
    --colour-legend-roads: #d8d8d8 ;
	


	--layout-map-inspector-offset: 10px;
	--layout-map-inspector-arrow-offset: 14px;
	--layout-map-inspector-cursor-anchor: 22px;
	--layout-map-inspector-padding: 10px;
	--layout-map-inspector-max-width: 260px;
	--layout-map-inspector-border-width: 1px;
	--layout-map-inspector-border-radius: 4px;
	--layout-map-inspector-list-padding-left: 20px;
	--layout-map-inspector-list-gap: 3px;
	--layout-map-inspector-feature-gap: 8px;
	--layout-map-inspector-attribute-gap: 4px;
	--layout-map-inspector-attribute-column-width: 90px;
	--layout-map-inspector-feature-padding-bottom: 8px;
	--layout-map-inspector-symbol-size: 25px;
	--layout-map-inspector-line-svg-size: 39px;
	--layout-map-inspector-item-gap: 9px;
	--layout-map-inspector-item-row-gap: 8px;
	--layout-map-inspector-close-size: 28px;
	--layout-map-inspector-close-offset: 3px;
	--layout-map-inspector-content-padding-right: 18px;

	--font-map-inspector-label-weight: 600;
	--font-map-inspector-value-size: 12px;
	--font-map-inspector-size: 12px;
	--font-map-inspector-title-weight: 600;
	--font-map-inspector-layer-weight: 600;
	--font-map-inspector-table-size: 11px;
	--font-map-inspector-attribute-size: 11px;


	--colour-map-inspector-background: rgba(255, 255, 255, 0.94);
	--colour-map-inspector-text: #353535;
	--colour-map-inspector-border: #848484;
	--colour-map-inspector-divider: #c7c7c7;
	--colour-map-inspector-secondary-text: #676767;



    /* ----------------------------------------------------------------------
       Shadows
       ---------------------------------------------------------------------- */

    --shadow-toolbar: 0 1px 5px 1px rgba(0, 0, 0, 0.70);
    --shadow-panel: 0 2px 7px 1px rgba(0, 0, 0, 0.30);
	--shadow-map-inspector: 0 2px 7px rgba(0, 0, 0, 0.30);

    /* ----------------------------------------------------------------------
       Animation
       ---------------------------------------------------------------------- */

    --animation-panel-duration: 0.5s;
    --animation-panel-easing: ease;
	--animation-panel-auto-open-delay: 1500ms; /* Initial panel reveal after page load */
	
}



button {
    font: inherit;
}

/* ========================================================================== 
   Header
   ========================================================================== */

#header {
    height: var(--layout-header-height);
    flex: 0 0 var(--layout-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--layout-header-padding-horizontal);
    color: var(--colour-header-text);
    background: var(--colour-header-background);
}

#title-block {
    min-width: 0;
}

#title {
    font-size: var(--font-title-size);
    font-weight: var(--font-title-weight);
    line-height: var(--font-title-line-height);
    white-space: nowrap;
}

#subtitle {
    font-size: var(--font-subtitle-size);
    font-weight: var(--font-subtitle-weight);
    line-height: var(--font-subtitle-line-height);
    white-space: nowrap;
}

#logo-block {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}

#header-logo {
    display: block;
    width: auto;
    height: var(--layout-logo-height);
    max-width: var(--layout-logo-width-maximum);
    max-height: 100%;
}



/* ========================================================================== 
   Main toolbar
   ========================================================================== */

#toolbar {
    position: relative;
    z-index: 100;
    height: var(--layout-toolbar-height);
    flex: 0 0 var(--layout-toolbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--layout-toolbar-padding-horizontal);
    background: var(--colour-toolbar-background);
    border-bottom: var(--layout-toolbar-border-width) solid var(--colour-highlight-border);
    box-shadow: var(--shadow-toolbar);
}

.toolbar-group {
    display: flex;
    align-items: center;
    min-width: 0;
}

.toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--layout-toolbar-button-gap);
    min-height: var(--layout-toolbar-button-min-height);
    margin: 0 var(--layout-toolbar-button-margin-right) 0 0;
    padding: var(--layout-toolbar-button-padding-vertical) var(--layout-toolbar-button-padding-horizontal);
    color: var(--colour-toolbar-text);
    background: transparent;
    border: 0;
    border-radius: var(--layout-toolbar-button-border-radius);
    font-size: var(--font-toolbar-size);
    font-weight: var(--font-toolbar-weight);
    line-height: var(--font-toolbar-line-height);
    cursor: pointer;
    user-select: none;
}

.toolbar-button-last {
    margin-right: 0;
}

.toolbar-button:hover,
.toolbar-button:focus-visible {
    background: var(--colour-toolbar-hover-background);
}

.toolbar-button:focus-visible,
#close-panel:focus-visible {
    outline: var(--layout-focus-outline-width) solid var(--colour-focus-outline);
    outline-offset: var(--layout-focus-outline-offset);
}

.toolbar-button .material-icons,
.toolbar-button .material-icons-outlined,
#panel-title .material-icons-outlined {
    color: var(--colour-toolbar-icon);
    font-size: var(--font-icon-size);
    font-weight: var(--font-icon-weight);
    line-height: var(--font-toolbar-line-height);
}

/* ========================================================================== 
   Workspace and map
   ========================================================================== */

#workspace {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    background: var(--colour-workspace-background);
}

#map {
    position: absolute;
    inset: 0;
}










#map-inspector {
    position: absolute;
    z-index: 150;
    display: none;
    width: max-content;
    max-width: var(--layout-map-inspector-max-width);
    padding: var(--layout-map-inspector-padding);
    padding-right: calc(var(--layout-map-inspector-close-size) + var(--layout-map-inspector-padding));
    color: var(--colour-map-inspector-text);
    background: var(--colour-map-inspector-background);
    border: var(--layout-map-inspector-border-width) solid var(--colour-map-inspector-border);
    border-radius: var(--layout-map-inspector-border-radius);
    box-shadow: var(--shadow-map-inspector);
    font-size: var(--font-map-inspector-size);
    overflow: visible;
    pointer-events: auto;
}

#map-inspector::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--colour-map-inspector-background);
    border: var(--layout-map-inspector-border-width) solid var(--colour-map-inspector-border);
    transform: rotate(45deg);
}

#map-inspector.inspector-bottom-right::before {
    top: -7px;
    left: var(--layout-map-inspector-arrow-offset);
    border-right: none;
    border-bottom: none;
}

#map-inspector.inspector-bottom-left::before {
    top: -7px;
    right: var(--layout-map-inspector-arrow-offset);
    border-right: none;
    border-bottom: none;
}

#map-inspector.inspector-top-right::before {
    bottom: -7px;
    left: var(--layout-map-inspector-arrow-offset);
    border-left: none;
    border-top: none;
}

#map-inspector.inspector-top-left::before {
    bottom: -7px;
    right: var(--layout-map-inspector-arrow-offset);
    border-left: none;
    border-top: none;
}

#map-inspector-close {
    position: absolute;
    top: var(--layout-map-inspector-close-offset);
    right: var(--layout-map-inspector-close-offset);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--layout-map-inspector-close-size);
    height: var(--layout-map-inspector-close-size);
    padding: 0;
    color: var(--colour-map-inspector-text);
    background: transparent;
    border: 0;
    border-radius: var(--layout-toolbar-button-border-radius);
    cursor: pointer;
}

#map-inspector-close:hover,
#map-inspector-close:focus-visible {
    background: var(--colour-toolbar-hover-background);
}

#map-inspector-close .material-icons {
    font-size: var(--font-icon-size);
}

#map-inspector-layers {
    display: grid;
    gap: var(--layout-map-inspector-item-row-gap);
    margin: 0;
    padding: 0;
}

.map-inspector-item {
    display: flex;
    align-items: center;
    gap: var(--layout-map-inspector-item-gap);
    min-width: 0;
}

.map-inspector-symbol {
    position: relative;
    width: var(--layout-map-inspector-symbol-size);
    height: var(--layout-map-inspector-symbol-size);
    flex: 0 0 var(--layout-map-inspector-symbol-size);
    border: var(--layout-legend-symbol-border-width) solid var(--colour-legend-symbol-border);
    border-radius: 50%;
}

.map-inspector-symbol-circle {
    background: currentColor;
}

.map-inspector-symbol-dotted {
    border-style: dashed;
    border-width: var(--layout-legend-symbol-border-dotted-width);
}

.map-inspector-symbol-line {
    background: var(--colour-legend-feature-symbol-background);
}

.map-inspector-symbol-line svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--layout-map-inspector-line-svg-size);
    height: var(--layout-map-inspector-line-svg-size);
    overflow: visible;
    transform: translate(-50%, -50%);
}

.map-inspector-symbol-line path {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--layout-legend-feature-line-width);
    stroke-linecap: round;
}

.map-inspector-symbol-line-dotted path {
    stroke-dasharray: var(--layout-legend-feature-line-dash-length) var(--layout-legend-feature-line-dash-gap);
    stroke-linecap: butt;
}

.map-inspector-content {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.map-inspector-label {
    display: block;
    font-weight: var(--font-map-inspector-label-weight);
}

.map-inspector-value {
    display: block;
    font-size: var(--font-map-inspector-value-size);
    overflow-wrap: anywhere;
}

/* ========================================================================== 
   Map options panel
   The panel starts one toolbar height above the workspace so its header
   overlays the main toolbar exactly. The full-width map remains underneath.
   ========================================================================== */

#overlay {
    position: absolute;
    z-index: 199;
    inset: 0;
    display: none;
    background: var(--colour-overlay-background);
}

#overlay.is-visible {
    display: block;
}

#panel {
    position: absolute;
    z-index: 200;
    top: calc(0px - var(--layout-toolbar-height));
    bottom: 0;
    left: 0;
    width: var(--layout-panel-width);
    display: flex;
    flex-direction: column;
    color: var(--colour-panel-text);
    background: var(--colour-panel-background);
    border-right: var(--layout-panel-border-width) solid var(--colour-panel-border);
    box-shadow: var(--shadow-panel);
    transform: translateX(-101%);
    transition:
        transform
        var(--animation-panel-duration)
        var(--animation-panel-easing);
}

#panel.is-open {
    transform: translateX(0);
}

#panel-header {
    height: var(--layout-toolbar-height);
    flex: 0 0 var(--layout-toolbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--layout-panel-header-padding-horizontal);
    background: var(--colour-toolbar-background);
    border-bottom: var(--layout-toolbar-border-width) solid var(--colour-highlight-border);
}

#panel-title {
    display: flex;
    align-items: center;
    gap: var(--layout-toolbar-button-gap);
    font-size: var(--font-toolbar-size);
    font-weight: var(--font-toolbar-weight);
    line-height: var(--font-toolbar-line-height);
}
#panel-title {
    flex: 1 1 auto;
}

#close-panel {
    flex: 0 0 var(--layout-close-button-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--layout-close-button-size);
    height: var(--layout-close-button-size);
    padding: 0;
    color: var(--colour-toolbar-icon);
    background: transparent;
    border: 0;
    border-radius: var(--layout-toolbar-button-border-radius);
    cursor: pointer;
}

#close-panel:hover,
#close-panel:focus-visible {
    background: var(--colour-toolbar-hover-background);
}

#close-panel .material-icons {
    display: block;
    color: var(--colour-toolbar-icon);
    font-size: var(--font-icon-size);
    line-height: 1;
}


#panel-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--layout-panel-content-padding);
    overflow-y: auto;
    background: var(--colour-panel-background);
    font-size: var(--font-panel-content-size);
}

/* ========================================================================== 
   Geocoder
   ========================================================================== */

#geocoder-container {
    width: 100%;
    margin-bottom: var(--layout-geocoder-margin-bottom);
}

#geocoder-container .mapboxgl-ctrl-geocoder {
    width: 100%;
    max-width: none;
    min-width: 0;
    background: var(--colour-geocoder-background);

    box-shadow: none;
    font-family: var(--font-family-primary);
    font-size: var(--font-geocoder-size);
    font-weight: var(--font-geocoder-weight);
}

#geocoder-container .mapboxgl-ctrl-geocoder--input {
    height: var(--layout-geocoder-height);
    color: var(--colour-geocoder-text);
    font-family: var(--font-family-primary);
    font-size: var(--font-geocoder-size);
    font-weight: var(--font-geocoder-weight);
    border: var(--layout-geocoder-border-width) solid var(--colour-geocoder-border);
    border-radius: var(--layout-geocoder-border-radius);	
}


#geocoder-container .mapboxgl-ctrl-geocoder--input:focus {
    background-color:  var(--colour-geocoder-background);
    border-radius: var(--layout-geocoder-border-radius);
    border: var(--layout-geocoder-border-width) solid  var(--colour-geocoder-border-focus-inner);
    outline: var(--layout-geocoder-border-focus-width) solid var(--colour-geocoder-border-focus-outer);
    outline-offset:var(--layout-geocoder-border-focus-offset);
}







.mapboxgl-ctrl-geocoder--powered-by {
	display: none !important;
}


#geocoder-container .mapboxgl-ctrl-geocoder--input::placeholder {
    color: var(--colour-geocoder-placeholder);
    opacity: 1;
}



#geocoder-container .mapboxgl-ctrl-geocoder--icon {
    width: var(--layout-geocoder-icon-size);
    height: var(--layout-geocoder-icon-size);
    fill: var(--colour-geocoder-icon);
}

#geocoder-container .suggestions {
    font-family: var(--font-family-primary);
    font-size: var(--font-geocoder-result-size);
}

#geocoder-container .suggestions > li > a {
    padding: var(--layout-geocoder-result-padding-vertical)
             var(--layout-geocoder-result-padding-horizontal);
    color: var(--colour-geocoder-text);
}

#geocoder-container .suggestions > .active > a,
#geocoder-container .suggestions > li > a:hover {
    background: var(--colour-geocoder-result-hover);
}

#geocoder-container .mapboxgl-ctrl-geocoder--suggestion-address {
    color: var(--colour-geocoder-secondary-text);
    font-size: var(--font-geocoder-secondary-size);
}

.geocoder-region-title {
    display: flex;
    align-items: center;
    gap: var(--layout-geocoder-region-icon-gap);
    font-weight: var(--font-geocoder-region-title-weight);		
}

.geocoder-region-title .material-icons {
    color: var(--colour-geocoder-region-icon);
    font-size: var(--font-geocoder-region-icon-size);
}

.geocoder-region-subtitle {
    color: var(--colour-geocoder-secondary-text);
    font-size: var(--font-geocoder-secondary-size);
}








/* ========================================================================== 
   Legend and notes
   ========================================================================== */

.legend-section,
.notes-section {
    margin-bottom: var(--layout-legend-section-gap);
}

.legend-section-heading {
    min-height: var(--layout-legend-heading-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--layout-legend-grid-column-gap);
    padding: 0 var(--layout-legend-heading-padding-horizontal);
    background: var(--colour-section-heading-background);
    border: var(--layout-legend-heading-border-width) solid var(--colour-section-heading-border);
    border-radius: var(--layout-toolbar-button-border-radius);
    font-size: var(--font-legend-heading-size);
    font-weight: var(--font-legend-heading-weight);
}

.legend-visibility-toggle {
    display: inline-flex;
    height: var(--layout-toggle-height);
    padding: 0;
    overflow: hidden;
    background: var(--colour-toggle-background);
    border: var(--layout-toggle-border-width) solid var(--colour-toggle-border);
    border-radius: var(--layout-toggle-border-radius);
    font-size: var(--font-toggle-size);
    line-height: 1;
    cursor: pointer;
}

.legend-toggle-option {
    min-width: var(--layout-toggle-option-min-width);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--layout-toggle-option-padding-horizontal);
    color: var(--colour-toggle-text);
}

.legend-toggle-option + .legend-toggle-option {
    border-left: var(--layout-toggle-border-width) solid var(--colour-toggle-border);
}

.legend-visibility-toggle[data-visible="true"] .legend-toggle-on,
.legend-visibility-toggle[data-visible="false"] .legend-toggle-off {
    color: var(--colour-toggle-active-text);
    background: var(--colour-toggle-active-background);
}

.legend-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        var(--layout-legend-symbol-column-width)
        var(--layout-legend-symbol-column-width);
    column-gap: var(--layout-legend-grid-column-gap);
    align-items: center;
    margin-top: var(--layout-legend-grid-column-gap);
	margin-left: var(--layout-legend-grid-padding-horizontal);
	margin-right: var(--layout-legend-grid-padding-horizontal);	
}

.legend-grid-heading {
    min-height: var(--layout-legend-grid-row-height);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--layout-toolbar-button-gap);
    text-align: center;
    font-size: var(--font-legend-column-heading-size);
    font-weight: var(--font-legend-column-heading-weight);
    line-height: 1.15;
}

.legend-grid-heading:first-child {
    justify-content: flex-start;
    text-align: left;
}

.legend-grid-label,
.legend-grid-symbol-cell {
    min-height: var(--layout-legend-grid-row-height);
    display: flex;
    align-items: center;
    border-bottom: var(--layout-legend-divider-width) solid var(--colour-legend-divider);
}

.legend-grid-label {
    font-size: var(--font-legend-row-size);
}

.legend-grid-label span {
	transform: translateY(var(--layout-legend-label-offset));	    
}


.legend-grid-symbol-cell {
    justify-content: center;
}

.legend-symbol {
    width: var(--layout-legend-symbol-size);
    height: var(--layout-legend-symbol-size);
    flex: 0 0 var(--layout-legend-symbol-size);
    border: var(--layout-legend-symbol-border-width) solid var(--colour-legend-symbol-border);
    border-radius: 50%;
	transform: translateY(var(--layout-legend-symbol-offset));	
}

.legend-symbol-urban-0-2 { background: var(--colour-bh-urban-0-2); }
.legend-symbol-urban-2-5 { background: var(--colour-bh-urban-2-5); }
.legend-symbol-urban-5-10 { background: var(--colour-bh-urban-5-10); }
.legend-symbol-urban-10-plus { background: var(--colour-bh-urban-10-plus); }
.legend-symbol-urban-unspecified { background: var(--colour-bh-urban-unspecified); }

.legend-symbol-rural-0-2 { background: var(--colour-bh-rural-0-2); }
.legend-symbol-rural-2-5 { background: var(--colour-bh-rural-2-5); }
.legend-symbol-rural-5-10 { background: var(--colour-bh-rural-5-10); }
.legend-symbol-rural-10-plus { background: var(--colour-bh-rural-10-plus); }
.legend-symbol-rural-unspecified { background: var(--colour-bh-rural-unspecified); }

.legend-copy {
    margin: var(--layout-legend-copy-margin-top) 0 0;
    font-size: var(--font-legend-copy-size);
    line-height: var(--font-legend-copy-line-height);
}

.legend-feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--layout-legend-feature-column-gap);
    row-gap: var(--layout-legend-feature-gap);
    margin-top: var(--layout-legend-copy-margin-top);
}


.legend-feature-item {
    display: flex;
    align-items: center;
    gap: var(--layout-legend-feature-gap);
    font-size: var(--font-legend-row-size);
}

.legend-feature-symbol {
    position: relative;
    width: var(--layout-legend-feature-symbol-size);
    height: var(--layout-legend-feature-symbol-size);
    flex: 0 0 var(--layout-legend-feature-symbol-size);
    border: var(--layout-legend-symbol-border-width) solid var(--colour-legend-symbol-border);
    border-radius: 50%;
}

/* Filled-circle symbols use the assigned legend colour as their fill. */
.legend-symbol-circle {
    background: currentColor;
}

/* Line symbols use a neutral circle with the SVG line centred above it. */
.legend-symbol-line {
    background: var(--colour-legend-feature-symbol-background);
}

.legend-symbol-line svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--layout-legend-feature-line-svg-size);
    height: var(--layout-legend-feature-line-svg-size);
    overflow: visible;
    transform: translate(-50%, -50%);
}

.legend-symbol-line path {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--layout-legend-feature-line-width);
    stroke-linecap: round;
}

.legend-line-style-dotted path {
    stroke-dasharray:
        var(--layout-legend-feature-line-dash-length)
        var(--layout-legend-feature-line-dash-gap);
    stroke-linecap: butt;
}

.legend-symbol-border-dotted {
	border-style: dashed;
	border-width: var(--layout-legend-symbol-border-dotted-width);
}



/* Feature colours. Add new semantic colour classes here. */
.legend-colour-lga-boundary {
    color: var(--colour-legend-lga-boundary);
}

.legend-colour-pda-boundary {
    color: var(--colour-legend-pda-boundary);
}

.legend-colour-urban-footprint {
    color: var(--colour-legend-urban-footprint);
	border-color: var(--colour-legend-urban-footprint-border);
}

.legend-colour-roads {
    color: var(--colour-legend-roads);
}



.notes-section {
    padding-top: var(--layout-notes-divider-margin-vertical);
    border-top: var(--layout-legend-divider-width) solid var(--colour-legend-divider);
}

.notes-heading,
.download-heading {
    margin: 0 0 var(--layout-toolbar-button-gap);
    font-size: var(--font-notes-heading-size);
    font-weight: var(--font-notes-heading-weight);
}

.notes-section p,
.download-section p {
    margin: 0 0 var(--layout-legend-copy-margin-top);
    font-size: var(--font-notes-size);
    line-height: var(--font-notes-line-height);
}

#creative-commons-logo {
    display: block;
    width: var(--layout-creative-commons-width);
    height: auto;
    margin-top: var(--layout-legend-copy-margin-top);
}

.download-section {
    padding-top: var(--layout-notes-divider-margin-vertical);
    border-top: var(--layout-legend-divider-width) solid var(--colour-legend-divider);
}

.download-heading {
    font-size: var(--font-download-heading-size);
    font-weight: var(--font-download-heading-weight);
}

.download-section a {
    color: var(--colour-link);
}

/* ========================================================================== 
   Responsive state classes
   JavaScript applies these classes using --layout-script-breakpoint.
   This keeps the breakpoint value centralised with the other measurements.
   ========================================================================== */

body.is-small-screen #desktop-actions {
    display: none;
}

body.is-small-screen #panel {
    width: min(88vw, var(--layout-panel-mobile-width-maximum));
}

body.is-large-screen #overlay {
    display: none !important;
}


@media (prefers-reduced-motion: reduce) {
    #panel {
        transition: none;
    }
}



@media print {

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body.is-printing {
        width: 1400px;
        height: 900px;
        overflow: hidden;
    }

    #workspace {
        position: relative;
        width: 100%;
        height: 100%;
    }

}