.trip-brief {
  padding: 30px;
  background: #17322a;
  color: #fff;
}

.trip-brief-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.trip-brief-heading h1 {
  margin: 7px 0 0;
  font-family: Georgia, "Songti SC", serif;
  font-size: clamp(25px, 3.2vw, 39px);
  line-height: 1.22;
  letter-spacing: -.02em;
}

.trip-brief-heading > b {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #d8e7df;
  font-size: 11px;
}

.trip-brief-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.trip-brief-grid article {
  min-height: 116px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: rgba(255,255,255,.07);
}

.trip-brief-grid small,
.trip-brief-grid span { display: block; color: #b7cac0; font-size: 10px; }
.trip-brief-grid strong { display: block; margin: 5px 0 7px; font-size: 14px; line-height: 1.45; }

.trip-brief-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.trip-brief-actions button { padding: 9px 13px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; background: transparent; color: #fff; }
.trip-brief-actions .primary { border-color: #f2a464; background: #f2a464; color: #17231e; }

.route-map-panel { margin-top: 22px; padding: 30px; }
.map-title p { max-width: 760px; margin: 7px 0 0; color: var(--muted); font-size: 12px; }

.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 20px 0 12px;
}

.map-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.map-filters button {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
}
.map-filters button.active { border-color: var(--green); background: var(--green); color: #fff; }
#map-phase-summary { max-width: 475px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: right; }

.route-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 12px;
}

.map-stage {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #e9f0f5;
  overscroll-behavior: contain;
}

.map-canvas { position: relative; min-width: 820px; aspect-ratio: 1024 / 650; }
.map-canvas > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map-hotspots { position: absolute; inset: 0; pointer-events: none; }

.map-hotspot {
  position: absolute;
  z-index: 3;
  width: 31px;
  height: 31px;
  transform: translate(-50%, -50%);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 9px rgba(20,35,30,.3);
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  pointer-events: auto;
}
.map-hotspot.outbound { background: #c66a34; }
.map-hotspot.ferry { background: #247ba0; }
.map-hotspot.scenic { background: #21745a; }
.map-hotspot.return { background: #a84444; }
.map-hotspot.active { outline: 4px solid rgba(242,164,100,.45); transform: translate(-50%, -50%) scale(1.14); }
.map-hotspot.dimmed { opacity: .22; }

.map-stop-detail {
  min-height: 300px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #f8f7f2;
}
.map-stop-detail > span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.map-stop-detail h3 { margin: 5px 0 2px; font-size: 21px; line-height: 1.25; }
.map-stop-detail .stop-date { margin: 0 0 13px; color: var(--muted); font-size: 11px; }
.map-stop-detail dl { display: grid; grid-template-columns: 60px 1fr; gap: 8px; margin: 0; font-size: 11px; }
.map-stop-detail dt { color: var(--green); font-weight: 800; }
.map-stop-detail dd { margin: 0; color: #4d5a54; }
.map-stop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 16px; }
.map-stop-actions a,
.map-stop-actions button { display: block; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--green); font-size: 10px; text-align: center; text-decoration: none; }

.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin: 11px 1px 22px; color: var(--muted); font-size: 10px; }
.map-legend span { display: flex; align-items: center; gap: 6px; }
.map-legend i { width: 25px; height: 4px; border-radius: 999px; }
.map-legend i.outbound { background: #c66a34; }
.map-legend i.ferry { height: 0; border-top: 3px dashed #247ba0; }
.map-legend i.scenic { background: #21745a; }
.map-legend i.return { background: #a84444; }
.map-legend small { margin-left: auto; font-size: 9px; }

.map-segment-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.map-segment-heading h3 { margin: 0; font-size: 17px; }
.map-segment-heading span { color: var(--muted); font-size: 10px; }
.map-segment-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.map-segment {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.map-segment > b { color: var(--green); font-size: 12px; }
.map-segment h4 { margin: 0; font-size: 12px; }
.map-segment p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.map-segment > a { color: var(--green); font-size: 10px; text-decoration: none; white-space: nowrap; }

@media (max-width: 900px) {
  .trip-brief-grid { grid-template-columns: 1fr 1fr; }
  .route-map-layout { grid-template-columns: 1fr; }
  .map-stop-detail { min-height: 0; }
  .map-stop-actions { display: flex; }
  .map-stop-actions a,.map-stop-actions button { flex: 1; }
}

@media (max-width: 800px) {
  .trip-brief { padding: 22px; }
  .trip-brief-heading { display: block; }
  .trip-brief-heading > b { display: inline-block; margin-top: 12px; }
  .trip-brief-grid { grid-template-columns: 1fr; margin-top: 17px; }
  .trip-brief-grid article { min-height: 0; }
  .route-map-panel { padding: 20px; }
  .map-title { display: block; }
  .map-title .decision { display: inline-block; margin-top: 10px; }
  .map-toolbar { display: block; }
  #map-phase-summary { margin-top: 9px; text-align: left; }
  .map-canvas { min-width: 820px; }
  .map-stage::before { content: "左右拖动地图 · 点击 D 编号看详情"; position: sticky; left: 8px; z-index: 5; display: block; width: max-content; height: 0; top: 8px; color: #fff; font-size: 9px; text-shadow: 0 1px 3px #000; }
  .map-legend small { width: 100%; margin-left: 0; }
  .map-segment-heading { display: block; }
  .map-segment-heading span { display: block; margin-top: 4px; }
  .map-segment-list { grid-template-columns: 1fr; }
}

@media print {
  .trip-brief { color: #000; background: #fff; }
  .trip-brief-grid article { border-color: #bbb; background: #fff; }
  .trip-brief-grid small,.trip-brief-grid span { color: #444; }
  .trip-brief-actions,.map-toolbar,.map-stop-actions,.map-hotspots { display: none!important; }
  .route-map-layout { grid-template-columns: 1fr; }
  .map-canvas { min-width: 0; }
  .map-stop-detail { display: none; }
}