/* ==========================================================================
   Praying Wall — Prayer Circles (circles page only). Uses the site tokens.
   ========================================================================== */

.circles-page .tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-edge); white-space: nowrap;
}
.circles-page .notice {
  margin: 0; padding: 12px 14px; border-radius: 12px; font-size: .94rem; line-height: 1.5;
  background: var(--accent-soft); border: 1px solid var(--accent-edge);
}
.circles-page .msg { margin: 0; font-size: .9rem; color: var(--accent); min-height: 0; }
.circles-page .msg:empty { display: none; }
.circles-page .card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: var(--s5); }
.circles-page .card.narrow { max-width: 520px; margin-inline: auto; }
.circles-page .card.center { text-align: center; display: grid; gap: var(--s3); justify-items: center; }
.circles-page #c-home { display: grid; gap: var(--s7); }
.circles-page #c-home[hidden], .circles-page #c-view[hidden] { display: none; }

.circ-eyebrow { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }
.circ-invite h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.2rem); }
.circ-invite p { margin: 0; }

.circ-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); }
.circ-card { display: grid; gap: 6px; text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.circ-card:hover { border-color: var(--accent-edge); transform: translateY(-2px); }
.circ-card.is-closed { opacity: .65; }
.circ-card-name { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }

.circ-form { display: grid; gap: var(--s4); max-width: 560px; }
.circ-form .btn { justify-self: start; }
.circ-form p { margin: 0; }
.circ-paste { display: flex; gap: 10px; max-width: 560px; }
.circ-paste input, .circ-linkrow input {
  flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px;
}

.circ-back { display: inline-block; margin-bottom: var(--s4); color: var(--accent); text-decoration: none; font-weight: 700; font-size: .92rem; }
.circ-back:hover { text-decoration: underline; }
[dir="rtl"] .circ-back { unicode-bidi: plaintext; }
.circ-top { display: flex; gap: var(--s4); justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--s5); }
.circ-top h1 { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; }
.circ-top p { margin: 6px 0 0; }

.circ-cols { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 900px) { .circ-cols { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: var(--s6); } }
.circ-main { display: grid; gap: var(--s4); min-width: 0; }
.circ-side { display: grid; gap: var(--s4); }

.circ-compose { display: grid; gap: var(--s3); }
.circ-compose textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; resize: vertical; min-height: 84px;
}
.circ-compose textarea:focus, .circ-paste input:focus, .circ-linkrow input:focus { outline: 2px solid var(--focus, #F5D275); outline-offset: 1px; }
.circ-compose-row { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.circ-compose-row p { margin: 0; flex: 1; min-width: 200px; }

.circ-posts { display: grid; gap: var(--s3); }
.circ-post { display: grid; gap: var(--s3); }
.circ-post.is-hidden { border-style: dashed; }
.circ-post-head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.circ-post-head strong { font-family: var(--serif); font-size: 1.08rem; }
.circ-post-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: 1.04rem; }
.circ-tr { margin: 0; }
.circ-post-row { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.circ-post-tools { display: flex; gap: var(--s4); }
.circ-post .btn.is-done { opacity: 1; cursor: default; }

.circ-box { display: grid; gap: var(--s3); }
.circ-box h2 { margin: 0; font-family: var(--serif); font-size: 1.2rem; }
.circ-box p { margin: 0; }
.circ-box form { display: grid; gap: var(--s3); }
.circ-box form .btn { justify-self: start; }
.circ-quiet { padding-inline: var(--s2); justify-items: start; }
.circ-linkrow { display: flex; gap: 8px; }
.circ-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.circ-people li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.circ-person { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.circ-textbtn { font: inherit; font-size: .88rem; font-weight: 700; color: var(--accent); background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: start; }
.circ-textbtn:hover { text-decoration: underline; }
.circ-textbtn:disabled { color: var(--dim); cursor: default; text-decoration: none; }
.circ-textbtn.danger, .circles-page ~ dialog .btn.danger, .circ-dialog .btn.danger { color: #E26D6D; }
:root[data-theme-resolved="light"] .circ-textbtn.danger, :root[data-theme-resolved="light"] .circ-dialog .btn.danger { color: #B3261E; }
.circ-textbtn:focus-visible { outline: 2px solid var(--focus, #F5D275); outline-offset: 2px; border-radius: 4px; }

.circ-reasons { display: grid; gap: 8px; }
.circ-reason { display: flex; gap: 10px; align-items: center; font-size: .96rem; cursor: pointer; }
.circ-dialog { width: min(480px, calc(100vw - 32px)); }

.circ-teaser { border-bottom: 0; }
@media (max-width: 560px) { .circ-paste, .circ-linkrow { flex-wrap: wrap; } .circles-page .card { padding: var(--s4); } }

.circles-page .tag-quiet { color: var(--dim); background: transparent; border-color: var(--line); text-transform: none; letter-spacing: 0; font-weight: 600; }
.circ-post-tools { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; }
.circ-post-tools .circ-post-tools { gap: var(--s4); }
.circ-more { margin-inline-start: auto; font-weight: 600; color: var(--dim); }
.circ-post-tools .circ-post-tools .circ-textbtn { color: var(--dim); font-weight: 600; }
.circ-post-tools .circ-post-tools .circ-textbtn:hover { color: var(--text); }