/* 3 隻を 1 つの地図に表示するページ (custom.css に追加) */
header .ship-links {
  float: left;
  margin: 14px 8px;
  color: #777;
}

header .ship-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  padding: 3px 10px;
  border: 1px solid #999;
  border-radius: 4px;
  color: #313131;
  text-decoration: none;
}

header .ship-links a:hover {
  background: #eef4fa;
  border-color: #313131;
}

header .ship-links a.plain {
  border: none;
  padding: 3px 4px;
  color: #0b6aa8;
  text-decoration: underline;
}

.formL label {
  margin-right: 4px;
}

.map {
  height: 72vh;
}

.ship-legend {
  line-height: 1.4;
  color: #555;
}

.ship-legend .row {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.ship-legend .old {
  color: #aaa;
}

.speeds {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.speed {
  flex: 1 1 0;
  min-width: 0;
}

.speed-title {
  display: flex;
  align-items: center;
  gap: 5px;
}

.chart {
  height: 140px;
}

@media only screen and (max-width: 600px) {
  header .ship-links {
    clear: left;
    margin: 0 8px 6px;
    line-height: 2;
  }

  .map {
    height: 60vh;
  }

  .speeds {
    flex-direction: column;
  }

  /* 狭い画面では船の位置の欄を出さない (船の印に重ねると表示される) */
  .ship-legend {
    display: none;
  }
}