/* Pixel-calibrated overrides based on the enlarged reference crops. */
.brand {
  position: relative;
  width: 690px;
  min-width: 690px;
  height: 67px;
  gap: 0;
}

.brand::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  width: 486px;
  height: 67px;
  transform: translateY(-50%);
  background: url("./references/brand-logo.png") no-repeat left center / 486px 67px;
  pointer-events: none;
}

.brand > .brand-mark,
.brand > div:last-child {
  opacity: 0;
  pointer-events: none;
}

.map-tools {
  gap: 7px;
}

.tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  height: 42px;
  padding: 0 13px 0 10px;
  border-color: rgba(40, 93, 132, .65);
  border-radius: 4px;
  color: #c2d0df;
  background: linear-gradient(180deg, rgba(18, 39, 61, .9), rgba(4, 20, 35, .91));
  box-shadow: inset 0 1px 0 rgba(116, 172, 210, .08), 0 2px 7px rgba(0, 0, 0, .24);
  font-size: 16px;
  white-space: nowrap;
}

.tool-button[data-layer="fire"] { width: 101px; }
.tool-button[data-layer="landslide"] { width: 139px; }
.tool-button[data-layer="sensor"] { width: 119px; }
.tool-button[data-layer="report"] { width: 128px; }

.tool-button img {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: saturate(1.04);
}

.tool-button span { margin-left: 0; }

.tool-button[data-layer="fire"].tool-button--active {
  border-color: rgba(65, 111, 151, .74);
  background: linear-gradient(180deg, rgba(43, 65, 91, .96), rgba(24, 45, 69, .96));
  box-shadow: inset 0 1px 0 rgba(168, 208, 234, .1), 0 4px 11px rgba(0, 0, 0, .25);
}

.tool-button[data-layer]:not([data-layer="fire"]).tool-button--active {
  background: linear-gradient(180deg, rgba(26, 48, 72, .93), rgba(8, 26, 43, .94));
}

.tool-button:not(.tool-button--active) {
  opacity: .42;
}

.alarm-icon {
  overflow: visible;
  background: transparent;
}

.alarm-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.map-visual-mask {
  opacity: .4;
  background:
    linear-gradient(180deg, rgba(0, 9, 20, .18) 0, rgba(0, 16, 29, .045) 30%, rgba(0, 13, 25, .04) 69%, rgba(0, 8, 18, .46) 100%),
    radial-gradient(ellipse at 50% 53%, transparent 38%, rgba(0, 16, 31, .07) 69%, rgba(0, 6, 15, .38) 100%),
    linear-gradient(90deg, rgba(0, 19, 36, .14), transparent 21%, transparent 79%, rgba(0, 14, 29, .23));
}

.map-visual-mask::after {
  opacity: .07;
}

.map-panel.map-bright .map-visual-mask { opacity: .2; }