/* v139 · Processos, carregamentos e embarque. Carregada por último; só regras desta área. */
:root {
  --flow-skeleton: #e3eaee;
  --flow-skeleton-shine: #f3f7f9;
  --flow-alert: #b8381d;
  --flow-alert-ink: #fff;
  --flow-ok: #08745e;
  --flow-ok-soft: #e4f4ee;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --flow-skeleton: #22363f; --flow-skeleton-shine: #2d4550; --flow-alert: #ff8a73; --flow-alert-ink: #1d0b05; --flow-ok: #7adbc1; --flow-ok-soft: #173a33; }
}
:root[data-theme="dark"] { --flow-skeleton: #22363f; --flow-skeleton-shine: #2d4550; --flow-alert: #ff8a73; --flow-alert-ink: #1d0b05; --flow-ok: #7adbc1; --flow-ok-soft: #173a33; }

/* ---------- 1 · Modo viagem: um único controle de recolher, leitura na ordem do que importa ---------- */
/* "Minimizar" repetia o "Recolher" e o botão "Mapa" do menu inferior (que continua usando esta ação). */
body.map-shell #travel-toolbar #travel-minimize, body.map-shell #travel-sheet #travel-sheet-toggle[hidden],
body.map-shell #travel-sheet #travel-end[hidden], body.map-shell #travel-sheet .travel-compact-summary { display: none !important; }
body.map-shell #travel-toolbar { justify-content: flex-end; }

body.map-shell #travel-sheet { height: auto; min-height: 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); transition: none; }
body.map-shell #travel-sheet .travel-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
body.map-shell #travel-sheet[data-stage] :is(.travel-options, .travel-timeline-details) { display: block; }
body.map-shell #travel-sheet .travel-next-stops { display: none; }
@media (max-width: 900px) {
  /* Folha do celular: cresce até o conteúdo, sem cobrir o mapa inteiro nem passar sob a barra do topo. */
  body.map-shell #travel-sheet { max-height: min(58dvh, calc(100dvh - var(--shell-bottom) - max(12px, env(safe-area-inset-top, 0px)) - 62px)); padding-inline: 16px; }
  body.map-shell #travel-sheet[data-stage=expanded] { max-height: calc(100dvh - var(--shell-bottom) - max(12px, env(safe-area-inset-top, 0px)) - 62px); }
}
body.map-shell #travel-sheet .travel-grip { flex-basis: 22px; }
body.map-shell #travel-sheet .travel-heading { padding-bottom: 10px; }
body.map-shell #travel-sheet .travel-heading b { font-size: 14px; }
body.map-shell #travel-sheet .travel-heading #travel-vehicle { font-size: 11px; }
body.map-shell #travel-sheet .travel-heading .panel-fold.is-icon { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; padding: 0; border-color: transparent; border-radius: 50%; }
body.map-shell #travel-sheet .travel-heading .panel-fold.is-icon .panel-icon { width: 20px; height: 20px; transform: none; }
body.map-shell #travel-sheet .travel-heading .panel-fold.is-icon > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.map-shell #travel-sheet .travel-next { padding: 12px 0 4px; }
body.map-shell #travel-sheet .travel-next h2 { margin: 4px 0 0; font-size: 21px; }
body.map-shell #travel-sheet .travel-distance { margin: 4px 0 2px; font-size: 13px; }
body.map-shell #travel-sheet .travel-freshness { margin: 0 0 8px; font-size: 11px; }
body.map-shell #travel-sheet .travel-advice { margin: 6px 0 8px; font-size: 13px; }
body.map-shell #travel-sheet .travel-advice.is-alert { background: var(--flow-alert); color: var(--flow-alert-ink); font-weight: 700; }
body.map-shell #travel-sheet .travel-destination-action { margin: 4px 0 8px; min-height: 52px; }
body.map-shell #travel-sheet .travel-destination-action.just-set, .travel-mini-dock #travel-mini-destination.just-set { box-shadow: 0 0 0 3px color-mix(in srgb, var(--flow-ok) 45%, transparent); }
body.map-shell #travel-sheet .travel-play { margin-top: 10px; }
body.map-shell #travel-sheet .travel-options { margin-top: 4px; }
body.map-shell #travel-sheet .travel-options summary { min-height: 48px; }
@media (max-height: 700px) and (max-width: 900px) {
  /* 320×640: o título e o tempo do ônibus aparecem inteiros acima das ações. */
  body.map-shell #travel-sheet .travel-grip { flex-basis: 16px; }
  body.map-shell #travel-sheet .travel-heading { padding-bottom: 8px; }
  body.map-shell #travel-sheet .travel-next { padding-top: 8px; }
  body.map-shell #travel-sheet .travel-next h2 { font-size: 18px; }
  body.map-shell #travel-sheet .travel-estimate strong { font-size: 24px; }
  body.map-shell #travel-sheet .travel-freshness { margin-bottom: 4px; }
  /* Guarda ~150 px de mapa entre a barra do topo e a folha, para o ônibus e o ponto aparecerem. */
  body.map-shell #travel-sheet:not([data-stage=expanded]) { max-height: max(292px, calc(100dvh - var(--shell-bottom) - 212px)); }
}

/* Ações: [aviso] [Embarquei/Cheguei] [compartilhar], sempre visíveis no rodapé da folha. */
body.map-shell #travel-sheet .travel-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 76px; gap: 8px; padding-top: 10px; }
body.map-shell #travel-sheet .travel-actions > button { min-height: 52px; font-size: 13px; }
body.map-shell #travel-sheet .travel-actions .travel-share-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 76px; min-height: 52px; margin: 0; padding: 4px 2px;
  border: 1px solid var(--travel-line); border-radius: 13px; background: transparent; color: var(--journey-accent, var(--navy)); font-size: 10px; font-weight: 700; line-height: 1.1;
}
body.map-shell #travel-sheet .travel-actions .travel-share-action svg { width: 18px; height: 18px; }
@media (max-width: 359px) {
  body.map-shell #travel-sheet .travel-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 52px; gap: 6px; }
  body.map-shell #travel-sheet .travel-actions .travel-share-action { width: 52px; }
  body.map-shell #travel-sheet .travel-actions .travel-share-action span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.map-shell #travel-sheet .travel-actions > button { font-size: 12px; padding: 6px; }
}
@media (hover: hover) { body.map-shell #travel-sheet .travel-actions .travel-share-action:hover { background: var(--travel-soft); } }

/* ---------- 2 · Resumo no mapa (recolhido / embarcado) ---------- */
.travel-mini-dock {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: none;
  align-items: stretch;
  gap: 6px;
}
.travel-mini-dock > * { grid-column: 1 / -1; }
.travel-mini-dock :is(#travel-mini-board, #travel-mini-destination, #travel-mini-share, #travel-mini-finish, #travel-mini-meta, #travel-mini-confirm)[hidden] { display: none !important; }
.travel-mini-dock #travel-mini { grid-area: auto; grid-column: 1 / -1; }
.travel-mini-dock #travel-mini > span { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.travel-mini-dock #travel-mini { text-align: left; }
.travel-mini-dock #travel-mini-line { grid-row: 1 / 3; align-self: center; max-width: none; white-space: nowrap; }
.travel-mini-dock #travel-mini-stop { grid-column: 2; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.travel-mini-dock .travel-mini-meta { grid-column: 2; overflow: hidden; color: var(--travel-muted); font-size: 12px; font-style: normal; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.travel-mini-dock .travel-mini-actions button { font-family: 'DM Sans', sans-serif; }
.travel-mini-dock #travel-mini-board { grid-column: 1 / 3; min-height: 48px; border: 0; border-radius: 14px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; }
.travel-mini-dock #travel-mini-destination { grid-area: auto; grid-column: 1; }
.travel-mini-dock #travel-mini-share { grid-column: 2; display: grid; place-items: center; width: 48px; min-height: 48px; padding: 0; border: 1px solid var(--travel-line); border-radius: 14px; background: var(--travel-paper); color: var(--journey-accent, var(--navy)); }
.travel-mini-dock #travel-mini-share .panel-icon { width: 18px; height: 18px; }
.travel-mini-dock #travel-mini-finish { grid-area: auto; grid-column: 3; }
.travel-mini-dock #travel-mini-finish.is-primary { border-color: var(--flow-ok); background: var(--flow-ok); color: #fff; }
:root[data-theme=dark] .travel-mini-dock #travel-mini-finish.is-primary { color: #06241c; }

/* Confirmação do embarque com "Desfazer" por alguns segundos (estilo em .flow-confirm, abaixo), no lugar de um aviso flutuante. */
@media (prefers-reduced-motion: no-preference) { body:not(.reduce-motion) .travel-mini-confirm:not([hidden]) { animation: flow-rise .22s ease-out; } }

/* Alerta de descida: a linha do resumo vira um aviso de alto contraste. */
.travel-mini-dock.is-alight-next #travel-mini, .travel-mini-dock.is-alight-now #travel-mini { background: var(--flow-alert); color: var(--flow-alert-ink); }
.travel-mini-dock:is(.is-alight-next, .is-alight-now) #travel-mini-stop { color: inherit; font-size: 16px; white-space: normal; }
.travel-mini-dock:is(.is-alight-next, .is-alight-now) .travel-mini-meta { color: inherit; opacity: .92; font-size: 13px; }
.travel-mini-dock:is(.is-alight-next, .is-alight-now) #travel-mini-line { background: var(--flow-alert-ink); color: var(--flow-alert); }
.travel-mini-dock:is(.is-alight-next, .is-alight-now) #travel-mini > strong { background: color-mix(in srgb, var(--flow-alert-ink) 22%, transparent); color: inherit; }
.travel-mini-dock:is(.is-alight-next, .is-alight-now) { border-color: var(--flow-alert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--flow-alert) 30%, transparent), var(--journey-lift, 0 10px 30px #0829401f); }
@media (prefers-reduced-motion: no-preference) { body:not(.reduce-motion) .travel-mini-dock.is-alight-next { animation: flow-alert-pulse 1.6s ease-in-out 3; } }

@media (min-width: 720px) {
  .travel-mini-dock { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto auto; width: min(800px, calc(100vw - 48px)); }
  .travel-mini-dock #travel-mini { grid-column: 1; grid-row: 2; }
  .travel-mini-dock #travel-mini-confirm { grid-column: 1 / -1; grid-row: 1; }
  .travel-mini-dock #travel-mini-board { grid-column: 2 / 4; grid-row: 2; }
  .travel-mini-dock #travel-mini-destination { grid-column: 2; grid-row: 2; }
  .travel-mini-dock #travel-mini-share { grid-column: 3; grid-row: 2; }
  .travel-mini-dock #travel-mini-finish { grid-column: 4; grid-row: 2; }
}
@media (max-width: 359px) {
  .travel-mini-dock { gap: 5px; padding: 5px; }
  .travel-mini-dock #travel-mini-share { width: 44px; min-height: 44px; }
  .travel-mini-dock #travel-mini-stop { font-size: 13px; }
}

/* Toasts nunca por cima do painel da viagem nem do resumo no mapa. */
@media (max-width: 900px) { body.map-shell.travel-active:not(.travel-map-mini) .toast { bottom: calc(var(--shell-bottom) + var(--travel-sheet-height, 52dvh) + 12px); } }
body.map-shell.travel-map-mini .toast, body.map-shell .travel-mini-dock:not([hidden]) ~ .toast { bottom: calc(var(--shell-bottom) + var(--travel-sheet-height, 150px) + 12px); }

@keyframes flow-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes flow-alert-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--flow-alert) 30%, transparent), var(--journey-lift, 0 10px 30px #0829401f); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--flow-alert) 18%, transparent), var(--journey-lift, 0 10px 30px #0829401f); } }

/* Confirmação com desfazer (viagem e guia Casa ↔ Trabalho). */
.flow-confirm { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 4px 0 12px; border-radius: 14px; background: var(--flow-ok-soft); color: var(--flow-ok); }
.flow-confirm[hidden] { display: none !important; }
.flow-confirm > span { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.flow-confirm :is(.panel-icon, .ui-icon) { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 2.4; }
.flow-confirm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-confirm button { min-width: 88px; min-height: 44px; padding: 0 12px; border: 1px solid currentColor; border-radius: 12px; background: transparent; color: inherit; font: 700 13px/1 'DM Sans', sans-serif; cursor: pointer; }
.flow-confirm button:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
body.map-shell #journey-guide .guide-undo { margin-top: 10px; }

/* ---------- 3 · Carregamentos: esqueletos no formato do conteúdo, sem tela "travada" ---------- */
.flow-loading-status { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.4; }
.flow-spinner { flex: 0 0 16px; width: 16px; height: 16px; border: 2px solid var(--flow-skeleton); border-top-color: var(--night-link, var(--navy)); border-radius: 50%; animation: flow-spin .8s linear infinite; }
.flow-skeleton-row, .flow-skeleton-card, .flow-skeleton-journey, .flow-skeleton-chips i { --sk: linear-gradient(90deg, var(--flow-skeleton) 20%, var(--flow-skeleton-shine) 50%, var(--flow-skeleton) 80%); }
:is(.flow-skeleton-row, .flow-skeleton-card, .flow-skeleton-journey) :is(i, b, small, .flow-sk-badge, .flow-sk-eta, .flow-sk-button, .flow-sk-time), .flow-skeleton-chips i {
  display: block; background: var(--sk); background-size: 200% 100%; animation: flow-shimmer 1.3s ease-in-out infinite;
}
.loading-list.flow-skeleton-list { gap: 8px; }
.skeleton.flow-skeleton-row { display: flex; align-items: center; gap: 12px; height: auto; min-height: 60px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); animation: none; }
.flow-skeleton-row i { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; }
.flow-skeleton-row > span { flex: 1; min-width: 0; }
.flow-skeleton-row b { width: 62%; height: 12px; border-radius: 6px; }
.flow-skeleton-row small { width: 38%; height: 10px; margin-top: 8px; border-radius: 6px; }
.flow-skeleton-row.is-stop { min-height: 52px; border-width: 0 0 1px; border-radius: 0; background: transparent; }
.flow-skeleton-row.is-stop i { flex-basis: 26px; width: 26px; height: 26px; border-radius: 50%; }
.flow-skeleton-chips { display: flex; gap: 8px; margin: 0 0 14px; overflow: hidden; }
.flow-skeleton-chips i { flex: 0 0 112px; height: 58px; border-radius: 14px; }
.flow-skeleton-chips i:first-child { flex-basis: 132px; }
.flow-skeleton-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "badge lines eta" "button button button"; align-items: center; gap: 12px; margin: 0 0 10px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.flow-skeleton-card .flow-sk-badge { grid-area: badge; width: 58px; height: 24px; border-radius: 8px; }
.flow-skeleton-card .flow-sk-lines { grid-area: lines; min-width: 0; }
.flow-skeleton-card .flow-sk-lines b { width: 72%; height: 12px; border-radius: 6px; }
.flow-skeleton-card .flow-sk-lines small { width: 48%; height: 10px; margin-top: 8px; border-radius: 6px; }
.flow-skeleton-card .flow-sk-eta { grid-area: eta; width: 54px; height: 30px; border-radius: 9px; }
.flow-skeleton-card .flow-sk-button { grid-area: button; height: 44px; border-radius: 12px; }
.flow-skeleton-card.is-hero { margin-top: 2px; }
.flow-skeleton-itinerary .flow-skeleton-list { margin-top: 6px; }
.flow-skeleton-journeys { display: grid; gap: 10px; }
.flow-skeleton-journeys .flow-loading-status { margin-bottom: 2px; }
.flow-skeleton-journey { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "time eta" "badges badges" "lines lines" "button button"; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.flow-skeleton-journey .flow-sk-time { grid-area: time; width: 96px; height: 30px; border-radius: 8px; }
.flow-skeleton-journey .flow-sk-eta { grid-area: eta; width: 92px; height: 48px; border-radius: 14px; }
.flow-skeleton-journey .flow-sk-badges { grid-area: badges; display: flex; gap: 8px; }
.flow-skeleton-journey .flow-sk-badges i { width: 64px; height: 24px; border-radius: 8px; }
.flow-skeleton-journey .flow-sk-lines { grid-area: lines; }
.flow-skeleton-journey .flow-sk-lines b { width: 70%; height: 12px; border-radius: 6px; }
.flow-skeleton-journey .flow-sk-lines small { width: 50%; height: 10px; margin-top: 8px; border-radius: 6px; }
.flow-skeleton-journey .flow-sk-button { grid-area: button; height: 48px; border-radius: 14px; }
@keyframes flow-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes flow-spin { to { transform: rotate(360deg); } }

/* Atualização em segundo plano: os cartões ficam; só o ícone gira e uma linha fina aparece sob o cabeçalho. */
#arrival-drawer .drawer-head { position: relative; }
#arrival-drawer.is-refreshing .drawer-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--night-link, var(--navy)), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: flow-progress 1.1s ease-in-out infinite; }
#arrival-drawer.is-refreshing #refresh-button .ui-icon { animation: flow-spin .9s linear infinite; }
#arrival-drawer #refresh-button:disabled { opacity: 1; cursor: progress; }
@keyframes flow-progress { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* Erro sem apagar o que já estava na tela, com "tentar de novo" no lugar. */
.flow-stale-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 8px 8px 8px 12px; border-radius: 12px; background: #fff4dc; color: #6a4708; font-size: 12px; font-weight: 600; line-height: 1.4; }
:root[data-theme=dark] .flow-stale-note { background: #3b3422; color: #f1d891; }
.flow-stale-note button { flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 1px solid currentColor; border-radius: 11px; background: transparent; color: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.flow-error-state { text-align: center; }
.flow-error-state > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.flow-error-state button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--night-link, var(--navy)); font: 700 13px/1.2 'DM Sans', sans-serif; cursor: pointer; }
.flow-error-state button:first-child { border-color: var(--night-link, var(--navy)); }
.flow-error-state.journey-empty { display: grid; justify-items: center; gap: 4px; }
#refresh-commute-routes.is-busy .ui-icon { animation: flow-spin .9s linear infinite; }
#refresh-commute-routes.is-busy { pointer-events: none; opacity: .75; }
/* Rodapé das chegadas: o texto fixo "Disponibilidade conforme a linha e o sentido" repetia o óbvio. */
#arrival-drawer .drawer-foot > span:last-child:not(:first-child) { display: none; }

/* ---------- 4 · Chegadas no ponto: linhas numa faixa rolável, o próximo ônibus aparece sem rolar ---------- */
body.map-shell #arrival-drawer .stop-line-options { display: flex; gap: 8px; margin: 0 -2px; padding: 2px 2px 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
body.map-shell #arrival-drawer .stop-line-options::-webkit-scrollbar { display: none; }
body.map-shell #arrival-drawer .stop-line-option, body.map-shell #arrival-drawer .stop-line-option.all {
  display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto; grid-column: auto; align-content: center; align-items: baseline; column-gap: 12px; row-gap: 2px;
  min-width: 118px; max-width: 200px; min-height: 60px; padding: 8px 12px; border-radius: 14px; scroll-snap-align: start;
}
body.map-shell #arrival-drawer .stop-line-option > span { display: contents; }
body.map-shell #arrival-drawer .stop-line-option > span:first-child b { grid-column: 1; grid-row: 1; font-size: 14px; }
body.map-shell #arrival-drawer .stop-line-option > span:first-child small { grid-column: 1 / -1; grid-row: 2; max-width: 176px; overflow: hidden; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
body.map-shell #arrival-drawer .stop-line-option > span:last-child strong { grid-column: 2; grid-row: 1; justify-self: end; font-size: 14px; text-align: right; white-space: nowrap; }
body.map-shell #arrival-drawer .stop-line-option > span:last-child small { display: none; }
body.map-shell #arrival-drawer .stop-line-option.all > span:last-child strong { color: var(--flow-ok); }
body.map-shell #arrival-drawer .stop-line-option.all > span:last-child strong::after { content: " ao vivo"; font-size: 11px; font-weight: 600; }
body.map-shell #arrival-drawer .stop-lines-block .arrival-section-head { margin-bottom: 8px; }
/* "Ver todas as N linhas" é o último item da faixa, sem ocupar uma linha inteira. */
body.map-shell #arrival-drawer .stop-line-options .arrival-lines-toggle { flex: 0 0 auto; align-self: stretch; width: auto; min-width: 104px; max-width: 150px; min-height: 60px; margin: 0; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 14px; background: transparent; font-size: 12px; line-height: 1.3; text-align: center; white-space: normal; scroll-snap-align: end; }
body.map-shell #arrival-drawer .live-arrivals-block { margin-top: 8px; }

/* Favoritar o ponto direto do cabeçalho das chegadas. */
#arrival-drawer .drawer-actions .drawer-favorite .ui-icon { width: 20px; height: 20px; }
#arrival-drawer .drawer-actions .drawer-favorite.saved { color: #b36b00; border-color: color-mix(in srgb, #e59a00 55%, var(--line)); background: color-mix(in srgb, #ffb400 14%, var(--paper)); }
#arrival-drawer .drawer-actions .drawer-favorite.saved .ui-icon path { fill: currentColor; fill-opacity: .9; }
:root[data-theme=dark] #arrival-drawer .drawer-actions .drawer-favorite.saved { color: #ffcf66; }
#arrival-drawer .drawer-actions .drawer-favorite[hidden] { display: none !important; }
.favorite-line-chooser { margin: 0 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.favorite-line-chooser header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.favorite-line-chooser header strong { font-size: 14px; }
.favorite-line-chooser header button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); }
.favorite-line-chooser header .ui-icon { width: 18px; height: 18px; }
.favorite-line-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.favorite-line-options button { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; column-gap: 8px; min-height: 52px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); text-align: left; }
.favorite-line-options button b { font-size: 13px; }
.favorite-line-options button small { grid-column: 1; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.favorite-line-options button .ui-icon { grid-column: 2; grid-row: 1 / 3; width: 18px; height: 18px; color: var(--muted); }
.favorite-line-options button[aria-pressed=true] { border-color: color-mix(in srgb, #e59a00 55%, var(--line)); }
.favorite-line-options button[aria-pressed=true] .ui-icon { color: #b36b00; }
.favorite-line-options button[aria-pressed=true] .ui-icon path { fill: currentColor; }
.favorite-line-chooser p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }

/* Repetir a última viagem: um atalho discreto acima dos pontos próximos. */
.repeat-last-trip { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.repeat-last-trip-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--night-link, var(--navy)) 10%, var(--paper)); color: var(--night-link, var(--navy)); }
.repeat-last-trip .ui-icon { width: 18px; height: 18px; }
.repeat-last-trip > span:nth-child(2) { min-width: 0; }
.repeat-last-trip small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }
.repeat-last-trip strong { display: block; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.repeat-last-trip strong b { margin-right: 4px; color: var(--night-link, var(--navy)); }
.repeat-last-trip > .ui-icon:last-child { color: var(--muted); }
@media (hover: hover) { .repeat-last-trip:hover { border-color: var(--night-link, var(--navy)); } }
@media (min-width: 601px) {
  /* Desktop/tablet: favoritar vira um ícone, deixando o nome do ponto numa linha. */
  #arrival-drawer .drawer-actions .drawer-favorite { width: 44px; min-width: 44px; padding: 0; }
  #arrival-drawer .drawer-actions .drawer-favorite span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 601px) and (max-width: 900px) {
  /* Tablet: a folha da viagem vira um cartão centrado, sem esticar linhas curtas por toda a tela. */
  body.map-shell #travel-sheet { left: max(16px, calc(50% - 300px)); right: max(16px, calc(50% - 300px)); width: auto; border-radius: 26px; border-width: 1px; }
}

/* ---------- 5 · Avisos (toasts) sem cobrir botões no celular ---------- */
@media (max-width: 600px) {
  /* Mapa livre: acima da fileira de controles do mapa e fora da coluna de zoom. */
  body.map-shell:not(.travel-active):not(.travel-map-mini):not(.journey-navigation-active) .toast { bottom: calc(var(--shell-bottom) + 64px); max-width: min(300px, calc(100vw - 120px)); text-align: center; }
  /* Chegadas abertas: no espaço de mapa entre as abas e a folha, não sobre os cartões. */
  body.map-shell.map-shell-arrivals-open:not(.travel-active):not(.travel-map-mini):not(.journey-navigation-active) .toast { top: calc(env(safe-area-inset-top, 0px) + 72px); bottom: auto; transform: translate(-50%, -8px); }
  body.map-shell.map-shell-arrivals-open:not(.travel-active):not(.travel-map-mini):not(.journey-navigation-active) .toast.show { transform: translate(-50%, 0); }
  /* Guia Casa ↔ Trabalho: o topo fica livre (sem abas), então o aviso não cobre o guia. */
  body.map-shell.journey-navigation-active .toast { top: calc(env(safe-area-inset-top, 0px) + 16px); bottom: auto; transform: translate(-50%, -8px); }
  body.map-shell.journey-navigation-active .toast.show { transform: translate(-50%, 0); }
}
@media (max-width: 360px) {
  /* Telas estreitas: aviso mais largo e mais baixo (menos linhas), cabendo nos espaços livres. */
  body.map-shell .toast { max-width: calc(100vw - 24px); padding: 10px 14px; font-size: 12px; line-height: 1.35; }
  body.map-shell.map-shell-arrivals-open:not(.travel-active):not(.travel-map-mini):not(.journey-navigation-active) .toast { top: calc(env(safe-area-inset-top, 0px) + 66px); }
}
@media (max-width: 600px) {
  /* Pontos próximos no celular: o esqueleto já tem o formato do carrossel final (sem "pulo" de altura). */
  #results-region > .flow-skeleton-list { display: flex; gap: 8px; margin-top: 30px; overflow: hidden; }
  #results-region > .flow-skeleton-list .flow-skeleton-row { flex: 0 0 min(292px, 80%); min-height: 52px; padding: 8px 10px; }
  #results-region > .flow-skeleton-list .flow-skeleton-row i { flex-basis: 30px; width: 30px; height: 30px; }
}
/* QA mobile v139: the chip placeholders (132 + 3 × 112 px) made the #arrival-list grid track 492 px wide, so every arrival
 * skeleton card was cut on the right on phones. Let the skeleton blocks shrink to the drawer. */
#arrival-list > :is(.flow-skeleton-arrivals, .flow-skeleton-itinerary), #results-region > .flow-skeleton-journeys { min-width: 0; }
/* QA mobile v139: the key action "Escolher onde descer" (and the chosen stop) was cut to "Escolher o…" at 320–390 px; two lines on phones. */
@media (max-width: 600px) {
  .travel-mini-dock #travel-mini-destination span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; text-overflow: clip; overflow-wrap: break-word; line-height: 1.2; }
}
/* QA desktop v139: on tablet/desktop the next stop ("Próximo: Parada do museu") was cut with "…" in the embarked summary; allow two lines. */
@media (min-width: 720px) {
  .travel-mini-dock #travel-mini-stop { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; text-overflow: clip; }
}
/* QA desktop v139: "Sem chegadas para este ponto agora" — the text block was centered under a left-aligned title, and in the
 * dark theme its buttons kept navy text on the dark card (unreadable). Same alignment and colors as the error state. */
.forecast-empty:not(.flow-error-state) > p { max-width: 46ch; margin: 6px 0 0; }
.forecast-empty:not(.flow-error-state) button { color: var(--night-link, var(--navy)); font: 700 13px/1.2 'DM Sans', sans-serif; cursor: pointer; }
/* QA desktop v139: "Mapa temporariamente indisponível" — in the dark theme its two buttons kept navy text on the dark card (1.7:1). */
.map-recovery button { color: var(--night-link, var(--navy)); font-weight: 700; cursor: pointer; }

/* v139: "Vai para o outro sentido?" shortcut inside a stop filtered by line. */
#arrival-list .opposite-direction-button {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 12px; padding: 10px 14px;
  min-height: 52px; border: 1px dashed color-mix(in srgb, var(--shell-accent, #0b4fb3) 45%, transparent);
  border-radius: 14px; background: color-mix(in srgb, var(--shell-accent, #0b4fb3) 6%, transparent);
  color: inherit; text-align: left; font: inherit; cursor: pointer;
}
#arrival-list .opposite-direction-button > svg { flex: none; width: 22px; height: 22px; color: var(--shell-accent, #0b4fb3); }
#arrival-list .opposite-direction-button span { display: grid; gap: 2px; min-width: 0; }
#arrival-list .opposite-direction-button b { font-size: 14px; color: var(--shell-accent, #0b4fb3); }
#arrival-list .opposite-direction-button small { font-size: 12.5px; opacity: .8; }
#arrival-list .opposite-direction-button[aria-busy="true"] { opacity: .7; cursor: progress; }
#arrival-list .opposite-direction-button:hover { background: color-mix(in srgb, var(--shell-accent, #0b4fb3) 11%, transparent); }
html[data-theme="dark"] #arrival-list .opposite-direction-button b,
html[data-theme="dark"] #arrival-list .opposite-direction-button > svg { color: var(--night-link, #8fbaff); }