/* Payment Radar visitor engagement footer — v2 (2026-09-08)
 * Unified actionbar + threaded comment cards.
 */
.pra-engage {
  margin: 3rem 0 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--pra-border, rgba(15,23,42,0.12));
  display: flex; flex-direction: column; gap: 1.75rem;
  font-family: inherit;
}

/* ---------- Unified action bar (was 3 separate rows) ---------- */
.pra-actionbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--pra-border, rgba(15,23,42,0.10));
  border-radius: 999px;
  background: rgba(15,23,42,0.02);
}
.pra-actionbar-group {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.pra-actionbar-useful { flex: 1 1 auto; }
.pra-actionbar-share { margin-left: auto; }
.pra-actionbar-label {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--pra-muted, #6b7280); text-transform: uppercase;
  margin-right: 0.25rem;
}
.pra-actionbar-btn {
  border: 1px solid var(--pra-border, rgba(15,23,42,0.15));
  background: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font: inherit; font-size: 0.88rem;
  cursor: pointer; color: inherit;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: background 120ms, border-color 120ms, transform 100ms;
}
.pra-actionbar-btn:hover { background: #f3f4f6; }
.pra-actionbar-btn:active { transform: scale(0.97); }
.pra-actionbar-btn svg { width: 15px; height: 15px; flex: none; }
.pra-actionbar-btn.is-active[data-value="1"] {
  background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.35); color: #15803d;
}
.pra-actionbar-btn.is-active[data-value="-1"] {
  background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.35); color: #b91c1c;
}
.pra-actionbar-primary {
  background: #1d4ed8; color: #fff; border-color: #1d4ed8;
}
.pra-actionbar-primary:hover { background: #1e40af; }
.pra-actionbar-link {
  background: none; border: none; padding: 0.25rem 0.5rem;
  color: var(--pra-muted, #6b7280); font: inherit; font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.pra-actionbar-link:hover { color: #b91c1c; text-decoration: underline; }
.pra-actionbar-link svg { width: 14px; height: 14px; }

/* ---------- Comments section ---------- */
.pra-comments-section { display: flex; flex-direction: column; gap: 1rem; }
.pra-comments-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  flex-wrap: wrap;
}
.pra-comments-header h3 {
  margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em;
}
.pra-comments-empty {
  padding: 1rem; border: 1px dashed rgba(15,23,42,0.15); border-radius: 10px;
  color: #6b7280; font-size: 0.9rem; text-align: center; margin: 0;
}
#pra-comments-list {
  display: flex; flex-direction: column; gap: 0.9rem;
}

/* Each thread = a card. */
.pra-comment-card {
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  background: #fff;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.pra-comment-card-editor {
  background: rgba(29,78,216,0.03);
  border-color: rgba(29,78,216,0.20);
}
.pra-comment-head {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.85rem;
}
.pra-comment-author { font-weight: 600; }
.pra-comment-author.is-admin { color: #1d4ed8; }
.pra-comment-time { color: #6b7280; font-size: 0.75rem; margin-left: auto; }
.pra-comment-body {
  font-size: 0.95rem; line-height: 1.55; white-space: pre-wrap; margin: 0.1rem 0 0;
}
.pra-comment-actions { display: flex; gap: 0.5rem; margin-top: 0.15rem; }
.pra-comment-heart {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #6b7280; font-size: 0.85rem;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.pra-comment-heart.is-hearted { color: #dc2626; }
.pra-comment-heart svg { width: 14px; height: 14px; }

/* Chip (Editor badge) */
.pra-chip {
  display: inline-flex; align-items: center;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem; border-radius: 999px;
}
.pra-chip-editor { background: rgba(29,78,216,0.10); color: #1d4ed8; }

/* Nested replies (Editor answers under a visitor comment) */
.pra-replies {
  margin-top: 0.75rem; padding-left: 0.85rem;
  border-left: 3px solid rgba(29,78,216,0.20);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.pra-reply {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.55rem 0.75rem;
  background: rgba(29,78,216,0.04);
  border-radius: 8px;
}
.pra-reply .pra-comment-body { font-size: 0.9rem; }

/* ---------- Modals (share, report, comment error) ---------- */
.pra-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,0.55);
  display: none; align-items: center; justify-content: center;
  z-index: 60; padding: 1rem;
}
.pra-modal-backdrop.is-open { display: flex; }
.pra-modal {
  background: #fff; border-radius: 14px;
  max-width: 480px; width: 100%; max-height: 90vh; overflow: auto;
  padding: 1.5rem; box-shadow: 0 20px 60px rgba(15,23,42,0.30);
}
.pra-modal h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.pra-modal p { margin: 0.5rem 0; font-size: 0.9rem; color: #4b5563; }
.pra-modal textarea, .pra-modal input[type="text"], .pra-modal input[type="email"] {
  width: 100%; box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(15,23,42,0.18); border-radius: 8px;
  font: inherit; font-size: 0.95rem;
  margin-top: 0.35rem;
}
.pra-modal textarea { min-height: 120px; resize: vertical; }
.pra-modal-actions {
  display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem;
}
.pra-modal-actions button {
  border: 1px solid rgba(15,23,42,0.15);
  background: #fff; padding: 0.55rem 1rem; border-radius: 8px;
  font: inherit; font-size: 0.9rem; cursor: pointer;
}
.pra-modal-actions button.is-primary {
  background: #1d4ed8; color: #fff; border-color: #1d4ed8;
}
.pra-modal-actions button[disabled] { opacity: 0.5; cursor: default; }
.pra-modal .cf-turnstile { margin: 0.75rem 0; }
.pra-modal-note { font-size: 0.8rem; color: #6b7280; }
.pra-modal-hint { font-size: 0.75rem; color: #94a3b8; margin-top: 0.5rem; }
.pra-modal-error { color: #b91c1c; font-size: 0.85rem; margin-top: 0.4rem; }
.pra-modal-success { color: #15803d; font-size: 0.9rem; margin-top: 0.4rem; }

/* Share menu (inside modal) */
.pra-share-list {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem;
}
.pra-share-item {
  border: 1px solid rgba(15,23,42,0.15);
  background: #fff; padding: 0.5rem 0.9rem; border-radius: 999px;
  font: inherit; font-size: 0.9rem; text-decoration: none; color: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.pra-share-item:hover { background: #f3f4f6; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .pra-actionbar { background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.20); }
  .pra-actionbar-btn { background: rgba(15,23,42,0.4); border-color: rgba(148,163,184,0.25); }
  .pra-actionbar-btn:hover { background: rgba(148,163,184,0.20); }
  .pra-actionbar-primary { background: #2563eb; border-color: #2563eb; }
  .pra-comment-card { background: rgba(15,23,42,0.6); border-color: rgba(148,163,184,0.18); }
  .pra-comment-card-editor { background: rgba(29,78,216,0.10); border-color: rgba(29,78,216,0.35); }
  .pra-comments-empty { border-color: rgba(148,163,184,0.20); color: #94a3b8; }
  .pra-reply.is-editor { background: rgba(29,78,216,0.10); }
  .pra-reply.is-visitor { background: rgba(148,163,184,0.08); }
  .pra-modal { background: #0f172a; color: #f1f5f9; }
  .pra-modal p, .pra-modal-note, .pra-modal-hint { color: #94a3b8; }
  .pra-modal textarea, .pra-modal input { background: #1e293b; color: #f1f5f9; border-color: rgba(148,163,184,0.25); }
  .pra-sub-lang-select { background: #1e293b; color: #f1f5f9; border-color: rgba(148,163,184,0.25); }
  .pra-modal-actions button { background: #1e293b; color: #f1f5f9; border-color: rgba(148,163,184,0.25); }
  .pra-modal-actions button.is-primary { background: #2563eb; border-color: #2563eb; }
  .pra-share-item { background: #1e293b; color: #f1f5f9; border-color: rgba(148,163,184,0.25); }
  .pra-share-item:hover { background: #334155; }
}

/* Reply button on each comment (2026-09-08 v5.1.3) */
.pra-comment-reply-btn {
  background: transparent;
  border: none;
  color: #1d4ed8;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: background 0.15s;
}
.pra-comment-reply-btn:hover { background: rgba(29,78,216,0.08); text-decoration: underline; }

/* ---------- Newsletter signup modal (2026-09-08 v5.3.0) ---------- */
.pra-sub-cadences {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0.75rem 0 0.25rem;
}
.pra-sub-cad-label {
  flex: 0 0 100%;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6b7280;
}
.pra-sub-cad {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}
.pra-sub-cad input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1d4ed8;
  cursor: pointer;
}
.pra-sub-privacy {
  font-size: 0.75rem;
  line-height: 1.45;
  color: #94a3b8;
  margin-top: 0.5rem;
}
/* The digest button reads as an invitation, not a warning — the other
   pra-actionbar-link siblings turn red on hover because they are report
   channels. This one must not. */
.pra-actionbar-subscribe { color: #1d4ed8; }
.pra-actionbar-subscribe:hover { color: #1e40af; text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  .pra-sub-cad-label { color: #94a3b8; }
  .pra-sub-privacy { color: #64748b; }
  .pra-sub-cad input { accent-color: #2563eb; }
  .pra-actionbar-subscribe { color: #60a5fa; }
  .pra-actionbar-subscribe:hover { color: #93c5fd; }
}

/* ---------- Roundup signup card (2026-09-08 v5.3.0) ---------- */
.prd-subscribe {
  margin: 2.5rem 0 1.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(29,78,216,0.20);
  border-radius: 14px;
  background: rgba(29,78,216,0.03);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.prd-subscribe-copy { flex: 1 1 300px; min-width: 0; }
.prd-subscribe-copy h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  line-height: 1.3;
}
.prd-subscribe-copy p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4b5563;
}
.prd-subscribe-action { flex: 0 0 auto; }
.prd-subscribe-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #1d4ed8;
  color: #fff;
  border: 1px solid #1d4ed8;
  border-radius: 999px;
  padding: 0.6rem 1.35rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.prd-subscribe-btn:hover { background: #1e40af; }
.prd-subscribe-btn svg { width: 18px; height: 18px; }

@media (prefers-color-scheme: dark) {
  .prd-subscribe {
    background: rgba(29,78,216,0.10);
    border-color: rgba(29,78,216,0.35);
  }
  .prd-subscribe-copy p { color: #94a3b8; }
  .prd-subscribe-btn { background: #2563eb; border-color: #2563eb; }
  .prd-subscribe-btn:hover { background: #1d4ed8; }
}

/* Digest language picker in the signup modal.
 * Reuses .pra-sub-cadences for the row layout so it lines up with the cadence
 * checkboxes above it; only the <select> itself needs new rules, because
 * .pra-modal's input styling targets input[type=text|email] and textarea by
 * name and therefore never applied to a select. */
.pra-sub-lang { margin-top: 0.85rem; }
.pra-sub-lang-select {
  width: 100%; box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(15,23,42,0.18); border-radius: 8px;
  font: inherit; font-size: 0.95rem;
  background: #fff; color: inherit;
  cursor: pointer;
}

/* ---- Newsletter signup: optional name, required consent, terms popup ----
 * Added 2026-09-15. Every class below is emitted by radar-subscribe.js. Both
 * pages that load that script (payment-radar-article.htm, payment-radar-
 * roundup.htm) also load THIS stylesheet -- verified, because reusing a class
 * name without its CSS is a mistake already made three times on this project.
 *
 * NOTE: .pra-modal's own rules target `input` and `textarea` BY ELEMENT, so a
 * bare checkbox would inherit the dark text-input look (full width, padded,
 * bordered). Each rule below therefore resets what it needs explicitly rather
 * than assuming the cascade is neutral.
 */

.pra-sub-name{ margin-top:10px; }

.pra-sub-consent{
  display:flex; align-items:flex-start; gap:10px;
  margin:16px 0 6px; padding:12px 14px;
  background:rgba(148,163,184,0.10);
  border:1px solid rgba(148,163,184,0.28);
  border-radius:10px;
  font-size:13px; line-height:1.55;
  cursor:pointer;
}
/* Undo the .pra-modal input rules: this is a checkbox, not a text field. */
.pra-sub-consent input[type="checkbox"]{
  width:17px; height:17px; min-width:17px;
  margin:1px 0 0; padding:0;
  flex:0 0 auto;
  accent-color:#0094d4;
  background:none; border:0; border-radius:0;
  cursor:pointer;
}
.pra-sub-consent span{ flex:1 1 auto; }
.pra-sub-consent a{ color:#38bdf8; text-decoration:underline; text-underline-offset:2px; }
.pra-sub-consent a:hover{ text-decoration-thickness:2px; }

.pra-sub-tc-open{ margin:0 0 10px; }
/* A link rendered as a button element, so it must not inherit button chrome. */
.pra-sub-tc-open button{
  padding:0; min-width:0;
  background:none; border:0;
  color:#38bdf8; font-size:12px; font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
  cursor:pointer;
}

/* The popup is a SEPARATE stacked layer, not a re-render of .pra-modal, so the
 * half-filled subscribe form survives underneath. z-index sits above the
 * backdrop for that reason. */
.pra-tc-layer{
  position:fixed; inset:0; z-index:12000;
  display:flex; align-items:center; justify-content:center;
  padding:22px;
  background:rgba(2,6,16,0.66);
}
@supports (backdrop-filter: blur(3px)) {
  .pra-tc-layer{ backdrop-filter: blur(3px); }
}
.pra-tc-card{
  width:100%; max-width:470px;
  max-height:80vh; overflow-y:auto;
  padding:24px 26px;
  background:#111a2b;
  border:1px solid rgba(148,163,184,0.30);
  border-radius:14px;
  color:#e6edf7;
  box-shadow:0 18px 50px rgba(0,0,0,0.45);
}
.pra-tc-card h4{ margin:0 0 14px; font-size:17px; line-height:1.3; }
.pra-tc-card ul{ margin:0 0 16px; padding-left:20px; }
.pra-tc-card li{ margin-bottom:9px; font-size:13px; line-height:1.6; }
.pra-tc-links{ display:flex; flex-wrap:wrap; gap:18px; margin:0 0 18px; font-size:13px; font-weight:700; }
.pra-tc-links a{ color:#38bdf8; text-decoration:underline; text-underline-offset:2px; }
.pra-tc-actions{ display:flex; justify-content:flex-end; }

@media (max-width:520px){
  .pra-tc-card{ padding:20px 18px; max-height:86vh; }
  .pra-sub-consent{ font-size:12.5px; padding:11px 12px; }
}

/* ---- Article action bar on narrow screens -------------------------------
 * actionbar mobile · added 2026-09-15
 *
 * The bar had NO mobile rules, so it wrapped into three rows that did not share
 * a left edge. Causes, in order of visibility:
 *
 *   1. .pra-actionbar-btn is a bordered pill (padding .5rem .9rem) while
 *      .pra-actionbar-link is bare text (padding .25rem .5rem), so a pill and a
 *      plain link start their text at different x — the misalignment itself.
 *   2. `flex: 1 1 auto` on the useful group and `margin-left: auto` on the share
 *      group exist to push share right on ONE line. Once wrapped they fight and
 *      scatter the rows.
 *   3. border-radius: 999px is right for a one-line bar; on a ~110px-tall box it
 *      renders as a blob.
 *
 * Breakpoint is 1060px, MEASURED not guessed: the bar only fits on one line
 * above ~1050px (60px tall at 1100px, 107px i.e. wrapped at 1000px). A 640px
 * breakpoint left a broken band from 640-1050 where it wrapped raggedly with
 * no mobile rules applied -- which is the tablet width the first fix missed.
 *
 * Above 1060px it stays the original single pill row, untouched.
 * ---------------------------------------------------------------------- */
@media (max-width:1060px){
  .pra-actionbar{
    /* One group per row, stacked, instead of a wrapping row. */
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
    gap:9px;
    padding:13px 14px;
    /* A pill radius on a multi-row box reads as a lozenge. */
    border-radius:16px;
  }
  /* Neutralise the one-line pushing rules. Left unset they distribute leftover
     space across wrapped rows and misalign them. */
  .pra-actionbar-useful,
  .pra-actionbar-share{
    flex:0 0 auto;
    margin-left:0;
    width:100%;
    gap:8px;
    justify-content:flex-start;
  }
  /* Common left edge: match the pill's horizontal padding so a plain link's text
     starts on the same vertical line as a button's. Keeps links text-like -- no
     border, no fill -- so the primary/secondary hierarchy survives. */
  .pra-actionbar-link{
    padding:0.5rem 0.9rem;
  }
  /* "WAS THIS USEFUL?" on its own line rather than competing with Yes/No for
     width, which is what forced the first wrap. */
  .pra-actionbar-label{
    width:100%;
    margin:0 0 1px;
  }
}