/**
 * 100x Faith Module - Styles
 * Spiritual priorities, reflections, quotes
 */

/* Container */
.faith-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Header */
.faith-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.faith-header .back-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.faith-header .back-btn:hover {
  background: var(--bg-primary);
  color: var(--text-dark);
  border-color: var(--teal-accent);
}

.faith-title h1 {
  font-family: var(--font-display);
  color: var(--text-dark);
  font-size: calc(2rem + var(--text-bump));
  margin: 0;
}

.faith-title p {
  color: var(--text-secondary);
  margin: var(--spacing-xs) 0 0;
}

/* Context from Roadmap */
.faith-context {
  background: linear-gradient(135deg, var(--teal-light) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.faith-context h3 {
  font-family: var(--font-display);
  color: var(--text-dark);
  margin: 0 0 var(--spacing-md);
  font-size: calc(1rem + var(--text-bump));
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.faith-context h3 i {
  color: var(--teal-ink);
}

.faith-context-item {
  padding: var(--spacing-sm) 0;
}

.faith-context-label {
  font-size: calc(0.75rem + var(--text-bump));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}

.faith-context-item p {
  margin: var(--spacing-xs) 0 0;
  color: var(--text-secondary);
  font-style: italic;
}

/* Section styling */
.faith-section {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.faith-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.faith-section-header h2 {
  font-family: var(--font-display);
  color: var(--text-dark);
  font-size: calc(1.25rem + var(--text-bump));
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.faith-section-header h2 i {
  color: var(--teal-ink);
}

.faith-section-description {
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-lg);
}

/* Empty state */
.faith-empty-state {
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

.faith-empty-state i {
  font-size: calc(2rem + var(--text-bump));
  display: block;
  margin-bottom: var(--spacing-sm);
  color: var(--teal-ink);
  opacity: 0.5;
}

.faith-empty-state p {
  margin: 0;
}

/* An invitation, not a notice: the line that names what this place is for
   carries the serif, and the how-to sits under it at a reading measure. */
.faith-empty-lead {
  font-family: var(--font-heading);
  font-size: calc(1.15rem + var(--text-bump));
  line-height: 1.5;
  color: var(--text-dark);
  margin-bottom: var(--spacing-sm) !important;
}

.faith-quotes-empty p + p {
  max-width: 46ch;
  margin-inline: auto;
  line-height: 1.6;
}

/* Priorities List - Card Layout */
.faith-priorities-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.faith-priority-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faith-priority-view {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--spacing-md);
  gap: var(--spacing-md);
}

.faith-priority-content {
  flex: 1;
  min-width: 0;
}

.faith-priority-what,
.faith-priority-why {
  margin-bottom: var(--spacing-sm);
}

.faith-priority-what:last-child,
.faith-priority-why:last-child {
  margin-bottom: 0;
}

.faith-priority-label {
  display: inline-block;
  font-weight: 600;
  color: var(--teal-ink);
  font-size: calc(0.75rem + var(--text-bump));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--spacing-xs);
}

.faith-priority-text {
  color: var(--text-dark);
  font-size: calc(0.9375rem + var(--text-bump));
  line-height: 1.5;
}

.faith-priority-actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

/* Edit mode */
.faith-priority-edit {
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}

.faith-priority-field {
  margin-bottom: var(--spacing-md);
}

.faith-priority-field label {
  display: block;
  font-weight: 600;
  font-size: calc(0.875rem + var(--text-bump));
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.faith-textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-body);
  font-size: calc(0.9375rem + var(--text-bump));
  color: var(--text-dark);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
  transition: all var(--transition-fast);
}

.faith-textarea:focus {
  border-color: var(--teal-accent);
  background: var(--bg-primary);
}

.faith-priority-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}

/* Legacy table styles (kept for backwards compatibility) */
.faith-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-md);
}

.faith-table th {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: calc(0.875rem + var(--text-bump));
  border-bottom: 2px solid var(--teal-accent);
}

.faith-table th:last-child {
  width: 50px;
}

.faith-table td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.faith-table tr:last-child td {
  border-bottom: none;
}

.faith-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-body);
  font-size: calc(0.875rem + var(--text-bump));
  color: var(--text-dark);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.faith-input:focus {
  border-color: var(--teal-accent);
  background: var(--bg-primary);
}

.faith-table-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--spacing-sm);
}

/* Reflections */
.faith-reflections-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Entry-area grammar (owner's 2026-08-23 redesign): the reflection sits on
   the pane surface — no box, the field's own hairline does the framing.
   The prompt label carries .entry-prompt (components/entry-area.css). */
.faith-reflection-item {
  padding: 0;
  background: transparent;
  border: none;
}

.faith-reflection-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-body);
  font-size: calc(1rem + var(--text-bump));
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: all var(--transition-fast);
}

.faith-reflection-input:focus {
  border-color: var(--teal-accent);
  box-shadow: var(--focus-ring);
}

.faith-reflections-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-lg);
}

/* Quotes */
.faith-quotes-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.faith-quote-card {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  padding-left: var(--spacing-xl);
  transition: all var(--transition-fast);
}

.faith-quote-card::before {
  content: '\201C';
  position: absolute;
  left: var(--spacing-md);
  top: var(--spacing-sm);
  font-family: Georgia, serif;
  font-size: calc(2rem + var(--text-bump));
  color: var(--teal-ink);
  opacity: 0.5;
  line-height: 1;
}

.faith-quote-card:hover {
  border-color: var(--teal-accent);
}

.faith-quote-input {
  width: 100%;
  padding: var(--spacing-sm);
  font-family: var(--font-body);
  font-size: calc(1rem + var(--text-bump));
  font-style: italic;
  line-height: 1.6;
  color: var(--text-dark);
  background: transparent;
  border: none;
  resize: vertical;
}

.faith-quote-input:focus {
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
}

.faith-quote-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-xs);
}

.faith-quotes-save {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-md);
}

/* Chat Section */
.faith-chat-section {
  text-align: center;
}

.faith-chat-section .btn-gold {
  margin-top: var(--spacing-sm);
}

/* Chat Container */
.faith-chat-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 150px);
}

.faith-chat-container .interview-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--spacing-md);
  flex-shrink: 0;
}

.faith-chat-container .interview-header .back-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.faith-chat-container .interview-header .back-btn:hover {
  background: var(--bg-primary);
  color: var(--text-dark);
}

.faith-chat-container .interview-title h2 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--text-dark);
}

.faith-chat-container .interview-title p {
  color: var(--text-secondary);
  margin: var(--spacing-xs) 0 0;
}

.faith-chat-container .chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faith-chat-container .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
}

.faith-chat-container .chat-input-container {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.faith-chat-container .chat-input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-body);
  font-size: calc(1rem + var(--text-bump));
  color: var(--text-dark);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  resize: none;
  max-height: 100px;
}

.faith-chat-container .chat-input:focus {
  border-color: var(--teal-accent);
}

.faith-chat-container .send-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--teal-fill);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.faith-chat-container .send-btn:hover {
  background: var(--navy-primary);
}

.faith-chat-container .interview-actions {
  flex-shrink: 0;
  padding-top: var(--spacing-md);
}

/* Streaming chat body (Rails-only wrapper). The seeded opener renders as the
   first `.message.ai` bubble inside the chat (via messages/_opener), identical
   to a streamed reply; this just supplies the vertical flow inside the faith
   chat container. */
.faith-chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-height: 0;
  overflow-y: auto;
}

/* Inline field-save status (Rails-only autosave indicator) */
.faith-field-status {
  font-size: calc(0.75rem + var(--text-bump));
  color: var(--text-muted);
  min-height: 1rem;
  margin-top: var(--spacing-xs);
}

/* Synthesis / lookup error slots (Rails-only Turbo-stream targets).
   Mirrors the original .scripture-error palette. */
.faith-synth-error,
.faith-scripture-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--error-light, #fee2e2);
  color: var(--error, #dc2626);
  border-radius: var(--radius-sm);
  font-size: calc(0.9rem + var(--text-bump));
}

/* On the scripture stage the message sits beside its way out, and wraps
   instead of squeezing the "type it in yourself" button off the edge. */
.faith-scripture-error {
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 0;
  padding: var(--spacing-md);
  line-height: 1.5;
}

.faith-scripture-error-message {
  flex: 1 1 16rem;
}

.faith-scripture-error .btn {
  color: var(--error, #dc2626);
  border-color: currentColor;
  white-space: nowrap;
}

/* Success state for buttons */
.btn-success {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: var(--text-light) !important;
}

/* Dark Theme */
[data-theme="dark"] .faith-container {
  color: var(--text-dark);
}

[data-theme="dark"] .faith-section,
[data-theme="dark"] .faith-quote-card {
  background: var(--bg-secondary);
}

[data-theme="dark"] .faith-context {
  background: linear-gradient(135deg, rgba(74, 155, 181, 0.1) 0%, var(--bg-secondary) 100%);
}

[data-theme="dark"] .faith-reflection-item {
  background: transparent;
}

[data-theme="dark"] .faith-reflection-input,
[data-theme="dark"] .faith-input {
  background: var(--bg-secondary);
}

[data-theme="dark"] .faith-reflection-input:focus,
[data-theme="dark"] .faith-input:focus {
  background: var(--bg-primary);
}

[data-theme="dark"] .faith-empty-state,
[data-theme="dark"] .faith-table th {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .faith-priority-card {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="dark"] .faith-priority-edit {
  background: var(--bg-secondary);
}

[data-theme="dark"] .faith-textarea {
  background: var(--bg-tertiary);
  /* --text-primary has never existed. An undefined custom property with no
     fallback is invalid at computed-value time, so this line did nothing and
     dark-theme reflection text fell back to whatever it inherited. */
  color: var(--text-dark);
}

[data-theme="dark"] .faith-textarea:focus {
  background: var(--bg-secondary);
}

[data-theme="dark"] .faith-chat-container .chat-container {
  background: var(--bg-secondary);
}

[data-theme="dark"] .faith-chat-container .chat-input-container {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .faith-chat-container .chat-input {
  background: var(--bg-secondary);
}

/* Responsive */
@media (max-width: 768px) {
  .faith-header {
    flex-wrap: wrap;
  }

  .faith-title h1 {
    font-size: calc(1.5rem + var(--text-bump));
  }

  .faith-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .faith-table {
    display: block;
    overflow-x: auto;
  }

  .faith-quote-card {
    padding-left: var(--spacing-lg);
  }

  .faith-quote-card::before {
    left: var(--spacing-sm);
    font-size: calc(1.5rem + var(--text-bump));
  }

  .faith-chat-container {
    height: calc(100dvh - 120px);
  }
}

/* ===========================================
   Verse of the Day
   =========================================== */
.faith-votd {
  background: linear-gradient(135deg, var(--teal-light) 0%, var(--bg-primary) 100%);
  border: 2px solid var(--teal-accent);
  position: relative;
  overflow: hidden;
}

.faith-votd::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--teal-accent) 0%, transparent 70%);
  opacity: 0.1;
  pointer-events: none;
}

.faith-votd-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.faith-votd-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.faith-votd-title i {
  color: var(--teal-ink);
  font-size: calc(1.25rem + var(--text-bump));
}

.faith-votd-title h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-dark);
  font-size: calc(1.1rem + var(--text-bump));
}

.faith-votd-topic {
  font-size: calc(0.75rem + var(--text-bump));
  background: var(--teal-fill);
  color: var(--text-on-accent);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.faith-votd-actions {
  display: flex;
  gap: var(--spacing-xs);
}

.faith-votd-content {
  margin-bottom: var(--spacing-md);
}

/* Today's verse reads on the same sheet as everything else scripture: serif, a
   reading measure, never clamped. (Sizing/measure come from .faith-verse-text;
   only the bottom rhythm is local.) */
.faith-votd-preview,
.faith-votd-text {
  margin: 0 0 var(--spacing-sm);
}

.faith-votd-preview {
  font-family: var(--font-heading);
  font-size: calc(1.1rem + var(--text-bump));
  color: var(--text-dark);
  line-height: 1.7;
}

.faith-votd-reference {
  display: block;
  font-size: calc(0.9rem + var(--text-bump));
  color: var(--text-secondary);
  font-weight: 600;
}

.faith-votd-footer {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* ===========================================
   Scripture Cards
   =========================================== */
.faith-scripture-card {
  background: var(--bg-primary);
  border-left: 4px solid var(--teal-accent);
  padding-left: var(--spacing-md) !important;
}

.faith-scripture-card::before {
  content: none; /* Remove the quote mark for scripture */
}

.faith-scripture-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.faith-scripture-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--teal-fill);
  color: var(--text-on-accent);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: calc(0.85rem + var(--text-bump));
  font-weight: 600;
}

.faith-scripture-badge i {
  font-size: calc(0.9rem + var(--text-bump));
}

.faith-scripture-translation {
  font-size: calc(0.75rem + var(--text-bump));
  background: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.faith-scripture-cached {
  color: var(--text-muted);
  font-size: calc(0.875rem + var(--text-bump));
}

/* The saved card gets the same reading treatment as the modal preview: the
   whole verse, wrapped, scrolling inside the card if it is long. */
.faith-scripture-text {
  margin-bottom: var(--spacing-xs);
}

.faith-scripture-text p {
  margin: 0;
}

.faith-scripture-loading {
  color: var(--text-muted);
  font-style: italic;
}

.faith-scripture-note {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px dashed var(--border-color);
}

.faith-scripture-note label {
  display: block;
  font-size: calc(0.75rem + var(--text-bump));
  color: var(--text-muted);
  margin-bottom: 4px;
}

.faith-note-input {
  width: 100%;
  padding: var(--spacing-sm);
  font-family: var(--font-body);
  font-size: calc(0.9rem + var(--text-bump));
  line-height: 1.5;
  color: var(--text-dark);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.faith-note-input:focus {
  border-color: var(--teal-accent);
  background: var(--bg-primary);
}

/* Quote type cards */
.faith-quote-type {
  padding-left: var(--spacing-xl);
}

.faith-quote-source {
  margin-top: var(--spacing-sm);
}

.faith-source-input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-family: var(--font-body);
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color);
}

.faith-source-input:focus {
  border-color: var(--teal-accent);
}

.faith-quote-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

/* Quotes header actions */
.faith-quotes-actions-header {
  display: flex;
  gap: var(--spacing-sm);
}

/* ===========================================
   Scripture Modal — Bootstrap variant (Rails)
   The Rails app renders the lookup dialog as a Bootstrap modal instead of the
   bespoke overlay below. Bootstrap supplies .modal/.modal-content/.modal-header/
   .modal-body chrome; these rules style the faith-specific inner pieces to mirror
   the original .scripture-* look.
   =========================================== */
/* The dialog shell, in the house pattern (same family as the People
   phone-photo panel): the <dialog> itself sizes and centers the card, the
   backdrop is the shared scrim, corners are square like everything else on
   the site. A reading surface earns more width than a utility panel. */
dialog.faith-scripture-modal {
  border: none;
  padding: 0;
  background: none;
  margin: auto;
  max-width: 720px;
  width: calc(100% - 2rem);
  max-height: calc(100dvh - 4rem);
}

.faith-scripture-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

/* The card. A flex column that caps its height and scrolls the body, so a
   long topics list scrolls inside the card instead of pinning the dialog to
   the viewport edges. */
.faith-scripture-modal .modal-content {
  display: flex;
  flex-direction: column;
  /* components.css caps every .modal-content at 500px / 90% — the shared
     bespoke-overlay card. This one is a reading surface and takes the whole
     width the dialog gives it, or a verse wraps every seven words. */
  width: 100%;
  max-width: none;
  max-height: calc(100dvh - 4rem);
  overflow: hidden;
  border: none;
  border-radius: 0;
  box-shadow: var(--shadow-modal);
  background: var(--bg-primary, #fff);
  box-shadow: var(--shadow-lg);
}

/* Head like the phone-photo panel: eyebrow + serif title on the card itself,
   no grey chrome bar — the tabs below give the modal its structure. */
.faith-scripture-modal .modal-header {
  background: transparent;
  border-bottom: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 0;
  flex-shrink: 0;
}

.faith-scripture-modal .modal-body {
  padding: 1rem 1.5rem 1.5rem;
  overflow-y: auto;
}

.faith-scripture-modal .modal-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading, 500);
  font-size: calc(1.5rem + var(--text-bump));
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0;
}

.faith-scripture-modal .modal-title i {
  color: var(--teal-ink);
}

.faith-scripture-eyebrow {
  margin: 0 0 2px;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--size-eyebrow, calc(0.8rem + var(--text-bump)));
  color: var(--teal-ink);
}

.faith-scripture-lede {
  max-width: 52ch;
  margin: 0 0 var(--spacing-lg);
  font-size: calc(0.95rem + var(--text-bump));
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Tab bar. Quiet text tabs on one hairline — the machinery under the reading
   surface, not a second set of buttons. Bootstrap's .nav-link/.active still
   drive the switching; only the dress changes. */
.faith-scripture-tabs {
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.faith-scripture-tabs .nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: -1px;
  padding: var(--spacing-xs) 0 var(--spacing-sm);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: calc(0.85rem + var(--text-bump));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.faith-scripture-tabs .nav-link:hover {
  color: var(--text-dark);
}

.faith-scripture-tabs .nav-link.active {
  /* Bootstrap paints .nav-tabs .active white; these are underline tabs. */
  background: transparent;
  border-bottom-color: var(--teal-ink);
  color: var(--text-dark);
}

.faith-scripture-tab-content {
  padding-top: var(--spacing-xs);
}

/* ===========================================
   The reading surface
   One treatment for verse text everywhere it appears: the modal stage, the
   saved card, Today's Verse. Frank Ruhl at a reading measure with generous
   leading. Nothing here clamps, ellipsizes or line-limits — a long passage
   scrolls inside its container instead of losing its ending.
   =========================================== */
.faith-verse-text {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(1.2rem + var(--text-bump));
  line-height: 1.8;
  color: var(--text-dark);
  max-width: 62ch;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Long passages (a whole psalm) scroll here rather than pushing the keep action
   off the screen. Short verses never reach the cap, so no scrollbar.
   A scrolled verse must never READ as a truncated one, so the container carries
   scrolling shadows: the two `local` layers are painted in the surface's own
   colour and scroll with the text, which leaves the two fixed `scroll` shadows
   visible only while there is more to read above or below. Pure CSS, no JS, and
   it disappears entirely once you reach the end. */
.faith-verse-scroll {
  max-height: min(16rem, 34vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* A reserved gutter keeps the last words clear of the scrollbar, and keeps
     the measure identical whether or not the passage is long enough to scroll. */
  scrollbar-gutter: stable;
  padding-right: var(--spacing-xs);
  scrollbar-width: thin;
  scrollbar-color: var(--teal-accent) transparent;
  /* The surface colour comes from whatever the verse is sitting on, set by the
     ancestor. Declaring a default HERE would shadow that inherited value, so
     the default lives in the var() fallback instead. */
  background:
    linear-gradient(var(--verse-surface, #fff) 30%, var(--verse-surface-fade, rgba(255, 255, 255, 0))) center top,
    linear-gradient(var(--verse-surface-fade, rgba(255, 255, 255, 0)), var(--verse-surface, #fff) 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgba(19, 19, 19, 0.14), rgba(19, 19, 19, 0)) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(19, 19, 19, 0.14), rgba(19, 19, 19, 0)) center bottom;
  background-repeat: no-repeat;
  background-size: 100% 2.5rem, 100% 2.5rem, 100% 0.5rem, 100% 0.5rem;
  background-attachment: local, local, scroll, scroll;
}

/* Today's Verse sits on a teal gradient of its own; the shadows have no flat
   colour to blend into there, so it keeps the cap and the scrollbar only. */
.faith-votd .faith-verse-scroll {
  background: none;
}

.faith-verse-scroll:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* The attribution hangs after the words the way a quotation signs itself:
   an em dash, the reference, the translation — set right, under the text. */
.faith-verse-attribution {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0 0;
  font-family: var(--font-ui);
  font-size: var(--size-ui, calc(0.875rem + var(--text-bump)));
  letter-spacing: 0.04em;
}

.faith-verse-attribution::before {
  content: "\2014";
  color: var(--text-muted);
}

.faith-verse-reference {
  color: var(--teal-ink);
  font-weight: 600;
}

.faith-verse-translation {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: calc(0.75rem + var(--text-bump));
}

/* ===========================================
   Scripture modal — the stage
   =========================================== */
.faith-verse-stage:not(:empty) {
  margin-bottom: var(--spacing-lg);
}

/* The sheet a found verse is held on: a quiet wash, a teal rule down the
   binding edge, room to breathe. No full box — the wash and the rule are
   enough to say "this is the page", and the missing frame keeps the modal
   from reading as forms stacked on forms. */
.faith-verse-sheet {
  --verse-surface: var(--teal-light, #e8f4f8);
  --verse-surface-fade: rgba(232, 244, 248, 0);
  background: var(--teal-light);
  border-left: 3px solid var(--teal-accent);
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
}

.faith-verse-kept-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--size-eyebrow, calc(0.8rem + var(--text-bump)));
  color: var(--teal-ink);
}

/* The reflection zone: a distinct quieter register under the verse. The
   prompt speaks in the body voice, not a shouted form label. */
.faith-verse-keep-form {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}

.faith-verse-note-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-family: var(--font-body);
  font-style: italic;
  font-size: calc(0.95rem + var(--text-bump));
  color: var(--text-secondary);
}

.faith-field-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-ui);
  font-size: var(--size-ui-sm, calc(0.8rem + var(--text-bump)));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.faith-textarea {
  width: 100%;
  padding: var(--spacing-sm);
  font-family: var(--font-body);
  font-size: calc(0.95rem + var(--text-bump));
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.faith-textarea:focus {
  border-color: var(--teal-accent);
}

.faith-verse-input {
  font-family: var(--font-heading);
  font-size: calc(1.05rem + var(--text-bump));
  line-height: 1.7;
}

.faith-verse-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

/* The find zone: one calm row — reference, a compact translation code, one
   button — instead of a labelled two-column form. */
.faith-scripture-lookup-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.faith-scripture-lookup-row {
  display: flex;
  gap: var(--spacing-sm);
  align-items: stretch;
}

.faith-scripture-lookup-row .faith-input {
  height: 2.75rem;
  font-size: calc(1rem + var(--text-bump));
}

.faith-scripture-lookup-row #scriptureReferenceInput {
  flex: 1;
  min-width: 0;
}

.faith-translation-select {
  /* The base .faith-input is width:100% for stacked fields; in this row the
     select stays at its content width — the code is the label. */
  width: auto;
  flex: 0 0 auto;
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
}

.faith-scripture-lookup-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Narrow screens: the button drops under the row rather than crushing it. */
@media (max-width: 560px) {
  .faith-scripture-lookup-row {
    flex-wrap: wrap;
  }

  .faith-scripture-lookup-row #scriptureReferenceInput {
    flex-basis: 100%;
  }
}

.faith-scripture-manual-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--spacing-sm) var(--spacing-md);
  align-items: start;
}

.faith-scripture-manual-fields .faith-input {
  height: 2.75rem;
  width: 100%;
  font-size: calc(1rem + var(--text-bump));
}

.faith-scripture-hint {
  margin: 0;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-secondary);
}

.faith-scripture-manual {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.faith-scripture-manual > summary {
  font-family: var(--font-ui);
  font-size: calc(0.9rem + var(--text-bump));
  color: var(--teal-ink);
  cursor: pointer;
}

.faith-scripture-manual-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

/* Topics grid — mirrors .scripture-topics-grid + .scripture-topic-btn */
.faith-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-sm);
}

/* A topic is a quiet door, not a card: hairline border, no fill, the glyph
   inline with the name. Open, it takes the row and its verses read as one
   list with hairline dividers — the reading voice again, not boxes. */
.faith-topic {
  background: transparent;
  border: 1px solid var(--border-light, var(--border-color));
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.faith-topic[open] {
  grid-column: 1 / -1;
  border-color: var(--teal-accent);
}

.faith-topic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-ui);
  font-size: calc(0.85rem + var(--text-bump));
  letter-spacing: 0.04em;
  color: var(--text-dark);
  text-align: center;
  cursor: pointer;
  list-style: none;
}

.faith-topic-btn::-webkit-details-marker {
  display: none;
}

.faith-topic-btn i {
  font-size: calc(1.05rem + var(--text-bump));
  color: var(--teal-ink);
}

.faith-topic:hover {
  border-color: var(--teal-accent);
}

.faith-topic-verses {
  display: flex;
  flex-direction: column;
  padding: 0 var(--spacing-md) var(--spacing-sm);
  max-height: 400px;
  overflow-y: auto;
}

/* Topic verse rows: dividers, not boxes. */
.faith-topic-verse {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--border-light, var(--border-color));
}

.faith-topic-verse:first-child {
  border-top: none;
}

.faith-topic-verse-ref {
  font-weight: 600;
  color: var(--teal-ink);
  font-size: calc(0.9rem + var(--text-bump));
  margin-bottom: 2px;
}

/* The FULL verse, in the reading voice of the sheet above. It wraps — no
   ellipsis, no clamp, ever (owner rule: a truncated verse defeats the point). */
.faith-topic-verse-text {
  font-size: calc(0.98rem + var(--text-bump));
  line-height: 1.65;
}

[data-theme="dark"] .faith-scripture-modal .modal-content {
  background: var(--bg-secondary);
}

/* Topics are transparent now — no dark fill to swap. */

[data-theme="dark"] .faith-topic-verse {
  background: var(--bg-secondary);
}

[data-theme="dark"] .faith-verse-sheet {
  --verse-surface: var(--bg-secondary);
  --verse-surface-fade: transparent;
  background: var(--bg-secondary);
}

[data-theme="dark"] .faith-textarea {
  background: var(--bg-tertiary);
}

/* ===========================================
   Scripture Modal
   =========================================== */
.scripture-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--spacing-md);
}

.scripture-modal {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.scripture-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.scripture-modal-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(1.25rem + var(--text-bump));
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.scripture-modal-header h2 i {
  color: var(--teal-ink);
}

.scripture-modal-close {
  background: none;
  border: none;
  font-size: calc(1.25rem + var(--text-bump));
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
}

.scripture-modal-close:hover {
  background: var(--bg-primary);
  color: var(--text-dark);
}

.scripture-modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex: 1;
}

/* Scripture Tabs */
.scripture-tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-sm);
}

.scripture-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: calc(0.9rem + var(--text-bump));
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.scripture-tab:hover {
  background: var(--bg-secondary);
  color: var(--text-dark);
}

.scripture-tab.active {
  background: var(--teal-fill);
  color: var(--text-on-accent);
}

.scripture-tab-content {
  display: none;
}

.scripture-tab-content.active {
  display: block;
}

/* Lookup Form */
.scripture-lookup-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.scripture-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.scripture-input-group label {
  font-size: calc(0.85rem + var(--text-bump));
  font-weight: 600;
  color: var(--text-secondary);
}

.scripture-input-group input,
.scripture-input-group select {
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-body);
  font-size: calc(1rem + var(--text-bump));
  color: var(--text-dark);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.scripture-input-group input:focus,
.scripture-input-group select:focus {
  border-color: var(--teal-accent);
  background: var(--bg-primary);
}

/* Scripture Preview */
.scripture-preview {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background: linear-gradient(135deg, var(--teal-light) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--teal-accent);
  border-radius: var(--radius-md);
}

.scripture-preview-content {
  margin-bottom: var(--spacing-md);
}

.scripture-preview-text {
  font-style: italic;
  font-size: calc(1rem + var(--text-bump));
  color: var(--text-dark);
  line-height: 1.6;
  margin: 0 0 var(--spacing-sm);
}

.scripture-preview-ref {
  display: block;
  font-size: calc(0.9rem + var(--text-bump));
  color: var(--text-secondary);
  font-weight: 600;
}

/* Scripture Error */
.scripture-error {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--error-light, #fee2e2);
  color: var(--error, #dc2626);
  border-radius: var(--radius-sm);
  font-size: calc(0.9rem + var(--text-bump));
}

/* Topics Grid */
.scripture-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-sm);
}

.scripture-topic-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.scripture-topic-btn:hover {
  border-color: var(--teal-accent);
  background: var(--teal-light);
}

.scripture-topic-btn i {
  font-size: calc(1.5rem + var(--text-bump));
  color: var(--teal-ink);
}

.scripture-topic-btn span {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-dark);
  text-align: center;
}

/* Topic Verses List */
.scripture-topic-verses h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
  font-family: var(--font-display);
  font-size: calc(1.1rem + var(--text-bump));
}

.scripture-topic-verses h3 i {
  color: var(--teal-ink);
}

.scripture-verses-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: 400px;
  overflow-y: auto;
}

.scripture-verse-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.scripture-verse-item:hover {
  border-color: var(--teal-accent);
}

.scripture-verse-content {
  flex: 1;
  min-width: 0;
}

.scripture-verse-ref {
  display: block;
  font-weight: 600;
  color: var(--teal-ink);
  font-size: calc(0.9rem + var(--text-bump));
  margin-bottom: 2px;
}

/* No verse text in this module ellipsizes, including in the legacy
   .scripture-* block no view renders any more. */
.scripture-verse-preview {
  margin: 0;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ===========================================
   Dark Theme
   =========================================== */
[data-theme="dark"] .faith-votd {
  background: linear-gradient(135deg, rgba(74, 155, 181, 0.15) 0%, var(--bg-secondary) 100%);
}

[data-theme="dark"] .faith-scripture-card {
  background: var(--bg-secondary);
}

[data-theme="dark"] .scripture-modal {
  background: var(--bg-secondary);
}

[data-theme="dark"] .scripture-modal .modal-header {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .scripture-input-group input,
[data-theme="dark"] .scripture-input-group select {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .scripture-preview {
  background: linear-gradient(135deg, rgba(74, 155, 181, 0.1) 0%, var(--bg-tertiary) 100%);
}

[data-theme="dark"] .scripture-topic-btn {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .scripture-topic-btn:hover {
  background: rgba(74, 155, 181, 0.2);
}

[data-theme="dark"] .scripture-verse-item {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .scripture-error {
  background: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
}

/* ===========================================
   Print
   =========================================== */
@media print {
  .faith-header .back-btn,
  .faith-section-header .btn,
  .faith-table-actions,
  .faith-reflections-actions,
  .faith-quote-actions,
  .faith-quote-card-actions,
  .faith-quotes-save,
  .faith-chat-section,
  .faith-votd-actions,
  .faith-votd-footer,
  .scripture-modal-overlay {
    display: none;
  }

  .faith-section {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .faith-quote-card {
    background: #f5f5f5;
    border: 1px solid #ccc;
  }

  .faith-votd {
    background: #f0f9fa;
    border: 1px solid #4a9bb5;
  }
}

/* ===========================================
   Responsive
   =========================================== */
@media (max-width: 768px) {
  .scripture-topics-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .scripture-topic-btn {
    padding: var(--spacing-sm);
  }

  .scripture-topic-btn i {
    font-size: calc(1.25rem + var(--text-bump));
  }

  .faith-quotes-actions-header {
    flex-direction: column;
    align-items: stretch;
  }

  .faith-votd-footer {
    flex-direction: column;
  }

  .faith-votd-footer .btn {
    width: 100%;
  }
}

/* ===========================================
   Master-detail shell (the Library shell's grammar in faith- names: one
   elevated viewport-fit card split into a master rail and a detail pane,
   each owning its own scroll. The rail sits a tonal step below the pane so
   the selected row's lift off its 3px teal edge reads. Rows are list
   grammar (one line, may ellipsize); the pane holds the selection whole.

   Below 900px it collapses list-first: the rail fills the screen and
   .is-detail-open (server-set for explicit ?entry= links, client-set on row
   taps) pushes the pane full-screen with a back affordance.)
   =========================================== */

.faith-shell {
  display: grid;
  grid-template-columns: minmax(300px, 348px) minmax(0, 1fr);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  /* The card fits the viewport under the sticky chrome (--chrome-height is
     published live by chrome_height_controller; the fallback covers the
     pre-JS first paint) so both panes scroll internally, app-like. */
  height: calc(100dvh - var(--chrome-height, 140px) - 3.25rem);
  min-height: 32rem;
  overflow: hidden;
  margin-block: 0.25rem 1.5rem;
}

/* Entrance: the hub's motion grammar, once per session. */
.faith-shell[data-entrance="play"] > * {
  animation: motion-rise var(--motion-enter) var(--ease-out) backwards;
}

.faith-shell[data-entrance="play"] > :nth-child(1) { animation-delay: 0ms; }
.faith-shell[data-entrance="play"] > :nth-child(2) { animation-delay: 60ms; }

/* ── The master rail ─────────────────────────────────────────────────────── */

.faith-master {
  overflow-y: auto;
  border-right: 1px solid var(--border-light);
  /* A quiet tonal step below the detail pane, so the selected row's lift
     to the card surface reads. */
  background: var(--surface-page);
}

.faith-masthead {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1rem 1.05rem;
  border-bottom: 1px solid var(--border-light);
}

/* The Verse of the Day as a compact rail card: same bones as the old
   full-width section, smaller rhythm. */
.faith-votd-rail {
  padding: 0.85rem 0.9rem;
  border-width: 1px;
}

.faith-votd-rail .faith-votd-header {
  margin-bottom: 0.4rem;
}

.faith-votd-rail .faith-votd-title h3 {
  font-size: calc(0.95rem + var(--text-bump));
}

.faith-votd-rail .faith-votd-title i {
  font-size: calc(1rem + var(--text-bump));
}

.faith-votd-rail .faith-votd-content {
  margin-bottom: 0.55rem;
}

.faith-votd-rail .faith-votd-text {
  font-size: calc(0.9rem + var(--text-bump));
  line-height: 1.55;
}

.faith-votd-rail .faith-votd-reference {
  font-size: calc(0.8rem + var(--text-bump));
}

.faith-votd-rail .faith-verse-scroll {
  max-height: 9.5rem;
  overflow-y: auto;
}

/* The AI Companion launcher, quiet and full-width in the masthead. */
.faith-chat-launch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--tap);
  padding: 0.5rem 0.9rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(13px * var(--text-scale));
  color: var(--teal-ink);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  text-decoration: none;
  transition: background var(--motion-quick) var(--ease-out);
}

@media (hover: hover) {
  .faith-chat-launch:hover {
    background: var(--teal-light);
  }
}

/* ── Sections: quiet labels over row groups ──────────────────────────────── */

.faith-index {
  padding-bottom: 1.25rem;
}

.faith-rail-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.25rem 0.45rem;
}

.faith-rail-section-head h2 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(12px * var(--text-scale));
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Rows ────────────────────────────────────────────────────────────────── */

.faith-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faith-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1.1rem 0.65rem 0.95rem;
  min-height: var(--tap);
  border-left: 3px solid transparent;
  text-decoration: none;
  transition: background var(--motion-quick) var(--ease-out),
              border-color var(--motion-quick) var(--ease-out);
}

@media (hover: hover) {
  a.faith-row:hover:not([aria-current]) {
    background: color-mix(in srgb, var(--surface-card) 65%, transparent);
  }
}

/* The selected row lifts to the detail pane's surface off a teal edge. */
.faith-row[aria-current] {
  background: var(--surface-card);
  border-left-color: var(--teal-accent);
}

.faith-row-body {
  min-width: 0; /* let titles ellipsize instead of widening the rail */
}

.faith-row-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(14.5px * var(--text-scale));
  line-height: 1.35;
  color: var(--navy-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One line, may ellipsize — list grammar; the pane never truncates. */
.faith-row-meta {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-body);
  font-size: calc(12.5px * var(--text-scale));
  line-height: 1.5;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A collection's honest size, as data. */
.faith-row-count {
  font-family: var(--font-body);
  font-size: calc(12px * var(--text-scale));
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* The quiet done mark on a written reflection. */
.faith-row-done {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(11.5px * var(--text-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-ink);
  white-space: nowrap;
}

/* ── The detail pane ─────────────────────────────────────────────────────── */

.faith-detail {
  overflow-y: auto;
  background: var(--surface-card);
}

turbo-frame#faith_detail {
  display: block;
  min-height: 100%;
}

.faith-pane {
  min-height: 100%;
}

.faith-article {
  max-width: 960px;
  margin-inline: auto;
  padding: clamp(2rem, 5vh, 3rem) clamp(1.5rem, 4vw, 2.75rem) 4rem;
}

/* Member text in this pane's editors keeps the standard editor typography
   (var(--font-body), computing to exactly what the family module's editors
   compute to). Saved answers can arrive wrapped in Trix heading blocks
   (synthesized/imported statements), and the global heading rule (base.css
   h1..h6 → var(--font-heading), Frank Ruhl Libre) was rendering them as
   ~21px serif inside the editor — actiontext.css only resets the heading's
   SIZE (1.2em), never its family. Scoped to the pane's editors only: saved
   statements displayed elsewhere keep their styling. */
.faith-pane trix-editor.trix-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-body);
  font-size: inherit;
  line-height: inherit;
}

.faith-detail-head {
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 1.9rem;
}

.faith-detail-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.faith-detail-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(26px * var(--text-scale));
  line-height: 1.32;
  color: var(--navy-primary);
  margin: 0;
  text-wrap: balance;
}

.faith-eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(12px * var(--text-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 0.6rem;
}

.faith-detail-head .faith-section-description {
  margin: 0.6rem 0 0;
}

/* The quiet referral to the growth assessment when the twelve areas are not
   yet scored. */
.faith-growth-referral {
  margin: 0.75rem 0 0;
}

.faith-growth-link {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(13px * var(--text-scale));
  color: var(--teal-ink);
  text-decoration: none;
}

@media (hover: hover) {
  .faith-growth-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ── The back affordance: narrow screens only ────────────────────────────── */

.faith-detail-back {
  display: none;
  align-items: center;
  gap: 0.1rem;
  min-height: var(--tap);
  padding: 0.9rem clamp(1.25rem, 5vw, 2rem) 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(12.5px * var(--text-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-ink);
  text-decoration: none;
}

.faith-detail-back .fa-sharp {
  font-size: 1.35em;
}

/* ── Narrow: list-first, detail pushes full-screen ───────────────────────── */

@media (max-width: 899.98px) {
  .faith-shell {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .faith-master {
    border-right: 0;
    overflow: visible;
  }

  .faith-detail {
    display: none;
    overflow: visible;
  }

  .faith-shell.is-detail-open .faith-master {
    display: none;
  }

  .faith-shell.is-detail-open .faith-detail {
    display: block;
  }

  .faith-detail-back {
    display: inline-flex;
  }

  .faith-article {
    padding-top: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faith-shell[data-entrance="play"] > * {
    animation: none;
  }
}

/* ── Scripture that is on the roadmap ──────────────────────────────────────
   The collection is where members already keep their verses, so it is where
   putting one on the roadmap belongs. The line under the pane's description
   names the verse currently on the roadmap (even one typed straight onto the
   roadmap, matching nothing here); the per-card mark says which card it is. */

.faith-roadmap-verse {
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: calc(14px * var(--text-scale));
  color: var(--text-muted);
}

.faith-roadmap-verse-ref {
  font-family: var(--font-ui);
  letter-spacing: 0.05em;
  color: var(--teal-ink);
}

.faith-quote-on-roadmap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: auto;
  font-family: var(--font-ui);
  font-size: calc(12.5px * var(--text-scale));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal-ink);
}

/* button_to wraps its button in a form, so the form is what the flex row of
   card actions lays out. */
.faith-quote-card-actions form:has(.faith-quote-to-roadmap) {
  margin-right: auto;
}