/* =========================================================
   Tidings live utilities — weather, recycling and roadworks
   Designed to sit inside the Tidings front page rather than
   reproduce the standalone Crediton Now dashboard.
   ========================================================= */
.live-now {
  --green: var(--cyan);
  --amber: #e7a84b;
  --red: #ef6574;
  margin-top: 92px;
  padding-top: 30px;
  border-top: 1px solid var(--line-strong);
}

.live-now-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 42px;
  align-items: end;
  margin-bottom: 26px;
}
.live-now-kicker { display: flex; align-items: center; gap: 9px; }
.live-now-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(19,168,182,.10);
}
.live-now-heading h2 {
  margin: 10px 0 0;
  color: var(--pale);
  font-size: clamp(34px,4vw,56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.06em;
}
.live-now-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 5px;
  color: var(--muted-2);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.live-now-status button,
.live-roadworks-foot button {
  border: 0;
  background: transparent;
  color: var(--blush);
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.live-now-status button:hover,
.live-roadworks-foot button:hover { color: #fff; }
.live-now-status button i { font-size: 15px; }

.live-now-grid {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.live-panel {
  min-width: 0;
  min-height: 310px;
  padding: 24px 26px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.012);
}
.live-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
}
.live-panel-head .micro { color: var(--cyan); }
.live-source { color: var(--muted-2); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Weather */
.live-weather {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 95% -20%, rgba(19,168,182,.23), transparent 22rem),
    linear-gradient(145deg, rgba(6,92,116,.40), rgba(6,92,116,.12) 58%, rgba(207,41,144,.045));
}
.live-weather::after {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  right: -120px;
  bottom: -180px;
  border: 1px solid rgba(230,141,206,.13);
  border-radius: 50%;
  pointer-events: none;
}
.live-weather-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 64px minmax(0,1fr);
  gap: 18px;
  align-items: center;
  margin: 2px 0 28px;
}
.live-weather-temp {
  color: #fff;
  font-size: clamp(72px,7vw,104px);
  line-height: .82;
  font-weight: 500;
  letter-spacing: -.075em;
}
.live-weather-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  color: var(--blush);
}
.live-weather-icon-current { font-size: 58px; line-height: 1; }
.live-weather-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.live-weather-copy > strong { color: #fff; font-size: 22px; line-height: 1.05; letter-spacing: -.035em; }
.live-weather-copy > span { color: var(--muted); font-size: 11px; }
.live-weather-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; color: var(--text); font-size: 10px; }
.live-weather-meta span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.live-weather-meta i { color: var(--cyan); font-size: 15px; }
.live-weather-feels { color: var(--muted-2) !important; }
.live-weather-hours {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  border-top: 1px solid var(--line-strong);
}
.live-weather-hour {
  min-width: 0;
  padding: 14px 12px 2px;
  border-right: 1px solid var(--line);
}
.live-weather-hour:first-child { padding-left: 2px; }
.live-weather-hour:last-child { border-right: 0; padding-right: 0; }
.live-weather-hour-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 26px; }
.live-weather-hour-top > span { color: var(--muted); font-size: 9px; }
.live-weather-icon-hour { color: var(--cyan); font-size: 23px; line-height: 1; }
.live-weather-hour > strong { display: block; margin-top: 3px; color: var(--pale); font-size: 18px; letter-spacing: -.03em; }
.live-weather-hour-metrics { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px; color: var(--muted-2); font-size: 8px; }
.live-weather-hour-metrics span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.live-weather-hour-metrics i { color: var(--muted); font-size: 11px; }
.live-weather-hour-metrics small { font-size: 7px; }

/* Recycling */
.live-recycling { background: linear-gradient(145deg, rgba(207,41,144,.055), rgba(255,255,255,.008) 58%); }
.live-recycling-intro { display: flex; align-items: center; gap: 14px; margin: 22px 0 24px; }
.live-recycling-icon {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid rgba(230,141,206,.22);
  background: rgba(207,41,144,.09);
  color: var(--blush);
}
.live-recycling-icon i { font-size: 25px; }
.live-recycling-intro strong { display: block; color: var(--pale); font-size: 18px; letter-spacing: -.025em; }
.live-recycling-intro span { display: block; max-width: 420px; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.live-postcode-form label,
.live-address-picker label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.live-postcode-form > div { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.live-postcode-form input,
.live-address-picker select {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 1px solid var(--line-strong);
  outline: none;
  background: rgba(255,255,255,.025);
  color: var(--pale);
  padding: 0 14px;
  font: inherit;
}
.live-postcode-form input { text-transform: uppercase; font-size: 14px; }
.live-postcode-form input::placeholder { color: var(--muted-2); }
.live-postcode-form input:focus,
.live-address-picker select:focus { border-color: rgba(19,168,182,.65); background: rgba(19,168,182,.035); }
.live-postcode-form button,
.live-address-picker button {
  height: 48px;
  border: 0;
  background: var(--pink);
  color: #fff;
  padding: 0 19px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.live-postcode-form button:hover,
.live-address-picker button:hover { background: var(--blush); color: var(--page); }
.live-address-picker { margin-top: 18px; }
.live-address-picker select { appearance: auto; margin-bottom: 8px; }
.live-address-picker button { width: 100%; }
.live-address-picker button:disabled { opacity: .4; cursor: default; }
.live-address-picker > span { display: block; margin-top: 7px; color: var(--muted-2); font-size: 8px; }
.live-collection-list { margin-top: 18px; }
.live-bin-address {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 11px 0 13px; border-top: 1px solid var(--line);
}
.live-bin-address span { display: block; color: var(--muted-2); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.live-bin-address strong { display: block; max-width: 420px; margin-top: 4px; color: var(--pale); font-size: 10px; line-height: 1.4; }
.live-bin-address button { border: 0; background: transparent; color: var(--blush); padding: 6px 0; font-size: 9px; cursor: pointer; }
.live-collection {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.live-collection-icon {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--cyan); background: rgba(19,168,182,.045);
}
.live-collection-icon i { font-size: 15px; }
.live-collection-copy { min-width: 0; }
.live-collection-copy > span { display: block; color: var(--cyan); font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.live-collection-copy strong { display: block; margin-top: 3px; color: var(--pale); font-size: 10px; line-height: 1.35; }
.live-collection-copy small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 8px; }
.live-collection time { text-align: right; }
.live-collection time b { display: block; color: var(--pale); font-size: 10px; }
.live-collection time span { display: block; margin-top: 2px; color: var(--muted-2); font-size: 7px; }
.live-bin-source { margin-top: 8px; color: var(--muted-2); font-size: 7px; text-align: right; }

/* Shared utility states */
.live-loading,
.live-empty,
.live-notice,
.live-error { color: var(--muted); font-size: 11px; line-height: 1.6; }
.live-loading { padding: 22px 0; }
.live-empty { padding: 22px 2px; display: flex; flex-direction: column; gap: 4px; }
.live-empty strong { color: var(--pale); }
.live-notice,
.live-error { padding: 13px 14px; border: 1px solid rgba(230,141,206,.18); background: rgba(207,41,144,.055); }
.live-notice a { color: var(--blush); font-weight: 700; }

/* Roadworks */
.live-roadworks {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.008);
}
.live-roadworks-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 30px;
  align-items: end;
  padding: 23px 25px 19px;
  border-bottom: 1px solid var(--line);
}
.live-roadworks-head h3 { margin: 8px 0 0; color: var(--pale); font-size: 22px; font-weight: 600; letter-spacing: -.04em; }
.live-roadworks-actions { display: flex; align-items: center; gap: 15px; }
.live-roadworks-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.live-road-pill {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 0;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
}
button.live-road-pill { cursor: pointer; }
.live-road-pill b { color: var(--pale); font-size: 12px; }
.live-road-pill.is-active { border-color: rgba(19,168,182,.42); background: rgba(19,168,182,.08); color: var(--text); }
.live-road-pill.is-active b { color: var(--cyan); }
.live-road-pill.is-alert { border-color: rgba(239,101,116,.27); color: #dca3aa; }
.live-road-pill.is-alert b { color: var(--red); }
.live-road-view-toggle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); }
.live-road-view-toggle button {
  min-width: 54px; height: 32px; border: 0; background: transparent; color: var(--muted);
  padding: 0 12px; font-size: 9px; font-weight: 700; cursor: pointer;
}
.live-road-view-toggle button + button { border-left: 1px solid var(--line); }
.live-road-view-toggle button.is-active { background: var(--pink); color: #fff; }

.live-road-list-compact {
  display: block;
  padding: 0;
  background: transparent;
}
.live-road-row {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(230px, .58fr) 122px;
  gap: 22px;
  align-items: center;
  padding: 17px 22px;
  border: 0;
  border-bottom: 1px solid rgba(225,240,243,.095);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  transition: background .18s ease, padding-left .18s ease;
}
.live-road-row:last-child { border-bottom: 0; }
.live-road-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  bottom: 17px;
  width: 2px;
  background: var(--cyan);
  opacity: .65;
}
.live-road-row.road-signals::before,
.live-road-row.road-lane::before { background: var(--amber); }
.live-road-row.road-closure::before { background: var(--red); }
.live-road-row.is-map-link { cursor: pointer; }
.live-road-row.is-map-link:hover,
.live-road-row.is-map-link:focus-visible {
  background: rgba(255,255,255,.026);
  padding-left: 26px;
  outline: none;
}
.live-road-row.is-map-link:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(207,41,144,.42);
}
.live-road-index {
  align-self: start;
  padding-top: 3px;
  color: rgba(220,231,233,.30);
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .16em;
}
.live-road-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.live-road-name {
  min-width: 0;
  color: var(--pale);
  font-size: clamp(15px,1.15vw,18px);
  line-height: 1.18;
  letter-spacing: -.035em;
  font-weight: 700;
  text-wrap: pretty;
}
.live-road-meta {
  min-width: 0;
  color: var(--muted-2);
  font-size: 9px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.live-road-details {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  justify-items: start;
  gap: 8px;
}
.live-road-traffic {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgba(19,168,182,.19);
  background: rgba(19,168,182,.055);
  color: #83d6dc;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.road-signals .live-road-traffic,
.road-lane .live-road-traffic {
  border-color: rgba(231,168,75,.20);
  background: rgba(231,168,75,.055);
  color: #ddb878;
}
.road-closure .live-road-traffic {
  border-color: rgba(239,101,116,.20);
  background: rgba(239,101,116,.055);
  color: #e0a1a8;
}
.live-road-date {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
}
.live-road-map-cue,
.live-road-no-map {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--blush);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.live-road-map-cue b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(207,41,144,.30);
  color: var(--pink);
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.live-road-row.is-map-link:hover .live-road-map-cue,
.live-road-row.is-map-link:focus-visible .live-road-map-cue { color: #fff; }
.live-road-row.is-map-link:hover .live-road-map-cue b,
.live-road-row.is-map-link:focus-visible .live-road-map-cue b {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}
.live-road-no-map { color: var(--muted-2); font-weight: 650; }

@media (max-width: 1040px) {
  .live-road-row {
    grid-template-columns: 34px minmax(0,1fr) 200px 44px;
    gap: 16px;
  }
  .live-road-map-cue > span { display: none; }
}

@media (max-width: 760px) {
  .live-road-row {
    min-height: 0;
    grid-template-columns: 30px minmax(0,1fr) 36px;
    gap: 12px;
    padding: 16px 14px 16px 16px;
  }
  .live-road-row.is-map-link:hover,
  .live-road-row.is-map-link:focus-visible { padding-left: 16px; }
  .live-road-row::before {
    top: 15px;
    bottom: 15px;
  }
  .live-road-index { grid-column: 1; grid-row: 1 / 3; padding-top: 4px; }
  .live-road-main { grid-column: 2; grid-row: 1; }
  .live-road-details {
    grid-column: 2;
    grid-row: 2;
    margin-top: 4px;
    gap: 7px;
  }
  .live-road-map-cue,
  .live-road-no-map {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }
  .live-road-name { font-size: 15px; line-height: 1.2; }
  .live-road-meta { font-size: 8px; }
  .live-road-traffic { max-width: min(100%, 230px); font-size: 8px; }
  .live-road-date { font-size: 9px; white-space: normal; }
  .live-road-map-cue b { width: 32px; height: 32px; }
}

.live-roadworks-foot {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 25px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 8px;
}
.live-feed { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.live-feed i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(19,168,182,.08); }

/* Custom roadworks map — no Leaflet dependency. */
.live-roadworks-map-panel { padding: 16px 16px 0; }
.live-roadworks-map-wrap {
  position: relative;
  height: clamp(390px,43vw,560px);
  overflow: hidden;
  border: 0;
  background: #13222b;
}
.live-roadworks-map { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; outline: 0; }
.live-roadworks-map.is-dragging { cursor: grabbing; }
.cn-map-tiles,
.cn-map-lines,
.cn-map-markers { position: absolute; inset: 0; }
.cn-map-tiles { z-index: 1; overflow: hidden; background: #dfe8e4; }
.cn-map-tile { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none !important; border: 0; padding: 0; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.cn-map-lines { z-index: 2; overflow: visible; pointer-events: none; }
.cn-map-markers { z-index: 3; pointer-events: none; }
.cn-map-attribution { position: absolute; z-index: 4; right: 4px; bottom: 3px; padding: 2px 5px; background: rgba(255,255,255,.90); color: #66766f; font-size: 7px; line-height: 1.25; pointer-events: auto; }
.cn-map-attribution a { color: #42584f; text-decoration: none; }
.cn-map-line-casing,
.cn-map-line { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; vector-effect: non-scaling-stroke; }
.cn-map-line-casing { stroke: #fff; stroke-width: 10; opacity: .96; }
.cn-map-line-casing.is-selected { stroke-width: 14; }
.cn-map-line { stroke: #087e8e; stroke-width: 5; opacity: .92; }
.cn-map-line-signals,
.cn-map-line-lane { stroke: #c78328; }
.cn-map-line-closure { stroke: #d04d5c; }
.cn-map-line.is-shared { stroke-dasharray: 12 7; stroke-width: 6; }
.cn-map-line.is-selected { stroke-width: 8; opacity: 1; }
.cn-map-line-hit { fill: none; stroke: rgba(0,0,0,.001); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; cursor: pointer; vector-effect: non-scaling-stroke; }
.cn-map-line-hit:focus { outline: none; stroke: rgba(6,92,116,.08); }

.cn-road-marker {
  position: absolute;
  z-index: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #087e8e;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  font: 800 9px/1 var(--font);
}
.cn-road-marker i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.cn-road-marker-signals,
.cn-road-marker-lane { background: #c78328; }
.cn-road-marker-closure { background: #d04d5c; }
.cn-road-marker.is-multiple { width: 34px; height: 34px; border-radius: 8px; }
.cn-road-marker.is-shared { border-radius: 8px; }
.cn-road-marker.is-cluster { border-radius: 50%; }
.cn-road-marker:hover,
.cn-road-marker:focus-visible,
.cn-road-marker.is-selected { outline: 0; transform-origin: center; box-shadow: 0 0 0 4px rgba(255,255,255,.65), 0 5px 18px rgba(0,0,0,.25); }

.live-roadworks-map-tools {
  position: absolute;
  z-index: 8;
  left: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(25,39,48,.16);
  background: rgba(25,39,48,.96);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.live-roadworks-map-tools button {
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.11);
  background: transparent; color: #fff;
  font: 700 19px/1 Arial,sans-serif;
  cursor: pointer;
}
.live-roadworks-map-tools button:last-child { border-bottom: 0; font-size: 16px; }
.live-roadworks-map-tools button:hover { background: var(--pink); }

.live-roadworks-map-detail {
  position: absolute;
  z-index: 9;
  top: 12px; right: 12px; bottom: 12px;
  width: min(390px,calc(100% - 82px));
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
}
.live-roadworks-map-detail[hidden] { display: none; }
.cn-map-detail-card {
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(225,240,243,.20);
  background: rgba(25,39,48,.975);
  color: var(--text);
  box-shadow: 0 18px 55px rgba(0,0,0,.32);
  pointer-events: auto;
  backdrop-filter: blur(10px);
}
.cn-map-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 16px 13px; border-bottom: 1px solid var(--line); }
.cn-map-detail-head > div { min-width: 0; }
.cn-map-detail-head strong { display: block; color: #fff; font-size: 15px; line-height: 1.2; letter-spacing: -.025em; }
.cn-map-detail-head span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.cn-map-detail-close { flex: 0 0 auto; width: 29px; height: 29px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 500 20px/1 Arial,sans-serif; cursor: pointer; }
.cn-map-detail-close:hover { border-color: var(--blush); color: #fff; }
.cn-map-data-note { margin: 12px 13px 0; padding: 10px 11px; border: 1px solid rgba(231,168,75,.20); background: rgba(231,168,75,.07); color: #dcc49d; font-size: 8px; line-height: 1.5; }
.cn-map-work-list { min-height: 0; overflow: auto; padding: 4px 14px 12px; }
.cn-map-work { display: flex; flex-direction: column; gap: 5px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cn-map-work:last-child { border-bottom: 0; }
.cn-map-work-title { display: flex; gap: 9px; align-items: flex-start; }
.cn-map-work-title > i { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(19,168,182,.07); }
.cn-map-work-title > i.is-signals,
.cn-map-work-title > i.is-lane { background: var(--amber); }
.cn-map-work-title > i.is-closure { background: var(--red); }
.cn-map-work-title strong { display: block; color: #fff; font-size: 10px; line-height: 1.3; }
.cn-map-work-title span { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.cn-map-work small { color: var(--muted-2); font-size: 7px; line-height: 1.45; }
.cn-map-work-tag { align-self: flex-start; padding: 4px 6px; border: 1px solid var(--line); color: var(--muted); font-size: 7px; font-weight: 750; }
.cn-map-detail-action { margin: 0 13px 13px; height: 36px; border: 0; background: var(--pink); color: #fff; font: 700 9px/1 var(--font); cursor: pointer; }
.cn-map-detail-action:hover { background: var(--blush); color: var(--page); }

.live-map-key {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 2px;
  color: var(--muted-2);
  font-size: 7px;
}
.live-map-key span { display: inline-flex; align-items: center; gap: 5px; }
.key-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.key-disruption { background: var(--amber); }
.key-closure { background: var(--red); }
.key-group { width: 17px; height: 17px; display: grid; place-items: center; background: #c78328; color: #fff; border: 2px solid #fff; font-size: 6px; font-style: normal; font-weight: 800; }
.live-map-source { margin-left: auto; }

@media (max-width: 1050px) {
  .live-now-grid { grid-template-columns: 1fr; }
  .live-panel { min-height: 0; }
  .live-roadworks-head { grid-template-columns: 1fr; align-items: start; }
  .live-roadworks-actions { justify-content: space-between; }
  .live-roadworks-summary { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .live-now { width: min(100% - 28px,1420px); margin-top: 70px; padding-top: 24px; }
  .live-now-heading { grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
  .live-now-status { justify-content: space-between; padding-bottom: 0; }
  .live-panel { padding: 20px 18px 22px; }
  .live-panel-head { margin-bottom: 18px; }

  .live-weather-main { grid-template-columns: auto 48px minmax(0,1fr); gap: 10px; margin-bottom: 22px; }
  .live-weather-temp { font-size: 70px; }
  .live-weather-icon { width: 46px; height: 46px; }
  .live-weather-icon-current { font-size: 43px; }
  .live-weather-copy > strong { font-size: 18px; }
  .live-weather-meta { gap: 5px 8px; font-size: 9px; }
  .live-weather-hours {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(92px,1fr);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .live-weather-hours::-webkit-scrollbar { display: none; }
  .live-weather-hour { scroll-snap-align: start; }

  .live-roadworks-head { padding: 20px 16px 15px; gap: 17px; }
  .live-roadworks-head h3 { font-size: 18px; }
  .live-roadworks-actions { align-items: stretch; flex-direction: column; gap: 10px; }
  .live-roadworks-summary { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .live-roadworks-summary::-webkit-scrollbar { display: none; }
  .live-road-pill { flex: 0 0 auto; }
  .live-road-view-toggle { align-self: flex-start; }

  .live-road-list-compact { grid-template-columns: 1fr; gap: 7px; padding: 7px; }
  .live-road-row { min-height: 142px; padding: 16px 15px 14px 17px; }
  .live-road-card-top { gap: 10px; margin-bottom: 14px; }
  .live-road-traffic { max-width: 62%; }
  .live-road-name { font-size: 15px; }
  .live-road-meta { font-size: 10px; }
  .live-road-card-foot { padding-top: 14px; }
  .live-roadworks-foot { min-height: 50px; padding: 0 16px; }

  .live-roadworks-map-panel { padding: 10px 10px 0; }
  .live-roadworks-map-wrap { height: 480px; }
  .live-roadworks-map-detail { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; max-height: 60%; }
  .cn-map-detail-card { max-height: 100%; }
  .live-map-key { flex-wrap: wrap; gap: 7px 12px; padding: 9px 1px 10px; }
  .live-map-source { flex-basis: 100%; margin-left: 0; }
}

@media (max-width: 470px) {
  .live-weather-main { grid-template-columns: auto 40px minmax(0,1fr); gap: 8px; }
  .live-weather-temp { font-size: 62px; }
  .live-weather-icon { width: 38px; height: 38px; }
  .live-weather-icon-current { font-size: 37px; }
  .live-weather-copy > strong { font-size: 16px; }
  .live-weather-meta span:last-child { display: none; }
  .live-recycling-intro { align-items: flex-start; }
  .live-postcode-form > div { grid-template-columns: 1fr; gap: 7px; }
  .live-postcode-form input,
  .live-postcode-form button { width: 100%; }
  .live-collection { grid-template-columns: 28px minmax(0,1fr); }
  .live-collection time { grid-column: 2; text-align: left; display: flex; gap: 5px; }
  .live-roadworks-map-wrap { height: 430px; }
}


/* =========================================================
   2026-09-09 readability + grayscale map palette pass
   ========================================================= */

/* Remove the decorative weather circle. */
.live-weather::after { display: none !important; }

/* Keep all live information comfortably readable. */
.live-panel-head .micro { font-size: 11px; }
.live-source { font-size: 11px; line-height: 1.35; }

/* Weather */
.live-weather-copy > strong { font-size: 24px; line-height: 1.1; }
.live-weather-copy > span { font-size: 13px; line-height: 1.45; }
.live-weather-meta { gap: 8px 14px; font-size: 12px; line-height: 1.4; }
.live-weather-meta i { font-size: 17px; }
.live-weather-hour { padding-top: 15px; padding-bottom: 6px; }
.live-weather-hour-top > span { font-size: 11px; font-weight: 700; }
.live-weather-icon-hour { font-size: 25px; }
.live-weather-hour > strong { margin-top: 4px; font-size: 20px; line-height: 1.1; }
.live-weather-hour-metrics { margin-top: 7px; gap: 5px 9px; font-size: 10px; line-height: 1.35; color: var(--muted); }
.live-weather-hour-metrics i { font-size: 13px; }
.live-weather-hour-metrics small { font-size: 9px; }

/* Recycling */
.live-recycling-intro strong { font-size: 20px; }
.live-recycling-intro span { max-width: 480px; font-size: 13px; line-height: 1.55; }
.live-postcode-form label,
.live-address-picker label { font-size: 11px; letter-spacing: .13em; }
.live-postcode-form input,
.live-address-picker select { font-size: 14px; }
.live-postcode-form button,
.live-address-picker button { font-size: 12px; }
.live-address-picker > span { font-size: 11px; line-height: 1.45; }
.live-bin-address span { font-size: 10px; font-weight: 750; }
.live-bin-address strong { max-width: 480px; font-size: 13px; line-height: 1.45; }
.live-bin-address button { font-size: 11px; font-weight: 750; }
.live-collection-copy > span { font-size: 10px; }
.live-collection-copy strong { font-size: 13px; line-height: 1.4; }
.live-collection-copy small { font-size: 10px; line-height: 1.4; }
.live-collection time b { font-size: 12px; }
.live-collection time span { font-size: 10px; }
.live-bin-source { font-size: 10px; line-height: 1.4; }
.live-loading,
.live-empty,
.live-notice,
.live-error { font-size: 12px; }

/* Roadworks list */
.live-road-pill { font-size: 11px; }
.live-road-pill b { font-size: 14px; }
.live-road-view-toggle button { font-size: 11px; font-weight: 750; }
.live-road-traffic { font-size: 10px; line-height: 1.3; }
.live-roadworks-foot { font-size: 10px; line-height: 1.4; }
.live-roadworks-foot button { font-size: 11px; }

/* Grayscale base map with Tidings colours used only for live overlays. */
.live-roadworks-map-wrap,
.cn-map-tiles { background: #d7dcdd; }
.cn-map-tile {
  filter: grayscale(1) saturate(0) contrast(.90) brightness(.86);
}
.cn-map-line-casing { stroke: rgba(238,245,246,.95); }
.cn-map-line { stroke: var(--cyan); opacity: .98; }
.cn-map-line-signals,
.cn-map-line-lane { stroke: var(--pink); }
.cn-map-line-closure { stroke: var(--blush); }
.cn-map-line-hit:focus { stroke: rgba(207,41,144,.12); }

.cn-road-marker {
  border-color: var(--pale);
  background: var(--cyan);
  box-shadow: 0 4px 13px rgba(25,39,48,.32);
}
.cn-road-marker-signals,
.cn-road-marker-lane { background: var(--pink); }
.cn-road-marker-closure { background: var(--blush); color: var(--page); }
.cn-road-marker:hover,
.cn-road-marker:focus-visible,
.cn-road-marker.is-selected {
  box-shadow: 0 0 0 4px rgba(230,141,206,.38), 0 6px 20px rgba(25,39,48,.35);
}

.live-roadworks-map-tools {
  border-color: var(--line-strong);
  background: rgba(25,39,48,.96);
}
.live-roadworks-map-tools button:hover { background: var(--pink); }
.cn-map-attribution {
  padding: 3px 6px;
  background: rgba(25,39,48,.88);
  color: var(--muted);
  font-size: 9px;
}
.cn-map-attribution a { color: var(--pale); }

/* Map detail panel readability + palette. */
.cn-map-detail-head strong { font-size: 17px; line-height: 1.25; }
.cn-map-detail-head span { font-size: 10px; }
.cn-map-data-note {
  border-color: rgba(207,41,144,.28);
  background: rgba(207,41,144,.08);
  color: var(--text);
  font-size: 11px;
  line-height: 1.55;
}
.cn-map-work-title > i { width: 8px; height: 8px; margin-top: 5px; background: var(--cyan); }
.cn-map-work-title > i.is-signals,
.cn-map-work-title > i.is-lane { background: var(--pink); }
.cn-map-work-title > i.is-closure { background: var(--blush); }
.cn-map-work-title strong { font-size: 13px; line-height: 1.35; }
.cn-map-work-title span { font-size: 11px; line-height: 1.45; }
.cn-map-work small { font-size: 10px; line-height: 1.5; }
.cn-map-work-tag { font-size: 9px; }
.cn-map-detail-action { height: 38px; font-size: 11px; }
.live-map-key { font-size: 10px; line-height: 1.4; }
.key-dot { width: 8px; height: 8px; }
.key-disruption { background: var(--pink); }
.key-closure { background: var(--blush); }
.key-group {
  width: 20px; height: 20px;
  background: var(--pink);
  border-color: var(--pale);
  font-size: 8px;
}

@media (max-width: 760px) {
  .live-weather-copy > strong { font-size: 20px; }
  .live-weather-copy > span { font-size: 12px; }
  .live-weather-meta { font-size: 11px; }
  .live-weather-hours { grid-auto-columns: minmax(108px,1fr); }
  .live-roadworks-head h3 { font-size: 20px; }
  .live-road-name { font-size: 13px; }
  .live-road-traffic { font-size: 10px; }
}

/* =========================================================
   Leaflet roadworks map
   ========================================================= */
.live-roadworks-map {
  z-index: 1;
  cursor: grab;
  background: #13222b;
}
.live-roadworks-map.leaflet-dragging { cursor: grabbing; }
.live-roadworks-map .leaflet-tile { filter: none !important; }
.live-roadworks-map .leaflet-pane,
.live-roadworks-map .leaflet-control-container { font-family: var(--font); }

/* Keep the site's map tools/details above Leaflet's panes and controls. */
.live-roadworks-map-tools { z-index: 1000; }
.live-roadworks-map-detail { z-index: 1100; }

.live-roadworks-map .leaflet-control-attribution {
  margin: 0 0 8px 8px;
  padding: 5px 7px;
  border: 0;
  background: rgba(5,12,16,.86);
  color: rgba(238,245,246,.78);
  font-size: 9.5px;
  line-height: 1.25;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}
.live-roadworks-map .leaflet-control-attribution a {
  color: #fff;
  text-decoration: none;
  font-weight: 650;
}
.live-roadworks-map .leaflet-control-attribution a:hover {
  color: var(--blush);
}

/* Leaflet div-icon markers. */
.cn-leaflet-road-marker {
  display: grid !important;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid rgba(238,245,246,.96);
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(7,16,21,.92),
    0 4px 14px rgba(0,0,0,.34);
  font: 800 10px/1 var(--font);
  cursor: pointer;
}
.cn-leaflet-road-marker.is-signals,
.cn-leaflet-road-marker.is-lane { background: var(--pink); }
.cn-leaflet-road-marker.is-closure { background: var(--blush); color: var(--page); }
.cn-leaflet-road-marker.is-multiple,
.cn-leaflet-road-marker.is-shared { border-radius: 8px; }
.cn-leaflet-road-marker.is-selected {
  box-shadow:
    0 0 0 3px rgba(7,16,21,.96),
    0 0 0 6px rgba(238,245,246,.76),
    0 6px 20px rgba(0,0,0,.42);
}
.cn-leaflet-road-marker i {
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 50%;
  background: currentColor;
}
.cn-leaflet-road-marker b { font-size: 11px; line-height: 1; }

.cn-leaflet-road-cluster {
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(7,16,21,.92),
    0 5px 16px rgba(0,0,0,.36);
}
.cn-leaflet-road-cluster b { font-size: 12px; }

/* Remove MarkerCluster's default coloured bubble artwork because our
   divIcon carries the Tidings visual treatment. */
.live-roadworks-map .marker-cluster,
.live-roadworks-map .marker-cluster div {
  background: transparent;
}

/* Keyboard focus remains obvious on custom Leaflet markers. */
.live-roadworks-map .leaflet-marker-icon:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* =========================================================
   2026-09-09 live-panel responsive refinement
   - balances desktop weather when recycling grows
   - shows all five forecast hours on mobile
   - moves mobile map details below the map with real scrolling
   ========================================================= */

/* On the two-column desktop layout the recycling panel can become much
   taller after an address is chosen. Keep the weather forecast anchored
   to the bottom so the extra height is used deliberately rather than
   appearing as dead space below the hourly strip. */
@media (min-width: 1051px) {
  .live-weather {
    display: flex;
    flex-direction: column;
  }

  .live-weather .live-panel-head {
    flex: 0 0 auto;
  }

  .live-weather-main {
    flex: 0 0 auto;
  }

  .live-weather-hours {
    margin-top: auto;
  }
}

@media (max-width: 760px) {
  /* Keep the five-hour forecast on desktop, but make mobile deliberately
     concise: show only the next three hours in one readable strip. */
  .live-weather-hours {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    overscroll-behavior: auto;
    scroll-snap-type: none;
  }

  .live-weather-hour {
    min-width: 0;
    padding: 14px 10px 12px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    scroll-snap-align: none;
  }

  .live-weather-hour:first-child {
    padding-left: 10px;
  }

  .live-weather-hour:nth-child(3) {
    border-right: 0;
    padding-right: 10px;
  }

  .live-weather-hour:nth-child(n+4) {
    display: none;
  }

  .live-weather-hour-top {
    min-height: 28px;
  }

  .live-weather-hour-metrics {
    flex-wrap: wrap;
    gap: 5px 8px;
  }

  /* Mobile map: the map remains a useful, unobstructed map. Details become
     a separate panel directly underneath it instead of covering 60% of the
     map surface. */
  .live-roadworks-map-wrap {
    height: auto;
    overflow: visible;
    background: transparent;
  }

  .live-roadworks-map {
    position: relative;
    inset: auto;
    width: 100%;
    height: 370px;
    min-height: 370px;
    overflow: hidden;
    border: 0;
  }

  .live-roadworks-map-detail {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-height: none;
    display: block;
    margin: 0;
    pointer-events: auto;
  }

  .live-roadworks-map-detail[hidden] {
    display: none;
  }

  .cn-map-detail-card {
    width: 100%;
    max-height: min(56vh, 500px);
    border-top: 1px solid var(--line-strong);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .cn-map-detail-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(25,39,48,.995);
  }

  .cn-map-work-list {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--pink) rgba(255,255,255,.08);
  }

  .cn-map-work-list::-webkit-scrollbar {
    width: 7px;
  }

  .cn-map-work-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.06);
  }

  .cn-map-work-list::-webkit-scrollbar-thumb {
    background: var(--pink);
  }

  .cn-map-work {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .cn-map-detail-action {
    flex: 0 0 auto;
    margin-bottom: 14px;
  }

  /* Keep controls on the map itself now that the details are in normal flow. */
  .live-roadworks-map-tools {
    top: 12px;
    left: 12px;
  }
}

@media (max-width: 470px) {
  .live-roadworks-map {
    height: 340px;
    min-height: 340px;
  }

  .cn-map-detail-card {
    max-height: min(60vh, 470px);
  }
}

/* =========================================================
   Sport section — Crediton United + Crediton RFC
   ========================================================= */
.sports-section {
  margin-top: 38px;
}
.sports-section-heading {
  margin-bottom: 18px;
}
.sports-section-heading p:last-child {
  max-width: 760px;
}
.live-sport {
  border: 1px solid var(--line);
  background: rgba(25,39,48,.72);
}
.live-sport-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 23px 28px 18px;
  border-bottom: 1px solid var(--line);
}
.live-sport-head .micro { margin: 0 0 7px; }
.live-sport-head h3 {
  margin: 0;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.live-sport-updated {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.live-sport-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.live-sport-grid > .live-loading,
.live-sport-grid > .live-notice {
  grid-column: 1 / -1;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.live-sport-card {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
}
.live-sport-card + .live-sport-card { border-left: 1px solid var(--line); }
.live-sport-media {
  position: relative;
  height: 180px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.live-sport-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.9) contrast(.95) brightness(.78);
}
.live-sport-media-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25,39,48,.15), rgba(25,39,48,.25) 35%, rgba(25,39,48,.92));
}
.live-sport-media-tag {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}
.live-sport-media-tag span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.88);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.live-sport-media-tag b {
  color: rgba(255,255,255,.92);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  letter-spacing: -.04em;
}
.live-sport-football .live-sport-media-tag span { color: var(--cyan); }
.live-sport-rugby .live-sport-media-tag span { color: var(--pink); }
.live-sport-card-inner {
  padding: 22px 28px 20px;
}
.live-sport-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}
.live-sport-card-head > div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  min-width: 0;
}
.live-sport-code {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  background: rgba(0,0,0,.12);
}
.live-sport-football .live-sport-code { color: var(--cyan); border-color: rgba(19,168,182,.42); }
.live-sport-rugby .live-sport-code { color: var(--pink); border-color: rgba(207,41,144,.42); }
.live-sport-card-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  line-height: 1.15;
}
.live-sport-card-head small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.live-sport-kind {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .11em;
}
.live-sport-standing {
  display: grid;
  grid-template-columns: minmax(120px,.7fr) 1.5fr;
  gap: 24px;
  align-items: end;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.live-sport-position b {
  display: block;
  font-size: clamp(42px, 4vw, 66px);
  line-height: .9;
  letter-spacing: -.055em;
  font-weight: 500;
}
.live-sport-position span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.live-sport-football .live-sport-position b {
  color: var(--cyan);
}
.live-sport-rugby .live-sport-position b {
  font-size: clamp(42px, 4vw, 66px);
  color: var(--pink);
}
.live-sport-stats {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  border-left: 1px solid var(--line);
}
.live-sport-stats span,
.live-sport-rugby-meta span {
  min-width: 0;
  padding: 4px 8px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.live-sport-stats span:last-child { border-right: 0; }
.live-sport-stats small,
.live-sport-rugby-meta small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.live-sport-stats b,
.live-sport-rugby-meta b {
  font-size: 17px;
  line-height: 1;
}
.live-sport-rugby-meta {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}
.live-sport-rugby-meta span {
  min-width: 110px;
  border-left: 1px solid var(--line);
  border-right: 0;
}
.live-sport-fixtures {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin-top: 17px;
}
.live-sport-fixtures > div {
  min-width: 0;
  padding-right: 18px;
}
.live-sport-fixtures > div + div {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.live-sport-fixtures > div > span:first-child {
  display: block;
  margin-bottom: 5px;
  color: var(--cyan);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.live-sport-rugby .live-sport-fixtures > div > span:first-child { color: var(--pink); }
.live-sport-fixtures strong {
  display: block;
  font-size: 14px;
  line-height: 1.28;
}
.live-sport-fixtures time {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.live-sport-result {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 7px;
  min-width: 0;
}
.live-sport-result strong { display: inline; font-size: 15px; }
.live-sport-result > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 13px;
}
.live-sport-form {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 9px;
  font-weight: 800;
  border: 1px solid var(--line-strong);
}
.live-sport-form.is-w { color: var(--cyan); border-color: rgba(19,168,182,.55); }
.live-sport-form.is-d { color: #e8b64b; border-color: rgba(232,182,75,.55); }
.live-sport-form.is-l { color: var(--blush); border-color: rgba(230,141,206,.55); }
.live-sport-source {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  min-height: 16px;
}
.live-sport-source a {
  color: var(--muted);
  font-size: 10px;
  text-decoration: none;
}
.live-sport-source a:hover { color: var(--pink); }

@media (max-width: 1050px) {
  .live-sport-grid { grid-template-columns: 1fr; }
  .live-sport-card + .live-sport-card {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .sports-section {
    margin-top: 28px;
  }
  .live-sport-head {
    align-items: flex-start;
    padding: 23px 18px 17px;
  }
  .live-sport-updated { margin-top: 4px; font-size: 10px; }
  .live-sport-media { height: 150px; }
  .live-sport-media-tag {
    left: 16px;
    right: 16px;
    bottom: 14px;
  }
  .live-sport-media-tag b { font-size: 28px; }
  .live-sport-card-inner { padding: 20px 18px 17px; }
  .live-sport-card-head { margin-bottom: 20px; }
  .live-sport-card-head strong { font-size: 17px; }
  .live-sport-card-head small { font-size: 11px; }
  .live-sport-kind { display: none; }
  .live-sport-standing {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .live-sport-position b { font-size: 50px; }
  .live-sport-rugby .live-sport-position b { font-size: 50px; }
  .live-sport-stats {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 13px;
  }
  .live-sport-stats span { padding: 2px 5px; }
  .live-sport-stats small { font-size: 8px; }
  .live-sport-stats b { font-size: 15px; }
  .live-sport-rugby-meta {
    justify-content: flex-start;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .live-sport-rugby-meta span {
    padding-left: 0;
    text-align: left;
    border-left: 0;
  }
  .live-sport-fixtures { grid-template-columns: 1fr; }
  .live-sport-fixtures > div { padding: 0 0 13px; }
  .live-sport-fixtures > div + div {
    padding: 13px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .live-sport-fixtures strong { font-size: 14px; }
  .live-sport-source { justify-content: flex-start; }
}

/* =========================================================
   2026-09-09 desktop weather/recycling balance
   When a saved recycling address makes the right panel taller, use the
   extra weather-panel height for genuinely useful "today" information
   instead of leaving a large empty band.
   ========================================================= */

.live-weather-today {
  display: none;
}

@media (min-width: 1051px) {
  .live-now-grid.has-recycling-results .live-weather-hours {
    margin-top: 0;
  }

  .live-now-grid.has-recycling-results .live-weather-today {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 1 1 auto;
    min-height: 106px;
    margin: 4px 0 18px;
    border-top: 1px solid rgba(255,255,255,.11);
    border-bottom: 1px solid rgba(255,255,255,.08);
    align-items: stretch;
  }

  .live-weather-today-stat {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 18px;
    border-right: 1px solid rgba(255,255,255,.08);
  }

  .live-weather-today-stat:first-child {
    padding-left: 2px;
  }

  .live-weather-today-stat:last-child {
    border-right: 0;
    padding-right: 2px;
  }

  .live-weather-today-stat > i {
    flex: 0 0 auto;
    color: var(--blush);
    font-size: 25px;
    line-height: 1;
  }

  .live-weather-today-stat > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .live-weather-today-stat span {
    color: var(--cyan);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .live-weather-today-stat strong {
    color: var(--pale);
    font-size: clamp(18px, 1.45vw, 24px);
    line-height: 1;
    letter-spacing: -.035em;
    white-space: nowrap;
  }

  .live-weather-today-stat small {
    color: var(--muted-2);
    font-size: 10px;
    line-height: 1.25;
  }
}

@media (max-width: 1050px) {
  .live-weather-today {
    display: none !important;
  }
}


/* Roadworks now has its own editorial section below Latest. */
.roadworks-section {
  margin-top: 92px;
}
.roadworks-section-heading {
  margin-bottom: 20px;
}
.roadworks-section-heading > p {
  max-width: 560px;
}
.roadworks-section .live-roadworks {
  margin-top: 0;
}
@media (max-width: 760px) {
  .roadworks-section {
    width: min(100% - 28px, 1420px);
    margin-top: 64px;
  }
  .roadworks-section-heading {
    margin-bottom: 16px;
  }
}


/* =========================================================
   2026-09-22 — Tidings Mapbox dark-style integration polish
   Keeps the basemap edge-to-edge and lifts controls/details above it.
   ========================================================= */
.live-roadworks-map-wrap {
  border: 0;
  background: #13222b;
  box-shadow: none;
}

.live-roadworks-map-tools {
  border: 1px solid rgba(238,245,246,.32);
  background: rgba(5,12,16,.90);
  box-shadow: 0 8px 24px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
}
.live-roadworks-map-tools button {
  width: 40px;
  height: 40px;
  border-bottom-color: rgba(238,245,246,.16);
  color: var(--pale);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.live-roadworks-map-tools button:hover,
.live-roadworks-map-tools button:focus-visible {
  background: var(--pink);
  color: #fff;
  outline: 0;
}

.cn-map-detail-card {
  border: 1px solid rgba(238,245,246,.27);
  border-top: 3px solid var(--pink);
  background: rgba(6,14,19,.96);
  box-shadow: 0 18px 52px rgba(0,0,0,.50);
  backdrop-filter: blur(12px);
}
.cn-map-detail-head {
  background: rgba(6,14,19,.98);
  border-bottom-color: rgba(238,245,246,.13);
}
.cn-map-detail-head strong { color: #fff; }
.cn-map-detail-head span { color: #aebfc4; }
.cn-map-detail-close {
  border-color: rgba(238,245,246,.22);
  color: #c7d4d7;
  background: rgba(255,255,255,.025);
}
.cn-map-detail-close:hover,
.cn-map-detail-close:focus-visible {
  border-color: var(--blush);
  background: rgba(207,41,144,.12);
  color: #fff;
  outline: 0;
}
.cn-map-work { border-bottom-color: rgba(238,245,246,.11); }
.cn-map-work-title span,
.cn-map-work small { color: #98abb1; }

.live-roadworks-map .leaflet-control-attribution {
  margin: 0 0 8px 8px;
  padding: 5px 7px;
  border: 0;
  background: rgba(5,12,16,.86);
  color: rgba(238,245,246,.78);
  font-size: 9.5px;
  line-height: 1.25;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}
.live-roadworks-map .leaflet-control-attribution a {
  color: #fff;
  font-weight: 650;
  text-decoration: none;
}
.live-roadworks-map .leaflet-control-attribution a:hover { color: var(--blush); }

.cn-leaflet-road-marker {
  border-width: 2px;
  border-color: rgba(238,245,246,.96);
  box-shadow: 0 0 0 2px rgba(7,16,21,.92), 0 4px 14px rgba(0,0,0,.34);
}
.cn-leaflet-road-marker.is-selected {
  box-shadow: 0 0 0 3px rgba(7,16,21,.96), 0 0 0 6px rgba(238,245,246,.76), 0 6px 20px rgba(0,0,0,.42);
}
.cn-leaflet-road-cluster {
  box-shadow: 0 0 0 2px rgba(7,16,21,.92), 0 5px 16px rgba(0,0,0,.36);
}

@media (max-width: 760px) {
  .cn-map-detail-card {
    border-top: 2px solid var(--pink);
    border-left: 0;
    border-right: 0;
  }
  .live-roadworks-map .leaflet-control-attribution {
    margin: 0 0 6px 6px;
    padding: 4px 6px;
    font-size: 8.5px;
  }
}


/* 2026-09-22 — map frame + attribution follow-up */
.roadworks-section .live-roadworks {
  border-top: 1px solid var(--line);
}

.live-roadworks-map .leaflet-control-attribution {
  background: rgba(5,12,16,.92) !important;
  color: rgba(238,245,246,.82) !important;
}
.live-roadworks-map .leaflet-control-attribution a {
  color: #fff !important;
}
.live-roadworks-map .leaflet-control-attribution a:hover,
.live-roadworks-map .leaflet-control-attribution a:focus-visible {
  color: var(--blush) !important;
}


/* 2026-09-22 — contain map UI below sticky site navigation
   The map controls/detail panel use high internal z-index values for Leaflet,
   but this stacking context prevents them escaping above the masthead/browse bar. */
.live-roadworks-map-wrap {
  isolation: isolate;
  z-index: 0;
}


/* =========================================================
   2026-09-23 — roadworks controls + map-first mobile interaction
   ========================================================= */
.live-roadworks-actions {
  gap: 22px;
  align-items: flex-end;
}
.live-roadworks-control-group {
  display: grid;
  gap: 6px;
}
.live-roadworks-control-label {
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}
.live-roadworks-summary {
  flex-wrap: nowrap;
  gap: 0;
  border: 1px solid var(--line-strong);
}
.live-roadworks-summary .live-road-pill {
  min-height: 36px;
  align-items: center;
  line-height: 1;
  border: 0;
  padding: 7px 12px;
  background: transparent;
}
.live-roadworks-summary .live-road-pill + .live-road-pill {
  border-left: 1px solid var(--line);
}
.live-roadworks-summary button.live-road-pill {
  transition: background .18s ease, color .18s ease;
}
.live-roadworks-summary button.live-road-pill:hover {
  background: rgba(19,168,182,.07);
  color: #fff;
}
.live-roadworks-summary button.live-road-pill.is-active {
  background: var(--cyan);
  color: var(--page);
}
.live-roadworks-summary button.live-road-pill.is-active b {
  color: var(--page);
}
.live-roadworks-summary .live-road-pill.is-alert {
  margin-left: 0;
  border: 1px solid rgba(239,101,116,.27);
}
.live-road-view-toggle {
  min-height: 36px;
}
.live-road-view-toggle button {
  min-width: 66px;
  height: 34px;
  font-size: 10px;
  letter-spacing: .02em;
}

.live-roadworks-map-gate,
.live-roadworks-map-exit {
  display: none;
}

@media (max-width: 760px) {
  .live-roadworks-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
  }
  .live-roadworks-control-group {
    min-width: 0;
  }
  .live-roadworks-summary {
    width: 100%;
    overflow: visible;
  }
  .live-roadworks-summary .live-road-pill {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding-inline: 8px;
  }
  .live-roadworks-summary .live-road-pill.is-alert {
    display: none;
  }
  .live-road-view-toggle {
    width: 100%;
  }
  .live-road-view-toggle button {
    min-width: 0;
    width: 100%;
  }

  /* The map starts as a normal scrollable page surface. The visitor must
     deliberately enter it before Leaflet receives drag/zoom gestures. */
  .live-roadworks-map-gate {
    position: absolute;
    z-index: 1200;
    top: 0;
    left: 0;
    right: 0;
    height: 370px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: linear-gradient(180deg, rgba(9,20,26,.06), rgba(9,20,26,.22));
    touch-action: pan-y;
    pointer-events: auto;
  }
  .live-roadworks-map-gate[hidden] {
    display: none;
  }
  .live-roadworks-map-gate button {
    display: grid;
    gap: 5px;
    min-width: min(260px, 82%);
    padding: 14px 18px 15px;
    border: 1px solid rgba(238,245,246,.32);
    background: rgba(5,12,16,.90);
    color: #fff;
    box-shadow: 0 10px 34px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    font: inherit;
    text-align: center;
    cursor: pointer;
  }
  .live-roadworks-map-gate strong {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
  }
  .live-roadworks-map-gate span {
    color: var(--muted);
    font-size: 10px;
  }
  .live-roadworks-map-exit {
    position: absolute;
    z-index: 1250;
    top: 12px;
    right: 12px;
    display: block;
    padding: 9px 12px;
    border: 1px solid rgba(238,245,246,.28);
    background: rgba(5,12,16,.92);
    color: #fff;
    font: 700 10px/1 var(--font);
    letter-spacing: .04em;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
  }
  .live-roadworks-map-exit[hidden] {
    display: none;
  }
  .live-roadworks-map-wrap.is-map-locked .live-roadworks-map-tools {
    opacity: .28;
    pointer-events: none;
  }
}

@media (max-width: 470px) {
  .live-roadworks-map-gate {
    height: 340px;
  }
  .live-roadworks-actions {
    gap: 10px;
  }
  .live-roadworks-summary .live-road-pill {
    font-size: 8.5px;
  }
}


/* =========================================================
   2026-09-23 — live-information accessibility / readability pass
   ========================================================= */
.home-page .live-now-status {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.home-page .live-now-status button,
.home-page .live-roadworks-foot button {
  min-height: 44px;
  padding: 8px 2px;
  font-size: 12px;
}
.home-page .live-panel-head .micro,
.home-page .live-source {
  font-size: 11px;
  line-height: 1.4;
}
.home-page .live-source { color: var(--muted); }
.home-page .live-weather-copy > span {
  font-size: 13px;
  line-height: 1.45;
}
.home-page .live-weather-meta {
  font-size: 12px;
  line-height: 1.45;
}
.home-page .live-weather-hour-top > span {
  font-size: 11px;
  font-weight: 700;
}
.home-page .live-weather-hour-metrics,
.home-page .live-weather-hour-metrics small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.home-page .live-recycling-intro span {
  font-size: 13px;
  line-height: 1.6;
}
.home-page .live-postcode-form label,
.home-page .live-address-picker label {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.home-page .live-postcode-form button,
.home-page .live-address-picker button {
  min-height: 48px;
  font-size: 12px;
}
.home-page .live-address-picker > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.home-page .live-bin-address span {
  color: var(--muted);
  font-size: 10px;
}
.home-page .live-bin-address strong {
  font-size: 13px;
  line-height: 1.5;
}
.home-page .live-bin-address button {
  min-height: 44px;
  font-size: 12px;
}
.home-page .live-collection-copy > span {
  font-size: 10px;
}
.home-page .live-collection-copy strong {
  font-size: 13px;
  line-height: 1.45;
}
.home-page .live-collection-copy small,
.home-page .live-collection time span,
.home-page .live-bin-source {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.home-page .live-collection time b { font-size: 13px; }
.home-page .live-loading,
.home-page .live-empty,
.home-page .live-notice,
.home-page .live-error {
  font-size: 13px;
  line-height: 1.65;
}

/* Roadworks controls and list */
.home-page .live-roadworks-control-label {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.home-page .live-road-pill,
.home-page .live-roadworks-summary .live-road-pill {
  min-height: 44px;
  font-size: 12px;
}
.home-page .live-road-pill b { font-size: 14px; }
.home-page .live-road-view-toggle { min-height: 44px; }
.home-page .live-road-view-toggle button {
  min-height: 44px;
  height: 44px;
  font-size: 12px;
}
.home-page .live-road-meta {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.home-page .live-road-traffic {
  font-size: 11px;
  line-height: 1.4;
}
.home-page .live-road-date {
  font-size: 12px;
  line-height: 1.45;
}
.home-page .live-road-map-cue,
.home-page .live-road-no-map {
  font-size: 12px;
}
.home-page .live-roadworks-foot {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Map controls, detail panel, key and attribution. */
.home-page .live-roadworks-map-tools button {
  width: 44px;
  height: 44px;
}
.home-page .cn-map-detail-close {
  width: 44px;
  height: 44px;
}
.home-page .cn-map-detail-head span {
  font-size: 11px;
}
.home-page .cn-map-data-note {
  font-size: 12px;
  line-height: 1.6;
}
.home-page .cn-map-work-title strong {
  font-size: 14px;
  line-height: 1.4;
}
.home-page .cn-map-work-title span,
.home-page .cn-map-work small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.home-page .cn-map-work-tag {
  font-size: 10px;
  line-height: 1.35;
}
.home-page .cn-map-detail-action {
  min-height: 44px;
  height: 44px;
  font-size: 12px;
}
.home-page .live-map-key {
  font-size: 11px;
  line-height: 1.45;
}
.home-page .key-group { font-size: 10px; }
.home-page .live-roadworks-map .leaflet-control-attribution {
  padding: 5px 7px;
  color: var(--text) !important;
  font-size: 11px !important;
  line-height: 1.35;
}

/* Sport */
.home-page .live-sport-updated,
.home-page .live-sport-card-head small,
.home-page .live-sport-kind,
.home-page .live-sport-position span {
  font-size: 12px;
  line-height: 1.45;
}
.home-page .live-sport-stats small,
.home-page .live-sport-rugby-meta small,
.home-page .live-sport-fixtures > div > span:first-child {
  font-size: 11px;
  line-height: 1.35;
}
.home-page .live-sport-fixtures time,
.home-page .live-sport-source a {
  font-size: 12px;
  line-height: 1.45;
}
.home-page .live-sport-form {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
/* Small pink text does not have enough contrast on the dark page; use the
   lighter brand pink while preserving the same visual category cue. */
.home-page .live-sport-rugby .live-sport-media-tag span,
.home-page .live-sport-rugby .live-sport-code,
.home-page .live-sport-rugby .live-sport-fixtures > div > span:first-child {
  color: var(--blush);
}

@media (max-width: 760px) {
  .home-page .live-road-meta { font-size: 11px; }
  .home-page .live-road-traffic { font-size: 11px; }
  .home-page .live-road-date { font-size: 11px; }
  .home-page .live-roadworks-map-gate strong { font-size: 14px; }
  .home-page .live-roadworks-map-gate span { font-size: 12px; }
  .home-page .live-roadworks-map-exit {
    min-width: 44px;
    min-height: 44px;
    font-size: 12px;
  }
  .home-page .live-sport-stats small { font-size: 10px; }
  .home-page .live-sport-card-head small { font-size: 12px; }
}

@media (max-width: 470px) {
  .home-page .live-roadworks-summary .live-road-pill {
    font-size: 11px;
  }
}


/* Additional live-data microcopy fixes found during the review. */
.home-page .live-road-index {
  color: var(--muted);
  font-size: 11px;
}
.home-page .live-sport-media-tag span,
.home-page .live-sport-code {
  font-size: 12px;
}