/* Four clear destinations, with a stable touch target on small screens. */
.app-nav{gap:clamp(18px,3vw,36px);align-items:stretch}
.app-nav .tab{text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center}
.water-boarding-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;min-height:40px;text-underline-offset:4px}
.sailing-actions{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.trip-steps .water-boarding-link{margin-top:3px}
body[data-view=water] .intro{margin:4px 0 20px}
body[data-view=water] .intro h1{font-size:32px}
body[data-view=water] .intro .eyebrow,body[data-view=water] .intro p:last-child{display:none}

@media(max-width:600px){
 .app-nav{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0 12px}
 .app-nav .tab{font-size:14px;min-height:48px;padding:12px 5px;border-bottom-width:2px;white-space:normal}
 .app-nav .tab.active{background:var(--soft);border-radius:5px 5px 0 0}
 body[data-view=water] .intro{margin-bottom:16px}
 body[data-view=water] .intro h1{font-size:27px}

 .schedule-table .table-btn{white-space:normal}
 .sailing-actions .water-boarding-link{font-size:12px;line-height:1.2;min-height:40px}
}
@media print{.water-boarding-link{display:none}}

/* Keep all four destinations visible without a second navigation row. */
@media(min-width:351px) and (max-width:600px){.app-nav{grid-template-columns:repeat(4,minmax(0,1fr));padding:0 8px}.app-nav .tab{min-height:56px;padding:8px 4px;line-height:1.15}}
@media(max-width:350px){.app-nav .tab{min-height:44px;padding:9px 4px}}