/* The real-world testing dashboard (testing/index.html), on top of the website's look (css/website.css):
   its filters, the counts and the table of tests. */
:root, :root[data-theme="night"] { --pass: #22C55E; --fail: #F87171; --blocked: #FBBF24; }
:root[data-theme="day"] { --pass: #166534; --fail: #B91C1C; --blocked: #8A5A00; }

.testing h1 { font-size: clamp(34px, 4vw, 56px); }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; margin: 0 0 24px; }
.toolbar label { display: grid; gap: 6px; color: var(--muted); font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.toolbar .search { flex: 1 1 260px; }
.toolbar select, .toolbar input { min-height: 44px; min-width: 180px; max-width: 100%; padding: 8px 12px; background: var(--panel); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 0; font: 15px var(--sans); letter-spacing: normal; text-transform: none; }
.toolbar input { width: 100%; }
/* The lists draw their own arrow and keep a long option (a test run's name) inside them: otherwise WebKit makes
   the page wider than a phone. */
.toolbar select { max-width: min(100%, 380px); -webkit-appearance: none; appearance: none; overflow: hidden; padding-right: 36px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.toolbar select:hover, .toolbar input:hover { border-color: var(--accent); }

.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.card { padding: 16px 18px; background: var(--panel); border: 1px solid var(--border); box-shadow: inset 0 1px 0 var(--highlight);
  color: var(--muted); font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.count { margin-bottom: 4px; color: var(--bright); font: 800 32px/1.1 var(--sans); letter-spacing: -.02em; }
#scope-note { margin: 0 0 22px; font-size: 14px; }

.table-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 12px 14px; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--border); }
th { background: var(--panel-2); color: var(--muted); white-space: nowrap; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--panel-2); }
td:first-child { font-family: var(--mono); white-space: nowrap; color: var(--bright); }
td:last-child { white-space: nowrap; font: 700 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
tr:target { outline: 2px solid var(--accent); outline-offset: -2px; }
.count.pass, td.pass { color: var(--pass); }
.count.fail, td.fail { color: var(--fail); }
.count.blocked, td.blocked { color: var(--blocked); }

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .testing { padding-top: 76px; }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar label, .toolbar select { width: 100%; min-width: 0; max-width: 100%; }
  th, td { padding: 10px; font-size: 14px; }
}