/* Movement warning tiles (Components::DayMovementWarnings). A tile carries
   exactly one direction class: movement-warning-past colors the left edge,
   movement-warning-future the right edge, movement-warning-both both edges.
   Each direction rule sets its own border, and the two single-sided rules
   also set the margin that keeps a one-sided tile as wide as a two-sided
   one. Severity (movement-warning-danger or movement-warning-caution) sets
   --warning-color on the same element, and the direction rule paints it.
   6px is a fixed border width, not a spacing token. */

.day-movement-warnings {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.movement-warning {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-md);
  --warning-edge: 6px;
}

.movement-warning-danger {
  --warning-color: var(--danger);
}

.movement-warning-caution {
  --warning-color: var(--caution);
}

/* Squared corners on the edged side stop the border colour from creeping
   around the curve onto the top/bottom edges. */
.movement-warning-past {
  border-left: var(--warning-edge) solid var(--warning-color);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-right: var(--warning-edge);
}

.movement-warning-future {
  border-right: var(--warning-edge) solid var(--warning-color);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-left: var(--warning-edge);
}

.movement-warning-both {
  border-left: var(--warning-edge) solid var(--warning-color);
  border-right: var(--warning-edge) solid var(--warning-color);
  border-radius: 0;
}

.movement-warning[role="button"] {
  cursor: pointer;
}

.movement-warning[role="button"]:hover {
  box-shadow: var(--shadow);
}

.movement-warning:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.movement-warning-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}

.movement-warning-line {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  line-height: var(--leading);
}

.movement-warning-link {
  color: var(--accent);
  text-decoration: underline;
}

/* Also emitted by the day details modal (Components::DayDetailsModal). */
.movement-warning-swap-link {
  font-size: var(--text-xs);
  font-weight: 600;
  margin-left: var(--space-2);
  white-space: nowrap;
}

/* The "1d ago" / "in 1d" offset labels, on a tile (Components::DayMovementWarnings)
   and in the "also planned nearby" list (Components::DayMovementAdvice). Each
   label's ink comes from its own modifier class below. */
.warning-offset {
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-muted);
}

/* warning-offset-past has no rule of its own: a past label keeps the base
   colour above. The class marks direction for tests and scripts. */
.warning-offset-future {
  font-style: italic;
}

.warning-offset-danger {
  color: var(--danger-ink);
}

.warning-offset-caution {
  color: var(--caution-ink);
}