/* Shared trip controls on destination pages and the planner. */
.trip-place-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  padding-block: var(--s-5);
  border-block: 1px solid var(--rule);
  margin-block: var(--s-5);
}
.trip-place-actions button {
  min-height: 44px;
  cursor: pointer;
}
.trip-place-actions [hidden] {
  display: none;
}
.trip-place-actions button:disabled {
  cursor: default;
}
.trip-place-actions a {
  color: var(--green-dark);
  text-underline-offset: 3px;
}
.trip-place-actions a:focus-visible,
.trip-place-actions button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.trip-storage-status,
.trip-place-warning {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.875rem;
}
.trip-storage-status:empty {
  display: none;
}
.destination-card h2 a,
.destination-list-item h2 a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.card-image a,
.list-item-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.trip-ferry-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-block: var(--s-5);
}
.trip-ferry-controls .plan-field {
  flex: 1 1 240px;
  min-width: 0;
}
.trip-ferry-controls select {
  width: 100%;
  min-height: 44px;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.trip-ferry-controls select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.trip-ferry-controls p {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-small);
}
.trip-ferry-marker {
  list-style: none;
  border-block: 1px solid var(--rule);
  padding: var(--s-5);
  color: var(--green-dark);
  background: var(--green-soft);
}

#ferry-timing-controls {
  flex-basis: 100%;
  min-width: 0;
}
#ferry-timing-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--s-4);
  margin-block: var(--s-4);
}
#ferry-timing-fields[hidden] {
  display: none;
}
#ferry-timing-fields input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
#ferry-timing-fields small {
  color: var(--ink-muted);
}
#ferry-timing-issues {
  grid-column: 1 / -1;
}
#ferry-sailing-card {
  border-block: 1px solid var(--rule);
  padding-block: var(--s-5);
  margin-block: var(--s-5);
}
#ferry-sailing-card p {
  margin-block: var(--s-3);
}
#ferry-timing-fields input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}