/* Owned-content engagement band (P4-D1) — reaction + pain-form on Biblioteca
   articles. A QUIET paper card that sits above the ink .bib-gate CTA: hairline
   border, prose serif, no competing visual weight. The reaction block is
   revealed by engage.js (JS-only affordance); the form is a <details>
   disclosure that works as a plain HTML POST with zero JS. */

.essay .bib-engage {
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin: 40px 0 28px;
}
.bib-engage-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--indigo-soft);
  margin: 0 0 14px;
}

/* — one-tap reaction (JS reveals) — */
.bib-engage-react[hidden] { display: none; }
.bib-engage-q {
  font-family: var(--font-prose);
  font-size: 19px;
  margin: 0 0 12px;
}
.bib-engage-btn {
  appearance: none;
  font: inherit;
  font-family: var(--font-prose);
  font-size: 16px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 10px 22px;
  cursor: pointer;
  min-height: 44px;
}
.bib-engage-btn:hover { background: var(--ink); color: var(--paper); }
.bib-engage-ack {
  font-family: var(--font-prose);
  font-size: 16px;
  font-style: italic;
  color: var(--indigo-soft);
  margin: 12px 0 0;
}
.bib-engage-ack[hidden] { display: none; }

/* — pain-form disclosure — */
.bib-engage-form { margin-top: 18px; }
.bib-engage-react:not([hidden]) + .bib-engage-form {
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  padding-top: 18px;
}
.bib-engage-form summary {
  font-family: var(--font-prose);
  font-size: 17px;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.bib-engage-form form { margin-top: 16px; display: grid; gap: 14px; }
.bib-engage-form label {
  display: block;
  font-family: var(--font-prose);
  font-size: 15px;
}
.bib-engage-form label > span { color: var(--indigo-soft); }
.bib-engage-form input[type="text"],
.bib-engage-form input[type="email"],
.bib-engage-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* ≥16px: prevents iOS focus zoom */
  background: transparent;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: var(--radius);
}
.bib-engage-form textarea { resize: vertical; }
.bib-engage-consent {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px !important;
  line-height: 1.5;
  color: var(--ink); /* consent clauses stay full-contrast (LGPD Art. 8º §4: destacadas) */
}
.bib-engage-form label.bib-engage-consent > span { color: var(--ink); }
.bib-engage-consent input { margin-top: 3px; width: 16px; height: 16px; }
.bib-engage-submit {
  appearance: none;
  font: inherit;
  font-family: var(--font-prose);
  font-size: 16px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 10px 26px;
  cursor: pointer;
  justify-self: start;
  min-height: 44px;
}
.bib-engage-fine {
  font-family: var(--font-prose);
  font-size: 13px;
  color: var(--indigo-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .essay .bib-engage { padding: 22px 20px; border-radius: var(--radius); }
}