/* Load last, after more-tools.css and the component/theme styles. */
.card-chevron,.sync-icon,.audit-entry>i{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.card-chevron>.pp-icon,.audit-entry>i>.pp-icon{display:block;width:20px;height:20px;flex:0 0 20px}
.sync-icon>.pp-icon{display:block;width:24px;height:24px;flex:0 0 24px}
.pp-icon-refresh{transform-box:fill-box;transform-origin:center}
:is(dialog, .journey-guide) button:has(> .pp-icon-close),
.route-game-dialog header [data-game-close],
#location-confirm-dialog > .dialog-close,
#close-place-dialog,
#close-journey-guide,
#history-detail-close,
#close-reading-options {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  line-height: 1;
}

:is(dialog, .journey-guide) button > svg.pp-icon-close {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
}

/* The existing WhatsApp header uses important padding; keep its text-only action intact. */
.wa-dialog .wa-close:has(> .pp-icon-close) {
  padding: 0 !important;
}

:is(dialog, .journey-guide) button:has(> .pp-icon-close):focus-visible,
.route-game-dialog header [data-game-close]:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* This header is rebuilt by the game; do not hide its separate labelled return action. */
.route-game-dialog header [data-game-close] {
  display: grid;
  place-items: center;
  font-size: 0;
}

.route-game-dialog header [data-game-close]::before,
.route-game-dialog header [data-game-close]::after {
  content: "";
  grid-area: 1 / 1;
  width: 14px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}

.route-game-dialog header [data-game-close]::after {
  transform: rotate(-45deg);
}

#arrival-drawer .drawer-close b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#arrival-drawer .drawer-close b > .pp-icon-close {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.product-dialog:has(> .dialog-close) > :is(h2, .section-kicker),
#location-confirm-dialog > :is(h2, .location-confirm-kicker) {
  padding-right: 44px;
}

.favorites-heading {
  padding-right: 48px;
}

.reading-dialog-header {
  padding-right: 70px;
}

:is(.journey-share-dialog, .city-info-dialog) header > div,
.rail-header > div,
.wa-header > div,
.dialog-head > div,
.guide-head > div {
  min-width: 0;
}

.wa-route-shortcut,
.arrival-share-shortcut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}

.wa-route-shortcut > span,
.wa-profile-launcher > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

:is(.wa-route-shortcut, .arrival-share-shortcut) > .pp-icon {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.wa-profile-launcher > svg {
  flex: 0 0 24px;
}

.arrival-card-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.arrival-card-actions :is(.wa-route-shortcut, .arrival-share-shortcut) {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  border-radius: 12px;
}

/* White is intentional here, including dark mode: this action sits on branded blue. */
.arrival-card.next .arrival-share-shortcut,
:root:not([data-theme=dark]) .arrival-card:first-child .arrival-share-shortcut {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

#arrival-drawer .arrival-card.next :is(.wa-route-shortcut, .arrival-share-shortcut):focus-visible,
:root:not([data-theme=dark]) #arrival-drawer .arrival-card:first-child :is(.wa-route-shortcut, .arrival-share-shortcut):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (hover: hover) {
  .arrival-share-shortcut:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px currentColor;
  }
}

.unified-arrivals {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.arrival-card.regional-arrival {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  min-width: 0;
}

.regional-arrival .arrival-vehicle > strong {
  min-width: 0;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

:root .regional-arrival .arrival-line-badge {
  min-width: 0;
  min-height: 28px;
  max-width: 100%;
  margin: 0 6px 4px 0;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: var(--orange-soft);
  color: var(--night-link, #9f3918);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
}

.arrival-card.regional-arrival:is(.next, :first-child) .arrival-line-badge {
  border-color: transparent;
  background: var(--mint);
  color: #063c33;
}

.regional-arrival .arrival-time {
  min-width: 0;
}

.regional-arrival .arrival-time b {
  font-size: 18px;
  line-height: 1.3;
}

/* These are status sentences or estimated ranges, not a single official minute value. */
.regional-arrival .arrival-time b .live-eta:not(.is-live) {
  display: block;
  white-space: normal;
  line-height: inherit;
}

.regional-arrival .arrival-time b .live-eta:not(.is-live) .live-eta-value {
  display: block;
  min-width: 0;
  line-height: inherit;
  overflow-wrap: anywhere;
}

.regional-arrival .arrival-time > span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#arrival-drawer .regional-arrival .arrival-card-actions > :is(button, a) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--night-link, var(--navy));
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

.regional-arrival .arrival-card-actions > :only-child {
  grid-column: 1 / -1;
}

#arrival-drawer .regional-arrival.next .arrival-card-actions > :is(button, a),
:root:not([data-theme=dark]) #arrival-drawer .regional-arrival:first-child .arrival-card-actions > :is(button, a) {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

#arrival-drawer .regional-arrival .arrival-card-actions > :is(button, a):focus-visible {
  outline: 3px solid var(--night-link, var(--navy));
  outline-offset: 3px;
}

#arrival-drawer .regional-arrival.next .arrival-card-actions > :is(button, a):focus-visible,
:root:not([data-theme=dark]) #arrival-drawer .regional-arrival:first-child .arrival-card-actions > :is(button, a):focus-visible {
  outline-color: #fff;
}

@media (max-width: 480px) {
  .arrival-card.regional-arrival {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .regional-arrival .arrival-time {
    text-align: left;
  }

  .regional-arrival .arrival-card-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.commute-direction-help {
  margin: 18px 0 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.commute-workspace .direction-picker {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.commute-workspace .direction-picker button {
  min-width: 0;
  min-height: 72px;
  padding: 12px 10px;
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
}

.commute-workspace .direction-picker button span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 5px;
  color: inherit;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.commute-workspace .direction-picker button[aria-pressed=true],
.commute-workspace .direction-picker button.active:not([aria-pressed]) {
  border-color: var(--night-link, #b9471d);
  background: var(--orange-soft);
  color: var(--night-link, #9f3918);
  box-shadow: inset 0 0 0 1px currentColor;
}

.commute-workspace .direction-picker button[aria-pressed=true] span::after,
.commute-workspace .direction-picker button.active:not([aria-pressed]) span::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -3px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.commute-workspace .direction-picker button:focus-visible {
  outline: 3px solid var(--night-link, var(--navy));
  outline-offset: 3px;
}

/* The existing compact results hide the picker until the user chooses Alterar. */
.commute-results-view .commute-direction-help {
  display: none;
}

:root[data-theme=dark] .arrival-section-head span,
:root[data-theme=dark] #map-back-top,
:root[data-theme=dark] .place-edit {
  color: var(--night-link);
}

/* One passenger flow, with an optional service filter. */
.arrival-provider-filter{display:flex;gap:5px;padding:5px;margin:4px 0 16px;border:1px solid var(--line);border-radius:15px;background:var(--surface-soft,#f2f6f7)}
.arrival-provider-filter button{flex:1;min-width:0;min-height:44px;padding:7px 9px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--muted);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
.arrival-provider-filter button[aria-pressed=true]{background:var(--navy);color:#fff;box-shadow:0 3px 9px rgb(8 71 166 / 12%)}
.arrival-provider-filter button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.eta-estimated{display:block;margin-top:3px;font-size:10px;font-style:normal;font-weight:500;color:var(--muted)}
.stop-line-option>span{min-width:0}.stop-line-option strong{overflow-wrap:anywhere}
:root[data-theme=dark] .arrival-provider-filter{background:var(--night-surface,#172e3a);border-color:var(--night-border,#35505e)}
:root[data-theme=dark] .arrival-provider-filter button{color:var(--night-text,#e6f0f4)}
:root[data-theme=dark] .eta-estimated{color:var(--night-muted,#b8cad2)}
@media(max-width:400px){.arrival-provider-filter button{font-size:11px;padding-inline:5px}.arrival-provider-filter{gap:3px}}

/* Keep the same cards for every operator, including long or unavailable ETAs. */
#arrival-drawer .arrival-card{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:start}
#arrival-drawer .arrival-time{min-width:0}
#arrival-drawer .arrival-time>span{display:block;margin-top:5px;line-height:1.4;overflow-wrap:anywhere}
#arrival-drawer .arrival-time.is-unavailable b{font-size:15px;line-height:1.3}
#arrival-drawer .arrival-time.is-unavailable .live-eta,
#arrival-drawer .arrival-time.is-unavailable .live-eta-value{white-space:normal;line-height:1.3}
#arrival-drawer .drawer-actions button{min-height:44px}
@media(max-width:600px){
  #arrival-drawer .stop-line-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:8px}
  #arrival-drawer .stop-line-option{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;padding:12px;min-height:108px}
  #arrival-drawer .stop-line-option>span:last-child{max-width:none;text-align:left}
  #arrival-drawer .stop-line-option>span:first-child small{white-space:normal;overflow:visible}
  #arrival-drawer .stop-line-option.all{grid-column:1/-1;display:flex;min-height:64px}
  #arrival-drawer .stop-line-option.all>span:last-child{text-align:right}
  #arrival-drawer .arrival-vehicle{gap:7px;align-items:start}
  #arrival-drawer .arrival-bus-icon{width:28px;height:32px;flex-basis:28px;border-radius:10px}
  #arrival-drawer .arrival-bus-icon .ui-icon{width:20px;height:20px}
}

/* Keep the next arrival close to the line picker without hiding any line. */
#arrival-drawer .arrival-lines-toggle{width:100%;min-height:44px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--night-link,var(--navy));font-size:12px;font-weight:700;text-align:center;cursor:pointer}
#arrival-drawer .arrival-lines-toggle:hover{border-color:var(--night-link,var(--navy))}
#arrival-drawer .arrival-card:not(.regional-arrival) .arrival-card-actions{grid-template-columns:minmax(0,1fr) 44px;align-items:start;gap:8px}
#arrival-drawer .arrival-card:not(.regional-arrival) .arrival-track-button{grid-column:1;min-height:44px;font-size:12px}
#arrival-drawer .arrival-more-button{grid-column:2;width:44px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--night-link,var(--navy));cursor:pointer}
#arrival-drawer .arrival-more-button span{display:block;margin-top:-8px;font-size:24px;line-height:1;letter-spacing:1px}
#arrival-drawer .arrival-more-button[aria-expanded=true]{background:var(--night-selected,var(--green-soft));border-color:var(--night-link,var(--navy))}
#arrival-drawer .arrival-card-more-menu{grid-column:1/-1;display:grid;gap:6px;padding-top:4px}
#arrival-drawer .arrival-card-more-menu[hidden]{display:none}
#arrival-drawer .arrival-card-more-menu :is(button,.wa-route-shortcut,.arrival-share-shortcut){grid-column:1;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--night-link,var(--navy));font-size:12px;font-weight:700;line-height:1.3;text-align:center}
#arrival-drawer .arrival-card-more-menu .wa-route-shortcut{color:#145b4b;background:#eef8f3;border-color:#b7d9ce}
#arrival-drawer .arrival-card.next .arrival-more-button,#arrival-drawer .arrival-card.next .arrival-card-more-menu :is(button,.wa-route-shortcut,.arrival-share-shortcut){background:#fff;border-color:#fff;color:var(--navy)}
#arrival-drawer .arrival-card>.bus-watchers:not(.has-watchers){display:none}
#arrival-drawer .arrival-bus-label{display:inline-block;white-space:nowrap}
@media(max-width:600px){
  #arrival-drawer .stop-line-option{min-height:84px}
  #arrival-drawer .arrival-card:not(.regional-arrival){padding:13px;gap:9px 11px}
  #arrival-drawer .arrival-card:not(.regional-arrival) .arrival-bus-icon{display:none}
  #arrival-drawer .arrival-card:not(.regional-arrival) .arrival-time>span{font-size:10px}
}