.locations-panel { overflow: hidden; padding: 0; }
.locations-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; }
.locations-heading h2 { margin: 0 0 3px; }
.locations-heading p { font-size: 13px; }
.location-filters { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel-strong) 75%, transparent); }
.location-filters button { min-width: 62px; padding: 7px 12px; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; box-shadow: none; }
.location-filters button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: 0 6px 16px #228b2230; }
.road-list { --card-gap: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); padding: 12px 18px 18px; }
.road { position: relative; display: flex; min-width: 0; height: 100%; padding: 14px; overflow: visible; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel-strong) 88%, var(--accent-soft)); box-shadow: 0 5px 14px var(--shadow); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.road::before { position: absolute; top: -1px; right: 13px; left: 13px; height: 3px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, var(--green), var(--accent-secondary), var(--green)); background-size: 200% 100%; content: ''; opacity: .55; transition: opacity .2s ease; }
.road:hover, .road:focus-within { z-index: 1; border-color: var(--accent-secondary); box-shadow: 0 12px 26px var(--shadow); transform: translateY(-2px); }
.road:hover::before, .road:focus-within::before { opacity: 1; animation: road-glint 2.4s linear infinite; }
.road[hidden] { display: none; }
.road-last-visible { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--card-gap)) / 2); }
.road-detail { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: 0; }
.road-name-cell { display: flex; align-items: center; min-height: 42px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.road-title { display: block; width: 100%; min-width: 0; color: var(--ink); font-size: 13px; font-weight: 900; line-height: 1.25; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.road-title:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.road-title:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 3px; }
.road-title.disabled { color: var(--muted); pointer-events: none; }
.road input[type="hidden"] { display: none; }
.road-speed { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 66px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel-strong) 75%, transparent); color: var(--accent-deep); font-size: 12px; font-weight: 900; text-align: center; }
.road-speed::before { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 15%, transparent); content: ''; }
.road-speed.directional { display: grid; flex: 0 0 auto; justify-content: stretch; gap: 7px; width: 100%; min-height: 0; padding: 0; border: 0; background: none; }
.road-speed.directional::before { display: none; }
.direction-reading { display: grid; grid-template-columns: 76px minmax(0, 1fr) 70px; grid-template-areas: 'route route route' 'state track speed'; gap: 4px 8px; align-items: center; width: 100%; min-height: 58px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel-strong) 78%, transparent); font-size: 10px; line-height: 1.15; }
.direction-route { grid-area: route; display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); align-items: center; gap: 4px; width: 100%; }
.direction-reading b { overflow-wrap: anywhere; }
.direction-from { text-align: right; }
.direction-to { text-align: left; }
.direction-arrow { color: var(--muted); font-size: 13px; text-align: center; transition: transform .18s ease; }
.road:hover .direction-arrow, .road:focus-within .direction-arrow { transform: translateX(2px); }
.direction-track { position: relative; grid-area: track; width: 100%; height: 2px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--muted) 24%, transparent); }
.direction-track i { position: absolute; top: 50%; left: 0; width: 12px; height: 5px; border-radius: 999px 999px 3px 3px; background: var(--muted); box-shadow: -3px 3px 0 -1px var(--muted), 3px 3px 0 -1px var(--muted); transform: translate(-14px, -70%); animation: lane-drive 3.6s linear infinite; }
.direction-reading:nth-child(2) .direction-track i { animation-delay: -1.8s; }
.direction-state { grid-area: state; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; white-space: nowrap; }
.direction-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 15%, transparent); }
.direction-reading em { grid-area: speed; color: var(--accent-deep); font-size: 11px; font-style: normal; font-weight: 900; text-align: right; white-space: nowrap; }
.direction-reading.flowing .direction-dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 15%, transparent); }
.direction-reading.moderate .direction-dot { background: var(--yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 18%, transparent); }
.direction-reading.heavy .direction-dot { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 15%, transparent); animation: traffic-pulse 1.8s ease-out infinite; }
.direction-reading.flowing .direction-track i { background: var(--green); box-shadow: -3px 3px 0 -1px var(--green), 3px 3px 0 -1px var(--green); }
.direction-reading.moderate .direction-track i { background: var(--yellow); box-shadow: -3px 3px 0 -1px var(--yellow), 3px 3px 0 -1px var(--yellow); }
.direction-reading.heavy .direction-track i { background: var(--red); box-shadow: -3px 3px 0 -1px var(--red), 3px 3px 0 -1px var(--red); animation-duration: 5.2s; }
.road-speed.flowing::before { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 15%, transparent); }
.road-speed.moderate::before { background: var(--yellow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 18%, transparent); }
.road-speed.heavy::before { background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 15%, transparent); animation: traffic-pulse 1.8s ease-out infinite; }
@keyframes traffic-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }
@keyframes lane-drive { from { left: 0; } to { left: calc(100% + 14px); } }
@keyframes road-glint { to { background-position: -200% 0; } }
@media (max-width: 700px) {
  .locations-heading { align-items: flex-start; flex-direction: column; padding: 20px 18px 16px; }
  .road-list { --card-gap: 10px; padding: 10px; }
  .road { padding: 10px; }
  .road-title { font-size: 12px; }
  .direction-reading { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'route route' 'state speed'; gap: 4px; padding: 6px; }
  .direction-track { display: none; }
  .direction-state { font-size: 8px; }
  .direction-reading em { font-size: 10px; }
}
@media (max-width: 480px) {
  .location-filters { width: 100%; }
  .location-filters button { flex: 1; min-width: 0; }
  .road-list { --card-gap: 8px; padding: 8px; }
  .road { padding: 8px; }
  .road-detail { gap: 7px; }
  .road-name-cell { min-height: 46px; }
  .road-title { font-size: 11px; }
  .direction-reading { min-height: 61px; font-size: 9px; }
  .direction-route { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); gap: 2px; }
  .direction-state { gap: 3px; font-size: 7px; }
  .direction-dot { width: 6px; height: 6px; }
  .direction-reading em { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .road, .road::before, .direction-arrow { transition: none; }
  .road:hover::before, .road:focus-within::before, .direction-track i, .direction-reading.heavy .direction-dot { animation: none; }
}