/* v138 map layout. Load last. The extra `html` keeps these rules ahead of older sheets without !important.
 * Bottom band (all widths): dock + collapse control, map controls on the right, legend (desktop) and credits. */
html body.map-shell {
  --v138-ctrl: 44px;
  --v138-ctrl-gap: 8px;
  --v138-ctrl-base: var(--shell-bottom);
  --v138-dock-h: 70px;
  --v138-legend-h: 34px;
  --v138-radius: 14px;
  --v138-shadow: 0 1px 2px #102d3f12, 0 4px 16px #102d3f10;
  --v138-soft: color-mix(in srgb, var(--shell-accent) 9%, var(--paper));
  --v138-tint: color-mix(in srgb, var(--ink) 4%, var(--paper));
  --shell-shadow: var(--v138-shadow);
}
:root[data-theme=dark] body.map-shell { --v138-shadow: 0 1px 2px #0005, 0 4px 16px #0003; }

/* 1. Top tabs: always first layer of the shell and never under the arrivals drawer. */
html body.map-shell .workspace-tabs { z-index: 1001; border-radius: 16px; }
html body.map-shell .workspace-tab { border-radius: 12px; }

/* 2. Map controls: one discreet column at the bottom right, above the dock. */
html body.map-shell .maplibregl-ctrl-top-right {
  top: auto;
  right: max(var(--shell-gap), env(safe-area-inset-right, 0px));
  bottom: calc(var(--v138-ctrl-base) + var(--v138-ctrl) + var(--v138-ctrl-gap));
}
html body.map-shell .maplibregl-ctrl-top-right > .maplibregl-ctrl { float: none; margin: 0; }
html body.map-shell .maplibregl-ctrl-group {
  border: 1px solid var(--line) !important;
  border-radius: var(--v138-radius) !important;
  background: var(--paper) !important;
  box-shadow: var(--v138-shadow) !important;
}
html body.map-shell .maplibregl-ctrl-group button { width: var(--v138-ctrl); height: var(--v138-ctrl); }
html body.map-shell .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
html body.map-shell .map-panel .recenter-button,
html body.map-shell .map-panel .traffic-button {
  top: auto;
  right: max(var(--shell-gap), env(safe-area-inset-right, 0px));
  min-width: var(--v138-ctrl);
  height: var(--v138-ctrl);
  min-height: var(--v138-ctrl);
  border: 1px solid var(--line);
  border-radius: var(--v138-radius);
  background: var(--paper);
  color: var(--shell-accent);
  box-shadow: var(--v138-shadow);
  backdrop-filter: none;
  transform: none;
}
html body.map-shell .map-panel .recenter-button { bottom: var(--v138-ctrl-base); width: var(--v138-ctrl); padding: 0; }
html body.map-shell .map-panel .traffic-button {
  bottom: calc(var(--v138-ctrl-base) + 3 * var(--v138-ctrl) + 2 * var(--v138-ctrl-gap));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px 0 10px;
  font: 700 12px/1 'DM Sans', sans-serif;
}
html body.map-shell .map-panel .traffic-button svg { width: 20px; height: 20px; flex: 0 0 20px; }
html body.map-shell .map-panel .traffic-button:disabled { display: none; }
@media (hover: hover) {
  html body.map-shell .map-panel :is(.recenter-button, .traffic-button):hover { background: var(--v138-soft); color: var(--shell-accent); transform: none; }
}
html body.map-shell .map-panel :is(.recenter-button, .traffic-button):focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 2px; }
/* Keyboard users see when the map itself has focus (arrow keys pan, +/- zoom). */
html body.map-shell .maplibregl-canvas:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: -3px; }

/* 9. Side controls sit under every panel and step aside while any popup, sheet or dialog is open. */
html body.map-shell .map-panel :is(.traffic-button, .recenter-button, .maplibregl-ctrl-top-right) { z-index: 3; }
/* Tablet/desktop: the planner (search, Casa ↔ Trabalho) is a left column, so zoom, GPS and Trânsito stay usable on the right.
 * Phones: the expanded planner covers the map band, so the controls step aside. The hide rules below still win for sheets/dialogs. */
@media (min-width: 601px) {
  html body.map-shell.map-shell-planner-open :is(.traffic-button, .recenter-button, .maplibregl-ctrl-top-right) { visibility: visible; }
  html body.map-shell.map-shell-planner-open :is(.traffic-button, .recenter-button) { pointer-events: auto; }
}
@media (max-width: 600px) {
  html body.map-shell.map-shell-planner-open :is(.traffic-button, .recenter-button, .maplibregl-ctrl-top-right) { visibility: hidden; pointer-events: none; }
}
html body.map-shell:is(.map-shell-arrivals-open, .map-shell-menu-open, .origin-picking, .travel-active, .journey-navigation-active) :is(.traffic-button, .recenter-button, .maplibregl-ctrl-top-right),
html body.map-shell:has(dialog[open], #journey-guide:not([hidden]), #travel-sheet:not([hidden]), #travel-mini:not([hidden]), #origin-map-picker:not([hidden]), #arrival-drawer:not([hidden])) :is(.traffic-button, .recenter-button, .maplibregl-ctrl-top-right),
html body.map-shell:has(dialog[open], .maplibregl-popup) .map-legend {
  visibility: hidden;
  pointer-events: none;
}

/* 3. Credits: compact MapLibre control in the bottom strip, below the dock and above the map chrome. */
html body.map-shell .maplibregl-ctrl-bottom-right { z-index: 4; bottom: env(safe-area-inset-bottom, 0px); right: env(safe-area-inset-right, 0px); }
html body.map-shell .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib {
  margin: 0 6px 3px 0;
  max-width: calc(100vw - 12px);
  border-radius: 10px;
  font-size: 10px !important;
  line-height: 1.5;
}
html body.map-shell .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 22px; }

/* 3. Legend: desktop only, compact, in the bottom row beside the dock. */
html body.map-shell .map-legend {
  top: auto;
  right: auto;
  bottom: calc(var(--shell-footer) + 8px + (var(--v138-dock-h) - var(--v138-legend-h)) / 2);
  left: max(var(--shell-gap), env(safe-area-inset-left, 0px));
  z-index: 2;
  align-items: center;
  gap: 2px;
  height: var(--v138-legend-h);
  max-width: none;
  padding: 0 8px 0 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--v138-shadow);
  backdrop-filter: none;
  color: var(--muted);
  font: 600 11px/1 'DM Sans', sans-serif;
}
html body.map-shell .map-legend > span { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 5px; border-radius: 0; white-space: nowrap; }
html body.map-shell .map-legend > span > b { font: inherit; }
html body.map-shell .map-legend .legend-icon { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; margin: 0; border-radius: 7px; box-shadow: none; line-height: 0; }
html body.map-shell .map-legend .legend-icon svg { display: block; width: 14px; height: 14px; margin: 0; stroke-width: 2; }
html body.map-shell .map-legend .legend-icon.legend-you svg { fill: currentColor; }
html body.map-shell.map-shell-dock-collapsed .map-legend { bottom: calc(var(--shell-footer) + 8px + 5px); }
/* 5. No legend on phones and tablets: the markers are self-explanatory and the space belongs to the map. */
@media (max-width: 1023px) { html body.map-shell .map-legend { display: none !important; } }
/* Desktop: the legend stays in the bottom-left corner while travelling, boarded or following the trip guide
 * (older travel.css/styles.css rules hid it in those modes). */
@media (min-width: 1024px) {
  html body.map-shell:is(.travel-active, .journey-navigation-active) .map-legend:not([hidden]) { display: flex; }
}

/* Brand: quiet, bottom band. */
html body.map-shell .map-shell-brand { opacity: 1; background: transparent; border-radius: 10px; z-index: 5; }
html body.map-shell .map-shell-brand .brand-logo { opacity: .82; }
/* Live-region spans at the end of <body> must not add a 1px scroll to the scrolling screens (admin, comunidade, histórico). */
html body.map-shell > .sr-only { top: 0; left: 0; }

/* 4. Desktop picker: grow to the window height, scroll inside. */
@media (min-width: 1024px) {
  html body.map-shell .app-shell .control-panel,
  html body.map-shell.map-shell-planner-open .app-shell .control-panel {
    max-height: calc(100dvh - var(--shell-top) - var(--shell-footer) - 8px);
  }
  html body.map-shell:has(#map-legend:not([hidden])):not(.travel-active, .journey-navigation-active) .app-shell .control-panel {
    max-height: calc(100dvh - var(--shell-top) - var(--shell-footer) - 8px - (var(--v138-dock-h) + var(--v138-legend-h)) / 2 - 12px);
  }
}

/* Commute results keep the full-screen map shell instead of the old stacked page layout. */
html body.map-shell:not(.travel-active):not(.journey-navigation-active) .app-shell.commute-results-view {
  display: block;
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding: 0;
}
html body.map-shell:not(.travel-active):not(.journey-navigation-active) .app-shell.commute-results-view .map-panel { height: 100%; border-radius: 0; }

/* Panels: one light border, one soft shadow, consistent radius. */
html body.map-shell .app-shell .control-panel { border-radius: 18px; box-shadow: var(--v138-shadow); }

/* 6. "Escolha seu ponto" and departure card: slimmer, fewer borders, clear hierarchy. */
html body.map-shell .control-panel #location-button {
  min-height: 56px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  transform: none;
}
html body.map-shell .control-panel #location-button .location-icon { width: 34px; height: 34px; border-radius: 10px; }
html body.map-shell .control-panel #location-button .location-icon .ui-icon { width: 19px; height: 19px; }
html body.map-shell .control-panel #location-button small { margin: 0 0 1px; font-size: 9px; letter-spacing: .08em; }
html body.map-shell .control-panel #location-button b { font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.map-shell .control-panel #location-button em { margin-top: 1px; font-size: 11px; line-height: 1.35; }
html body.map-shell .control-panel #location-button .button-arrow { padding: 6px 8px; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 700; }
html body.map-shell.location-confirmed .control-panel #location-button {
  border: 0;
  background: var(--v138-soft);
  color: var(--ink);
}
html body.map-shell.location-confirmed .control-panel #location-button .location-icon { background: var(--paper); color: var(--shell-accent); }
html body.map-shell.location-confirmed .control-panel #location-button :is(small, .button-arrow) { color: var(--shell-accent); }
html body.map-shell.location-confirmed .control-panel #location-button em { color: var(--muted); }

/* One step at a time: no step rail, step number or swipe hint inside the compact shell panel. */
html body.map-shell.location-confirmed .control-panel .hero-copy,
html body.map-shell .control-panel .boarding-steps,
html body.map-shell .control-panel .nearby-stop-heading > div > span { display: none; }
html body.map-shell .control-panel .nearby-stop-heading > b::after { content: none; }
html body.map-shell .control-panel .nearby-stop-heading { flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 12px 2px 6px; }
html body.map-shell .control-panel .nearby-stop-heading h2 { font-size: 14px; letter-spacing: -.01em; }
html body.map-shell .control-panel .results-region .nearby-stop-heading > b { padding: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; }
html body.map-shell .control-panel .nearby-stop-list { gap: 6px; }
html body.map-shell .control-panel .results-region .nearby-stop-choice {
  min-height: 56px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 2px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--v138-tint);
  box-shadow: none;
}
html body.map-shell .control-panel .results-region .nearby-stop-choice .nearby-stop-icon { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
html body.map-shell .control-panel .results-region .nearby-stop-choice .nearby-stop-icon .ui-icon { width: 18px; height: 18px; }
html body.map-shell .control-panel .results-region .nearby-stop-choice .nearby-stop-icon b { right: -3px; bottom: -3px; min-width: 14px; height: 14px; padding: 0 3px; border-width: 1.5px; font-size: 8px; }
html body.map-shell .control-panel .results-region .nearby-stop-choice strong { font-size: 13px; line-height: 1.3; font-weight: 700; }
html body.map-shell .control-panel .results-region .nearby-stop-choice small { color: var(--muted); font-size: 11px; line-height: 1.35; }
html body.map-shell .control-panel .results-region .nearby-stop-choice > i { color: var(--shell-accent); font-size: 12px; font-weight: 700; }
html body.map-shell .control-panel .results-region .nearby-stop-choice:is(:hover, .active) { border-color: color-mix(in srgb, var(--orange) 45%, transparent); background: var(--paper); }
html body.map-shell .control-panel .results-region .nearby-stop-choice:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 2px; }

/* Tablets have the height for the same vertical list as desktop; only phones use the carousel. */
@media (min-width: 601px) {
  html body.map-shell .control-panel .results-region .nearby-stop-list { display: grid; gap: 6px; max-height: none; overflow: visible; padding: 0; }
  html body.map-shell .control-panel .results-region .nearby-stop-choice { flex: none; width: 100%; }
  /* The departure detail ("12 pontos próximos · toque para alterar a partida") wraps instead of being cut. */
  html body.map-shell .control-panel #location-button em { overflow: visible; white-space: normal; text-overflow: clip; }
}
/* Tablets: the brand sits above the dock in the left column, so a tall panel (Casa ↔ Trabalho results) stops above it. */
@media (min-width: 601px) and (max-width: 1023px) {
  html body.map-shell:not(.map-shell-planner-open, .map-shell-dock-collapsed) .app-shell .control-panel { max-height: calc(100dvh - var(--shell-top) - var(--shell-bottom) - 60px); }
}
@media (max-width: 600px) {
  html body.map-shell .app-shell .control-panel { padding: 8px; border-radius: 16px; }
  html body.map-shell .control-panel #location-button { min-height: 52px; padding: 7px 8px; gap: 9px; grid-template-columns: 32px minmax(0, 1fr) auto; }
  html body.map-shell .control-panel #location-button .location-icon { width: 32px; height: 32px; }
  html body.map-shell:not(.map-shell-planner-open) .control-panel .nearby-stop-heading { margin: 10px 4px 6px; }
  html body.map-shell:not(.map-shell-planner-open) .control-panel .nearby-stop-list { gap: 8px; padding: 0 0 2px; scroll-padding-inline: 2px; }
  html body.map-shell .control-panel .results-region .nearby-stop-choice { flex-basis: 84%; min-height: 52px; padding: 7px 10px; column-gap: 9px; grid-template-columns: 28px minmax(0, 1fr) auto; }
  html body.map-shell .control-panel .results-region .nearby-stop-choice .nearby-stop-icon { width: 28px; height: 28px; }
  html body.map-shell .control-panel .results-region .nearby-stop-choice strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
  html body.map-shell .control-panel .results-region .nearby-stop-choice :is(small, i) { font-size: 11px; }
}

/* 7. Dock: exactly one clear highlight. Hover and keyboard focus never look like a second selection. */
html body.map-shell .map-shell-dock { border-radius: 20px; box-shadow: var(--v138-shadow); }
html body.map-shell .map-shell-dock > button { border-radius: 14px; box-shadow: none; transition: color .15s ease, background-color .15s ease; }
html body.map-shell .map-shell-dock > button:not([data-shell-current]) { background: transparent; color: var(--muted); }
html body.map-shell .map-shell-dock > button[data-shell-current] { background: var(--v138-soft); color: var(--shell-accent); box-shadow: none; }
html body.map-shell .map-shell-dock > button[data-shell-current] > span { font-weight: 700; }
html body.map-shell .map-shell-dock > #account-button { border: 0; }
html body.map-shell .map-shell-dock > #account-button:not([data-shell-current]) { background: transparent; color: var(--muted); }
html body.map-shell .map-shell-dock > #account-button[data-shell-current] { background: var(--v138-soft); color: var(--shell-accent); }
html body.map-shell .map-shell-dock #account-button #account-label { color: inherit; font-weight: inherit; }
html body.map-shell .map-shell-dock #account-button:not([data-shell-current]) > span { font-weight: 600; }
html body.map-shell #map-shell-dock > button:focus-visible { outline: 2px solid var(--shell-accent); outline-offset: -2px; }
@media (hover: hover) {
  html body.map-shell .map-shell-dock > button:not([data-shell-current]):hover,
  html body.map-shell .map-shell-dock > #account-button:not([data-shell-current]):hover { background: transparent; color: var(--ink); }
}
/* The open menu marks its current screen with colour only; the dock already shows the selection. */
html body.map-shell #mobile-nav button.active,
html body.map-shell #mobile-nav button[aria-current="page"] { border-color: transparent; background: var(--cream); color: var(--shell-accent); }
html body.map-shell #mobile-nav button.active i { background: transparent; color: var(--shell-accent); }
html body.map-shell #mobile-nav .map-shell-menu-head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 2px 8px; }
html body.map-shell #mobile-nav .map-shell-menu-head h2 { grid-column: 1; grid-row: 1; min-width: 0; }
html body.map-shell #mobile-nav .map-shell-menu-close { grid-column: 2; grid-row: 1; background: transparent; }
html body.map-shell #mobile-nav #live-pill { grid-column: 1 / -1; grid-row: 2; order: 0; padding: 0; }
html body.map-shell #mobile-nav { box-shadow: 0 8px 32px #102d3f1f; }
html body.map-shell #mobile-nav .favorites-launcher small { text-transform: lowercase; letter-spacing: 0; }
html body.map-shell #mobile-nav [data-product-nav="history"] { grid-column: 1 / -1; }
html body.map-shell #mobile-nav .reading-menu-action { grid-column: auto; }
html body.map-shell #mobile-nav .favorites-launcher small::first-letter { text-transform: uppercase; }

/* 8. Collapse control: a visible labelled button next to the dock; when collapsed, a small pill reopens it. */
html body.map-shell .map-shell-navigation .map-shell-dock-toggle {
  position: fixed;
  z-index: 2201;
  left: calc(50% + 248px);
  right: auto;
  bottom: calc(var(--shell-footer) + 8px + (var(--v138-dock-h) - 44px) / 2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 14px 0 11px;
  transform: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--shell-accent);
  box-shadow: var(--v138-shadow);
  font: 700 12px/1 'DM Sans', sans-serif;
  white-space: nowrap;
}
html body.map-shell .map-shell-navigation .map-shell-dock-toggle svg { width: 18px; height: 18px; flex: 0 0 18px; }
html body.map-shell .map-shell-navigation .map-shell-dock-toggle > span { display: inline; }
html body.map-shell.map-shell-dock-collapsed .map-shell-navigation .map-shell-dock-toggle {
  left: 50%;
  bottom: calc(var(--shell-footer) + 8px);
  transform: translateX(-50%);
  padding: 0 16px 0 12px;
}
@media (hover: hover) {
  html body.map-shell .map-shell-navigation .map-shell-dock-toggle:hover { background: var(--v138-soft); }
}
html body.map-shell .map-shell-navigation .map-shell-dock-toggle:focus-visible { outline: 3px solid var(--shell-accent); outline-offset: 3px; }
@media (max-width: 719px) {
  html body.map-shell:not(.map-shell-dock-collapsed) .map-shell-navigation .map-shell-dock-toggle { width: 44px; padding: 0; }
  html body.map-shell:not(.map-shell-dock-collapsed) .map-shell-navigation .map-shell-dock-toggle > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Phones and tablets: collapse control and brand on the left of the band above the dock. */
@media (max-width: 1023px) {
  html body.map-shell .map-shell-brand { top: auto; right: auto; left: max(var(--shell-gap), env(safe-area-inset-left, 0px)); bottom: var(--shell-bottom); }
  html body.map-shell.map-shell-dock-collapsed .map-shell-brand { bottom: calc(var(--shell-footer) + 8px); }
}
@media (max-width: 600px) {
  html body.map-shell .map-shell-navigation .map-shell-dock-toggle,
  html body.map-shell:not(.map-shell-dock-collapsed) .map-shell-navigation .map-shell-dock-toggle {
    left: max(var(--shell-gap), env(safe-area-inset-left, 0px));
    bottom: var(--shell-bottom);
    transform: none;
  }
  html body.map-shell:not(.map-shell-dock-collapsed) .map-shell-brand { left: calc(max(var(--shell-gap), env(safe-area-inset-left, 0px)) + 52px); }
  html body.map-shell.map-shell-dock-collapsed .map-shell-navigation .map-shell-dock-toggle { left: max(var(--shell-gap), env(safe-area-inset-left, 0px)); bottom: calc(var(--shell-footer) + 8px); transform: none; }
  /* Sheets, the open menu and the expanded planner own this band on phones; the dock stays reachable. */
  html body.map-shell:not(.map-shell-dock-collapsed):is(.map-shell-menu-open, .map-shell-planner-open, .origin-picking) .map-shell-navigation .map-shell-dock-toggle,
  html body.map-shell:not(.map-shell-dock-collapsed):has(#arrival-drawer:not([hidden]), #travel-sheet:not([hidden]), #travel-mini:not([hidden]), #journey-guide:not([hidden]), #origin-map-picker:not([hidden])) .map-shell-navigation .map-shell-dock-toggle { visibility: hidden; }
  html body.map-shell.map-shell-dock-collapsed .map-shell-brand { left: calc(max(var(--shell-gap), env(safe-area-inset-left, 0px)) + 108px); }
  html body.map-shell .map-shell-brand { min-height: 44px; padding: 8px 4px; }
  html body.map-shell .map-shell-brand .brand-logo { width: 88px; }
  /* Traffic joins the bottom row of the control column to keep the stack short on phones. */
  html body.map-shell .map-panel .traffic-button { bottom: var(--v138-ctrl-base); right: calc(max(var(--shell-gap), env(safe-area-inset-right, 0px)) + var(--v138-ctrl) + var(--v138-ctrl-gap)); }
}
@media (max-width: 359px) {
  html body.map-shell .map-panel .traffic-button { width: var(--v138-ctrl); padding: 0; font-size: 0; }
}
@media (max-width: 1023px) {
  html body.map-shell:is(.map-shell-planner-open, .map-shell-arrivals-open, .travel-active, .journey-navigation-active, .origin-picking, .map-shell-menu-open) .map-shell-brand { visibility: hidden; }
}

/* Dark theme: the fixed #08745e green of "N ônibus ao vivo" / "Sentido …" read at ~2.3:1 on the dark cards. */
:root[data-theme=dark] body.map-shell #arrival-drawer :is(.stop-line-option .line-live-count, .arrival-card:not(.next, :first-child) .arrival-live-note) { color: #7adbc1; }

/* Tablet/desktop legibility floor inside the arrivals/itinerary drawer: older sheets used 7–9px labels. */
@media (min-width: 601px) {
  html body.map-shell #arrival-drawer .arrival-section-head > b { font-size: 11px; }
  html body.map-shell #arrival-drawer .arrival-time > span { font-size: 11px; }
  html body.map-shell #arrival-drawer #boarding-direction small { font-size: 10px; }
  html body.map-shell #arrival-drawer .itinerary-destination > summary small { font-size: 10px; letter-spacing: .08em; }
  html body.map-shell #arrival-drawer .itinerary-destination > summary b { font-size: 13px; }
  html body.map-shell #arrival-drawer .itinerary-destination > summary i { padding: 7px 10px; font-size: 12px; }
  html body.map-shell #arrival-drawer .itinerary-destination-body > p { font-size: 12px; }
  html body.map-shell #arrival-drawer .vehicle-itinerary-summary span { font-size: 10px; letter-spacing: .08em; }
  html body.map-shell #arrival-drawer .vehicle-itinerary-summary small { font-size: 11px; }
  html body.map-shell #arrival-drawer .vehicle-itinerary-summary button { min-height: 40px; font-size: 12px; }
  html body.map-shell #arrival-drawer .itinerary-stop i { font-size: 11px; }
  html body.map-shell #arrival-drawer .itinerary-stop strong { font-size: 13px; line-height: 1.3; }
  html body.map-shell #arrival-drawer .itinerary-stop small { font-size: 11px; line-height: 1.35; }
}

/* Arrivals drawer on phones: icon actions beside the stop name instead of a full-width button row. */
@media (max-width: 600px) {
  html body.map-shell #arrival-drawer .drawer-head { flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
  html body.map-shell #arrival-drawer .drawer-head > div:first-child { flex: 1 1 auto; flex-basis: auto; }
  html body.map-shell #arrival-drawer .drawer-actions { width: auto; gap: 6px; }
  html body.map-shell #arrival-drawer .drawer-actions button { flex: 0 0 44px; width: 44px; padding: 0; border-radius: 12px; }
  html body.map-shell #arrival-drawer .drawer-actions button span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Drawers never hide the top tabs on narrow or tablet screens. */
@media (max-width: 1023px) {
  html body.map-shell #arrival-drawer { max-height: calc(100dvh - var(--shell-bottom) - var(--shell-top)); }
}
@media (max-width: 600px) {
  html body.map-shell #arrival-drawer { max-height: min(66dvh, calc(100dvh - var(--shell-bottom) - var(--shell-top))); }
}

@media (prefers-reduced-motion: reduce) {
  html body.map-shell :is(.map-shell-dock > button, .map-shell-dock-toggle) { transition: none; }
}
html body.map-shell.reduce-motion :is(.map-shell-dock > button, .map-shell-dock-toggle) { transition: none; }

/* QA mobile: on the scrolling pages (Comunidade, Perfil, Histórico) the floating brand and the collapse
 * control sat on top of the content (e.g. "Salvar alterações"). The pages already carry their own header. */
@media (max-width: 1023px) {
  html body.map-shell[data-map-shell-view]:not([data-map-shell-view="transport"]) .map-shell-brand { visibility: hidden; }
}
@media (max-width: 600px) {
  html body.map-shell[data-map-shell-view]:not([data-map-shell-view="transport"]):not(.map-shell-dock-collapsed) .map-shell-navigation .map-shell-dock-toggle { visibility: hidden; }
}

/* QA desktop (v138): 1024–1279 px, the centred dock sits under the planner column, so the planner stops above the dock band
 * instead of touching it (initial list, Buscar, Casa ↔ Trabalho results). */
@media (min-width: 1024px) and (max-width: 1279px) {
  html body.map-shell .app-shell .control-panel,
  html body.map-shell.map-shell-planner-open .app-shell .control-panel,
  html body.map-shell:has(#map-legend:not([hidden])):not(.travel-active, .journey-navigation-active) .app-shell .control-panel {
    max-height: calc(100dvh - var(--shell-top) - var(--shell-bottom));
  }
}
/* QA desktop (v138): tablets (601–1023 px) also keep the legend at the bottom, in every state, as a slim strip in the
 * footer band left of the map credits (below the dock and any bottom sheet). */
@media (min-width: 601px) and (max-width: 1023px) {
  html body.map-shell .map-legend:not([hidden]) { display: flex !important; }
  html body.map-shell .map-legend,
  html body.map-shell.map-shell-dock-collapsed .map-legend {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 3px);
    left: max(var(--shell-gap), env(safe-area-inset-left, 0px));
    height: 22px;
    padding: 0 6px 0 2px;
    border-radius: 8px;
    font-size: 11px;
    box-shadow: none;
  }
  html body.map-shell .map-legend > span { gap: 4px; padding: 0 4px; }
  html body.map-shell .map-legend .legend-icon { width: 18px; height: 18px; flex-basis: 18px; border-radius: 6px; }
  html body.map-shell .map-legend .legend-icon svg { width: 12px; height: 12px; }
}
/* QA desktop (v138): picking a stop on the map leaves a small MapLibre popup open; on tablets and desktop that popup must not
 * hide the corner legend (it only yields to real dialogs). Phones keep the original behaviour. */
@media (min-width: 601px) {
  html body.map-shell:has(.maplibregl-popup):not(:has(dialog[open])) .map-legend { visibility: visible; pointer-events: auto; }
}
/* QA desktop (v138): in dark theme the travel map is drawn un-inverted (light, mobility-polish.css), so the white night logo
 * disappeared into it; show the regular colour logo there. */
:root[data-theme=dark] body.map-shell.travel-active .map-shell-brand .brand-logo { filter: none; }

/* ---------- QA mobile (v138, 320–430 px, claro e escuro) ---------- */
/* Chrome deixava um "buraco" no mapa (sem ruas nem paradas) sob o planejador recolhido quando a lista dele passava da
 * altura visível (linha escolhida → Mapa; Casa ↔ Trabalho → Ver mapa). Um recorte explícito, maior que a sombra, remove
 * o artefato sem mudar o visual; o painel já recorta o conteúdo (overflow: auto). Um retângulo simples não basta. */
html body.map-shell .app-shell .control-panel { clip-path: inset(-24px round 16px); } /* só o recorte arredondado resolve */
/* Itinerário no escuro: "Voltar aos ônibus" e o tempo de chegada usavam o azul-marinho do tema claro (1,7:1). */
:root[data-theme=dark] body.map-shell #arrival-drawer :is(.vehicle-itinerary-summary button, .itinerary-live-heading > b) { color: var(--night-link); }
/* Itinerário no celular: rótulos de 7–10px ("Destino opcional", "Adicionar") e "Voltar aos ônibus" com 28px de altura. */
@media (max-width: 600px) {
  html body.map-shell #arrival-drawer .vehicle-itinerary-summary button { min-height: 44px; font-size: 13px; }
  html body.map-shell #arrival-drawer #boarding-direction small { font-size: 10px; }
  html body.map-shell #arrival-drawer .itinerary-destination > summary { min-height: 56px; }
  html body.map-shell #arrival-drawer .itinerary-destination > summary small { font-size: 10px; letter-spacing: .08em; }
  html body.map-shell #arrival-drawer .itinerary-destination > summary b { font-size: 13px; }
  html body.map-shell #arrival-drawer .itinerary-destination > summary i { padding: 8px 12px; font-size: 12px; }
  html body.map-shell #arrival-drawer .itinerary-destination-body > p { font-size: 12px; }
  /* Busca de linha: o campo tinha 32px de altura. */
  html body.map-shell #search-form .search-control input { height: 44px; }
  html body.map-shell #search-form .search-control button { min-height: 44px; }
}
/* Entrar / Criar conta: textos de 7–10px e campos com fonte menor que 16px (o iOS amplia a tela ao focar). */
#auth-dialog .auth-brand small { font-size: 11px; }
#auth-dialog .auth-intro > span { font-size: 10px; }
#auth-dialog .auth-intro p { font-size: 13px; }
#auth-dialog .auth-tabs button { font-size: 13px; }
#auth-dialog :is(.auth-form label, .auth-password-field > label) { font-size: 12px; }
#auth-dialog .auth-form input:not([type=checkbox]) { font-size: 16px; }
#auth-dialog .auth-form input:not([type=checkbox])::placeholder { font-size: 14px; }
#auth-dialog .input-password button { font-size: 11px; }
#auth-dialog .auth-submit { font-size: 14px; }
#auth-dialog .auth-reset { min-height: 44px; padding: 0 12px; font-size: 13px; }
#auth-dialog .auth-divider { font-size: 11px; }
#auth-dialog :is(.google-button, .demo-access) { font-size: 13px; }
#auth-dialog .auth-security { font-size: 11px; }
:root[data-theme=dark] #auth-dialog .consent-field a { color: var(--night-link); }
/* Comunidade, Perfil e Histórico no celular: a faixa de 76px reservada às abas do mapa (ocultas nessas telas) ficava vazia. */
@media (max-width: 600px) {
  html body.map-shell[data-map-shell-view]:not([data-map-shell-view="transport"], [data-map-shell-view="admin"]) > .product-view { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
  /* Perfil: abas, campos e "Salvar alterações" com alvo de 44px e fonte de 16px nos campos. */
  html body.map-shell .profile-nav button { min-height: 44px; font-size: 12px; }
  html body.map-shell .profile-form :is(input, select) { min-height: 44px; font-size: 16px; }
  html body.map-shell .profile-form > button { min-height: 44px; padding: 10px 18px; font-size: 13px; }
}
/* Perfil no escuro: o selo "Entre para ativar" ficava claro sobre claro (1,6:1). */
:root[data-theme=dark] .sync-panel > strong { background: var(--night-raised); color: var(--muted); }
/* QA desktop (v138): Perfil on tablet/desktop used 7–10px labels, tabs and buttons across a 1440px-wide column.
 * Readable floor and a calmer column width; phones are untouched. */
@media (min-width: 601px) {
  html body.map-shell .profile-page { max-width: 1120px; }
  html body.map-shell .profile-page .section-kicker { font-size: 11px; }
  html body.map-shell .profile-page #profile-email { font-size: 13px; }
  html body.map-shell .profile-page #profile-auth-action { min-height: 44px; font-size: 14px; }
  html body.map-shell .profile-page .profile-nav button { min-height: 40px; font-size: 13px; }
  html body.map-shell .profile-page .card-title span { font-size: 11px; }
  html body.map-shell .profile-page :is(.profile-form, .preference-list) label { font-size: 12px; }
  html body.map-shell .profile-page .profile-form :is(input, select) { font-size: 14px; }
  html body.map-shell .profile-page .profile-panel button { min-height: 40px; font-size: 13px; }
  html body.map-shell .profile-page .profile-panel :is(p, small) { font-size: 12px; }
  html body.map-shell .profile-page :is(#sync-status, .saved-place-grid span, .privacy-actions span) { font-size: 11px; }
}
@media (max-width: 600px) {
  /* Comunidade ("Recentes", "Só alertas", "Publicar com segurança") e Preferências de leitura: alvos de 30–40px. */
  html body.map-shell :is(.community-feed-filters button, .community-safety button) { min-height: 44px; }
  html body.map-shell .usage-privacy > summary { display: flex; align-items: center; min-height: 44px; }
}
/* QA mobile (v138): Perfil nos celulares com o mesmo piso de leitura do tablet/desktop (rótulos de 7–10px). */
@media (max-width: 600px) {
  html body.map-shell .profile-page .section-kicker { font-size: 10px; }
  html body.map-shell .profile-page #profile-email { font-size: 13px; }
  html body.map-shell .profile-page #profile-auth-action { min-height: 44px; font-size: 14px; }
  html body.map-shell .profile-page .card-title span { font-size: 10px; }
  html body.map-shell .profile-page :is(.profile-form, .preference-list) label { font-size: 12px; }
  html body.map-shell .profile-page .profile-panel :is(p, small) { font-size: 12px; }
  html body.map-shell .profile-page :is(#sync-status, .saved-place-grid span, .privacy-actions span) { font-size: 11px; }
}
/* QA mobile (v138): Entrar / Criar conta em 320px — o logo encostava no botão Fechar e os exemplos dos campos eram cortados. */
@media (max-width: 359px) {
  #auth-dialog .auth-brand .brand-logo { width: 168px; }
  #auth-dialog .auth-form input:not([type=checkbox])::placeholder { font-size: 13px; }
}