/* ============================================================================
   CPS Test — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool.

   Accent — pink/rose, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #f472b6  7.14:1 on --bg   6.59:1 on --surface   7.39:1 on --bg-sunk
     light #be185d  5.79:1 on --bg   6.04:1 on --surface   5.30:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #f472b6; --accent-dim: rgba(244, 114, 182, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #be185d; --accent-dim: rgba(190, 24, 93, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }
.brand svg .mark-fg2 { stroke: var(--on-accent); }

/* base has no visually-hidden helper; the pad's live status text and the
   result heading need one */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   The pad — the whole test lives in this one control
   ========================================================================= */

.cps-tool { margin-bottom: 2.5rem; }

.duration-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.6rem;
  margin-bottom: 1rem;
}
.duration-row .eyebrow { flex: 0 0 auto; margin-right: 0.2rem; }

.best-line {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-dim);
  margin: 0 0 1rem;
}
.best-line strong { color: var(--text); }

/* The pad itself is a real <button> for the left-click/tap tool, so Enter and
   Space activate it natively — keyboard operability comes for free, no extra
   JS. The right-click test uses a non-button pad instead (see about.html /
   right-click-cps.html): a native button cannot sensibly listen for
   "contextmenu" without also fighting its own click semantics. */
.pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: clamp(11rem, 28vw, 16rem);
  padding: 1.5rem;
  text-align: center;
  font: inherit;
  color: var(--text);
  background: var(--bg-sunk);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.pad:hover { border-color: var(--accent); }
.pad:active { background: var(--surface-2); }

.pad[data-status="idle"] { border-style: dashed; }
.pad[data-status="running"] {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-dim);
  cursor: pointer;
}
.pad[data-status="finished"] {
  border-style: solid;
  border-color: var(--line-strong);
  background: var(--surface);
  cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
  .pad:active { transform: scale(0.995); }
}

.pad-title {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.pad-sub {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-dim);
  margin: 0;
}

/* ---------------------------------------------------------------- live -- */

.live-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.live-stats .stat-value {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  color: var(--accent);
}

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }

.kb-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1.1rem;
  font-size: 0.875rem;
  color: var(--text-dim);
}
.kb-row input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.kb-row label { display: block; }
.kb-row .hint { display: block; font-size: 0.8125rem; color: var(--text-faint); }

/* -------------------------------------------------------------- results -- */

.results {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 1rem;
}

.results .stat-value {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}
.results .res-cps .stat-value {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 2.75rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.new-best {
  display: inline-flex;
  margin-top: 0.85rem;
}

/* ============================================================================
   Article furniture
   ========================================================================= */

.section { max-width: 74ch; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span { display: block; color: var(--text-dim); font-size: 0.875rem; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}

.mouse-only-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--text);
  font-size: 0.9375rem;
  margin: 0 0 1.5rem;
}