/* /connect/views/prayer-wall.css — Prayer Wall scoped styles
 * "Vibrant Community" — energetic, welcoming, contemporary.
 * All .pw-* selectors. Relies on bcc-* tokens from connect-tokens.css.
 * Loaded after views.css, so equal-specificity rules here win.
 * No raw palette hex — every colour comes from a --bcc-* token.
 * ─────────────────────────────────────────────────────────────────── */

.pw-view { max-width: 900px; margin: 0 auto; }

/* ================================================================
   HEADER — warm, vibrant banner with live indicator
=============================================================== */
.pw-header {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bcc-s3);
  flex-wrap: wrap;
  padding: var(--bcc-s5);
  border-radius: var(--bcc-r-xl);
  border: 1px solid var(--bcc-border);
  background:
    radial-gradient(140% 160% at 0% 0%, var(--bcc-primary-soft), transparent 62%),
    radial-gradient(120% 150% at 100% 0%, var(--bcc-secondary-soft), transparent 58%),
    var(--bcc-surface-1);
}
.pw-header-text { min-width: 0; }
.pw-header-sub {
  margin: var(--bcc-s1) 0 0;
  font-family: var(--bcc-font-display);
  font-size: var(--bcc-t-md);
  font-style: italic;
  color: var(--bcc-ink-3);
}
#pw-live {
  flex-shrink: 0;
  margin-top: var(--bcc-s1);
  height: 28px;
  padding: 0 var(--bcc-s3);
  border-radius: var(--bcc-r-pill);
  background: var(--bcc-success-soft);
  box-shadow: inset 0 0 0 1px var(--bcc-success);
}

/* ================================================================
   TOOLBAR — search + add
=============================================================== */
.pw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bcc-s3);
  flex-wrap: wrap;
  margin-bottom: var(--bcc-s3);
}
.pw-search { flex: 1 1 220px; max-width: 440px; min-width: 180px; }
.pw-search-input { width: 100%; }
.pw-add-btn { flex-shrink: 0; min-height: 44px; }

/* ================================================================
   FILTERS — horizontally scrollable rows (no wrapping on mobile)
=============================================================== */
.pw-filters {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s1);
  margin-bottom: var(--bcc-s3);
}
.pw-filter-scroll {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bcc-border-strong) transparent;
}
.pw-filter-scroll::-webkit-scrollbar { height: 6px; }
.pw-filter-scroll::-webkit-scrollbar-thumb {
  background: var(--bcc-border-strong);
  border-radius: var(--bcc-r-pill);
}
.pw-filter-scroll::-webkit-scrollbar-track { background: transparent; }

.pw-filter-scroll .bcc-pill { flex: 0 0 auto; min-height: 44px; }

/* Category chips — colour-coded via tokens */
.pw-cat-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--bcc-s3);
  border-radius: var(--bcc-r-pill);
  border: 1px solid var(--bcc-border-strong);
  background: var(--bcc-surface-2);
  color: var(--bcc-ink-3);
  font-family: inherit;
  font-size: var(--bcc-t-xs);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--bcc-dur-1) var(--bcc-ease),
              border-color var(--bcc-dur-1) var(--bcc-ease),
              color var(--bcc-dur-1) var(--bcc-ease),
              transform var(--bcc-dur-1) var(--bcc-ease);
}
.pw-cat-chip:hover { border-color: var(--bcc-primary); color: var(--bcc-primary); transform: translateY(-1px); }
.pw-cat-chip:focus-visible { outline: none; box-shadow: var(--bcc-focus); }
.pw-cat-chip.active {
  background: var(--bcc-primary-soft);
  border-color: var(--bcc-primary);
  color: var(--bcc-primary);
}
.pw-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bcc-ink-3);
}
.pw-cat-chip[data-category="healing"]      .pw-cat-dot { background: var(--bcc-info); }
.pw-cat-chip[data-category="guidance"]     .pw-cat-dot { background: var(--bcc-secondary); }
.pw-cat-chip[data-category="praise"]       .pw-cat-dot { background: var(--bcc-success); }
.pw-cat-chip[data-category="protection"]   .pw-cat-dot { background: var(--bcc-primary); }
.pw-cat-chip[data-category="relationship"] .pw-cat-dot { background: var(--bcc-accent); }
.pw-cat-chip[data-category="grief"]        .pw-cat-dot { background: var(--bcc-danger); }
.pw-cat-chip[data-category="salvation"]    .pw-cat-dot { background: var(--bcc-warning); }
.pw-cat-chip[data-category="other"]        .pw-cat-dot { background: var(--bcc-ink-3); }

.pw-result-count {
  font-size: var(--bcc-t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bcc-ink-3);
  margin-bottom: var(--bcc-s3);
}

/* ================================================================
   LIST
=============================================================== */
.pw-list {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s5);
}

/* ================================================================
   CARD — warm but vibrant, category-accented
=============================================================== */
.pw-card {
  --pw-cat: var(--bcc-primary);
  --pw-cat-soft: var(--bcc-primary-soft);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--pw-cat-soft), transparent 40%),
    var(--bcc-surface-1);
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-r-xl);
  box-shadow: var(--bcc-shadow-1);
  padding: var(--bcc-s5);
  transition: border-color var(--bcc-dur-2) var(--bcc-ease),
              box-shadow   var(--bcc-dur-2) var(--bcc-ease),
              transform    var(--bcc-dur-2) var(--bcc-ease);
}
.pw-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pw-cat), transparent 85%);
}
.pw-card:hover {
  border-color: var(--pw-cat);
  box-shadow: var(--bcc-shadow-2);
  transform: translateY(-2px);
}
.pw-card:focus-within {
  border-color: var(--pw-cat);
  box-shadow: var(--bcc-shadow-2);
}
.pw-card-answered {
  background:
    linear-gradient(180deg, var(--bcc-success-soft), transparent 44%),
    var(--bcc-surface-1);
}
.pw-card-answered::before {
  background: linear-gradient(90deg, var(--bcc-success), transparent 85%);
}

/* ── Category → token colour map ──────────────────────────────── */
.pw-card[data-category="healing"]      { --pw-cat: var(--bcc-info);      --pw-cat-soft: var(--bcc-info-soft); }
.pw-card[data-category="guidance"]     { --pw-cat: var(--bcc-secondary); --pw-cat-soft: var(--bcc-secondary-soft); }
.pw-card[data-category="praise"]       { --pw-cat: var(--bcc-success);   --pw-cat-soft: var(--bcc-success-soft); }
.pw-card[data-category="protection"]   { --pw-cat: var(--bcc-primary);   --pw-cat-soft: var(--bcc-primary-soft); }
.pw-card[data-category="relationship"] { --pw-cat: var(--bcc-accent);    --pw-cat-soft: var(--bcc-accent-soft); }
.pw-card[data-category="grief"]        { --pw-cat: var(--bcc-danger);    --pw-cat-soft: var(--bcc-danger-soft); }
.pw-card[data-category="salvation"]    { --pw-cat: var(--bcc-warning);   --pw-cat-soft: var(--bcc-warning-soft); }
.pw-card[data-category="other"]        { --pw-cat: var(--bcc-ink-3);     --pw-cat-soft: var(--bcc-surface-3); }

/* ── Card header ──────────────────────────────────────────────── */
.pw-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bcc-s3);
}
.pw-card-avatar { flex-shrink: 0; line-height: 0; }
.pw-card-head-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.pw-card-author {
  font-family: var(--bcc-font-display);
  font-weight: 600;
  font-size: var(--bcc-t-lg);
  letter-spacing: .005em;
  line-height: 1.2;
  color: var(--bcc-ink);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.pw-author-link { cursor: pointer; transition: color var(--bcc-dur-1) var(--bcc-ease); }
.pw-author-link:hover { color: var(--bcc-primary); text-decoration: underline; }
.pw-author-link:focus-visible { outline: none; box-shadow: var(--bcc-focus); border-radius: var(--bcc-r-xs); }
.pw-card-time {
  font-family: var(--bcc-font);
  font-size: var(--bcc-t-xs);
  letter-spacing: .02em;
  color: var(--bcc-ink-3);
  overflow-wrap: anywhere;
}

.pw-card-badges {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.pw-badge-cat { text-transform: capitalize; background: var(--bcc-surface-3); color: var(--bcc-ink-2); }
.pw-badge-cat.pw-cat-healing      { background: var(--bcc-info-soft);      color: var(--bcc-info); }
.pw-badge-cat.pw-cat-guidance     { background: var(--bcc-secondary-soft); color: var(--bcc-secondary); }
.pw-badge-cat.pw-cat-praise       { background: var(--bcc-success-soft);   color: var(--bcc-success); }
.pw-badge-cat.pw-cat-protection   { background: var(--bcc-primary-soft);   color: var(--bcc-primary); }
.pw-badge-cat.pw-cat-relationship { background: var(--bcc-accent-soft);    color: var(--bcc-accent); }
.pw-badge-cat.pw-cat-grief        { background: var(--bcc-danger-soft);    color: var(--bcc-danger); }
.pw-badge-cat.pw-cat-salvation    { background: var(--bcc-warning-soft);   color: var(--bcc-warning); }
.pw-badge-cat.pw-cat-other        { background: var(--bcc-surface-3);      color: var(--bcc-ink-2); }

.pw-badge-answered { text-transform: none; }
.pw-pin-icon {
  display: inline-flex;
  align-items: center;
  color: var(--bcc-accent);
  font-size: var(--bcc-t-sm);
}

/* ── Card body ────────────────────────────────────────────────── */
.pw-card-body {
  margin: var(--bcc-s4) 0;
  font-size: var(--bcc-t-md);
  line-height: 1.7;
  color: var(--bcc-ink);
}
.pw-card-body p { margin: 0 0 var(--bcc-s2); }
.pw-card-body p:last-child { margin-bottom: 0; }
.pw-card-body br + br { display: none; }

/* ── Testimony block ───────────────────────────────────────────── */
.pw-testimony {
  margin: var(--bcc-s3) 0;
  padding: var(--bcc-s3) var(--bcc-s4);
  background: var(--bcc-success-soft);
  border-left: 3px solid var(--bcc-success);
  border-radius: 0 var(--bcc-r-md) var(--bcc-r-md) 0;
}
.pw-testimony-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  color: var(--bcc-success);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--bcc-s1);
}
.pw-testimony-text {
  font-family: var(--bcc-font-display);
  font-size: var(--bcc-t-md);
  color: var(--bcc-ink);
  font-style: italic;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Presence pill — "N praying now" ──────────────────────────── */
.pw-presence-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--bcc-s2);
  align-self: flex-start;
  font-size: var(--bcc-t-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--bcc-success);
  padding: 4px var(--bcc-s3);
  margin: var(--bcc-s1) 0 var(--bcc-s3);
  background: var(--bcc-success-soft);
  border-radius: var(--bcc-r-pill);
  box-shadow: inset 0 0 0 1px var(--bcc-success);
}
.pw-presence-indicator[hidden] { display: none; }
.pw-presence-count { font-variant-numeric: tabular-nums; font-weight: 700; }
.pw-presence-text { color: var(--bcc-ink-2); font-weight: 500; }
.pw-presence-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bcc-success);
  flex-shrink: 0;
  animation: pw-pulse 1.6s var(--bcc-ease) infinite;
}
@keyframes pw-pulse {
  0%, 100% { opacity: .35; transform: scale(.9); }
  50%       { opacity: 1;   transform: scale(1.25); }
}

/* ── Card footer ────────────────────────────────────────────────── */
.pw-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bcc-s3);
  padding-top: var(--bcc-s3);
  border-top: 1px solid var(--bcc-border-soft);
}
.pw-card-reactions {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  flex-wrap: wrap;
}
.pw-card-actions {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  flex-wrap: wrap;
  margin-left: auto;
}
.pw-admin-actions {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  padding-left: var(--bcc-s3);
  border-left: 1px solid var(--bcc-border-soft);
}
.pw-card-actions .bcc-btn { min-height: 44px; }

/* ── Reaction buttons — prominent, animated ────────────────────── */
.pw-react-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 var(--bcc-s4);
  border-radius: var(--bcc-r-pill);
  border: 1px solid var(--bcc-border-strong);
  background: var(--bcc-surface-2);
  color: var(--bcc-ink-2);
  font-family: inherit;
  font-size: var(--bcc-t-sm);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: background var(--bcc-dur-2) var(--bcc-ease),
              color var(--bcc-dur-2) var(--bcc-ease),
              border-color var(--bcc-dur-2) var(--bcc-ease),
              box-shadow var(--bcc-dur-2) var(--bcc-ease),
              transform var(--bcc-dur-2) var(--bcc-ease);
}
.pw-react-icon { display: inline-flex; line-height: 0; }
.pw-react-icon .bcc-icon { width: 1.05em; height: 1.05em; }
.pw-react-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: .85;
}
.pw-react-btn:hover { transform: translateY(-1px); }
.pw-react-btn:active { transform: translateY(0); }
.pw-react-btn:focus-visible { outline: none; box-shadow: var(--bcc-focus); }

/* Praying */
.pw-pray-btn { border-color: var(--bcc-border-strong); }
.pw-pray-btn .pw-react-icon { color: var(--bcc-primary); }
.pw-pray-btn:hover { border-color: var(--bcc-primary); color: var(--bcc-primary); }
.pw-pray-active {
  background: var(--bcc-primary-soft);
  border-color: var(--bcc-primary);
  color: var(--bcc-primary);
  box-shadow: 0 0 0 3px var(--bcc-primary-tint), var(--bcc-shadow-glow);
  animation: pw-pop var(--bcc-dur-3) var(--bcc-ease-spring);
}
.pw-pray-active .pw-react-icon,
.pw-pray-active .pw-react-count { color: var(--bcc-primary); opacity: 1; }
.pw-pray-active:hover { background: var(--bcc-primary-soft); border-color: var(--bcc-primary); color: var(--bcc-primary); }

/* Amen */
.pw-amen-btn .pw-react-icon { color: var(--bcc-accent); }
.pw-amen-btn:hover { border-color: var(--bcc-accent); color: var(--bcc-accent); }
.pw-amen-active {
  background: var(--bcc-accent-soft);
  border-color: var(--bcc-accent);
  color: var(--bcc-accent);
  box-shadow: 0 0 0 3px var(--bcc-accent-soft), var(--bcc-shadow-1);
  animation: pw-pop var(--bcc-dur-3) var(--bcc-ease-spring);
}
.pw-amen-active .pw-react-icon,
.pw-amen-active .pw-react-count { color: var(--bcc-accent); opacity: 1; }
.pw-amen-active:hover { background: var(--bcc-accent-soft); border-color: var(--bcc-accent); color: var(--bcc-accent); }

/* Comments toggle */
.pw-comment-btn .pw-react-icon { color: var(--bcc-secondary); }
.pw-comment-btn:hover { border-color: var(--bcc-secondary); color: var(--bcc-secondary); }
.pw-comment-btn[aria-expanded="true"] {
  background: var(--bcc-secondary-soft);
  border-color: var(--bcc-secondary);
  color: var(--bcc-secondary);
}

@keyframes pw-pop {
  0%   { transform: scale(.92); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* New-card highlight animation */
@keyframes pw-highlight {
  0% {
    background: var(--bcc-primary-soft);
    box-shadow: 0 0 0 1px var(--bcc-accent), var(--bcc-shadow-glow);
  }
  100% {
    background: var(--bcc-surface-1);
    box-shadow: var(--bcc-shadow-1);
  }
}
.pw-card-highlight { animation: pw-highlight 1.8s var(--bcc-ease) forwards; }

/* ================================================================
   VERSE REACTIONS + AI SUMMARY
=============================================================== */
.pw-verse-reactions-wrap { margin-top: var(--bcc-s3); }
.pw-verse-reactions-wrap:empty { display: none; }

.pw-ai-summary-wrap { margin-top: var(--bcc-s3); }
.pw-ai-summary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  height: 44px;
  font-size: var(--bcc-t-sm);
  font-weight: 600;
  color: var(--bcc-ink-2);
  padding: 0 var(--bcc-s4);
  border-radius: var(--bcc-r-pill);
  border: 1px solid var(--bcc-border-strong);
  background: var(--bcc-surface-2);
  cursor: pointer;
  transition: background var(--bcc-dur-2) var(--bcc-ease),
              color var(--bcc-dur-2) var(--bcc-ease),
              border-color var(--bcc-dur-2) var(--bcc-ease),
              transform var(--bcc-dur-2) var(--bcc-ease);
}
.pw-ai-summary-btn .bcc-icon { color: var(--bcc-accent); }
.pw-ai-summary-btn:hover {
  background: var(--bcc-primary-soft);
  border-color: var(--bcc-primary);
  color: var(--bcc-primary);
  transform: translateY(-1px);
}
.pw-ai-summary-btn:focus-visible { outline: none; box-shadow: var(--bcc-focus); }
.pw-ai-summary-card {
  background:
    linear-gradient(180deg, var(--bcc-primary-soft), transparent 60%),
    var(--bcc-surface-2);
  border-left: 3px solid var(--bcc-primary);
  padding: var(--bcc-s3) var(--bcc-s4);
  border-radius: 0 var(--bcc-r-md) var(--bcc-r-md) 0;
  margin-top: var(--bcc-s2);
  font-family: var(--bcc-font-display);
  font-size: var(--bcc-t-sm);
  line-height: 1.7;
  font-style: italic;
  color: var(--bcc-ink);
}

/* ================================================================
   COMMENT THREAD — clearer hierarchy (nested panel)
=============================================================== */
.pw-comment-thread {
  margin-top: var(--bcc-s4);
  padding: var(--bcc-s4);
  background: var(--bcc-surface-2);
  border: 1px solid var(--bcc-border-soft);
  border-radius: var(--bcc-r-lg);
}
.pw-comment-thread[hidden] { display: none; }
.pw-comment-list-label {
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--bcc-ink-3);
  margin-bottom: var(--bcc-s2);
}
.pw-comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s2);
  margin-bottom: var(--bcc-s3);
}
.pw-comment-empty {
  font-size: var(--bcc-t-sm);
  font-style: italic;
  color: var(--bcc-ink-3);
  padding: var(--bcc-s2) 0;
}
.pw-comment-loading { padding: var(--bcc-s2) 0; }
.pw-comment-item {
  display: flex;
  align-items: flex-start;
  gap: var(--bcc-s3);
  padding: var(--bcc-s3);
  background: var(--bcc-surface-3);
  border: 1px solid var(--bcc-border-soft);
  border-radius: var(--bcc-r-md);
}
.pw-comment-avatar { flex-shrink: 0; line-height: 0; }
.pw-comment-content { flex: 1; min-width: 0; }
.pw-comment-head {
  display: flex;
  align-items: baseline;
  gap: var(--bcc-s2);
  flex-wrap: wrap;
}
.pw-comment-author { font-size: var(--bcc-t-sm); font-weight: 700; color: var(--bcc-ink); }
.pw-comment-time { font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); }
.pw-comment-text {
  margin: var(--bcc-s1) 0 0;
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink-2);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.pw-comment-delete-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  opacity: .55;
  transition: opacity var(--bcc-dur-2) var(--bcc-ease), color var(--bcc-dur-2) var(--bcc-ease);
}
.pw-comment-delete-btn:hover { opacity: 1; color: var(--bcc-danger); }
.pw-comment-delete-btn:focus-visible { outline: none; box-shadow: var(--bcc-focus); }

.pw-comment-input-row {
  display: flex;
  gap: var(--bcc-s2);
  align-items: center;
  margin-top: var(--bcc-s3);
}
.pw-comment-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-md);
}
.pw-comment-input:focus {
  border-color: var(--bcc-primary);
  box-shadow: 0 0 0 3px var(--bcc-primary-tint);
}
.pw-comment-send-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--bcc-r-md);
}

/* ================================================================
   SCRIPTURE RESPONSES
=============================================================== */
.pw-scripture-responses-section {
  border-top: 1px solid var(--bcc-border-soft);
  padding: var(--bcc-s3) 0 var(--bcc-s2);
  margin-bottom: var(--bcc-s3);
}
.pw-scripture-responses-label {
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bcc-ink-3);
  margin-bottom: var(--bcc-s2);
}
.pw-scripture-response {
  background: var(--bcc-surface-3);
  border-left: 3px solid var(--bcc-accent);
  border-radius: 0 var(--bcc-r-sm) var(--bcc-r-sm) 0;
  padding: var(--bcc-s2) var(--bcc-s3);
  margin-bottom: var(--bcc-s2);
}
.pw-scripture-response-ref {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  color: var(--bcc-accent);
  margin-bottom: 2px;
}
.pw-scripture-response-text {
  font-family: var(--bcc-font-display);
  font-size: var(--bcc-t-md);
  line-height: 1.55;
  color: var(--bcc-ink);
}
.pw-scripture-response-who {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  margin-top: 2px;
}

/* ================================================================
   PRAYER CHAIN — progress tracker
=============================================================== */
.pw-chain-section {
  margin-top: var(--bcc-s4);
  padding-top: var(--bcc-s4);
  border-top: 1px solid var(--bcc-border-soft);
  padding-bottom: var(--bcc-s2);
}
.pw-chain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bcc-s2);
  flex-wrap: wrap;
}
.pw-chain-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--bcc-font-display);
  font-size: var(--bcc-t-lg);
  font-weight: 600;
  color: var(--bcc-ink);
}
.pw-chain-title .bcc-icon { color: var(--bcc-primary); }
.pw-chain-count {
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--bcc-primary);
  background: var(--bcc-primary-soft);
  padding: 2px var(--bcc-s2);
  border-radius: var(--bcc-r-pill);
}
.pw-chain-desc {
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink-3);
  margin: var(--bcc-s1) 0 var(--bcc-s2);
}
.pw-chain-progress { margin-top: var(--bcc-s2); }
.pw-chain-track {
  height: 10px;
  background: var(--bcc-surface-3);
  border-radius: var(--bcc-r-pill);
  overflow: hidden;
}
.pw-chain-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bcc-primary), var(--bcc-secondary));
  transition: width var(--bcc-dur-4) var(--bcc-ease);
}
.pw-chain-fill-done {
  background: linear-gradient(90deg, var(--bcc-success), var(--bcc-secondary));
}
.pw-chain-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bcc-s2);
  margin-top: var(--bcc-s3);
}
.pw-chain-slot {
  border: 1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-md);
  padding: var(--bcc-s3) var(--bcc-s2);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  background: var(--bcc-surface-1);
  transition: border-color var(--bcc-dur-2) var(--bcc-ease),
              background var(--bcc-dur-2) var(--bcc-ease),
              transform var(--bcc-dur-2) var(--bcc-ease);
}
.pw-chain-slot.pw-slot-empty { border-style: dashed; }
.pw-chain-slot.pw-slot-claimed {
  border-style: solid;
  border-color: var(--bcc-success);
  background: var(--bcc-success-soft);
}
.pw-slot-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bcc-surface-3);
  color: var(--bcc-ink-3);
}
.pw-slot-claimed .pw-slot-mark { background: var(--bcc-success-soft); color: var(--bcc-success); }
.pw-slot-label {
  font-size: var(--bcc-t-sm);
  font-weight: 700;
  color: var(--bcc-ink);
  line-height: 1.2;
}
.pw-slot-time {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
}
.pw-slot-fill { margin-top: 4px; }
.pw-chain-slot .bcc-btn { min-height: 44px; }
.pw-slot-taken {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--bcc-t-xs);
  color: var(--bcc-success);
  font-weight: 700;
}

/* ================================================================
   LOADING SKELETONS
=============================================================== */
.pw-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s5);
}
.pw-skeleton-card {
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-r-xl);
  padding: var(--bcc-s5);
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s3);
}
.pw-skeleton-head {
  display: flex;
  align-items: center;
  gap: var(--bcc-s3);
}
.pw-skel-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.pw-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.pw-skel-w40 { width: 40%; }
.pw-skel-badge { width: 72px; height: 20px; border-radius: var(--bcc-r-pill); flex-shrink: 0; }
.pw-skeleton-foot {
  display: flex;
  gap: var(--bcc-s2);
  padding-top: var(--bcc-s3);
  border-top: 1px solid var(--bcc-border-soft);
}
.pw-skel-pill { width: 96px; height: 36px; border-radius: var(--bcc-r-pill); }

/* ================================================================
   EMPTY STATES — polished
=============================================================== */
.pw-empty { padding: var(--bcc-s12) var(--bcc-s6); }
.pw-empty .bcc-btn { min-height: 44px; }
.pw-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: var(--bcc-s4);
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 20%, var(--bcc-primary-soft), transparent 70%),
    var(--bcc-surface-2);
  color: var(--bcc-primary);
  box-shadow: inset 0 0 0 1px var(--bcc-border);
}
.pw-empty-filtered .pw-empty-icon { color: var(--bcc-ink-3); background: var(--bcc-surface-2); }

/* ================================================================
   CHAR COUNT
=============================================================== */
.pw-char-count {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  text-align: right;
  margin-top: var(--bcc-s1);
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   RESPONSIVE — ≥1025 / 768–1024 / 481–767 / ≤480
=============================================================== */
@media (min-width: 1025px) {
  .pw-view { max-width: 920px; }
  .pw-card { padding: var(--bcc-s6); }
  .pw-card-body { font-size: var(--bcc-t-lg); }
}

@media (max-width: 1024px) {
  .pw-chain-band { grid-template-columns: repeat(2, 1fr); }
  .pw-skeleton-card { padding: var(--bcc-s4); }
}

@media (max-width: 767px) {
  .pw-list { gap: var(--bcc-s4); }
  .pw-card { padding: var(--bcc-s4); border-radius: var(--bcc-r-lg); }
  .pw-card-author { font-size: var(--bcc-t-md); }
  .pw-toolbar { gap: var(--bcc-s2); }
  .pw-search { flex: 1 1 100%; max-width: none; }
  .pw-add-btn { flex: 1 1 auto; }

  .pw-card-foot .bcc-btn,
  .pw-ai-summary-btn,
  .pw-chain-slot .bcc-btn,
  .pw-comment-input-row .bcc-btn { min-height: 44px; }
  .pw-cat-chip, .pw-filter-scroll .bcc-pill { min-height: 44px; }

  .pw-card-head { align-items: flex-start; }
  .pw-card-badges { justify-content: flex-start; flex-basis: 100%; }
}

@media (max-width: 480px) {
  .pw-header { align-items: center; padding: var(--bcc-s4); }
  .pw-react-label { display: none; }
  .pw-react-btn { padding: 0 var(--bcc-s3); gap: 5px; }
  .pw-card-actions { margin-left: 0; width: 100%; }
  .pw-admin-actions { border-left: none; padding-left: 0; }
  .pw-comment-input-row { flex-wrap: nowrap; }
  .pw-chain-band { gap: var(--bcc-s1); }
  .pw-chain-slot { padding: var(--bcc-s2) var(--bcc-s1); }
}

/* ================================================================
   MOTION PREFERENCES
=============================================================== */
@media (prefers-reduced-motion: reduce) {
  .pw-card,
  .pw-react-btn,
  .pw-ai-summary-btn,
  .pw-cat-chip,
  .pw-comment-delete-btn,
  .pw-chain-slot,
  .pw-chain-fill,
  .pw-author-link {
    transition: none;
  }
  .pw-card:hover,
  .pw-react-btn:hover,
  .pw-cat-chip:hover,
  .pw-ai-summary-btn:hover {
    transform: none;
  }
  .pw-presence-pulse { animation: none; }
  .pw-pray-active,
  .pw-amen-active { animation: none; }
  .pw-card-highlight { animation: none; box-shadow: 0 0 0 1px var(--bcc-accent), var(--bcc-shadow-glow); }
}