/* KeyboardLatencyTest.com — /keyboard-repeat-rate-test/
   Page-specific rules only. Everything else comes from design-system.css. */

/* The stage shows a key name, which can be a long token such as "ArrowLeft".
   .stage__big is sized for a number, so it is toned down and allowed to wrap. */
.rr-held {
  font-size: clamp(1.75rem, 1.1rem + 3.6vw, 3.25rem);
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  color: var(--accent);
}

.rr-stage[data-idle="1"] .rr-held { color: var(--text-2); }

/* The state pill sits above the key name inside the stage grid. */
.rr-tag { align-self: center; }

.rr-streamcard { margin-block-start: var(--space); }

/* Live stream of the characters auto-repeat is producing. Fixed height so a long
   hold cannot push the results below the fold, scrolls when it overflows. */
.rr-stream {
  margin: 0;
  min-block-size: 3.5rem;
  max-block-size: 9rem;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 0.6rem 0.7rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
}

.rr-stream:empty::before {
  content: attr(data-empty);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 0.875rem;
}

/* Numbered result headings: the whole point of the page is that these are two
   different settings, so each group is announced with its own numeral. */
.rr-numhead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block: calc(var(--space) * 1.15) 0.6rem;
  font-size: 1.0625rem;
  overflow-wrap: anywhere;
}

.rr-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 1.65rem;
  block-size: 1.65rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1;
}

.rr-chart {
  --chart-h: clamp(190px, 40vw, 300px);
  margin-block-start: var(--space);
}

.rr-chartnote { margin-block-start: 0.5rem; }

#rr-advanced { margin-block-start: var(--space); }

.rr-h4 {
  margin-block: 1.1rem 0.5rem;
  font-size: 0.9375rem;
}

.rr-h4:first-of-type { margin-block-start: 0.4rem; }

.rr-line {
  font-size: 0.875rem;
  color: var(--text-2);
  margin-block: 0.4rem;
}

.rr-line b { color: var(--text); }

/* Reserves room for the two-line status sentence so the results below it do not
   jump every time a hold finishes. */
.rr-status {
  margin-block-start: 0.75rem;
  min-block-size: 2.6em;
}

.rr-actions { margin-block-start: var(--space); }

#rr-lowres { margin-block-start: var(--space); }

/* The advanced tables are narrow enough to breathe on wide screens. */
@media (min-width: 768px) {
  .rr-numhead { font-size: 1.125rem; }
}