/* ── The consent UI ───────────────────────────────────────────────────────
   Moved verbatim out of become-creator.html's inline <style> so the same rules
   dress the same markup everywhere a consent is asked for: the creator
   application, the upload page, and Profile Settings. Class names are
   unchanged (.bc-*) because script and screenshots both already know them.

   Three separate agreements, so three separate rows, three checkboxes and
   three stored records. Bundling them behind one tick is what failed the
   payment processor's re-review, and the distinction has to survive being
   judged from a screenshot. */
.bc-consents { margin: 26px 0 8px; display: flex; flex-direction: column; gap: 14px; }
.bc-consent-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-radius: 12px;
  border: 1px solid rgba(0, 136, 255, 0.25); background: rgba(255,255,255,0.02);
}
.bc-consent-row input[type="checkbox"] {
  width: 22px; height: 22px; flex-shrink: 0; margin: 0; accent-color: var(--accent);
  cursor: pointer;
}
.bc-consent-row label { font-size: 14px; line-height: 1.5; color: #fff; cursor: pointer; }
.bc-consent-row a { color: var(--accent); }

/* The likeness consent is a DIFFERENT kind of agreement from the two above
   it — those are documents you accept, this is permission to display a
   person publicly — and the reviewer requires it to read as separate at a
   glance. Logo yellow, its own heading, its own body copy: distinct
   without introducing a colour the brand does not already own. */
.bc-consent-card {
  /* 2px, not 1.5: Chrome floors fractional border widths, so 1.5 renders
     identically to the 1px rows above it — and this card has to read as
     distinct in a screenshot. */
  border: 2px solid var(--brand-yellow); border-radius: 14px;
  background: rgba(255, 215, 0, 0.05); padding: 18px;
}
.bc-consent-card h2 {
  margin: 0 0 10px; font-size: 17px; font-weight: 900; color: var(--brand-yellow);
  letter-spacing: 0.01em;
}
.bc-consent-card p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.78); }
.bc-consent-card ul { margin: 0 0 12px; padding-left: 20px; }
.bc-consent-card li { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.78); margin-bottom: 6px; }
.bc-consent-card .bc-consent-row {
  border-color: rgba(255, 215, 0, 0.55); background: rgba(255, 215, 0, 0.07); margin-top: 4px;
}
.bc-consent-card .bc-consent-row input[type="checkbox"] { accent-color: var(--brand-yellow); }
.bc-consent-card a { color: var(--brand-yellow); }

/* ── Additions for the re-acceptance surface ──────────────────────────────
   become-creator.html prints the document text into the page. Everywhere else
   the text arrives from /api/consents/outstanding and has to be readable
   inside a card that is not the whole page, so it gets its own scroll box.
   Nothing above this line changed. */
.bc-consent-doc { margin-bottom: 14px; }
.bc-consent-doc > h2 {
  margin: 0 0 10px; font-size: 16px; font-weight: 900; color: #fff; letter-spacing: 0.01em;
}
.bc-consent-body {
  max-height: 260px; overflow-y: auto; padding: 14px;
  border-radius: 12px; border: 1px solid rgba(0, 136, 255, 0.2);
  background: rgba(0, 0, 0, 0.25);
  font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.78);
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.bc-consent-body h2, .bc-consent-body h3 { font-size: 14px; color: #fff; margin: 14px 0 6px; }
.bc-consent-body h2:first-child, .bc-consent-body h3:first-child { margin-top: 0; }
.bc-consent-body p, .bc-consent-body li { margin: 0 0 8px; }
.bc-consent-body ul, .bc-consent-body ol { padding-left: 20px; margin: 0 0 8px; }
.bc-consent-body a { color: var(--accent); }
.bc-consent-card .bc-consent-body { border-color: rgba(255, 215, 0, 0.3); }

/* Each document accepts on its own button. One tick, one document, one write —
   there is deliberately no "accept all". */
.bc-consent-accept {
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid rgba(255, 215, 0, 0.4);
  background: linear-gradient(180deg, rgba(0, 136, 255, 0.4), rgba(0, 90, 200, 0.6));
  color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; letter-spacing: 0.03em;
  margin-top: 12px;
}
.bc-consent-accept:disabled { opacity: 0.5; cursor: not-allowed; }
.bc-consent-status { margin: 10px 0 0; font-size: 13px; color: rgba(255,255,255,0.6); }
.bc-consent-status.error { color: #ff8888; }
.bc-consent-done {
  margin: 0; padding: 14px; border-radius: 12px;
  border: 1px solid rgba(46, 125, 50, 0.35); background: rgba(46, 125, 50, 0.12);
  color: #66bb6a; font-size: 13.5px; font-weight: 700;
}

/* The blocking form on the upload page. */
.bc-consent-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, 0.82);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.bc-consent-overlay[hidden] { display: none; }
.bc-consent-overlay-inner {
  width: 100%; max-width: 620px; margin: auto;
  background: #0d0d0f; border: 1px solid rgba(0, 136, 255, 0.3);
  border-radius: 16px; padding: 22px;
}
.bc-consent-overlay-inner > h2 {
  margin: 0 0 6px; font-size: 19px; font-weight: 900; color: #fff;
}
.bc-consent-overlay-lead { margin: 0 0 4px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.7); }
.bc-consent-close {
  margin-top: 8px; padding: 10px 22px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2); background: transparent;
  color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
}