/* Church features (src/components/sites/inpeace/features): built on the page's own tokens (--ink, --gold, --glass, --line, --serif) */
#btn-church { color: var(--gold); }
#btn-church svg { width: 22px; height: 22px; }

.ch-sheet .ch-body { padding: 4px 18px 18px; max-height: calc(70vh - 60px); overflow: auto; font-size: 14px; line-height: 1.55; }
.ch-sheet h2 svg { color: var(--gold); }
.ch-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ch-row.end { justify-content: flex-end; }
.ch-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(243, 231, 207, .28);
  background: rgba(255, 255, 255, .04); color: var(--ink); font: 400 13.5px var(--sans); cursor: pointer; }
.ch-btn:hover { background: rgba(255, 255, 255, .09); }
.ch-btn.gold { border-color: rgba(231, 181, 106, .75); color: var(--gold); }
.ch-btn svg { width: 16px; height: 16px; }
.ch-note { color: var(--ink-dim); font-size: 13px; margin: 12px 0 0; }
.ch-note.small { font-size: 12px; }
.ch-note.center { text-align: center; }

/* Angelus reader */
.ch-prayer { background: rgba(255, 255, 255, .035); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font: 400 16px/1.6 var(--serif); }
.ch-prayer p { margin: 0 0 10px; }
.ch-prayer p:last-child { margin-bottom: 0; }
.ch-prayer b { color: var(--gold); font-weight: 500; }
.ch-prayer .ch-resp { color: var(--ink-dim); }
.ch-prayer .ch-hm { font-size: 15px; }
.ch-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.ch-dots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--gold); }
.ch-dots i.on { background: var(--gold); }

/* banner (Angelus time) and prompt (after a candle): glass strips over the scene */
.ch-banner, .ch-prompt { position: fixed; left: 50%; z-index: 30; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: calc(100vw - 24px); padding: 10px 14px; border-radius: 22px; background: rgba(22, 18, 14, .82); border: 1px solid var(--line); color: var(--ink);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 400 14px var(--sans); opacity: 0; transition: opacity .5s, transform .5s; pointer-events: none; }
.ch-banner { top: max(70px, calc(env(safe-area-inset-top) + 64px)); transform: translate(-50%, -10px); }
.ch-prompt { bottom: max(100px, calc(env(safe-area-inset-bottom) + 96px)); transform: translate(-50%, 10px); }
.ch-banner.on, .ch-prompt.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ch-banner svg, .ch-prompt svg { color: var(--gold); }
.ch-toast { position: fixed; left: 50%; bottom: max(110px, calc(env(safe-area-inset-bottom) + 100px)); transform: translate(-50%, 8px); z-index: 40; padding: 8px 16px;
  border-radius: 999px; background: rgba(22, 18, 14, .88); border: 1px solid var(--line); color: var(--ink); font: 400 13px var(--sans); opacity: 0; transition: opacity .4s, transform .4s; }
.ch-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* journal */
.ch-input { width: 100%; resize: none; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(243, 231, 207, .22); background: rgba(0, 0, 0, .25);
  color: var(--ink); font: 400 15px/1.45 var(--sans); outline: none; }
.ch-input:focus { border-color: rgba(231, 181, 106, .7); }
.ch-list { list-style: none; margin: 14px 0 0; padding: 0; }
.ch-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(243, 231, 207, .08); }
.ch-entry { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-entry span { overflow-wrap: anywhere; }
.ch-entry small { color: var(--ink-dim); font-size: 12px; }
.ch-list li.answered .ch-entry span { color: var(--gold); }
.ch-icon-btn { flex: none; min-width: 34px; height: 34px; padding: 0 6px; display: flex; align-items: center; justify-content: center; border-radius: 999px;
  border: 1px solid rgba(231, 181, 106, .45); background: none; color: var(--gold); font: 400 12px var(--sans); cursor: pointer; }
.ch-icon-btn.dim { border-color: transparent; color: var(--ink-dim); }
.ch-icon-btn.dim[data-sure] { color: #f0a29a; border-color: rgba(240, 162, 154, .5); }

/* Hái lộc */
.ch-envelope-wrap { display: flex; justify-content: center; padding: 18px 0 4px; perspective: 600px; }
.ch-envelope { position: relative; width: 170px; height: 112px; border-radius: 10px; border: 1.5px solid #e7b56a; background: #a3191c; color: #f5d27a; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px; font: 500 26px var(--serif); animation: ch-sway 3s ease-in-out infinite;
  box-shadow: 0 10px 30px rgba(163, 25, 28, .35); }
.ch-envelope .flap { position: absolute; left: -1px; right: -1px; top: -1px; height: 58px; background: #8c1417; border: 1.5px solid #e7b56a; border-bottom: none;
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .7s ease; }
.ch-envelope.opening { animation: ch-open .9s ease forwards; }
.ch-envelope.opening .flap { transform: rotateX(180deg); }
@keyframes ch-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes ch-open { 0% { transform: scale(1); } 60% { transform: scale(1.08); } 100% { transform: scale(.85); opacity: 0; } }
.ch-verse { text-align: center; padding: 16px 8px 6px; }
.ch-verse small { display: block; color: var(--gold); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.ch-verse p { margin: 12px 0; font: 400 19px/1.55 var(--serif); color: #f7e4bd; }
.ch-verse b { color: var(--gold); font: italic 400 15px var(--serif); }
.ch-loc .ch-row { justify-content: center; }

/* hub */
.ch-hub-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; margin-top: 8px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03); color: var(--ink); text-align: left; cursor: pointer; }
.ch-hub-row:hover { background: rgba(255, 255, 255, .07); }
.ch-hub-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold);
  border: 1px solid rgba(231, 181, 106, .45); }
.ch-hub-txt { display: flex; flex-direction: column; min-width: 0; }
.ch-hub-txt b { font: 500 15px var(--serif); }
.ch-hub-txt small { color: var(--ink-dim); font-size: 12px; }
.ch-hub-count { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; color: var(--gold); font-size: 13.5px; }
.ch-setting { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; cursor: pointer; }
.ch-switch { appearance: none; -webkit-appearance: none; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgba(243, 231, 207, .18);
  position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.ch-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform .2s; }
.ch-switch:checked { background: rgba(231, 181, 106, .85); }
.ch-switch:checked::after { transform: translateX(16px); }

/* today's candles on the title, under the head count */
.title .ch-candles { margin-top: -4px; color: var(--gold); font-size: 13px; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); font-variant-numeric: tabular-nums; }
@media (max-height: 560px) { .title .ch-candles { display: none; } }