/* QR code generator: two panes, the form on a pale green card and the live
   preview on a white one. Used by the "QR code de cagnotte" blog post. */

.qr-generator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-3xl);
  padding: var(--spacing-3xl);
  border-radius: 24px;
  background: #eef8e6;
  box-shadow: 0 0 0 8px #f5fbf0;
}

@media (max-width: 48rem) {
  .qr-generator {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-xl);
    padding: var(--spacing-lg);
  }
}

.qr-generator__form,
.qr-generator__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.qr-generator__fields {
  flex: none;
  max-width: none;
}

.qr-generator__title {
  font-family: var(--font-family-bricolage);
  font-size: var(--unit-22);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

/* .input-group and .input both flex: 1, which stretches them in a column. */
.qr-generator .input-group,
.qr-generator .input {
  flex: none;
}

.qr-generator__modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: var(--rounded-full);
  background: white;
  border: 1px solid var(--color-border-neutral);
}

.qr-generator__mode-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.qr-generator__mode {
  margin: 0;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--rounded-full);
  text-align: center;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.qr-generator__mode-input:checked + .qr-generator__mode {
  background: var(--interactive-primary);
  color: white;
}

.qr-generator__mode-input:focus-visible + .qr-generator__mode {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

.qr-generator__hint {
  margin-top: calc(-1 * var(--spacing-md));
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.qr-generator:has(input[value="static"]:checked) .qr-generator__dynamic-only,
.qr-generator:has(input[value="dynamic"]:checked) .qr-generator__static-only {
  display: none;
}

.qr-generator__colors {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.qr-generator__colors .qr-color__swatches {
  justify-content: flex-start;
}

.qr-generator__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-3xl) var(--spacing-xl);
  border-radius: 20px;
  background: white;
  text-align: center;
}

.qr-generator__preview {
  width: 180px;
  height: 180px;
  border: 2px solid var(--interactive-primary);
  border-radius: 16px;
  padding: var(--spacing-sm);
}

.qr-generator:not(.qr-generator--ready) .qr-generator__preview {
  opacity: 0.25;
  border-style: dashed;
}

.qr-generator__link {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.qr-generator__empty,
.qr-generator__note {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.qr-generator--ready .qr-generator__empty,
.qr-generator:not(.qr-generator--ready) .qr-generator__link,
.qr-generator:not(.qr-generator--ready) .qr-generator__note,
.qr-generator:not(.qr-generator--ready) .qr-generator__downloads {
  display: none;
}

.qr-generator__downloads {
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-2xs);
}

/* --- The post around it --- */

.qr-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  max-width: 60rem;
  margin: 0 auto;
  width: 100%;
}

body:has(.qr-page) {
  background-color: white;
}

.article:has(.qr-page) .article__back {
  align-self: center;
}

.qr-page__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

.qr-page__badges {
  display: flex;
  gap: var(--spacing-3xs);
}

.qr-page__badge {
  padding: 2px var(--spacing-2xs);
  border-radius: var(--rounded-full);
  background: #edf5e6;
  color: var(--interactive-primary);
  font-size: var(--unit-12);
  font-weight: var(--font-weight-semibold);
}

.qr-page__badge--tool {
  background: var(--interactive-accent);
}

.qr-page__title {
  font-family: var(--font-family-bricolage);
  font-size: var(--unit-48);
  line-height: 1.05;
  font-weight: var(--font-weight-bold);
}

@media (max-width: 48rem) {
  .qr-page__title {
    font-size: var(--unit-32);
  }
}

.qr-page__lead {
  font-size: var(--font-lg);
  color: var(--text-secondary);
}

.qr-page__prose {
  max-width: 40rem;
  margin: 0 auto;
  width: 100%;
}

.qr-page__table {
  overflow-x: auto;
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--rounded-xs);
  background: white;
}

.prose .qr-page__table table {
  border: none;
  font-size: var(--font-sm);
  line-height: 1.5;
}

.prose .qr-page__table th,
.prose .qr-page__table td {
  border: none;
  border-bottom: 1px solid var(--color-border-neutral);
  padding: var(--spacing-xs) var(--spacing-md);
  text-align: left;
  vertical-align: top;
}

.prose .qr-page__table tr:last-child td {
  border-bottom: none;
}

.prose .qr-page__table thead th {
  background: #f4f6f1;
  font-weight: var(--font-weight-semibold);
}

.prose .qr-page__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-xs);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (max-width: 40rem) {
  .prose .qr-page__steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

.prose .qr-page__steps li {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  margin: 0;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--rounded-xs);
  font-size: var(--font-sm);
  line-height: 1.5;
  counter-increment: step;
}

.prose .qr-page__steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: var(--spacing-3xs);
  border-radius: var(--rounded-full);
  background: var(--interactive-accent);
  color: var(--interactive-primary);
  font-weight: var(--font-weight-semibold);
}

.qr-page__steps span {
  color: var(--text-secondary);
}

.qr-page__tip {
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--rounded-xs);
  background: #f4f6f1;
}

.qr-page__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-2xs);
}

@media (max-width: 30rem) {
  .qr-page__stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

.qr-page__stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xs);
  padding: var(--spacing-md);
  border-radius: var(--rounded-xs);
  background: #f4f4f1;
  line-height: 1.3;
}

.qr-page__stat strong {
  font-family: var(--font-family-bricolage);
  font-size: var(--unit-28);
  font-weight: var(--font-weight-semibold);
}

.qr-page__stat span {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.prose .qr-page__source {
  margin-top: var(--spacing-2xs);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.qr-page__channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-xs);
}

@media (max-width: 30rem) {
  .qr-page__channels {
    grid-template-columns: minmax(0, 1fr);
  }
}

.qr-page__channel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--rounded-xs);
  font-size: var(--font-sm);
  line-height: 1.5;
}

.qr-page__channel > span:last-child {
  color: var(--text-secondary);
}

.qr-page__channel-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--spacing-3xs);
  border-radius: var(--rounded-full);
  background: #edf5e6;
  color: var(--interactive-primary);
}

.qr-page__channel-icon svg {
  width: 18px;
  height: 18px;
}

.prose .faq {
  margin-top: var(--spacing-md);
}

.prose .faq__answer p {
  margin: 0;
}

.qr-page__message {
  margin: var(--spacing-lg) 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-radius: var(--rounded-xs);
  background: #eef6fb;
}

.prose .qr-page__message blockquote {
  margin: 0;
  border: none;
  padding: 0;
  color: var(--text-primary);
  font-style: normal;
}

.qr-page__copy {
  background: white;
}

.qr-page__tool {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.qr-page__promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
  border-radius: var(--rounded-xs);
  background: linear-gradient(135deg, #f1f8ff 0%, #dcebfa 100%);
}

.qr-page__promo p {
  flex: 1 1 18rem;
  margin: 0;
}

.qr-page__promo-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--rounded-full);
  background: white;
  color: #1f4fd1;
}

.qr-page__promo-icon svg {
  width: 18px;
  height: 18px;
}

/* Closing pitch: blue card, text on the left, a pot page in a phone on the right. */
.qr-page__cta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-3xl);
  padding: var(--spacing-4xl) var(--spacing-4xl) 0;
  border-radius: 32px;
  background: linear-gradient(135deg, #f1f8ff 0%, #dcebfa 100%);
  overflow: hidden;
}

@media (max-width: 48rem) {
  .qr-page__cta {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--spacing-xl) var(--spacing-lg) 0;
  }
}

.qr-page__cta-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-4xl);
}

.qr-page__cta p {
  margin: 0;
}

.qr-page__cta-eyebrow {
  font-family: var(--font-family-bricolage);
  font-size: var(--font-lg);
  font-weight: var(--font-weight-semibold);
  color: #1f4fd1;
}

.qr-page__cta .qr-page__cta-title {
  font-family: var(--font-family-bricolage);
  font-size: var(--unit-40);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  color: var(--text-primary);
}

.qr-page__cta-lead {
  font-size: var(--font-lg);
  line-height: 1.5;
  color: var(--text-secondary);
}

.qr-page__cta-points {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: 0;
  list-style: none;
}

.qr-page__cta-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.qr-page__cta-check {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--rounded-full);
  background: var(--active-green);
  color: var(--interactive-primary);
}

.qr-page__cta-check svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.qr-page__cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xs);
}

.qr-page__cta-link {
  font-weight: var(--font-weight-semibold);
  color: var(--interactive-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The phone is a drawing of a pot page, cut by the bottom of the card. */
.qr-page__phone {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  align-self: end;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xl);
  border: 6px solid white;
  border-bottom: none;
  border-radius: 36px 36px 0 0;
  background: #f7f7f5;
  box-shadow: 0 20px 50px rgb(31 79 209 / 0.12);
  font-size: var(--unit-12);
  line-height: 1.4;
}

.qr-page__phone-cover {
  height: 44px;
  margin: calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-sm)) 0;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(90deg, #e3f1fd, #d3ecf9);
}

.qr-page__phone-card {
  padding: var(--spacing-sm);
  border-radius: 12px;
  background: white;
}

.qr-page__phone-card--head,
.qr-page__phone-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3xs);
  text-align: center;
}

.qr-page__phone-card--head strong {
  font-family: var(--font-family-bricolage);
  font-size: var(--font-md);
}

.qr-page__phone-card--head > span {
  color: var(--text-secondary);
}

.qr-page__phone-buttons {
  display: flex;
  gap: var(--spacing-3xs);
  margin-top: var(--spacing-3xs);
}

.qr-page__phone-buttons span,
.qr-page__phone-download {
  padding: 4px var(--spacing-xs);
  border-radius: var(--rounded-full);
  background: #edf1ea;
  font-weight: var(--font-weight-semibold);
  color: var(--interactive-primary);
}

.qr-page__phone-buttons span:first-child {
  background: var(--interactive-primary);
  color: white;
}

.qr-page__phone-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.qr-page__phone-stats div {
  display: flex;
  flex-direction: column;
}

.qr-page__phone-stats div + div {
  padding-left: var(--spacing-sm);
  border-left: 1px solid var(--color-border-neutral);
}

.qr-page__phone-stats strong {
  font-family: var(--font-family-bricolage);
  font-size: var(--font-lg);
}

.qr-page__phone-qr > span:first-child {
  font-weight: var(--font-weight-semibold);
}

.qr-page__phone-code {
  width: 96px;
  height: 96px;
  margin: var(--spacing-3xs) 0;
  background-color: var(--text-primary);
  -webkit-mask: var(--qr-mask) center / contain no-repeat;
  mask: var(--qr-mask) center / contain no-repeat;
}