/* CPS test: the click area, the time bar, the result and the score table.
   Scoped under .cps; colours come from the site's tokens. */
.cps-bar { justify-content: space-between; align-items: end; }
.cps-field { display: grid; gap: 4px; min-width: 0; }
.cps-label { font-size: 14px; font-weight: 500; }

.cps-pad { display: grid; place-items: center; align-content: center; gap: 8px; min-height: clamp(220px, 36vh, 320px); padding: 20px;
  border: 2px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); color: var(--ink); text-align: center;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cps-pad:active { background: color-mix(in srgb, var(--accent-soft) 75%, var(--accent)); }
.cps-pad.is-running { border-style: solid; box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.cps-pad.is-cooldown { cursor: default; opacity: .85; }
.cps-count { font: 600 clamp(64px, 13vw, 112px)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.cps-msg { max-width: 34ch; font-size: 17px; font-weight: 500; }
.cps-time > i { transition: none; }

.cps-result { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--sunk); }
.cps-rank { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.cps-rank .badge { font-size: 15px; padding: 4px 12px; }
.cps-bars { display: flex; align-items: flex-end; gap: 2px; height: 90px; }
.cps-bars span { flex: 1 1 0; min-width: 2px; border-radius: 3px 3px 0 0; background: var(--accent); }

.cps-scores { display: grid; gap: 10px; }
.cps-scores h2 { font-size: 18px; }
.cps-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cps-table th, .cps-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.cps-table thead th { color: var(--muted); font-size: 13px; font-weight: 600; }
.cps-table tbody th { font-weight: 500; }
.cps-table td { font: 400 14px/1.4 var(--f-mono); }
.cps-table tr.is-current { background: var(--accent-soft); }
.cps-store { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* The ranks table in the page text. */
.cps-ranks th, .cps-ranks td { width: auto; }
.cps-ranks thead th { font-size: 14px; }