/* Faith filter (js/ui/filters.js) and symbols (js/ui/faith-marks.js). */
.faith-pick { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.faith-pick__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-canvas-alt); color: var(--color-ink);
  font-family: var(--font-mono); font-size: var(--text-mono-sm, 11px); letter-spacing: var(--tracking-mono, .06em); text-transform: uppercase; white-space: nowrap;
  transition: border-color .2s, background .2s, transform .2s var(--spring, ease);
}
.faith-pick__btn:hover { border-color: var(--color-ink); transform: translateY(-1px); }
.faith-pick__btn.is-on { background: var(--color-ink); color: var(--color-canvas-alt); border-color: var(--color-ink); }
.faith-pick__btn.is-on .faith-mark { --fc: var(--color-canvas-alt) !important; }
.faith-pick__n { opacity: .7; }
.faith-pick__glyph { font-size: 14px; line-height: 1; }
.faith-pick__clear { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-canvas-alt); cursor: pointer; color: var(--color-ink-soft); }
.faith-pick__clear:hover { border-color: var(--color-ink); color: var(--color-ink); }

.faith-mark { --fc: var(--color-ink); display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--fc); font-size: 15px; line-height: 1; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Apple Symbols', system-ui, sans-serif; font-variant-emoji: text; }
.faith-mark--svg svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.faith-mark--flag { display: inline-flex; align-items: stretch; width: 20px; height: 13px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(42, 31, 23, .2); }
.faith-mark--flag i { flex: 1; }

.faith-menu {
  position: fixed; z-index: 70; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  background: var(--color-canvas-alt); border: 1px solid var(--color-border); box-shadow: 0 24px 60px rgba(42, 31, 23, .22);
}
.faith-menu__q { margin: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-canvas); font: inherit; font-size: 14px; outline: none; }
.faith-menu__q:focus { border-color: var(--color-ink); }
.faith-menu ul { list-style: none; margin: 0; padding: 0 6px 6px; overflow: auto; overscroll-behavior: contain; }
.faith-menu__fam { position: sticky; top: 0; z-index: 1; padding: 10px 10px 4px; background: var(--color-canvas-alt); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent, #A0672E); }
.faith-menu [role="option"] {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px calc(10px + var(--d, 0) * 18px); border-radius: 10px; cursor: pointer; font-size: 14px; outline: none;
  position: relative;
}
.faith-menu [role="option"][style*="--d:1"], .faith-menu [role="option"][style*="--d:2"], .faith-menu [role="option"][style*="--d:3"] { font-size: 13px; color: var(--color-ink-soft); }
.faith-menu [role="option"]:not([style*="--d:0"])::before { content: ''; position: absolute; left: calc(var(--d) * 18px - 2px); top: 0; bottom: 50%; width: 8px; border-left: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); border-bottom-left-radius: 4px; }
.faith-menu [role="option"]:hover, .faith-menu [role="option"]:focus-visible { background: var(--color-surface-sunk); color: var(--color-ink); }
.faith-menu [role="option"][aria-selected="true"] { background: var(--color-ink); color: var(--color-canvas-alt); }
.faith-menu [role="option"][aria-selected="true"] .faith-mark { --fc: var(--color-canvas-alt) !important; }
.faith-menu__name { flex: 1; min-width: 0; }
.faith-menu__n { font-size: 10px; opacity: .7; }
.faith-menu__foot { margin: 0; padding: 8px 14px 10px; border-top: 1px solid var(--color-border); font-size: 10px; color: var(--color-ink-soft); }
@media (prefers-reduced-motion: no-preference) { .faith-menu { animation: pop-in .28s var(--spring, ease) both; transform-origin: top left; } }

.sheet__faith { display: inline-flex; align-items: center; gap: 6px; }
.filterbar .faith-pick { margin-right: 6px; }
.faith-pick__btn.is-on .faith-pick__n { color: var(--color-canvas-alt); }