/* The station board and trains-between pages.
 *
 * Only what premium.css does not already provide. The first cut of these
 * pages used eight class names that do not exist in it -- .h1, .lede, .table,
 * .muted and the rest -- so the table rendered with no padding at all and sat
 * flush against the edge of its card. */

.places {
  padding-block: clamp(1.5rem, 4vw, 2.75rem);
}

.crumbs {
  font-size: .875rem;
  color: var(--slate-500);
  margin-bottom: .75rem;
}
.crumbs a { color: var(--blue-600); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin-inline: .35rem; color: var(--slate-400); }

.places .h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.places .code {
  font-size: .5em;
  font-weight: 600;
  color: var(--blue-600);
  background: var(--blue-50);
  border-radius: var(--r-pill);
  padding: .3em .7em;
  vertical-align: middle;
  margin-left: .5rem;
}
.places .lede {
  color: var(--slate-600);
  max-width: 62ch;
  margin: 0 0 1.25rem;
}

/* The card holds the table, so its own padding has to be small enough that
   the table can keep its own and still line up with the heading above. */
.places .card { padding: .5rem; overflow: hidden; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.table th,
.table td {
  padding: .8rem .9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--slate-200);
}
.table th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate-500);
  font-weight: 700;
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--blue-50); }
/* Times and platform numbers stay on one line. Scoped to the board pages:
   unscoped, it forced the first column of any other table -- the data
   deletion page's, whose cells are sentences -- onto a single line and
   squeezed every other column off the edge of the card. */
.places .table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

.muted { color: var(--slate-500); }
.small { font-size: .85rem; }
.places .muted.small { margin-top: 1rem; max-width: 62ch; }

/* Delay is never signalled by colour alone -- the word carries it, so it
   still reads in sunlight and to a colour-blind reader. */
.chip--ok,
.chip--late {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: var(--r-pill);
  padding: .25rem .6rem;
}
.chip--ok { color: #0F7B3D; background: #E6F6EC; }
.chip--late { color: #9A3412; background: #FFF1E3; }

@media (max-width: 560px) {
  .table th, .table td { padding: .65rem .55rem; }
  .table { font-size: .9rem; }
}

/* The "open in the app" bar. Android only, and only on the pages the app has
   a screen for. */
.openapp {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem clamp(1rem, 4vw, 1.5rem);
  background: var(--blue-50);
  border-bottom: 1px solid var(--blue-100);
}
.openapp__mark { border-radius: 9px; flex: none; }
.openapp__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.openapp__text strong { font-size: .95rem; color: var(--ink); }
.openapp__text span {
  font-size: .78rem; color: var(--slate-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.openapp__go {
  margin-left: auto; flex: none;
  background: var(--blue-600); color: var(--white);
  font-weight: 700; font-size: .85rem; text-decoration: none;
  border-radius: var(--r-pill); padding: .5rem 1.1rem;
}

/* "What is deleted, what is kept, and for how long" on /delete-data.
 *
 * Stacked cards, not a table. Every cell there is a sentence, so a
 * three-column table ran the first column out to the width of its longest
 * line and pushed the other two off the edge of the card. Cards cannot
 * overflow, and they read the same way on a phone. */
.keep { display: grid; gap: .85rem; margin: 1rem 0 1.5rem; }
.keep__item {
  border: 1px solid var(--slate-200);
  border-left-width: 4px;
  border-radius: var(--r-md);
  background: var(--white);
  padding: 1rem 1.15rem 1.1rem;
}
.keep__item--gone  { border-left-color: #16A34A; }
.keep__item--short { border-left-color: var(--amber-500); }
.keep__item--kept  { border-left-color: var(--blue-500); }

/* The label says it in words, so it does not rely on the colour. */
.keep__tag {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--slate-600);
  background: var(--slate-100);
  border-radius: var(--r-pill);
  padding: .22rem .65rem;
  margin-bottom: .55rem;
}
.keep__what {
  font-size: 1.02rem; line-height: 1.4;
  margin: 0 0 .7rem; color: var(--ink);
}
.keep__item dl {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: .4rem 1rem;
  margin: 0;
  font-size: .95rem;
}
.keep__item dt { color: var(--slate-500); font-weight: 600; }
.keep__item dd { margin: 0; color: var(--slate-700); line-height: 1.6; }

@media (max-width: 560px) {
  .keep__item dl { grid-template-columns: 1fr; gap: .1rem; }
  .keep__item dd { margin-bottom: .5rem; }
}