/* Custom styles for Ora Pro Nobis (Zensical/Material theme) */

.md-typeset h1 {
  font-weight: 600;
  border-bottom: 1px solid var(--md-default-fg-color--lighter);
  padding-bottom: 0.3em;
}

/* Non-active nav link text uses full strength color */
.md-nav .md-nav__link:not(.md-nav__link--active) {
  color: var(--md-default-fg-color) !important;
}

/* Icons in non-active nav items get reduced opacity so they are slightly less pronounced
   than the link text. Applies to both Lucide and material icons (crosses etc.).
   Works the same in light and dark mode. */
.md-nav .md-nav__link:not(.md-nav__link--active) svg,
.md-nav .md-nav__link:not(.md-nav__link--active) .md-icon {
  opacity: 0.4 !important;
}

/* Keep Lucide thin stroke style (opacity from above applies) */
.md-nav .md-nav__link:not(.md-nav__link--active) svg.lucide {
  color: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
}

/* Active nav items: full opacity for the current page's icon */
.md-nav__link--active svg,
.md-nav__link--active .md-icon {
  opacity: 1 !important;
}

/* Hover: full visibility */
.md-nav .md-nav__link:hover svg,
.md-nav .md-nav__link:hover .md-icon {
  opacity: 1 !important;
}

/* Sidebar nav hover and active states for cleaner UI/UX */
.md-nav__link {
  border-radius: 4px;
  transition: background-color 120ms ease, color 120ms ease;
  padding: 0.4em 0.5em;   /* more vertical padding so bg forms a nice box around text+icon */
  margin-top: 0.08em;     /* small gap between the padded boxes */
}

.md-nav .md-nav__link:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: inherit !important;
}

[data-md-color-scheme="slate"] .md-nav .md-nav__link:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: inherit !important;
}

.md-nav__link--active {
  background-color: rgba(64, 81, 181, 0.12); /* slight tint of primary */
  color: var(--md-primary-fg-color);
  font-weight: 600;
}

.md-nav__link.md-nav__container {
  margin-bottom: 0.8em;
}

.md-nav__link.md-nav__container .md-nav__link:not(.md-nav__link--active) {
  background-color: transparent !important;
  padding: 0 !important;
}

/* Active blue for section title containers (mirrors hover) */
.md-nav__link.md-nav__container:has(.md-nav__link--active) {
  background-color: rgba(64, 81, 181, 0.12) !important;
}

[data-md-color-scheme="slate"] .md-nav__link.md-nav__container:has(.md-nav__link--active) {
  background-color: rgba(64, 81, 181, 0.12) !important;
}

.md-nav__link.md-nav__container:has(.md-nav__link--active) .md-nav__link {
  background-color: transparent !important;
  padding: 0 !important;
}

.md-nav__link.md-nav__container:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

[data-md-color-scheme="slate"] .md-nav__link.md-nav__container:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.md-nav__link.md-nav__container .md-nav__link:hover {
  background-color: transparent !important;
}

/* Better color for links, warmer tone */
.md-typeset a {
  color: #2a5f8f;
}

.md-typeset a:hover {
  color: #1a4a70;
}

/* Dark mode: brighter blue for readability on dark background */
[data-md-color-scheme="slate"] .md-typeset a {
  color: #7eb8ff;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #a3ccff;
}

/* Subtle section headers */
.md-nav__title {
  font-weight: 600;
}

/* Wider content area for reading (less cramped docs feel) */
.md-grid {
  max-width: 1200px;
}

/* Very minimal: background image on the normal Zensical header + styled title text.
   No hiding, no forced sizes, no positioning hacks. */

.md-header.md-header--shadow.md-header--lifted {
  background-image: url('../assets/images/header-banner.jpg');
  background-size: cover;
  background-position: center 35%;
}

/* Light overlay for text legibility over image */
.md-header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
  z-index: -1;
}

/* Header title text style - larger with desired look, applied to site name */
.md-header__title .md-ellipsis {
  font-family: Georgia, "Times New Roman", "Palatino Linotype", serif;
  font-size: 1.45rem;
  font-style: italic;
  font-weight: normal;
  letter-spacing: 0.02em;
  color: #f5f0e6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

/* Subtle dark treatment on tabs so they blend with the banner */
.md-tabs {
  background: rgba(0,0,0,0.3);
}

/* Fix tooltip escape: theme .md-tabs__list uses contain:content + flex + overflow:auto
   which creates an isolating stacking/paint context. Children (the [tooltip] links)
   cannot paint outside the list bounds. Neutralize here so ::after can render fully. */
.md-tabs,
.md-tabs__list {
  overflow: visible !important;
}

.md-tabs__list {
  contain: none !important;
}

/* Keep the light/dark mode toggle in the header at full prominence.
   Only set color for visibility over the custom banner background. */
.md-header__option {
  color: #f5f0e6;
}

/* Style the top-left header logo icon to match the light title text color.
   Use slightly lower opacity so the icon is less pronounced than the "Ora Pro Nobis" text. */
.md-header__button.md-logo svg,
.md-nav__button.md-logo svg {
  color: #f5f0e6 !important;
  fill: currentColor !important;
  opacity: 0.8 !important;
}

/* Flashcards - integrated modal styles using site theme */
#flashcards-root .hand {
  cursor: pointer;
}

#flashcards-root #flashcard-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

#flashcards-root #flashcard {
  background: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color, #333);
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  width: min(92%, 620px);
  min-height: 320px;
  border-radius: 6px;
  position: relative;
  padding: 16px;
}

#flashcards-root #flashcard-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--md-default-fg-color, #333);
  opacity: 0.6;
  z-index: 10;
}

#flashcards-root #flashcard-close:hover {
  opacity: 1;
}

#flashcards-root .flashcard-prompt {
  font-size: 2.2rem;
  text-align: center;
  margin: 32px 0 8px;
}

#flashcards-root #flashcard-content-wrapper {
  padding-top: 24px;  /* room for card status */
}

#flashcards-root .flashcard-full-answer {
  font-size: 1.1rem;
  text-align: center;
  margin-top: 8px;
}

#flashcards-root .flashcard-full-key,
#flashcards-root .flashcard-full-alt {
  text-align: center;
  opacity: 0.7;
  font-size: 0.95rem;
}

/* Button bar layout: [skip][     pause     ][flip] */
#flashcards-root .flashcard-buttons-bar {
  position: absolute;
  bottom: -36px;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
}

#flashcards-root .flashcard-button {
  flex: 0 0 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  background-color: #666;
  color: white;
  border-radius: 4px;
  height: 32px;
  padding: 2px 4px;
  font-size: 0.95rem;
  user-select: none;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

#flashcards-root .flashcard-button:hover {
  opacity: 0.85;
}

/* Pause is longer (takes remaining space) and slightly lighter */
#flashcards-root .flashcard-button-pause {
  flex: 1;
  background-color: #888;
}

#flashcards-root .flashcard-status {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 0.75rem;
  opacity: 0.7;
  color: var(--md-default-fg-color, #333);
}

#flashcards-root #flashcard-pause-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1001;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Only bold the clickable actions on pause screen; stats and info plain */
#flashcards-root #flashcard-pause-modal .hand {
  font-weight: bold;
  cursor: pointer;
}
#flashcards-root #flashcard-pause-modal .pause-stats,
#flashcards-root #flashcard-pause-modal .pause-info,
#flashcards-root #flashcard-pause-modal .pause-kbd {
  font-weight: normal;
}
#flashcards-root #flashcard-pause-modal .pause-stats,
#flashcards-root #flashcard-pause-modal .pause-info {
  font-size: 0.85rem;
}
#flashcards-root #flashcard-pause-modal .pause-kbd {
  margin-top: 0.8em;
  font-size: 0.8rem;
  opacity: 0.85;
}

#flashcards-root #flashcard-pause-modal #flashcard-pause-reset,
#flashcards-root #flashcard-pause-modal #flashcard-pause-resume {
  margin-top: 0.5em;
}

/* Green flashcard trigger buttons matching original style */
.flashcard-green {
  min-width: 200px;
  background-color: #4b5;
  border-radius: 8px;
  color: #fff;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.flashcard-green:hover {
  background-color: #5c6;
}

/* Simple pure HTML+CSS tooltip using the custom 'tooltip' attribute.
   Use for language learning glosses and all UI hover hints.
   <span tooltip="Hail Mary, full of grace, the Lord is with thee.">text</span>
*/
[tooltip] {
  position: relative;
  cursor: help;
}

[tooltip]:hover::after {
  content: attr(tooltip);
  position: absolute;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 16px;
  padding: 5px 12px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 999;
  top: 100%;
  left: 0;
}

/* Vertical stacked button/pill style for mystery chooser (restored from earlier option) */
.mystery-chooser {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.75rem 0 1.25rem;
}
.mystery-chooser .mystery-set {
  display: inline-block;
  padding: 0.3em 0.75em;
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  border-radius: 9999px;
  font-size: 0.92rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.mystery-chooser .mystery-set:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
[data-md-color-scheme="slate"] .mystery-chooser .mystery-set:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.mystery-chooser .mystery-set.active {
  background-color: rgba(64, 81, 181, 0.12);
  border-color: var(--md-primary-fg-color, #4051b5);
  font-weight: 600;
}
[data-md-color-scheme="slate"] .mystery-chooser .mystery-set.active {
  background-color: rgba(64, 81, 181, 0.18);
}

/* Prayer interactive (audio + per-passage/sub formatting) - minimal & integrated */
.prayer-interactive {
  margin: 1rem 0 1.5rem;
  /* use page's normal text size; children control their own */
  font-size: inherit;
  line-height: 1.45;
}

.prayer-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* When we repurpose the original heading (H1 or H2) for the player title + button */
h1.prayer-with-player,
h2.prayer-with-player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}



.prayer-header .play-btn,
h1.prayer-with-player .play-btn,
h2.prayer-with-player .play-btn {
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.1em 0.35em;
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  color: inherit;
}

.prayer-header .play-btn:hover,
h1.prayer-with-player .play-btn:hover,
h2.prayer-with-player .play-btn:hover {
  background: rgba(0,0,0,0.04);
}
[data-md-color-scheme="slate"] .prayer-header .play-btn:hover,
[data-md-color-scheme="slate"] h1.prayer-with-player .play-btn:hover,
[data-md-color-scheme="slate"] h2.prayer-with-player .play-btn:hover {
  background: rgba(255,255,255,0.08);
}

/* Main button (pause state only) gets solid primary fill for visibility.
   Normal play button stays subtle. */
h1.prayer-with-player .play-btn.playing,
h2.prayer-with-player .play-btn.playing,
.prayer-header .play-btn.playing {
  background: #4051b5;
  color: #fff;
  border-color: #4051b5;
}
h1.prayer-with-player .play-btn.playing:hover,
h2.prayer-with-player .play-btn.playing:hover,
.prayer-header .play-btn.playing:hover {
  background: #303f8f;
  border-color: #303f8f;
}

.prayer-passage {
  margin-bottom: 0.55rem;
}

/* Fallback content (plain text). Visible by default for graceful degradation.
   The player hides it only after successful render.
   Use markdown="1" on the div in source so inner Markdown parses correctly. */
.prayer-fallback {
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--md-default-fg-color--lightest, #ddd);
}

/* Make labels and text inside fallback look clean and normal */
.prayer-fallback strong {
  display: block;
  margin: 0.75rem 0 0.25rem;
  font-size: 1rem;
  opacity: 0.9;
}

.prayer-fallback p {
  margin: 0.25rem 0;
}

/* Dual-language home app (top-level rosary) */

/* Language bar at top: selects + phonetic toggles + swap */
.dual-langbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.35rem 0 0.5rem;
  flex-wrap: wrap;
}

.dual-lang {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.dual-lang-select {
  font-size: 0.78rem;
  padding: 0.1em 0.25em;
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  border-radius: 2px;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}

.dual-mode-toggle {
  padding: 0.1em;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  opacity: 0.5;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.dual-mode-toggle:hover {
  opacity: 0.7;
  background: rgba(0,0,0,0.03);
}

[data-md-color-scheme="slate"] .dual-mode-toggle:hover {
  background: rgba(255,255,255,0.06);
}

.dual-mode-toggle.selected {
  opacity: 1;
}

.dual-lang.primary .dual-mode-toggle.selected,
h1.prayer-with-player .dual-mode-toggle.selected,
.prayer-header .dual-mode-toggle.selected {
  border-color: #4051b5;
  background: rgba(64, 81, 181, 0.08);
}

[data-md-color-scheme="slate"] .dual-lang.primary .dual-mode-toggle.selected,
[data-md-color-scheme="slate"] h1.prayer-with-player .dual-mode-toggle.selected,
[data-md-color-scheme="slate"] .prayer-header .dual-mode-toggle.selected {
  background: rgba(64, 81, 181, 0.15);
}

.dual-lang.secondary .dual-mode-toggle.selected {
  border-color: #2e7d32;
  background: rgba(46, 125, 50, 0.1);
}

[data-md-color-scheme="slate"] .dual-lang.secondary .dual-mode-toggle.selected {
  background: rgba(46, 125, 50, 0.18);
}

.dual-swap {
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.05em 0.2em;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.55;
  margin: 0 0.15rem;
  align-self: center;
}

.dual-swap:hover {
  opacity: 1;
}

.dual-swap-between {
  margin-top: 0.1rem;
}

/* Prayer title area with big title + clean dropdown menu */
.prayer-title-area {
  position: relative;
  display: flex;
  align-items: baseline;
}

.prayer-title-wrapper {
  display: flex;
  align-items: baseline;
  cursor: pointer;
}

.prayer-title {
  margin: 0;
  color: inherit;
  display: inline-block;
  vertical-align: baseline;
  border-bottom: none;
}

.prayer-dropdown-arrow {
  font-size: 0.55em;
  margin-left: 0.35em;
  opacity: 0.55;
  user-select: none;
}

.prayer-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background-color: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 140px;
  padding: 2px 0;
  font-size: 0.8rem;
}

html[data-md-color-scheme="slate"] .prayer-dropdown-menu,
[data-md-color-scheme="slate"] .prayer-dropdown-menu {
  background-color: var(--md-default-bg-color) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border-color: var(--md-default-fg-color--lighter);
}

.prayer-dropdown-item {
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: normal;
  color: inherit;
}

.prayer-dropdown-item:hover {
  background-color: rgba(64, 81, 181, 0.06);
}

[data-md-color-scheme="slate"] .prayer-dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.prayer-dropdown-item.active {
  background-color: rgba(64, 81, 181, 0.08);
  color: var(--md-primary-fg-color, #4051b5);
}

[data-md-color-scheme="slate"] .prayer-dropdown-item.active {
  background-color: rgba(64, 81, 181, 0.15);
  color: var(--md-primary-fg-color, #4051b5);
}

.prayer-dropdown-item .secondary-title {
  opacity: 0.82;
  color: var(--md-default-fg-color);
  font-size: 0.9em;
}

.prayer-dropdown-separator {
  height: 1px;
  background-color: var(--md-default-fg-color--lighter);
  margin: 4px 8px;
  opacity: 0.6;
}

/* Viewer uses shared prayer styles + dual tweaks */
.dual-viewer .prayer-header {
  align-items: baseline;
  margin-bottom: 0.4rem;
}

/* Base styles for dual play buttons (overridden by .dual-line .dual-play) */
.dual-play {
  font-size: 0.68rem;
  line-height: 1;
  padding: 0.04em 0.22em;
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

.dual-line {
  display: flex;
  align-items: baseline;
  margin: 0.15rem 0;
  line-height: 1.45;
}

.dual-line .dual-play {
  flex: none;
  margin-right: 0.3em;
  font-size: 0.68rem;
  padding: 0.04em 0.22em;
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

.dual-line .dual-text {
  flex: 1;
  min-width: 0;
  /* natural inline flow for segments inside */
}

/* Secondary line is visually lighter */
.dual-line.secondary {
  font-size: 0.9em;
  opacity: 0.82;
}

/* Secondary play button slightly lighter than its text (and than primary button) */
.dual-line.secondary .dual-play {
  opacity: 0.45;
  border-color: var(--md-default-fg-color--lighter, #ddd);
  color: inherit;
}

/* Clickable segments inside main text - subtle, natural flow */
.dual-line .dual-seg,
.dual-seg {
  display: inline;
  cursor: pointer;
  padding: 0 1px;
  border-radius: 2px;
  transition: background 60ms ease;
}

.dual-line .dual-seg:hover,
.dual-seg:hover {
  background: rgba(64, 81, 181, 0.1);
}

[data-md-color-scheme="slate"] .dual-line .dual-seg:hover,
[data-md-color-scheme="slate"] .dual-seg:hover {
  background: rgba(64, 81, 181, 0.18);
}

.dual-line .dual-seg.playing,
.dual-seg.playing {
  background: rgba(64, 81, 181, 0.15);
  border-radius: 3px;
}

[data-md-color-scheme="slate"] .dual-line .dual-seg.playing,
[data-md-color-scheme="slate"] .dual-seg.playing {
  background: rgba(64, 81, 181, 0.28);
}

.dual-text.playing {
  background: rgba(64, 81, 181, 0.08);
  border-radius: 2px;
}

/* Rosary player: 7 rows of dots + 3-button controls + viewer (English landing) */
#rosary-player {
  margin: 1rem 0 1.5rem;
  padding: 0.5rem;
  border: 1px solid var(--md-default-fg-color--lightest, #ddd);
  border-radius: 4px;
}

.rosary-indicators {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.rosary-row {
  display: flex;
  justify-content: center;
  margin: 1px 0;
}

.rosary-dots {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.rosary-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--md-default-fg-color--lighter, #aaa);
  background: #ccc;
  padding: 0;
  cursor: pointer;
  transition: background 120ms ease, transform 80ms ease;
}

.rosary-dot.done {
  background: #d4af37; /* golden yellow */
  border-color: #b8860b;
}

.rosary-dot.current {
  outline: 2px solid #4051b5;
  outline-offset: 1px;
  background: #d4af37;
}

.rosary-dot:hover {
  transform: scale(1.15);
}

/* Hail Mary dots get slight transparency for visual distinction (repeats in intro and per decade)
   works in light/dark and when .done (yellow) or .current */
.rosary-dot.hail-mary {
  opacity: 0.55;
}

.rosary-dot.hail-mary.done {
  opacity: 0.8;
}

.rosary-dot.hail-mary.current {
  opacity: 1;
}

.rosary-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}

.rosary-btn {
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.15em 0.45em;
  border: 1px solid var(--md-default-fg-color--lightest, #ccc);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  color: inherit;
}

.rosary-btn:hover {
  background: rgba(0,0,0,0.04);
}

[data-md-color-scheme="slate"] .rosary-btn:hover {
  background: rgba(255,255,255,0.08);
}

/* Play/pause is the main action - make it much larger and prominent */
#rosary-play {
  font-size: 1.9rem;
  padding: 0.1em 0.35em;
  border: 2px solid var(--md-primary-fg-color, #4051b5);
  border-radius: 4px;
  background: rgba(64, 81, 181, 0.1);
  font-weight: 600;
  min-width: 1.9em;
  display: flex;
  align-items: center;
  justify-content: center;
}

#rosary-play:hover {
  background: rgba(64, 81, 181, 0.2);
}

[data-md-color-scheme="slate"] #rosary-play {
  background: rgba(64, 81, 181, 0.2);
}

[data-md-color-scheme="slate"] #rosary-play:hover {
  background: rgba(64, 81, 181, 0.35);
}

#rosary-play {
  line-height: 1;
}

/* Phonetic toggle (same size as prev/next buttons) */
#rosary-phonetic {
  padding: 0.15em 0.45em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#rosary-phonetic.active {
  background: rgba(64, 81, 181, 0.15);
  border-color: var(--md-primary-fg-color, #4051b5);
  color: var(--md-primary-fg-color, #4051b5);
  font-weight: 600;
}

[data-md-color-scheme="slate"] #rosary-phonetic.active {
  background: rgba(64, 81, 181, 0.25);
}

#rosary-viewer {
  margin-top: 0.25rem;
}