/* Second Life's map (SlMapView, sl-map.js). The map itself is SL's and stays the same in light and dark, like
   SlPlace's; the controls, tooltips and cards over it follow the theme. */

cv-sl-map {
    display: block;
    position: relative;
    height: 360px;
    overflow: hidden;
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    /* SL's sea, where there's no region (or before the tiles arrive). */
    background: #1d475f;
}

/* The Civitas mark repeated like a watermark stamp, over the tiles (which carry their own sea) and under the shapes, so it is
   the same everywhere. It stays where it is on the screen while the map moves under it (sl-map.js). */
cv-sl-map .cv-map-stamp {
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22 viewBox=%220 0 220 220%22%3E%3Cg fill=%22%23fff%22 fill-opacity=%22.08%22%3E%3Cg transform=%22translate%2824 24%29 rotate%28-18 32 32%29%22%3E%3Cpath d=%22M50.38 13.62A26.0 26.0 0 0 0 17.09 10.70L22.82 18.89A16.0 16.0 0 0 1 43.31 20.69ZM12.08 15.29A26.0 26.0 0 0 0 12.08 48.71L19.74 42.28A16.0 16.0 0 0 1 19.74 21.72ZM17.09 53.30A26.0 26.0 0 0 0 50.38 50.38L43.31 43.31A16.0 16.0 0 0 1 22.82 45.11Z%22/%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%226.5%22/%3E%3C/g%3E%3Cg transform=%22translate%28134 134%29 rotate%28-18 32 32%29%22%3E%3Cpath d=%22M50.38 13.62A26.0 26.0 0 0 0 17.09 10.70L22.82 18.89A16.0 16.0 0 0 1 43.31 20.69ZM12.08 15.29A26.0 26.0 0 0 0 12.08 48.71L19.74 42.28A16.0 16.0 0 0 1 19.74 21.72ZM17.09 53.30A26.0 26.0 0 0 0 50.38 50.38L43.31 43.31A16.0 16.0 0 0 1 22.82 45.11Z%22/%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%226.5%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 220px;
}

/* A map that is the page's own, not in a card: the width of the page's panels, and tall enough for a parcel's card. */
cv-sl-map.cv-page-map {
    height: max(520px, min(78vh, 820px));
    margin-bottom: 16px;
    box-shadow: var(--shadow4);
}

.cv-panel-grid > cv-sl-map.cv-page-map {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

cv-sl-map .cv-sl-map-box {
    position: absolute;
    inset: 0;
    background: transparent;
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
}

cv-sl-map .leaflet-container a {
    color: var(--colorBrandForegroundLink);
}

cv-sl-map .leaflet-container:focus-visible {
    outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
    outline-offset: -2px;
}

/* Zoom buttons like Fluent's subtle icon buttons, on a card. Leaflet's own rules are as specific as .leaflet-container
   .leaflet-bar a on touch screens, so these go one further. */
cv-sl-map .leaflet-container .leaflet-bar {
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    box-shadow: var(--shadow4);
    overflow: hidden;
}

cv-sl-map .leaflet-container .leaflet-bar a,
cv-sl-map .leaflet-container .leaflet-bar a:hover {
    width: 32px;
    height: 32px;
    line-height: 30px;
    color: var(--colorNeutralForeground1);
    background: var(--colorNeutralBackground1);
    border-bottom-color: var(--colorNeutralStroke2);
    font: var(--fontWeightRegular) 18px/30px var(--fontFamilyBase);
}

cv-sl-map .leaflet-container .leaflet-bar a:hover {
    background: var(--colorNeutralBackground1Hover);
}

cv-sl-map .leaflet-container .leaflet-bar a.leaflet-disabled {
    color: var(--colorNeutralForegroundDisabled);
    background: var(--colorNeutralBackground1);
}

cv-sl-map .leaflet-container .leaflet-bar a:focus-visible {
    outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
    outline-offset: -2px;
}

cv-sl-map .leaflet-container .leaflet-control-attribution {
    color: var(--colorNeutralForeground3);
    background: color-mix(in srgb, var(--colorNeutralBackground1) 80%, transparent);
    font-size: var(--fontSizeBase100);
}

/* The pin is the one Filled icon outside a selected state, as on place cards: a mark on the map, not a control. */
cv-sl-map .cv-map-pin {
    display: flex;
    color: var(--colorPaletteRedBackground3);
    background: none;
    border: none;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.6));
}

cv-sl-map .cv-map-pin:focus-visible {
    outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
    border-radius: var(--borderRadiusSmall);
}

/* Regions, parcels and units, coloured for their state. */
cv-sl-map .cv-map-shape {
    stroke-width: 2px;
    fill-opacity: 0.25;
    stroke: var(--colorBrandBackground);
    fill: var(--colorBrandBackground);
}

cv-sl-map .cv-map-shape:hover,
cv-sl-map .cv-map-shape.cv-map-selected {
    stroke-width: 3px;
    fill-opacity: 0.45;
}

cv-sl-map .cv-map-neutral {
    stroke: #ffffff;
    fill: #ffffff;
}

cv-sl-map .cv-map-positive {
    stroke: var(--colorPaletteGreenBackground3);
    fill: var(--colorPaletteGreenBackground3);
}

cv-sl-map .cv-map-warning {
    stroke: var(--colorPaletteYellowBackground3);
    fill: var(--colorPaletteYellowBackground3);
}

cv-sl-map .cv-map-danger {
    stroke: var(--colorPaletteRedBackground3);
    fill: var(--colorPaletteRedBackground3);
}

cv-sl-map .cv-map-caution {
    stroke: var(--colorPaletteDarkOrangeBackground3);
    fill: var(--colorPaletteDarkOrangeBackground3);
}

/* Just the outline (parcels over their region), filled only enough to be clicked until it's pointed at. */
cv-sl-map .cv-map-outline {
    stroke: #ffffff;
    fill: #ffffff;
    stroke-width: 1px;
    fill-opacity: 0.02;
}

cv-sl-map .cv-map-outline:hover,
cv-sl-map .cv-map-outline.cv-map-selected {
    stroke-width: 2px;
    fill-opacity: 0.3;
}

/* What the colours mean: a card at the bottom right, over the attribution. */
cv-sl-map .cv-map-legend {
    box-sizing: border-box;
    max-width: 240px;
    margin-right: 10px;
    margin-bottom: 6px;
    padding: 8px 12px;
    color: var(--colorNeutralForeground1);
    background: var(--colorNeutralBackground1);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    box-shadow: var(--shadow8);
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
}

cv-sl-map .cv-map-legend-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

cv-sl-map .cv-map-legend-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

cv-sl-map .cv-map-legend-hint {
    margin: 0;
    color: var(--colorNeutralForeground3);
}

cv-sl-map .cv-map-legend-list + .cv-map-legend-hint {
    margin-top: 8px;
    padding-top: 8px;
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

/* A swatch is a shape's colour as it looks drawn: the fill at its map opacity, inside its outline. */
cv-sl-map .cv-map-swatch {
    flex: none;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border-radius: var(--borderRadiusSmall);
    border: 2px solid;
}

cv-sl-map .cv-map-swatch.cv-map-brand {
    color: var(--colorBrandBackground);
    background: color-mix(in srgb, var(--colorBrandBackground) 25%, transparent);
}

cv-sl-map .cv-map-swatch.cv-map-neutral {
    color: #ffffff;
    background: color-mix(in srgb, #ffffff 25%, transparent);
}

cv-sl-map .cv-map-swatch.cv-map-positive {
    color: var(--colorPaletteGreenBackground3);
    background: color-mix(in srgb, var(--colorPaletteGreenBackground3) 25%, transparent);
}

cv-sl-map .cv-map-swatch.cv-map-warning {
    color: var(--colorPaletteYellowBackground3);
    background: color-mix(in srgb, var(--colorPaletteYellowBackground3) 25%, transparent);
}

cv-sl-map .cv-map-swatch.cv-map-danger {
    color: var(--colorPaletteRedBackground3);
    background: color-mix(in srgb, var(--colorPaletteRedBackground3) 25%, transparent);
}

cv-sl-map .cv-map-swatch.cv-map-caution {
    color: var(--colorPaletteDarkOrangeBackground3);
    background: color-mix(in srgb, var(--colorPaletteDarkOrangeBackground3) 25%, transparent);
}

cv-sl-map .cv-map-swatch.cv-map-outline {
    color: #ffffff;
    background: none;
    border-width: 1px;
    border-style: dashed;
}

cv-sl-map .cv-map-far .cv-map-close-up {
    display: none;
}

/* Names on hover, drawn like Fluent's tooltip. */
cv-sl-map .cv-map-tooltip {
    padding: 4px 11px 6px;
    color: var(--colorNeutralForeground1);
    background: var(--colorNeutralBackground1);
    border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
    border-radius: var(--borderRadiusMedium);
    box-shadow: var(--shadow16);
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
}

cv-sl-map .cv-map-tooltip::before {
    display: none;
}

/* A region's name, kept on the map in its middle: white on SL's map, as the viewer's world map writes them. */
cv-sl-map .cv-map-label {
    padding: 0;
    color: #ffffff;
    background: none;
    border: none;
    box-shadow: none;
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightSemibold);
    line-height: var(--lineHeightBase200);
    text-shadow: 0 0 3px rgb(0 0 0 / 0.9), 0 1px 2px rgb(0 0 0 / 0.9);
    white-space: nowrap;
}

cv-sl-map .cv-map-label .cv-map-label-name,
cv-sl-map .cv-map-label .cv-map-label-caption {
    display: block;
    text-align: center;
}

cv-sl-map .cv-map-label .cv-map-label-caption {
    font-size: var(--fontSizeBase100);
    font-weight: var(--fontWeightRegular);
    line-height: var(--lineHeightBase100);
}

cv-sl-map .cv-map-label::before {
    display: none;
}

cv-sl-map .cv-map-far .cv-map-label {
    display: none;
}

/* The card a pin or shape opens: like SlPlace's, without the map (it's on one). */
cv-sl-map .cv-map-popup .leaflet-popup-content-wrapper {
    padding: 0;
    color: var(--colorNeutralForeground1);
    background: var(--colorNeutralBackground1);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    box-shadow: var(--shadow16);
}

cv-sl-map .cv-map-popup .leaflet-popup-tip {
    background: var(--colorNeutralBackground1);
    box-shadow: none;
}

cv-sl-map .cv-map-popup .leaflet-popup-content {
    margin: 0;
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
}

cv-sl-map .cv-map-popup a.leaflet-popup-close-button {
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    color: var(--colorNeutralForeground3);
    font: var(--fontWeightRegular) 20px/24px var(--fontFamilyBase);
    border-radius: var(--borderRadiusMedium);
}

cv-sl-map .cv-map-popup a.leaflet-popup-close-button:hover {
    color: var(--colorNeutralForeground1);
    background: var(--colorNeutralBackground1Hover);
}

.cv-map-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px 16px;
}

/* Clear of the close button. */
.cv-map-card-name {
    padding-right: 24px;
    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase400);
    font-weight: var(--fontWeightSemibold);
    overflow-wrap: anywhere;
}

.cv-map-card-where {
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    color: var(--colorNeutralForeground3);
    overflow-wrap: anywhere;
}

.cv-map-card-detail {
    overflow-wrap: anywhere;
}

/* A part of a card, such as a parcel's facts or a rental unit on it. */
.cv-map-card-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
}

.cv-map-card-box {
    padding: 8px 12px;
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
}

.cv-map-card-label {
    font-size: var(--fontSizeBase100);
    line-height: var(--lineHeightBase100);
    font-weight: var(--fontWeightSemibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
}

.cv-map-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    overflow-wrap: anywhere;
}

.cv-map-card-rows {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 2px 12px;
    margin: 0;
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    font-variant-numeric: tabular-nums;
}

.cv-map-card-rows dt {
    color: var(--colorNeutralForeground3);
}

.cv-map-card-rows dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Like Fluent's tinted badges, in the map shapes' colours. */
.cv-map-badge {
    padding: 0 8px;
    border-radius: var(--borderRadiusCircular);
    font-size: var(--fontSizeBase100);
    line-height: 20px;
    font-weight: var(--fontWeightSemibold);
    white-space: nowrap;
    color: var(--colorNeutralForeground2);
    background: var(--colorNeutralBackground3);
}

.cv-map-badge-brand {
    color: var(--colorBrandForeground1);
    background: var(--colorBrandBackground2);
}

.cv-map-badge-positive {
    color: var(--colorPaletteGreenForeground1);
    background: var(--colorPaletteGreenBackground1);
}

.cv-map-badge-warning {
    color: var(--colorPaletteMarigoldForeground1);
    background: var(--colorPaletteYellowBackground1);
}

.cv-map-badge-danger {
    color: var(--colorPaletteRedForeground1);
    background: var(--colorPaletteRedBackground1);
}

.cv-map-badge-caution {
    color: var(--colorPaletteDarkOrangeForeground1);
    background: var(--colorPaletteDarkOrangeBackground1);
}

.cv-map-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Sized and coloured like Fluent's buttons, as on place cards: Teleport is the primary one. */
cv-sl-map a.cv-map-action {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 32px;
    padding: 5px 12px;
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font-weight: var(--fontWeightSemibold);
    text-decoration: none;
    white-space: nowrap;
}

cv-sl-map a.cv-map-action:hover {
    border-color: var(--colorNeutralStroke1Hover);
    background: var(--colorNeutralBackground1Hover);
    color: var(--colorNeutralForeground1Hover);
}

cv-sl-map a.cv-map-teleport,
cv-sl-map a.cv-map-teleport:hover {
    border-color: transparent;
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
}

cv-sl-map a.cv-map-teleport:hover {
    background: var(--colorBrandBackgroundHover);
}

cv-sl-map a.cv-map-action:focus-visible {
    outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
    outline-offset: 1px;
}