/* Small tweaks on top of Pico.css */
nav ul:last-child {
  flex-wrap: wrap;
}
table small {
  color: var(--pico-muted-color);
}
form {
  margin-bottom: 0;
}

/* --- Buttons: content-width & consistent (Pico makes form buttons full-width) --- */
button,
[type="submit"],
[type="button"],
a[role="button"] {
  width: auto;
  display: inline-block;
  margin-bottom: 0;
}

/* Inline action groups (Edit / Plan / Delete in table rows, Save / Cancel in forms) */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.actions form {
  display: contents;        /* let the form's button sit in the flex row */
}
.actions a[role="button"],
.actions button {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  margin: 0;
}

/* Wide tables scroll horizontally instead of breaking the layout on phones */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Mobile (e.g. 720x1600 ≈ 360 CSS px wide) --- */
@media (max-width: 640px) {
  body { font-size: 95%; }
  main.container, nav.container { padding-inline: 0.6rem; }
  /* full-width primary submit buttons read better on a narrow screen */
  form > button[type="submit"]:only-of-type { width: 100%; }
  /* any stray wide table scrolls rather than overflowing */
  main table:not(.heatmap):not(.variants) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Weekly travel-time heatmap */
table.heatmap {
  border-collapse: collapse;
  font-size: 0.72rem;
  width: auto;
}
table.heatmap th,
table.heatmap td {
  border: 1px solid var(--pico-muted-border-color);
  text-align: center;
  padding: 2px 4px;
  min-width: 1.7rem;
  color: #222;
}
table.heatmap thead th,
table.heatmap tbody th {
  background: var(--pico-card-background-color);
  color: var(--pico-color);
}
table.heatmap td.empty {
  background: repeating-linear-gradient(45deg, #eee, #eee 3px, #f6f6f6 3px, #f6f6f6 6px);
}

/* per-cell data source: a small coloured corner triangle */
table.heatmap td {
  position: relative;
}
table.heatmap td.src-live::after,
table.heatmap td.src-historical::after,
table.heatmap td.src-modelled::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 5px 5px 0;
}
table.heatmap td.src-live::after        { border-color: transparent hsl(140,70%,30%) transparent transparent; }
table.heatmap td.src-historical::after  { border-color: transparent hsl(210,15%,45%) transparent transparent; }
table.heatmap td.src-modelled::after    { border-color: transparent hsl(40,85%,45%) transparent transparent; }

/* the current day & hour */
table.heatmap td.now {
  outline: 3px solid #111;
  outline-offset: -3px;
  font-weight: 700;
}
table.heatmap th.nowrow, table.heatmap th.nowcol {
  background: #111;
  color: #fff;
}

/* source legend swatches */
.legend-src {
  display: inline-block;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 0.7rem;
  color: #fff;
}
.legend-src.src-live       { background: hsl(140,70%,30%); }
.legend-src.src-historical { background: hsl(210,15%,45%); }
.legend-src.src-modelled   { background: hsl(40,85%,45%); }
.legend-src.now { background: #111; }

/* top-3 variants inline table */
a.tiny { padding: 2px 8px; font-size: 0.7rem; }
table.variants { width: auto; margin: 0.3rem 0 0; font-size: 0.8rem; }
table.variants td { padding: 2px 8px; border: none; }
.legend {
  display: inline-block;
  width: 1.2rem;
  border: 1px solid var(--pico-muted-border-color);
  vertical-align: middle;
}

/* live vs modeled badges + gradient trend colors */
.tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
}
.tag.live {
  background: hsl(140, 60%, 88%);
  color: hsl(140, 70%, 25%);
}
.tag.modeled {
  background: hsl(40, 70%, 88%);
  color: hsl(35, 80%, 30%);
}
td.worse, small.worse { color: hsl(0, 70%, 42%); }
td.better, small.better { color: hsl(140, 60%, 32%); }
td.flat { color: var(--pico-muted-color); }