.traffic-monitor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.traffic-table caption {
  text-align: left;
  font-size: 0.75rem;
  padding-block: 0.5rem;
}
.traffic-intro {
  grid-column: 1 / -1;
}
.cc-traffic {
  margin-block: 1rem;
  min-width: 0;
}
.traffic-source {
  min-width: 0;
}
.traffic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 1rem;
}
.traffic-freshness {
  font-size: 0.82rem;
}
.traffic-freshness[data-state='stale'] {
  color: var(--status-warning, #975b00);
}
.traffic-note {
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.85;
}
.traffic-connection {
  display: block;
  margin-block: 1rem;
}
.traffic-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1.2rem;
}
.traffic-stat {
  padding: 1rem;
  border: 1px solid var(--border, #94a3b8);
  border-radius: 0.6rem;
}
.traffic-stat dt {
  font-size: 0.8rem;
}
.traffic-stat dd {
  margin: 0.5rem 0 0;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
}
.traffic-timeline svg {
  width: 100%;
  height: auto;
  max-height: 12rem;
  fill: var(--teal, #0d9488);
}
.traffic-timeline h3,
.traffic-breakdown h3 {
  font-size: 0.9rem;
}
.traffic-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  gap: 1rem;
}
.traffic-breakdowns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
  margin-block: 1.4rem;
}
.traffic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  table-layout: fixed;
}
.traffic-table th,
.traffic-table td {
  padding: 0.55rem 0;
  text-align: left;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--border, #94a3b8);
}
.traffic-table th:last-child,
.traffic-table td:last-child {
  width: 5rem;
  text-align: right;
}
@media (max-width: 1000px) {
  .traffic-monitor {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 420px) {
  .traffic-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}
[data-command-view='tv'] .traffic-breakdowns,
[data-command-view='tv'] .traffic-actions,
[data-command-view='tv'] .traffic-source > .traffic-note,
[data-command-view='tv'] .traffic-timeline .traffic-note {
  display: none;
}
[data-command-view='tv'] .traffic-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
[data-command-view='tv'] .traffic-timeline svg {
  max-height: 5rem;
}