/* ============================================================================
   Spacebar Counter — 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 — emerald green, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #34d399  9.84:1 on --bg   9.07:1 on --surface   10.18:1 on --bg-sunk
     light #047857  5.26:1 on --bg   5.48:1 on --surface    4.82:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root {
  --accent: #34d399;
  --accent-dim: rgba(52, 211, 153, 0.14);
}
@media (prefers-color-scheme: light) {
  :root {
    --accent: #047857;
    --accent-dim: rgba(4, 120, 87, 0.10);
  }
}

/* base has no visually-hidden helper; the live-status region needs 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;
}

/* ============================================================================
   Mode toggle
   ========================================================================= */

.mode-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-bottom: 1.25rem;
}

/* ============================================================================
   The tool bay — one panel visible at a time, [hidden] handles the rest
   ========================================================================= */

.mode-panel {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3.5vw, 2rem);
}

.count-stage {
  text-align: center;
  padding: 0.5rem 0 1rem;
}

.count-value {
  display: block;
  font-family: var(--mono);
  font-size: clamp(3.5rem, 2.2rem + 9vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* a quick, undramatic pop on every counted press — reinforces that the
   keystroke actually landed, without being a distraction at high speed */
.count-value.bump { animation: spacebar-bump 0.16s ease; }
@keyframes spacebar-bump {
  0%   { transform: scale(1.09); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .count-value.bump { animation: none; }
}

.count-hint {
  margin: 0.6rem 0 0;
  color: var(--text-dim);
  font-size: 0.9375rem;
}

kbd {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 0.05em 0.55em;
  font-size: 0.9em;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.tap-btn {
  min-width: 10rem;
  min-height: 2.9rem;
}

/* ============================================================================
   Timed mode — duration chips, live readout, result card
   ========================================================================= */

.duration-row {
  margin-bottom: 1.1rem;
}
.duration-row .field-label { margin-bottom: 0.45rem; display: block; }

.timed-readout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  margin-top: 0.9rem;
}
.timed-readout .stat { text-align: center; }
.timed-readout .stat-value {
  font-size: 1.35rem;
  font-feature-settings: "tnum" 1, "zero" 1;
}

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

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: 1rem;
  text-align: center;
}
.result-grid .stat-value {
  font-size: 1.75rem;
  font-feature-settings: "tnum" 1, "zero" 1;
}

#result-new-best {
  display: block;
  width: fit-content;
  margin: 1rem auto 0;
}

/* ============================================================================
   Article furniture shared with the rest of the portfolio
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.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;
}

td .mono, th .mono { white-space: nowrap; }