/* Build Something Design System v1 — The Ask */
.bs-ask-v1 {
  --p1-ink: var(--ink);
  --p1-paper: var(--paper);
  --p1-panel: var(--paper-raised);
  --p1-line: var(--line);
  --p1-accent: var(--gold);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-interface);
  font-size: 18px;
  line-height: 1.6;
}

.bs-ask-v1 .p1-shell {
  width: min(var(--page-max), calc(100% - 40px));
  padding: var(--space-5) 0 var(--space-7);
}

.bs-ask-v1 .p1-brand {
  color: var(--blue);
  font: 750 .72rem/1.2 var(--font-interface);
  letter-spacing: .12em;
}

.bs-ask-v1 .p1-card {
  margin-top: var(--space-4);
  padding: clamp(var(--space-4), 7vw, var(--space-7));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
}

.bs-ask-v1 .p1-card h1 {
  max-width: 13ch;
  margin: .25em 0 .4em;
  font-family: var(--font-editorial);
  font-size: clamp(3.25rem, 8vw, 6.75rem);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.04em;
}

.bs-ask-v1 .p1-kicker {
  color: var(--gold-dark);
  font: 750 .72rem/1.2 var(--font-interface);
  letter-spacing: .15em;
}

.bs-ask-v1 .p1-total {
  margin-top: var(--space-3);
  color: var(--blue);
  font-size: 1.05rem;
}

.bs-ask-v1 .p1-form {
  max-width: 720px;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.bs-ask-v1 .p1-form label,
.bs-ask-v1 .p1-form legend {
  font-weight: 700;
}

.bs-ask-v1 .p1-form input,
.bs-ask-v1 .p1-form textarea {
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.bs-ask-v1 .p1-form input:focus,
.bs-ask-v1 .p1-form textarea:focus {
  border-color: var(--blue);
  outline: 3px solid var(--blue-soft);
}

.bs-ask-v1 .p1-pair {
  gap: var(--space-2);
}

.bs-ask-v1 .p1-choice span {
  min-height: 76px;
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-interface);
  font-size: 1.25rem;
  transition: filter .15s ease, transform .15s ease;
}

.bs-ask-v1 .p1-choice:nth-child(2) span {
  border-color: var(--blue-dark);
  background: var(--blue);
  color: #fff;
}

.bs-ask-v1 .p1-choice span:hover {
  filter: brightness(.94);
  transform: translateY(-1px);
}

.bs-ask-v1 .p1-choice input:checked + span {
  background: var(--gold-dark);
  color: #fff;
  box-shadow: inset 0 0 0 3px var(--paper-raised);
}

.bs-ask-v1 .p1-choice:nth-child(2) input:checked + span {
  background: var(--blue-dark);
}

.bs-ask-v1 .p1-choice input:focus-visible + span {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.bs-ask-v1 .p1-choice.small span {
  min-height: 64px;
  font-size: .95rem;
}

.bs-ask-v1 .p1-button {
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-interface);
}

.bs-ask-v1 .p1-button:hover {
  background: var(--gold-dark);
  color: #fff;
}

.bs-ask-v1 .p1-muted {
  color: var(--ink-muted);
}

.bs-ask-v1 .p1-result {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top-color: var(--line);
}

.bs-ask-v1 .p1-reveal {
  padding: var(--space-2);
  border-left-color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, var(--paper-raised));
}

.bs-ask-v1 .p1-number {
  color: var(--blue);
  font-family: var(--font-editorial);
}

.bs-ask-v1 .p1-result dl {
  gap: var(--space-2);
}

.bs-ask-v1 .p1-result dl div {
  border-top-color: var(--line);
}

@media (max-width: 720px) {
  .bs-ask-v1 .p1-shell {
    width: min(100% - 24px, var(--page-max));
    padding-top: var(--space-4);
  }

  .bs-ask-v1 .p1-card {
    padding: 28px 20px 40px;
  }
}

@media (max-width: 480px) {
  .bs-ask-v1 .p1-pair {
    grid-template-columns: 1fr 1fr;
  }

  .bs-ask-v1 .p1-choice span {
    min-height: 64px;
    font-size: 1rem;
  }
}