/* Explained routes share existing tile colours and remain readable at 320 px. */
.explained-route-steps { padding-inline-start: 1.3rem; }
.explained-route-steps > li { margin-block: 1rem; }
.explained-survivors { overflow-wrap: anywhere; max-height: 14rem; overflow-y: auto; }
.explained-comparison { overflow-x: auto; max-width: 100%; }
.explained-comparison table { width: 100%; border-collapse: collapse; }
.explained-comparison th, .explained-comparison td { padding: .5rem; text-align: start; }
.explained-route-form { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.explained-route-form label { display: flex; flex-direction: column; max-width: 100%; }
.explained-route-form input, .explained-route-form select { min-height: 44px; max-width: 100%; }
.explained-word-analysis details { margin-block: .75rem; }
.explained-word-analysis summary { cursor: pointer; padding-block: .5rem; }

.explained-word-analysis .path-row { display: flex; gap: 4px; }
.explained-word-analysis .path-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-transform: uppercase;
}
.explained-word-analysis .tile-gray { background: var(--gray); color: var(--on-gray); }
.explained-word-analysis .tile-yellow { background: var(--yellow); color: var(--on-yellow); }
.explained-word-analysis .tile-green { background: var(--green); color: var(--on-green); }
html.color-blind .explained-word-analysis .tile-green { background-image: repeating-linear-gradient(0deg, transparent 0, transparent 4px, #ffffff40 4px, #ffffff40 6px); }
html.color-blind .explained-word-analysis .tile-yellow { background-image: repeating-linear-gradient(45deg, transparent 0, transparent 4px, #ffffff40 4px, #ffffff40 6px); }
[data-share-grid] { margin-block: 1rem; padding: 1rem; }
[data-share-grid] label { display: block; margin-block: 1rem; }
[data-share-grid] textarea { display: block; width: 100%; max-width: 100%; box-sizing: border-box; }
[data-share-grid] button { min-height: 44px; }

.explained-route-choice { display: block; margin-top: .35rem; min-height: 44px; white-space: nowrap; }
.explained-route-choice[hidden] { display: none; }
.explained-turn-distribution dd { margin: .25rem 0 .75rem; line-height: 1.65; }