/* ============================================================================
   Worship Planner — Prayers tab
   Consumes the same CSS vars (--wp-*) as planner.css. Passage accent colors
   match the rest of the app: OT #8B6F3E · Psalm #4F6B7A · Epistle #6B5A8C ·
   Gospel #8C5A5A.
   ============================================================================ */

.wp-pr { display: flex; flex-direction: column; gap: 0; }

/* ---------- control bar ---------- */
.wp-pr-controls {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 28px 40px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--wp-rule);
}
.wp-pr-ctrl { display: flex; flex-direction: column; gap: 8px; }
.wp-pr-ctrl-scripture { flex: 1; min-width: 280px; }
.wp-pr-ctrl-label {
  font-family: var(--wp-font-mono);
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp-ink-faint);
}

/* language register — segmented control (reuses .wp-seg / .wp-seg-btn base) */
.wp-pr-register { align-self: flex-start; }

/* lectionary track + RCL version toggles (reuses .wp-seg / .wp-seg-btn base) */
.wp-pr-track { display: flex; flex-wrap: wrap; gap: 8px 12px; align-self: flex-start; }

/* Language stacked above Lectionary in one column */
.wp-pr-ctrl-stack { display: flex; flex-direction: column; gap: 20px; }

/* scripture chips — multi-select */
.wp-pr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-pr-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 9px;
  background: var(--wp-surface);
  border: 1px solid var(--wp-rule);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  color: var(--wp-ink-soft);
  transition: background .12s, border-color .12s, color .12s;
}
.wp-pr-chip:hover { border-color: var(--wp-ink-faint); }
.wp-pr-chip-box {
  width: 13px; height: 13px; flex: none;
  border: 1.5px solid var(--wp-ink-faint);
  border-radius: 3px;
  position: relative;
  transition: background .12s, border-color .12s;
}
.wp-pr-chip.on .wp-pr-chip-box::after {
  content: ""; position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 L10 17.5 L19 6.5'/%3E%3C/svg%3E") center/11px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 L10 17.5 L19 6.5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.wp-pr-chip-short {
  font-family: var(--wp-font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
}
.wp-pr-chip-ref {
  font-family: var(--wp-font-display);
  font-size: 13px; letter-spacing: -0.005em;
  color: var(--wp-ink-faint);
}
.wp-pr-chip.on .wp-pr-chip-ref { color: var(--wp-ink-soft); }

/* per-passage accent when selected */
.wp-pr-chip[data-passage="ot"].on    { color: #8B6F3E; border-color: color-mix(in oklab, #8B6F3E 55%, var(--wp-rule)); background: color-mix(in oklab, #8B6F3E 10%, var(--wp-surface)); }
.wp-pr-chip[data-passage="psalm"].on  { color: #4F6B7A; border-color: color-mix(in oklab, #4F6B7A 55%, var(--wp-rule)); background: color-mix(in oklab, #4F6B7A 10%, var(--wp-surface)); }
.wp-pr-chip[data-passage="epistle"].on { color: #6B5A8C; border-color: color-mix(in oklab, #6B5A8C 55%, var(--wp-rule)); background: color-mix(in oklab, #6B5A8C 10%, var(--wp-surface)); }
.wp-pr-chip[data-passage="gospel"].on { color: #8C5A5A; border-color: color-mix(in oklab, #8C5A5A 55%, var(--wp-rule)); background: color-mix(in oklab, #8C5A5A 10%, var(--wp-surface)); }
.wp-pr-chip.on .wp-pr-chip-box { border-color: currentColor; }

/* ---------- summary line ---------- */
.wp-pr-summary {
  font-family: var(--wp-font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--wp-ink-soft);
  margin: 14px 0 4px;
}
.wp-pr-summary[data-empty="true"] { color: var(--wp-ink-faint); }

/* ---------- order of service ---------- */
.wp-pr-order {
  display: flex; flex-direction: column;
  gap: 14px;
  max-width: 70ch;
  margin: 14px auto 0;
  width: 100%;
}

.wp-pr-card {
  background: var(--wp-surface);
  border: 1px solid var(--wp-rule);
  border-radius: 6px;
  padding: 20px 26px 22px;
  position: relative;
}
.wp-pr-card::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px;
  width: 2px; border-radius: 2px;
  background: var(--wp-season-edge);
}
.wp-pr-card.is-empty { opacity: 0.7; }

.wp-pr-card-head {
  margin-bottom: 14px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px;
}
.wp-pr-head-main { flex: 1; min-width: 0; }
.wp-pr-el-id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wp-pr-el-label {
  font-family: var(--wp-font-display);
  font-size: 21px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--wp-season-ink);
  margin: 0; line-height: 1.1;
}
.wp-pr-reg-tag {
  font-family: var(--wp-font-mono);
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp-ink-faint);
  border: 1px solid var(--wp-rule);
  border-radius: 999px;
  padding: 2px 8px;
}
.wp-pr-reg-tag.is-all { font-style: normal; }
.wp-pr-unison {
  font-family: var(--wp-font-mono);
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp-season-ink);
  border: 1px solid var(--wp-season-edge);
  border-radius: 999px;
  padding: 2px 8px;
}
.wp-pr-el-note {
  font-family: var(--wp-font-body);
  font-size: 12px; line-height: 1.45;
  color: var(--wp-ink-faint);
  margin: 6px 0 0; max-width: 60ch;
}

/* a cell = one prayer (illumination renders several) */
.wp-pr-cell { margin-top: 16px; }
.wp-pr-cell:first-of-type { margin-top: 0; }
.wp-pr-cell + .wp-pr-cell { padding-top: 16px; border-top: 1px dashed var(--wp-rule); }

.wp-pr-cell-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin-bottom: 10px;
}
.wp-pr-perm { display: inline-flex; align-items: center; gap: 4px; }
.wp-pr-perm-pill {
  font-family: var(--wp-font-mono);
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--wp-rule);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--wp-ink-soft);
}
.wp-pr-perm-pill[data-passage="ot"]    { color: #8B6F3E; border-color: color-mix(in oklab, #8B6F3E 35%, var(--wp-rule)); }
.wp-pr-perm-pill[data-passage="psalm"]  { color: #4F6B7A; border-color: color-mix(in oklab, #4F6B7A 35%, var(--wp-rule)); }
.wp-pr-perm-pill[data-passage="epistle"] { color: #6B5A8C; border-color: color-mix(in oklab, #6B5A8C 35%, var(--wp-rule)); }
.wp-pr-perm-pill[data-passage="gospel"] { color: #8C5A5A; border-color: color-mix(in oklab, #8C5A5A 35%, var(--wp-rule)); }
.wp-pr-perm-all {
  font-family: var(--wp-font-mono);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600;
  color: var(--wp-season-ink);
}
.wp-pr-cell-ref {
  font-family: var(--wp-font-display);
  font-size: 13.5px; letter-spacing: -0.005em;
  color: var(--wp-ink-soft);
}
.wp-pr-fallback {
  font-family: var(--wp-font-mono);
  font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp-ink-faint);
  border: 1px dashed var(--wp-rule);
  border-radius: 3px;
  padding: 2px 6px;
}
.wp-pr-kind {
  font-family: var(--wp-font-mono);
  font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 3px;
  padding: 2px 6px;
}
.wp-pr-kind.is-combined {
  color: var(--wp-season-ink);
  border: 1px solid var(--wp-season-edge);
  background: color-mix(in oklab, var(--wp-season) 8%, var(--wp-surface));
}
.wp-pr-kind.is-single {
  color: var(--wp-ink-faint);
  border: 1px solid var(--wp-rule);
}
.wp-pr-summary-note { color: var(--wp-ink-faint); }

/* ---------- prayer text ---------- */
.wp-pr-text {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--wp-ink);
  letter-spacing: 0.002em;
}
.wp-pr-line { margin: 0; text-wrap: pretty; }
.wp-pr-line + .wp-pr-line { margin-top: 2px; }
.wp-pr-stanza-gap { height: 12px; }

/* congregational (unison) prayers — printed bold */
.wp-pr-text.is-congregational .wp-pr-line { font-weight: 600; }

/* responsive call-to-worship */
.wp-pr-text.is-responsive { font-size: 17px; }
.wp-pr-resp {
  margin: 0;
}
.wp-pr-resp + .wp-pr-resp { margin-top: 5px; }
.wp-pr-resp.is-people { padding-left: 1.6em; }
.wp-pr-resp.is-people .wp-pr-resp-body { font-weight: 600; }
.wp-pr-resp-body { text-wrap: pretty; }

/* ---------- empty / none / unwritten ---------- */
.wp-pr-none {
  font-family: var(--wp-font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--wp-ink-faint);
  margin: 0;
}
.wp-pr-prompt {
  max-width: 70ch; margin: 24px auto 0; text-align: center;
  padding: 40px 24px;
  border: 1px dashed var(--wp-rule);
  border-radius: 6px;
  color: var(--wp-ink-soft);
  font-family: var(--wp-font-display);
  font-size: 16px;
}
.wp-pr-prompt p { margin: 0; }

.wp-pr-unwritten {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 64px 24px; gap: 14px;
}
.wp-pr-unwritten-icon {
  color: var(--wp-season-ink);
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border: 1px solid var(--wp-season-edge);
  border-radius: 999px;
  opacity: 0.8;
}
.wp-pr-unwritten-h {
  font-family: var(--wp-font-display);
  font-size: 26px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--wp-season-ink); margin: 0;
}
.wp-pr-unwritten-sub {
  max-width: 60ch; margin: 0;
  font-size: 13.5px; line-height: 1.6; color: var(--wp-ink-soft);
}

@media (max-width: 720px) {
  .wp-pr-controls { gap: 20px; }
  .wp-pr-card { padding: 18px 18px 20px; }
}

/* ---------- card footer + actions ---------- */
.wp-pr-ctrl-copy { margin-left: auto; align-self: flex-end; }

.wp-pr-card-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--wp-rule);
}
.wp-pr-act {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wp-font-mono);
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 6px 11px;
  background: var(--wp-surface);
  color: var(--wp-ink-soft);
  border: 1px solid var(--wp-rule);
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.wp-pr-act:hover { border-color: var(--wp-ink-faint); color: var(--wp-ink); }
.wp-pr-act.is-done { color: var(--wp-season-ink); border-color: var(--wp-season-edge); }

.wp-pr-act-plan.is-on {
  color: var(--wp-season-ink);
  border-color: var(--wp-season-edge);
  background: color-mix(in oklab, var(--wp-season) 10%, var(--wp-surface));
}
.wp-pr-act-check { font-size: 11px; line-height: 1; }

.wp-pr-card.is-in-plan::before { background: var(--wp-season); }

/* the "Copy service set" button sits at control-bar height */
.wp-pr-ctrl-copy .wp-pr-act { padding: 8px 13px; }

/* ---------- hide / collapse ---------- */
.wp-pr-hide-actions {
  display: flex; flex-direction: column; gap: 5px;
  flex: none; align-items: stretch;
}
.wp-pr-hidebtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wp-font-mono);
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 9px;
  background: transparent;
  color: var(--wp-ink-faint);
  border: 1px solid var(--wp-rule);
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.wp-pr-hidebtn:hover { color: var(--wp-ink-soft); border-color: var(--wp-ink-faint); background: var(--wp-surface); }
.wp-pr-hidebtn svg { flex: none; opacity: 0.8; }

/* collapsed card */
.wp-pr-card.is-collapsed { padding: 13px 26px; }
.wp-pr-card.is-collapsed::before { background: var(--wp-rule); }
.wp-pr-card.is-global-hidden::before {
  background: repeating-linear-gradient(180deg, var(--wp-ink-faint) 0 3px, transparent 3px 6px);
}
.wp-pr-collapsed {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.wp-pr-collapsed-l { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.wp-pr-collapsed .wp-pr-el-label { font-size: 17px; color: var(--wp-ink-soft); }
.wp-pr-hidden-tag {
  font-family: var(--wp-font-mono);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp-ink-faint);
}
.wp-pr-showbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wp-font-mono);
  font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 6px 12px;
  background: var(--wp-surface);
  color: var(--wp-ink-soft);
  border: 1px solid var(--wp-rule);
  border-radius: 4px;
  cursor: pointer; flex: none;
  transition: background .12s, border-color .12s, color .12s;
}
.wp-pr-showbtn:hover { color: var(--wp-season-ink); border-color: var(--wp-season-edge); }

/* ---------- per-cell action row ---------- */
.wp-pr-cell-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
}
.wp-pr-cell.is-in-plan { position: relative; }
.wp-pr-cell.is-in-plan .wp-pr-cell-foot { border-top: 0; }

/* ---------- service-plan: Prayers section ---------- */
.wp-plan-prayers { margin-top: 14px; }
.wp-plan-prayers .wp-plan-group-h[data-service="prayers"] .wp-plan-group-dot { background: var(--wp-season-ink); }
.wp-plan-prayer-list { list-style: none; margin: 0; padding: 0; }
.wp-plan-prayer {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--wp-rule);
}
.wp-plan-prayer:last-child { border-bottom: 0; }
.wp-plan-prayer-main { flex: 1; min-width: 0; }
.wp-plan-prayer-l {
  font-family: var(--wp-font-display);
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  line-height: 1.3; color: var(--wp-ink);
}
.wp-plan-prayer-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 3px;
}
.wp-plan-prayer-reg {
  font-family: var(--wp-font-mono);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp-ink-faint);
}
.wp-plan-prayer-perm {
  font-family: var(--wp-font-mono);
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wp-ink-soft);
  border: 1px solid var(--wp-rule);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ---------- Affirmation of Faith (top card of the Prayers tab) ---------- */
/* Rides the same readings multi-select as the prayers, minus the Psalm.
   Reuses .wp-pr-card / .wp-pr-el-label / .wp-pr-text; only the bits below are new. */
.aff-top:empty { display: none; margin: 0; }
.aff-card { margin-bottom: 0; }

.aff-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.aff-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--wp-font-mono);
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 9px;
  background: var(--wp-surface);
  color: var(--wp-ink-faint);
  border: 1px solid var(--wp-rule);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.aff-chip:hover { border-color: var(--wp-ink-faint); color: var(--wp-ink); }
.aff-chip.on {
  color: var(--wp-season-ink);
  border-color: var(--wp-season-edge);
  background: color-mix(in oklab, var(--wp-season) 10%, var(--wp-surface));
}
.aff-chip-alt { font-size: 8.5px; opacity: 0.75; }

.aff-pick-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px; }
.aff-id {
  font-family: var(--wp-font-mono);
  font-size: 11px; letter-spacing: 0.06em; font-weight: 600;
  color: var(--wp-season-ink);
  border: 1px solid var(--wp-season-edge);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}
.aff-title {
  font-family: var(--wp-font-display);
  font-size: 16px; letter-spacing: -0.005em; line-height: 1.25;
  color: var(--wp-ink);
}
.aff-why {
  font-family: var(--wp-font-body);
  font-size: 13px; line-height: 1.5;
  color: var(--wp-ink-soft);
  margin: 7px 0 0; max-width: 62ch;
}

.aff-nicene {
  display: flex; align-items: flex-start; gap: 7px;
  font-family: var(--wp-font-body);
  font-size: 12.5px; line-height: 1.45;
  color: var(--wp-ink-soft);
  margin: 12px 0 0;
  padding: 9px 12px;
  border: 1px solid var(--wp-season-edge);
  border-radius: 4px;
  background: color-mix(in oklab, var(--wp-season) 6%, var(--wp-surface));
}
.aff-star { color: var(--wp-season-ink); line-height: 1.3; }

.aff-note {
  font-family: var(--wp-font-body);
  font-size: 12px; line-height: 1.45; font-style: italic;
  color: var(--wp-ink-faint);
  margin: 9px 0 0; max-width: 62ch;
}

.aff-disclose {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wp-font-mono);
  font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--wp-ink-faint);
  background: none; border: 0; padding: 0;
  margin: 13px 14px 0 0;
  cursor: pointer;
}
.aff-disclose:hover { color: var(--wp-ink); }
.aff-caret { font-size: 11px; line-height: 1; }

.aff-text { margin-top: 10px; }
.aff-fine {
  font-family: var(--wp-font-body);
  font-size: 11px; line-height: 1.4;
  color: var(--wp-ink-faint);
  margin: 5px 0 0;
}

.aff-lessons { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.aff-lesson-h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.aff-lesson-l {
  font-family: var(--wp-font-mono);
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp-ink-soft);
}
.aff-match-list { list-style: none; margin: 6px 0 0; padding: 0; }
.aff-match {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
  font-family: var(--wp-font-body);
  font-size: 12.5px; line-height: 1.45;
  color: var(--wp-ink-soft);
  padding: 4px 0;
}
.aff-match-id {
  font-family: var(--wp-font-mono);
  font-size: 10px; letter-spacing: 0.05em;
  color: var(--wp-ink);
  white-space: nowrap;
}
.aff-match-note { flex: 1 1 24ch; min-width: 0; }
.aff-grade {
  font-family: var(--wp-font-mono);
  font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--wp-rule);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--wp-ink-faint);
  white-space: nowrap;
}
.aff-grade.is-direct {
  color: var(--wp-season-ink);
  border-color: var(--wp-season-edge);
  background: color-mix(in oklab, var(--wp-season) 10%, var(--wp-surface));
}
.aff-grade.is-strong { color: var(--wp-ink-soft); border-color: var(--wp-ink-faint); }