/* UX-11 Routes V3 — Full Preview facts/actions; route hero pager keeps shared motion. */
html.routes-v3-page [hidden] {
  display: none !important;
}

/* Stop editor reuses setting rows, ghost buttons and onboarding radio choices. */
.route-editor,
.route-editor__panel,
.route-editor__picker,
.route-editor .setting-list {
  display: grid;
  min-width: 0;
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm);
  padding: 0;
  border: 0;
}
.route-editor .route-editor__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.route-editor :is(.ghost-button, .lang-choice) {
  min-height: var(--size-control);
  min-width: 0;
  max-width: 100%;
  padding-block: var(--space-xs);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: var(--lh-body);
}
.route-editor :is(p, span, legend) { min-width: 0; overflow-wrap: anywhere; }
.route-editor .lang-choice input { flex-shrink: 0; }

.route-v3-truth,
.route-section-sample,
.route-stop__progress,
.routes-v3-summary {
  margin: var(--space-xs) var(--space-gutter);
  padding: var(--space-xs) var(--space-sm);
  border-inline-start: 0.25rem solid var(--color-primary);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

.routes-v3-directory .route-v3-truth {
  margin-inline: 0;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 400;
}

.routes-v3-directory .page-head {
  min-height: 5rem;
  padding-block: var(--space-sm);
}

.routes-v3-directory .page-head__photo {
  width: 6rem;
  height: 4.5rem;
}

.routes-v3-directory .screen-stage {
  padding: 0 var(--space-gutter) var(--space-sm);
}

.routes-v3-directory .screen-stage > .page-head {
  margin-inline: 0;
  padding-inline: 0;
}

.routes-v3-directory .screen-stage > :last-child {
  padding-block-end: 0;
}

.route-section-sample {
  margin-block: 0 var(--space-sm);
  color: var(--color-ink-muted);
  font-weight: 600;
}

.route-sample-label,
.route-action-sample {
  display: inline-flex;
  min-height: 1.5rem;
  padding-inline: 0.45rem;
  align-items: center;
  border-radius: 999px;
  background: var(--color-surface-sunken);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.3;
  vertical-align: middle;
}

.routes-v3-filters {
  display: grid;
  min-width: 0;
  gap: var(--space-sm);
}

.routes-v3-filter-group {
  display: grid;
  min-width: 0;
  gap: var(--space-2xs);
  grid-template-columns: minmax(0, 1fr);
}

.routes-v3-filter-group > p {
  margin: 0;
  color: var(--color-ink-muted);
  font-weight: 600;
  font-size: var(--text-sm);
}

/* Directory opening: one quiet line under the title says what a route is here. */
.routes-v3-directory .page-head__lead {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
}

/* Route rows: the trip name carries the display face, the same voice as the detail title and
 * the Home trip cards; the lane heading above the group names the lane once. */
.routes-v3-directory .route-row .place-row__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.routes-v3-directory .route-group__heading h2 {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  align-items: baseline;
}

.routes-v3-directory .route-group__link {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
  text-underline-offset: 4px;
}

.routes-v3-directory [data-route-group-count] {
  color: var(--color-ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
}

.routes-v3-filter-group .routes-filter {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  margin: 0;
  padding: 0;
  gap: var(--space-xs);
  overflow: visible;
}

.routes-v3-filter-group .filter-chip {
  min-width: 0;
  max-width: 100%;
  min-height: var(--size-control);
  white-space: normal;
}

.routes-v3-summary {
  margin-inline: 0;
  padding: var(--space-xs) 0 0;
  border: 0;
  background: none;
}

.routes-v3-summary:focus-visible,
.route-simulation-status:focus-visible {
  outline: var(--rule-focus) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.routes-v3-page .route-meta {
  white-space: normal;
}

.routes-v3-page .route-meta .meta-part {
  display: inline;
  white-space: normal;
}

.route-sos-link {
  width: calc(100% - (2 * var(--space-gutter)));
  min-height: var(--size-control);
  margin: 0 var(--space-gutter) var(--space-xs);
  color: var(--color-danger);
  text-align: center;
  text-decoration: none;
}

.route-v3-detail .route-v3-truth {
  margin-inline: 0;
}

.route-v3-detail .route-hero-wrap {
  position: relative;
  min-width: 0;
}

/* Opening: four decision cells in two columns, so เริ่มที่ reads beside the trip time. */
.route-v3-detail .route-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--space-sm);
}

.route-v3-detail .route-stat:nth-child(odd) {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.route-v3-detail .route-stat dd {
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.route-v3-detail .route-kicker {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  align-items: center;
}

/* The emergency route stays one tap away but no longer opens the page as a full-width bar. */
.route-v3-detail .route-sos-link {
  display: flex;
  width: max-content;
  margin: var(--space-2xs) var(--space-gutter) var(--space-xs) auto;
  padding-inline: var(--space-sm);
  font-size: var(--text-sm);
}

/* The walking-time block keeps the page gutter: its heading used to start at x = 0. */
.route-v3-detail .route-mode-block {
  padding-inline: var(--space-gutter);
}

.route-v3-detail .route-mode {
  margin-inline: 0;
}

.route-v3-detail .route-mode-total,
.route-v3-detail .route-mode-block .fine-note {
  margin-inline: 0;
  padding-inline: 0;
}

/* Each stop card opens its place: the name link stretches over the card, while นำทาง stays
 * its own target above the stretch and the arrow shows the card is a door. */
.route-v3-detail .route-stop__card {
  position: relative;
}

.route-v3-detail a.route-stop__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--color-ink) 35%, transparent);
  text-underline-offset: 4px;
}

.route-v3-detail a.route-stop__name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.route-v3-detail .route-stop__go {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-inline-start: var(--space-2xs);
  color: var(--color-primary);
}

.route-v3-detail button.route-stop__nav {
  position: relative;
  z-index: 1;
}

.route-v3-detail .place-opening {
  padding-block-start: 0;
  gap: var(--space-sm);
}

.route-v3-detail .place-hero {
  aspect-ratio: 3 / 2;
}

html[data-easy="on"].route-v3-detail .place-hero {
  aspect-ratio: 16 / 5;
}

.route-v3-detail .route-stats-note,
.route-v3-detail .route-v3-truth,
.route-v3-detail .route-simulation-status {
  margin-inline: var(--space-gutter);
}

.route-simulation-status:empty {
  min-height: 0;
  margin: 0;
}

.route-v3-detail .route-v3-truth {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 400;
}

@media (max-width: 360px) {
  .routes-v3-directory [data-route-duration-filter] .routes-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.route-v3-detail .route-stat dt {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  align-items: center;
}

.route-v3-detail .route-start {
  display: flex;
  min-width: 0;
  min-height: var(--size-control);
  gap: var(--space-xs);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.route-v3-detail .route-action-sample {
  background: color-mix(in srgb, currentColor 12%, var(--color-surface));
}

.route-simulation-status {
  min-height: 1.5em;
  margin: var(--space-xs) 0 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--lh-body);
}

.route-v3-detail .route-mode-block h2 {
  display: flex;
  margin: 0 0 var(--space-xs);
  gap: var(--space-xs);
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.route-v3-detail [data-mode][aria-disabled="true"] {
  opacity: 0.62;
  cursor: help;
}

.route-v3-detail .route-stop__body .route-stop__progress {
  margin: 0;
  padding: var(--space-2xs) var(--space-xs);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.route-v3-detail button.route-stop__nav {
  width: 100%;
  min-height: var(--size-control);
  border: var(--rule-hair) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.route-v3-detail .route-leg__label {
  max-width: 100%;
  flex-wrap: wrap;
}

.route-v3-detail .route-leg__dist,
.route-v3-detail .route-leg__time {
  white-space: nowrap;
}

.route-v3-detail .route-leg__label::after {
  margin-inline-start: var(--space-2xs);
  color: var(--color-ink-muted);
  content: none;
  font-size: var(--text-xs);
  font-weight: 700;
}

.route-v3-detail .route-finish {
  display: grid;
  min-width: 0;
  margin: var(--space-md) 0 0;
  padding: var(--space-sm);
  gap: var(--space-xs);
  border: var(--rule-hair) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.route-v3-detail .route-finish [data-route-finish] {
  width: 100%;
  min-height: var(--size-control);
}

.route-v3-detail .route-plate {
  cursor: default;
}

.routes-v3-lane .lane-routes .route-section-sample {
  margin-inline: var(--space-gutter);
}

html[data-easy="on"].routes-v3-page .route-finish,
html[data-easy="on"].routes-v3-page .route-row {
  box-shadow: none;
}

html[data-easy="on"].routes-v3-page :is(
  .icon-button,
  .filter-chip,
  .route-group__link,
  .save-heart,
  .wide-button,
  .ghost-button,
  .view-button,
  .route-stop__name,
  .route-stop__nav,
  .link-more
) {
  min-height: 3.5rem;
}

html[data-easy="on"].routes-v3-page :is(.icon-button, .save-heart) {
  min-width: 3.5rem;
  width: 3.5rem;
  height: 3.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html.routes-v3-page .routes-v3-filters,
  html.routes-v3-page .route-finish,
  html.routes-v3-page .route-simulation-status {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}