:root {
  --pc-font-family: sans-serif;
  --pc-font-size: 10px;
  --pc-label-font-size: var(--pc-font-size);
  --pc-axis-font-size: 9px;
  --pc-axis-stroke: #AAA;
  --pc-background-stroke: #ccc;
  --pc-background-stroke-opacity: 0.4;
  --pc-brush-fill: rgba(0, 0, 0, 0.2);
  --pc-brush-stroke: #666;
  --pc-brush-handle-width: 18px;
  --pc-brush-handle-width-touch: 32px;
  --pc-color-0: #ff0000;
  --pc-color-1: #8d1231;
  --pc-color-2: #0037ad;
  --pc-color-3: #e60012;
  --pc-color-4: #0275be;
  --pc-color-5: #f7d000;
  --pc-color-6: #e60012;
  --pc-color-7: #f90f00;
}

.background path {
  fill: none;
  stroke: var(--pc-background-stroke);
  stroke-opacity: var(--pc-background-stroke-opacity);
  shape-rendering: crispEdges;
}

.brush .extent {
  fill: var(--pc-brush-fill);
  stroke: var(--pc-brush-stroke);
  shape-rendering: crispEdges;
}

.brush .background {
  cursor: crosshair;
}

.brush .extent {
  cursor: move;
}

.brush .resize {
  cursor: ew-resize;
}

.brush rect {
  touch-action: none;
}

@media (pointer: coarse) {
  .brush .extent {
    cursor: grab;
  }
}

.axis line,
.axis path {
  fill: none;
  stroke: var(--pc-axis-stroke);
  shape-rendering: crispEdges;
}

#firstChild .axis .tick {
  display: none;
}

body {
  font-family: var(--pc-font-family);
  font-size: var(--pc-font-size);
}

.axis text {
  font-family: var(--pc-font-family);
  font-size: var(--pc-axis-font-size);
}

.letterground text {
  font-family: var(--pc-font-family);
  font-size: var(--pc-font-size);
}

#chart-container {
  width: 100%;
}

#chart-container .parallel-chart {
  width: 100%;
  height: auto;
  display: block;
  touch-action: none;
}

.app-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.5rem 0;
  font-family: var(--pc-font-family);
}

.app-header__title {
  font-size: calc(var(--pc-font-size) * 1.5);
  font-weight: 600;
  margin: 0;
}

.app-main {
  margin-top: 0;
  padding: 0 1.5rem 1.5rem;
}

.filter-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-size: calc(var(--pc-font-size) * 1.1);
  align-items: center;
}

.filter-summary__count {
  font-weight: bold;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.filter-summary__bar {
  position: relative;
  width: 180px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  align-self: center;
}

.filter-summary__bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #4caf50, #81c784);
  transition: width 0.25s ease;
}

.filter-summary__status {
  font-size: calc(var(--pc-font-size) * 1.05);
}

.filter-summary__status--warning {
  color: #d32f2f;
  font-weight: 600;
}

.filter-summary__active {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.filter-summary__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.filter-reset-btn {
  font-size: calc(var(--pc-font-size) * 0.95);
  padding: 0.35rem 0.9rem;
}

.filter-reset-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.filter-pill {
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 9999px;
  padding: 0.15rem 0.6rem;
  font-size: calc(var(--pc-font-size) * 0.95);
}

@media (min-width: 720px) {
  .filter-summary {
    flex-direction: row;
    align-items: center;
    gap: 1.1rem;
  }
}