/* ===== Card ===== */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  min-height: 2.75rem;    /* ≥44px touch target (WCAG 2.5.8 / Apple HIG) */
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-base);
  font-family: inherit;
  font-weight: 500;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1.4;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

.btn--primary:hover:not(:disabled),
.btn--primary:focus-visible:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-sm);
}

.btn--ghost {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--ghost:hover:not(:disabled),
.btn--ghost:focus-visible:not(:disabled) {
  background: rgba(122, 92, 16, 0.10);                                       /* fallback */
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);      /* modern */
}

/* Square icon-only button — 2.75rem = 44px at 16px base */
.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  cursor: pointer;
  font-family: inherit;
}

.btn--icon:hover:not(:disabled) {
  background: rgba(26, 26, 46, 0.08);                                              /* fallback */
  background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);      /* modern */
}

/* ===== Prayer Section Types ===== */
.section-prayer,
.section-scripture,
.section-meditation,
.section-litany {
  margin-block: var(--space-xl);
}

.section-prayer h2,
.section-scripture h2,
.section-meditation h2,
.section-litany h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
}

/* Scripture gets a left accent border */
.section-scripture {
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-accent);
}

.section-scripture blockquote {
  font-style: italic;
  color: var(--color-text-secondary);
}

.section-scripture blockquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 600;
}

.section-litany ul {
  list-style: none;
  padding: 0;
}

.section-litany li {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
}

.section-litany li:last-child {
  border-bottom: none;
}

/* ===== Prose ===== */
.section-prayer .prose {
  white-space: pre-line;
}

.prose {
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: 1.8;
  max-width: 65ch;
}

.prose p + p {
  margin-top: var(--space-md);
}

.prose h1 { font-size: var(--text-3xl); margin-bottom: var(--space-lg); }
.prose h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.prose h3 { font-size: var(--text-xl);  margin-bottom: var(--space-sm); }

/* ===== Badge ===== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.modal h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

.modal-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

/* ===== Calendar Grid ===== */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-block: var(--space-lg);
}

.calendar-grid__header {
  display: contents;
}

.calendar-grid__day-label {
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  padding: var(--space-xs);
  color: var(--color-text-secondary);
}

.calendar-grid__cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  position: relative;
  cursor: default;
}

.calendar-grid__cell--completed {
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
}

.calendar-grid__cell--today {
  border: 2px solid var(--color-accent);
}

.calendar-grid__cell--empty {
  visibility: hidden;
}

/* ===== Reader: Day Header ===== */
.day-theme {
  color: var(--color-text-secondary);
  font-style: italic;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xl);
}

article > header h1 {
  font-size: var(--text-2xl);
  line-height: 1.25;
}

.section-scripture__note {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-style: italic;
}

.complete-day-btn {
  display: block;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

/* ===== Onboarding ===== */
.onboarding-mode {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block: var(--space-lg);
}

.onboarding-mode label {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.mode-select {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-family: inherit;
  cursor: pointer;
}

.mode-select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ===== Day Navigation Strip ===== */
.nav-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-day__indicator {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.nav-day__current {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* ===== Catch-up Banner ===== */
.catchup-banner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(122, 92, 16, 0.12);                                              /* fallback */
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));         /* modern */
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.catchup-banner[hidden] {
  display: none;
}

.catchup-banner__link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
}

.catchup-banner__dismiss {
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  font-size: var(--text-base);
}

/* ===== Audio Button ===== */
.btn--audio {
  margin-top: var(--space-sm);
}

/* ===== Calendar cell overrides for button elements ===== */
button.calendar-grid__cell {
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: inherit;
}

button.calendar-grid__cell:hover:not(:disabled),
button.calendar-grid__cell:focus-visible {
  background: rgba(122, 92, 16, 0.12);                                         /* fallback */
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);        /* modern */
}

button.calendar-grid__cell--completed {
  color: var(--color-on-accent);
}

/* Small checkmark indicator — non-colour cue for completed days (WCAG 1.4.1) */
.calendar-grid__cell--completed::after {
  content: '✓';
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 0.55em;
  line-height: 1;
  opacity: 0.85;
}

/* ===== Settings View ===== */
.settings-section {
  margin-bottom: var(--space-lg);
}

.settings-section h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-md);
}

.settings-section--danger {
  border-color: #c0392b;                                                             /* fallback */
  border-color: color-mix(in srgb, #c0392b 30%, var(--color-border));               /* modern */
}

.settings-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.settings-fieldset legend {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  float: left;
  width: 100%;
}

.settings-radio-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  cursor: pointer;
  padding: var(--space-xs) 0;
}

.settings-radio {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
}

.settings-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}

.settings-time-input {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-family: inherit;
}

.settings-time-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.settings-reset-btn {
  color: #c0392b;
  border-color: #c0392b;
}

.settings-reset-btn:hover:not(:disabled),
.settings-reset-btn:focus-visible:not(:disabled) {
  background: rgba(192, 57, 43, 0.10);                                           /* fallback */
  background: color-mix(in srgb, #c0392b 10%, transparent);                     /* modern */
}

.settings-back {
  display: inline-flex;
  margin-top: var(--space-lg);
}

/* ===== Progress Bar ===== */
.progress-bar {
  height: 3px;
  background: var(--color-border);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
}

/* ===== Motion-dependent transitions & animations ===== */
/* Kept as top-level @media blocks for maximum browser compatibility.     */
/* CSS nesting (@media inside a selector) requires Chrome 112+/Firefox    */
/* 117+/Safari 16.5+; top-level blocks work in all browsers.              */
@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }

  .btn--icon {
    transition: background-color 0.15s ease;
  }

  .modal-overlay {
    animation: fadeIn 0.2s ease both;
  }

  .modal {
    animation: fadeUp 0.3s ease both;
  }

  .progress-bar__fill {
    transition: width 0.4s ease;
  }
}