/* ─── 潮位情報セクション ─────────────────────────────────────── */
/* /now/css/tide.css                                              */

#tide_section {
  position: relative;
  top: 70px;          /* #higata_slider_container と同じ top */
  width: 80%;         /* #higata_slider_container と同じ幅  */
  left: 10%;          /* #higata_slider_container と同じ左寄せ */
  margin-bottom: 0;
  z-index: 5;
  border: 1px solid #c8dce8;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(to bottom, #f0f6fa, #e8f2f8);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  box-sizing: border-box;
}

/* ── サマリーバー（常時表示） ─────────────────────────────────── */
#tide_summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 16px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}

#tide_summary:hover {
  background: rgba(0, 120, 180, 0.05);
}

.tide_main_height {
  font-size: 22px;
  font-weight: bold;
  color: #005a8e;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tide_trend {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.tide_trend.rising  { color: #00806a; }
.tide_trend.falling { color: #0055aa; }
.tide_trend.slack   { color: #778899; }

.tide_shio {
  font-size: 14px;
  color: #334455;
  white-space: nowrap;
}

.tide_next {
  font-size: 13px;
  color: #445566;
  white-space: nowrap;
  flex: 1;
}

.tide_surge_badge {
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.tide_surge_badge.positive { background: #fff0d8; color: #a05000; border: 1px solid #f0c060; }
.tide_surge_badge.negative { background: #ddeeff; color: #003388; border: 1px solid #88aadd; }
.tide_surge_badge.neutral  { background: #f0f4f8; color: #778899; border: 1px solid #ccd8e0; }

.tide_toggle_btn {
  font-size: 12px;
  color: #778899;
  margin-left: auto;
  white-space: nowrap;
  transition: color 0.2s;
}
#tide_summary:hover .tide_toggle_btn { color: #005a8e; }

.tide_updated {
  width: 100%;
  font-size: 10px;
  color: #aabbcc;
  padding-top: 2px;
}

/* ── 詳細パネル ──────────────────────────────────────────────── */
#tide_detail {
  border-top: 1px solid #c8dce8;
  padding: 12px 14px 14px;
  background: #f8fbfd;
}

.tide_extrema_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 12px;
}
.tide_extrema_table th {
  text-align: left;
  padding: 4px 8px;
  font-size: 11px;
  color: #7a99aa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid #c8dce8;
}
.tide_extrema_table td {
  padding: 5px 8px;
  border-bottom: 1px solid #e8f0f6;
}
.tide_extrema_table tr.high td:first-child { color: #c06000; font-weight: 600; }
.tide_extrema_table tr.low  td:first-child { color: #0055aa; font-weight: 600; }
.tide_extrema_table tr.now_row { background: #edf5fa; }

#tide_graph_wrap {
  margin-bottom: 10px;
}
#tide_graph_wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.tide_surge_note {
  font-size: 11px;
  color: #778899;
  padding-top: 6px;
  border-top: 1px solid #e0eaf2;
}
.tide_surge_note strong { color: #445566; }

.tide_source {
  font-size: 10px;
  color: #aabbcc;
  margin-top: 8px;
  line-height: 1.6;
}

#tide_error {
  padding: 8px 14px;
  font-size: 12px;
  color: #aa4400;
  background: #fff5f0;
}