/* controls.css — The app-wide controls: primary (.big) and secondary (.ghost)
   buttons, pills and row wraps. */

.rowwrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  padding: 10px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r);
  font-weight: 700;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--lip);
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.pill:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--lip);
}

.pill.on {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 3px 0 var(--brand);
}

/* Primary button: brand face, shade lip, white label — the kit's Button Base. */
.big {
  display: block;
  width: 100%;
  text-decoration: none;
  padding: 14px 18px;
  border-radius: var(--r);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
  box-shadow: var(--drop) var(--brand-lip);
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.big:active,
.big.is-pressed {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--brand-lip);
}

.big.caps {
  font-size: 1.15rem;
  font-weight: 900;
}

/* Secondary button: white face, the brand's pale variant for stroke and lip. */
.ghost {
  display: block;
  width: 100%;
  padding: 12.5px 18px;
  margin-top: 12px;
  border: 1.5px solid var(--brand-soft);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--brand-ink);
  text-align: center;
  line-height: 1.5;
  box-shadow: var(--drop) var(--brand-soft);
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.ghost:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--brand-soft);
}

.q {
  color: var(--ink);
  font-weight: 900;
}