/* Street works.
 *
 * Rides on punctuality.css for the shell and pinch.css for the tables, pills
 * and map. Everything here exists for one reason: this table's text columns
 * are far wider than the pinch report's.
 *
 * pinch.css sets `.pinch-table { width: max-content }`, which is right for a
 * ranked numeric table -- the columns are narrow and the whole thing fits.
 * Here the street, authority and promoter names are long enough that the table
 * measured 1,958px inside a 1,146px container, pushing traffic management,
 * dates and state off the right edge. They were reachable by scrolling, but a
 * work's *dates* and whether it blocks the carriageway are the two things
 * anyone opens this page for, and they were the two hidden.
 */

.works-table { width: 100%; table-layout: fixed; }

/* Proportions rather than pixels, so the table reflows on a narrow screen
   instead of needing a second set of breakpoints. */
.works-table th:nth-child(1), .works-table td:nth-child(1) { width: 24%; }
.works-table th:nth-child(2), .works-table td:nth-child(2) { width: 24%; }
.works-table th:nth-child(3), .works-table td:nth-child(3) { width: 16%; }
.works-table th:nth-child(4), .works-table td:nth-child(4) { width: 15%; }
.works-table th:nth-child(5), .works-table td:nth-child(5) { width: 13%; }
.works-table th:nth-child(6), .works-table td:nth-child(6) { width: 8%; }

/* Long names wrap rather than widen. `min-width: 190px` from pinch.css would
   otherwise re-inflate the first column past its share. */
.works-table td, .works-table th { white-space: normal; }
.works-table td.link-name, .works-table th.link-name { min-width: 0; }
.works-table td:nth-child(2) { text-align: right; }

/* Street names arrive from the register in capitals, which is how the highway
   authority filed them. Left as they are -- lower-casing would quietly edit a
   public record, and the capitals are a useful signal that this text is
   verbatim rather than ours. */
.works-table .link-name { word-break: break-word; }

@media (max-width: 720px) {
  /* Below this the six columns cannot share the width usefully, so the table
     goes back to scrolling inside its own box rather than crushing every
     column to one word per line. */
  .works-table { width: max-content; table-layout: auto; min-width: 100%; }
  .works-table th, .works-table td { white-space: nowrap; }
  .works-table td.link-name { white-space: normal; min-width: 150px; }
}