/* Avo's layout links this filename last and unlayered (the gem ships an empty
   stub), so this beats its @layer base rule on any selector. Avo inverts its
   white checkbox tick with background-blend-mode: difference, which assumes an
   achromatic accent-content. Ours is coral, so the tick came out teal. */
input[type="checkbox"] {
  background-blend-mode: normal;
}

/* The City page's Routes panel (avo/resource_tools/_city_routes). A grid of
   divs, not a <table>: each row is a turbo-frame, which cannot sit inside one. */
.city-routes {
  width: 100%;
  overflow-x: auto;
}

.city-routes-grid {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) repeat(6, minmax(3.75rem, 5.5rem)) 5.5rem;
  min-width: 40rem;
  column-gap: 0.5rem;
}

/* Cells fill the row's height, so the border between the two directions runs
   unbroken from row to row. */
.city-routes-grid > * {
  display: flex;
  align-items: center;
  padding-block: 0.5rem;
}

.city-routes-grid > .text-center {
  justify-content: center;
}

.city-routes-grid > .text-right {
  justify-content: flex-end;
}

/* Translucent, so the tint reads on Avo's light and dark schemes alike. */
.city-routes-grid.is-dirty {
  background-color: rgb(245 158 11 / 0.15);
}