.filter-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--control-gap);
  height: var(--filter-bar-height);
  padding: 0 var(--edge) 0 8px;
  overflow-x: auto;
  background: var(--color-chrome);
  border-bottom: .5px solid var(--color-separator);
}

.filter-list {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
}

.filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--control-height);
  border-radius: var(--radius-control);
  color: var(--color-label);
}

.filter:hover {
  background: var(--color-hover);
}


.filter-button {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  height: var(--control-height);
  padding: 0 9px;
  border: 0;
  background: none;
  color: inherit;
}


.filter.is-set {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}


.filter.is-set .engine-tag,
.filter.is-set .hardware-tag,
.filter.is-set .workload-tag .mode-icon {  /* a picked setup's mark takes the accent with its name */
  color: var(--color-accent);
}

/* Clear, after the filters: plain text with its mark in the label's colour, both turning the accent blue under the pointer, no fill */
.filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 3px;  /* a small mark close to its name */
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  padding: 0 10px;
  height: var(--control-height);
  font: inherit;
  font-size: 13px;
  color: var(--color-label);
  cursor: pointer;
}
.filter-clear:hover { color: var(--color-accent); }
.filter-clear svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.filter.is-set .popup-chevron {
  stroke: var(--color-accent);
}

.filter.is-set .filter-button {
  padding-right: 10px;
}


/* on a phone the filters are a row of pop-up buttons that slides sideways under a finger, Hide unavailable last */
@media (max-width: 899px) {
  .filter-bar {
    gap: 6px;
    padding: 0 var(--edge);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  .filter,
  .filter-button {
    flex: none;
    height: 34px;
    border-radius: 999px;
  }

  .filter {
    background: var(--color-fill);
  }

  .filter-button {
    padding: 0 12px 0 14px;
    font-size: 15px;
  }

  .filter-bar .plain-button {
    flex: none;
    white-space: nowrap;
  }
}

/* a table with no filters has an empty list: it takes no place, so the bar's first button starts where every page's does */
.filter-list:empty { display: none; }

/* phones: the Results and Quality selects follow the platform bar's dropdowns: one 34px pill with one fill, no wrapper box */
@media (max-width: 899px) {
  .filter-bar .filter,
  .filter-bar .filter:hover,
  .filter-bar .filter.is-set { background: none; border-radius: 0; box-shadow: none; }
  .filter-bar .filter .filter-button {
    height: 34px;
    padding: 0 12px 0 14px;
    border-radius: 999px;
    font-size: 15px;
    background: var(--color-fill);
  }
  .filter-bar .filter .filter-button:hover,
  .filter-bar .filter .filter-button[aria-expanded="true"] { background: var(--color-fill-secondary); }
  /* a filter in use keeps its tint, now on the pill itself */
  .filter-bar .filter.is-set .filter-button { background: var(--color-accent-tint); color: var(--color-accent); }
}

/* phones: one 8px gap between every button, Status to Configuration to Hide unavailable included; no spacer pushes Hide away */
@media (max-width: 899px) {
  .filter-bar,
  .filter-bar .filter-list { gap: 8px; }
  .filter-bar .spacer { display: none; }
  .filter-bar > * { margin-left: 0; margin-right: 0; }
}

/* the Results page's calendar: a small month in a menu's card, the days with results dotted, the range in the accent */
.date-popover { position: fixed; z-index: 1000; width: 232px; padding: 10px; border-radius: 10px; background: var(--color-chrome); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .14); font-size: 12px; color: var(--color-label); }
.date-popover[hidden] { display: none; }
.date-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.date-head b { font-size: 13px; font-weight: 600; }
.date-nav { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--color-label); cursor: pointer; }
.date-nav:hover:not(:disabled) { background: var(--color-fill); }
.date-nav:disabled { color: var(--color-label-quaternary); cursor: default; }
.date-nav svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.date-week, .date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.date-week span { font-size: 10px; color: var(--color-label-tertiary); padding-bottom: 2px; }
.date-grid button { position: relative; height: 28px; padding: 0; border: 0; border-radius: 6px; font: inherit; font-variant-numeric: tabular-nums; color: var(--color-label-tertiary); background: none; cursor: pointer; }
.date-grid button:hover { background: var(--color-fill); }
.date-grid button.has-data { font-weight: 600; color: var(--color-label); }
.date-grid button.has-data::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--color-accent); }  /* a day with results */
.date-grid button.is-in { background: var(--color-accent-tint); }
.date-grid button.is-end { color: #fff; background: var(--color-accent); }
.date-grid button.is-end::after { background: #fff; }
.date-foot { display: flex; align-items: center; justify-content: space-between; min-height: 22px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-separator); color: var(--color-label-secondary); }
.date-clear { padding: 0; border: 0; background: none; font: inherit; color: var(--color-accent); cursor: pointer; }
.date-empty { margin: 4px 0; color: var(--color-label-secondary); }

/* the row colours' keys before the bar's buttons, as a grid's bar sets its CI Error key */
.table-keys { display: inline-flex; align-items: center; gap: 12px; margin-right: 8px; }
.table-keys[hidden], .table-keys .platform-key[hidden] { display: none; }