/* TRUE CHURCH WEBSITE V114 APP-PARITY — DIRECT APP COMPONENT PARITY */
/* Built from the exact protected app v107 stylesheet sources plus narrow Zoho embedding rules. */

/* source: src/index.css */
/* Global styles are loaded from src/styles/app.css for now. */


/* ====================== STEP 184 READER DARK MODE SELECT TEXT FIX ====================== */

.tcjc-reader-dark-active .tcjc-reader-panel select,
.tcjc-reader-dark-active .tcjc-reader-controls select,
.tcjc-reader-dark-active .tcjc-reader-select,
.tcjc-reader-dark-active select.tcjc-reader-select,
.tcjc-reader-dark-active .tcjc-scripture-reader select,
.tcjc-reader-dark-active .tcjc-reader-page select,
.tcjc-app-dark-active .tcjc-reader-panel select,
.tcjc-app-dark-active .tcjc-reader-controls select,
.tcjc-app-dark-active .tcjc-reader-select,
.tcjc-app-dark-active select.tcjc-reader-select,
.tcjc-app-dark-active .tcjc-scripture-reader select,
.tcjc-app-dark-active .tcjc-reader-page select {
  color: rgba(255, 248, 225, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 248, 225, 0.96) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.78) !important;
}

.tcjc-reader-dark-active .tcjc-reader-panel select option,
.tcjc-reader-dark-active .tcjc-reader-controls select option,
.tcjc-reader-dark-active .tcjc-reader-select option,
.tcjc-reader-dark-active .tcjc-scripture-reader select option,
.tcjc-reader-dark-active .tcjc-reader-page select option,
.tcjc-app-dark-active .tcjc-reader-panel select option,
.tcjc-app-dark-active .tcjc-reader-controls select option,
.tcjc-app-dark-active .tcjc-reader-select option,
.tcjc-app-dark-active .tcjc-scripture-reader select option,
.tcjc-app-dark-active .tcjc-reader-page select option {
  color: #15110b !important;
  -webkit-text-fill-color: #15110b !important;
  background: #fff8e6 !important;
}

.tcjc-reader-dark-active .tcjc-reader-panel select:disabled,
.tcjc-reader-dark-active .tcjc-reader-controls select:disabled,
.tcjc-reader-dark-active .tcjc-reader-select:disabled,
.tcjc-app-dark-active .tcjc-reader-panel select:disabled,
.tcjc-app-dark-active .tcjc-reader-controls select:disabled,
.tcjc-app-dark-active .tcjc-reader-select:disabled {
  color: rgba(255, 248, 225, 0.58) !important;
  -webkit-text-fill-color: rgba(255, 248, 225, 0.58) !important;
}



/* ====================== STEP 185 GLOBAL DARK MODE CONTROL TEXT FIX ====================== */

/*
  One dark-mode readability layer for navigation controls, menus, dialogs,
  popups, and form controls across mobile, tablet, landscape, and desktop.
  This avoids screen-size-specific patches.
*/

html.tcjc-app-dark-active,
body.tcjc-app-dark-active,
body.tcjc-reader-dark-active {
  --tcjc-dark-ui-text: rgba(255, 248, 225, 0.97);
  --tcjc-dark-ui-muted: rgba(255, 248, 225, 0.74);
  --tcjc-dark-ui-heading: rgba(201, 232, 248, 0.98);
  --tcjc-dark-ui-placeholder: rgba(255, 248, 225, 0.56);
  --tcjc-dark-ui-option-bg: #fff8e6;
  --tcjc-dark-ui-option-text: #15110b;
}

/* Reader selectors, header controls, buttons, and custom control surfaces */
html.tcjc-app-dark-active body :is(
  .tcjc-app-header,
  .tcjc-app-menu,
  .tcjc-app-nav,
  .tcjc-reader-nav,
  .tcjc-reader-toolbar,
  .tcjc-reader-controls,
  .tcjc-reader-panel,
  .tcjc-reader-picker,
  .tcjc-reader-selector,
  .tcjc-reader-select-wrap,
  .tcjc-reader-select-shell,
  .tcjc-reader-control-card,
  .tcjc-reader-control-row,
  .tcjc-reader-topbar,
  .tcjc-scripture-panel,
  .tcjc-scripture-controls,
  .tcjc-scripture-picker,
  .tcjc-mobile-menu,
  .tcjc-popover,
  .tcjc-modal,
  .tcjc-dialog,
  .tcjc-sheet,
  .tcjc-drawer,
  [role="dialog"],
  [role="menu"],
  [data-radix-popper-content-wrapper]
) {
  color: var(--tcjc-dark-ui-text) !important;
}

/* Native fields and buttons in dark mode */
html.tcjc-app-dark-active body :is(
  select,
  input,
  textarea,
  button,
  [role="button"],
  [role="combobox"],
  [aria-haspopup],
  summary
) {
  color: var(--tcjc-dark-ui-text) !important;
  -webkit-text-fill-color: var(--tcjc-dark-ui-text) !important;
}

/* Text inside custom buttons/selectors/popups */
html.tcjc-app-dark-active body :is(
  button,
  [role="button"],
  [role="combobox"],
  .tcjc-app-header,
  .tcjc-app-menu,
  .tcjc-app-nav,
  .tcjc-reader-nav,
  .tcjc-reader-toolbar,
  .tcjc-reader-controls,
  .tcjc-reader-panel,
  .tcjc-reader-picker,
  .tcjc-reader-selector,
  .tcjc-scripture-panel,
  .tcjc-popover,
  .tcjc-modal,
  .tcjc-dialog,
  .tcjc-sheet,
  .tcjc-drawer,
  [role="dialog"],
  [role="menu"]
) :is(
  span,
  strong,
  em,
  small,
  label,
  p,
  div,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Headings / labels inside dark reader controls */
html.tcjc-app-dark-active body :is(
  .tcjc-reader-panel,
  .tcjc-reader-controls,
  .tcjc-scripture-panel,
  .tcjc-reader-picker,
  .tcjc-reader-selector,
  .tcjc-popover,
  .tcjc-modal,
  .tcjc-dialog,
  .tcjc-sheet,
  .tcjc-drawer,
  [role="dialog"]
) :is(
  label,
  .label,
  .eyebrow,
  .tcjc-label,
  .tcjc-reader-label,
  .tcjc-control-label,
  .tcjc-section-label,
  h1,
  h2,
  h3,
  h4
) {
  color: var(--tcjc-dark-ui-heading) !important;
  -webkit-text-fill-color: var(--tcjc-dark-ui-heading) !important;
}

/* Placeholder text */
html.tcjc-app-dark-active body :is(input, textarea)::placeholder {
  color: var(--tcjc-dark-ui-placeholder) !important;
  -webkit-text-fill-color: var(--tcjc-dark-ui-placeholder) !important;
}

/* Dropdown option lists need dark text on light native option backgrounds */
html.tcjc-app-dark-active body select option,
body.tcjc-reader-dark-active select option {
  color: var(--tcjc-dark-ui-option-text) !important;
  -webkit-text-fill-color: var(--tcjc-dark-ui-option-text) !important;
  background: var(--tcjc-dark-ui-option-bg) !important;
}

/*
  Preserve scripture reading text styling.
  The parchment/page content should keep its own warm reading colors.
*/
html.tcjc-app-dark-active body :is(
  .tcjc-scripture-page,
  .tcjc-page-card,
  .tcjc-reader-page-card,
  .tcjc-scripture-card,
  .tcjc-reader-content,
  .tcjc-chapter-content,
  .tcjc-verses,
  .tcjc-verse,
  .tcjc-verse-text,
  .tcjc-verse-number
) {
  -webkit-text-fill-color: unset !important;
}

/* But saved/search/action popups stay readable in dark mode */
html.tcjc-app-dark-active body :is(
  .tcjc-save-popup,
  .tcjc-saved-popup,
  .tcjc-search-popup,
  .tcjc-reader-popup,
  .tcjc-action-menu,
  .tcjc-verse-action-menu,
  .tcjc-bottom-sheet,
  .tcjc-reader-modal,
  .tcjc-reader-dialog
),
html.tcjc-app-dark-active body :is(
  .tcjc-save-popup,
  .tcjc-saved-popup,
  .tcjc-search-popup,
  .tcjc-reader-popup,
  .tcjc-action-menu,
  .tcjc-verse-action-menu,
  .tcjc-bottom-sheet,
  .tcjc-reader-modal,
  .tcjc-reader-dialog
) * {
  color: var(--tcjc-dark-ui-text) !important;
  -webkit-text-fill-color: var(--tcjc-dark-ui-text) !important;
}



/* ====================== STEP 186 READER THEME DARK CONTROL TEXT SOURCE FIX ====================== */

/*
  The Reader has its own theme class:
  .tcjc-reader-theme-dark

  These rules target the actual Reader navigation fields:
  Collection / Book / Sub-book / Chapter.
  This covers portrait, landscape, mobile, tablet, and desktop.
*/

.tcjc-reader-theme-dark .tcjc-reader-compact-toolbar,
.tcjc-reader-theme-dark .tcjc-control-field,
.tcjc-reader-theme-dark .tcjc-control-field label {
  color: rgba(201, 232, 248, 0.98) !important;
  -webkit-text-fill-color: rgba(201, 232, 248, 0.98) !important;
}

.tcjc-reader-theme-dark .tcjc-control-field select,
.tcjc-reader-theme-dark select#tcjc-collection-select,
.tcjc-reader-theme-dark select#tcjc-middle-select,
.tcjc-reader-theme-dark select#tcjc-bom-subbook-select,
.tcjc-reader-theme-dark select#tcjc-chapter-select {
  color: rgba(255, 248, 225, 0.98) !important;
  -webkit-text-fill-color: rgba(255, 248, 225, 0.98) !important;
  caret-color: rgba(255, 248, 225, 0.98) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
}

/* Native iOS/Chrome dropdown option list */
.tcjc-reader-theme-dark .tcjc-control-field select option,
.tcjc-reader-theme-dark select#tcjc-collection-select option,
.tcjc-reader-theme-dark select#tcjc-middle-select option,
.tcjc-reader-theme-dark select#tcjc-bom-subbook-select option,
.tcjc-reader-theme-dark select#tcjc-chapter-select option {
  color: #15110b !important;
  -webkit-text-fill-color: #15110b !important;
  background: #fff8e6 !important;
}

/*
  Daily Verse popup: one remaining paragraph stayed dark blue.
  Target the actual Daily Verse card text classes directly.
*/
.tcjc-app-dark-active .tcjc-app-verse-card .tcjc-app-daily-description,
.tcjc-app-dark-active .tcjc-app-verse-card .tcjc-app-daily-reference,
.tcjc-app-dark-active .tcjc-app-verse-card .tcjc-app-daily-quote,
.tcjc-app-dark-active .tcjc-app-verse-card p,
.tcjc-app-dark-active .tcjc-app-verse-card blockquote,
body.tcjc-reader-dark-active .tcjc-app-verse-card .tcjc-app-daily-description,
body.tcjc-reader-dark-active .tcjc-app-verse-card .tcjc-app-daily-reference,
body.tcjc-reader-dark-active .tcjc-app-verse-card .tcjc-app-daily-quote,
body.tcjc-reader-dark-active .tcjc-app-verse-card p,
body.tcjc-reader-dark-active .tcjc-app-verse-card blockquote {
  color: rgba(255, 248, 225, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 248, 225, 0.96) !important;
}

.tcjc-app-dark-active .tcjc-app-verse-card .tcjc-eyebrow,
body.tcjc-reader-dark-active .tcjc-app-verse-card .tcjc-eyebrow {
  color: rgba(201, 232, 248, 0.98) !important;
  -webkit-text-fill-color: rgba(201, 232, 248, 0.98) !important;
}



/* ====================== STEP 187 DIRECT READER NAV SELECT CLASS FIX ====================== */

/*
  Direct class on the actual Reader navigation selects.
  This avoids depending on layout, screen size, or inherited app/theme selectors.
*/

.tcjc-reader-theme-dark select.tcjc-reader-nav-select,
.tcjc-reader-theme-dark .tcjc-reader-nav-select,
body.tcjc-reader-dark-active select.tcjc-reader-nav-select,
html.tcjc-app-dark-active body select.tcjc-reader-nav-select {
  color: #fff8e1 !important;
  -webkit-text-fill-color: #fff8e1 !important;
  background-color: rgba(8, 23, 37, 0.78) !important;
  background-image: none !important;
  border-color: rgba(148, 184, 205, 0.46) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.tcjc-reader-theme-dark select.tcjc-reader-nav-select:focus,
body.tcjc-reader-dark-active select.tcjc-reader-nav-select:focus,
html.tcjc-app-dark-active body select.tcjc-reader-nav-select:focus {
  color: #fff8e1 !important;
  -webkit-text-fill-color: #fff8e1 !important;
  outline-color: rgba(201, 232, 248, 0.8) !important;
}

.tcjc-reader-theme-dark select.tcjc-reader-nav-select option,
body.tcjc-reader-dark-active select.tcjc-reader-nav-select option,
html.tcjc-app-dark-active body select.tcjc-reader-nav-select option {
  color: #15110b !important;
  -webkit-text-fill-color: #15110b !important;
  background: #fff8e6 !important;
}


/* source: src/styles/app.css */
:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #303030;
  background: #f7f5f2;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

html, body, #root {
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 320px;
  background: #f7f5f2;
}

button, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* ====================== APP HOME - HOMEPAGE STYLE ====================== */

.tcjc-homepage {
  width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background: #f7f5f2;
  color: #303030;
  padding-bottom: 44px;
}

.tcjc-section {
  width: calc(100vw - 28px);
  max-width: calc(100vw - 28px);
  margin: 0 auto 22px;
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding: 88px clamp(22px, 4vw, 90px);
  border-radius: 34px;
  overflow: hidden;
  isolation: isolate;
  background: #111;
}

.tcjc-section.left { justify-content: flex-start; }
.tcjc-hero { min-height: 94svh; }

.tcjc-bg-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  background: #111;
}

.tcjc-bg-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.tcjc-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.tcjc-overlay.warm {
  background:
    radial-gradient(circle at 52% 22%, rgba(255,255,255,.13), transparent 34%),
    linear-gradient(to top, rgba(22,20,18,.68), rgba(22,20,18,.28), rgba(22,20,18,.10));
}

.tcjc-hero-card,
.tcjc-glass-card {
  position: relative;
  z-index: 5;
  width: min(690px, 100%);
  padding: 38px 36px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.08) 50%, rgba(255,255,255,.22));
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255,255,255,.50);
  box-shadow:
    0 18px 44px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(148,184,205,.14);
}

.tcjc-hero-card::before,
.tcjc-glass-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.54), transparent 30%, rgba(255,255,255,.10) 64%, transparent 100%);
  opacity: .62;
  mix-blend-mode: screen;
}

.tcjc-hero-card > *,
.tcjc-glass-card > * {
  position: relative;
  z-index: 1;
}

.tcjc-hero-card { max-width: 780px; }

.tcjc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #a9def7;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(5,18,30,.64), 0 0 14px rgba(77,170,220,.28);
}

.tcjc-eyebrow::before,
.tcjc-eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(169,222,247,.70);
  box-shadow: 0 0 12px rgba(77,170,220,.24);
}

.tcjc-hero-card .tcjc-eyebrow::before { display: none; }

.tcjc-hero-card h1,
.tcjc-section-header h2 {
  margin: 0 0 18px;
  line-height: 1.03;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.tcjc-hero-card h1 {
  color: rgba(255,255,255,.96);
  font-size: clamp(2.15rem,3.8vw,4.15rem);
  font-weight: 720;
  text-shadow: 0 2px 4px rgba(8,18,32,.42), 0 12px 28px rgba(8,18,32,.32);
}

.tcjc-hero-card p,
.tcjc-section-header p,
.tcjc-info-card p {
  margin: 0 0 18px;
  font-size: 1.05rem;
  line-height: 1.72;
}

.tcjc-hero-card p {
  color: rgba(255,255,255,.91);
  text-shadow: 0 1px 3px rgba(7,18,31,.50), 0 8px 22px rgba(7,18,31,.26);
}

.tcjc-scripture-quote {
  margin: 24px auto;
  padding: 20px 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}

.tcjc-scripture-quote p {
  margin: 0 0 10px;
  color: rgba(255,255,255,.94);
  font-style: italic;
  text-shadow: 0 1px 3px rgba(7,18,31,.48);
}

.tcjc-scripture-quote span {
  color: #a9def7;
  font-size: .88rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tcjc-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.tcjc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 30px;
  border-radius: 14px;
  color: #fff;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.tcjc-btn.primary {
  border: 1px solid rgba(255,255,255,.42);
  background: linear-gradient(135deg, rgba(111,177,215,.88), rgba(53,121,163,.88));
  box-shadow: 0 12px 30px rgba(36,82,112,.24), inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow: 0 1px 2px rgba(12,28,44,.42);
}

.tcjc-btn.primary:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(132,193,226,.94), rgba(58,134,178,.94));
  box-shadow: 0 16px 38px rgba(36,82,112,.28), inset 0 1px 0 rgba(255,255,255,.34);
}

.tcjc-btn.secondary {
  border: 1px solid rgba(255,255,255,.62);
  background: rgba(255,255,255,.13);
  color: #fff;
  box-shadow: 0 10px 26px rgba(8,24,42,.16), inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow: 0 1px 2px rgba(8,28,45,.52);
}

.tcjc-btn.secondary:not(:disabled):hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.76);
}

.tcjc-btn:disabled { opacity: .72; }

.tcjc-authority {
  width: 100vw;
  max-width: 100vw;
  background: radial-gradient(circle at 50% 0%, rgba(148,184,205,.20), transparent 36%), #f7f5f2;
  padding: 82px 22px;
}

.tcjc-authority-inner {
  width: min(1320px, 100%);
  margin: 0 auto;
}

.tcjc-section-header {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.tcjc-section-header.wide { max-width: 1120px; }

.tcjc-section-header .tcjc-eyebrow {
  color: #4f9fc8;
  text-shadow: none;
}

.tcjc-section-header .tcjc-eyebrow::before,
.tcjc-section-header .tcjc-eyebrow::after {
  background: rgba(79,159,200,.66);
  box-shadow: none;
}

.tcjc-section-header h2 {
  color: #24344d;
  font-size: clamp(1.9rem,3vw,3rem);
  font-weight: 720;
}

.tcjc-section-header p { color: #303030; }

.tcjc-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
}

.tcjc-info-card {
  padding: 24px 22px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid rgba(148,184,205,.18);
  box-shadow: 0 18px 48px rgba(36,52,77,.08);
}

.tcjc-info-card h3 {
  margin: 0 0 12px;
  color: #24344d;
  font-size: 1.12rem;
  line-height: 1.18;
  letter-spacing: -.03em;
  font-weight: 800;
}

.tcjc-info-card p {
  margin-bottom: 0;
  color: #303030;
  font-size: .96rem;
  line-height: 1.58;
}

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .62s ease, transform .62s ease;
  transition-delay: .05s;
  will-change: opacity, transform;
}

.fade-up.delayed-card { transition-delay: .12s; }

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* ====================== SCRIPTURE READER ====================== */

.tcjc-reader-shell {
  display: block;
  width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  background: #fff;
  color: #2b2116;
  overflow: hidden;
}

.tcjc-reader-page {
  width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  background: #fff;
  overflow: hidden;
}

.tcjc-reader-section {
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  position: relative;
  overflow: visible;
  background: #fff;
}

.tcjc-reader-nav-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px clamp(10px,3vw,44px) 14px;
}

.tcjc-reader-main-section {
  padding: 14px clamp(8px,1.6vw,22px) 24px;
}

.tcjc-reader-card,
.tcjc-scripture-panel,
.tcjc-current-book-card {
  position: relative;
  color: #2a2116;
  background:
    radial-gradient(circle at 16% 9%, rgba(255,255,255,.52), transparent 24rem),
    radial-gradient(circle at 88% 88%, rgba(124,82,32,.15), transparent 24rem),
    radial-gradient(circle at 3% 35%, rgba(124,82,32,.09), transparent 18rem),
    radial-gradient(circle at 98% 8%, rgba(70,45,18,.08), transparent 18rem),
    linear-gradient(135deg,#f6e8c6 0%,#ead7a9 44%,#fbefd1 100%);
  border: 1px solid rgba(116,82,38,.26);
  box-shadow: 0 24px 65px rgba(36,52,77,.11), inset 0 0 60px rgba(116,82,38,.15), inset 0 1px 0 rgba(255,255,255,.55);
  overflow: hidden;
}

.tcjc-reader-card {
  z-index: 5;
  width: min(1520px, calc(100vw - 42px));
  padding: 28px clamp(22px,4vw,56px);
  border-radius: 30px;
  text-align: center;
}

.tcjc-reader-back {
  position: absolute;
  top: 18px;
  left: 18px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 13px;
  border: 1px solid rgba(116,82,38,.22);
  background: linear-gradient(135deg,rgba(255,250,236,.96),rgba(243,229,199,.96));
  color: #3b2712;
  font-size: .9rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
}

.tcjc-scripture-panel {
  grid-area: scripture;
  perspective: 1900px;
  min-height: 640px;
  padding: 54px clamp(20px,3vw,58px) 48px;
  border-radius: 30px;
  touch-action: pan-y;
  transform-style: preserve-3d;
  isolation: isolate;
}

.tcjc-current-book-card {
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 24px 22px;
  border-radius: 28px;
}

.tcjc-reader-card::before,
.tcjc-scripture-panel::before,
.tcjc-current-book-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background:
    repeating-linear-gradient(90deg, rgba(82,52,20,.042) 0, rgba(82,52,20,.042) 1px, transparent 1px, transparent 13px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.13) 0, rgba(255,255,255,.13) 1px, transparent 1px, transparent 10px);
  mix-blend-mode: multiply;
}

.tcjc-scripture-panel::after,
.tcjc-current-book-card::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 22px;
  pointer-events: none;
  border: 1px solid rgba(116,82,38,.10);
  box-shadow: inset 0 0 18px rgba(116,82,38,.05);
}

.tcjc-reader-card > *,
.tcjc-scripture-panel > *,
.tcjc-current-book-card > * {
  position: relative;
  z-index: 2;
}

.tcjc-reader-shell .tcjc-eyebrow {
  margin-bottom: 8px;
  color: #805f34;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: none;
}

.tcjc-reader-shell .tcjc-eyebrow::before,
.tcjc-reader-shell .tcjc-eyebrow::after {
  display: inline-block;
  width: 34px;
  background: rgba(128,95,52,.62);
  box-shadow: none;
}

.tcjc-reader-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 0 auto 10px;
  color: #705229;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.35;
}

.tcjc-reader-breadcrumbs button {
  border: 0;
  padding: 0;
  background: transparent;
  color: #5e4522;
  font-weight: 850;
  text-decoration: none;
}

.tcjc-reader-breadcrumbs button:hover { text-decoration: underline; }

.tcjc-reader-card h1 {
  margin: 0 0 6px;
  color: #3b2712;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem,3.35vw,3.7rem);
  line-height: 1.02;
  letter-spacing: -.05em;
  font-weight: 720;
  text-wrap: balance;
}

.tcjc-reader-card p {
  max-width: 920px;
  margin: 0 auto 18px;
  color: #493620;
  font-size: 1.12rem;
  line-height: 1.52;
}

.tcjc-reader-controls {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  max-width: 1360px;
  margin: 0 auto;
  text-align: left;
}

.tcjc-control-field { min-width: 0; }

.tcjc-control-field label {
  display: block;
  margin: 0 0 6px;
  color: #805f34;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.tcjc-control-field select {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0 44px 0 17px;
  border-radius: 14px;
  border: 1px solid rgba(116,82,38,.28);
  background:
    linear-gradient(45deg, transparent 50%, #805f34 50%) calc(100% - 21px) 50% / 7px 7px no-repeat,
    linear-gradient(135deg, #805f34 50%, transparent 50%) calc(100% - 16px) 50% / 7px 7px no-repeat,
    linear-gradient(135deg,rgba(255,250,236,.96),rgba(243,229,199,.96));
  color: #3b2712;
  font-weight: 800;
  font-size: 1.08rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 18px rgba(80,52,22,.08);
  appearance: none;
  -webkit-appearance: none;
}

.tcjc-reader-layout {
  position: relative;
  z-index: 5;
  width: min(1760px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(320px,390px);
  grid-template-areas: "scripture contents";
  gap: 24px;
  align-items: start;
}

.tcjc-current-book-panel {
  grid-area: contents;
  position: sticky;
  top: 16px;
}

.tcjc-sidebar-kicker {
  color: #7e6337;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tcjc-current-book-card h2 {
  margin: 6px 0 8px;
  color: #3b2712;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.42rem;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.tcjc-current-book-card p {
  margin: 0 0 14px;
  color: #5d4425;
  font-size: 1rem;
  line-height: 1.42;
}

.tcjc-compact-chapter-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 7px;
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
}

.tcjc-chapter-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px;
  border-radius: 12px;
  background: linear-gradient(135deg,rgba(255,250,236,.96),rgba(239,222,187,.94));
  border: 1px solid rgba(116,82,38,.20);
  color: #3b2712;
  font-size: .9rem;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.tcjc-chapter-pill.tcjc-song-title-pill {
  font-size: .78rem;
  line-height: 1.12;
  min-height: 42px;
  padding: 7px 8px;
  word-break: normal;
  hyphens: auto;
}

.tcjc-chapter-pill:hover { background: rgba(126,99,55,.12); }

.tcjc-chapter-pill.active {
  background: linear-gradient(135deg,#7e6337,#62491f);
  color: #fff;
  border-color: #7e6337;
}

.tcjc-scripture-panel h2 {
  margin: 0 0 6px;
  color: #3b2712;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem,3vw,3.45rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.tcjc-book-label {
  margin: 0 0 24px;
  color: #805f34;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .84rem;
}

.tcjc-chapter-intro {
  margin: 0 0 26px;
  padding: 20px 24px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,248,230,.72), rgba(255,255,255,.34)),
    radial-gradient(circle at 0% 0%, rgba(148,104,48,.18), transparent 42%);
  border: 1px solid rgba(116,82,38,.18);
}

.tcjc-chapter-intro p {
  margin: 0 0 10px;
  color: #47331f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  line-height: 1.64;
  font-style: italic;
}

.tcjc-chapter-intro p:last-child { margin-bottom: 0; }

.tcjc-verse {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(116,82,38,.11);
  border-radius: 14px;
  scroll-margin-top: 120px;
  transition: background .34s ease, box-shadow .34s ease, transform .34s ease, padding .34s ease;
}

.tcjc-verse:last-child { border-bottom: none; }

.tcjc-verse.tcjc-target-verse {
  margin: 10px 0;
  padding: 14px 14px 14px 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.58), rgba(148,184,205,.24)),
    radial-gradient(circle at 4% 50%, rgba(148,184,205,.33), transparent 42%);
  box-shadow:
    0 14px 34px rgba(36,52,77,.12),
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 4px 0 0 rgba(148,184,205,.92);
  transform: translateY(-1px);
}

.tcjc-verse-num {
  color: #896738;
  font-weight: 900;
  text-align: right;
  user-select: none;
  font-size: 1rem;
  line-height: 1.7;
}

.tcjc-verse-text {
  color: #2b2116;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.68;
  white-space: pre-line;
}

.tcjc-nav-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 34px;
}

.tcjc-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border-radius: 13px;
  border: 0;
  background: linear-gradient(135deg,#7e6337,#62491f);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(80,52,22,.16);
}

.tcjc-nav-btn:hover { background: linear-gradient(135deg,#6f552e,#543b18); }

.tcjc-loading {
  padding: 26px;
  text-align: center;
  color: #665139;
  font-weight: 800;
  font-size: 1.08rem;
}

.tcjc-swipe-hint {
  display: none;
  margin: 20px 0 0;
  color: #86673b;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}

.tcjc-page-content {
  position: relative;
  z-index: 3;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

.tcjc-page-content::after {
  content: "";
  position: absolute;
  inset: -62px -94px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(72,42,11,.04) 24%, rgba(255,255,255,.34) 44%, rgba(76,43,12,.30) 63%, transparent 100%);
  mix-blend-mode: multiply;
}

.tcjc-scripture-panel.tcjc-page-turn-next::before,
.tcjc-scripture-panel.tcjc-page-turn-prev::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  width: 42%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(45,25,7,.08) 24%, rgba(45,25,7,.30) 52%, rgba(255,255,255,.18) 74%, transparent 100%);
  filter: blur(.2px);
  mix-blend-mode: multiply;
}

.tcjc-scripture-panel.tcjc-page-turn-next::before {
  right: 0;
  animation: tcjcSweepShadowNext .72s cubic-bezier(.18,.78,.16,1) both;
}

.tcjc-scripture-panel.tcjc-page-turn-prev::before {
  left: 0;
  transform: scaleX(-1);
  animation: tcjcSweepShadowPrev .72s cubic-bezier(.18,.78,.16,1) both;
}

.tcjc-page-fold {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 12;
  width: 66%;
  pointer-events: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.58), transparent 16rem),
    radial-gradient(circle at 82% 58%, rgba(95,54,14,.16), transparent 20rem),
    linear-gradient(90deg, rgba(255,250,232,.90) 0%, rgba(246,230,189,.95) 36%, rgba(218,189,128,.92) 64%, rgba(116,75,28,.30) 100%);
  box-shadow: 0 0 36px rgba(58,35,12,.20), 14px 0 28px rgba(60,35,10,.13), inset 22px 0 36px rgba(255,255,255,.24), inset -46px 0 44px rgba(76,43,12,.23);
  opacity: 0;
}

.tcjc-page-fold-next {
  right: 0;
  transform-origin: left center;
  border-radius: 0 30px 30px 0;
}

.tcjc-page-fold-prev {
  left: 0;
  transform-origin: right center;
  border-radius: 30px 0 0 30px;
}

.tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content {
  transform-origin: left center;
  animation: tcjcContentLeaveNext .72s cubic-bezier(.19,.82,.14,1) both;
}

.tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content {
  transform-origin: right center;
  animation: tcjcContentLeavePrev .72s cubic-bezier(.19,.82,.14,1) both;
}

.tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-fold-next {
  animation: tcjcFoldNext .72s cubic-bezier(.16,.80,.14,1) both;
}

.tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-fold-prev {
  animation: tcjcFoldPrev .72s cubic-bezier(.16,.80,.14,1) both;
}

.tcjc-scripture-panel.tcjc-page-enter-next .tcjc-page-content {
  transform-origin: right center;
  animation: tcjcContentEnterNext .48s cubic-bezier(.18,.72,.22,1) both;
}

.tcjc-scripture-panel.tcjc-page-enter-prev .tcjc-page-content {
  transform-origin: left center;
  animation: tcjcContentEnterPrev .48s cubic-bezier(.18,.72,.22,1) both;
}

@keyframes tcjcContentLeaveNext {
  0% { opacity: 1; transform: translateX(0) scaleX(1) rotateY(0deg); filter: brightness(1); }
  50% { opacity: .82; transform: translateX(-16px) scaleX(.982) rotateY(-30deg); filter: brightness(.97); }
  100% { opacity: .08; transform: translateX(-86px) scaleX(.91) rotateY(-91deg); filter: brightness(.78); }
}

@keyframes tcjcContentLeavePrev {
  0% { opacity: 1; transform: translateX(0) scaleX(1) rotateY(0deg); filter: brightness(1); }
  50% { opacity: .82; transform: translateX(16px) scaleX(.982) rotateY(30deg); filter: brightness(.97); }
  100% { opacity: .08; transform: translateX(86px) scaleX(.91) rotateY(91deg); filter: brightness(.78); }
}

@keyframes tcjcFoldNext {
  0% { opacity: 0; transform: translateX(64%) scaleX(.88) rotateY(0deg); }
  38% { opacity: 1; transform: translateX(4%) scaleX(1.01) rotateY(-44deg); }
  100% { opacity: 0; transform: translateX(-82%) scaleX(.72) rotateY(-156deg); }
}

@keyframes tcjcFoldPrev {
  0% { opacity: 0; transform: translateX(-64%) scaleX(.88) rotateY(0deg); }
  38% { opacity: 1; transform: translateX(-4%) scaleX(1.01) rotateY(44deg); }
  100% { opacity: 0; transform: translateX(82%) scaleX(.72) rotateY(156deg); }
}

@keyframes tcjcContentEnterNext {
  0% { opacity: .16; transform: translateX(64px) scaleX(.985) rotateY(42deg); filter: brightness(.86); }
  82% { opacity: 1; transform: translateX(-2px) scaleX(.998) rotateY(-1.5deg); filter: brightness(1); }
  100% { opacity: 1; transform: translateX(0) scaleX(1) rotateY(0deg); filter: brightness(1); }
}

@keyframes tcjcContentEnterPrev {
  0% { opacity: .16; transform: translateX(-64px) scaleX(.985) rotateY(-42deg); filter: brightness(.86); }
  82% { opacity: 1; transform: translateX(2px) scaleX(.998) rotateY(1.5deg); filter: brightness(1); }
  100% { opacity: 1; transform: translateX(0) scaleX(1) rotateY(0deg); filter: brightness(1); }
}

@keyframes tcjcSweepShadowNext {
  0% { opacity: 0; transform: translateX(34%) scaleX(.45); }
  56% { opacity: .60; transform: translateX(-22%) scaleX(1.05); }
  100% { opacity: 0; transform: translateX(-58%) scaleX(.7); }
}

@keyframes tcjcSweepShadowPrev {
  0% { opacity: 0; transform: translateX(-34%) scaleX(.45) scaleX(-1); }
  56% { opacity: .60; transform: translateX(22%) scaleX(1.05) scaleX(-1); }
  100% { opacity: 0; transform: translateX(58%) scaleX(.7) scaleX(-1); }
}

@media (max-width: 1120px) {
  .tcjc-card-grid { grid-template-columns: repeat(2, 1fr); }

  .tcjc-reader-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "contents"
      "scripture";
  }

  .tcjc-current-book-panel {
    position: relative;
    top: auto;
  }

  .tcjc-current-book-card { max-height: none; }

  .tcjc-compact-chapter-list {
    max-height: 320px;
    grid-template-columns: repeat(6,minmax(0,1fr));
  }
}

@media (max-width: 768px) {
  .tcjc-homepage { padding-bottom: 30px; }

  .tcjc-section {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    min-height: 84svh;
    padding: 34px 12px 50px;
    border-radius: 24px;
  }

  .tcjc-hero {
    min-height: 84svh;
    padding: 18px;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
  }

  .tcjc-hero-card,
  .tcjc-glass-card {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    padding: 24px 20px;
    border-radius: 22px;
    -webkit-backdrop-filter: blur(4px) saturate(108%);
    backdrop-filter: blur(4px) saturate(108%);
  }

  .tcjc-hero-card h1 {
    font-size: 2.08rem;
    line-height: 1.04;
    letter-spacing: -.045em;
  }

  .tcjc-hero-card p,
  .tcjc-section-header p {
    font-size: 1rem;
    line-height: 1.62;
  }

  .tcjc-eyebrow { font-size: .68rem; gap: 8px; }

  .tcjc-eyebrow::before,
  .tcjc-eyebrow::after { width: 20px; }

  .tcjc-hero-card .tcjc-eyebrow::before { display: inline-block; }

  .tcjc-scripture-quote {
    margin: 20px auto;
    padding: 18px;
  }

  .tcjc-actions { flex-direction: column; }
  .tcjc-btn { width: 100%; }
  .tcjc-authority { padding: 64px 14px; }

  .tcjc-card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 30px;
  }

  .tcjc-info-card {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .fade-up {
    transform: translate3d(0,14px,0);
    transition: opacity .42s ease-out, transform .42s ease-out;
    transition-delay: 0s;
  }

  .tcjc-reader-nav-section {
    padding: 8px 6px;
    align-items: flex-start;
  }

  .tcjc-reader-main-section { padding: 6px 6px 8px; }

  .tcjc-reader-card {
    width: 100%;
    max-width: 100%;
    padding: 18px 18px 20px;
    border-radius: 22px;
  }

  .tcjc-reader-back {
    position: relative;
    inset: auto;
    margin: 0 auto 12px;
  }

  .tcjc-reader-card h1 {
    font-size: 1.92rem;
    line-height: 1.02;
    letter-spacing: -.045em;
    margin-bottom: 5px;
  }

  .tcjc-reader-card p {
    font-size: 1.08rem;
    line-height: 1.48;
    margin-bottom: 15px;
  }

  .tcjc-reader-breadcrumbs {
    font-size: .98rem;
    line-height: 1.32;
    margin-bottom: 8px;
  }

  .tcjc-reader-shell .tcjc-eyebrow {
    font-size: .7rem;
    gap: 8px;
    margin-bottom: 6px;
  }

  .tcjc-reader-shell .tcjc-eyebrow::before,
  .tcjc-reader-shell .tcjc-eyebrow::after { width: 20px; }

  .tcjc-reader-controls {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .tcjc-control-field label {
    margin-bottom: 4px;
    font-size: .75rem;
  }

  .tcjc-control-field select {
    height: 50px;
    font-size: 1.04rem;
  }

  .tcjc-reader-layout {
    display: block;
    width: 100%;
  }

  .tcjc-current-book-panel { display: none; }

  .tcjc-scripture-panel {
    width: 100%;
    min-height: 66vh;
    padding: 30px 14px 26px;
    border-radius: 24px;
    perspective: 1500px;
  }

  .tcjc-scripture-panel::after {
    inset: 10px;
    border-radius: 18px;
  }

  .tcjc-page-fold { width: 80%; }

  .tcjc-scripture-panel h2 {
    font-size: 2.28rem;
    margin-bottom: 5px;
  }

  .tcjc-book-label { margin-bottom: 20px; }

  .tcjc-chapter-intro {
    padding: 18px;
    margin-bottom: 22px;
    border-radius: 18px;
  }

  .tcjc-chapter-intro p {
    font-size: 1.08rem;
    line-height: 1.58;
  }

  .tcjc-verse {
    grid-template-columns: 24px minmax(0,1fr);
    gap: 7px;
    padding: 7px 0;
    scroll-margin-top: 98px;
  }

  .tcjc-verse-num {
    font-size: .98rem;
    line-height: 1.65;
  }

  .tcjc-verse-text {
    font-size: 1.14rem;
    line-height: 1.62;
  }

  .tcjc-nav-row { display: none; }

  .tcjc-swipe-hint {
    display: block;
    margin-top: 24px;
  }
}

@media (max-width: 390px) {
  .tcjc-reader-card { padding: 16px 16px 18px; }

  .tcjc-scripture-panel {
    padding-left: 12px;
    padding-right: 12px;
  }

  .tcjc-scripture-panel h2 { font-size: 2.04rem; }

  .tcjc-verse {
    grid-template-columns: 22px minmax(0,1fr);
    gap: 6px;
  }

  .tcjc-verse-text { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .tcjc-scripture-panel.tcjc-page-turn-next::before,
  .tcjc-scripture-panel.tcjc-page-turn-prev::before,
  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-enter-next .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-enter-prev .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-fold-next,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-fold-prev {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .tcjc-btn { transition: none; }
  .tcjc-btn:hover { transform: none; }
}


/* Step 31: unmistakable App Home button */
.tcjc-reader-shell .tcjc-reader-back {
  position: absolute !important;
  top: 22px !important;
  left: 24px !important;
  z-index: 20 !important;
  min-height: 54px !important;
  padding: 0 26px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  background: linear-gradient(135deg, rgba(111, 177, 215, 0.96), rgba(53, 121, 163, 0.96)) !important;
  color: #fff !important;
  font-size: 1.04rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.01em !important;
  box-shadow:
    0 14px 30px rgba(36, 82, 112, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
  text-shadow: 0 1px 2px rgba(12, 28, 44, 0.46) !important;
}

.tcjc-reader-shell .tcjc-reader-back:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, rgba(132, 193, 226, 0.98), rgba(58, 134, 178, 0.98)) !important;
}

.tcjc-search-panel {
  margin: 16px auto 0;
  max-width: 1360px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(116, 82, 38, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 248, 230, 0.72), rgba(255, 255, 255, 0.28)),
    radial-gradient(circle at 0% 0%, rgba(148, 184, 205, 0.18), transparent 42%);
  text-align: left;
}

.tcjc-search-form label {
  display: block;
  margin: 0 0 7px;
  color: #805f34;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.tcjc-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
}

.tcjc-search-row input {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(116, 82, 38, 0.28);
  background: linear-gradient(135deg, rgba(255, 250, 236, 0.96), rgba(243, 229, 199, 0.96));
  color: #3b2712;
  font-size: 1.02rem;
  font-weight: 750;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 8px 18px rgba(80, 52, 22, 0.08);
}

.tcjc-search-row input:focus {
  outline: 3px solid rgba(148, 184, 205, 0.34);
}

.tcjc-search-row button {
  min-height: 50px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: linear-gradient(135deg, rgba(111, 177, 215, 0.92), rgba(53, 121, 163, 0.92));
  color: #fff;
  font-weight: 950;
  box-shadow:
    0 10px 22px rgba(36, 82, 112, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  text-shadow: 0 1px 2px rgba(12, 28, 44, 0.42);
}

.tcjc-search-row button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(132, 193, 226, 0.96), rgba(58, 134, 178, 0.96));
}

.tcjc-search-row .tcjc-search-clear {
  background: linear-gradient(135deg, #7e6337, #62491f);
}

.tcjc-search-message {
  margin: 10px 2px 0 !important;
  color: #5d4425 !important;
  font-size: 0.92rem !important;
  font-weight: 800;
  line-height: 1.45 !important;
}

.tcjc-search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.tcjc-search-result {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(116, 82, 38, 0.18);
  background: rgba(255, 250, 236, 0.72);
  color: #2b2116;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.tcjc-search-result:hover {
  transform: translateY(-2px);
  border-color: rgba(148, 184, 205, 0.44);
  box-shadow:
    0 10px 24px rgba(36, 82, 112, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.tcjc-search-result span,
.tcjc-search-result small,
.tcjc-search-result em {
  display: block;
}

.tcjc-search-result span {
  color: #3b2712;
  font-weight: 950;
  line-height: 1.25;
}

.tcjc-search-result small {
  margin-top: 3px;
  color: #805f34;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tcjc-search-result em {
  margin-top: 7px;
  color: #47331f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  font-style: normal;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .tcjc-reader-shell .tcjc-reader-back {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 230px !important;
    margin: 0 auto 14px !important;
  }

  .tcjc-search-panel {
    padding: 13px;
    border-radius: 18px;
  }

  .tcjc-search-row,
  .tcjc-search-results {
    grid-template-columns: 1fr;
  }

  .tcjc-search-row button {
    width: 100%;
  }
}

/* Step 49: App Home button placement repair */
.tcjc-reader-shell .tcjc-reader-back {
  position: absolute !important;
  top: 18px !important;
  left: 22px !important;
  z-index: 30 !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 13px !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.tcjc-reader-shell .tcjc-reader-card {
  padding-top: 74px !important;
}

@media (max-width: 768px) {
  .tcjc-reader-shell .tcjc-reader-back {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 0 20px !important;
    margin: 0 auto 14px !important;
  }

  .tcjc-reader-shell .tcjc-reader-card {
    padding-top: 18px !important;
  }
}


/* Step 50: app-level navigation layout */
.tcjc-reader-shell {
  background:
    radial-gradient(circle at 50% 0%, rgba(148, 184, 205, 0.18), transparent 34rem),
    #f7f5f2 !important;
}

.tcjc-app-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  width: min(1760px, calc(100vw - 28px));
  min-height: 72px;
  margin: 10px auto 12px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48));
  -webkit-backdrop-filter: blur(14px) saturate(128%);
  backdrop-filter: blur(14px) saturate(128%);
  border: 1px solid rgba(148, 184, 205, 0.26);
  box-shadow:
    0 16px 42px rgba(36, 52, 77, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.tcjc-app-home-button {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: linear-gradient(135deg, rgba(111, 177, 215, 0.96), rgba(53, 121, 163, 0.96));
  color: #fff;
  font-size: 1rem;
  font-weight: 950;
  box-shadow:
    0 12px 28px rgba(36, 82, 112, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  text-shadow: 0 1px 2px rgba(12, 28, 44, 0.42);
  white-space: nowrap;
}

.tcjc-app-home-button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(132, 193, 226, 0.98), rgba(58, 134, 178, 0.98));
}

.tcjc-app-topbar-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #24344d;
  line-height: 1.15;
}

.tcjc-app-topbar-title strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcjc-app-topbar-title span {
  color: rgba(36, 52, 77, 0.64);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tcjc-app-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tcjc-app-nav-actions button {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 13px;
  border: 1px solid rgba(148, 184, 205, 0.24);
  background: rgba(255, 255, 255, 0.62);
  color: #24344d;
  font-size: 0.92rem;
  font-weight: 900;
  white-space: nowrap;
}

.tcjc-app-nav-actions button.active {
  background: rgba(148, 184, 205, 0.24);
  border-color: rgba(148, 184, 205, 0.44);
  color: #173244;
}

.tcjc-app-nav-actions button:disabled {
  opacity: 0.48;
}

.tcjc-reader-shell .tcjc-reader-back {
  display: none !important;
}

.tcjc-reader-shell .tcjc-reader-card {
  padding-top: 28px !important;
}

.tcjc-reader-shell .tcjc-reader-breadcrumbs {
  display: none !important;
}

.tcjc-reader-nav-section {
  padding-top: 0 !important;
}

@media (max-width: 900px) {
  .tcjc-app-topbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tcjc-app-nav-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tcjc-app-nav-actions button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .tcjc-app-topbar {
    width: calc(100vw - 12px);
    margin-top: 6px;
    margin-bottom: 8px;
    padding: 9px;
    border-radius: 18px;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tcjc-app-home-button {
    width: 100%;
    min-height: 46px;
  }

  .tcjc-app-topbar-title {
    align-items: center;
  }

  .tcjc-app-nav-actions {
    gap: 7px;
  }

  .tcjc-app-nav-actions button {
    min-height: 40px;
    padding: 0 8px;
    font-size: 0.84rem;
  }
}

/* ====================== STEP 68 APP SHELL OVERRIDES ====================== */

.tcjc-app-shell {
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 0%, rgba(148,184,205,.20), transparent 34%),
    #f7f5f2;
}

.tcjc-app-header {
  position: sticky;
  top: 0;
  z-index: 5000;
  width: 100%;
  padding:
    max(10px, env(safe-area-inset-top))
    clamp(8px, 2vw, 16px)
    10px;
  background:
    linear-gradient(
      to bottom,
      rgba(247,245,242,.94),
      rgba(247,245,242,.78)
    );
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  border-bottom: 1px solid rgba(49,82,105,.12);
  box-shadow: 0 10px 30px rgba(13,31,45,.08);
}

.tcjc-app-header-inner {
  width: min(1320px, 100%);
  min-height: 58px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 22px);
  padding: 8px 10px 8px 14px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.82),
      rgba(255,255,255,.50)
    );
  box-shadow:
    0 16px 40px rgba(23,47,63,.10),
    inset 0 1px 0 rgba(255,255,255,.86);
}

.tcjc-app-brand {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.tcjc-app-brand img {
  display: block;
  width: min(310px, 42vw);
  height: auto;
  max-height: 46px;
  object-fit: contain;
}

.tcjc-app-nav {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tcjc-app-nav::-webkit-scrollbar {
  display: none;
}

.tcjc-app-nav button {
  appearance: none;
  border: 1px solid rgba(49,82,105,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  color: #17344a;
  min-height: 40px;
  padding: 10px 16px;
  font-size: .92rem;
  font-weight: 850;
  white-space: nowrap;
  box-shadow:
    0 8px 18px rgba(27,60,84,.06),
    inset 0 1px 0 rgba(255,255,255,.74);
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.tcjc-app-nav button:not(:disabled):hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.88);
  border-color: rgba(20,127,183,.26);
  box-shadow:
    0 10px 22px rgba(27,60,84,.10),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.tcjc-app-nav button.active {
  color: #fff;
  border-color: rgba(255,255,255,.46);
  background:
    linear-gradient(
      135deg,
      rgba(111,177,215,.95),
      rgba(53,121,163,.95)
    );
  box-shadow:
    0 12px 24px rgba(36,82,112,.22),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.tcjc-app-nav button:disabled {
  opacity: .52;
}

.tcjc-app-content {
  padding-top: 0;
}

.tcjc-app-hero {
  min-height: calc(100svh - 96px);
  align-items: center;
  justify-content: center;
  padding:
    clamp(32px, 6vh, 76px)
    clamp(16px, 4vw, 70px);
}

.tcjc-home-dashboard {
  position: relative;
  z-index: 5;
  width: min(1160px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(16px, 2.4vw, 26px);
  align-items: center;
}

.tcjc-home-intro-card {
  width: 100%;
  max-width: none;
}

.tcjc-home-intro-card .tcjc-actions {
  margin-top: 22px;
}

.tcjc-today-grid {
  display: grid;
  gap: 16px;
}

.tcjc-today-card {
  position: relative;
  overflow: hidden;
  padding: 24px 24px 22px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.52);
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.34),
      rgba(255,255,255,.12) 52%,
      rgba(255,255,255,.24)
    );
  -webkit-backdrop-filter: blur(16px) saturate(132%);
  backdrop-filter: blur(16px) saturate(132%);
  box-shadow:
    0 18px 44px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.tcjc-today-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.45),
      transparent 34%,
      rgba(255,255,255,.12) 70%,
      transparent 100%
    );
  opacity: .58;
  mix-blend-mode: screen;
}

.tcjc-today-card > * {
  position: relative;
  z-index: 1;
}

.tcjc-today-kicker {
  margin-bottom: 9px;
  color: #b8e8ff;
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow:
    0 1px 2px rgba(5,18,30,.68),
    0 0 14px rgba(77,170,220,.26);
}

.tcjc-today-card h2 {
  margin: 0 0 10px;
  color: rgba(255,255,255,.97);
  font-size: clamp(1.28rem, 2vw, 1.72rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-shadow:
    0 2px 4px rgba(8,18,32,.42),
    0 12px 28px rgba(8,18,32,.24);
}

.tcjc-today-card p {
  margin: 0 0 18px;
  color: rgba(255,255,255,.91);
  font-size: 1rem;
  line-height: 1.48;
  text-shadow:
    0 1px 3px rgba(7,18,31,.50),
    0 8px 22px rgba(7,18,31,.22);
}

.tcjc-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.46);
  background: rgba(255,255,255,.14);
  color: #fff;
  font-weight: 850;
  box-shadow:
    0 10px 24px rgba(8,24,42,.14),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.tcjc-reader-shell {
  min-height: calc(100svh - 82px);
}

@media (max-width: 920px) {
  .tcjc-app-header-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  .tcjc-app-brand {
    justify-content: center;
  }

  .tcjc-app-brand img {
    width: min(340px, 82vw);
    max-height: 48px;
  }

  .tcjc-app-nav {
    width: 100%;
    justify-content: flex-start;
    padding-bottom: 1px;
  }

  .tcjc-app-nav button {
    min-height: 38px;
    padding: 9px 14px;
    font-size: .88rem;
  }

  .tcjc-app-hero {
    min-height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .tcjc-home-dashboard {
    grid-template-columns: 1fr;
    align-items: center;
  }
}

@media (max-width: 768px) {
  .tcjc-app-header {
    padding: max(8px, env(safe-area-inset-top)) 6px 8px;
  }

  .tcjc-app-header-inner {
    border-radius: 20px;
  }

  .tcjc-app-brand img {
    width: min(310px, 86vw);
  }

  .tcjc-app-nav {
    justify-content: flex-start;
  }

  .tcjc-section.tcjc-app-hero {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    min-height: calc(100svh - 122px);
    margin-bottom: 10px;
    border-radius: 24px;
    padding: 16px 12px 22px;
  }

  .tcjc-home-intro-card {
    padding: 26px 20px;
    border-radius: 24px;
  }

  .tcjc-home-intro-card h1 {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .tcjc-today-card {
    padding: 22px 18px 20px;
    border-radius: 23px;
  }

  .tcjc-today-card p {
    font-size: .96rem;
    line-height: 1.42;
  }
}

@media (max-width: 430px) {
  .tcjc-app-nav button {
    padding: 8px 12px;
    font-size: .84rem;
  }

  .tcjc-home-intro-card .tcjc-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ====================== END STEP 68 APP SHELL OVERRIDES ====================== */

/* ====================== STEP 70 SHARP APP SHELL + CLEAN READER ====================== */

.tcjc-app-header {
  padding:
    max(8px, env(safe-area-inset-top))
    0
    8px;
  background:
    linear-gradient(
      to bottom,
      rgba(247,245,242,.98),
      rgba(247,245,242,.86)
    );
  border-bottom: 1px solid rgba(31,58,78,.14);
  box-shadow: 0 10px 28px rgba(13,31,45,.08);
}

.tcjc-app-header-inner {
  width: 100%;
  min-height: 66px;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding: 9px clamp(16px, 3vw, 34px);
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.92),
      rgba(255,255,255,.70)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 22px rgba(23,47,63,.08);
}

.tcjc-app-brand img {
  width: min(340px, 38vw);
  max-height: 48px;
}

.tcjc-app-nav {
  gap: 9px;
}

.tcjc-app-nav button {
  border-radius: 14px;
  min-height: 44px;
  padding: 10px 18px;
  border-color: rgba(31,58,78,.14);
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.86),
      rgba(255,255,255,.58)
    );
  color: #17344a;
  box-shadow:
    0 8px 18px rgba(27,60,84,.07),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.tcjc-app-nav button.active {
  border-radius: 14px;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(89,163,207,.98),
      rgba(38,119,170,.98)
    );
  box-shadow:
    0 12px 26px rgba(36,82,112,.24),
    inset 0 1px 0 rgba(255,255,255,.30);
}

.tcjc-reader-page-clean {
  padding-top: clamp(16px, 2vw, 26px);
}

.tcjc-reader-toolbar-section {
  width: min(1580px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  margin: 0 auto 22px;
  padding: 0;
}

.tcjc-reader-compact-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(220px, 1fr) minmax(180px, .8fr);
  gap: 14px;
  align-items: end;
  padding: 16px;
  border: 1px solid rgba(126,99,55,.24);
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(250,240,213,.94),
      rgba(238,217,166,.86)
    );
  box-shadow:
    0 16px 38px rgba(80,55,20,.10),
    inset 0 1px 0 rgba(255,255,255,.62);
}

.tcjc-reader-compact-toolbar .tcjc-control-field label {
  margin-bottom: 7px;
  color: #886336;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.tcjc-reader-compact-toolbar .tcjc-control-field select {
  min-height: 48px;
  border-radius: 14px;
  background-color: rgba(255,250,238,.92);
}

.tcjc-search-panel-clean {
  margin-top: 14px;
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(255,248,231,.92),
      rgba(248,232,190,.82)
    );
}

.tcjc-reader-main-section {
  margin-top: 0;
}

.tcjc-reader-layout {
  align-items: start;
}

.tcjc-current-book-panel {
  padding-top: 0;
}

.tcjc-app-topbar,
.tcjc-reader-breadcrumbs {
  display: none !important;
}

@media (max-width: 920px) {
  .tcjc-app-header-inner {
    align-items: center;
    flex-direction: row;
    gap: 14px;
    padding: 10px 12px;
  }

  .tcjc-app-brand {
    flex: 0 0 auto;
  }

  .tcjc-app-brand img {
    width: 178px;
    max-height: 44px;
  }

  .tcjc-app-nav {
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .tcjc-app-nav button {
    min-height: 40px;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: .84rem;
  }

  .tcjc-reader-toolbar-section {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    margin-bottom: 14px;
  }

  .tcjc-reader-compact-toolbar {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 13px;
    border-radius: 20px;
  }

  .tcjc-search-panel-clean {
    margin-top: 11px;
    border-radius: 20px;
  }
}

@media (max-width: 520px) {
  .tcjc-app-header-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 9px 8px;
  }

  .tcjc-app-brand {
    justify-content: center;
  }

  .tcjc-app-brand img {
    width: min(250px, 82vw);
    max-height: 42px;
  }

  .tcjc-app-nav {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 1px;
  }

  .tcjc-app-nav button {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 11px;
  }
}

/* ====================== END STEP 70 SHARP APP SHELL + CLEAN READER ====================== */

/* ====================== STEP 75 CLEAN APP HEADER + READER RESET ====================== */

html,
body,
#root {
  overflow-x: hidden;
}

/* Clean full-width app header */
.tcjc-app-header {
  position: sticky;
  top: 0;
  z-index: 9000;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(20, 45, 65, .12);
  background: rgba(250, 249, 246, .96);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 4px 18px rgba(12, 30, 45, .08);
}

.tcjc-app-header-inner {
  width: 100%;
  max-width: none;
  min-height: 72px;
  margin: 0;
  padding: 10px clamp(14px, 3vw, 34px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.tcjc-app-brand {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.tcjc-app-brand:hover,
.tcjc-app-brand:focus {
  background: transparent;
  box-shadow: none;
}

.tcjc-app-brand img {
  display: block;
  width: clamp(190px, 22vw, 320px);
  max-width: 320px;
  max-height: 52px;
  object-fit: contain;
}

.tcjc-app-nav {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  overflow-x: auto;
  max-width: calc(100vw - 260px);
  padding: 0;
  scrollbar-width: none;
}

.tcjc-app-nav::-webkit-scrollbar {
  display: none;
}

.tcjc-app-nav button {
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(35, 69, 94, .14);
  background: rgba(255, 255, 255, .82);
  color: #17344a;
  font-size: .92rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: 0 4px 12px rgba(23, 47, 63, .06);
}

.tcjc-app-nav button:not(:disabled):hover,
.tcjc-app-nav button:not(:disabled):focus {
  transform: none;
  color: #17344a;
  border-color: rgba(20, 127, 183, .26);
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(23, 47, 63, .10);
}

.tcjc-app-nav button.active,
.tcjc-app-nav button.active:hover,
.tcjc-app-nav button.active:focus {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .42);
  background: linear-gradient(135deg, #5fa8d4, #2f80b8);
  box-shadow: 0 8px 18px rgba(47, 128, 184, .24);
}

.tcjc-app-nav button:disabled {
  opacity: .48;
  color: #6f7f8c;
}

/* Remove duplicate/old reader header pieces */
.tcjc-app-topbar,
.tcjc-app-nav-actions,
.tcjc-reader-breadcrumbs,
.tcjc-reader-card > .tcjc-eyebrow,
.tcjc-reader-card > h1,
.tcjc-reader-card > p {
  display: none !important;
}

/* Make reader navigation a plain app toolbar, not a giant card */
.tcjc-reader-page-clean,
.tcjc-reader-page {
  padding-top: 18px;
}

.tcjc-reader-toolbar-section {
  width: 100%;
  max-width: none;
  margin: 0 0 14px;
  padding: 0 clamp(14px, 3vw, 34px);
}

.tcjc-reader-compact-toolbar {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(220px, 1fr) minmax(180px, .75fr);
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(35, 69, 94, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 24px rgba(23, 47, 63, .07);
}

.tcjc-reader-compact-toolbar .tcjc-control-field label {
  margin: 0 0 6px;
  color: #70502c;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tcjc-reader-compact-toolbar .tcjc-control-field select {
  min-height: 46px;
  border-radius: 12px;
  background-color: rgba(255, 252, 244, .96);
  color: #362514;
}

/* Keep search, but make it cleaner and less oversized */
.tcjc-search-panel-clean,
.tcjc-search-panel {
  width: min(1220px, calc(100vw - 28px));
  margin: 12px auto 0;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(35, 69, 94, .10);
  background: rgba(255, 255, 255, .70);
  box-shadow: 0 8px 24px rgba(23, 47, 63, .07);
}

.tcjc-search-form label {
  color: #70502c;
}

.tcjc-search-row button {
  border-radius: 12px;
}

/* Remove old/current-book navigation sidebar */
.tcjc-current-book-panel {
  display: none !important;
}

.tcjc-reader-main-section {
  width: 100%;
  max-width: none;
  margin-top: 22px;
  padding: 0 clamp(14px, 3vw, 34px);
}

.tcjc-reader-layout {
  width: 100%;
  max-width: none;
  display: block;
}

.tcjc-scripture-panel {
  width: min(1280px, 100%);
  margin: 0 auto;
}

/* Home header/mobile cleanup */
@media (max-width: 920px) {
  .tcjc-app-header-inner {
    min-height: auto;
    padding: 9px 10px;
    flex-direction: row;
    align-items: center;
  }

  .tcjc-app-brand img {
    width: clamp(150px, 30vw, 210px);
    max-height: 44px;
  }

  .tcjc-app-nav {
    max-width: calc(100vw - 190px);
    justify-content: flex-start;
  }

  .tcjc-app-nav button {
    min-height: 39px;
    padding: 9px 13px;
    border-radius: 11px;
    font-size: .84rem;
  }

  .tcjc-reader-compact-toolbar {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .tcjc-reader-toolbar-section {
    padding: 0 10px;
  }
}

@media (max-width: 560px) {
  .tcjc-app-header-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 8px 9px;
  }

  .tcjc-app-brand {
    justify-content: center;
  }

  .tcjc-app-brand img {
    width: min(245px, 80vw);
    max-height: 42px;
  }

  .tcjc-app-nav {
    max-width: 100%;
    width: 100%;
  }

  .tcjc-app-nav button {
    min-height: 38px;
    padding: 8px 12px;
  }

  .tcjc-reader-page-clean,
  .tcjc-reader-page {
    padding-top: 10px;
  }

  .tcjc-search-panel-clean,
  .tcjc-search-panel {
    width: calc(100vw - 20px);
    padding: 13px;
  }

  .tcjc-reader-main-section {
    padding: 0 10px;
  }
}

/* ====================== END STEP 75 CLEAN APP HEADER + READER RESET ====================== */


/* ====================== STEP 85 LIVE DAILY HOME CARDS ====================== */

.tcjc-daily-home-date {
  margin-bottom: 10px !important;
  color: #b8e8ff !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.tcjc-daily-home-quote {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  color: rgba(255,255,255,.94);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.48;
  font-style: italic;
  text-shadow:
    0 1px 3px rgba(7,18,31,.50),
    0 8px 22px rgba(7,18,31,.22);
}

.tcjc-daily-home-reference {
  margin-bottom: 16px !important;
  color: #b8e8ff !important;
  font-size: .82rem !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.tcjc-mini-btn.primary {
  border: 1px solid rgba(255,255,255,.44);
  background:
    linear-gradient(
      135deg,
      rgba(111,177,215,.96),
      rgba(53,121,163,.96)
    );
  color: #fff;
  box-shadow:
    0 10px 24px rgba(36,82,112,.18),
    inset 0 1px 0 rgba(255,255,255,.32);
}

/* ====================== END STEP 85 LIVE DAILY HOME CARDS ====================== */

/* ====================== STEP 86 DAILY CARD REFINEMENT ====================== */

.tcjc-today-grid {
  align-self: stretch;
}

.tcjc-today-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 24px 24px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.46);
  background:
    linear-gradient(
      135deg,
      rgba(12, 35, 52, .46),
      rgba(20, 76, 112, .30) 52%,
      rgba(7, 26, 40, .42)
    ) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    0 20px 48px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(148,184,205,.14);
}

.tcjc-today-card::before {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.32),
      transparent 32%,
      rgba(148,184,205,.12) 68%,
      transparent 100%
    );
  opacity: .52;
}

.tcjc-today-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.tcjc-today-card-top h2 {
  margin-bottom: 0;
}

.tcjc-today-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.32);
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.07)
    );
  color: #b8e8ff;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24);
}

.tcjc-today-card-verse .tcjc-daily-home-quote {
  margin-top: 4px;
  padding: 16px 17px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.20);
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.05)
    );
}

.tcjc-today-card-reading > p:not(.tcjc-daily-home-date):not(.tcjc-daily-home-reference) {
  padding-left: 16px;
  border-left: 3px solid rgba(184,232,255,.52);
}

/* Rounded-corner rectangle buttons, not ovals */
.tcjc-mini-btn,
.tcjc-mini-btn.primary,
.tcjc-search-row button,
.tcjc-search-clear,
.tcjc-app-nav button,
.tcjc-btn {
  border-radius: 13px !important;
}

.tcjc-mini-btn {
  width: fit-content;
  margin-top: auto;
  min-height: 42px;
  padding: 11px 18px;
}

/* Slightly sharper app nav now that there are more buttons */
.tcjc-app-nav button {
  padding: 10px 15px;
}

@media (max-width: 920px) {
  .tcjc-app-nav button {
    padding: 9px 12px;
    font-size: .82rem;
  }

  .tcjc-today-card {
    padding: 22px 18px 20px;
  }

  .tcjc-today-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
}

@media (max-width: 560px) {
  .tcjc-app-nav {
    gap: 8px;
  }

  .tcjc-app-nav button {
    min-height: 38px;
    padding: 8px 11px;
  }

  .tcjc-today-card-top {
    gap: 12px;
  }
}

/* ====================== END STEP 86 DAILY CARD REFINEMENT ====================== */

/* ====================== STEP 87 EXPANDED HOME INTRO CARD ====================== */

.tcjc-home-dashboard {
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
}

.tcjc-home-intro-card {
  padding: clamp(34px, 4vw, 52px);
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tcjc-home-intro-card h1 {
  max-width: 760px;
  font-size: clamp(2.55rem, 4.8vw, 5.35rem);
}

.tcjc-home-lead {
  max-width: 760px;
  margin-bottom: 24px !important;
  font-size: clamp(1.08rem, 1.45vw, 1.28rem) !important;
  line-height: 1.62 !important;
}

.tcjc-home-feature-list {
  display: grid;
  gap: 12px;
  margin: 8px 0 26px;
}

.tcjc-home-feature {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 17px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.06)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22);
}

.tcjc-home-feature span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  background:
    linear-gradient(
      135deg,
      rgba(111,177,215,.94),
      rgba(53,121,163,.94)
    );
  box-shadow:
    0 8px 18px rgba(36,82,112,.18),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.tcjc-home-feature p {
  margin: 0 !important;
  color: rgba(255,255,255,.91);
  font-size: .98rem !important;
  line-height: 1.42 !important;
}

@media (max-width: 920px) {
  .tcjc-home-dashboard {
    grid-template-columns: 1fr;
  }

  .tcjc-home-intro-card {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .tcjc-home-intro-card {
    padding: 28px 20px;
  }

  .tcjc-home-feature {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .tcjc-home-feature span {
    width: fit-content;
  }
}

/* ====================== END STEP 87 EXPANDED HOME INTRO CARD ====================== */

/* ====================== STEP 88 WIDER HOME INTRO CARD ====================== */

.tcjc-home-dashboard {
  width: min(1380px, 100%);
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr);
}

.tcjc-home-intro-card {
  min-height: unset !important;
  width: 100%;
  padding: clamp(34px, 4vw, 50px);
}

.tcjc-home-intro-card h1 {
  max-width: 900px;
}

.tcjc-home-lead {
  max-width: 860px;
}

.tcjc-home-feature-list {
  max-width: 920px;
}

.tcjc-home-feature {
  grid-template-columns: 160px minmax(0, 1fr);
}

.tcjc-home-feature span {
  width: 100%;
  text-align: center;
}

@media (max-width: 920px) {
  .tcjc-home-dashboard {
    width: min(760px, 100%);
    grid-template-columns: 1fr;
  }

  .tcjc-home-feature {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .tcjc-home-dashboard {
    width: 100%;
  }

  .tcjc-home-feature {
    grid-template-columns: 1fr;
  }

  .tcjc-home-feature span {
    width: fit-content;
  }
}

/* ====================== END STEP 88 WIDER HOME INTRO CARD ====================== */

/* ====================== STEP 104 DARK PARCHMENT NIGHT MODE ====================== */

/*
  Night mode should feel like nighttime parchment:
  not blue-black, not pure black, but dark charcoal with warm brown reading pages.
*/

body.tcjc-reader-dark-active {
  background: #080909 !important;
}

body.tcjc-reader-dark-active .tcjc-app-shell {
  background:
    radial-gradient(circle at 50% 0%, rgba(148, 184, 205, .06), transparent 34%),
    linear-gradient(180deg, #0b0d0e 0%, #080909 48%, #050606 100%) !important;
}

/* Fixed app menu in night mode */
body.tcjc-reader-dark-active .tcjc-app-header {
  background:
    linear-gradient(
      to bottom,
      rgba(10, 12, 13, .94),
      rgba(10, 12, 13, .78)
    ) !important;
  border-bottom: 1px solid rgba(148, 184, 205, .14) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
}

body.tcjc-reader-dark-active .tcjc-app-header-inner {
  border-color: rgba(148, 184, 205, .18) !important;
  background:
    linear-gradient(
      135deg,
      rgba(25, 28, 29, .78),
      rgba(10, 13, 15, .72) 52%,
      rgba(21, 24, 25, .78)
    ) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.tcjc-reader-dark-active .tcjc-app-nav button:not(.active):not(:disabled):not(.tcjc-app-search-trigger) {
  color: rgba(225, 239, 245, .86) !important;
  border-color: rgba(148, 184, 205, .18) !important;
  background: rgba(255,255,255,.055) !important;
}

body.tcjc-reader-dark-active .tcjc-app-nav button:not(.active):not(:disabled):not(.tcjc-app-search-trigger):hover,
body.tcjc-reader-dark-active .tcjc-app-nav button:not(.active):not(:disabled):not(.tcjc-app-search-trigger):focus-visible {
  color: #ffffff !important;
  border-color: rgba(148, 184, 205, .34) !important;
  background:
    linear-gradient(135deg, rgba(69, 135, 177, .92), rgba(38, 99, 140, .90)) !important;
}

body.tcjc-reader-dark-active .tcjc-app-nav button.active {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.34) !important;
  background:
    linear-gradient(135deg, rgba(69, 135, 177, .98), rgba(38, 99, 140, .96)) !important;
}

body.tcjc-reader-dark-active .tcjc-app-nav button:disabled {
  color: rgba(225, 239, 245, .24) !important;
  border-color: rgba(148, 184, 205, .10) !important;
  background: rgba(255,255,255,.03) !important;
}

/* Search icon in night mode */
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:active {
  background: transparent !important;
  border-color: transparent !important;
}

body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span {
  color: #9bdcff !important;
}

body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible {
  border-color: rgba(155, 220, 255, .48) !important;
  background: rgba(255,255,255,.06) !important;
}

/* Reader background */
.tcjc-reader-theme-dark {
  background:
    radial-gradient(circle at 50% 0%, rgba(148, 184, 205, .06), transparent 34%),
    linear-gradient(180deg, #0b0d0e 0%, #080909 48%, #050606 100%) !important;
}

.tcjc-reader-theme-dark .tcjc-reader-page {
  background:
    radial-gradient(circle at 50% 0%, rgba(148, 184, 205, .055), transparent 34%),
    linear-gradient(180deg, #0b0d0e 0%, #080909 55%, #050606 100%) !important;
}

/* Reader control bar: dark glass, not blue block */
.tcjc-reader-theme-dark .tcjc-reader-compact-toolbar {
  border-color: rgba(148, 184, 205, .20) !important;
  background:
    linear-gradient(135deg, rgba(22, 25, 26, .86), rgba(12, 14, 15, .78)) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.tcjc-reader-theme-dark .tcjc-control-field label {
  color: rgba(183, 233, 255, .88) !important;
}

.tcjc-reader-theme-dark .tcjc-control-field select {
  color: rgba(245, 239, 225, .94) !important;
  border-color: rgba(180, 140, 82, .28) !important;
  background:
    linear-gradient(180deg, rgba(39, 32, 22, .82), rgba(24, 20, 15, .86)) !important;
}

.tcjc-reader-theme-dark .tcjc-control-field select option {
  color: #1d1710;
  background: #f3e3bd;
}

/* Main parchment panel: dark brown, still papyrus-like */
.tcjc-reader-theme-dark .tcjc-scripture-panel {
  color: #eadbbd !important;
  border-color: rgba(190, 143, 74, .34) !important;
  background-color: #2a2117 !important;
  background-image:
    linear-gradient(rgba(255, 235, 180, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 235, 180, .024) 1px, transparent 1px),
    radial-gradient(circle at 20% 12%, rgba(198, 144, 66, .15), transparent 36%),
    radial-gradient(circle at 78% 0%, rgba(255, 229, 160, .08), transparent 32%),
    linear-gradient(180deg, #3a2b18 0%, #2a2117 52%, #201811 100%) !important;
  background-size:
    24px 24px,
    24px 24px,
    auto,
    auto,
    auto !important;
  box-shadow:
    0 28px 74px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255, 239, 194, .10),
    inset 0 0 0 1px rgba(255, 239, 194, .045) !important;
}

.tcjc-reader-theme-dark .tcjc-scripture-panel::before {
  opacity: .16 !important;
}

.tcjc-reader-theme-dark .tcjc-scripture-panel h2 {
  color: #f4e6c8 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.34) !important;
}

.tcjc-reader-theme-dark .tcjc-book-label {
  color: #d8ad70 !important;
}

.tcjc-reader-theme-dark .tcjc-chapter-intro,
.tcjc-reader-theme-dark .tcjc-verse-text {
  color: #eadbbd !important;
}

.tcjc-reader-theme-dark .tcjc-verse-num {
  color: #c99b5f !important;
}

.tcjc-reader-theme-dark .tcjc-verse {
  border-color: rgba(216, 173, 112, .16) !important;
}

.tcjc-reader-theme-dark .tcjc-target-verse {
  background: rgba(150, 103, 42, .20) !important;
  box-shadow: inset 4px 0 0 rgba(216, 173, 112, .58) !important;
}

/* Verse navigation buttons in night mode */
.tcjc-reader-theme-dark .tcjc-nav-btn {
  color: #f7e9cb !important;
  border-color: rgba(216, 173, 112, .32) !important;
  background:
    linear-gradient(180deg, rgba(75, 55, 29, .90), rgba(49, 36, 22, .90)) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.tcjc-reader-theme-dark .tcjc-nav-btn:hover,
.tcjc-reader-theme-dark .tcjc-nav-btn:focus-visible {
  border-color: rgba(216, 173, 112, .52) !important;
  background:
    linear-gradient(180deg, rgba(93, 66, 31, .94), rgba(58, 42, 24, .94)) !important;
}

/* Search popup night mode */
body.tcjc-reader-dark-active .tcjc-search-overlay {
  background: rgba(0, 0, 0, .52) !important;
}

body.tcjc-reader-dark-active .tcjc-search-popover {
  border-color: rgba(216, 173, 112, .25) !important;
  background:
    linear-gradient(135deg, rgba(34, 27, 20, .96), rgba(20, 17, 14, .96)) !important;
  box-shadow:
    0 28px 74px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255, 239, 194, .08) !important;
}

body.tcjc-reader-dark-active .tcjc-search-popover .tcjc-search-form label {
  color: #d8ad70 !important;
}

body.tcjc-reader-dark-active .tcjc-search-popover .tcjc-search-row input {
  color: #f1e2c2 !important;
  border-color: rgba(216, 173, 112, .28) !important;
  background: rgba(12, 10, 8, .64) !important;
}

body.tcjc-reader-dark-active .tcjc-search-popover .tcjc-search-row input::placeholder {
  color: rgba(241, 226, 194, .50) !important;
}

body.tcjc-reader-dark-active .tcjc-search-result {
  color: #eadbbd !important;
  border-color: rgba(216, 173, 112, .18) !important;
  background: rgba(255, 239, 194, .045) !important;
}

body.tcjc-reader-dark-active .tcjc-search-result span {
  color: #f4e6c8 !important;
}

body.tcjc-reader-dark-active .tcjc-search-result small,
body.tcjc-reader-dark-active .tcjc-search-result em,
body.tcjc-reader-dark-active .tcjc-search-message {
  color: rgba(234, 219, 189, .72) !important;
}

/* Better placement for day/night button */
.tcjc-reader-compact-toolbar {
  padding-right: 72px !important;
}

@media (max-width: 720px) {
  .tcjc-reader-theme-toggle {
    top: 14px !important;
    right: 14px !important;
    transform: none !important;
    width: 38px !important;
    height: 38px !important;
  }

  .tcjc-reader-theme-toggle:hover,
  .tcjc-reader-theme-toggle:focus-visible,
  .tcjc-reader-theme-toggle:active {
    transform: none !important;
  }

  .tcjc-reader-compact-toolbar {
    padding-right: 58px !important;
  }
}

/* ====================== END STEP 104 DARK PARCHMENT NIGHT MODE ====================== */

/* ====================== STEP 104B NIGHT MODE COLOR TUNING ====================== */

/* Make every visible page layer charcoal in reader night mode */
body.tcjc-reader-dark-active,
body.tcjc-reader-dark-active html,
body.tcjc-reader-dark-active #root,
body.tcjc-reader-dark-active .tcjc-app-shell,
body.tcjc-reader-dark-active .tcjc-reader-shell,
body.tcjc-reader-dark-active .tcjc-reader-page,
body.tcjc-reader-dark-active .tcjc-reader-main-section,
body.tcjc-reader-dark-active .tcjc-reader-section {
  background-color: #080909 !important;
}

/* Remove the white band behind the parchment in night mode */
body.tcjc-reader-dark-active .tcjc-reader-main-section,
body.tcjc-reader-dark-active .tcjc-reader-section,
body.tcjc-reader-dark-active .tcjc-reader-page {
  background:
    radial-gradient(circle at 50% 0%, rgba(160, 170, 170, .055), transparent 34%),
    linear-gradient(180deg, #0b0d0e 0%, #080909 52%, #050606 100%) !important;
}

/* Slightly lighter warm-brown parchment with a very subtle gold lift */
.tcjc-reader-theme-dark .tcjc-scripture-panel {
  background-color: #342717 !important;
  background-image:
    linear-gradient(rgba(255, 235, 180, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 235, 180, .028) 1px, transparent 1px),
    radial-gradient(circle at 18% 8%, rgba(226, 168, 76, .18), transparent 34%),
    radial-gradient(circle at 82% 0%, rgba(255, 216, 128, .11), transparent 30%),
    linear-gradient(135deg, rgba(216, 158, 70, .08), transparent 34%),
    linear-gradient(180deg, #4a351b 0%, #372817 46%, #2b2015 100%) !important;
  background-size:
    24px 24px,
    24px 24px,
    auto,
    auto,
    auto,
    auto !important;
}

/* Slightly warmer readable text on the dark parchment */
.tcjc-reader-theme-dark .tcjc-chapter-intro,
.tcjc-reader-theme-dark .tcjc-verse-text {
  color: #f0dfbd !important;
}

.tcjc-reader-theme-dark .tcjc-scripture-panel h2 {
  color: #f8e9c8 !important;
}

.tcjc-reader-theme-dark .tcjc-book-label {
  color: #dfb575 !important;
}

.tcjc-reader-theme-dark .tcjc-verse-num {
  color: #d4a464 !important;
}

/* Shift the moon/sun button left from the far edge */
/* ====================== END STEP 104B NIGHT MODE COLOR TUNING ====================== */

/* ====================== STEP 105 FINAL THEME BUTTON POSITION ====================== */

/* ====================== END STEP 105 FINAL THEME BUTTON POSITION ====================== */

/* ====================== STEP 106 READER PAGE CLEANUP ====================== */

/*
  Remove the subtle grid texture from the scripture page.
  Keep the parchment feel, but without visible grid lines.
*/

.tcjc-scripture-panel,
.tcjc-reader-theme-dark .tcjc-scripture-panel {
  background-size: auto !important;
}

.tcjc-scripture-panel {
  background-image:
    radial-gradient(circle at 18% 8%, rgba(255, 232, 174, .30), transparent 34%),
    radial-gradient(circle at 82% 0%, rgba(255, 255, 255, .16), transparent 30%),
    linear-gradient(180deg, #f3dfaa 0%, #ecd197 48%, #e4c486 100%) !important;
}

.tcjc-reader-theme-dark .tcjc-scripture-panel {
  background-image:
    radial-gradient(circle at 20% 8%, rgba(226, 168, 76, .13), transparent 34%),
    radial-gradient(circle at 82% 0%, rgba(255, 216, 128, .075), transparent 30%),
    linear-gradient(180deg, #423019 0%, #392917 48%, #332516 100%) !important;
}

/* Remove any pseudo-texture grid overlays on the page itself */
.tcjc-scripture-panel::before,
.tcjc-reader-theme-dark .tcjc-scripture-panel::before {
  background-image: none !important;
  opacity: 0 !important;
}

/*
  Mobile night mode:
  make the parchment less top-bright / bottom-dark.
*/
@media (max-width: 720px) {
  .tcjc-reader-theme-dark .tcjc-scripture-panel {
    background-color: #3a2917 !important;
    background-image:
      radial-gradient(circle at 20% 8%, rgba(226, 168, 76, .10), transparent 32%),
      radial-gradient(circle at 82% 0%, rgba(255, 216, 128, .055), transparent 28%),
      linear-gradient(180deg, #3d2b18 0%, #382817 52%, #342516 100%) !important;
  }

  /*
    Move day/night button 20px right on mobile only.
    Current mobile rule was right: 49px, so this becomes 29px.
  */
  .tcjc-reader-theme-toggle {
    right: 29px !important;
  }
}

/* ====================== END STEP 106 READER PAGE CLEANUP ====================== */

/* ====================== STEP 126 HOME SCRIPTURE QUOTE CARDS ====================== */

.tcjc-foundation-intro {
  max-width: 760px;
  margin: 14px auto 26px;
  color: rgba(10, 34, 51, .74);
  font-size: clamp(1rem, 2vw, 1.14rem);
  line-height: 1.65;
  font-weight: 650;
  text-align: center;
}

.tcjc-scripture-quote-card p {
  font-size: 1rem;
  line-height: 1.62;
}

.tcjc-scripture-quote-card .tcjc-mini-btn {
  margin-top: 14px;
  cursor: pointer;
}

@media (max-width: 720px) {
  .tcjc-foundation-intro {
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: left;
  }
}

/* ====================== END STEP 126 HOME SCRIPTURE QUOTE CARDS ====================== */

/* ====================== STEP 127 SCRIPTURE QUOTE CARD BUTTON FIX ====================== */

.tcjc-scripture-quote-card .tcjc-mini-btn {
  color: #ffffff !important;
  border-color: rgba(178, 219, 238, .78) !important;
  background: linear-gradient(145deg, #91c3dc, #5e9fc2 52%, #357ea8) !important;
  box-shadow:
    0 10px 22px rgba(42, 118, 163, .20),
    0 1px 0 rgba(255, 255, 255, .48) inset !important;
  text-shadow: 0 1px 4px rgba(8, 47, 72, .28) !important;
}

.tcjc-scripture-quote-card .tcjc-mini-btn:hover,
.tcjc-scripture-quote-card .tcjc-mini-btn:focus-visible {
  color: #ffffff !important;
  border-color: rgba(199, 232, 246, .90) !important;
  background: linear-gradient(145deg, #9dccdf, #6aa9c8 52%, #3f89af) !important;
}

/* ====================== END STEP 127 SCRIPTURE QUOTE CARD BUTTON FIX ====================== */

/* ====================== STEP 128 WEBSITE LINKS + COPYRIGHT ====================== */

.tcjc-home-website-links {
  width: min(1120px, calc(100% - 32px));
  margin: clamp(28px, 6vw, 72px) auto 22px;
}

.tcjc-home-website-links-card {
  overflow: hidden;
  border: 1px solid rgba(148, 184, 205, .28);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(245, 251, 255, .72)),
    radial-gradient(circle at 16% 12%, rgba(148, 184, 205, .20), transparent 34%),
    radial-gradient(circle at 86% 84%, rgba(255, 255, 255, .36), transparent 36%);
  box-shadow:
    0 22px 54px rgba(13, 48, 70, .12),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  backdrop-filter: blur(20px) saturate(1.16);
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
  padding: clamp(28px, 5vw, 52px);
  text-align: center;
}

.tcjc-home-website-links-card h2 {
  margin: 8px 0 12px;
  color: #092338;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.tcjc-home-website-links-card p:not(.tcjc-eyebrow) {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(10, 34, 51, .74);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.65;
  font-weight: 650;
}

.tcjc-home-website-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.tcjc-home-website-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.tcjc-home-website-button.primary {
  color: #ffffff !important;
  border: 1px solid rgba(178, 219, 238, .78);
  background: linear-gradient(145deg, #91c3dc, #5e9fc2 52%, #357ea8);
  box-shadow:
    0 10px 22px rgba(42, 118, 163, .20),
    inset 0 1px 0 rgba(255, 255, 255, .48);
}

.tcjc-home-website-button.secondary {
  color: #123a54 !important;
  border: 1px solid rgba(148, 184, 205, .34);
  background: rgba(255, 255, 255, .72);
  box-shadow:
    0 8px 18px rgba(13, 48, 70, .08),
    inset 0 1px 0 rgba(255, 255, 255, .70);
}

.tcjc-home-website-button:hover,
.tcjc-home-website-button:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.tcjc-app-footer {
  width: min(1120px, calc(100% - 32px));
  margin: 18px auto 34px;
  color: rgba(10, 34, 51, .58);
  font-size: .92rem;
  line-height: 1.4;
  font-weight: 650;
  text-align: center;
}

/* Reader copyright line */
.tcjc-reader-page::after {
  content: "© 2026 The True Church of Jesus Christ.";
  display: block;
  width: min(1120px, calc(100% - 32px));
  margin: 22px auto 34px;
  color: rgba(10, 34, 51, .58);
  font-size: .92rem;
  line-height: 1.4;
  font-weight: 650;
  text-align: center;
}

body.tcjc-reader-dark-active .tcjc-reader-page::after {
  color: rgba(244, 235, 216, .62);
}

@media (max-width: 720px) {
  .tcjc-home-website-links {
    width: min(100% - 20px, 1120px);
    margin-top: 30px;
  }

  .tcjc-home-website-links-card {
    border-radius: 24px;
    padding: 26px 18px;
    text-align: left;
  }

  .tcjc-home-website-actions {
    justify-content: stretch;
  }

  .tcjc-home-website-button {
    width: 100%;
  }

  .tcjc-app-footer,
  .tcjc-reader-page::after {
    width: min(100% - 24px, 1120px);
    margin-bottom: 28px;
  }
}

/* ====================== END STEP 128 WEBSITE LINKS + COPYRIGHT ====================== */

/* ====================== STEP 137 BOOK OF MORMON SUB-BOOK FIELD ====================== */

.tcjc-bom-subbook-field {
  animation: tcjcFadeInSoft .18s ease both;
}

@media (min-width: 980px) {
  .tcjc-reader-controls .tcjc-control-grid:has(.tcjc-bom-subbook-field) {
    grid-template-columns: 1.1fr 1.25fr .85fr .85fr !important;
  }
}

@keyframes tcjcFadeInSoft {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====================== END STEP 137 BOOK OF MORMON SUB-BOOK FIELD ====================== */

/* ====================== STEP 142 DAILY READING POPUP + LAST READ ====================== */

.tcjc-daily-reader-overlay {
  position: fixed;
  inset: 0;
  z-index: 26000;
  display: grid;
  place-items: start center;
  padding: calc(var(--tcjc-fixed-header-space, 74px) + 12px) 14px 24px;
  background: rgba(5, 18, 28, .20);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tcjc-daily-reader-card {
  position: relative;
  width: min(620px, 100%);
  overflow: hidden;
  border: 1px solid rgba(226, 214, 185, .74);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .84) 48%, rgba(250, 244, 228, .78));
  box-shadow:
    0 24px 60px rgba(12, 38, 56, .22),
    0 1px 0 rgba(255, 255, 255, .82) inset;
  padding: 24px 22px 22px;
  color: #102c40;
}

.tcjc-daily-reader-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(16, 44, 64, .72);
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.tcjc-daily-reader-close:hover,
.tcjc-daily-reader-close:focus-visible {
  border-color: rgba(63, 139, 181, .30);
  background: rgba(255, 255, 255, .56);
  outline: none;
}

.tcjc-daily-reader-kicker {
  margin: 0 0 8px;
  color: #3f84a8;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tcjc-daily-reader-card h2 {
  max-width: calc(100% - 42px);
  margin: 0 0 12px;
  color: #092338;
  font-size: clamp(1.8rem, 5vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.05em;
}

.tcjc-daily-reader-reference {
  margin: 0 0 10px;
  color: #0f3d5c;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.45;
}

.tcjc-daily-reader-description {
  margin: 0;
  color: rgba(10, 34, 51, .72);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.6;
}

.tcjc-daily-reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.tcjc-daily-reader-open,
.tcjc-daily-reader-cancel {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 13px;
  font-weight: 900;
  cursor: pointer;
}

.tcjc-daily-reader-open {
  color: #ffffff;
  border: 1px solid rgba(178, 219, 238, .78);
  background: linear-gradient(145deg, #91c3dc, #5e9fc2 52%, #357ea8);
  box-shadow:
    0 10px 22px rgba(42, 118, 163, .20),
    inset 0 1px 0 rgba(255, 255, 255, .48);
}

.tcjc-daily-reader-cancel {
  color: #123a54;
  border: 1px solid rgba(148, 184, 205, .34);
  background: rgba(255, 255, 255, .70);
}

body.tcjc-reader-dark-active .tcjc-daily-reader-overlay {
  background: rgba(0, 0, 0, .30);
}

body.tcjc-reader-dark-active .tcjc-daily-reader-card {
  border-color: rgba(205, 222, 232, .30);
  background:
    linear-gradient(135deg, rgba(82, 86, 88, .94), rgba(64, 69, 72, .93) 52%, rgba(72, 68, 60, .92));
  color: rgba(255, 252, 242, .96);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .34),
    0 1px 0 rgba(255, 255, 255, .18) inset;
}

body.tcjc-reader-dark-active .tcjc-daily-reader-card h2,
body.tcjc-reader-dark-active .tcjc-daily-reader-reference {
  color: rgba(255, 252, 242, .96);
}

body.tcjc-reader-dark-active .tcjc-daily-reader-description {
  color: rgba(255, 248, 231, .76);
}

body.tcjc-reader-dark-active .tcjc-daily-reader-close {
  color: rgba(255, 252, 242, .78);
}

@media (max-width: 720px) {
  .tcjc-daily-reader-overlay {
    align-items: start;
    padding-top: calc(var(--tcjc-fixed-header-space, 74px) + 8px);
  }

  .tcjc-daily-reader-card {
    border-radius: 22px;
    padding: 22px 18px 18px;
  }

  .tcjc-daily-reader-actions {
    display: grid;
  }

  .tcjc-daily-reader-open,
  .tcjc-daily-reader-cancel {
    width: 100%;
  }
}

/* ====================== END STEP 142 DAILY READING POPUP + LAST READ ====================== */

/* ====================== STEP 143 APP-WIDE DAILY READING CARD ====================== */

.tcjc-app-daily-overlay {
  position: fixed;
  inset: 0;
  z-index: 28000;
  display: grid;
  place-items: start center;
  padding: calc(var(--tcjc-fixed-header-space, 74px) + 12px) 14px 24px;
  background: rgba(5, 18, 28, .18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tcjc-app-daily-card {
  position: relative;
  width: min(720px, 100%);
  overflow: hidden;
  border: 1px solid rgba(226, 214, 185, .74);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .84) 48%, rgba(250, 244, 228, .78)),
    radial-gradient(circle at 16% 12%, rgba(148, 184, 205, .16), transparent 34%);
  box-shadow:
    0 24px 60px rgba(12, 38, 56, .22),
    0 1px 0 rgba(255, 255, 255, .82) inset;
  padding: clamp(24px, 5vw, 42px);
  color: #102c40;
}

.tcjc-app-daily-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(16, 44, 64, .72);
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.tcjc-app-daily-close:hover,
.tcjc-app-daily-close:focus-visible {
  border-color: rgba(63, 139, 181, .30);
  background: rgba(255, 255, 255, .56);
  outline: none;
}

.tcjc-app-daily-card h2 {
  max-width: calc(100% - 44px);
  margin: 8px 0 12px;
  color: #092338;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.tcjc-app-daily-reference {
  margin: 0 0 10px;
  color: #0f3d5c;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 900;
  line-height: 1.45;
}

.tcjc-app-daily-description {
  max-width: 680px;
  margin: 0;
  color: rgba(10, 34, 51, .72);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.6;
}

.tcjc-app-daily-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.tcjc-app-daily-primary,
.tcjc-app-daily-secondary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 13px;
  font-weight: 900;
  cursor: pointer;
}

.tcjc-app-daily-primary {
  color: #ffffff;
  border: 1px solid rgba(178, 219, 238, .78);
  background: linear-gradient(145deg, #91c3dc, #5e9fc2 52%, #357ea8);
  box-shadow:
    0 10px 22px rgba(42, 118, 163, .20),
    inset 0 1px 0 rgba(255, 255, 255, .48);
}

.tcjc-app-daily-secondary {
  color: #123a54;
  border: 1px solid rgba(148, 184, 205, .34);
  background: rgba(255, 255, 255, .70);
}

body.tcjc-reader-dark-active .tcjc-app-daily-overlay {
  background: rgba(0, 0, 0, .30);
}

body.tcjc-reader-dark-active .tcjc-app-daily-card {
  border-color: rgba(205, 222, 232, .30);
  background:
    linear-gradient(135deg, rgba(82, 86, 88, .94), rgba(64, 69, 72, .93) 52%, rgba(72, 68, 60, .92));
  color: rgba(255, 252, 242, .96);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .34),
    0 1px 0 rgba(255, 255, 255, .18) inset;
}

body.tcjc-reader-dark-active .tcjc-app-daily-card h2,
body.tcjc-reader-dark-active .tcjc-app-daily-reference {
  color: rgba(255, 252, 242, .96);
}

body.tcjc-reader-dark-active .tcjc-app-daily-description {
  color: rgba(255, 248, 231, .76);
}

body.tcjc-reader-dark-active .tcjc-app-daily-close {
  color: rgba(255, 252, 242, .78);
}

@media (max-width: 720px) {
  .tcjc-app-daily-overlay {
    padding-top: calc(var(--tcjc-fixed-header-space, 74px) + 8px);
  }

  .tcjc-app-daily-card {
    border-radius: 23px;
    padding: 24px 18px 18px;
  }

  .tcjc-app-daily-actions {
    display: grid;
  }

  .tcjc-app-daily-primary,
  .tcjc-app-daily-secondary {
    width: 100%;
  }
}

/* ====================== END STEP 143 APP-WIDE DAILY READING CARD ====================== */

/* ====================== STEP 146 APP-WIDE DAILY VERSE CARD ====================== */

.tcjc-app-daily-quote {
  margin: 0 0 12px;
  color: rgba(9, 35, 56, .84);
  font-size: clamp(1.08rem, 2.2vw, 1.32rem);
  font-weight: 720;
  line-height: 1.55;
}

body.tcjc-reader-dark-active .tcjc-app-daily-quote {
  color: rgba(255, 248, 231, .82);
}

/* ====================== END STEP 146 APP-WIDE DAILY VERSE CARD ====================== */

/* ====================== STEP 148 SAVED SCRIPTURES V1 ====================== */

.tcjc-verse {
  cursor: pointer;
}

.tcjc-saved-verse {
  position: relative;
  border-color: rgba(195, 145, 42, .38) !important;
  background:
    linear-gradient(90deg, rgba(255, 232, 143, .28), rgba(255, 248, 213, .16) 56%, transparent) !important;
}

.tcjc-saved-verse .tcjc-verse-text {
  text-decoration: underline;
  text-decoration-color: rgba(207, 157, 44, .55);
  text-decoration-thickness: .16em;
  text-underline-offset: .18em;
}

.tcjc-verse-menu-open {
  z-index: 3;
}

.tcjc-verse-action-menu {
  position: absolute;
  left: clamp(44px, 8vw, 70px);
  right: 12px;
  top: calc(100% - 6px);
  z-index: 20;
  display: grid;
  gap: 7px;
  width: min(360px, calc(100% - 56px));
  padding: 12px;
  border: 1px solid rgba(148, 184, 205, .42);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(250, 244, 228, .92));
  box-shadow: 0 16px 36px rgba(12, 38, 56, .22);
}

.tcjc-verse-action-title {
  color: #123a54;
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.tcjc-verse-action-menu button {
  min-height: 38px;
  border: 1px solid rgba(148, 184, 205, .34);
  border-radius: 11px;
  color: #123a54;
  background: rgba(255, 255, 255, .76);
  font-weight: 900;
  cursor: pointer;
}

.tcjc-verse-action-menu button:first-of-type {
  color: #ffffff;
  border-color: rgba(178, 219, 238, .78);
  background: linear-gradient(145deg, #91c3dc, #5e9fc2 52%, #357ea8);
}

.tcjc-saved-scriptures-card {
  max-height: min(78vh, 720px);
  overflow: auto;
}

.tcjc-saved-scriptures-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.tcjc-saved-scripture-item {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(148, 184, 205, .26);
  border-radius: 18px;
  background: rgba(255, 255, 255, .56);
}

.tcjc-saved-scripture-link {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.tcjc-saved-scripture-link span {
  color: #0f3d5c;
  font-size: 1rem;
  font-weight: 950;
}

.tcjc-saved-scripture-link em {
  color: rgba(10, 34, 51, .58);
  font-size: .86rem;
  font-style: normal;
  font-weight: 850;
}

.tcjc-saved-scripture-link p {
  margin: 4px 0 0;
  color: rgba(10, 34, 51, .76);
  font-size: .96rem;
  font-weight: 650;
  line-height: 1.5;
}

.tcjc-saved-scripture-remove {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(148, 184, 205, .34);
  border-radius: 10px;
  color: #123a54;
  background: rgba(255, 255, 255, .72);
  font-weight: 900;
  cursor: pointer;
}

body.tcjc-reader-dark-active .tcjc-saved-verse {
  border-color: rgba(232, 196, 91, .34) !important;
  background:
    linear-gradient(90deg, rgba(214, 167, 48, .24), rgba(130, 103, 42, .15) 56%, transparent) !important;
}

body.tcjc-reader-dark-active .tcjc-verse-action-menu,
body.tcjc-reader-dark-active .tcjc-saved-scripture-item {
  border-color: rgba(205, 222, 232, .24);
  background: rgba(46, 49, 50, .96);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .32);
}

body.tcjc-reader-dark-active .tcjc-verse-action-title,
body.tcjc-reader-dark-active .tcjc-verse-action-menu button,
body.tcjc-reader-dark-active .tcjc-saved-scripture-remove,
body.tcjc-reader-dark-active .tcjc-saved-scripture-link span {
  color: rgba(255, 252, 242, .96);
}

body.tcjc-reader-dark-active .tcjc-verse-action-menu button,
body.tcjc-reader-dark-active .tcjc-saved-scripture-remove {
  border-color: rgba(205, 222, 232, .26);
  background: rgba(255, 255, 255, .10);
}

body.tcjc-reader-dark-active .tcjc-saved-scripture-link em,
body.tcjc-reader-dark-active .tcjc-saved-scripture-link p {
  color: rgba(255, 248, 231, .72);
}

@media (max-width: 720px) {
  .tcjc-verse-action-menu {
    left: 14px;
    right: 14px;
    width: auto;
  }
}

/* ====================== END STEP 148 SAVED SCRIPTURES V1 ====================== */

/* ====================== STEP 148F SAVED SCRIPTURE TAP MENU ANCHOR FIX ====================== */

.tcjc-verse {
  position: relative !important;
  cursor: pointer !important;
  isolation: isolate;
}

.tcjc-verse:hover,
.tcjc-verse:focus-within,
.tcjc-verse.tcjc-verse-menu-open {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 248, 213, .14) 58%, transparent) !important;
}

.tcjc-verse.tcjc-verse-menu-open {
  z-index: 50 !important;
}

.tcjc-verse-action-menu {
  position: absolute !important;
  top: calc(100% - 2px) !important;
  left: clamp(42px, 8vw, 72px) !important;
  right: 12px !important;
  z-index: 80 !important;
  pointer-events: auto !important;
}

.tcjc-verse-action-menu button {
  pointer-events: auto !important;
}

.tcjc-scripture-panel,
.tcjc-page-content {
  overflow: visible !important;
}

body.tcjc-reader-dark-active .tcjc-verse:hover,
body.tcjc-reader-dark-active .tcjc-verse:focus-within,
body.tcjc-reader-dark-active .tcjc-verse.tcjc-verse-menu-open {
  background:
    linear-gradient(90deg, rgba(214, 167, 48, .14), rgba(130, 103, 42, .08) 58%, transparent) !important;
}

@media (max-width: 720px) {
  .tcjc-verse-action-menu {
    left: 10px !important;
    right: 10px !important;
    top: calc(100% + 2px) !important;
  }
}

/* ====================== END STEP 148F SAVED SCRIPTURE TAP MENU ANCHOR FIX ====================== */

/* ====================== STEP 148G BRIGHTER SAVED SCRIPTURE HIGHLIGHT ====================== */

.tcjc-saved-verse {
  padding: 12px 14px 12px 0 !important;
  border: 1px solid rgba(196, 143, 31, .48) !important;
  border-left: 5px solid rgba(218, 158, 35, .92) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(90deg, rgba(255, 218, 77, .48), rgba(255, 240, 156, .34) 52%, rgba(255, 248, 213, .18)) !important;
  box-shadow:
    0 10px 24px rgba(104, 75, 19, .10),
    inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}

.tcjc-saved-verse .tcjc-verse-num {
  color: #8a5b08 !important;
}

.tcjc-saved-verse .tcjc-verse-text {
  color: #22180a !important;
  font-weight: 700;
  text-decoration: none !important;
}

.tcjc-saved-verse::after {
  content: "Saved";
  position: absolute;
  top: 7px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #6e4700;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(196, 143, 31, .26);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

body.tcjc-reader-dark-active .tcjc-saved-verse {
  border-color: rgba(245, 199, 85, .42) !important;
  border-left-color: rgba(247, 193, 65, .92) !important;
  background:
    linear-gradient(90deg, rgba(219, 158, 33, .42), rgba(134, 96, 31, .30) 52%, rgba(82, 62, 31, .18)) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 239, 194, .12) !important;
}

body.tcjc-reader-dark-active .tcjc-saved-verse .tcjc-verse-num {
  color: #ffd783 !important;
}

body.tcjc-reader-dark-active .tcjc-saved-verse .tcjc-verse-text {
  color: #fff0c9 !important;
}

body.tcjc-reader-dark-active .tcjc-saved-verse::after {
  color: #ffe7a8;
  border-color: rgba(255, 220, 135, .25);
  background: rgba(0, 0, 0, .22);
}

@media (max-width: 720px) {
  .tcjc-saved-verse {
    padding: 11px 10px 11px 0 !important;
  }

  .tcjc-saved-verse::after {
    top: 6px;
    right: 8px;
    font-size: .62rem;
  }
}

/* ====================== END STEP 148G BRIGHTER SAVED SCRIPTURE HIGHLIGHT ====================== */

/* ====================== STEP 148H BLUE SAVED SCRIPTURE HIGHLIGHT ====================== */

.tcjc-saved-verse,
body.tcjc-reader-dark-active .tcjc-saved-verse {
  padding: 12px 14px 12px 0 !important;
  border: 1px solid rgba(126, 190, 226, .70) !important;
  border-left: 5px solid rgba(255, 255, 255, .82) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(89, 164, 207, .98), rgba(51, 124, 171, .98) 52%, rgba(32, 92, 138, .98)) !important;
  box-shadow:
    0 12px 26px rgba(25, 91, 137, .24),
    inset 0 1px 0 rgba(255, 255, 255, .32) !important;
}

.tcjc-saved-verse .tcjc-verse-num,
.tcjc-saved-verse .tcjc-verse-text,
body.tcjc-reader-dark-active .tcjc-saved-verse .tcjc-verse-num,
body.tcjc-reader-dark-active .tcjc-saved-verse .tcjc-verse-text {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(7, 24, 40, .36) !important;
}

.tcjc-saved-verse .tcjc-verse-text,
body.tcjc-reader-dark-active .tcjc-saved-verse .tcjc-verse-text {
  font-weight: 700;
  text-decoration: none !important;
}

.tcjc-saved-verse::after,
body.tcjc-reader-dark-active .tcjc-saved-verse::after {
  content: "Saved";
  position: absolute;
  top: 7px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #ffffff !important;
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .34) !important;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(7, 24, 40, .36);
  pointer-events: none;
}

.tcjc-saved-verse:hover,
.tcjc-saved-verse:focus-within,
.tcjc-saved-verse.tcjc-verse-menu-open,
body.tcjc-reader-dark-active .tcjc-saved-verse:hover,
body.tcjc-reader-dark-active .tcjc-saved-verse:focus-within,
body.tcjc-reader-dark-active .tcjc-saved-verse.tcjc-verse-menu-open {
  background:
    linear-gradient(135deg, rgba(108, 181, 221, .99), rgba(57, 136, 186, .99) 52%, rgba(35, 99, 148, .99)) !important;
}

@media (max-width: 720px) {
  .tcjc-saved-verse {
    padding: 11px 10px 11px 0 !important;
  }

  .tcjc-saved-verse::after {
    top: 6px;
    right: 8px;
    font-size: .62rem;
  }
}

/* ====================== END STEP 148H BLUE SAVED SCRIPTURE HIGHLIGHT ====================== */

/* ====================== STEP 159 APP-WIDE DARK MENU OWNERSHIP ====================== */

/*
  Fix dark/light carryover between Reader and Home:
  the app-wide class must fully control the menu,
  even if the old reader-only dark class is added or removed during screen changes.
*/

/* App-wide dark mode owns the fixed menu wrapper. */
html.tcjc-app-dark-active .tcjc-app-header,
body.tcjc-app-dark-active .tcjc-app-header,
html.tcjc-app-dark-active .tcjc-app-header.tcjc-reader-menu-active,
body.tcjc-app-dark-active .tcjc-app-header.tcjc-reader-menu-active {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* App-wide dark mode owns the glass menu itself. */
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-header-inner,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-header-inner,
html.tcjc-app-dark-active .tcjc-app-header.tcjc-reader-menu-active .tcjc-app-header-inner,
body.tcjc-app-dark-active .tcjc-app-header.tcjc-reader-menu-active .tcjc-app-header-inner {
  border-color: rgba(205, 222, 232, .34) !important;
  background:
    linear-gradient(
      135deg,
      rgba(82, 86, 88, .94),
      rgba(64, 69, 72, .93) 52%,
      rgba(72, 68, 60, .92)
    ) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .24),
    0 1px 0 rgba(255, 255, 255, .18) inset,
    0 -1px 0 rgba(255, 231, 180, .08) inset !important;
  backdrop-filter: blur(14px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
}

/* App-wide dark mode owns normal menu buttons. */
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.tcjc-app-search-trigger):not(.tcjc-app-theme-trigger),
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.tcjc-app-search-trigger):not(.tcjc-app-theme-trigger) {
  color: rgba(255, 252, 242, .96) !important;
  border-color: rgba(235, 244, 248, .24) !important;
  background: rgba(255, 255, 255, .15) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* App-wide dark mode owns disabled menu buttons. */
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button:disabled,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button:disabled {
  color: rgba(255, 252, 242, .34) !important;
  border-color: rgba(235, 244, 248, .12) !important;
  background: rgba(255, 255, 255, .06) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: .42 !important;
}

/* App-wide dark mode owns search and sun/moon icons. */
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:focus-visible,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:focus-visible {
  border-color: rgba(255, 255, 255, .56) !important;
  background: rgba(255, 255, 255, .10) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover span,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover span {
  color: #ffffff !important;
}

/* App-wide light mode wins when the dark class is removed. */
html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-header-inner,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-header-inner {
  border-color: rgba(226, 214, 185, .88) !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .98),
      rgba(255, 255, 255, .94) 48%,
      rgba(250, 244, 228, .90)
    ) !important;
  box-shadow:
    0 10px 24px rgba(41, 31, 18, .10),
    0 1px 0 rgba(255, 255, 255, .90) inset,
    0 -1px 0 rgba(141, 109, 58, .08) inset !important;
}

/* Light mode icons return to blue when app-wide dark is off. */
html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger,
html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger {
  color: #2f79a9 !important;
}

html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span {
  color: #2f79a9 !important;
}

/* ====================== END STEP 159 APP-WIDE DARK MENU OWNERSHIP ====================== */

/* ====================== STEP 160 OUTLINE HOVER + CHARCOAL HOME DARK MODE ====================== */

/*
  Fix after Step 159:
  - Hover/focus should be outline + soft glass, not solid blue.
  - Current/active page buttons may remain blue.
  - Search and sun/moon stay outline-only.
  - Home background turns charcoal in app-wide night mode.
*/

/* App-wide night mode must darken the actual home/app background. */
html.tcjc-app-dark-active,
body.tcjc-app-dark-active,
body.tcjc-app-dark-active #root,
body.tcjc-app-dark-active .tcjc-app-shell,
body.tcjc-app-dark-active .tcjc-app-content,
body.tcjc-app-dark-active .tcjc-homepage,
body.tcjc-app-dark-active .tcjc-home-screen,
body.tcjc-app-dark-active .tcjc-home-main,
body.tcjc-app-dark-active main {
  background-color: #080909 !important;
}

body.tcjc-app-dark-active .tcjc-app-shell,
body.tcjc-app-dark-active .tcjc-app-content,
body.tcjc-app-dark-active .tcjc-homepage,
body.tcjc-app-dark-active .tcjc-home-screen,
body.tcjc-app-dark-active .tcjc-home-main {
  background-image:
    radial-gradient(circle at 50% 0%, rgba(148, 184, 205, .06), transparent 34%),
    linear-gradient(180deg, #0b0d0e 0%, #080909 52%, #050606 100%) !important;
}

/* Light mode hover: outline box only, not blue fill. */
html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):hover,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):hover,
html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):focus-visible,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):focus-visible {
  color: #102c40 !important;
  border-color: rgba(47, 121, 169, .58) !important;
  background: rgba(255, 255, 255, .46) !important;
  background-image: none !important;
  box-shadow:
    0 0 0 2px rgba(47, 121, 169, .10),
    0 1px 0 rgba(255, 255, 255, .68) inset !important;
  text-shadow: none !important;
  transform: none !important;
}

/* Dark mode hover: outline box only, not blue fill. */
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):hover,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):hover,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):focus-visible,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):focus-visible,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):hover,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):focus-visible {
  color: rgba(255, 252, 242, .96) !important;
  border-color: rgba(255, 255, 255, .52) !important;
  background: rgba(255, 255, 255, .10) !important;
  background-image: none !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .07),
    0 1px 0 rgba(255, 255, 255, .12) inset !important;
  text-shadow: none !important;
  transform: none !important;
}



/* Icon buttons are never solid blue on hover. */
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:focus-visible,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:active,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:active {
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover,
html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover,
html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible,
html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:focus-visible,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:focus-visible {
  color: #2f79a9 !important;
  border-color: rgba(47, 121, 169, .62) !important;
  background: rgba(255, 255, 255, .22) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:focus-visible,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:focus-visible,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:focus-visible {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .56) !important;
  background: rgba(255, 255, 255, .10) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Keep icon glyphs correct after hover overrides. */
html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span,
body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span {
  color: #2f79a9 !important;
}

html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span {
  color: #ffffff !important;
}

/* Mobile/tablet inherits the same outline-only hover. */
@media (max-width: 920px) {
  .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):hover,
  .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):focus-visible {
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):hover,
  body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):hover,
  html:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):focus-visible,
  body:not(.tcjc-app-dark-active) .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):focus-visible {
    color: #102c40 !important;
    border-color: rgba(47, 121, 169, .58) !important;
    background: rgba(255, 255, 255, .34) !important;
  }

  html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):hover,
  body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):hover,
  html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):focus-visible,
  body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button:not(:disabled):not(.active):not(.tcjc-active):not([aria-current="page"]):not([data-active="true"]):focus-visible {
    color: rgba(255, 252, 242, .96) !important;
    border-color: rgba(255, 255, 255, .52) !important;
    background: rgba(255, 255, 255, .10) !important;
  }
}

/* ====================== END STEP 160 OUTLINE HOVER + CHARCOAL HOME DARK MODE ====================== */

/* ====================== STEP 161 DARK HOME SECTION + YELLOW SUN ICON ====================== */

/*
  Fixes:
  - Home page foundation/scripture section should not stay white in night mode.
  - Text in that section should be readable, not washed out.
  - Sun icon should be warm yellow on every screen size.
*/

/* Force the home page layers charcoal in app-wide dark mode. */
html.tcjc-app-dark-active,
body.tcjc-app-dark-active,
body.tcjc-app-dark-active #root,
body.tcjc-app-dark-active .tcjc-app-shell,
body.tcjc-app-dark-active .tcjc-app-content,
body.tcjc-app-dark-active .tcjc-homepage,
body.tcjc-app-dark-active .tcjc-home-screen,
body.tcjc-app-dark-active .tcjc-home-main,
body.tcjc-app-dark-active .tcjc-home-hero,
body.tcjc-app-dark-active .tcjc-home-section,
body.tcjc-app-dark-active .tcjc-home-foundation,
body.tcjc-app-dark-active .tcjc-foundation-section,
body.tcjc-app-dark-active .tcjc-reading-foundation,
body.tcjc-app-dark-active .tcjc-scripture-foundation,
body.tcjc-app-dark-active .tcjc-home-scripture-section,
body.tcjc-app-dark-active .tcjc-home-scripture-quotes,
body.tcjc-app-dark-active .tcjc-scripture-quotes-section,
body.tcjc-app-dark-active main {
  background-color: #080909 !important;
}

body.tcjc-app-dark-active .tcjc-app-shell,
body.tcjc-app-dark-active .tcjc-app-content,
body.tcjc-app-dark-active .tcjc-homepage,
body.tcjc-app-dark-active .tcjc-home-screen,
body.tcjc-app-dark-active .tcjc-home-main,
body.tcjc-app-dark-active .tcjc-home-hero,
body.tcjc-app-dark-active .tcjc-home-section,
body.tcjc-app-dark-active .tcjc-home-foundation,
body.tcjc-app-dark-active .tcjc-foundation-section,
body.tcjc-app-dark-active .tcjc-reading-foundation,
body.tcjc-app-dark-active .tcjc-scripture-foundation,
body.tcjc-app-dark-active .tcjc-home-scripture-section,
body.tcjc-app-dark-active .tcjc-home-scripture-quotes,
body.tcjc-app-dark-active .tcjc-scripture-quotes-section {
  background-image:
    radial-gradient(circle at 50% 0%, rgba(148, 184, 205, .07), transparent 34%),
    linear-gradient(180deg, #0b0d0e 0%, #080909 52%, #050606 100%) !important;
}

/* Catch the white home foundation band if its class name is slightly different. */
body.tcjc-app-dark-active [class*="foundation"],
body.tcjc-app-dark-active [class*="Foundation"],
body.tcjc-app-dark-active [class*="scripture-quote"],
body.tcjc-app-dark-active [class*="ScriptureQuote"] {
  background-color: transparent !important;
}

/* Make the foundation heading/subtitle readable in night mode. */
body.tcjc-app-dark-active .tcjc-homepage .tcjc-eyebrow,
body.tcjc-app-dark-active .tcjc-homepage .tcjc-section-eyebrow,
body.tcjc-app-dark-active .tcjc-homepage h1,
body.tcjc-app-dark-active .tcjc-homepage h2,
body.tcjc-app-dark-active .tcjc-homepage h3,
body.tcjc-app-dark-active .tcjc-homepage p,
body.tcjc-app-dark-active .tcjc-homepage li,
body.tcjc-app-dark-active .tcjc-home-section h1,
body.tcjc-app-dark-active .tcjc-home-section h2,
body.tcjc-app-dark-active .tcjc-home-section h3,
body.tcjc-app-dark-active .tcjc-home-section p,
body.tcjc-app-dark-active .tcjc-foundation-section h1,
body.tcjc-app-dark-active .tcjc-foundation-section h2,
body.tcjc-app-dark-active .tcjc-foundation-section h3,
body.tcjc-app-dark-active .tcjc-foundation-section p,
body.tcjc-app-dark-active .tcjc-foundation-intro {
  color: rgba(255, 248, 231, .88) !important;
}

body.tcjc-app-dark-active .tcjc-homepage .tcjc-eyebrow,
body.tcjc-app-dark-active .tcjc-homepage .tcjc-section-eyebrow {
  color: #7fc4e8 !important;
}

/* Quote cards remain dark glass, but readable. */
body.tcjc-app-dark-active .tcjc-scripture-quote-card {
  border-color: rgba(205, 222, 232, .24) !important;
  background:
    linear-gradient(135deg, rgba(82, 86, 88, .92), rgba(64, 69, 72, .90) 52%, rgba(72, 68, 60, .86)) !important;
  color: rgba(255, 252, 242, .94) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .24),
    0 1px 0 rgba(255, 255, 255, .12) inset !important;
}

body.tcjc-app-dark-active .tcjc-scripture-quote-card h1,
body.tcjc-app-dark-active .tcjc-scripture-quote-card h2,
body.tcjc-app-dark-active .tcjc-scripture-quote-card h3,
body.tcjc-app-dark-active .tcjc-scripture-quote-card p {
  color: rgba(255, 248, 231, .88) !important;
}

/* Yellow sun icon in dark mode, all screens. */
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover span,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:focus-visible span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:focus-visible span,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:active span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:active span,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:hover span,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:focus-visible span,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger:active span {
  color: #f6c85f !important;
  text-shadow:
    0 0 10px rgba(246, 200, 95, .24),
    0 1px 2px rgba(0, 0, 0, .22) !important;
}

/* Keep magnifier white in dark mode while sun is yellow. */
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover span,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover span {
  color: #ffffff !important;
}

/* ====================== END STEP 161 DARK HOME SECTION + YELLOW SUN ICON ====================== */

/* ====================== STEP 162 SCOPED LEGACY HOME FOUNDATION DARK MODE ====================== */

/*
  Legacy repair retained only for the original foundation/scripture quote
  sections it was written for. Do not target every Home section or every class
  containing "reading" or "scripture"; those blanket selectors cover the
  photographic Home hero and interfere with newer isolated components.
*/

body.tcjc-app-dark-active .tcjc-home-foundation,
body.tcjc-app-dark-active .tcjc-foundation-section,
body.tcjc-app-dark-active .tcjc-reading-foundation,
body.tcjc-app-dark-active .tcjc-scripture-foundation,
body.tcjc-app-dark-active .tcjc-home-scripture-section,
body.tcjc-app-dark-active .tcjc-home-scripture-quotes,
body.tcjc-app-dark-active .tcjc-scripture-quotes-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(148, 184, 205, .07), transparent 34%),
    linear-gradient(180deg, #0b0d0e 0%, #080909 52%, #050606 100%) !important;
  background-color: #080909 !important;
  color: rgba(255, 248, 231, .88) !important;
}

/* Remove white pseudo-layers only from the legacy foundation wrappers. */
body.tcjc-app-dark-active .tcjc-home-foundation::before,
body.tcjc-app-dark-active .tcjc-home-foundation::after,
body.tcjc-app-dark-active .tcjc-foundation-section::before,
body.tcjc-app-dark-active .tcjc-foundation-section::after,
body.tcjc-app-dark-active .tcjc-reading-foundation::before,
body.tcjc-app-dark-active .tcjc-reading-foundation::after,
body.tcjc-app-dark-active .tcjc-scripture-foundation::before,
body.tcjc-app-dark-active .tcjc-scripture-foundation::after,
body.tcjc-app-dark-active .tcjc-home-scripture-section::before,
body.tcjc-app-dark-active .tcjc-home-scripture-section::after,
body.tcjc-app-dark-active .tcjc-home-scripture-quotes::before,
body.tcjc-app-dark-active .tcjc-home-scripture-quotes::after,
body.tcjc-app-dark-active .tcjc-scripture-quotes-section::before,
body.tcjc-app-dark-active .tcjc-scripture-quotes-section::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Text in the original foundation sections. */
body.tcjc-app-dark-active .tcjc-home-foundation h1,
body.tcjc-app-dark-active .tcjc-home-foundation h2,
body.tcjc-app-dark-active .tcjc-home-foundation h3,
body.tcjc-app-dark-active .tcjc-home-foundation p,
body.tcjc-app-dark-active .tcjc-home-foundation li,
body.tcjc-app-dark-active .tcjc-home-foundation strong,
body.tcjc-app-dark-active .tcjc-home-foundation span,
body.tcjc-app-dark-active .tcjc-foundation-section h1,
body.tcjc-app-dark-active .tcjc-foundation-section h2,
body.tcjc-app-dark-active .tcjc-foundation-section h3,
body.tcjc-app-dark-active .tcjc-foundation-section p,
body.tcjc-app-dark-active .tcjc-foundation-section li,
body.tcjc-app-dark-active .tcjc-foundation-section strong,
body.tcjc-app-dark-active .tcjc-foundation-section span,
body.tcjc-app-dark-active .tcjc-reading-foundation h1,
body.tcjc-app-dark-active .tcjc-reading-foundation h2,
body.tcjc-app-dark-active .tcjc-reading-foundation h3,
body.tcjc-app-dark-active .tcjc-reading-foundation p,
body.tcjc-app-dark-active .tcjc-scripture-foundation h1,
body.tcjc-app-dark-active .tcjc-scripture-foundation h2,
body.tcjc-app-dark-active .tcjc-scripture-foundation h3,
body.tcjc-app-dark-active .tcjc-scripture-foundation p,
body.tcjc-app-dark-active .tcjc-home-scripture-section h1,
body.tcjc-app-dark-active .tcjc-home-scripture-section h2,
body.tcjc-app-dark-active .tcjc-home-scripture-section h3,
body.tcjc-app-dark-active .tcjc-home-scripture-section p,
body.tcjc-app-dark-active .tcjc-home-scripture-quotes h1,
body.tcjc-app-dark-active .tcjc-home-scripture-quotes h2,
body.tcjc-app-dark-active .tcjc-home-scripture-quotes h3,
body.tcjc-app-dark-active .tcjc-home-scripture-quotes p,
body.tcjc-app-dark-active .tcjc-scripture-quotes-section h1,
body.tcjc-app-dark-active .tcjc-scripture-quotes-section h2,
body.tcjc-app-dark-active .tcjc-scripture-quotes-section h3,
body.tcjc-app-dark-active .tcjc-scripture-quotes-section p {
  color: rgba(255, 248, 231, .88) !important;
  text-shadow: none !important;
}

/* Eyebrow / small blue label stays blue. */
body.tcjc-app-dark-active .tcjc-home-foundation .tcjc-eyebrow,
body.tcjc-app-dark-active .tcjc-home-foundation .tcjc-section-eyebrow,
body.tcjc-app-dark-active .tcjc-foundation-section .tcjc-eyebrow,
body.tcjc-app-dark-active .tcjc-foundation-section .tcjc-section-eyebrow,
body.tcjc-app-dark-active .tcjc-reading-foundation .tcjc-eyebrow,
body.tcjc-app-dark-active .tcjc-scripture-foundation .tcjc-eyebrow,
body.tcjc-app-dark-active .tcjc-home-scripture-section .tcjc-eyebrow,
body.tcjc-app-dark-active .tcjc-home-scripture-quotes .tcjc-eyebrow,
body.tcjc-app-dark-active .tcjc-scripture-quotes-section .tcjc-eyebrow {
  color: #7fc4e8 !important;
}

/* Quote cards remain dark glass. */
body.tcjc-app-dark-active .tcjc-scripture-quote-card,
body.tcjc-app-dark-active [class*="quote-card"],
body.tcjc-app-dark-active [class*="QuoteCard"] {
  border-color: rgba(205, 222, 232, .24) !important;
  background:
    linear-gradient(135deg, rgba(82, 86, 88, .92), rgba(64, 69, 72, .90) 52%, rgba(72, 68, 60, .86)) !important;
  color: rgba(255, 252, 242, .94) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .24),
    0 1px 0 rgba(255, 255, 255, .12) inset !important;
}

body.tcjc-app-dark-active .tcjc-scripture-quote-card button,
body.tcjc-app-dark-active .tcjc-scripture-quote-card a,
body.tcjc-app-dark-active [class*="quote-card"] button,
body.tcjc-app-dark-active [class*="quote-card"] a {
  color: #ffffff !important;
}

/* Keep the warm yellow sun icon. */
html.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span,
body.tcjc-app-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span,
body.tcjc-reader-dark-active .tcjc-app-header .tcjc-app-nav button.tcjc-app-theme-trigger span {
  color: #f6c85f !important;
}

/* ====================== END STEP 162 SCOPED LEGACY HOME FOUNDATION DARK MODE ====================== */

/* ====================== STEP 165 STRONGER SAVED BLUE + POPUP SCROLL FIX ====================== */

/*
  Saved verse:
  - Return close to the original blue highlight.
  - Pull the blue back just slightly.
  - Remove underline.
  - Keep the font a little less heavy than the original.

  Saved popup:
  - Lock the page behind the popup.
  - Let the popup/card/list scroll internally.
*/

/* Stronger saved verse highlight, slightly softer than the original deep blue. */
.tcjc-saved-verse,
body.tcjc-app-dark-active .tcjc-saved-verse,
body.tcjc-reader-dark-active .tcjc-saved-verse {
  position: relative;
  border-color: rgba(180, 222, 242, .72) !important;
  background:
    linear-gradient(
      135deg,
      rgba(108, 181, 221, .88),
      rgba(57, 136, 186, .86) 52%,
      rgba(35, 99, 148, .84)
    ) !important;
  box-shadow:
    inset 4px 0 0 rgba(210, 238, 250, .64),
    0 10px 22px rgba(24, 94, 142, .12) !important;
}

/* No underline, and less bold than the old saved style. */
.tcjc-saved-verse .tcjc-verse-text,
.tcjc-saved-verse .tcjc-chapter-intro,
body.tcjc-app-dark-active .tcjc-saved-verse .tcjc-verse-text,
body.tcjc-app-dark-active .tcjc-saved-verse .tcjc-chapter-intro,
body.tcjc-reader-dark-active .tcjc-saved-verse .tcjc-verse-text,
body.tcjc-reader-dark-active .tcjc-saved-verse .tcjc-chapter-intro {
  color: rgba(255, 255, 255, .96) !important;
  font-weight: 660 !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(7, 24, 40, .18) !important;
}

/* Verse number remains visible, but not oversized/loud. */
.tcjc-saved-verse .tcjc-verse-num,
body.tcjc-app-dark-active .tcjc-saved-verse .tcjc-verse-num,
body.tcjc-reader-dark-active .tcjc-saved-verse .tcjc-verse-num {
  color: rgba(255, 255, 255, .90) !important;
  font-weight: 760 !important;
  text-shadow: 0 1px 2px rgba(7, 24, 40, .20) !important;
}

/* Hover/open: closer to original, but still a little softened. */
.tcjc-saved-verse:hover,
.tcjc-saved-verse:focus-within,
.tcjc-saved-verse.tcjc-verse-menu-open,
body.tcjc-app-dark-active .tcjc-saved-verse:hover,
body.tcjc-app-dark-active .tcjc-saved-verse:focus-within,
body.tcjc-app-dark-active .tcjc-saved-verse.tcjc-verse-menu-open,
body.tcjc-reader-dark-active .tcjc-saved-verse:hover,
body.tcjc-reader-dark-active .tcjc-saved-verse:focus-within,
body.tcjc-reader-dark-active .tcjc-saved-verse.tcjc-verse-menu-open {
  border-color: rgba(210, 238, 250, .82) !important;
  background:
    linear-gradient(
      135deg,
      rgba(108, 181, 221, .94),
      rgba(57, 136, 186, .92) 52%,
      rgba(35, 99, 148, .90)
    ) !important;
  box-shadow:
    inset 4px 0 0 rgba(230, 247, 255, .76),
    0 10px 24px rgba(24, 94, 142, .16) !important;
}

/* Keep text stable when the verse action menu opens. */
.tcjc-saved-verse:hover .tcjc-verse-text,
.tcjc-saved-verse:focus-within .tcjc-verse-text,
.tcjc-saved-verse.tcjc-verse-menu-open .tcjc-verse-text,
.tcjc-saved-verse:hover .tcjc-chapter-intro,
.tcjc-saved-verse:focus-within .tcjc-chapter-intro,
.tcjc-saved-verse.tcjc-verse-menu-open .tcjc-chapter-intro {
  color: rgba(255, 255, 255, .96) !important;
  font-weight: 660 !important;
  text-decoration: none !important;
}

/* Saved badge: keep it, but reduce the heavy feeling a bit. */
.tcjc-saved-verse::after {
  color: rgba(255, 255, 255, .96) !important;
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .32) !important;
  font-weight: 820 !important;
  letter-spacing: .065em !important;
  text-shadow: 0 1px 2px rgba(7, 24, 40, .26) !important;
}

/* Mobile saved verse spacing. */
@media (max-width: 720px) {
  .tcjc-saved-verse {
    padding: 11px 10px 11px 0 !important;
  }

  .tcjc-saved-verse::after {
    top: 6px !important;
    right: 8px !important;
    font-size: .62rem !important;
  }
}

/* Lock the page behind the Saved popup. */
html.tcjc-saved-popup-open,
body.tcjc-saved-popup-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Saved popup overlay should catch scrolling, not pass it to the page behind. */
body.tcjc-saved-popup-open .tcjc-saved-overlay,
body.tcjc-saved-popup-open .tcjc-app-saved-overlay,
body.tcjc-saved-popup-open .tcjc-saved-scriptures-overlay,
body.tcjc-saved-popup-open [class*="saved"][class*="overlay"],
body.tcjc-saved-popup-open [class*="Saved"][class*="Overlay"],
body.tcjc-saved-popup-open [class*="saved"][class*="Overlay"],
body.tcjc-saved-popup-open [class*="Saved"][class*="overlay"] {
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: none !important;
}

/* Saved popup card can scroll internally if it is the scroll container. */
body.tcjc-saved-popup-open .tcjc-saved-card,
body.tcjc-saved-popup-open .tcjc-app-saved-card,
body.tcjc-saved-popup-open .tcjc-saved-scriptures-card,
body.tcjc-saved-popup-open [class*="saved"][class*="card"],
body.tcjc-saved-popup-open [class*="Saved"][class*="Card"],
body.tcjc-saved-popup-open [class*="saved"][class*="Card"],
body.tcjc-saved-popup-open [class*="Saved"][class*="card"] {
  max-height: calc(100dvh - var(--tcjc-fixed-header-space, 74px) - 34px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* If the saved popup has a list/body/content wrapper, make that the preferred scroll area. */
body.tcjc-saved-popup-open .tcjc-saved-list,
body.tcjc-saved-popup-open .tcjc-app-saved-list,
body.tcjc-saved-popup-open .tcjc-saved-scriptures-list,
body.tcjc-saved-popup-open .tcjc-saved-items,
body.tcjc-saved-popup-open .tcjc-app-saved-items,
body.tcjc-saved-popup-open .tcjc-saved-body,
body.tcjc-saved-popup-open .tcjc-app-saved-body,
body.tcjc-saved-popup-open .tcjc-saved-content,
body.tcjc-saved-popup-open .tcjc-app-saved-content,
body.tcjc-saved-popup-open [class*="saved"][class*="list"],
body.tcjc-saved-popup-open [class*="Saved"][class*="List"],
body.tcjc-saved-popup-open [class*="saved"][class*="items"],
body.tcjc-saved-popup-open [class*="Saved"][class*="Items"],
body.tcjc-saved-popup-open [class*="saved"][class*="body"],
body.tcjc-saved-popup-open [class*="Saved"][class*="Body"],
body.tcjc-saved-popup-open [class*="saved"][class*="content"],
body.tcjc-saved-popup-open [class*="Saved"][class*="Content"] {
  max-height: min(64dvh, 520px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  padding-right: 4px !important;
}

/* Keep Saved popup usable on mobile. */
@media (max-width: 720px) {
  body.tcjc-saved-popup-open .tcjc-saved-card,
  body.tcjc-saved-popup-open .tcjc-app-saved-card,
  body.tcjc-saved-popup-open .tcjc-saved-scriptures-card,
  body.tcjc-saved-popup-open [class*="saved"][class*="card"],
  body.tcjc-saved-popup-open [class*="Saved"][class*="Card"],
  body.tcjc-saved-popup-open [class*="saved"][class*="Card"],
  body.tcjc-saved-popup-open [class*="Saved"][class*="card"] {
    max-height: calc(100dvh - var(--tcjc-fixed-header-space, 74px) - 22px) !important;
  }

  body.tcjc-saved-popup-open .tcjc-saved-list,
  body.tcjc-saved-popup-open .tcjc-app-saved-list,
  body.tcjc-saved-popup-open .tcjc-saved-scriptures-list,
  body.tcjc-saved-popup-open .tcjc-saved-items,
  body.tcjc-saved-popup-open .tcjc-app-saved-items,
  body.tcjc-saved-popup-open .tcjc-saved-body,
  body.tcjc-saved-popup-open .tcjc-app-saved-body,
  body.tcjc-saved-popup-open .tcjc-saved-content,
  body.tcjc-saved-popup-open .tcjc-app-saved-content,
  body.tcjc-saved-popup-open [class*="saved"][class*="list"],
  body.tcjc-saved-popup-open [class*="Saved"][class*="List"],
  body.tcjc-saved-popup-open [class*="saved"][class*="items"],
  body.tcjc-saved-popup-open [class*="Saved"][class*="Items"],
  body.tcjc-saved-popup-open [class*="saved"][class*="body"],
  body.tcjc-saved-popup-open [class*="Saved"][class*="Body"],
  body.tcjc-saved-popup-open [class*="saved"][class*="content"],
  body.tcjc-saved-popup-open [class*="Saved"][class*="Content"] {
    max-height: min(58dvh, 460px) !important;
  }
}

/* ====================== END STEP 165 STRONGER SAVED BLUE + POPUP SCROLL FIX ====================== */

/* ====================== STEP 166 SINGLE SAVED ACCENT + BIGGER MAGNIFIER ====================== */

/*
  Fixes:
  - Saved verses should have only one left accent line.
  - Remove any extra pseudo/inset accent line.
  - Keep the strong blue saved highlight from Step 165.
  - Increase magnifier icon size on all screen sizes.
*/

/* Remove any extra saved-verse accent pseudo-line. */
.tcjc-saved-verse::before,
body.tcjc-app-dark-active .tcjc-saved-verse::before,
body.tcjc-reader-dark-active .tcjc-saved-verse::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* One saved accent only: use border-left, not inset shadow. */
.tcjc-saved-verse,
body.tcjc-app-dark-active .tcjc-saved-verse,
body.tcjc-reader-dark-active .tcjc-saved-verse {
  border-color: rgba(180, 222, 242, .72) !important;
  border-left: 5px solid rgba(210, 238, 250, .72) !important;
  box-shadow:
    0 10px 22px rgba(24, 94, 142, .12) !important;
}

.tcjc-saved-verse:hover,
.tcjc-saved-verse:focus-within,
.tcjc-saved-verse.tcjc-verse-menu-open,
body.tcjc-app-dark-active .tcjc-saved-verse:hover,
body.tcjc-app-dark-active .tcjc-saved-verse:focus-within,
body.tcjc-app-dark-active .tcjc-saved-verse.tcjc-verse-menu-open,
body.tcjc-reader-dark-active .tcjc-saved-verse:hover,
body.tcjc-reader-dark-active .tcjc-saved-verse:focus-within,
body.tcjc-reader-dark-active .tcjc-saved-verse.tcjc-verse-menu-open {
  border-color: rgba(210, 238, 250, .82) !important;
  border-left: 5px solid rgba(230, 247, 255, .82) !important;
  box-shadow:
    0 10px 24px rgba(24, 94, 142, .16) !important;
}

/* Keep saved text clean: no underline. */
.tcjc-saved-verse .tcjc-verse-text,
.tcjc-saved-verse .tcjc-chapter-intro,
.tcjc-saved-verse:hover .tcjc-verse-text,
.tcjc-saved-verse:focus-within .tcjc-verse-text,
.tcjc-saved-verse.tcjc-verse-menu-open .tcjc-verse-text,
body.tcjc-app-dark-active .tcjc-saved-verse .tcjc-verse-text,
body.tcjc-app-dark-active .tcjc-saved-verse .tcjc-chapter-intro,
body.tcjc-reader-dark-active .tcjc-saved-verse .tcjc-verse-text,
body.tcjc-reader-dark-active .tcjc-saved-verse .tcjc-chapter-intro {
  text-decoration: none !important;
}

/* Bigger magnifier glyph, while preserving the quiet icon-container style. */
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover span,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus span,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible span,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:active span {
  font-size: 2.12rem !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Bigger magnifier when the menu is shrunk. */
body.tcjc-app-scrolled .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
.tcjc-app-shell.tcjc-app-scrolled .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
.tcjc-app-header.tcjc-app-header-scrolled .tcjc-app-nav button.tcjc-app-search-trigger span,
.tcjc-app-header.is-scrolled .tcjc-app-nav button.tcjc-app-search-trigger span {
  font-size: 1.78rem !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}

/* Tablet/mobile magnifier size. */
@media (max-width: 920px) {
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover span,
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible span,
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:active span {
    font-size: 1.92rem !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
  }

  body.tcjc-app-scrolled .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-shell.tcjc-app-scrolled .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-header.tcjc-app-header-scrolled .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-header.is-scrolled .tcjc-app-nav button.tcjc-app-search-trigger span {
    font-size: 1.72rem !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
  }
}

/* Small phone magnifier size. */
@media (max-width: 430px) {
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover span,
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible span,
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:active span {
    font-size: 1.84rem !important;
  }

  body.tcjc-app-scrolled .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-shell.tcjc-app-scrolled .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-header.tcjc-app-header-scrolled .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-header.is-scrolled .tcjc-app-nav button.tcjc-app-search-trigger span {
    font-size: 1.66rem !important;
  }
}

/* ====================== END STEP 166 SINGLE SAVED ACCENT + BIGGER MAGNIFIER ====================== */

/* ====================== STEP 167 BIGGER MAGNIFIER + HOME COPY CLEANUP ====================== */

/*
  Larger magnifier icon:
  - Keep the quiet outline container.
  - Increase only the glyph size.
  - Keep it centered in normal and scrolled states.
*/

.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover span,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus span,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible span,
.tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:active span {
  font-size: 2.36rem !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Scrolled menu: larger than before, but still fits the smaller icon box. */
body.tcjc-app-scrolled .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
.tcjc-app-shell.tcjc-app-scrolled .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
.tcjc-app-header.tcjc-app-header-scrolled .tcjc-app-nav button.tcjc-app-search-trigger span,
.tcjc-app-header.is-scrolled .tcjc-app-nav button.tcjc-app-search-trigger span {
  font-size: 2.02rem !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}

/* Tablet and mobile. */
@media (max-width: 920px) {
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover span,
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible span,
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:active span {
    font-size: 2.16rem !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
  }

  body.tcjc-app-scrolled .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-shell.tcjc-app-scrolled .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-header.tcjc-app-header-scrolled .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-header.is-scrolled .tcjc-app-nav button.tcjc-app-search-trigger span {
    font-size: 1.94rem !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
  }
}

/* Small phones. */
@media (max-width: 430px) {
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:hover span,
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:focus-visible span,
  .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger:active span {
    font-size: 2.06rem !important;
  }

  body.tcjc-app-scrolled .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-shell.tcjc-app-scrolled .tcjc-app-header .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-header.tcjc-app-header-scrolled .tcjc-app-nav button.tcjc-app-search-trigger span,
  .tcjc-app-header.is-scrolled .tcjc-app-nav button.tcjc-app-search-trigger span {
    font-size: 1.86rem !important;
  }
}

/* ====================== END STEP 167 BIGGER MAGNIFIER + HOME COPY CLEANUP ====================== */

/* ====================== STEP 174 ULTRA REALISTIC FAST PAGE FLIP ====================== */

/*
  High-quality page turn without a heavy library:
  - CSS-only.
  - GPU-friendly transform + opacity animation.
  - Better paper fold, edge highlight, shadow sweep, and page-depth.
  - Keeps motion fast enough for mobile/iPad.
*/

.tcjc-scripture-panel {
  perspective: 2400px !important;
  transform-style: preserve-3d !important;
  contain: layout paint style !important;
}

.tcjc-page-content {
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  will-change: transform, opacity !important;
}

/* Soft moving light/shadow over the text while the page turns. */
.tcjc-page-content::after {
  content: "" !important;
  position: absolute !important;
  inset: -70px -96px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(64, 38, 12, .055) 23%,
      rgba(255, 255, 255, .30) 43%,
      rgba(61, 35, 10, .22) 57%,
      transparent 82%
    ) !important;
  mix-blend-mode: multiply !important;
}

/* The folding page surface. */
.tcjc-page-fold {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 18 !important;
  width: 62% !important;
  pointer-events: none !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity !important;
  opacity: 0;

  background:
    radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, .74), transparent 20rem),
    radial-gradient(ellipse at 82% 62%, rgba(93, 56, 18, .20), transparent 24rem),
    linear-gradient(
      90deg,
      rgba(255, 252, 239, .96) 0%,
      rgba(249, 236, 199, .98) 30%,
      rgba(230, 204, 148, .96) 55%,
      rgba(171, 123, 58, .58) 78%,
      rgba(72, 43, 14, .38) 100%
    ) !important;

  box-shadow:
    0 18px 42px rgba(48, 28, 8, .18),
    18px 0 34px rgba(52, 31, 10, .14),
    -10px 0 22px rgba(255, 255, 255, .18) inset,
    28px 0 46px rgba(255, 255, 255, .20) inset,
    -52px 0 54px rgba(73, 43, 12, .24) inset !important;
}

/* Fine paper grain on the flipping sheet. */
.tcjc-page-fold::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .26 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(78, 50, 20, .030) 0,
      rgba(78, 50, 20, .030) 1px,
      transparent 1px,
      transparent 16px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, .11) 0,
      rgba(255, 255, 255, .11) 1px,
      transparent 1px,
      transparent 13px
    ) !important;
  mix-blend-mode: multiply !important;
}

/* Bright curling edge and inner crease. */
.tcjc-page-fold::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 22px !important;
  pointer-events: none !important;
  opacity: .94 !important;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .06),
      rgba(255, 255, 255, .62) 34%,
      rgba(93, 56, 18, .22) 72%,
      rgba(45, 26, 7, .10)
    ) !important;
  filter: blur(.1px) !important;
}

.tcjc-page-fold-next {
  right: 0 !important;
  transform-origin: left center !important;
  border-radius: 0 30px 30px 0 !important;
}

.tcjc-page-fold-next::after {
  left: 0 !important;
}

.tcjc-page-fold-prev {
  left: 0 !important;
  transform-origin: right center !important;
  border-radius: 30px 0 0 30px !important;
}

.tcjc-page-fold-prev::after {
  right: 0 !important;
  transform: scaleX(-1) !important;
}

/* A deeper passing shadow, but still cheap to render. */
.tcjc-scripture-panel.tcjc-page-turn-next::before,
.tcjc-scripture-panel.tcjc-page-turn-prev::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 16 !important;
  width: 48% !important;
  pointer-events: none !important;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(47, 27, 8, .08) 18%,
      rgba(47, 27, 8, .32) 46%,
      rgba(255, 255, 255, .18) 66%,
      transparent 100%
    ) !important;
  mix-blend-mode: multiply !important;
  filter: blur(.15px) !important;
}

.tcjc-scripture-panel.tcjc-page-turn-next::before {
  right: 0 !important;
  animation: tcjcRealShadowNext .64s cubic-bezier(.17,.78,.18,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-turn-prev::before {
  left: 0 !important;
  transform: scaleX(-1) !important;
  animation: tcjcRealShadowPrev .64s cubic-bezier(.17,.78,.18,1) both !important;
}

/* Leave/enter movement: realistic, but fast. */
.tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content {
  transform-origin: left center !important;
  animation: tcjcRealContentLeaveNext .64s cubic-bezier(.18,.80,.16,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content {
  transform-origin: right center !important;
  animation: tcjcRealContentLeavePrev .64s cubic-bezier(.18,.80,.16,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content::after,
.tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content::after {
  animation: tcjcRealContentSheen .64s cubic-bezier(.18,.80,.16,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-fold-next {
  animation: tcjcRealFoldNext .64s cubic-bezier(.16,.82,.14,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-fold-prev {
  animation: tcjcRealFoldPrev .64s cubic-bezier(.16,.82,.14,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-enter-next .tcjc-page-content {
  transform-origin: right center !important;
  animation: tcjcRealContentEnterNext .38s cubic-bezier(.18,.72,.22,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-enter-prev .tcjc-page-content {
  transform-origin: left center !important;
  animation: tcjcRealContentEnterPrev .38s cubic-bezier(.18,.72,.22,1) both !important;
}

@keyframes tcjcRealContentLeaveNext {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0deg) scaleX(1);
  }
  34% {
    opacity: .92;
    transform: translate3d(-10px,0,16px) rotateY(-18deg) scaleX(.992);
  }
  68% {
    opacity: .48;
    transform: translate3d(-42px,0,24px) rotateY(-58deg) scaleX(.955);
  }
  100% {
    opacity: .08;
    transform: translate3d(-92px,0,0) rotateY(-93deg) scaleX(.90);
  }
}

@keyframes tcjcRealContentLeavePrev {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0deg) scaleX(1);
  }
  34% {
    opacity: .92;
    transform: translate3d(10px,0,16px) rotateY(18deg) scaleX(.992);
  }
  68% {
    opacity: .48;
    transform: translate3d(42px,0,24px) rotateY(58deg) scaleX(.955);
  }
  100% {
    opacity: .08;
    transform: translate3d(92px,0,0) rotateY(93deg) scaleX(.90);
  }
}

@keyframes tcjcRealFoldNext {
  0% {
    opacity: 0;
    transform: translate3d(66%,0,22px) rotateY(6deg) skewY(0deg) scaleX(.90);
  }
  22% {
    opacity: .92;
    transform: translate3d(24%,0,32px) rotateY(-24deg) skewY(-.35deg) scaleX(1.02);
  }
  52% {
    opacity: 1;
    transform: translate3d(-16%,0,44px) rotateY(-82deg) skewY(.35deg) scaleX(.96);
  }
  78% {
    opacity: .70;
    transform: translate3d(-55%,0,24px) rotateY(-132deg) skewY(.15deg) scaleX(.80);
  }
  100% {
    opacity: 0;
    transform: translate3d(-84%,0,0) rotateY(-166deg) skewY(0deg) scaleX(.66);
  }
}

@keyframes tcjcRealFoldPrev {
  0% {
    opacity: 0;
    transform: translate3d(-66%,0,22px) rotateY(-6deg) skewY(0deg) scaleX(.90);
  }
  22% {
    opacity: .92;
    transform: translate3d(-24%,0,32px) rotateY(24deg) skewY(.35deg) scaleX(1.02);
  }
  52% {
    opacity: 1;
    transform: translate3d(16%,0,44px) rotateY(82deg) skewY(-.35deg) scaleX(.96);
  }
  78% {
    opacity: .70;
    transform: translate3d(55%,0,24px) rotateY(132deg) skewY(-.15deg) scaleX(.80);
  }
  100% {
    opacity: 0;
    transform: translate3d(84%,0,0) rotateY(166deg) skewY(0deg) scaleX(.66);
  }
}

@keyframes tcjcRealContentEnterNext {
  0% {
    opacity: .10;
    transform: translate3d(42px,0,0) rotateY(24deg) scaleX(.982);
  }
  76% {
    opacity: 1;
    transform: translate3d(-2px,0,0) rotateY(-1.2deg) scaleX(.998);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0deg) scaleX(1);
  }
}

@keyframes tcjcRealContentEnterPrev {
  0% {
    opacity: .10;
    transform: translate3d(-42px,0,0) rotateY(-24deg) scaleX(.982);
  }
  76% {
    opacity: 1;
    transform: translate3d(2px,0,0) rotateY(1.2deg) scaleX(.998);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0deg) scaleX(1);
  }
}

@keyframes tcjcRealContentSheen {
  0% { opacity: 0; transform: translateX(52%); }
  22% { opacity: .24; }
  52% { opacity: .52; transform: translateX(-2%); }
  100% { opacity: 0; transform: translateX(-48%); }
}

@keyframes tcjcRealShadowNext {
  0% { opacity: 0; transform: translateX(48%) scaleX(.72); }
  30% { opacity: .42; }
  62% { opacity: .58; transform: translateX(-20%) scaleX(1.05); }
  100% { opacity: 0; transform: translateX(-58%) scaleX(.82); }
}

@keyframes tcjcRealShadowPrev {
  0% { opacity: 0; transform: scaleX(-1) translateX(48%) scaleX(.72); }
  30% { opacity: .42; }
  62% { opacity: .58; transform: scaleX(-1) translateX(-20%) scaleX(1.05); }
  100% { opacity: 0; transform: scaleX(-1) translateX(-58%) scaleX(.82); }
}

/* Mobile/iPad tuning: still realistic, slightly faster and lighter. */
@media (max-width: 920px) {
  .tcjc-scripture-panel {
    perspective: 1850px !important;
  }

  .tcjc-page-fold {
    width: 74% !important;
  }

  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-fold-next,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-fold-prev,
  .tcjc-scripture-panel.tcjc-page-turn-next::before,
  .tcjc-scripture-panel.tcjc-page-turn-prev::before,
  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content::after,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content::after {
    animation-duration: .56s !important;
  }

  .tcjc-scripture-panel.tcjc-page-enter-next .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-enter-prev .tcjc-page-content {
    animation-duration: .32s !important;
  }
}

/* Very small phones: trim the effect a little more for smoothness. */
@media (max-width: 430px) {
  .tcjc-page-fold {
    width: 82% !important;
    box-shadow:
      0 14px 28px rgba(48, 28, 8, .15),
      12px 0 22px rgba(52, 31, 10, .11),
      22px 0 34px rgba(255, 255, 255, .16) inset,
      -38px 0 38px rgba(73, 43, 12, .20) inset !important;
  }

  .tcjc-page-fold::before {
    opacity: .18 !important;
  }
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .tcjc-scripture-panel.tcjc-page-turn-next::before,
  .tcjc-scripture-panel.tcjc-page-turn-prev::before,
  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-enter-next .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-enter-prev .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content::after,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content::after,
  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-fold-next,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-fold-prev {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ====================== END STEP 174 ULTRA REALISTIC FAST PAGE FLIP ====================== */

/* ====================== STEP 175 MOBILE REALISTIC PAGE FLIP RESTORE ====================== */

/*
  Mobile repair:
  The desktop page flip looked better, but mobile was being trimmed too much.
  This keeps the realistic fold, shadow, and parchment edge on phone/iPad
  while keeping animation duration under 0.7s.
*/

@media (max-width: 920px) {
  .tcjc-scripture-panel {
    perspective: 2200px !important;
    transform-style: preserve-3d !important;
    overflow: hidden !important;
  }

  .tcjc-page-content {
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    will-change: transform, opacity !important;
  }

  .tcjc-page-fold {
    display: block !important;
    width: 76% !important;
    z-index: 22 !important;
    opacity: 0;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    will-change: transform, opacity !important;
    background:
      radial-gradient(ellipse at 20% 8%, rgba(255, 255, 255, .76), transparent 17rem),
      radial-gradient(ellipse at 82% 62%, rgba(93, 56, 18, .22), transparent 20rem),
      linear-gradient(
        90deg,
        rgba(255, 252, 239, .98) 0%,
        rgba(249, 236, 199, .98) 30%,
        rgba(230, 204, 148, .97) 56%,
        rgba(171, 123, 58, .62) 80%,
        rgba(72, 43, 14, .42) 100%
      ) !important;
    box-shadow:
      0 18px 38px rgba(48, 28, 8, .20),
      16px 0 30px rgba(52, 31, 10, .16),
      -10px 0 22px rgba(255, 255, 255, .18) inset,
      28px 0 46px rgba(255, 255, 255, .20) inset,
      -48px 0 48px rgba(73, 43, 12, .25) inset !important;
  }

  .tcjc-page-fold::before {
    opacity: .22 !important;
  }

  .tcjc-page-fold::after {
    width: 20px !important;
    opacity: .95 !important;
  }

  .tcjc-scripture-panel.tcjc-page-turn-next::before,
  .tcjc-scripture-panel.tcjc-page-turn-prev::before {
    display: block !important;
    z-index: 20 !important;
    width: 56% !important;
    opacity: 0;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(47, 27, 8, .09) 18%,
        rgba(47, 27, 8, .36) 46%,
        rgba(255, 255, 255, .20) 68%,
        transparent 100%
      ) !important;
  }

  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content {
    animation: tcjcMobileRealContentLeaveNext .66s cubic-bezier(.18,.80,.16,1) both !important;
  }

  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content {
    animation: tcjcMobileRealContentLeavePrev .66s cubic-bezier(.18,.80,.16,1) both !important;
  }

  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-fold-next {
    animation: tcjcMobileRealFoldNext .66s cubic-bezier(.16,.82,.14,1) both !important;
  }

  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-fold-prev {
    animation: tcjcMobileRealFoldPrev .66s cubic-bezier(.16,.82,.14,1) both !important;
  }

  .tcjc-scripture-panel.tcjc-page-turn-next::before {
    animation: tcjcMobileRealShadowNext .66s cubic-bezier(.17,.78,.18,1) both !important;
  }

  .tcjc-scripture-panel.tcjc-page-turn-prev::before {
    animation: tcjcMobileRealShadowPrev .66s cubic-bezier(.17,.78,.18,1) both !important;
  }

  .tcjc-scripture-panel.tcjc-page-enter-next .tcjc-page-content {
    animation: tcjcMobileRealContentEnterNext .40s cubic-bezier(.18,.72,.22,1) both !important;
  }

  .tcjc-scripture-panel.tcjc-page-enter-prev .tcjc-page-content {
    animation: tcjcMobileRealContentEnterPrev .40s cubic-bezier(.18,.72,.22,1) both !important;
  }
}

@keyframes tcjcMobileRealContentLeaveNext {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0deg) scaleX(1);
  }
  36% {
    opacity: .90;
    transform: translate3d(-8px,0,14px) rotateY(-16deg) scaleX(.992);
  }
  70% {
    opacity: .46;
    transform: translate3d(-30px,0,22px) rotateY(-52deg) scaleX(.958);
  }
  100% {
    opacity: .08;
    transform: translate3d(-58px,0,0) rotateY(-88deg) scaleX(.91);
  }
}

@keyframes tcjcMobileRealContentLeavePrev {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0deg) scaleX(1);
  }
  36% {
    opacity: .90;
    transform: translate3d(8px,0,14px) rotateY(16deg) scaleX(.992);
  }
  70% {
    opacity: .46;
    transform: translate3d(30px,0,22px) rotateY(52deg) scaleX(.958);
  }
  100% {
    opacity: .08;
    transform: translate3d(58px,0,0) rotateY(88deg) scaleX(.91);
  }
}

@keyframes tcjcMobileRealFoldNext {
  0% {
    opacity: 0;
    transform: translate3d(72%,0,18px) rotateY(4deg) scaleX(.90);
  }
  22% {
    opacity: .95;
    transform: translate3d(28%,0,30px) rotateY(-22deg) scaleX(1.02);
  }
  54% {
    opacity: 1;
    transform: translate3d(-10%,0,42px) rotateY(-78deg) scaleX(.96);
  }
  80% {
    opacity: .72;
    transform: translate3d(-46%,0,24px) rotateY(-128deg) scaleX(.82);
  }
  100% {
    opacity: 0;
    transform: translate3d(-76%,0,0) rotateY(-162deg) scaleX(.68);
  }
}

@keyframes tcjcMobileRealFoldPrev {
  0% {
    opacity: 0;
    transform: translate3d(-72%,0,18px) rotateY(-4deg) scaleX(.90);
  }
  22% {
    opacity: .95;
    transform: translate3d(-28%,0,30px) rotateY(22deg) scaleX(1.02);
  }
  54% {
    opacity: 1;
    transform: translate3d(10%,0,42px) rotateY(78deg) scaleX(.96);
  }
  80% {
    opacity: .72;
    transform: translate3d(46%,0,24px) rotateY(128deg) scaleX(.82);
  }
  100% {
    opacity: 0;
    transform: translate3d(76%,0,0) rotateY(162deg) scaleX(.68);
  }
}

@keyframes tcjcMobileRealContentEnterNext {
  0% {
    opacity: .12;
    transform: translate3d(30px,0,0) rotateY(20deg) scaleX(.984);
  }
  76% {
    opacity: 1;
    transform: translate3d(-2px,0,0) rotateY(-1deg) scaleX(.998);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0deg) scaleX(1);
  }
}

@keyframes tcjcMobileRealContentEnterPrev {
  0% {
    opacity: .12;
    transform: translate3d(-30px,0,0) rotateY(-20deg) scaleX(.984);
  }
  76% {
    opacity: 1;
    transform: translate3d(2px,0,0) rotateY(1deg) scaleX(.998);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0deg) scaleX(1);
  }
}

@keyframes tcjcMobileRealShadowNext {
  0% {
    opacity: 0;
    transform: translateX(42%) scaleX(.74);
  }
  34% {
    opacity: .46;
  }
  64% {
    opacity: .60;
    transform: translateX(-16%) scaleX(1.04);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(.84);
  }
}

@keyframes tcjcMobileRealShadowPrev {
  0% {
    opacity: 0;
    transform: scaleX(-1) translateX(42%) scaleX(.74);
  }
  34% {
    opacity: .46;
  }
  64% {
    opacity: .60;
    transform: scaleX(-1) translateX(-16%) scaleX(1.04);
  }
  100% {
    opacity: 0;
    transform: scaleX(-1) translateX(-50%) scaleX(.84);
  }
}

/* ====================== END STEP 175 MOBILE REALISTIC PAGE FLIP RESTORE ====================== */

/* ====================== STEP 176 MOST REALISTIC FLUID PAGE FLIP ====================== */

/*
  Final realism pass:
  - Slower, smoother curl without feeling sluggish.
  - Stronger bending sheet edge.
  - More natural highlight/shadow travel.
  - Uses only transform + opacity + lightweight gradients.
*/

.tcjc-scripture-panel {
  perspective: 2700px !important;
  perspective-origin: 50% 48% !important;
  transform-style: preserve-3d !important;
}

.tcjc-page-content {
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  transform: translate3d(0,0,0) !important;
  will-change: transform, opacity !important;
}

/* Moving page sheen over the current text. */
.tcjc-page-content::after {
  content: "" !important;
  position: absolute !important;
  inset: -80px -110px !important;
  pointer-events: none !important;
  opacity: 0;
  background:
    linear-gradient(
      92deg,
      transparent 0%,
      rgba(70, 43, 14, .035) 18%,
      rgba(70, 43, 14, .12) 31%,
      rgba(255, 255, 255, .36) 45%,
      rgba(83, 49, 13, .25) 59%,
      rgba(45, 25, 6, .12) 70%,
      transparent 88%
    ) !important;
  mix-blend-mode: multiply !important;
  transform: translate3d(52%,0,1px);
  will-change: transform, opacity !important;
}

/* Main folding page surface. */
.tcjc-page-fold {
  width: 64% !important;
  z-index: 24 !important;
  opacity: 0;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity !important;

  background:
    radial-gradient(ellipse at 13% 8%, rgba(255,255,255,.84), transparent 15rem),
    radial-gradient(ellipse at 38% 48%, rgba(255,246,216,.26), transparent 20rem),
    radial-gradient(ellipse at 92% 55%, rgba(83,48,13,.30), transparent 22rem),
    linear-gradient(
      90deg,
      rgba(255,253,243,.98) 0%,
      rgba(250,238,205,.99) 25%,
      rgba(237,214,162,.98) 49%,
      rgba(199,155,86,.78) 72%,
      rgba(103,64,22,.45) 100%
    ) !important;

  box-shadow:
    0 20px 48px rgba(45, 27, 8, .22),
    18px 0 36px rgba(48, 29, 9, .18),
    -14px 0 26px rgba(255,255,255,.22) inset,
    26px 0 48px rgba(255,255,255,.22) inset,
    -58px 0 60px rgba(70, 42, 13, .30) inset !important;
}

/* Subtle paper fibers. */
.tcjc-page-fold::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .24 !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(
      87deg,
      rgba(78, 50, 20, .032) 0,
      rgba(78, 50, 20, .032) 1px,
      transparent 1px,
      transparent 18px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.115) 0,
      rgba(255,255,255,.115) 1px,
      transparent 1px,
      transparent 15px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.16),
      transparent 34%,
      rgba(71,42,12,.13) 78%,
      rgba(34,19,5,.15)
    ) !important;
  mix-blend-mode: multiply !important;
}

/* Curl edge: this is what makes the sheet feel dimensional. */
.tcjc-page-fold::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 28px !important;
  opacity: .96 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.70) 30%,
      rgba(255,246,216,.42) 48%,
      rgba(87,50,14,.28) 73%,
      rgba(29,16,4,.12) 100%
    ) !important;
  filter: blur(.08px) !important;
}

.tcjc-page-fold-next {
  right: 0 !important;
  transform-origin: left center !important;
}

.tcjc-page-fold-prev {
  left: 0 !important;
  transform-origin: right center !important;
}

.tcjc-page-fold-next::after {
  left: 0 !important;
}

.tcjc-page-fold-prev::after {
  right: 0 !important;
  transform: scaleX(-1) !important;
}

/* Passing body shadow under the curling sheet. */
.tcjc-scripture-panel.tcjc-page-turn-next::before,
.tcjc-scripture-panel.tcjc-page-turn-prev::before {
  z-index: 21 !important;
  width: 54% !important;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(40,23,7,.08) 14%,
      rgba(40,23,7,.34) 42%,
      rgba(255,255,255,.20) 66%,
      transparent 100%
    ) !important;
  mix-blend-mode: multiply !important;
  filter: blur(.18px) !important;
  will-change: transform, opacity !important;
}

/* Desktop animation timing. */
.tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content {
  transform-origin: left center !important;
  animation: tcjcFluidLeaveNext .74s cubic-bezier(.15,.76,.13,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content {
  transform-origin: right center !important;
  animation: tcjcFluidLeavePrev .74s cubic-bezier(.15,.76,.13,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-fold-next {
  animation: tcjcFluidFoldNext .74s cubic-bezier(.13,.82,.12,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-fold-prev {
  animation: tcjcFluidFoldPrev .74s cubic-bezier(.13,.82,.12,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-turn-next::before {
  right: 0 !important;
  animation: tcjcFluidShadowNext .74s cubic-bezier(.14,.78,.14,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-turn-prev::before {
  left: 0 !important;
  animation: tcjcFluidShadowPrev .74s cubic-bezier(.14,.78,.14,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content::after,
.tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content::after {
  animation: tcjcFluidSheen .74s cubic-bezier(.14,.78,.14,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-enter-next .tcjc-page-content {
  transform-origin: right center !important;
  animation: tcjcFluidEnterNext .44s cubic-bezier(.18,.70,.18,1) both !important;
}

.tcjc-scripture-panel.tcjc-page-enter-prev .tcjc-page-content {
  transform-origin: left center !important;
  animation: tcjcFluidEnterPrev .44s cubic-bezier(.18,.70,.18,1) both !important;
}

@keyframes tcjcFluidLeaveNext {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0deg) scaleX(1);
  }
  22% {
    opacity: .98;
    transform: translate3d(-4px,0,10px) rotateY(-8deg) scaleX(.998);
  }
  48% {
    opacity: .78;
    transform: translate3d(-22px,0,28px) rotateY(-34deg) scaleX(.982);
  }
  76% {
    opacity: .34;
    transform: translate3d(-62px,0,22px) rotateY(-72deg) scaleX(.936);
  }
  100% {
    opacity: .06;
    transform: translate3d(-104px,0,0) rotateY(-96deg) scaleX(.89);
  }
}

@keyframes tcjcFluidLeavePrev {
  0% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0deg) scaleX(1);
  }
  22% {
    opacity: .98;
    transform: translate3d(4px,0,10px) rotateY(8deg) scaleX(.998);
  }
  48% {
    opacity: .78;
    transform: translate3d(22px,0,28px) rotateY(34deg) scaleX(.982);
  }
  76% {
    opacity: .34;
    transform: translate3d(62px,0,22px) rotateY(72deg) scaleX(.936);
  }
  100% {
    opacity: .06;
    transform: translate3d(104px,0,0) rotateY(96deg) scaleX(.89);
  }
}

@keyframes tcjcFluidFoldNext {
  0% {
    opacity: 0;
    transform: translate3d(75%,0,20px) rotateY(8deg) skewY(0deg) scaleX(.88);
  }
  18% {
    opacity: .88;
    transform: translate3d(42%,0,36px) rotateY(-12deg) skewY(-.25deg) scaleX(1.02);
  }
  43% {
    opacity: 1;
    transform: translate3d(6%,0,58px) rotateY(-54deg) skewY(-.55deg) scaleX(1.02);
  }
  68% {
    opacity: .92;
    transform: translate3d(-34%,0,42px) rotateY(-112deg) skewY(.32deg) scaleX(.86);
  }
  88% {
    opacity: .44;
    transform: translate3d(-66%,0,18px) rotateY(-148deg) skewY(.10deg) scaleX(.72);
  }
  100% {
    opacity: 0;
    transform: translate3d(-88%,0,0) rotateY(-170deg) skewY(0deg) scaleX(.62);
  }
}

@keyframes tcjcFluidFoldPrev {
  0% {
    opacity: 0;
    transform: translate3d(-75%,0,20px) rotateY(-8deg) skewY(0deg) scaleX(.88);
  }
  18% {
    opacity: .88;
    transform: translate3d(-42%,0,36px) rotateY(12deg) skewY(.25deg) scaleX(1.02);
  }
  43% {
    opacity: 1;
    transform: translate3d(-6%,0,58px) rotateY(54deg) skewY(.55deg) scaleX(1.02);
  }
  68% {
    opacity: .92;
    transform: translate3d(34%,0,42px) rotateY(112deg) skewY(-.32deg) scaleX(.86);
  }
  88% {
    opacity: .44;
    transform: translate3d(66%,0,18px) rotateY(148deg) skewY(-.10deg) scaleX(.72);
  }
  100% {
    opacity: 0;
    transform: translate3d(88%,0,0) rotateY(170deg) skewY(0deg) scaleX(.62);
  }
}

@keyframes tcjcFluidEnterNext {
  0% {
    opacity: .08;
    transform: translate3d(54px,0,0) rotateY(28deg) scaleX(.982);
  }
  62% {
    opacity: .94;
    transform: translate3d(4px,0,0) rotateY(3deg) scaleX(.994);
  }
  86% {
    opacity: 1;
    transform: translate3d(-1px,0,0) rotateY(-.8deg) scaleX(.999);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0deg) scaleX(1);
  }
}

@keyframes tcjcFluidEnterPrev {
  0% {
    opacity: .08;
    transform: translate3d(-54px,0,0) rotateY(-28deg) scaleX(.982);
  }
  62% {
    opacity: .94;
    transform: translate3d(-4px,0,0) rotateY(-3deg) scaleX(.994);
  }
  86% {
    opacity: 1;
    transform: translate3d(1px,0,0) rotateY(.8deg) scaleX(.999);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateY(0deg) scaleX(1);
  }
}

@keyframes tcjcFluidSheen {
  0% {
    opacity: 0;
    transform: translate3d(58%,0,1px);
  }
  22% {
    opacity: .22;
  }
  48% {
    opacity: .54;
    transform: translate3d(4%,0,1px);
  }
  72% {
    opacity: .32;
  }
  100% {
    opacity: 0;
    transform: translate3d(-54%,0,1px);
  }
}

@keyframes tcjcFluidShadowNext {
  0% {
    opacity: 0;
    transform: translate3d(48%,0,0) scaleX(.70);
  }
  28% {
    opacity: .42;
  }
  62% {
    opacity: .64;
    transform: translate3d(-18%,0,0) scaleX(1.06);
  }
  100% {
    opacity: 0;
    transform: translate3d(-62%,0,0) scaleX(.80);
  }
}

@keyframes tcjcFluidShadowPrev {
  0% {
    opacity: 0;
    transform: scaleX(-1) translate3d(48%,0,0) scaleX(.70);
  }
  28% {
    opacity: .42;
  }
  62% {
    opacity: .64;
    transform: scaleX(-1) translate3d(-18%,0,0) scaleX(1.06);
  }
  100% {
    opacity: 0;
    transform: scaleX(-1) translate3d(-62%,0,0) scaleX(.80);
  }
}

/* Mobile keeps the full effect, only slightly tighter for speed. */
@media (max-width: 920px) {
  .tcjc-scripture-panel {
    perspective: 2400px !important;
    overflow: hidden !important;
  }

  .tcjc-page-fold {
    width: 80% !important;
  }

  .tcjc-page-fold::after {
    width: 24px !important;
  }

  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-fold-next,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-fold-prev,
  .tcjc-scripture-panel.tcjc-page-turn-next::before,
  .tcjc-scripture-panel.tcjc-page-turn-prev::before,
  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content::after,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content::after {
    animation-duration: .70s !important;
  }

  .tcjc-scripture-panel.tcjc-page-enter-next .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-enter-prev .tcjc-page-content {
    animation-duration: .42s !important;
  }
}

@media (max-width: 430px) {
  .tcjc-scripture-panel {
    perspective: 2150px !important;
  }

  .tcjc-page-fold {
    width: 86% !important;
  }

  .tcjc-page-fold::before {
    opacity: .18 !important;
  }

  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content,
  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-fold-next,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-fold-prev,
  .tcjc-scripture-panel.tcjc-page-turn-next::before,
  .tcjc-scripture-panel.tcjc-page-turn-prev::before,
  .tcjc-scripture-panel.tcjc-page-turn-next .tcjc-page-content::after,
  .tcjc-scripture-panel.tcjc-page-turn-prev .tcjc-page-content::after {
    animation-duration: .66s !important;
  }
}

/* ====================== END STEP 176 MOST REALISTIC FLUID PAGE FLIP ====================== */

/* ====================== STEP 179 SMART VERSE ACTION MENU ====================== */

/*
  Verse action menu now opens above verses near the bottom of the screen,
  so Save / Search / Cancel are not hidden by the page shell.
*/

.tcjc-verse {
  position: relative !important;
}

.tcjc-verse-action-menu {
  z-index: 90 !important;
  max-width: min(320px, calc(100vw - 36px)) !important;
}

.tcjc-verse-action-menu-below {
  top: calc(100% + 10px) !important;
  bottom: auto !important;
}

.tcjc-verse-action-menu-above {
  top: auto !important;
  bottom: calc(100% + 10px) !important;
}

.tcjc-verse-action-menu-above::before,
.tcjc-verse-action-menu-below::before {
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  width: 14px !important;
  height: 14px !important;
  transform: rotate(45deg) !important;
  background: inherit !important;
  border: inherit !important;
  z-index: -1 !important;
}

.tcjc-verse-action-menu-below::before {
  top: -7px !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}

.tcjc-verse-action-menu-above::before {
  bottom: -7px !important;
  border-left: 0 !important;
  border-top: 0 !important;
}

@media (max-width: 768px) {
  .tcjc-verse-action-menu {
    left: 0 !important;
    right: auto !important;
    width: min(300px, calc(100vw - 42px)) !important;
  }

  .tcjc-verse-action-menu-above {
    transform: translateY(-2px) !important;
  }

  .tcjc-verse-action-menu-below {
    transform: translateY(2px) !important;
  }
}

/* ====================== END STEP 179 SMART VERSE ACTION MENU ====================== */

/* ====================== STEP 193 REALISTIC PARCHMENT — PANEL ONLY ====================== */

/*
  Safe parchment repair:
  - Applies only to the actual scripture reading panel.
  - Does not touch the header, navigation controls, sidebar, page shell, or footer.
  - Dark mode responds to either app dark mode or reader dark mode.
*/

/* Light parchment — warm aged paper with subtle grain */
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active) article.tcjc-scripture-panel,
.tcjc-reader-shell.tcjc-reader-theme-light article.tcjc-scripture-panel {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,0.48) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 16%, rgba(124,78,28,0.10) 0 1px, transparent 3px),
    radial-gradient(circle at 34% 76%, rgba(94,56,16,0.07) 0 1px, transparent 3px),
    radial-gradient(circle at 91% 83%, rgba(255,255,255,0.20) 0 2px, transparent 4px),
    linear-gradient(90deg, rgba(104,65,22,0.14), transparent 7%, transparent 93%, rgba(104,65,22,0.12)),
    linear-gradient(180deg, rgba(255,255,255,0.36), transparent 18%, transparent 80%, rgba(94,56,16,0.12)),
    linear-gradient(135deg, #f9e6b6 0%, #e5c98f 42%, #f4dcaa 71%, #d3b06b 100%) !important;

  border-color: rgba(112,72,28,0.34) !important;
  box-shadow:
    0 24px 65px rgba(36,52,77,0.12),
    inset 0 0 72px rgba(92,56,16,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.24),
    inset 0 1px 0 rgba(255,255,255,0.48) !important;
}

/* Dark parchment — aged brown paper, not chocolate and not bright beige */
body.tcjc-app-dark-active article.tcjc-scripture-panel,
body.tcjc-reader-dark-active article.tcjc-scripture-panel,
.tcjc-reader-shell.tcjc-reader-theme-dark article.tcjc-scripture-panel {
  background:
    radial-gradient(circle at 14% 12%, rgba(225,176,96,0.09) 0 2px, transparent 4px),
    radial-gradient(circle at 80% 18%, rgba(0,0,0,0.28) 0 2px, transparent 5px),
    radial-gradient(circle at 35% 78%, rgba(203,146,66,0.06) 0 1px, transparent 3px),
    radial-gradient(circle at 92% 82%, rgba(0,0,0,0.30) 0 2px, transparent 5px),
    linear-gradient(90deg, rgba(0,0,0,0.38), transparent 9%, transparent 91%, rgba(0,0,0,0.34)),
    linear-gradient(180deg, rgba(222,174,96,0.07), transparent 18%, transparent 80%, rgba(0,0,0,0.32)),
    linear-gradient(135deg, #3b2a1a 0%, #4b3520 38%, #342416 69%, #231911 100%) !important;

  border-color: rgba(218,174,101,0.16) !important;
  box-shadow:
    0 26px 72px rgba(0,0,0,0.38),
    inset 0 0 86px rgba(0,0,0,0.44),
    inset 0 0 0 1px rgba(230,184,108,0.09),
    inset 0 1px 0 rgba(255,224,170,0.05) !important;
}

/* Light parchment grain */
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active) article.tcjc-scripture-panel::before,
.tcjc-reader-shell.tcjc-reader-theme-light article.tcjc-scripture-panel::before {
  opacity: 0.30 !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(104,65,22,0.07), transparent 24%),
    radial-gradient(circle at 84% 78%, rgba(255,255,255,0.10), transparent 26%) !important;
  mix-blend-mode: multiply !important;
}

/* Dark parchment grain */
body.tcjc-app-dark-active article.tcjc-scripture-panel::before,
body.tcjc-reader-dark-active article.tcjc-scripture-panel::before,
.tcjc-reader-shell.tcjc-reader-theme-dark article.tcjc-scripture-panel::before {
  opacity: 0.40 !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(220,170,92,0.060), transparent 24%),
    radial-gradient(circle at 84% 80%, rgba(0,0,0,0.23), transparent 28%) !important;
  mix-blend-mode: soft-light !important;
}

/* Light page edge */
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active) article.tcjc-scripture-panel::after,
.tcjc-reader-shell.tcjc-reader-theme-light article.tcjc-scripture-panel::after {
  border-color: rgba(104,65,22,0.12) !important;
  box-shadow:
    inset 12px 0 24px rgba(94,56,16,0.09),
    inset -12px 0 24px rgba(94,56,16,0.075),
    inset 0 12px 20px rgba(255,255,255,0.18),
    inset 0 -14px 24px rgba(94,56,16,0.10) !important;
}

/* Dark page edge */
body.tcjc-app-dark-active article.tcjc-scripture-panel::after,
body.tcjc-reader-dark-active article.tcjc-scripture-panel::after,
.tcjc-reader-shell.tcjc-reader-theme-dark article.tcjc-scripture-panel::after {
  border-color: rgba(230,184,108,0.08) !important;
  box-shadow:
    inset 14px 0 26px rgba(0,0,0,0.24),
    inset -14px 0 26px rgba(0,0,0,0.22),
    inset 0 12px 22px rgba(224,176,96,0.04),
    inset 0 -16px 28px rgba(0,0,0,0.25) !important;
}

/* Text contrast for the dark parchment only */
body.tcjc-app-dark-active article.tcjc-scripture-panel h2,
body.tcjc-app-dark-active article.tcjc-scripture-panel .tcjc-book-label,
body.tcjc-app-dark-active article.tcjc-scripture-panel .tcjc-verse-text,
body.tcjc-reader-dark-active article.tcjc-scripture-panel h2,
body.tcjc-reader-dark-active article.tcjc-scripture-panel .tcjc-book-label,
body.tcjc-reader-dark-active article.tcjc-scripture-panel .tcjc-verse-text,
.tcjc-reader-shell.tcjc-reader-theme-dark article.tcjc-scripture-panel h2,
.tcjc-reader-shell.tcjc-reader-theme-dark article.tcjc-scripture-panel .tcjc-book-label,
.tcjc-reader-shell.tcjc-reader-theme-dark article.tcjc-scripture-panel .tcjc-verse-text {
  color: #f6e3bc !important;
  -webkit-text-fill-color: #f6e3bc !important;
}

body.tcjc-app-dark-active article.tcjc-scripture-panel .tcjc-verse-num,
body.tcjc-reader-dark-active article.tcjc-scripture-panel .tcjc-verse-num,
.tcjc-reader-shell.tcjc-reader-theme-dark article.tcjc-scripture-panel .tcjc-verse-num {
  color: rgba(224,190,126,0.86) !important;
  -webkit-text-fill-color: rgba(224,190,126,0.86) !important;
}



/* ====================== STEP 194 FORCE DIRECT DARK PARCHMENT PANEL ====================== */

/*
  The app shell can be dark while the parchment panel keeps the light background.
  This direct class is added to the actual article:
    .tcjc-scripture-panel-light
    .tcjc-scripture-panel-dark
*/

/* Direct light parchment */
article.tcjc-scripture-panel.tcjc-scripture-panel-light {
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,0.48) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 16%, rgba(124,78,28,0.10) 0 1px, transparent 3px),
    radial-gradient(circle at 34% 76%, rgba(94,56,16,0.07) 0 1px, transparent 3px),
    radial-gradient(circle at 91% 83%, rgba(255,255,255,0.20) 0 2px, transparent 4px),
    linear-gradient(90deg, rgba(104,65,22,0.14), transparent 7%, transparent 93%, rgba(104,65,22,0.12)),
    linear-gradient(180deg, rgba(255,255,255,0.36), transparent 18%, transparent 80%, rgba(94,56,16,0.12)),
    linear-gradient(135deg, #f9e6b6 0%, #e5c98f 42%, #f4dcaa 71%, #d3b06b 100%) !important;
}

/* Direct dark parchment */
article.tcjc-scripture-panel.tcjc-scripture-panel-dark {
  background:
    radial-gradient(circle at 14% 12%, rgba(220,166,84,0.10) 0 2px, transparent 4px),
    radial-gradient(circle at 80% 18%, rgba(0,0,0,0.32) 0 2px, transparent 5px),
    radial-gradient(circle at 35% 78%, rgba(196,132,52,0.07) 0 1px, transparent 3px),
    radial-gradient(circle at 92% 82%, rgba(0,0,0,0.34) 0 2px, transparent 5px),
    linear-gradient(90deg, rgba(0,0,0,0.46), transparent 9%, transparent 91%, rgba(0,0,0,0.42)),
    linear-gradient(180deg, rgba(220,166,84,0.07), transparent 18%, transparent 80%, rgba(0,0,0,0.40)),
    linear-gradient(135deg, #2f2115 0%, #422e1c 38%, #2e2014 69%, #1b130d 100%) !important;

  border-color: rgba(218,174,101,0.16) !important;
  box-shadow:
    0 26px 72px rgba(0,0,0,0.42),
    inset 0 0 90px rgba(0,0,0,0.50),
    inset 0 0 0 1px rgba(230,184,108,0.09),
    inset 0 1px 0 rgba(255,224,170,0.05) !important;
}

article.tcjc-scripture-panel.tcjc-scripture-panel-dark::before {
  opacity: 0.42 !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(220,170,92,0.060), transparent 24%),
    radial-gradient(circle at 84% 80%, rgba(0,0,0,0.25), transparent 28%) !important;
  mix-blend-mode: soft-light !important;
}

article.tcjc-scripture-panel.tcjc-scripture-panel-dark::after {
  border-color: rgba(230,184,108,0.08) !important;
  box-shadow:
    inset 14px 0 26px rgba(0,0,0,0.25),
    inset -14px 0 26px rgba(0,0,0,0.23),
    inset 0 12px 22px rgba(224,176,96,0.04),
    inset 0 -16px 28px rgba(0,0,0,0.27) !important;
}

article.tcjc-scripture-panel.tcjc-scripture-panel-dark h2,
article.tcjc-scripture-panel.tcjc-scripture-panel-dark .tcjc-book-label,
article.tcjc-scripture-panel.tcjc-scripture-panel-dark .tcjc-verse-text {
  color: #f6e3bc !important;
  -webkit-text-fill-color: #f6e3bc !important;
}

article.tcjc-scripture-panel.tcjc-scripture-panel-dark .tcjc-verse-num {
  color: rgba(224,190,126,0.86) !important;
  -webkit-text-fill-color: rgba(224,190,126,0.86) !important;
}













/* ====================== STEP 209 HERO TOP MARGIN REPAIR ====================== */

/*
  The sticky header is now compact, but the first hero card/background still sits
  too close to the top of the page container. This adds real breathing room above
  the first content panel on every screen size.
*/

.tcjc-app-main > *:first-child {
  margin-top: clamp(0.85rem, 1.7vw, 1.45rem) !important;
}

/* If the first screen wraps the hero inside a home/root container, add space there too. */
.tcjc-app-main .tcjc-app-home:first-child,
.tcjc-app-main .tcjc-app-home-screen:first-child,
.tcjc-app-main .tcjc-home:first-child,
.tcjc-app-main .tcjc-home-screen:first-child {
  padding-top: clamp(0.85rem, 1.7vw, 1.45rem) !important;
}

/* Direct hero/card fallbacks. */
.tcjc-app-hero,
.tcjc-home-hero,
.tcjc-app-hero-wrap,
.tcjc-app-hero-shell,
.tcjc-home-hero-shell,
.tcjc-daily-hero,
.tcjc-app-main [class*="hero"]:first-child {
  margin-top: clamp(0.85rem, 1.7vw, 1.45rem) !important;
}

/* Scrolled header can use a touch more separation so the hero never tucks under it. */
body.tcjc-app-scrolled .tcjc-app-main > *:first-child,
.tcjc-app-shell.tcjc-app-scrolled .tcjc-app-main > *:first-child {
  margin-top: clamp(1rem, 1.9vw, 1.65rem) !important;
}

@media (max-width: 920px) {
  .tcjc-app-main > *:first-child,
  .tcjc-app-hero,
  .tcjc-home-hero,
  .tcjc-app-hero-wrap,
  .tcjc-app-hero-shell,
  .tcjc-home-hero-shell,
  .tcjc-daily-hero,
  .tcjc-app-main [class*="hero"]:first-child {
    margin-top: 1rem !important;
  }

  .tcjc-app-main .tcjc-app-home:first-child,
  .tcjc-app-main .tcjc-app-home-screen:first-child,
  .tcjc-app-main .tcjc-home:first-child,
  .tcjc-app-main .tcjc-home-screen:first-child {
    padding-top: 1rem !important;
  }
}

/* ====================== END STEP 209 HERO TOP MARGIN REPAIR ====================== */


/* ====================== STEP 219 HIGH-SPECIFICITY READER NAV + DARK TEXT DEPTH ====================== */

/*
  This replaces the failed lower-specificity reader indicator and dark text-shadow patches.

  Cause:
  older nav rules target .tcjc-app-header .tcjc-app-nav button:not(...)
  and use !important, so the reader indicator must be more specific.

  Dark-mode text-shadow rules also need to avoid :where(), because :where()
  contributes zero specificity and loses to older text-shadow:none rules.
*/

/* Dark-mode home/hero/glass text depth — no :where(), higher specificity. */
html.tcjc-app-dark-active body .tcjc-app-shell .tcjc-homepage .tcjc-hero-card h1,
html.tcjc-app-dark-active body .tcjc-app-shell .tcjc-homepage .tcjc-glass-card h1,
html.tcjc-app-dark-active body .tcjc-app-shell .tcjc-homepage .tcjc-home-intro-card h1,
html.tcjc-app-dark-active body .tcjc-app-shell .tcjc-homepage .tcjc-home-dashboard h1,
html.tcjc-app-dark-active body .tcjc-app-shell .tcjc-homepage .tcjc-hero-card h2,
html.tcjc-app-dark-active body .tcjc-app-shell .tcjc-homepage .tcjc-glass-card h2,
html.tcjc-app-dark-active body .tcjc-app-shell .tcjc-homepage .tcjc-home-intro-card h2,
html.tcjc-app-dark-active body .tcjc-app-shell .tcjc-homepage .tcjc-home-dashboard h2,
body.tcjc-app-dark-active .tcjc-app-shell .tcjc-homepage .tcjc-hero-card h1,
body.tcjc-app-dark-active .tcjc-app-shell .tcjc-homepage .tcjc-glass-card h1,
body.tcjc-app-dark-active .tcjc-app-shell .tcjc-homepage .tcjc-home-intro-card h1,
body.tcjc-app-dark-active .tcjc-app-shell .tcjc-homepage .tcjc-home-dashboard h1,
body.tcjc-app-dark-active .tcjc-app-shell .tcjc-homepage .tcjc-hero-card h2,
body.tcjc-app-dark-active .tcjc-app-shell .tcjc-homepage .tcjc-glass-card h2,
body.tcjc-app-dark-active .tcjc-app-shell .tcjc-homepage .tcjc-home-intro-card h2,
body.tcjc-app-dark-active .tcjc-app-shell .tcjc-homepage .tcjc-home-dashboard h2 {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.56),
    0 12px 28px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(77, 170, 220, 0.18) !important;
  filter: none !important;
}

html.tcjc-app-dark-active body .tcjc-app-shell .tcjc-homepage .tcjc-hero-card p,
html.tcjc-app-dark-active body .tcjc-app-shell .tcjc-homepage .tcjc-glass-card p,
html.tcjc-app-dark-active body .tcjc-app-shell .tcjc-homepage .tcjc-home-intro-card p,
html.tcjc-app-dark-active body .tcjc-app-shell .tcjc-homepage .tcjc-home-dashboard p,
body.tcjc-app-dark-active .tcjc-app-shell .tcjc-homepage .tcjc-hero-card p,
body.tcjc-app-dark-active .tcjc-app-shell .tcjc-homepage .tcjc-glass-card p,
body.tcjc-app-dark-active .tcjc-app-shell .tcjc-homepage .tcjc-home-intro-card p,
body.tcjc-app-dark-active .tcjc-app-shell .tcjc-homepage .tcjc-home-dashboard p {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.50),
    0 8px 20px rgba(0, 0, 0, 0.30) !important;
  filter: none !important;
}

/* Daily/modal card dark text depth too, but keep close buttons unaffected. */
html.tcjc-app-dark-active body .tcjc-app-daily-card h1,
html.tcjc-app-dark-active body .tcjc-app-daily-card h2,
html.tcjc-app-dark-active body .tcjc-app-daily-card h3,
html.tcjc-app-dark-active body .tcjc-daily-reader-card h1,
html.tcjc-app-dark-active body .tcjc-daily-reader-card h2,
html.tcjc-app-dark-active body .tcjc-daily-reader-card h3,
body.tcjc-app-dark-active .tcjc-app-daily-card h1,
body.tcjc-app-dark-active .tcjc-app-daily-card h2,
body.tcjc-app-dark-active .tcjc-app-daily-card h3,
body.tcjc-app-dark-active .tcjc-daily-reader-card h1,
body.tcjc-app-dark-active .tcjc-daily-reader-card h2,
body.tcjc-app-dark-active .tcjc-daily-reader-card h3 {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.52),
    0 10px 24px rgba(0, 0, 0, 0.32) !important;
}

html.tcjc-app-dark-active body .tcjc-app-daily-card p,
html.tcjc-app-dark-active body .tcjc-daily-reader-card p,
body.tcjc-app-dark-active .tcjc-app-daily-card p,
body.tcjc-app-dark-active .tcjc-daily-reader-card p {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.48),
    0 8px 20px rgba(0, 0, 0, 0.28) !important;
}

/* ====================== END STEP 219 HIGH-SPECIFICITY READER NAV + DARK TEXT DEPTH ====================== */





/* ====================== STEP 225 CLEAN APP CHROME RESET ======================
   Clean replacement for the old accumulated header/menu/search chrome.
   Top: logo + header search field + theme button.
   Bottom: isolated app navigation using .tcjc-bottom-nav.
============================================================================ */

.tcjc-app-shell {
  --tcjc-fixed-header-space: 78px !important;
  --tcjc-bottom-nav-space: 86px !important;
}

.tcjc-app-header.tcjc-app-split-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100vw !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: visible !important;
  z-index: 2147482000 !important;
  pointer-events: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.tcjc-app-header.tcjc-app-split-header::before,
.tcjc-app-header.tcjc-app-split-header::after {
  display: none !important;
  content: none !important;
}

.tcjc-app-top-shell {
  pointer-events: auto !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 2147483000 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.48rem, 1.4vw, 0.9rem) !important;
  width: 100vw !important;
  min-height: 72px !important;
  padding:
    max(0.5rem, env(safe-area-inset-top))
    clamp(0.8rem, 2.2vw, 1.4rem)
    0.58rem !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 251, 242, 0.84)) !important;
  border-bottom: 1px solid rgba(143, 116, 70, 0.30) !important;
  box-shadow:
    0 10px 30px rgba(22, 35, 45, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform .26s ease, opacity .22s ease !important;
}

.tcjc-app-brand {
  appearance: none !important;
  width: clamp(112px, 14vw, 158px) !important;
  min-width: clamp(112px, 14vw, 158px) !important;
  max-width: clamp(112px, 14vw, 158px) !important;
  height: 40px !important;
  max-height: 40px !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tcjc-app-brand-logo-color,
.tcjc-app-brand-logo-white,
.tcjc-app-brand img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.tcjc-app-search-field {
  appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.58rem !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 0 1rem !important;
  border: 1px solid rgba(49, 71, 88, 0.24) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: rgba(18, 35, 48, 0.82) !important;
  box-shadow:
    0 8px 22px rgba(31, 48, 60, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  font: inherit !important;
  font-weight: 720 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
}

.tcjc-app-search-field .tcjc-app-nav-icon {
  width: 1.28rem !important;
  height: 1.28rem !important;
  color: currentColor !important;
  flex: 0 0 auto !important;
}

.tcjc-app-theme-trigger {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  border: 1px solid rgba(65, 88, 105, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.52) !important;
  color: rgba(26, 43, 56, 0.78) !important;
  box-shadow:
    0 8px 20px rgba(31, 48, 60, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

.tcjc-app-theme-trigger .tcjc-app-nav-icon {
  width: 1.35rem !important;
  height: 1.35rem !important;
  color: currentColor !important;
}

.tcjc-app-bottom-shell {
  pointer-events: auto !important;
  position: fixed !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 2147483000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  min-height: 78px !important;
  padding:
    0.42rem
    clamp(0.28rem, 1.4vw, 0.82rem)
    max(0.58rem, env(safe-area-inset-bottom)) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 251, 242, 0.86)) !important;
  border-top: 1px solid rgba(143, 116, 70, 0.34) !important;
  box-shadow:
    0 -12px 34px rgba(22, 35, 45, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform .26s ease, opacity .22s ease !important;
}

.tcjc-bottom-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  width: min(100vw, 760px) !important;
  max-width: 100vw !important;
  gap: 0 !important;
  margin: 0 auto !important;
  padding: 0 clamp(0.24rem, 1vw, 0.72rem) !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.tcjc-bottom-nav-btn {
  appearance: none !important;
  display: inline-flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.22rem !important;
  min-width: 0 !important;
  max-width: 122px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0.32rem 0.16rem !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(18, 39, 54, 0.78) !important;
  font: inherit !important;
  text-shadow: none !important;
}

.tcjc-bottom-nav-btn .tcjc-app-nav-icon {
  width: 1.46rem !important;
  height: 1.46rem !important;
  color: currentColor !important;
}

.tcjc-bottom-nav-label {
  display: inline-block !important;
  color: currentColor !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  opacity: 0.86 !important;
}

.tcjc-bottom-nav-btn:hover,
.tcjc-bottom-nav-btn:focus-visible {
  background: rgba(255, 255, 255, 0.32) !important;
  color: rgba(20, 87, 126, 0.98) !important;
}

.tcjc-bottom-nav-btn:disabled {
  opacity: 0.38 !important;
}

.tcjc-bottom-nav-btn.tcjc-scriptures-nav-btn {
  color: rgba(24, 100, 146, 0.98) !important;
}

body.tcjc-app-chrome-hidden .tcjc-app-top-shell,
.tcjc-app-shell.tcjc-app-chrome-hidden .tcjc-app-top-shell {
  opacity: 0 !important;
  transform: translate3d(0, calc(-100% - 12px), 0) !important;
}

body.tcjc-app-chrome-hidden .tcjc-app-bottom-shell,
.tcjc-app-shell.tcjc-app-chrome-hidden .tcjc-app-bottom-shell {
  opacity: 0 !important;
  transform: translate3d(0, calc(100% + 14px), 0) !important;
}

html.tcjc-app-dark-active .tcjc-app-top-shell,
body.tcjc-app-dark-active .tcjc-app-top-shell,
body.tcjc-reader-dark-active .tcjc-app-top-shell,
html.tcjc-app-dark-active .tcjc-app-bottom-shell,
body.tcjc-app-dark-active .tcjc-app-bottom-shell,
body.tcjc-reader-dark-active .tcjc-app-bottom-shell {
  background:
    linear-gradient(180deg, rgba(25, 32, 38, 0.92), rgba(17, 23, 28, 0.86)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html.tcjc-app-dark-active .tcjc-app-search-field,
body.tcjc-app-dark-active .tcjc-app-search-field,
body.tcjc-reader-dark-active .tcjc-app-search-field {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(238, 246, 251, 0.82) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

html.tcjc-app-dark-active .tcjc-app-theme-trigger,
body.tcjc-app-dark-active .tcjc-app-theme-trigger,
body.tcjc-reader-dark-active .tcjc-app-theme-trigger {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(238, 246, 251, 0.86) !important;
}

html.tcjc-app-dark-active .tcjc-bottom-nav-btn,
body.tcjc-app-dark-active .tcjc-bottom-nav-btn,
body.tcjc-reader-dark-active .tcjc-bottom-nav-btn {
  color: rgba(238, 246, 251, 0.80) !important;
}

html.tcjc-app-dark-active .tcjc-bottom-nav-btn.tcjc-scriptures-nav-btn,
body.tcjc-app-dark-active .tcjc-bottom-nav-btn.tcjc-scriptures-nav-btn,
body.tcjc-reader-dark-active .tcjc-bottom-nav-btn.tcjc-scriptures-nav-btn {
  color: rgba(206, 231, 245, 0.98) !important;
}

.tcjc-app-content,
.tcjc-reader-page {
  padding-top: var(--tcjc-fixed-header-space, 78px) !important;
  padding-bottom: var(--tcjc-bottom-nav-space, 86px) !important;
}

@media (max-width: 760px) {
  .tcjc-app-shell {
    --tcjc-fixed-header-space: 74px !important;
    --tcjc-bottom-nav-space: 82px !important;
  }

  .tcjc-app-top-shell {
    grid-template-columns: 84px minmax(0, 1fr) 40px !important;
    gap: 0.42rem !important;
    min-height: 66px !important;
    padding:
      max(0.42rem, env(safe-area-inset-top))
      0.58rem
      0.48rem !important;
  }

  .tcjc-app-brand {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 36px !important;
  }

  .tcjc-app-search-field {
    height: 42px !important;
    padding: 0 0.72rem !important;
  }

  .tcjc-app-search-field span {
    font-size: 0.86rem !important;
    white-space: nowrap !important;
  }

  .tcjc-app-theme-trigger {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  .tcjc-app-bottom-shell {
    min-height: 76px !important;
    padding:
      0.38rem
      0.22rem
      max(0.52rem, env(safe-area-inset-bottom)) !important;
  }

  .tcjc-bottom-nav-label {
    font-size: 0.56rem !important;
  }

  .tcjc-bottom-nav-btn .tcjc-app-nav-icon {
    width: 1.3rem !important;
    height: 1.3rem !important;
  }
}

/* ====================== END STEP 225 CLEAN APP CHROME RESET ====================== */

/* ====================== STEP 226 NAV CLICK TARGET + HOME BADGE CLEANUP ======================
   Repairs after chrome reset:
   - Makes bottom nav click targets sit above page content with clear pointer handling.
   - Removes the old blue badge look from the homepage feature rows.
   - Keeps header search readable and controlled.
============================================================================ */

.tcjc-app-bottom-shell,
.tcjc-bottom-nav,
.tcjc-bottom-nav-btn {
  pointer-events: auto !important;
}

.tcjc-bottom-nav-btn {
  position: relative !important;
  z-index: 2147483001 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

.tcjc-bottom-nav-btn:disabled {
  cursor: default !important;
  pointer-events: none !important;
}

.tcjc-home-feature-list {
  gap: 0.72rem !important;
}

.tcjc-home-feature {
  display: block !important;
  padding: 1rem 1.08rem !important;
}

.tcjc-home-feature span {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 0 0.32rem 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: rgba(245, 251, 255, 0.92) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 0.84rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.34),
    0 6px 18px rgba(0, 0, 0, 0.24) !important;
}

.tcjc-home-feature p {
  margin: 0 !important;
}

html:not(.tcjc-app-dark-active) .tcjc-home-feature span,
body:not(.tcjc-app-dark-active) .tcjc-home-feature span {
  color: rgba(255, 255, 255, 0.94) !important;
}

html.tcjc-app-dark-active .tcjc-home-feature span,
body.tcjc-app-dark-active .tcjc-home-feature span,
body.tcjc-reader-dark-active .tcjc-home-feature span {
  color: rgba(207, 235, 250, 0.94) !important;
}

@media (max-width: 760px) {
  .tcjc-home-feature {
    padding: 0.9rem 0.95rem !important;
  }

  .tcjc-home-feature span {
    font-size: 0.76rem !important;
    letter-spacing: 0.1em !important;
  }
}

/* ====================== END STEP 226 NAV CLICK TARGET + HOME BADGE CLEANUP ====================== */


/* ====================== STEP 228 REMOVE OLD READER THEME TOGGLE ======================
   The app-wide top-shell theme button now owns light/dark mode.
============================================================================ */

.tcjc-reader-theme-toggle {
  display: none !important;
}

/* ====================== END STEP 228 REMOVE OLD READER THEME TOGGLE ====================== */



/* ====================== ICONOIR ICON BASELINE + SEARCH POPUP ALIGNMENT ======================
   The app uses the maintained iconoir-react package. Icon scale and stroke
   treatment are owned by app-chrome.css and the individual feature surfaces.
============================================================================ */

.tcjc-app-nav-icon {
  display: block !important;
  color: currentColor !important;
  fill: none !important;
  shape-rendering: geometricPrecision !important;
  filter: none !important;
}

.tcjc-bottom-nav-label {
  font-size: 0.54rem !important;
  font-weight: 820 !important;
  opacity: 0.72 !important;
}

.tcjc-search-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482500 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding:
    max(7rem, calc(env(safe-area-inset-top) + 6rem))
    clamp(1rem, 4vw, 2rem)
    2rem !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.26), transparent 34%),
    rgba(16, 22, 27, 0.44) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

.tcjc-search-popover {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(820px, calc(100vw - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
  margin: 0 auto !important;
  padding: 1.35rem 1.45rem 1.45rem !important;
  border: 1px solid rgba(134, 160, 178, 0.42) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(246, 252, 255, 0.88)) !important;
  box-shadow:
    0 24px 70px rgba(8, 23, 36, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  overflow: visible !important;
}

.tcjc-search-popover .tcjc-search-panel,
.tcjc-search-popover .tcjc-search-panel-clean {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.tcjc-search-popover .tcjc-search-form {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 3rem !important;
}

.tcjc-search-popover .tcjc-search-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 128px !important;
  gap: 0.72rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.tcjc-search-popover .tcjc-search-row input[type="search"] {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.tcjc-search-popover .tcjc-search-row button[type="submit"] {
  width: 128px !important;
  min-width: 128px !important;
  max-width: 128px !important;
  box-sizing: border-box !important;
}

.tcjc-search-popover-close {
  appearance: none !important;
  position: absolute !important;
  top: 0.78rem !important;
  right: 0.82rem !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0 0.08rem 0 !important;
  border: 1px solid rgba(48, 94, 124, 0.22) !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: rgba(25, 77, 109, 0.92) !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  text-align: center !important;
  box-shadow:
    0 8px 20px rgba(30, 60, 80, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
}

.tcjc-search-popover-close:hover,
.tcjc-search-popover-close:focus-visible {
  background: rgba(255, 255, 255, 0.92) !important;
  color: rgba(13, 65, 99, 1) !important;
}

html.tcjc-app-dark-active .tcjc-search-overlay,
body.tcjc-app-dark-active .tcjc-search-overlay,
body.tcjc-reader-dark-active .tcjc-search-overlay {
  background:
    radial-gradient(circle at 50% 16%, rgba(85, 150, 190, 0.16), transparent 34%),
    rgba(3, 8, 12, 0.58) !important;
}

html.tcjc-app-dark-active .tcjc-search-popover,
body.tcjc-app-dark-active .tcjc-search-popover,
body.tcjc-reader-dark-active .tcjc-search-popover {
  background:
    linear-gradient(180deg, rgba(28, 38, 45, 0.94), rgba(17, 24, 30, 0.90)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

html.tcjc-app-dark-active .tcjc-search-popover-close,
body.tcjc-app-dark-active .tcjc-search-popover-close,
body.tcjc-reader-dark-active .tcjc-search-popover-close {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(238, 246, 251, 0.88) !important;
}

.tcjc-home-feature-list {
  display: none !important;
}

.tcjc-home-intro-card .tcjc-actions {
  margin-top: clamp(1.35rem, 3vw, 2.15rem) !important;
}

@media (max-width: 760px) {
  .tcjc-search-overlay {
    padding:
      max(5.8rem, calc(env(safe-area-inset-top) + 5.2rem))
      0.82rem
      1.2rem !important;
  }

  .tcjc-search-popover {
    width: min(100%, calc(100vw - 1.2rem)) !important;
    max-width: calc(100vw - 1.2rem) !important;
    border-radius: 20px !important;
    padding: 1.2rem 1rem 1.15rem !important;
  }

  .tcjc-search-popover .tcjc-search-form {
    padding-right: 2.6rem !important;
  }

  .tcjc-search-popover .tcjc-search-row {
    grid-template-columns: minmax(0, 1fr) 102px !important;
    gap: 0.48rem !important;
  }

  .tcjc-search-popover .tcjc-search-row button[type="submit"] {
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
  }

  .tcjc-search-popover-close {
    width: 2.1rem !important;
    height: 2.1rem !important;
    border-radius: 10px !important;
    font-size: 1.18rem !important;
  }

  .tcjc-bottom-nav-btn .tcjc-app-nav-icon {
    width: 1.62rem !important;
    height: 1.62rem !important;
  }
}

/* ====================== END STEP 233 CUSTOM ICONS ONLY + SEARCH POPUP ALIGNMENT ====================== */















.tcjc-bottom-nav-btn {
  gap: 0.1rem !important;
  min-height: 68px !important;
  padding: 0.28rem 0.12rem 0.24rem !important;
}





.tcjc-bottom-nav-label {
  font-size: 0.5rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  opacity: 0.68 !important;
}







@media (max-width: 760px) {
  .tcjc-bottom-nav-btn {
    min-height: 64px !important;
    padding: 0.24rem 0.06rem 0.2rem !important;
  }

  

  .tcjc-bottom-nav-label {
    font-size: 0.46rem !important;
  }
}





.tcjc-bottom-nav-btn {
  gap: 0.08rem !important;
  min-height: 72px !important;
  padding: 0.24rem 0.12rem 0.22rem !important;
}















.tcjc-bottom-nav-label {
  margin-top: -0.02rem !important;
  font-size: 0.49rem !important;
  font-weight: 860 !important;
  opacity: 0.66 !important;
}

.tcjc-search-popover .tcjc-search-row button[type="submit"] {
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .tcjc-app-shell {
    --tcjc-bottom-nav-space: 74px !important;
  }

  .tcjc-app-bottom-shell {
    min-height: 68px !important;
    padding:
      0.34rem
      0.22rem
      max(0.5rem, env(safe-area-inset-bottom)) !important;
  }

  .tcjc-bottom-nav-btn {
    min-height: 58px !important;
    padding: 0.18rem 0.04rem !important;
  }

  

  .tcjc-bottom-nav-label {
    display: none !important;
  }

  .tcjc-search-popover .tcjc-search-row {
    grid-template-columns: minmax(0, 1fr) 116px !important;
    gap: 0.46rem !important;
  }

  .tcjc-search-popover .tcjc-search-row button[type="submit"] {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    font-size: 0.86rem !important;
    letter-spacing: -0.02em !important;
  }
}

@media (max-width: 390px) {
  

  .tcjc-search-popover .tcjc-search-row {
    grid-template-columns: minmax(0, 1fr) 108px !important;
    gap: 0.38rem !important;
  }

  .tcjc-search-popover .tcjc-search-row button[type="submit"] {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    font-size: 0.8rem !important;
  }
}





.tcjc-bottom-nav-btn {
  min-height: 78px !important;
  padding: 0.18rem 0.1rem 0.2rem !important;
}



.tcjc-app-bottom-shell {
  min-height: 86px !important;
}

.tcjc-app-shell {
  --tcjc-bottom-nav-space: 94px !important;
}

.tcjc-bottom-nav-label {
  font-size: 0.5rem !important;
  margin-top: -0.06rem !important;
}

@media (max-width: 760px) {
  .tcjc-app-shell {
    --tcjc-bottom-nav-space: 80px !important;
  }

  .tcjc-app-bottom-shell {
    min-height: 74px !important;
    padding:
      0.28rem
      0.2rem
      max(0.46rem, env(safe-area-inset-bottom)) !important;
  }

  .tcjc-bottom-nav-btn {
    min-height: 64px !important;
    padding: 0.12rem 0.04rem !important;
  }

  

  .tcjc-bottom-nav-label {
    display: none !important;
  }
}

@media (max-width: 390px) {
  
}



/* ====================== STEP 237 WHITE LIQUID GLASS APP CHROME ======================
   Brightens the top and bottom fixed app chrome into a cleaner white liquid-glass look.
============================================================================ */

.tcjc-app-top-shell,
.tcjc-app-bottom-shell {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.68)) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 18px 48px rgba(35, 55, 70, 0.12),
    0 2px 10px rgba(35, 55, 70, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(255, 255, 255, 0.44) !important;
  backdrop-filter: blur(26px) saturate(1.45) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.45) brightness(1.08) !important;
}

.tcjc-app-top-shell {
  border-bottom: 1px solid rgba(255, 255, 255, 0.76) !important;
}

.tcjc-app-bottom-shell {
  border-top: 1px solid rgba(255, 255, 255, 0.76) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.86)) !important;
  box-shadow:
    0 -18px 48px rgba(35, 55, 70, 0.12),
    0 -2px 10px rgba(35, 55, 70, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(255, 255, 255, 0.46) !important;
}

.tcjc-app-top-shell::before,
.tcjc-app-bottom-shell::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.72), transparent 32%),
    radial-gradient(circle at 82% 100%, rgba(255, 255, 255, 0.38), transparent 36%) !important;
  opacity: 0.82 !important;
}

.tcjc-app-search-field,
.tcjc-app-theme-trigger {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62)) !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 10px 24px rgba(35, 55, 70, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}

.tcjc-app-search-field {
  color: rgba(28, 45, 58, 0.88) !important;
}

.tcjc-app-theme-trigger {
  color: rgba(28, 45, 58, 0.82) !important;
}

html.tcjc-app-dark-active .tcjc-app-top-shell,
body.tcjc-app-dark-active .tcjc-app-top-shell,
body.tcjc-reader-dark-active .tcjc-app-top-shell,
html.tcjc-app-dark-active .tcjc-app-bottom-shell,
body.tcjc-app-dark-active .tcjc-app-bottom-shell,
body.tcjc-reader-dark-active .tcjc-app-bottom-shell {
  background:
    linear-gradient(180deg, rgba(245, 250, 253, 0.18), rgba(245, 250, 253, 0.10)) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(28px) saturate(1.35) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.35) brightness(1.04) !important;
}

html.tcjc-app-dark-active .tcjc-app-search-field,
body.tcjc-app-dark-active .tcjc-app-search-field,
body.tcjc-reader-dark-active .tcjc-app-search-field,
html.tcjc-app-dark-active .tcjc-app-theme-trigger,
body.tcjc-app-dark-active .tcjc-app-theme-trigger,
body.tcjc-reader-dark-active .tcjc-app-theme-trigger {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: rgba(242, 248, 252, 0.88) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* ====================== END STEP 237 WHITE LIQUID GLASS APP CHROME ====================== */

/* ====================== STEP 238 3D LIQUID GLASS CHROME ======================
   Stronger dimensional glass treatment:
   - front-surface gloss
   - inner bevel
   - refracted lower edge
   - layered reflection highlights
============================================================================ */

.tcjc-app-top-shell,
.tcjc-app-bottom-shell {
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.64) 42%,
      rgba(255, 255, 255, 0.78) 100%
    ) !important;
  border-color: rgba(255, 255, 255, 0.86) !important;
  box-shadow:
    0 22px 60px rgba(26, 46, 62, 0.16),
    0 7px 18px rgba(26, 46, 62, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 10px 22px rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(125, 154, 176, 0.16),
    inset 0 -12px 24px rgba(125, 154, 176, 0.08) !important;
  backdrop-filter: blur(34px) saturate(1.7) brightness(1.12) contrast(1.03) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.7) brightness(1.12) contrast(1.03) !important;
}

.tcjc-app-bottom-shell {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.66) 0%,
      rgba(255, 255, 255, 0.78) 48%,
      rgba(255, 255, 255, 0.94) 100%
    ) !important;
  box-shadow:
    0 -22px 60px rgba(26, 46, 62, 0.16),
    0 -7px 18px rgba(26, 46, 62, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 10px 22px rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(125, 154, 176, 0.16),
    inset 0 -12px 24px rgba(125, 154, 176, 0.08) !important;
}

.tcjc-app-top-shell::before,
.tcjc-app-bottom-shell::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 18% -20%, rgba(255, 255, 255, 0.96), transparent 38%),
    radial-gradient(ellipse at 82% 120%, rgba(255, 255, 255, 0.58), transparent 42%),
    linear-gradient(105deg,
      transparent 0%,
      transparent 22%,
      rgba(255, 255, 255, 0.34) 38%,
      rgba(255, 255, 255, 0.08) 52%,
      transparent 68%,
      transparent 100%
    ) !important;
  opacity: 0.95 !important;
}

.tcjc-app-top-shell::after,
.tcjc-app-bottom-shell::after {
  content: "" !important;
  position: absolute !important;
  left: 0.75rem !important;
  right: 0.75rem !important;
  pointer-events: none !important;
  height: 1px !important;
  z-index: 1 !important;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.96),
      transparent
    ) !important;
  opacity: 0.92 !important;
}

.tcjc-app-top-shell::after {
  top: 0.45rem !important;
}

.tcjc-app-bottom-shell::after {
  bottom: 0.45rem !important;
}

.tcjc-app-search-field,
.tcjc-app-theme-trigger {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.62) 48%,
      rgba(255, 255, 255, 0.80) 100%
    ) !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 11px 26px rgba(27, 48, 64, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 8px 16px rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(113, 145, 168, 0.14) !important;
  backdrop-filter: blur(22px) saturate(1.55) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.55) brightness(1.08) !important;
}

.tcjc-app-search-field::before,
.tcjc-app-theme-trigger::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(105deg,
      transparent 0%,
      rgba(255, 255, 255, 0.42) 32%,
      rgba(255, 255, 255, 0.10) 48%,
      transparent 70%
    ) !important;
  opacity: 0.72 !important;
}

.tcjc-app-search-field > *,
.tcjc-app-theme-trigger > * {
  position: relative !important;
  z-index: 1 !important;
}

html.tcjc-app-dark-active .tcjc-app-top-shell,
body.tcjc-app-dark-active .tcjc-app-top-shell,
body.tcjc-reader-dark-active .tcjc-app-top-shell,
html.tcjc-app-dark-active .tcjc-app-bottom-shell,
body.tcjc-app-dark-active .tcjc-app-bottom-shell,
body.tcjc-reader-dark-active .tcjc-app-bottom-shell {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.10) 46%,
      rgba(255, 255, 255, 0.16) 100%
    ) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 10px 22px rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

html.tcjc-app-dark-active .tcjc-app-search-field,
body.tcjc-app-dark-active .tcjc-app-search-field,
body.tcjc-reader-dark-active .tcjc-app-search-field,
html.tcjc-app-dark-active .tcjc-app-theme-trigger,
body.tcjc-app-dark-active .tcjc-app-theme-trigger,
body.tcjc-reader-dark-active .tcjc-app-theme-trigger {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.10) 48%,
      rgba(255, 255, 255, 0.15) 100%
    ) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 11px 26px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* ====================== END STEP 238 3D LIQUID GLASS CHROME ====================== */

/* ====================== STEP 239 PERFORMANCE + DARK DESKTOP GLASS + LABEL SIZE ======================
   Repairs the Step 238 glass treatment:
   - Dark desktop chrome is less transparent.
   - Mobile dark chrome stays lighter.
   - Bottom nav labels are larger on desktop/tablet.
   - Reduces expensive blur, shadow, filter, and transform animation work.
============================================================================ */

/* Larger desktop/tablet labels under the bottom icons */
.tcjc-bottom-nav-label {
  font-size: 0.66rem !important;
  line-height: 1 !important;
  font-weight: 860 !important;
  letter-spacing: -0.02em !important;
  opacity: 0.78 !important;
  margin-top: -0.02rem !important;
}

/* Keep the larger icon layout, but remove costly icon hover animation */




/* Reduce expensive full-panel glass effects */
.tcjc-app-top-shell,
.tcjc-app-bottom-shell {
  backdrop-filter: blur(22px) saturate(1.38) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.38) brightness(1.06) !important;
  box-shadow:
    0 14px 34px rgba(26, 46, 62, 0.12),
    0 4px 12px rgba(26, 46, 62, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(125, 154, 176, 0.12) !important;
}

.tcjc-app-bottom-shell {
  box-shadow:
    0 -14px 34px rgba(26, 46, 62, 0.12),
    0 -4px 12px rgba(26, 46, 62, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(125, 154, 176, 0.12) !important;
}

/* Tone down reflection layers so the browser has less to repaint */
.tcjc-app-top-shell::before,
.tcjc-app-bottom-shell::before {
  opacity: 0.54 !important;
  background:
    radial-gradient(ellipse at 18% -20%, rgba(255, 255, 255, 0.72), transparent 36%),
    linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, transparent 68%) !important;
}

.tcjc-app-top-shell::after,
.tcjc-app-bottom-shell::after {
  opacity: 0.56 !important;
}

/* Desktop/tablet dark mode: make the glass less transparent and easier to read */
@media (min-width: 761px) {
  html.tcjc-app-dark-active .tcjc-app-top-shell,
  body.tcjc-app-dark-active .tcjc-app-top-shell,
  body.tcjc-reader-dark-active .tcjc-app-top-shell,
  html.tcjc-app-dark-active .tcjc-app-bottom-shell,
  body.tcjc-app-dark-active .tcjc-app-bottom-shell,
  body.tcjc-reader-dark-active .tcjc-app-bottom-shell {
    background:
      linear-gradient(180deg,
        rgba(25, 35, 43, 0.84) 0%,
        rgba(18, 28, 36, 0.78) 48%,
        rgba(24, 36, 45, 0.86) 100%
      ) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.34),
      0 4px 12px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(18px) saturate(1.18) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) brightness(1.02) !important;
  }

  html.tcjc-app-dark-active .tcjc-app-search-field,
  body.tcjc-app-dark-active .tcjc-app-search-field,
  body.tcjc-reader-dark-active .tcjc-app-search-field,
  html.tcjc-app-dark-active .tcjc-app-theme-trigger,
  body.tcjc-app-dark-active .tcjc-app-theme-trigger,
  body.tcjc-reader-dark-active .tcjc-app-theme-trigger {
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0.10)
      ) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
  }
}

/* Mobile: keep labels hidden and preserve the current mobile glass feel */
@media (max-width: 760px) {
  .tcjc-bottom-nav-label {
    display: none !important;
  }

  .tcjc-app-top-shell,
  .tcjc-app-bottom-shell {
    backdrop-filter: blur(20px) saturate(1.32) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.32) brightness(1.05) !important;
  }
}

/* Respect reduced-motion and also help lower-power devices */
@media (prefers-reduced-motion: reduce) {
  
}

/* ====================== END STEP 239 PERFORMANCE + DARK DESKTOP GLASS + LABEL SIZE ====================== */

/* ====================== STEP 240 RESTORE WHITE LOGO IN DARK MODE ======================
   Dark mode should use the secondary white logo/mask in the app chrome.
============================================================================ */

.tcjc-app-brand-logo-white {
  display: none !important;
  opacity: 0 !important;
}

.tcjc-app-brand-logo-color {
  display: block !important;
  opacity: 1 !important;
}

html.tcjc-app-dark-active .tcjc-app-brand-logo-color,
body.tcjc-app-dark-active .tcjc-app-brand-logo-color,
body.tcjc-reader-dark-active .tcjc-app-brand-logo-color {
  display: none !important;
  opacity: 0 !important;
}

html.tcjc-app-dark-active .tcjc-app-brand-logo-white,
body.tcjc-app-dark-active .tcjc-app-brand-logo-white,
body.tcjc-reader-dark-active .tcjc-app-brand-logo-white {
  display: block !important;
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

/* ====================== END STEP 240 RESTORE WHITE LOGO IN DARK MODE ====================== */

/* ====================== STEP 241 DARK LOGO SIZE + LARGER BOTTOM NAV ======================
   Fixes the white dark-mode logo size and enlarges bottom nav icons/labels.
============================================================================ */

/* Keep the color and white logo exactly the same size */
.tcjc-app-brand {
  width: clamp(104px, 10vw, 148px) !important;
  min-width: clamp(104px, 10vw, 148px) !important;
  max-width: 148px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.tcjc-app-brand-logo-color,
.tcjc-app-brand-logo-white,
.tcjc-app-brand img {
  width: 100% !important;
  max-width: 148px !important;
  height: auto !important;
  max-height: 34px !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* The white logo is a masked block, so it needs explicit height */
.tcjc-app-brand-logo-white {
  width: 100% !important;
  height: 34px !important;
  max-height: 34px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

/* Larger bottom nav across desktop/tablet */
.tcjc-app-bottom-shell {
  min-height: 94px !important;
}

.tcjc-app-shell {
  --tcjc-bottom-nav-space: 102px !important;
}

.tcjc-bottom-nav-btn {
  min-height: 86px !important;
  padding: 0.12rem 0.08rem 0.2rem !important;
}



.tcjc-bottom-nav-label {
  display: block !important;
  font-size: 0.76rem !important;
  line-height: 1 !important;
  font-weight: 870 !important;
  letter-spacing: -0.025em !important;
  opacity: 0.84 !important;
  margin-top: 0.02rem !important;
}

/* Mobile: icons larger, labels still hidden */
@media (max-width: 760px) {
  .tcjc-app-brand {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 38px !important;
  }

  .tcjc-app-brand-logo-color,
  .tcjc-app-brand-logo-white,
  .tcjc-app-brand img {
    max-width: 92px !important;
    max-height: 28px !important;
  }

  .tcjc-app-brand-logo-white {
    height: 28px !important;
    max-height: 28px !important;
  }

  .tcjc-app-shell {
    --tcjc-bottom-nav-space: 86px !important;
  }

  .tcjc-app-bottom-shell {
    min-height: 80px !important;
    padding:
      0.22rem
      0.18rem
      max(0.44rem, env(safe-area-inset-bottom)) !important;
  }

  .tcjc-bottom-nav-btn {
    min-height: 70px !important;
    padding: 0.06rem 0.02rem !important;
  }

  

  .tcjc-bottom-nav-label {
    display: none !important;
  }
}

@media (max-width: 390px) {
  
}

/* ====================== END STEP 241 DARK LOGO SIZE + LARGER BOTTOM NAV ====================== */

/* ====================== STEP 243 FOOTER COPYRIGHT PADDING CLEANUP ======================
   Removes extra bottom spacing under the copyright line on home and reader.
============================================================================ */

.tcjc-app-footer,
.tcjc-reader-footer,
.tcjc-footer,
.tcjc-home-footer,
.tcjc-scripture-footer {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.tcjc-app-footer p:last-child,
.tcjc-reader-footer p:last-child,
.tcjc-footer p:last-child,
.tcjc-home-footer p:last-child,
.tcjc-scripture-footer p:last-child,
.tcjc-app-copyright,
.tcjc-reader-copyright,
.tcjc-copyright {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.tcjc-app-shell > footer:last-child,
.tcjc-reader-shell > footer:last-child,
.tcjc-scripture-reader > footer:last-child {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ====================== END STEP 243 FOOTER COPYRIGHT PADDING CLEANUP ====================== */


/* ====================== STEP 245 REAL FOOTER GAP FIX ======================
   The remaining blank space was coming from .tcjc-app-main bottom padding.
   Keep page content clear of the fixed nav, but do not put a large spacer after copyright.
============================================================================ */

.tcjc-app-main {
  padding-bottom: 0 !important;
}

.tcjc-homepage,
.tcjc-reader-shell {
  padding-bottom: clamp(1.2rem, 3vw, 2rem) !important;
}

.tcjc-app-footer,
.tcjc-reader-footer,
.tcjc-footer,
.tcjc-home-footer,
.tcjc-scripture-footer,
footer[class*="footer"] {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.tcjc-app-footer:last-child,
.tcjc-reader-footer:last-child,
.tcjc-footer:last-child,
.tcjc-home-footer:last-child,
.tcjc-scripture-footer:last-child,
footer[class*="footer"]:last-child {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.tcjc-app-footer p:last-child,
.tcjc-reader-footer p:last-child,
.tcjc-footer p:last-child,
.tcjc-home-footer p:last-child,
.tcjc-scripture-footer p:last-child,
footer[class*="footer"] p:last-child {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 760px) {
  .tcjc-homepage,
  .tcjc-reader-shell {
    padding-bottom: 1rem !important;
  }
}

/* ====================== END STEP 245 REAL FOOTER GAP FIX ====================== */

/* ====================== STEP 246 POPUP LINKS + SEARCH RESULT SCROLL FIX ======================
   - Popup action buttons inside Verse / Reading / Saved now remain clickable.
   - Search overlay scrolls internally instead of moving the page behind it.
============================================================================ */

/* Keep Verse / Reading / Saved popup cards above their overlay and fully interactive */
.tcjc-app-daily-card,
.tcjc-saved-scriptures-card,
.tcjc-app-verse-card {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

/* Search overlay should own wheel/touch scroll while open */
.tcjc-search-overlay {
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: none !important;
}

/* The popup itself can scroll if needed */
.tcjc-search-popover {
  max-height: min(78vh, 760px) !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: auto !important;
}

/* Results area scrolls inside the search popup */
.tcjc-search-popover .tcjc-search-results,
.tcjc-search-popover .tcjc-search-results-list,
.tcjc-search-popover .tcjc-search-result-list,
.tcjc-search-popover [class*="search-results"],
.tcjc-search-popover [class*="SearchResults"] {
  max-height: min(48vh, 430px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  padding-right: 0.25rem !important;
}

/* If the whole search panel is the scroll container in the current markup */
.tcjc-search-popover .tcjc-search-panel,
.tcjc-search-popover .tcjc-search-panel-clean {
  max-height: min(72vh, 700px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* Avoid the form/header area becoming the scroll target */
.tcjc-search-popover .tcjc-search-form {
  overflow: visible !important;
}

@media (max-width: 760px) {
  .tcjc-search-popover {
    max-height: min(78vh, 680px) !important;
  }

  .tcjc-search-popover .tcjc-search-results,
  .tcjc-search-popover .tcjc-search-results-list,
  .tcjc-search-popover .tcjc-search-result-list,
  .tcjc-search-popover [class*="search-results"],
  .tcjc-search-popover [class*="SearchResults"] {
    max-height: min(50vh, 390px) !important;
  }

  .tcjc-search-popover .tcjc-search-panel,
  .tcjc-search-popover .tcjc-search-panel-clean {
    max-height: min(72vh, 620px) !important;
  }
}

/* ====================== END STEP 246 POPUP LINKS + SEARCH RESULT SCROLL FIX ====================== */

/* ====================== STEP 247 READER-ONLY COPYRIGHT GAP FIX ======================
   Removes the large blank reader-only gap under the copyright line.
   Home page spacing is left alone.
============================================================================ */

.tcjc-reader-shell {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: auto !important;
}

.tcjc-reader-shell .tcjc-app-footer,
.tcjc-reader-shell .tcjc-reader-footer,
.tcjc-reader-shell footer,
.tcjc-scripture-reader .tcjc-app-footer,
.tcjc-scripture-reader .tcjc-reader-footer,
.tcjc-scripture-reader footer {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

.tcjc-reader-shell .tcjc-app-footer *,
.tcjc-reader-shell .tcjc-reader-footer *,
.tcjc-reader-shell footer *,
.tcjc-scripture-reader .tcjc-app-footer *,
.tcjc-scripture-reader .tcjc-reader-footer *,
.tcjc-scripture-reader footer * {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Reader content should end at the copyright, not carry another bottom spacer */
.tcjc-reader-shell .tcjc-reader-card,
.tcjc-reader-shell .tcjc-scripture-panel,
.tcjc-reader-shell .tcjc-reader-main,
.tcjc-reader-shell .tcjc-reader-content,
.tcjc-scripture-reader .tcjc-reader-main,
.tcjc-scripture-reader .tcjc-reader-content {
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem) !important;
}

/* If a generated spacer remains after the reader footer, collapse it */
.tcjc-reader-shell footer:last-child::after,
.tcjc-scripture-reader footer:last-child::after,
.tcjc-reader-shell .tcjc-app-footer:last-child::after,
.tcjc-reader-shell .tcjc-reader-footer:last-child::after {
  content: none !important;
  display: none !important;
}

/* ====================== END STEP 247 READER-ONLY COPYRIGHT GAP FIX ====================== */

/* ====================== STEP 248 READER GENERATED COPYRIGHT GAP FIX ======================
   Reader copyright is generated by .tcjc-reader-page::after.
   Remove the reader-page bottom spacer that appears after that generated copyright.
============================================================================ */

.tcjc-reader-page {
  padding-bottom: 0 !important;
}

.tcjc-reader-page::after {
  margin-top: clamp(1.1rem, 2vw, 1.6rem) !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.tcjc-reader-page .tcjc-reader-shell {
  padding-bottom: clamp(0.6rem, 1.5vw, 1rem) !important;
  margin-bottom: 0 !important;
}

@media (max-width: 760px) {
  .tcjc-reader-page {
    padding-bottom: 0 !important;
  }

  .tcjc-reader-page::after {
    margin-bottom: 0 !important;
  }

  .tcjc-reader-page .tcjc-reader-shell {
    padding-bottom: 0.65rem !important;
  }
}

/* ====================== END STEP 248 READER GENERATED COPYRIGHT GAP FIX ====================== */

/* ====================== STEP 249 READER COPYRIGHT BREATHING ROOM ======================
   Restores a small, clean space under the reader copyright without bringing back the huge gap.
============================================================================ */

.tcjc-reader-page {
  padding-bottom: 0 !important;
}

.tcjc-reader-page::after {
  display: block !important;
  margin-top: clamp(1.15rem, 2vw, 1.65rem) !important;
  margin-bottom: clamp(1.15rem, 2vw, 1.75rem) !important;
  padding-bottom: 0 !important;
  line-height: 1.35 !important;
}

@media (max-width: 760px) {
  .tcjc-reader-page::after {
    margin-bottom: 1.35rem !important;
  }
}

/* ====================== END STEP 249 READER COPYRIGHT BREATHING ROOM ====================== */

/* ====================== STEP 250 MOBILE SEARCH ROOM + BALANCED SEARCH ======================
   Gives the mobile search popup more breathing room.
   Search ranking balance is handled in ScriptureReader.tsx.
============================================================================ */

@media (max-width: 760px) {
  .tcjc-search-overlay {
    align-items: flex-start !important;
    padding:
      max(4.8rem, calc(env(safe-area-inset-top) + 4.4rem))
      0.62rem
      1rem !important;
  }

  .tcjc-search-popover {
    width: min(100%, calc(100vw - 0.9rem)) !important;
    max-width: calc(100vw - 0.9rem) !important;
    max-height: min(84vh, 720px) !important;
    padding: 1.28rem 0.9rem 1rem !important;
    border-radius: 22px !important;
  }

  .tcjc-search-popover-close {
    top: 0.64rem !important;
    right: 0.64rem !important;
    width: 2.18rem !important;
    height: 2.18rem !important;
  }

  .tcjc-search-popover .tcjc-search-form {
    padding-right: 0 !important;
  }

  .tcjc-search-popover .tcjc-search-form label {
    padding-right: 2.6rem !important;
    margin-bottom: 0.65rem !important;
  }

  .tcjc-search-popover .tcjc-search-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.62rem !important;
    width: 100% !important;
  }

  .tcjc-search-popover .tcjc-search-row input[type="search"] {
    width: 100% !important;
    min-height: 3.25rem !important;
    font-size: 1rem !important;
  }

  .tcjc-search-popover .tcjc-search-row button[type="submit"],
  .tcjc-search-popover .tcjc-search-clear {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 3rem !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
  }

  .tcjc-search-popover .tcjc-search-message {
    margin-top: 0.75rem !important;
  }

  .tcjc-search-popover .tcjc-search-results {
    margin-top: 0.8rem !important;
    max-height: min(48vh, 390px) !important;
  }
}

@media (max-width: 390px) {
  .tcjc-search-popover {
    padding-left: 0.78rem !important;
    padding-right: 0.78rem !important;
  }

  .tcjc-search-popover .tcjc-search-row input[type="search"] {
    font-size: 0.94rem !important;
  }
}

/* ====================== END STEP 250 MOBILE SEARCH ROOM + BALANCED SEARCH ====================== */

/* ====================== STEP 252 SEARCH HIDDEN OVAL LAYER FIX ======================
   Removes the older inner search-panel shape that was clipping the newer popup layout.
   The outer .tcjc-search-popover is now the only visible container.
============================================================================ */

.tcjc-search-popover {
  overflow: visible !important;
  contain: none !important;
}

.tcjc-search-popover .tcjc-search-panel,
.tcjc-search-popover .tcjc-search-panel-clean {
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  contain: none !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  padding: 0 !important;
  margin: 0 !important;
}

.tcjc-search-popover .tcjc-search-form {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  contain: none !important;
}

.tcjc-search-popover .tcjc-search-row {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  contain: none !important;
}

/* Only the results list should scroll. Nothing above it should clip. */
.tcjc-search-popover .tcjc-search-results {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  contain: content !important;
}

/* Keep the close button above all inner layers */
.tcjc-search-popover-close {
  z-index: 10 !important;
}

/* Desktop/tablet: give the form enough room so the button does not hit the edge */
@media (min-width: 761px) {
  .tcjc-search-popover {
    width: min(1180px, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem) !important;
    padding: 1.55rem 1.65rem 1.35rem !important;
  }

  .tcjc-search-popover .tcjc-search-row {
    grid-template-columns: minmax(0, 1fr) 150px !important;
    gap: 0.82rem !important;
  }

  .tcjc-search-popover .tcjc-search-row button[type="submit"] {
    min-width: 150px !important;
  }
}

/* Mobile: keep the one-column roomy layout, but remove all inner clipping */
@media (max-width: 760px) {
  .tcjc-search-popover {
    width: min(100%, calc(100vw - 0.7rem)) !important;
    max-width: calc(100vw - 0.7rem) !important;
    overflow: visible !important;
    padding: 1.22rem 0.86rem 1rem !important;
  }

  .tcjc-search-popover .tcjc-search-row {
    grid-template-columns: 1fr !important;
  }

  .tcjc-search-popover .tcjc-search-row input[type="search"],
  .tcjc-search-popover .tcjc-search-row button[type="submit"],
  .tcjc-search-popover .tcjc-search-clear {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ====================== END STEP 252 SEARCH HIDDEN OVAL LAYER FIX ====================== */


/* ====================== STEP 255 READER FRONT MATTER + SEARCH GLASS REPAIR ======================
   - Keeps front matter readable in dark mode.
   - Replaces brown search buttons with blue liquid glass.
   - Supports Book of Mormon front matter staying in Chapter only.
============================================================================ */

/* Dark mode intro/front-matter reading cards */
body.tcjc-app-dark-active .tcjc-scripture-panel .tcjc-chapter-intro,
body.tcjc-reader-dark-active .tcjc-scripture-panel .tcjc-chapter-intro,
.tcjc-reader-shell.tcjc-reader-theme-dark .tcjc-scripture-panel .tcjc-chapter-intro {
  color: #2f2318 !important;
  background:
    linear-gradient(135deg, rgba(255, 248, 231, 0.96), rgba(230, 212, 178, 0.88)) !important;
  border-color: rgba(255, 248, 220, 0.65) !important;
  text-shadow: none !important;
}

body.tcjc-app-dark-active .tcjc-scripture-panel .tcjc-chapter-intro p,
body.tcjc-reader-dark-active .tcjc-scripture-panel .tcjc-chapter-intro p,
.tcjc-reader-shell.tcjc-reader-theme-dark .tcjc-scripture-panel .tcjc-chapter-intro p {
  color: #2f2318 !important;
  text-shadow: none !important;
}

/* Search popup buttons: blue liquid glass instead of brown */
.tcjc-search-popover .tcjc-search-row button[type="submit"],
.tcjc-search-popover .tcjc-search-clear,
.tcjc-search-row button[type="submit"],
.tcjc-search-row .tcjc-search-clear {
  color: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(188, 229, 250, 0.72) !important;
  background:
    linear-gradient(135deg, rgba(151, 211, 239, 0.96), rgba(38, 139, 192, 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -18px 28px rgba(20, 92, 132, 0.22),
    0 16px 34px rgba(38, 139, 192, 0.25) !important;
  text-shadow: 0 1px 2px rgba(16, 47, 70, 0.45) !important;
}

.tcjc-search-popover .tcjc-search-row button[type="submit"]:hover:not(:disabled),
.tcjc-search-popover .tcjc-search-clear:hover,
.tcjc-search-row button[type="submit"]:hover:not(:disabled),
.tcjc-search-row .tcjc-search-clear:hover {
  background:
    linear-gradient(135deg, rgba(178, 226, 247, 0.98), rgba(55, 154, 204, 0.96)) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -18px 28px rgba(20, 92, 132, 0.18),
    0 20px 42px rgba(38, 139, 192, 0.31) !important;
}

.tcjc-search-popover .tcjc-search-row button[type="submit"]:disabled,
.tcjc-search-row button[type="submit"]:disabled {
  opacity: 0.74 !important;
  transform: none !important;
}

/* Keep the small X inside the search input blue, not brown */
.tcjc-search-popover .tcjc-search-inline-clear,
.tcjc-search-inline-clear {
  color: rgba(127, 196, 232, 0.95) !important;
}

/* ====================== END STEP 255 READER FRONT MATTER + SEARCH GLASS REPAIR ====================== */


/* ====================== STEP 256 CHAT STYLE SCRIPTURE SEARCH ======================
   First PWA pass toward the website widget experience, while keeping offline local search.
============================================================================ */

.tcjc-search-popover-chat {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 30px !important;
}

.tcjc-search-chat-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: min(780px, calc(100vh - 5rem)) !important;
  max-height: min(780px, calc(100vh - 5rem)) !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

.tcjc-search-chat-header {
  flex: 0 0 auto;
  padding: 1.35rem 1.55rem 1.15rem;
  border-bottom: 1px solid rgba(88, 162, 198, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 255, 0.94)),
    radial-gradient(circle at 88% 18%, rgba(95, 159, 194, 0.09), transparent 28%);
}

.tcjc-search-kicker {
  margin: 0 0 0.45rem;
  color: #2f7ca8;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tcjc-search-chat-header h2 {
  margin: 0;
  color: #04192b;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 0.98;
  font-weight: 950;
  letter-spacing: -0.045em;
}

.tcjc-search-chat-header p:last-child {
  max-width: 46rem;
  margin: 0.65rem 0 0;
  color: rgba(7, 29, 49, 0.68);
  font-size: 1rem;
  line-height: 1.38;
  font-weight: 700;
}

.tcjc-search-chat-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 1.2rem 1.45rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}

.tcjc-search-welcome {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(88, 162, 198, 0.22);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.tcjc-search-welcome > span {
  display: block;
  margin-bottom: 0.65rem;
  color: rgba(7, 29, 49, 0.62);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tcjc-search-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.tcjc-search-topic {
  min-height: 2.45rem;
  padding: 0.55rem 0.82rem;
  border: 1px solid rgba(20, 127, 183, 0.24);
  border-radius: 16px;
  color: #0b4f77;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(226, 249, 255, 0.82));
  box-shadow: 0 8px 22px rgba(10, 72, 110, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font: 900 0.9rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
}

.tcjc-search-user-message {
  align-self: flex-end;
  width: fit-content;
  max-width: min(92%, 620px);
  padding: 0.82rem 1.05rem;
  border: 1px solid rgba(88, 162, 198, 0.24);
  border-radius: 24px 24px 7px 24px;
  color: #08243a;
  background: linear-gradient(135deg, rgba(236, 251, 255, 0.98), rgba(255, 255, 255, 0.95));
  box-shadow: 0 14px 36px rgba(11, 70, 111, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
}

.tcjc-search-answer-message,
.tcjc-search-answer-card {
  border: 1px solid rgba(88, 162, 198, 0.30);
  border-radius: 28px 28px 28px 9px;
  color: #081e31;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.996), rgba(248, 253, 255, 0.96)),
    radial-gradient(circle at 12% 6%, rgba(95, 159, 194, 0.055), transparent 24%);
  box-shadow: 0 18px 46px rgba(12, 78, 122, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.tcjc-search-answer-message {
  padding: 1rem 1.15rem;
}

.tcjc-search-answer-message p {
  margin: 0;
  color: #0b2437;
  font-size: 1rem;
  line-height: 1.58;
  font-weight: 700;
}

.tcjc-search-answer-error {
  border-color: rgba(190, 74, 74, 0.34) !important;
  background: rgba(255, 248, 248, 0.94) !important;
}

.tcjc-search-answer-card {
  padding: 1.1rem 1.15rem 1.2rem;
}

.tcjc-search-answer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.tcjc-search-answer-meta span {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.82rem;
  border: 1px solid rgba(19, 128, 183, 0.24);
  border-radius: 999px;
  color: #10486d;
  background: rgba(235, 250, 255, 0.88);
  font-size: 0.82rem;
  font-weight: 950;
}

.tcjc-search-answer-card h3 {
  margin: 0 0 0.75rem;
  color: #0a3d5f;
  font-size: 1.15rem;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.tcjc-search-results-best,
.tcjc-search-results-related {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.78rem !important;
  max-height: none !important;
  overflow: visible !important;
}

.tcjc-search-related-passages {
  margin-top: 1rem;
  border: 1px solid rgba(88, 162, 198, 0.24);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.62);
  overflow: hidden;
}

.tcjc-search-related-passages summary {
  min-height: 3.15rem;
  display: flex;
  align-items: center;
  padding: 0.85rem 1rem;
  color: #0b3d5b;
  font-weight: 950;
  cursor: pointer;
}

.tcjc-search-related-passages .tcjc-search-results {
  padding: 0 1rem 1rem;
}

.tcjc-search-result {
  border-radius: 18px !important;
  border-color: rgba(88, 162, 198, 0.24) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.tcjc-search-research-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(20, 127, 183, 0.14);
}

.tcjc-search-research-row button {
  min-height: 3.25rem;
  padding: 0 1.4rem;
  border: 1px solid rgba(178, 219, 238, 0.78);
  border-radius: 16px;
  color: #f8fdff;
  background: linear-gradient(145deg, #91c3dc, #5e9fc2 52%, #357ea8);
  box-shadow:
    0 12px 24px rgba(47, 124, 168, 0.20),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -10px 18px rgba(23, 82, 118, 0.16);
  font-weight: 950;
  opacity: 0.68;
}

.tcjc-search-research-row span {
  color: rgba(7, 29, 49, 0.64);
  font-size: 0.9rem;
  line-height: 1.35;
  font-weight: 850;
}

.tcjc-search-chat-form {
  flex: 0 0 auto;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(88, 162, 198, 0.20);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.985), rgba(246, 252, 255, 0.96));
  box-shadow: 0 -10px 18px rgba(12, 78, 122, 0.035);
}

body.tcjc-app-dark-active .tcjc-search-popover-chat,
body.tcjc-reader-dark-active .tcjc-search-popover-chat {
  background:
    linear-gradient(135deg, rgba(13, 31, 47, 0.98), rgba(5, 18, 30, 0.96)) !important;
}

body.tcjc-app-dark-active .tcjc-search-chat-header,
body.tcjc-reader-dark-active .tcjc-search-chat-header,
body.tcjc-app-dark-active .tcjc-search-chat-form,
body.tcjc-reader-dark-active .tcjc-search-chat-form {
  background:
    linear-gradient(135deg, rgba(18, 43, 62, 0.96), rgba(7, 25, 40, 0.94)) !important;
  border-color: rgba(140, 207, 238, 0.18) !important;
}

body.tcjc-app-dark-active .tcjc-search-chat-header h2,
body.tcjc-reader-dark-active .tcjc-search-chat-header h2 {
  color: #f7fdff !important;
}

body.tcjc-app-dark-active .tcjc-search-chat-header p:last-child,
body.tcjc-reader-dark-active .tcjc-search-chat-header p:last-child,
body.tcjc-app-dark-active .tcjc-search-research-row span,
body.tcjc-reader-dark-active .tcjc-search-research-row span {
  color: rgba(232, 246, 255, 0.72) !important;
}

@media (max-width: 760px) {
  .tcjc-search-popover-chat {
    width: min(100%, calc(100vw - 0.7rem)) !important;
    max-width: calc(100vw - 0.7rem) !important;
  }

  .tcjc-search-chat-panel {
    min-height: min(720px, calc(100dvh - 2.2rem)) !important;
    max-height: min(720px, calc(100dvh - 2.2rem)) !important;
  }

  .tcjc-search-chat-header {
    padding: 1.1rem 0.95rem 0.95rem;
  }

  .tcjc-search-chat-body {
    padding: 1rem 0.9rem;
  }

  .tcjc-search-chat-form {
    padding: 0.9rem 0.85rem calc(0.9rem + env(safe-area-inset-bottom));
  }

  .tcjc-search-research-row {
    align-items: stretch;
    flex-direction: column;
    gap: 0.65rem;
  }

  .tcjc-search-research-row button {
    width: 100%;
  }
}

/* ====================== END STEP 256 CHAT STYLE SCRIPTURE SEARCH ====================== */


/* ====================== STEP 257 SEARCH CHAT CONTRAST + LOCAL ONLY ======================
   Removes AI/research affordance, fixes washed-out dark text, and makes accordions clear.
============================================================================ */

/* No AI/research row in local-only search */
.tcjc-search-research-row {
  display: none !important;
}

/* Make the chat body less transparent so text stays readable over the reader */
.tcjc-search-popover-chat {
  background:
    linear-gradient(135deg, rgba(248, 253, 255, 0.985), rgba(255, 255, 255, 0.97)) !important;
}

.tcjc-search-chat-body {
  background:
    linear-gradient(135deg, rgba(248, 253, 255, 0.76), rgba(255, 255, 255, 0.64)) !important;
}

/* Strong readable colors in light mode */
.tcjc-search-answer-message p,
.tcjc-search-answer-card,
.tcjc-search-answer-card h3,
.tcjc-search-result span,
.tcjc-search-result small,
.tcjc-search-result em,
.tcjc-search-related-passages summary {
  color: #092235 !important;
  text-shadow: none !important;
}

.tcjc-search-answer-card h3 {
  color: #073b5d !important;
}

.tcjc-search-result small {
  color: rgba(8, 45, 70, 0.68) !important;
}

.tcjc-search-result em {
  color: rgba(8, 31, 48, 0.86) !important;
}

/* Related passages accordion: visible, closed by default, with a clear glass button */
.tcjc-search-related-passages {
  background:
    linear-gradient(135deg, rgba(240, 251, 255, 0.95), rgba(255, 255, 255, 0.9)) !important;
  border: 1px solid rgba(73, 157, 200, 0.34) !important;
  box-shadow:
    0 10px 28px rgba(11, 70, 111, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.tcjc-search-related-passages summary {
  position: relative;
  list-style: none;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(224, 248, 255, 0.88)) !important;
  border-bottom: 1px solid rgba(73, 157, 200, 0.18);
}

.tcjc-search-related-passages summary::-webkit-details-marker {
  display: none;
}

.tcjc-search-related-passages summary::after {
  content: "+";
  margin-left: auto;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(20, 127, 183, 0.28);
  border-radius: 14px;
  color: #124764;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
}

.tcjc-search-related-passages[open] summary::after {
  content: "–";
}

/* Dark mode: use dark glass panels with bright, readable text */
body.tcjc-app-dark-active .tcjc-search-popover-chat,
body.tcjc-reader-dark-active .tcjc-search-popover-chat {
  background:
    linear-gradient(135deg, rgba(10, 27, 41, 0.995), rgba(4, 14, 24, 0.985)) !important;
}

body.tcjc-app-dark-active .tcjc-search-chat-body,
body.tcjc-reader-dark-active .tcjc-search-chat-body {
  background:
    linear-gradient(135deg, rgba(8, 24, 38, 0.92), rgba(5, 16, 28, 0.88)) !important;
}

body.tcjc-app-dark-active .tcjc-search-answer-message,
body.tcjc-reader-dark-active .tcjc-search-answer-message,
body.tcjc-app-dark-active .tcjc-search-answer-card,
body.tcjc-reader-dark-active .tcjc-search-answer-card {
  background:
    linear-gradient(135deg, rgba(20, 48, 68, 0.98), rgba(9, 27, 43, 0.96)) !important;
  border-color: rgba(143, 211, 244, 0.28) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

body.tcjc-app-dark-active .tcjc-search-answer-message p,
body.tcjc-reader-dark-active .tcjc-search-answer-message p,
body.tcjc-app-dark-active .tcjc-search-answer-card,
body.tcjc-reader-dark-active .tcjc-search-answer-card,
body.tcjc-app-dark-active .tcjc-search-answer-card h3,
body.tcjc-reader-dark-active .tcjc-search-answer-card h3,
body.tcjc-app-dark-active .tcjc-search-result span,
body.tcjc-reader-dark-active .tcjc-search-result span,
body.tcjc-app-dark-active .tcjc-search-related-passages summary,
body.tcjc-reader-dark-active .tcjc-search-related-passages summary {
  color: #f4fbff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34) !important;
}

body.tcjc-app-dark-active .tcjc-search-result,
body.tcjc-reader-dark-active .tcjc-search-result {
  background:
    linear-gradient(135deg, rgba(19, 45, 64, 0.96), rgba(9, 27, 43, 0.94)) !important;
  border-color: rgba(143, 211, 244, 0.24) !important;
}

body.tcjc-app-dark-active .tcjc-search-result small,
body.tcjc-reader-dark-active .tcjc-search-result small {
  color: rgba(202, 235, 250, 0.76) !important;
}

body.tcjc-app-dark-active .tcjc-search-result em,
body.tcjc-reader-dark-active .tcjc-search-result em {
  color: rgba(244, 251, 255, 0.86) !important;
}

body.tcjc-app-dark-active .tcjc-search-related-passages,
body.tcjc-reader-dark-active .tcjc-search-related-passages {
  background:
    linear-gradient(135deg, rgba(17, 43, 62, 0.96), rgba(8, 25, 40, 0.94)) !important;
  border-color: rgba(143, 211, 244, 0.26) !important;
}

body.tcjc-app-dark-active .tcjc-search-related-passages summary,
body.tcjc-reader-dark-active .tcjc-search-related-passages summary {
  background:
    linear-gradient(135deg, rgba(25, 58, 80, 0.96), rgba(12, 35, 54, 0.94)) !important;
  border-color: rgba(143, 211, 244, 0.18) !important;
}

body.tcjc-app-dark-active .tcjc-search-related-passages summary::after,
body.tcjc-reader-dark-active .tcjc-search-related-passages summary::after {
  color: #f4fbff !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(143, 211, 244, 0.28) !important;
}

/* Keep search form readable in dark mode */
body.tcjc-app-dark-active .tcjc-search-chat-form label,
body.tcjc-reader-dark-active .tcjc-search-chat-form label {
  color: #d7f0ff !important;
}

body.tcjc-app-dark-active .tcjc-search-chat-form input,
body.tcjc-reader-dark-active .tcjc-search-chat-form input {
  color: #fff8e8 !important;
  background: rgba(2, 12, 20, 0.84) !important;
  border-color: rgba(143, 211, 244, 0.36) !important;
}

/* ====================== END STEP 257 SEARCH CHAT CONTRAST + LOCAL ONLY ====================== */


/* ====================== STEP 258 SEARCH MODAL SCROLL LOCK + CLOSED ACCORDIONS ======================
   Makes search act like a true modal, keeps page/nav bars from showing through,
   and puts first results into a closed accordion too.
============================================================================ */

html.tcjc-search-modal-open,
body.tcjc-search-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* Search overlay must sit above the app header and bottom icon bar */
.tcjc-search-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: grid !important;
  place-items: center !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left)) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
  background: rgba(2, 8, 14, 0.56) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
}

/* Popover should fit inside the viewport, not under the footer nav */
.tcjc-search-popover-chat {
  position: relative !important;
  width: min(1180px, calc(100vw - 1rem)) !important;
  max-width: calc(100vw - 1rem) !important;
  height: min(820px, calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: auto !important;
}

/* Only the inner chat body scrolls */
.tcjc-search-chat-panel {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.tcjc-search-chat-body {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Search form remains inside modal, above mobile safe area */
.tcjc-search-chat-form {
  position: relative !important;
  z-index: 2 !important;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
}

/* Both result groups use the same closed accordion treatment */
.tcjc-search-best-passages {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

.tcjc-search-best-passages[open],
.tcjc-search-related-passages[open] {
  background:
    linear-gradient(135deg, rgba(240, 251, 255, 0.98), rgba(255, 255, 255, 0.94)) !important;
}

.tcjc-search-best-passages .tcjc-search-results,
.tcjc-search-related-passages .tcjc-search-results {
  padding: 0 1rem 1rem !important;
}

/* Prevent old result containers from creating nested scrollbars */
.tcjc-search-answer-card .tcjc-search-results {
  max-height: none !important;
  overflow: visible !important;
}

/* Remove old h3 spacing now that accordions provide the labels */
.tcjc-search-answer-card h3 {
  display: none !important;
}

body.tcjc-app-dark-active .tcjc-search-overlay,
body.tcjc-reader-dark-active .tcjc-search-overlay {
  background: rgba(0, 4, 8, 0.72) !important;
}

body.tcjc-app-dark-active .tcjc-search-best-passages[open],
body.tcjc-reader-dark-active .tcjc-search-best-passages[open],
body.tcjc-app-dark-active .tcjc-search-related-passages[open],
body.tcjc-reader-dark-active .tcjc-search-related-passages[open] {
  background:
    linear-gradient(135deg, rgba(17, 43, 62, 0.98), rgba(8, 25, 40, 0.96)) !important;
}

@media (max-width: 760px) {
  .tcjc-search-overlay {
    align-items: stretch !important;
    justify-items: stretch !important;
    padding: max(0.35rem, env(safe-area-inset-top)) max(0.35rem, env(safe-area-inset-right)) max(0.35rem, env(safe-area-inset-bottom)) max(0.35rem, env(safe-area-inset-left)) !important;
  }

  .tcjc-search-popover-chat {
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - 0.7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 0.7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 24px !important;
  }

  .tcjc-search-chat-header {
    padding: 1rem 0.95rem 0.85rem !important;
  }

  .tcjc-search-chat-header h2 {
    font-size: clamp(1.9rem, 9vw, 2.65rem) !important;
  }

  .tcjc-search-chat-body {
    padding: 0.9rem 0.85rem !important;
  }

  .tcjc-search-chat-form {
    padding: 0.85rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom)) !important;
  }
}

/* ====================== END STEP 258 SEARCH MODAL SCROLL LOCK + CLOSED ACCORDIONS ====================== */


/* ====================== STEP 259 SEARCH EMPTY STATE + DARK CONTRAST ======================
   Makes the search panel compact before searching and repairs washed-out dark-mode text.
============================================================================ */

/* Compact, intentional empty state */
.tcjc-search-popover-empty {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

.tcjc-search-popover-empty .tcjc-search-chat-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

.tcjc-search-popover-empty .tcjc-search-chat-body {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding-top: 1.15rem !important;
  padding-bottom: 1.15rem !important;
  overflow: visible !important;
}

.tcjc-search-popover-empty .tcjc-search-welcome {
  margin: 0 !important;
}

/* Stronger suggested-search card in light mode */
.tcjc-search-welcome {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 251, 255, 0.90)) !important;
  border-color: rgba(88, 162, 198, 0.30) !important;
}

.tcjc-search-welcome > span {
  color: rgba(5, 36, 58, 0.72) !important;
  text-shadow: none !important;
}

.tcjc-search-topic {
  color: #073b5d !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(226, 249, 255, 0.88)) !important;
  border-color: rgba(73, 157, 200, 0.35) !important;
  text-shadow: none !important;
}

/* Dark mode: remove pale washed-out text and cards */
body.tcjc-app-dark-active .tcjc-search-welcome,
body.tcjc-reader-dark-active .tcjc-search-welcome {
  background:
    linear-gradient(135deg, rgba(20, 48, 68, 0.96), rgba(9, 27, 43, 0.94)) !important;
  border-color: rgba(143, 211, 244, 0.28) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

body.tcjc-app-dark-active .tcjc-search-kicker,
body.tcjc-reader-dark-active .tcjc-search-kicker {
  color: #bfeaff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

body.tcjc-app-dark-active .tcjc-search-welcome > span,
body.tcjc-reader-dark-active .tcjc-search-welcome > span {
  color: #dff5ff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

body.tcjc-app-dark-active .tcjc-search-topic,
body.tcjc-reader-dark-active .tcjc-search-topic {
  color: #f4fbff !important;
  background:
    linear-gradient(135deg, rgba(33, 75, 102, 0.96), rgba(18, 49, 72, 0.94)) !important;
  border-color: rgba(143, 211, 244, 0.34) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

body.tcjc-app-dark-active .tcjc-search-topic:hover,
body.tcjc-reader-dark-active .tcjc-search-topic:hover,
body.tcjc-app-dark-active .tcjc-search-topic:focus-visible,
body.tcjc-reader-dark-active .tcjc-search-topic:focus-visible {
  background:
    linear-gradient(135deg, rgba(45, 92, 122, 0.98), rgba(24, 62, 90, 0.96)) !important;
  border-color: rgba(183, 230, 250, 0.50) !important;
}

body.tcjc-app-dark-active .tcjc-search-chat-form,
body.tcjc-reader-dark-active .tcjc-search-chat-form {
  background:
    linear-gradient(135deg, rgba(13, 34, 51, 0.98), rgba(6, 20, 32, 0.96)) !important;
}

body.tcjc-app-dark-active .tcjc-search-chat-form input::placeholder,
body.tcjc-reader-dark-active .tcjc-search-chat-form input::placeholder {
  color: rgba(244, 251, 255, 0.64) !important;
}

/* Mobile empty state should fit without page/footer interference */
@media (max-width: 760px) {
  .tcjc-search-popover-empty {
    height: auto !important;
    max-height: calc(100dvh - 0.7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  .tcjc-search-popover-empty .tcjc-search-chat-panel {
    height: auto !important;
    max-height: calc(100dvh - 0.7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  .tcjc-search-popover-empty .tcjc-search-chat-body {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
}

/* ====================== END STEP 259 SEARCH EMPTY STATE + DARK CONTRAST ====================== */


/* ====================== STEP 260A SEARCH COPY CLEANUP ======================
   Hides the visible form label while keeping it available for accessibility.
============================================================================ */

.tcjc-search-label-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ====================== END STEP 260A SEARCH COPY CLEANUP ====================== */


/* ====================== STEP 260 SEARCH EMPTY GAP REMOVAL ======================
   Forces the search modal to shrink-wrap before the first search.
============================================================================ */

.tcjc-search-popover-empty,
.tcjc-search-popover-empty.tcjc-search-popover-chat {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

.tcjc-search-popover-empty .tcjc-search-chat-panel,
.tcjc-search-popover-empty .tcjc-search-panel,
.tcjc-search-popover-empty .tcjc-search-panel-clean {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
}

.tcjc-search-popover-empty .tcjc-search-chat-header,
.tcjc-search-popover-empty .tcjc-search-chat-body,
.tcjc-search-popover-empty .tcjc-search-chat-form {
  flex: none !important;
}

.tcjc-search-popover-empty .tcjc-search-chat-body {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 1.05rem 1.45rem 1.05rem !important;
  overflow: visible !important;
}

.tcjc-search-popover-empty .tcjc-search-welcome {
  margin: 0 !important;
}

.tcjc-search-popover-empty .tcjc-search-chat-form {
  margin: 0 !important;
}

/* Keep the compact state comfortable on mobile */
@media (max-width: 760px) {
  .tcjc-search-popover-empty,
  .tcjc-search-popover-empty.tcjc-search-popover-chat {
    height: auto !important;
    max-height: calc(100dvh - 0.7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  .tcjc-search-popover-empty .tcjc-search-chat-panel,
  .tcjc-search-popover-empty .tcjc-search-panel,
  .tcjc-search-popover-empty .tcjc-search-panel-clean {
    height: auto !important;
    max-height: calc(100dvh - 0.7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  .tcjc-search-popover-empty .tcjc-search-chat-body {
    padding: 0.85rem 0.85rem !important;
  }
}

/* ====================== END STEP 260 SEARCH EMPTY GAP REMOVAL ====================== */


/* ====================== STEP 261 TRUE COMPACT SEARCH START + DARK USER BUBBLE ======================
   Gives the pre-search widget its own compact layout and fixes the user question bubble in dark mode.
============================================================================ */

/* Hard reset the before-search layout so old full-height modal rules cannot stretch it */
.tcjc-search-popover-empty.tcjc-search-popover-chat {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.tcjc-search-chat-panel-empty {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}

.tcjc-search-chat-panel-empty .tcjc-search-chat-header,
.tcjc-search-chat-panel-empty .tcjc-search-chat-body,
.tcjc-search-chat-panel-empty .tcjc-search-chat-form {
  display: block !important;
  position: relative !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.tcjc-search-chat-panel-empty .tcjc-search-chat-body {
  padding: 0.95rem 1.35rem 1rem !important;
}

.tcjc-search-chat-panel-empty .tcjc-search-welcome {
  margin: 0 !important;
}

.tcjc-search-chat-panel-empty .tcjc-search-chat-form {
  margin: 0 !important;
  padding-top: 1rem !important;
}

/* In the compact state, make sure nothing invisible is reserving vertical space */
.tcjc-search-chat-panel-empty .tcjc-search-answer-message,
.tcjc-search-chat-panel-empty .tcjc-search-answer-card,
.tcjc-search-chat-panel-empty .tcjc-search-user-message {
  display: none !important;
}

/* User question bubble */
.tcjc-search-user-message {
  color: #07324d !important;
  background:
    linear-gradient(135deg, rgba(231, 249, 255, 0.98), rgba(199, 235, 250, 0.92)) !important;
  border-color: rgba(73, 157, 200, 0.32) !important;
  text-shadow: none !important;
}

body.tcjc-app-dark-active .tcjc-search-user-message,
body.tcjc-reader-dark-active .tcjc-search-user-message {
  color: #f7fcff !important;
  background:
    linear-gradient(135deg, rgba(34, 92, 125, 0.98), rgba(18, 55, 82, 0.96)) !important;
  border-color: rgba(183, 230, 250, 0.38) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

/* Mobile compact state */
@media (max-width: 760px) {
  .tcjc-search-popover-empty.tcjc-search-popover-chat {
    height: auto !important;
    max-height: calc(100dvh - 0.7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  .tcjc-search-chat-panel-empty {
    height: auto !important;
    max-height: calc(100dvh - 0.7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  .tcjc-search-chat-panel-empty .tcjc-search-chat-header {
    padding-bottom: 0.8rem !important;
  }

  .tcjc-search-chat-panel-empty .tcjc-search-chat-body {
    padding: 0.75rem 0.85rem 0.85rem !important;
  }

  .tcjc-search-chat-panel-empty .tcjc-search-chat-form {
    padding-top: 0.85rem !important;
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)) !important;
  }
}

/* ====================== END STEP 261 TRUE COMPACT SEARCH START + DARK USER BUBBLE ====================== */


/* ====================== STEP 262 MOBILE SEARCH SHRINK + DARK POPUP/NAV REPAIR ======================
   Fixes mobile empty search height, restores daily popup dark cards, and restores dark bottom icons.
============================================================================ */

/* MOBILE: empty search should not stretch to full modal height */
@media (max-width: 760px) {
  .tcjc-search-overlay-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left)) !important;
  }

  .tcjc-search-overlay-empty .tcjc-search-popover-empty,
  .tcjc-search-overlay-empty .tcjc-search-popover-empty.tcjc-search-popover-chat {
    align-self: center !important;
    width: min(100%, 34rem) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 auto !important;
  }

  .tcjc-search-overlay-empty .tcjc-search-chat-panel-empty {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  .tcjc-search-overlay-empty .tcjc-search-chat-panel-empty .tcjc-search-chat-header,
  .tcjc-search-overlay-empty .tcjc-search-chat-panel-empty .tcjc-search-chat-body,
  .tcjc-search-overlay-empty .tcjc-search-chat-panel-empty .tcjc-search-chat-form {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
  }
}

/* Restore Daily Verse / Daily Inspiration popup cards in dark mode */
body.tcjc-app-dark-active .tcjc-app-daily-card,
body.tcjc-reader-dark-active .tcjc-app-daily-card {
  color: #f7fcff !important;
  background:
    linear-gradient(135deg, rgba(16, 39, 58, 0.98), rgba(6, 19, 31, 0.96)) !important;
  border-color: rgba(143, 211, 244, 0.26) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

body.tcjc-app-dark-active .tcjc-app-daily-card *,
body.tcjc-reader-dark-active .tcjc-app-daily-card * {
  color: inherit;
}

body.tcjc-app-dark-active .tcjc-app-daily-card h2,
body.tcjc-app-dark-active .tcjc-app-daily-card h3,
body.tcjc-app-dark-active .tcjc-app-daily-card strong,
body.tcjc-reader-dark-active .tcjc-app-daily-card h2,
body.tcjc-reader-dark-active .tcjc-app-daily-card h3,
body.tcjc-reader-dark-active .tcjc-app-daily-card strong {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38) !important;
}

body.tcjc-app-dark-active .tcjc-app-daily-card p,
body.tcjc-app-dark-active .tcjc-app-daily-card li,
body.tcjc-app-dark-active .tcjc-app-daily-card span,
body.tcjc-reader-dark-active .tcjc-app-daily-card p,
body.tcjc-reader-dark-active .tcjc-app-daily-card li,
body.tcjc-reader-dark-active .tcjc-app-daily-card span {
  color: rgba(238, 249, 255, 0.90) !important;
  text-shadow: none !important;
}

body.tcjc-app-dark-active .tcjc-app-daily-card small,
body.tcjc-reader-dark-active .tcjc-app-daily-card small {
  color: rgba(198, 232, 248, 0.76) !important;
}

/* Restore dark-mode bottom icon bar and icons */
body.tcjc-app-dark-active .tcjc-app-bottom-shell,
body.tcjc-reader-dark-active .tcjc-app-bottom-shell,
body.tcjc-app-dark-active .tcjc-app-bottom-nav,
body.tcjc-reader-dark-active .tcjc-app-bottom-nav {
  color: #f4fbff !important;
  background:
    linear-gradient(135deg, rgba(9, 27, 43, 0.94), rgba(3, 12, 22, 0.90)) !important;
  border-color: rgba(143, 211, 244, 0.20) !important;
  box-shadow:
    0 -18px 48px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.tcjc-app-dark-active .tcjc-app-bottom-shell button,
body.tcjc-reader-dark-active .tcjc-app-bottom-shell button,
body.tcjc-app-dark-active .tcjc-app-bottom-nav button,
body.tcjc-reader-dark-active .tcjc-app-bottom-nav button {
  color: rgba(231, 247, 255, 0.86) !important;
  background: transparent !important;
  border-color: transparent !important;
}

body.tcjc-app-dark-active .tcjc-app-bottom-shell button svg,
body.tcjc-reader-dark-active .tcjc-app-bottom-shell button svg,
body.tcjc-app-dark-active .tcjc-app-bottom-nav button svg,
body.tcjc-reader-dark-active .tcjc-app-bottom-nav button svg {
  color: rgba(231, 247, 255, 0.92) !important;
  fill: none !important;
  stroke: currentColor !important;
}

body.tcjc-app-dark-active .tcjc-app-bottom-shell button[aria-current="page"],
body.tcjc-reader-dark-active .tcjc-app-bottom-shell button[aria-current="page"],
body.tcjc-app-dark-active .tcjc-app-bottom-nav button[aria-current="page"],
body.tcjc-reader-dark-active .tcjc-app-bottom-nav button[aria-current="page"],
body.tcjc-app-dark-active .tcjc-app-bottom-shell button.tcjc-active,
body.tcjc-reader-dark-active .tcjc-app-bottom-shell button.tcjc-active,
body.tcjc-app-dark-active .tcjc-app-bottom-nav button.tcjc-active,
body.tcjc-reader-dark-active .tcjc-app-bottom-nav button.tcjc-active {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, rgba(42, 98, 130, 0.72), rgba(18, 55, 82, 0.62)) !important;
  border-color: rgba(183, 230, 250, 0.30) !important;
}

/* ====================== END STEP 262 MOBILE SEARCH SHRINK + DARK POPUP/NAV REPAIR ====================== */


/* ====================== STEP 263 MOBILE SEARCH FORM RIGHT PADDING ======================
   Gives the search bar and button breathing room inside the mobile search card.
============================================================================ */

@media (max-width: 760px) {
  .tcjc-search-popover-chat .tcjc-search-chat-form {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .tcjc-search-popover-chat .tcjc-search-row {
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 0.55rem !important;
  }

  .tcjc-search-popover-chat .tcjc-search-row input {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .tcjc-search-popover-chat .tcjc-search-row button[type="submit"] {
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 430px) {
  .tcjc-search-popover-chat .tcjc-search-chat-form {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }

  .tcjc-search-popover-chat .tcjc-search-row {
    gap: 0.45rem !important;
  }
}

/* ====================== END STEP 263 MOBILE SEARCH FORM RIGHT PADDING ====================== */








/* ====================== STEP 265 SCRIPTURE RESULTS BADGE DARK MODE REPAIR ======================
   Makes the small Scripture Results badge medium blue with readable white text in dark mode.
============================================================================ */

body.tcjc-app-dark-active .tcjc-search-answer-meta span,
body.tcjc-reader-dark-active .tcjc-search-answer-meta span {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, rgba(38, 139, 192, 0.98), rgba(21, 92, 142, 0.96)) !important;
  border: 1px solid rgba(183, 230, 250, 0.42) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38) !important;
}

/* ====================== END STEP 265 SCRIPTURE RESULTS BADGE DARK MODE REPAIR ====================== */


/* ====================== STEP 267 FIRST VERSE MOBILE ACTION MENU REPAIR ======================
   Replaces the failed Step 264/266 attempts. The first verse opens downward on mobile
   before scrolling, with enough room for the full Save/Search/Cancel bubble.
============================================================================ */

@media (max-width: 768px) {
  .tcjc-verse:first-child.tcjc-verse-menu-open,
  .tcjc-verse:first-of-type.tcjc-verse-menu-open {
    margin-bottom: 12.5rem !important;
  }

  .tcjc-verse:first-child .tcjc-verse-action-menu-below,
  .tcjc-verse:first-of-type .tcjc-verse-action-menu-below {
    top: calc(100% + 12px) !important;
    bottom: auto !important;
    transform: none !important;
  }

  .tcjc-verse:first-child .tcjc-verse-action-menu-below::before,
  .tcjc-verse:first-of-type .tcjc-verse-action-menu-below::before {
    top: -7px !important;
    bottom: auto !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: inherit !important;
    border-top: inherit !important;
  }
}

/* ====================== END STEP 267 FIRST VERSE MOBILE ACTION MENU REPAIR ====================== */


/* ====================== STEP 269 SEARCH WIDGET POLISH + ACCORDION CONTROL ======================
   Mobile title spacing, cleaner accordion icons, grey Clear button, smaller mobile buttons.
============================================================================ */

/* More breathing room around Scripture Library title, especially mobile */
.tcjc-search-chat-header {
  padding-top: clamp(1.35rem, 3vw, 2rem) !important;
  padding-bottom: clamp(1rem, 2.4vw, 1.45rem) !important;
}

.tcjc-search-chat-header h2 {
  line-height: 1.03 !important;
  margin-top: 0.15rem !important;
  margin-bottom: 0.55rem !important;
}

/* Cleaner accordion plus/minus controls */
.tcjc-search-related-passages summary::after {
  width: 1.85rem !important;
  height: 1.85rem !important;
  border-radius: 999px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  content: "+" !important;
  color: #145174 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(227, 247, 255, 0.82)) !important;
  border: 1px solid rgba(72, 152, 194, 0.26) !important;
  box-shadow:
    0 5px 14px rgba(11, 70, 111, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

.tcjc-search-related-passages[open] summary::after {
  content: "–" !important;
  font-size: 1.15rem !important;
  padding-bottom: 0.08rem !important;
}

/* Clear button should be grey glass, not blue */
.tcjc-search-popover .tcjc-search-clear,
.tcjc-search-row .tcjc-search-clear,
.tcjc-search-chat-form .tcjc-search-clear {
  color: #253542 !important;
  border: 1px solid rgba(120, 138, 150, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(217, 226, 232, 0.84)) !important;
  box-shadow:
    0 10px 24px rgba(29, 47, 61, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  text-shadow: none !important;
}

.tcjc-search-popover .tcjc-search-clear:hover,
.tcjc-search-row .tcjc-search-clear:hover,
.tcjc-search-chat-form .tcjc-search-clear:hover,
.tcjc-search-popover .tcjc-search-clear:focus-visible,
.tcjc-search-row .tcjc-search-clear:focus-visible,
.tcjc-search-chat-form .tcjc-search-clear:focus-visible {
  color: #172734 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(199, 211, 220, 0.90)) !important;
  border-color: rgba(101, 122, 137, 0.44) !important;
}

body.tcjc-app-dark-active .tcjc-search-popover .tcjc-search-clear,
body.tcjc-reader-dark-active .tcjc-search-popover .tcjc-search-clear,
body.tcjc-app-dark-active .tcjc-search-row .tcjc-search-clear,
body.tcjc-reader-dark-active .tcjc-search-row .tcjc-search-clear,
body.tcjc-app-dark-active .tcjc-search-chat-form .tcjc-search-clear,
body.tcjc-reader-dark-active .tcjc-search-chat-form .tcjc-search-clear {
  color: #f3f8fb !important;
  border-color: rgba(185, 204, 216, 0.28) !important;
  background:
    linear-gradient(135deg, rgba(93, 111, 124, 0.86), rgba(50, 66, 78, 0.82)) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Dark mode accordion icon */
body.tcjc-app-dark-active .tcjc-search-related-passages summary::after,
body.tcjc-reader-dark-active .tcjc-search-related-passages summary::after {
  color: #f8fcff !important;
  background:
    linear-gradient(135deg, rgba(42, 88, 116, 0.92), rgba(20, 52, 76, 0.88)) !important;
  border-color: rgba(183, 230, 250, 0.28) !important;
  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Smaller Search/Clear buttons on mobile */
@media (max-width: 760px) {
  .tcjc-search-chat-header {
    padding: 1.35rem 1.05rem 0.95rem !important;
  }

  .tcjc-search-chat-header h2 {
    font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
    margin-bottom: 0.45rem !important;
  }

  .tcjc-search-chat-header p {
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
  }

  .tcjc-search-popover-chat .tcjc-search-row button[type="submit"],
  .tcjc-search-popover-chat .tcjc-search-clear {
    min-height: 2.55rem !important;
    padding: 0.55rem 0.72rem !important;
    border-radius: 14px !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.01em !important;
  }

  .tcjc-search-popover-chat .tcjc-search-row input[type="search"] {
    min-height: 2.55rem !important;
    font-size: 0.92rem !important;
  }
}


/* Mobile only: keep the small pre-title line from overpowering the main title. */
@media (max-width: 760px) {
  .tcjc-search-chat-header .tcjc-search-kicker {
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.115em !important;
    margin-bottom: 0.38rem !important;
  }
}

/* ====================== END STEP 269 SEARCH WIDGET POLISH + ACCORDION CONTROL ====================== */











/* ====================== STEP 275 WIDE LEFT HERO STACK + HOME SEARCH RESTORE ======================
   Hero cards are a wide left-side stack on desktop, tablet, and mobile.
   They intentionally pull left through the hero padding so only a slim image edge remains.
   The old three feature cards stay hidden.
============================================================================ */

.tcjc-home-dashboard {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(0.75rem, 1.2vw, 1.1rem) !important;
  justify-content: start !important;
  align-content: center !important;

  width: min(60rem, 56vw, calc(100vw - 18px)) !important;
  max-width: none !important;

  /* Pull left through parent padding while leaving only a very slim image edge. */
  margin-left: max(-3.25rem, calc(8px - clamp(1.25rem, 3.6vw, 4.25rem))) !important;
  margin-right: auto !important;
}

.tcjc-home-intro-card,
.tcjc-today-grid,
.tcjc-today-stack,
.tcjc-today-card {
  width: 100% !important;
  max-width: none !important;
}

.tcjc-today-grid,
.tcjc-today-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(0.75rem, 1.2vw, 1.1rem) !important;
}

.tcjc-home-intro-card {
  padding: clamp(1.05rem, 1.55vw, 1.65rem) !important;
}

.tcjc-home-intro-card h1 {
  font-size: clamp(2rem, 3vw, 3.45rem) !important;
  line-height: 1.02 !important;
}

.tcjc-home-lead {
  max-width: 64rem !important;
  font-size: clamp(0.98rem, 1.05vw, 1.1rem) !important;
  line-height: 1.46 !important;
}

.tcjc-today-card {
  min-height: auto !important;
  padding: clamp(0.95rem, 1.25vw, 1.22rem) !important;
}

.tcjc-today-card h2 {
  font-size: clamp(1.08rem, 1.32vw, 1.38rem) !important;
  line-height: 1.18 !important;
}

.tcjc-today-card p,
.tcjc-daily-home-quote {
  font-size: clamp(0.9rem, 0.95vw, 1rem) !important;
  line-height: 1.42 !important;
}

/* These old hero sub-cards were physically removed from App.tsx, but keep this as a guard. */
.tcjc-home-feature-list,
.tcjc-home-feature {
  display: none !important;
}

/* Tablets and iPads: nearly full width, about 10–15px of image showing on each side. */
@media (max-width: 1180px) and (min-width: 761px) {
  .tcjc-home-dashboard {
    width: calc(100vw - 24px) !important;
    margin-left: max(-2.75rem, calc(12px - clamp(1.1rem, 3.2vw, 3.25rem))) !important;
    margin-right: auto !important;
  }
}

/* Phones: full width with a small, safe image edge on both sides. */
@media (max-width: 760px) {
  .tcjc-home-dashboard {
    width: calc(100vw - 24px) !important;
    margin-left: max(-1.5rem, calc(12px - clamp(0.85rem, 4vw, 1.75rem))) !important;
    margin-right: auto !important;
  }
}

/* Very small phones: keep the card from touching the screen edge. */
@media (max-width: 390px) {
  .tcjc-home-dashboard {
    width: calc(100vw - 28px) !important;
    margin-left: max(-1.25rem, calc(14px - clamp(0.85rem, 4vw, 1.5rem))) !important;
  }
}

/* ====================== END STEP 275 WIDE LEFT HERO STACK + HOME SEARCH RESTORE ====================== */


/* ====================== STEP 276 HOME FINAL CARD DARK MODE REPAIR ======================
   Restores dark glass styling for the final home page website-links card in dark mode.
============================================================================ */

body.tcjc-app-dark-active .tcjc-home-website-links-card,
body.tcjc-reader-dark-active .tcjc-home-website-links-card {
  color: #f7fcff !important;
  background:
    linear-gradient(135deg, rgba(16, 39, 58, 0.98), rgba(6, 19, 31, 0.96)) !important;
  border-color: rgba(143, 211, 244, 0.26) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

body.tcjc-app-dark-active .tcjc-home-website-links-card h2,
body.tcjc-reader-dark-active .tcjc-home-website-links-card h2 {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38) !important;
}

body.tcjc-app-dark-active .tcjc-home-website-links-card p,
body.tcjc-app-dark-active .tcjc-home-website-links-card .tcjc-eyebrow,
body.tcjc-reader-dark-active .tcjc-home-website-links-card p,
body.tcjc-reader-dark-active .tcjc-home-website-links-card .tcjc-eyebrow {
  color: rgba(238, 249, 255, 0.90) !important;
  text-shadow: none !important;
}

body.tcjc-app-dark-active .tcjc-home-website-button.secondary,
body.tcjc-reader-dark-active .tcjc-home-website-button.secondary {
  color: #f4fbff !important;
  background:
    linear-gradient(135deg, rgba(42, 88, 116, 0.68), rgba(20, 52, 76, 0.58)) !important;
  border-color: rgba(183, 230, 250, 0.28) !important;
}

body.tcjc-app-dark-active .tcjc-home-website-button.primary,
body.tcjc-reader-dark-active .tcjc-home-website-button.primary {
  color: #ffffff !important;
}

/* ====================== END STEP 276 HOME FINAL CARD DARK MODE REPAIR ====================== */


/* ====================== STEP 277 HOME SEARCH TO READER TRANSITION ======================
   Masks the brief Home → Reader handoff when the desktop search bar opens
   the reader-mounted Scripture Library widget.
============================================================================ */

body.tcjc-home-search-transitioning::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99990;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.74), transparent 34%),
    linear-gradient(135deg, rgba(236, 247, 252, 0.94), rgba(210, 230, 241, 0.90));
  animation: tcjc-home-search-transition-soften 420ms ease both;
}

body.tcjc-app-dark-active.tcjc-home-search-transitioning::before,
body.tcjc-reader-dark-active.tcjc-home-search-transitioning::before {
  background:
    radial-gradient(circle at 28% 22%, rgba(148, 184, 205, 0.24), transparent 36%),
    linear-gradient(135deg, rgba(10, 26, 38, 0.94), rgba(4, 13, 22, 0.92));
}

@keyframes tcjc-home-search-transition-soften {
  0% {
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0.98;
  }
}

/* ====================== END STEP 277 HOME SEARCH TO READER TRANSITION ====================== */

/* ====================== STEP 278 MOBILE SEARCH MODAL STABILITY REPAIR ======================
   Keeps iPhone search from zooming/shrinking the app after close, gives the
   search modal a stable full-width mobile layout, and reduces nested padding.
============================================================================ */

@media (max-width: 760px) {
  html.tcjc-search-modal-open,
  body.tcjc-search-modal-open,
  body.tcjc-search-open {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .tcjc-search-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding:
      max(env(safe-area-inset-top), 0.65rem)
      0.65rem
      max(env(safe-area-inset-bottom), 0.65rem) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .tcjc-search-popover,
  .tcjc-search-popover-chat {
    width: min(100%, calc(100vw - 1.3rem)) !important;
    max-width: calc(100vw - 1.3rem) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - max(env(safe-area-inset-top), 0.65rem) - max(env(safe-area-inset-bottom), 0.65rem)) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .tcjc-search-panel,
  .tcjc-search-panel-clean,
  .tcjc-search-chat-panel {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: inherit !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: inherit !important;
  }

  .tcjc-search-chat-header {
    flex: 0 0 auto !important;
    padding: 0.9rem 0.95rem 0.65rem !important;
  }

  .tcjc-search-chat-header h2 {
    font-size: clamp(1.8rem, 8.6vw, 2.35rem) !important;
    line-height: 0.98 !important;
    margin: 0 0 0.42rem !important;
  }

  .tcjc-search-chat-header p {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  .tcjc-search-chat-body {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.72rem 0.68rem 0.85rem !important;
    gap: 0.68rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tcjc-search-welcome,
  .tcjc-search-answer-message,
  .tcjc-search-answer-card,
  .tcjc-search-related-passages,
  .tcjc-search-results,
  .tcjc-search-result {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .tcjc-search-user-message {
    max-width: calc(100% - 0.25rem) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0.68rem 0.82rem !important;
    overflow-wrap: anywhere !important;
  }

  .tcjc-search-answer-message {
    padding: 0.82rem 0.88rem !important;
    border-radius: 21px !important;
  }

  .tcjc-search-answer-message p {
    font-size: 0.96rem !important;
    line-height: 1.42 !important;
  }

  .tcjc-search-answer-card {
    padding: 0.65rem !important;
    border-radius: 21px !important;
  }

  .tcjc-search-answer-meta {
    margin-bottom: 0.62rem !important;
  }

  .tcjc-search-answer-meta span {
    max-width: 100% !important;
    padding: 0.42rem 0.68rem !important;
    font-size: 0.78rem !important;
    white-space: normal !important;
  }

  .tcjc-search-related-passages {
    margin: 0.58rem 0 0 !important;
    border-radius: 19px !important;
  }

  .tcjc-search-related-passages summary {
    min-width: 0 !important;
    padding: 0.75rem 2.95rem 0.75rem 0.82rem !important;
    font-size: 0.98rem !important;
    line-height: 1.18 !important;
    border-radius: 19px !important;
  }

  .tcjc-search-related-passages summary::after {
    right: 0.68rem !important;
    width: 1.72rem !important;
    height: 1.72rem !important;
    font-size: 1rem !important;
  }

  .tcjc-search-results {
    padding: 0.55rem 0.42rem 0.68rem !important;
  }

  .tcjc-search-result {
    padding: 0.72rem 0.75rem !important;
    border-radius: 16px !important;
  }

  .tcjc-search-result strong,
  .tcjc-search-result span,
  .tcjc-search-result small,
  .tcjc-search-result em,
  .tcjc-search-result p {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .tcjc-search-chat-form {
    position: relative !important;
    flex: 0 0 auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0.68rem 0.72rem max(env(safe-area-inset-bottom), 0.72rem) !important;
    box-sizing: border-box !important;
  }

  .tcjc-search-popover-chat .tcjc-search-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .tcjc-search-popover-chat .tcjc-search-row input[type="search"],
  .tcjc-search-chat-form input[type="search"],
  #tcjc-scripture-search {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 2.85rem !important;
    padding: 0.78rem 0.92rem !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tcjc-search-popover-chat .tcjc-search-row button[type="submit"],
  .tcjc-search-popover-chat .tcjc-search-clear {
    width: 100% !important;
    min-height: 2.72rem !important;
    padding: 0.62rem 0.8rem !important;
    font-size: 0.9rem !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 390px) {
  .tcjc-search-overlay {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .tcjc-search-popover,
  .tcjc-search-popover-chat {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    border-radius: 22px !important;
  }

  .tcjc-search-chat-body {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }

  .tcjc-search-answer-card {
    padding: 0.58rem !important;
  }
}

/* ====================== END STEP 278 MOBILE SEARCH MODAL STABILITY REPAIR ====================== */

/* Sacred Calendar context on Daily Verse and Daily Reading popups */
.tcjc-app-sacred-date {
  margin: 5px 0 12px;
  color: #467b94;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .055em;
  line-height: 1.35;
  text-transform: uppercase;
}

html.tcjc-app-dark-active .tcjc-app-sacred-date {
  color: #9fcce0;
}

/* SACRED DAILY POPUP CONTEXT */
.tcjc-app-sacred-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 24px;
  align-items: center;
  margin: 10px 0 20px;
  padding: 16px 18px;
  border: 1px solid rgba(91, 154, 184, .24);
  border-radius: 16px;
  background: rgba(236, 247, 251, .64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 10px 28px rgba(44, 83, 101, .08);
  -webkit-backdrop-filter: blur(16px) saturate(1.16);
  backdrop-filter: blur(16px) saturate(1.16);
}

.tcjc-app-sacred-context-date {
  min-width: 0;
}

.tcjc-app-sacred-context-date small,
.tcjc-app-sacred-context-date strong,
.tcjc-app-sacred-context-date span {
  display: block;
}

.tcjc-app-sacred-context-date small {
  margin-bottom: 5px;
  color: #347b9d;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
}

.tcjc-app-sacred-context-date strong {
  color: #294754;
  font-size: clamp(1rem, 2vw, 1.24rem);
  font-weight: 830;
  line-height: 1.25;
}

.tcjc-app-sacred-context-date span {
  margin-top: 4px;
  color: #6b8089;
  font-size: .78rem;
  font-weight: 680;
}

.tcjc-app-sacred-context-moon {
  display: flex;
  min-width: max-content;
  align-items: center;
  gap: 10px;
}

.tcjc-app-sacred-context-moon > div strong,
.tcjc-app-sacred-context-moon > div small {
  display: block;
}

.tcjc-app-sacred-context-moon > div strong {
  color: #304c59;
  font-size: .78rem;
}

.tcjc-app-sacred-context-moon > div small {
  margin-top: 2px;
  color: #788b93;
  font-size: .68rem;
}

.tcjc-app-sacred-context-moon-icon {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  color: #b89535;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  font-variant-emoji: text;
  line-height: 1;
}

.tcjc-app-sacred-context-moon-icon[data-phase="New Moon"],
.tcjc-app-sacred-context-moon-icon[data-phase="Full Moon"] {
  box-sizing: border-box;
  border-radius: 50%;
  font-size: 0;
}

.tcjc-app-sacred-context-moon-icon[data-phase="New Moon"] {
  border: 2px solid currentColor;
  background: transparent;
}

.tcjc-app-sacred-context-moon-icon[data-phase="Full Moon"] {
  border: 2px solid currentColor;
  background: currentColor;
}

.tcjc-app-sacred-context-observances {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 11px;
  border-top: 1px solid rgba(77, 130, 155, .14);
}

.tcjc-app-sacred-context-observances span {
  padding: 6px 9px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(145deg, #69abc9, #397d9d);
  font-size: .68rem;
  font-weight: 820;
  line-height: 1.2;
}

html.tcjc-app-dark-active .tcjc-app-sacred-context,
body.tcjc-app-dark-active .tcjc-app-sacred-context,
body.tcjc-reader-dark-active .tcjc-app-sacred-context {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(31, 40, 44, .66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 12px 30px rgba(0, 0, 0, .22);
}

html.tcjc-app-dark-active
  .tcjc-app-sacred-context-date strong,
html.tcjc-app-dark-active
  .tcjc-app-sacred-context-moon strong,
body.tcjc-app-dark-active
  .tcjc-app-sacred-context-date strong,
body.tcjc-app-dark-active
  .tcjc-app-sacred-context-moon strong,
body.tcjc-reader-dark-active
  .tcjc-app-sacred-context-date strong,
body.tcjc-reader-dark-active
  .tcjc-app-sacred-context-moon strong {
  color: #f3efe6;
}

html.tcjc-app-dark-active
  .tcjc-app-sacred-context-date span,
html.tcjc-app-dark-active
  .tcjc-app-sacred-context-moon small,
body.tcjc-app-dark-active
  .tcjc-app-sacred-context-date span,
body.tcjc-app-dark-active
  .tcjc-app-sacred-context-moon small,
body.tcjc-reader-dark-active
  .tcjc-app-sacred-context-date span,
body.tcjc-reader-dark-active
  .tcjc-app-sacred-context-moon small {
  color: #bcc9cd;
}

@media (max-width: 620px) {
  .tcjc-app-sacred-context {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .tcjc-app-sacred-context-moon {
    min-width: 0;
  }
}







/* FINAL CONTAINED MOBILE READING POPUP START */

/*
 * Reading overlay always sits above the fixed app header and
 * bottom navigation. The page remains softly visible beneath it.
 */
.tcjc-app-daily-overlay.tcjc-app-reading-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100dvh !important;

  overflow: hidden !important;

  padding:
    max(18px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left)) !important;

  background-color: rgba(22, 39, 49, .36) !important;
  background-image: none !important;

  -webkit-backdrop-filter: blur(4px) saturate(.94);
  backdrop-filter: blur(4px) saturate(.94);
}

.tcjc-app-reading-overlay::before,
.tcjc-app-reading-overlay::after {
  display: none !important;
  content: none !important;
}

/*
 * Shared card dimensions for light and dark modes.
 * Only colors change between themes.
 */
.tcjc-app-reading-card {
  position: relative !important;
  inset: auto !important;

  display: block !important;

  width: min(720px, 100%) !important;
  max-width: 720px !important;
  height: auto !important;
  max-height: calc(100dvh - 36px) !important;

  margin: 0 !important;
  padding: 28px 30px 26px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  border: 1px solid rgba(104, 153, 176, .28) !important;
  border-radius: 27px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .98),
      rgba(246, 244, 238, .97)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 24px 64px rgba(24, 46, 59, .26) !important;

  color: #183748 !important;

  opacity: 1 !important;
  filter: none !important;
  transform: none !important;

  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.tcjc-app-reading-card::before,
.tcjc-app-reading-card::after {
  display: none !important;
  content: none !important;
}

/*
 * Close control remains reachable while card content scrolls.
 */
.tcjc-app-reading-card > .tcjc-app-daily-close {
  position: sticky !important;
  z-index: 8 !important;
  top: 0 !important;
  float: right;

  width: 42px !important;
  height: 42px !important;

  margin:
    -14px
    -14px
    -28px
    12px !important;

  border-radius: 50% !important;

  background: rgba(255, 255, 255, .76) !important;
  box-shadow:
    0 5px 16px rgba(36, 63, 76, .12) !important;

  color: #405c69 !important;
}

/* Reading eyebrow */
.tcjc-app-reading-card > .tcjc-eyebrow {
  margin:
    2px
    52px
    12px
    0 !important;
}

/* Compact Reading title */
.tcjc-app-reading-card > h2 {
  max-width: 100% !important;

  margin: 16px 0 12px !important;

  color: #183748 !important;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size: clamp(1.5rem, 3vw, 2.15rem) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  line-height: 1.08 !important;

  text-align: left !important;
  text-transform: none !important;
  text-wrap: balance;
  white-space: normal !important;
}

/* Compact Sacred Calendar panel */
.tcjc-app-reading-card .tcjc-app-sacred-context {
  grid-template-columns: minmax(0, 1fr) auto !important;

  gap: 10px 16px !important;

  margin: 6px 0 15px !important;
  padding: 13px 15px !important;

  border: 1px solid rgba(86, 158, 191, .28) !important;
  border-radius: 15px !important;

  background: rgba(235, 247, 252, .78) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 9px 24px rgba(47, 92, 112, .07) !important;
}

.tcjc-app-reading-card
  .tcjc-app-sacred-context-date
  small {
  font-size: .62rem !important;
}

.tcjc-app-reading-card
  .tcjc-app-sacred-context-date
  strong {
  color: #294754 !important;

  font-size: 1.04rem !important;
  line-height: 1.22 !important;
}

.tcjc-app-reading-card
  .tcjc-app-sacred-context-date
  span {
  color: #6b8089 !important;

  font-size: .73rem !important;
}

.tcjc-app-reading-card
  .tcjc-app-sacred-context-moon {
  gap: 8px !important;
}

.tcjc-app-reading-card
  .tcjc-app-sacred-context-moon-icon {
  width: 1.65rem !important;
  height: 1.65rem !important;
  flex-basis: 1.65rem !important;

  font-size: 1.55rem !important;
}

.tcjc-app-reading-card
  .tcjc-app-sacred-context-moon
  strong {
  color: #304c59 !important;

  font-size: .73rem !important;
}

.tcjc-app-reading-card
  .tcjc-app-sacred-context-moon
  small {
  color: #788b93 !important;

  font-size: .64rem !important;
}

/* Compact reading content */
.tcjc-app-reading-card
  .tcjc-app-daily-reference {
  margin: 0 0 9px !important;

  color: #294754 !important;

  font-size: .91rem !important;
  line-height: 1.32 !important;
}

.tcjc-app-reading-card
  .tcjc-app-daily-description {
  max-width: 660px;

  margin: 8px 0 0 !important;

  color: #536b76 !important;

  font-size: .98rem !important;
  line-height: 1.48 !important;
}

/*
 * Action buttons remain within the card.
 * Sticky positioning keeps them reachable after scrolling.
 */
.tcjc-app-reading-card
  .tcjc-app-daily-actions {
  position: sticky !important;
  z-index: 7 !important;
  bottom: -26px !important;

  display: flex !important;
  flex-wrap: wrap !important;

  gap: 10px !important;

  margin:
    20px
    -30px
    -26px !important;

  padding:
    14px
    30px
    calc(16px + env(safe-area-inset-bottom)) !important;

  border-top: 1px solid rgba(90, 137, 158, .14);

  background:
    linear-gradient(
      180deg,
      rgba(248, 247, 243, .92),
      rgba(248, 247, 243, .99) 35%
    ) !important;

  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.tcjc-app-reading-card
  .tcjc-app-daily-primary,
.tcjc-app-reading-card
  .tcjc-app-daily-secondary {
  min-height: 44px !important;

  padding: 9px 18px !important;

  font-size: .92rem !important;
}

/* Actual dark mode only */
html.tcjc-app-dark-active body
  .tcjc-app-reading-card,
body.tcjc-app-dark-active
  .tcjc-app-reading-card,
body.tcjc-reader-dark-active
  .tcjc-app-reading-card {
  border-color: rgba(119, 176, 203, .34) !important;

  background:
    linear-gradient(
      145deg,
      rgba(8, 35, 54, .99),
      rgba(5, 25, 40, .99)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 26px 70px rgba(0, 0, 0, .42) !important;

  color: #f4f0e7 !important;
}

html.tcjc-app-dark-active body
  .tcjc-app-reading-card
  > .tcjc-app-daily-close,
body.tcjc-app-dark-active
  .tcjc-app-reading-card
  > .tcjc-app-daily-close,
body.tcjc-reader-dark-active
  .tcjc-app-reading-card
  > .tcjc-app-daily-close {
  color: #f4f0e7 !important;
  background: rgba(255, 255, 255, .11) !important;
}

html.tcjc-app-dark-active body
  .tcjc-app-reading-card > h2,
body.tcjc-app-dark-active
  .tcjc-app-reading-card > h2,
body.tcjc-reader-dark-active
  .tcjc-app-reading-card > h2 {
  color: #d7effb !important;
}

html.tcjc-app-dark-active body
  .tcjc-app-reading-card
  .tcjc-app-daily-reference,
html.tcjc-app-dark-active body
  .tcjc-app-reading-card
  .tcjc-app-daily-description,
body.tcjc-app-dark-active
  .tcjc-app-reading-card
  .tcjc-app-daily-reference,
body.tcjc-app-dark-active
  .tcjc-app-reading-card
  .tcjc-app-daily-description,
body.tcjc-reader-dark-active
  .tcjc-app-reading-card
  .tcjc-app-daily-reference,
body.tcjc-reader-dark-active
  .tcjc-app-reading-card
  .tcjc-app-daily-description {
  color: #f1eadb !important;
}

html.tcjc-app-dark-active body
  .tcjc-app-reading-card
  .tcjc-app-sacred-context,
body.tcjc-app-dark-active
  .tcjc-app-reading-card
  .tcjc-app-sacred-context,
body.tcjc-reader-dark-active
  .tcjc-app-reading-card
  .tcjc-app-sacred-context {
  border-color: rgba(255, 255, 255, .16) !important;

  background: rgba(31, 45, 53, .78) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 10px 26px rgba(0, 0, 0, .18) !important;
}

html.tcjc-app-dark-active body
  .tcjc-app-reading-card
  .tcjc-app-daily-actions,
body.tcjc-app-dark-active
  .tcjc-app-reading-card
  .tcjc-app-daily-actions,
body.tcjc-reader-dark-active
  .tcjc-app-reading-card
  .tcjc-app-daily-actions {
  border-top-color: rgba(255, 255, 255, .1);

  background:
    linear-gradient(
      180deg,
      rgba(6, 28, 44, .9),
      rgba(6, 28, 44, .99) 35%
    ) !important;
}

/* Phone layout */
@media (max-width: 760px) {
  .tcjc-app-daily-overlay.tcjc-app-reading-overlay {
    align-items: center !important;

    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left)) !important;
  }

  .tcjc-app-reading-card {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    max-height:
      calc(
        100dvh
        - max(20px, env(safe-area-inset-top))
        - max(20px, env(safe-area-inset-bottom))
      ) !important;

    padding: 20px 18px 0 !important;

    border-radius: 24px !important;
  }

  .tcjc-app-reading-card
    > .tcjc-app-daily-close {
    width: 38px !important;
    height: 38px !important;

    margin:
      -10px
      -8px
      -25px
      10px !important;
  }

  .tcjc-app-reading-card
    > .tcjc-eyebrow {
    margin:
      1px
      44px
      10px
      0 !important;

    font-size: .67rem !important;
  }

  .tcjc-app-reading-card
    .tcjc-app-sacred-context {
    grid-template-columns: 1fr !important;

    gap: 9px !important;

    margin-bottom: 13px !important;
    padding: 12px 13px !important;
  }

  .tcjc-app-reading-card
    .tcjc-app-sacred-context-moon {
    min-width: 0 !important;
  }

  .tcjc-app-reading-card > h2 {
    margin: 14px 0 9px !important;

    font-size: clamp(1.35rem, 6.4vw, 1.8rem) !important;
    line-height: 1.07 !important;
  }

  .tcjc-app-reading-card
    .tcjc-app-daily-reference {
    font-size: .86rem !important;
  }

  .tcjc-app-reading-card
    .tcjc-app-daily-description {
    font-size: .89rem !important;
    line-height: 1.4 !important;
  }

  .tcjc-app-reading-card
    .tcjc-app-daily-actions {
    bottom: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    margin:
      17px
      -18px
      0 !important;

    padding:
      12px
      18px
      calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .tcjc-app-reading-card
    .tcjc-app-daily-primary,
  .tcjc-app-reading-card
    .tcjc-app-daily-secondary {
    width: 100% !important;
    min-height: 44px !important;

    padding: 9px 10px !important;
  }
}

@media (max-width: 390px) {
  .tcjc-app-reading-card {
    padding-inline: 16px !important;
  }

  .tcjc-app-reading-card
    .tcjc-app-daily-actions {
    grid-template-columns: 1fr !important;

    margin-inline: -16px !important;
    padding-inline: 16px !important;
  }
}

/* FINAL CONTAINED MOBILE READING POPUP END */

/* source: src/styles/home-true-church.css */
/* ========================================================================== 
   TRUE CHURCH HOME
   Branded scripture home using the existing offline Jesus Christ artwork.
   This stylesheet is isolated from the Scripture Reader.
   ========================================================================== */

body.tcjc-true-home-active {
  --tcjc-true-blue: #94b8cd;
  --tcjc-true-blue-strong: #4f9fc8;
  --tcjc-true-blue-deep: #2f7aa7;
  --tcjc-true-navy: #24344d;
  --tcjc-true-ink: #303030;
  --tcjc-true-gold: #d2b36a;
  --tcjc-true-cream: #f7f5f2;
  --tcjc-true-cream-deep: #eee9e1;
  --tcjc-true-border: rgba(148, 184, 205, 0.28);
  --tcjc-true-shadow: rgba(36, 52, 77, 0.14);
  background: var(--tcjc-true-cream) !important;
}

.tcjc-true-home,
.tcjc-true-home * {
  box-sizing: border-box;
}

body.tcjc-true-home-active .tcjc-true-home.tcjc-app-content {
  min-height: 100svh;
  padding-top: calc(var(--tcjc-fixed-header-space, 78px) + 8px) !important;
  padding-bottom: calc(var(--tcjc-bottom-nav-space, 86px) + 18px) !important;
  color: var(--tcjc-true-ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(148, 184, 205, 0.18), transparent 30rem),
    linear-gradient(180deg, #fbfaf8 0%, var(--tcjc-true-cream) 48%, var(--tcjc-true-cream-deep) 100%) !important;
}

/* ------------------------------- Hero ----------------------------------- */

.tcjc-true-home-hero {
  position: relative;
  width: calc(100vw - 16px);
  min-height: min(760px, calc(100svh - var(--tcjc-fixed-header-space, 78px) - 20px));
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(24px, 5vw, 78px);
  border-radius: 34px;
  overflow: hidden;
  isolation: isolate;
  background: #5d5244;
  box-shadow: 0 22px 58px rgba(36,52,77,.16);
}

.tcjc-true-home-hero-media,
.tcjc-true-home-hero-media img,
.tcjc-true-home-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tcjc-true-home-hero-media img {
  display: block;
  object-fit: cover;
  object-position: center;
  animation: tcjcTrueHeroBreathe 28s ease-in-out infinite alternate;
}

.tcjc-true-home-hero-shade {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(22, 28, 31, .48) 0%, rgba(22, 28, 31, .24) 42%, rgba(22, 28, 31, .04) 72%),
    linear-gradient(180deg, rgba(20, 26, 30, .03), rgba(20, 26, 30, .24));
}

.tcjc-true-home-hero-card {
  position: relative;
  z-index: 2;
  width: min(735px, 58vw);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 30px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.10) 50%, rgba(255,255,255,.22));
  box-shadow:
    0 24px 58px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.84),
    inset 0 -1px 0 rgba(148,184,205,.16);
  backdrop-filter: blur(15px) saturate(1.24);
  -webkit-backdrop-filter: blur(15px) saturate(1.24);
  animation: tcjcTrueHomeRise 520ms 90ms cubic-bezier(.2, .8, .2, 1) both;
}

.tcjc-true-home-hero-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.52), transparent 28%, rgba(255,255,255,.09) 66%, transparent);
  opacity: .6;
}

.tcjc-true-home-hero-card > * {
  position: relative;
  z-index: 1;
}

.tcjc-true-home-eyebrow {
  margin: 0 0 16px;
  color: #bce8fb;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(8,20,31,.66), 0 0 16px rgba(79,159,200,.24);
}

.tcjc-true-home-eyebrow span {
  margin: 0 .28rem;
  color: #d9bc74;
}

.tcjc-true-home-hero-card h1 {
  margin: 0;
  max-width: 700px;
  color: rgba(255,255,255,.98);
  font-size: clamp(2.45rem, 4.8vw, 5rem);
  font-weight: 820;
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
  text-shadow: 0 3px 5px rgba(7,18,29,.44), 0 14px 32px rgba(7,18,29,.30);
}

.tcjc-true-home-lead {
  max-width: 650px;
  margin: 20px 0 0;
  color: rgba(255,255,255,.92);
  font-size: clamp(1rem, 1.55vw, 1.18rem);
  font-weight: 620;
  line-height: 1.62;
  text-shadow: 0 1px 3px rgba(7,18,29,.52), 0 8px 22px rgba(7,18,29,.22);
}

.tcjc-true-home-quote {
  margin: 24px 0;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

.tcjc-true-home-quote p {
  margin: 0;
  color: rgba(255,255,255,.95);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  font-style: italic;
  line-height: 1.58;
  text-shadow: 0 1px 3px rgba(7,18,29,.50);
}

.tcjc-true-home-quote cite {
  display: block;
  margin-top: 10px;
  color: #bce8fb;
  font-size: .77rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.tcjc-true-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tcjc-true-home-button,
.tcjc-true-home-card-action {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border-radius: 14px;
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.1;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tcjc-true-home-button .tcjc-app-nav-icon,
.tcjc-true-home-card-action .tcjc-app-nav-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.tcjc-true-home-button.primary {
  border: 1px solid rgba(255,255,255,.52);
  color: #fff;
  background: linear-gradient(135deg, rgba(111,177,215,.96), rgba(53,121,163,.96));
  box-shadow: 0 12px 28px rgba(36,82,112,.24), inset 0 1px 0 rgba(255,255,255,.32);
  text-shadow: 0 1px 2px rgba(12,28,44,.42);
}

.tcjc-true-home-button.secondary {
  border: 1px solid rgba(255,255,255,.62);
  color: #fff;
  background: rgba(255,255,255,.14);
  box-shadow: 0 10px 24px rgba(8,24,42,.16), inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow: 0 1px 2px rgba(8,28,45,.48);
}

.tcjc-true-home-button:hover,
.tcjc-true-home-button:focus-visible,
.tcjc-true-home-card-action:hover,
.tcjc-true-home-card-action:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.tcjc-true-home-button.primary:hover,
.tcjc-true-home-button.primary:focus-visible {
  background: linear-gradient(135deg, rgba(132,193,226,.98), rgba(58,134,178,.98));
}

.tcjc-true-home-button.secondary:hover,
.tcjc-true-home-button.secondary:focus-visible {
  border-color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.23);
}

.tcjc-true-home-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: rgba(255,255,255,.74);
  font-size: .76rem;
  font-weight: 750;
  text-shadow: 0 1px 3px rgba(7,18,29,.46);
}

.tcjc-true-home-status > span:first-child {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bde69b;
  box-shadow: 0 0 0 4px rgba(189,230,155,.14);
}

.tcjc-true-home-status > span:first-child.offline {
  background: #e5b869;
  box-shadow: 0 0 0 4px rgba(229,184,105,.14);
}

/* --------------------------- Today cards -------------------------------- */

.tcjc-true-home-today {
  width: min(1320px, calc(100% - 30px));
  margin: 0 auto;
  padding: clamp(44px, 7vw, 82px) 0 28px;
}

.tcjc-true-home-section-heading {
  max-width: 840px;
  margin: 0 auto 28px;
  text-align: center;
}

.tcjc-true-home-section-heading p {
  margin: 0 0 10px;
  color: var(--tcjc-true-blue-strong);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tcjc-true-home-section-heading h2 {
  margin: 0;
  color: var(--tcjc-true-navy);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 780;
  letter-spacing: -.05em;
  line-height: 1;
}

.tcjc-true-home-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tcjc-true-home-glass-card {
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 26px;
  color: var(--tcjc-true-ink);
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(246,251,254,.66) 54%, rgba(255,255,255,.82)),
    radial-gradient(circle at 12% 8%, rgba(148,184,205,.18), transparent 38%);
  box-shadow:
    0 20px 48px var(--tcjc-true-shadow),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(148,184,205,.10);
  backdrop-filter: blur(16px) saturate(1.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.16);
  overflow: hidden;
}

.tcjc-true-home-glass-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.52), transparent 34%, rgba(148,184,205,.08) 72%, transparent);
  opacity: .62;
}

.tcjc-true-home-glass-card > * {
  position: relative;
  z-index: 1;
}

.tcjc-true-home-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}

.tcjc-true-home-card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148,184,205,.38);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #91c3dc, #5e9fc2 54%, #357ea8);
  box-shadow: 0 10px 22px rgba(42,118,163,.18), inset 0 1px 0 rgba(255,255,255,.42);
}

.tcjc-true-home-card-icon .tcjc-app-nav-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.tcjc-true-home-card-label {
  color: rgba(36,52,77,.62);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tcjc-true-home-glass-card h3 {
  margin: 0;
  color: var(--tcjc-true-navy);
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  font-weight: 780;
  letter-spacing: -.04em;
  line-height: 1.05;
  text-wrap: balance;
}

.tcjc-true-home-glass-card > p,
.tcjc-true-home-verse-card blockquote {
  margin: 16px 0 22px;
  color: rgba(48,48,48,.78);
  font-size: .98rem;
  font-weight: 620;
  line-height: 1.6;
}

.tcjc-true-home-verse-card blockquote {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.tcjc-true-home-verse-card cite {
  display: block;
  margin: -10px 0 20px;
  color: var(--tcjc-true-blue-deep);
  font-size: .76rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.tcjc-true-home-card-action {
  width: fit-content;
  margin-top: auto;
  border: 1px solid rgba(178,219,238,.78);
  color: #fff;
  background: linear-gradient(145deg, #91c3dc, #5e9fc2 52%, #357ea8);
  box-shadow: 0 10px 22px rgba(42,118,163,.20), inset 0 1px 0 rgba(255,255,255,.46);
}


.tcjc-true-home-glass-card.is-clickable {
  cursor: pointer;
  transition:
    transform .22s cubic-bezier(.22,.61,.36,1),
    box-shadow .22s ease,
    border-color .22s ease;
}

.tcjc-true-home-glass-card.is-clickable:hover,
.tcjc-true-home-glass-card.is-clickable:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(148,184,205,.62);
  box-shadow:
    0 24px 54px rgba(36,52,77,.17),
    inset 0 1px 0 rgba(255,255,255,.96);
  outline: none;
}

.tcjc-true-home-glass-card.is-clickable:active {
  transform: translateY(-1px) scale(.995);
}

.tcjc-true-home-card-action {
  width: fit-content;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: auto;
  padding: 0 20px;
  border: 1px solid rgba(178,219,238,.78);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #91c3dc, #5e9fc2 52%, #357ea8);
  box-shadow: 0 10px 22px rgba(42,118,163,.20), inset 0 1px 0 rgba(255,255,255,.46);
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.1;
}

.tcjc-true-home-card-action .tcjc-app-nav-icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* --------------------------- Quick links -------------------------------- */

.tcjc-true-home-shortcuts {
  width: min(1120px, calc(100% - 30px));
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.tcjc-true-home-shortcuts button {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid var(--tcjc-true-border);
  border-radius: 22px;
  color: var(--tcjc-true-navy);
  background: rgba(255,255,255,.74);
  box-shadow: 0 14px 34px rgba(36,52,77,.08), inset 0 1px 0 rgba(255,255,255,.92);
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.tcjc-true-home-shortcuts button:hover,
.tcjc-true-home-shortcuts button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(79,159,200,.48);
  background: rgba(255,255,255,.94);
  outline: none;
}

.tcjc-true-home-shortcuts button > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: auto;
  border: 1px solid rgba(148,184,205,.34);
  border-radius: 13px;
  color: var(--tcjc-true-blue-deep);
  background: rgba(148,184,205,.14);
}

.tcjc-true-home-shortcuts button > span .tcjc-app-nav-icon {
  width: 1.35rem;
  height: 1.35rem;
}

.tcjc-true-home-shortcuts strong,
.tcjc-true-home-shortcuts small {
  display: block;
}

.tcjc-true-home-shortcuts strong {
  margin-top: 20px;
  font-size: .98rem;
  font-weight: 900;
}

.tcjc-true-home-shortcuts small {
  margin-top: 5px;
  color: rgba(48,48,48,.62);
  font-size: .77rem;
  font-weight: 650;
  line-height: 1.35;
}

.tcjc-true-home-footer {
  width: min(1120px, calc(100% - 30px));
  margin: 34px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  color: rgba(36,52,77,.58);
  font-size: .82rem;
  font-weight: 650;
  text-align: center;
}

.tcjc-app-nav-icon {
  display: block;
  color: currentColor;
  fill: none;
  shape-rendering: geometricPrecision;
}

/* ------------------------- Home app chrome ------------------------------ */

body.tcjc-true-home-active .tcjc-app-top-shell {
  border-bottom-color: rgba(148,184,205,.30) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.93), rgba(250,247,240,.84)) !important;
  box-shadow:
    0 14px 34px rgba(36,52,77,.12),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(148,184,205,.12) !important;
  backdrop-filter: blur(20px) saturate(1.26) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.26) !important;
}

body.tcjc-true-home-active .tcjc-app-search-field {
  color: #fff !important;
  border-color: rgba(255,255,255,.52) !important;
  background: linear-gradient(135deg, rgba(111,177,215,.96), rgba(53,121,163,.96)) !important;
  box-shadow: 0 10px 24px rgba(36,82,112,.20), inset 0 1px 0 rgba(255,255,255,.30) !important;
}



body.tcjc-true-home-active .tcjc-app-theme-trigger {
  color: var(--tcjc-true-blue-deep) !important;
  border-color: rgba(148,184,205,.30) !important;
  background: rgba(255,255,255,.72) !important;
}

body.tcjc-true-home-active .tcjc-app-bottom-shell {
  border-top-color: rgba(148,184,205,.28) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(250,247,240,.92)) !important;
  box-shadow:
    0 -14px 34px rgba(36,52,77,.12),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body.tcjc-true-home-active .tcjc-bottom-nav-btn {
  color: rgba(36,52,77,.78) !important;
}

body.tcjc-true-home-active .tcjc-bottom-nav-btn:not(:disabled):hover,
body.tcjc-true-home-active .tcjc-bottom-nav-btn:not(:disabled):focus-visible {
  color: #2f7aa7 !important;
  background: rgba(148,184,205,.16) !important;
}

/* ------------------------------ Dark mode ------------------------------- */

body.tcjc-app-dark-active.tcjc-true-home-active {
  --tcjc-true-ink: #f2eee6;
  --tcjc-true-navy: #f7f2e8;
  --tcjc-true-border: rgba(205,222,232,.22);
  --tcjc-true-shadow: rgba(0,0,0,.28);
  background: #0a0c0d !important;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-true-home.tcjc-app-content {
  background:
    radial-gradient(circle at 50% 0%, rgba(148,184,205,.07), transparent 30rem),
    linear-gradient(180deg, #101314 0%, #090b0c 54%, #060708 100%) !important;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-true-home-section-heading p {
  color: #9fd3ec;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-true-home-glass-card,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-true-home-shortcuts button {
  border-color: rgba(205,222,232,.22);
  color: rgba(255,252,242,.94);
  background:
    linear-gradient(135deg, rgba(82,86,88,.92), rgba(64,69,72,.90) 52%, rgba(72,68,60,.86));
  box-shadow: 0 18px 42px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-true-home-glass-card h3,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-true-home-shortcuts strong {
  color: rgba(255,252,242,.96);
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-true-home-glass-card > p,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-true-home-verse-card blockquote,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-true-home-shortcuts small,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-true-home-card-label,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-true-home-footer {
  color: rgba(255,248,231,.72);
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-app-top-shell,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-app-bottom-shell {
  border-color: rgba(205,222,232,.22) !important;
  background: linear-gradient(180deg, rgba(57,62,65,.94), rgba(38,43,46,.92)) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-app-theme-trigger {
  color: #f1d47f !important;
  border-color: rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.10) !important;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-bottom-nav-btn {
  color: rgba(238,246,251,.82) !important;
}

/* ----------------------------- Responsive ------------------------------- */

@media (max-width: 1020px) {
  .tcjc-true-home-hero-card {
    width: min(700px, 70vw);
  }

  .tcjc-true-home-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tcjc-true-home-verse-card {
    grid-column: 1 / -1;
    min-height: 310px;
  }

  .tcjc-true-home-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.tcjc-true-home-active .tcjc-true-home.tcjc-app-content {
    padding-top: calc(var(--tcjc-fixed-header-space, 74px) + 6px) !important;
    padding-bottom: calc(var(--tcjc-bottom-nav-space, 82px) + 12px) !important;
  }

  .tcjc-true-home-hero {
    width: calc(100vw - 10px);
    min-height: calc(100svh - var(--tcjc-fixed-header-space, 74px) - 12px);
    align-items: flex-start;
    justify-content: center;
    padding: 14px 10px 28px;
    border-radius: 24px;
  }

  .tcjc-true-home-hero-media img {
    object-position: center top;
  }

  .tcjc-true-home-hero-shade {
    background:
      linear-gradient(180deg, rgba(20,27,32,.10) 0%, rgba(20,27,32,.22) 36%, rgba(20,27,32,.56) 100%);
  }

  .tcjc-true-home-hero-card {
    width: 100%;
    margin-top: clamp(34px, 11svh, 92px);
    margin-bottom: auto;
    padding: 24px 19px;
    border-radius: 22px;
    text-align: center;
    backdrop-filter: blur(9px) saturate(1.14);
    -webkit-backdrop-filter: blur(9px) saturate(1.14);
  }

  .tcjc-true-home-hero-card h1 {
    font-size: clamp(2.05rem, 10.5vw, 3.2rem);
    line-height: 1.02;
  }

  .tcjc-true-home-lead {
    font-size: .98rem;
    line-height: 1.55;
  }

  .tcjc-true-home-quote {
    margin: 18px 0;
    padding: 16px;
  }

  .tcjc-true-home-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tcjc-true-home-button {
    width: 100%;
  }

  .tcjc-true-home-status {
    justify-content: center;
  }

  .tcjc-true-home-today {
    width: min(100% - 18px, 1320px);
    padding-top: 48px;
  }

  .tcjc-true-home-card-grid {
    grid-template-columns: 1fr;
  }

  .tcjc-true-home-verse-card {
    grid-column: auto;
  }

  .tcjc-true-home-glass-card {
    min-height: 320px;
    border-radius: 22px;
  }

  .tcjc-true-home-shortcuts {
    width: min(100% - 18px, 1120px);
    gap: 9px;
  }

  .tcjc-true-home-shortcuts button {
    min-height: 138px;
    padding: 16px;
    border-radius: 18px;
  }


}

@media (max-width: 420px) {
  .tcjc-true-home-eyebrow {
    font-size: .66rem;
    letter-spacing: .11em;
  }

  .tcjc-true-home-hero-card h1 {
    font-size: 2rem;
  }

  .tcjc-true-home-quote p {
    font-size: .94rem;
  }

  .tcjc-true-home-shortcuts {
    grid-template-columns: 1fr 1fr;
  }

  .tcjc-true-home-shortcuts button {
    min-height: 128px;
    padding: 14px;
  }

  .tcjc-true-home-shortcuts strong {
    font-size: .9rem;
  }

  .tcjc-true-home-shortcuts small {
    font-size: .7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcjc-true-home *,
  .tcjc-true-home-hero-media img {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes tcjcTrueHeroBreathe {
  from { transform: scale(1); }
  to { transform: scale(1.018); }
}

@keyframes tcjcTrueHomeRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}


@media (max-width: 720px) and (max-height: 700px) {
  .tcjc-true-home-hero-card {
    margin-top: 22px;
  }
}


.tcjc-true-home-last-verse {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}


/* ==========================================================================
   HOME DASHBOARD v88
   Quieter app-first hierarchy: compact hero, prominent search, continue
   reading, horizontal scripture shelf, then daily content.
   ========================================================================== */

.tcjc-home-v88-hero {
  min-height: clamp(260px, 34vw, 430px);
  margin-bottom: 18px;
  align-items: flex-end;
  padding: clamp(20px, 4vw, 50px);
}

.tcjc-home-v88-hero-card {
  width: min(680px, 66vw);
  padding: clamp(22px, 3vw, 34px);
}

.tcjc-home-v88-hero-card h1 {
  font-size: clamp(2.15rem, 4vw, 4.25rem);
}

.tcjc-home-v88-hero-card .tcjc-true-home-status {
  margin-top: 18px;
}

.tcjc-home-v88-dashboard,
.tcjc-home-v88-library {
  width: min(1240px, calc(100% - 30px));
  margin-inline: auto;
}

.tcjc-home-v88-dashboard {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 16px;
  margin-top: 10px;
}

.tcjc-home-v88-search,
.tcjc-home-v88-continue {
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(244,250,253,.76)),
    radial-gradient(circle at 12% 8%, rgba(148,184,205,.24), transparent 44%);
  box-shadow:
    0 18px 44px rgba(36,52,77,.12),
    inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

.tcjc-home-v88-search {
  min-height: 150px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 24px;
  color: var(--tcjc-true-navy);
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease;
}

.tcjc-home-v88-search:hover,
.tcjc-home-v88-search:focus-visible,
.tcjc-home-v88-continue:hover,
.tcjc-home-v88-continue:focus-visible,
.tcjc-home-v88-volume:hover,
.tcjc-home-v88-volume:focus-visible {
  transform: translateY(-3px);
  outline: none;
}

.tcjc-home-v88-search-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #91c3dc, #4f9fc8 58%, #2f7aa7);
  box-shadow: 0 12px 24px rgba(47,122,167,.22), inset 0 1px 0 rgba(255,255,255,.44);
}

.tcjc-home-v88-search-icon .tcjc-app-nav-icon {
  width: 1.6rem;
  height: 1.6rem;
}

.tcjc-home-v88-search > span:nth-child(2) {
  min-width: 0;
}

.tcjc-home-v88-search strong,
.tcjc-home-v88-search small {
  display: block;
}

.tcjc-home-v88-search strong {
  font-size: 1.16rem;
  font-weight: 900;
  letter-spacing: -.02em;
}

.tcjc-home-v88-search small {
  margin-top: 6px;
  color: rgba(48,48,48,.64);
  font-size: .82rem;
  font-weight: 660;
  line-height: 1.42;
}

.tcjc-home-v88-search > .tcjc-app-nav-icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--tcjc-true-blue-deep);
}

.tcjc-home-v88-continue {
  position: relative;
  min-height: 236px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: clamp(26px, 4vw, 40px);
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.tcjc-home-v88-continue::after {
  content: "";
  position: absolute;
  right: -68px;
  bottom: -110px;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(148,184,205,.24), transparent 68%);
  pointer-events: none;
}

.tcjc-home-v88-continue-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.tcjc-home-v88-continue-copy > p {
  margin: 0 0 9px;
  color: var(--tcjc-true-blue-deep);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.tcjc-home-v88-continue h2 {
  margin: 0;
  color: var(--tcjc-true-navy);
  font-size: clamp(2rem, 4vw, 3.65rem);
  font-weight: 820;
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
}

.tcjc-home-v88-continue blockquote {
  max-width: 700px;
  margin: 18px 0 22px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: rgba(48,48,48,.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.58;
}

.tcjc-home-v88-continue-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #79b7d8, #4f9fc8 56%, #2f7aa7);
  box-shadow: 0 12px 28px rgba(47,122,167,.20), inset 0 1px 0 rgba(255,255,255,.34);
  font-size: .84rem;
  font-weight: 900;
}

.tcjc-home-v88-continue-action .tcjc-app-nav-icon {
  width: 1.08rem;
  height: 1.08rem;
}

.tcjc-home-v88-continue-mark {
  position: relative;
  z-index: 1;
  width: clamp(86px, 10vw, 128px);
  height: clamp(86px, 10vw, 128px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(148,184,205,.28);
  border-radius: 28px;
  color: var(--tcjc-true-blue-deep);
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(148,184,205,.18));
  box-shadow: 0 16px 34px rgba(36,52,77,.10), inset 0 1px 0 rgba(255,255,255,.9);
}

.tcjc-home-v88-continue-mark .tcjc-app-nav-icon {
  width: 3.2rem;
  height: 3.2rem;
}

.tcjc-home-v88-library {
  padding-top: clamp(42px, 6vw, 76px);
}

.tcjc-home-v88-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.tcjc-home-v88-section-header p {
  margin: 0 0 8px;
  color: var(--tcjc-true-blue-deep);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.tcjc-home-v88-section-header h2 {
  margin: 0;
  color: var(--tcjc-true-navy);
  font-size: clamp(1.9rem, 3.5vw, 3.25rem);
  font-weight: 820;
  letter-spacing: -.05em;
  line-height: 1;
}

.tcjc-home-v88-section-header button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(148,184,205,.28);
  border-radius: 13px;
  color: var(--tcjc-true-blue-deep);
  background: rgba(255,255,255,.72);
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.tcjc-home-v88-section-header button .tcjc-app-nav-icon {
  width: 1rem;
  height: 1rem;
}

.tcjc-home-v88-shelf {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(132px, 14vw, 182px);
  gap: 15px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 4px 3px 22px;
  -webkit-overflow-scrolling: touch;
}

.tcjc-home-v88-volume {
  min-width: 0;
  padding: 0;
  color: var(--tcjc-true-navy);
  background: transparent;
  text-align: left;
  scroll-snap-align: start;
  transition: transform .18s ease;
}

.tcjc-home-v88-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 17px;
  background: #d6d4cd;
  box-shadow:
    0 16px 30px rgba(36,52,77,.18),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.tcjc-home-v88-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(36,52,77,.08);
}

.tcjc-home-v88-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tcjc-home-v88-volume strong,
.tcjc-home-v88-volume small {
  display: block;
}

.tcjc-home-v88-volume strong {
  margin-top: 12px;
  font-size: .84rem;
  font-weight: 900;
  line-height: 1.22;
}

.tcjc-home-v88-volume small {
  margin-top: 4px;
  color: rgba(48,48,48,.56);
  font-size: .68rem;
  font-weight: 680;
  line-height: 1.3;
}

.tcjc-home-v88-today {
  padding-top: clamp(46px, 7vw, 84px);
}

.tcjc-home-v88-today .tcjc-true-home-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tcjc-home-v88-today .tcjc-true-home-glass-card {
  min-height: 330px;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-search,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-continue {
  border-color: rgba(205,222,232,.20);
  background:
    linear-gradient(135deg, rgba(75,81,84,.94), rgba(43,48,51,.94)),
    radial-gradient(circle at 12% 8%, rgba(148,184,205,.10), transparent 44%);
  box-shadow: 0 18px 44px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.10);
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-search strong,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-continue h2,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-section-header h2,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-volume {
  color: rgba(255,252,242,.96);
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-search small,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-continue blockquote,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-volume small {
  color: rgba(255,248,231,.68);
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-section-header button {
  color: #9fd3ec;
  border-color: rgba(205,222,232,.18);
  background: rgba(255,255,255,.08);
}

@media (max-width: 900px) {
  .tcjc-home-v88-dashboard {
    grid-template-columns: 1fr;
  }

  .tcjc-home-v88-search {
    min-height: 118px;
  }

  .tcjc-home-v88-today .tcjc-true-home-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tcjc-home-v88-today .tcjc-true-home-glass-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .tcjc-home-v88-hero {
    min-height: 310px;
    align-items: flex-end;
    padding: 12px;
  }

  .tcjc-home-v88-hero-card {
    width: 100%;
    margin: 0;
    padding: 20px 18px;
    text-align: left;
  }

  .tcjc-home-v88-hero-card h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .tcjc-home-v88-hero-card .tcjc-true-home-status {
    justify-content: flex-start;
  }

  .tcjc-home-v88-dashboard,
  .tcjc-home-v88-library {
    width: min(100% - 18px, 1240px);
  }

  .tcjc-home-v88-search {
    min-height: 104px;
    padding: 18px;
  }

  .tcjc-home-v88-search-icon {
    width: 46px;
    height: 46px;
  }

  .tcjc-home-v88-continue {
    min-height: 260px;
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .tcjc-home-v88-continue h2 {
    font-size: clamp(2rem, 11vw, 3.1rem);
  }

  .tcjc-home-v88-continue-mark {
    display: none;
  }

  .tcjc-home-v88-section-header {
    align-items: flex-start;
  }

  .tcjc-home-v88-section-header button {
    padding-inline: 12px;
    font-size: .72rem;
  }

  .tcjc-home-v88-shelf {
    grid-auto-columns: 142px;
    gap: 13px;
  }

  .tcjc-home-v88-today .tcjc-true-home-card-grid {
    grid-template-columns: 1fr;
  }

  .tcjc-home-v88-today .tcjc-true-home-glass-card:last-child {
    grid-column: auto;
  }
}

@media (max-width: 430px) {
  .tcjc-home-v88-search {
    grid-template-columns: auto 1fr;
  }

  .tcjc-home-v88-search > .tcjc-app-nav-icon {
    display: none;
  }

  .tcjc-home-v88-section-header {
    display: block;
  }

  .tcjc-home-v88-section-header button {
    margin-top: 14px;
  }

  .tcjc-home-v88-shelf {
    grid-auto-columns: 132px;
  }
}


/* ==========================================================================
   HOME HERO + COVER POLISH v89
   Full-height photographic hero behind the fixed top bar and clean,
   frameless scripture cover buttons in both light and dark modes.
   ========================================================================== */

body.tcjc-true-home-active .tcjc-true-home.tcjc-app-content {
  padding-top: 0 !important;
}

.tcjc-home-v88-hero {
  width: 100vw;
  min-height: clamp(560px, 68svh, 760px);
  margin: 0 0 30px calc(50% - 50vw);
  padding:
    calc(var(--tcjc-fixed-header-space, 78px) + clamp(30px, 5svh, 76px))
    clamp(24px, 5vw, 82px)
    clamp(36px, 7svh, 92px);
  align-items: center;
  border-radius: 0 0 36px 36px;
}

.tcjc-home-v88-hero .tcjc-true-home-hero-media img {
  object-position: center 38%;
}

.tcjc-home-v88-hero-card {
  width: min(720px, 60vw);
}

/* Remove browser/default button frames around the Home cover shelf. */
.tcjc-home-v88-volume,
.tcjc-home-v88-volume:hover,
.tcjc-home-v88-volume:focus,
.tcjc-home-v88-volume:focus-visible,
.tcjc-home-v88-volume:active {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tcjc-home-v88-volume {
  padding: 0 !important;
  overflow: visible;
}

.tcjc-home-v88-volume:hover,
.tcjc-home-v88-volume:focus-visible {
  transform: translateY(-4px);
}

.tcjc-home-v88-volume:focus-visible .tcjc-home-v88-cover {
  box-shadow:
    0 0 0 3px rgba(79, 159, 200, .42),
    0 18px 34px rgba(36, 52, 77, .22),
    inset 0 1px 0 rgba(255,255,255,.72);
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-volume,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-volume:hover,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-volume:focus,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-volume:focus-visible,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v88-volume:active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .tcjc-home-v88-hero {
    min-height: clamp(580px, 72svh, 760px);
  }
}

@media (max-width: 720px) {
  body.tcjc-true-home-active .tcjc-true-home.tcjc-app-content {
    padding-top: 0 !important;
  }

  .tcjc-home-v88-hero {
    width: 100vw;
    min-height: clamp(620px, 76svh, 780px);
    margin: 0 0 24px calc(50% - 50vw);
    padding:
      calc(var(--tcjc-fixed-header-space, 74px) + 24px)
      12px
      clamp(28px, 5svh, 54px);
    align-items: flex-end;
    border-radius: 0 0 28px 28px;
  }

  .tcjc-home-v88-hero .tcjc-true-home-hero-media img {
    object-position: center 34%;
  }

  .tcjc-home-v88-hero-card {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 430px) {
  .tcjc-home-v88-hero {
    min-height: clamp(620px, 74svh, 720px);
    padding-top: calc(var(--tcjc-fixed-header-space, 74px) + 18px);
  }
}


/* ==========================================================================
   HOME HERO BALANCE v90
   Keeps the photograph behind the top bar, but restores a balanced banner
   height so the next Home actions begin to appear within the first screen.
   ========================================================================== */

@media (max-width: 720px) {
  .tcjc-home-v88-hero-card {
    padding: 22px 20px 24px;
  }

  .tcjc-home-v88-hero-card h1 {
    font-size: clamp(2.35rem, 10.5vw, 3.35rem);
    line-height: .98;
  }

  .tcjc-home-v88-hero-card .tcjc-true-home-lead {
    font-size: clamp(.98rem, 4.3vw, 1.18rem);
    line-height: 1.45;
  }
}


/* ==========================================================================
   HOME HERO POSITION v91
   Move the complete hero below the fixed top navigation while preserving the
   balanced v90 height. Raise the glass card within the photograph.
   ========================================================================== */

body.tcjc-true-home-active .tcjc-true-home.tcjc-app-content {
  padding-top: var(--tcjc-fixed-header-space, 78px) !important;
}

.tcjc-home-v88-hero {
  margin-top: 0;
  align-items: center;
}

.tcjc-home-v88-hero-card {
  transform: translateY(-4%);
}

@media (max-width: 900px) {
  body.tcjc-true-home-active .tcjc-true-home.tcjc-app-content {
    padding-top: var(--tcjc-fixed-header-space, 76px) !important;
  }

  .tcjc-home-v88-hero-card {
    transform: translateY(-6%);
  }
}

@media (max-width: 720px) {
  body.tcjc-true-home-active .tcjc-true-home.tcjc-app-content {
    padding-top: var(--tcjc-fixed-header-space, 74px) !important;
  }

  .tcjc-home-v88-hero {
    align-items: center;
    padding-top: 26px;
    padding-bottom: 28px;
  }

  .tcjc-home-v88-hero-card {
    transform: translateY(-11%);
  }
}

@media (max-width: 430px) {
  .tcjc-home-v88-hero-card {
    transform: translateY(-13%);
  }
}


/* ==========================================================================
   HOME HERO CONTAINER + STATUS CLEANUP v92
   Match the public-site hero placement: below the fixed top bar, inset from
   the page edges, rounded corners, balanced height, and a higher mobile card.
   ========================================================================== */

body.tcjc-true-home-active .tcjc-true-home.tcjc-app-content {
  padding-top: var(--tcjc-fixed-header-space, 78px) !important;
}

.tcjc-home-v88-hero {
  width: calc(100vw - 16px);
  min-height: clamp(
    620px,
    calc(100svh - var(--tcjc-fixed-header-space, 78px) - 20px),
    760px
  );
  margin: 10px auto 30px !important;
  padding: clamp(24px, 5vw, 78px);
  align-items: center;
  justify-content: flex-start;
  border-radius: 34px;
}

.tcjc-home-v88-hero-card {
  width: min(720px, 60vw);
  transform: translateY(-4%);
}

@media (max-width: 900px) {
  body.tcjc-true-home-active .tcjc-true-home.tcjc-app-content {
    padding-top: var(--tcjc-fixed-header-space, 76px) !important;
  }

  .tcjc-home-v88-hero {
    width: calc(100vw - 16px);
    min-height: clamp(
      610px,
      calc(100svh - var(--tcjc-fixed-header-space, 76px) - 18px),
      740px
    );
    margin-top: 9px !important;
    border-radius: 30px;
  }

  .tcjc-home-v88-hero-card {
    width: min(680px, 76vw);
    transform: translateY(-5%);
  }
}

@media (max-width: 720px) {
  body.tcjc-true-home-active .tcjc-true-home.tcjc-app-content {
    padding-top: var(--tcjc-fixed-header-space, 74px) !important;
  }

  .tcjc-home-v88-hero {
    width: calc(100vw - 18px);
    min-height: clamp(
      600px,
      calc(100svh - var(--tcjc-fixed-header-space, 74px) - 18px),
      710px
    );
    margin: 9px auto 24px !important;
    padding: 24px 12px 28px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 28px;
  }

  .tcjc-home-v88-hero-card {
    width: calc(100% - 22px);
    max-width: none;
    margin: 0 auto;
    transform: translateY(-8%);
  }
}

@media (max-width: 430px) {
  .tcjc-home-v88-hero {
    min-height: clamp(
      590px,
      calc(100svh - var(--tcjc-fixed-header-space, 74px) - 16px),
      680px
    );
  }

  .tcjc-home-v88-hero-card {
    transform: translateY(-10%);
  }
}


/* ==========================================================================
   HERO CONTINUE READING v97
   Place the primary return-to-reading action inside the hero glass card.
   The separate Home search/continue dashboard is no longer rendered.
   ========================================================================== */

.tcjc-home-v88-hero-card {
  display: flex;
  flex-direction: column;
}

.tcjc-home-v97-hero-continue {
  width: 100%;
  min-height: 112px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: clamp(22px, 3vw, 34px);
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .54);
  border-radius: 20px;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(25, 37, 48, .46),
      rgba(33, 54, 67, .32)
    ),
    rgba(255, 255, 255, .08);
  box-shadow:
    0 16px 30px rgba(17, 24, 31, .16),
    inset 0 1px 0 rgba(255, 255, 255, .24);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  text-align: left;
  cursor: pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.tcjc-home-v97-hero-continue:hover,
.tcjc-home-v97-hero-continue:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .78);
  background:
    linear-gradient(
      135deg,
      rgba(28, 45, 58, .56),
      rgba(42, 71, 88, .40)
    ),
    rgba(255, 255, 255, .10);
  outline: none;
}

.tcjc-home-v97-hero-continue-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 15px;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.tcjc-home-v97-hero-continue-icon .tcjc-app-nav-icon {
  width: 1.55rem;
  height: 1.55rem;
}

.tcjc-home-v97-hero-continue-copy {
  min-width: 0;
}

.tcjc-home-v97-hero-continue-copy small,
.tcjc-home-v97-hero-continue-copy strong,
.tcjc-home-v97-hero-continue-copy em {
  display: block;
}

.tcjc-home-v97-hero-continue-copy small {
  margin-bottom: 4px;
  color: #b9e3f5;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.tcjc-home-v97-hero-continue-copy strong {
  overflow: hidden;
  color: #fff;
  font-size: clamp(1.04rem, 1.65vw, 1.34rem);
  font-weight: 900;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcjc-home-v97-hero-continue-copy em {
  margin-top: 5px;
  overflow: hidden;
  color: rgba(255, 255, 255, .78);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .78rem;
  font-style: italic;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcjc-home-v97-hero-continue-arrow {
  display: grid;
  place-items: center;
}

.tcjc-home-v97-hero-continue-arrow .tcjc-app-nav-icon {
  width: 1.18rem;
  height: 1.18rem;
}

.tcjc-home-v88-library {
  padding-top: clamp(34px, 5vw, 64px);
}

body.tcjc-app-dark-active.tcjc-true-home-active
  .tcjc-home-v97-hero-continue {
  color: #fff;
  border-color: rgba(214, 232, 241, .30);
  background:
    linear-gradient(
      135deg,
      rgba(8, 14, 18, .62),
      rgba(24, 38, 47, .48)
    ),
    rgba(255, 255, 255, .05);
}

@media (max-width: 720px) {
  .tcjc-home-v88-hero-card {
    padding-bottom: 22px;
  }

  .tcjc-home-v97-hero-continue {
    min-height: 104px;
    gap: 12px;
    margin-top: 20px;
    padding: 14px;
    border-radius: 18px;
  }

  .tcjc-home-v97-hero-continue-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .tcjc-home-v97-hero-continue-copy strong {
    font-size: 1rem;
  }

  .tcjc-home-v97-hero-continue-copy em {
    max-width: 100%;
    font-size: .72rem;
  }
}

@media (max-width: 430px) {
  .tcjc-home-v97-hero-continue {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tcjc-home-v97-hero-continue-arrow {
    display: none;
  }
}


/* ==========================================================================
   HOME CONTINUE READING COMPANION CARD v58
   Restore the full quoted passage as its own hero companion card.
   ========================================================================== */

.tcjc-home-v58-hero-layout {
  position: relative;
  z-index: 2;
  width: min(1320px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: center;
  gap: clamp(18px, 2vw, 28px);
}

.tcjc-home-v58-hero-layout .tcjc-home-v88-hero-card {
  width: 100%;
  transform: none !important;
}

.tcjc-home-v58-continue {
  position: relative;
  min-width: 0;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 28px;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.29),
      rgba(255,255,255,.10) 52%,
      rgba(255,255,255,.20)
    );
  box-shadow:
    0 24px 58px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(148,184,205,.14);
  backdrop-filter: blur(15px) saturate(1.22);
  -webkit-backdrop-filter: blur(15px) saturate(1.22);
  cursor: pointer;
  text-align: left;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.tcjc-home-v58-continue:hover,
.tcjc-home-v58-continue:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.78);
  outline: none;
}

.tcjc-home-v58-continue-top {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #bce8fb;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.tcjc-home-v58-continue-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 14px;
  background: rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}

.tcjc-home-v58-continue-icon .tcjc-app-nav-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.tcjc-home-v58-continue h2 {
  margin: 22px 0 0;
  color: #fff;
  font-size: clamp(1.85rem, 3vw, 3.15rem);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
  text-shadow: 0 3px 5px rgba(7,18,29,.38);
}

.tcjc-home-v58-continue blockquote {
  margin: 20px 0 24px;
  color: rgba(255,255,255,.92);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.95rem, 1.32vw, 1.1rem);
  font-style: italic;
  line-height: 1.62;
  text-shadow: 0 1px 3px rgba(7,18,29,.46);
}

.tcjc-home-v58-continue-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.50);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(111,177,215,.94),
    rgba(53,121,163,.94)
  );
  box-shadow:
    0 12px 28px rgba(36,82,112,.24),
    inset 0 1px 0 rgba(255,255,255,.32);
  font-size: .82rem;
  font-weight: 900;
}

.tcjc-home-v58-continue-action .tcjc-app-nav-icon {
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 980px) {
  .tcjc-home-v58-hero-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .tcjc-home-v58-continue {
    width: min(760px, 100%);
  }
}

@media (max-width: 720px) {
  .tcjc-home-v58-hero-layout {
    gap: 14px;
  }

  .tcjc-home-v58-continue {
    width: 100%;
    padding: 22px 20px 24px;
    border-radius: 24px;
  }

  .tcjc-home-v58-continue h2 {
    margin-top: 18px;
    font-size: clamp(1.72rem, 8vw, 2.45rem);
  }

  .tcjc-home-v58-continue blockquote {
    margin: 16px 0 20px;
    font-size: .94rem;
    line-height: 1.56;
  }
}


/* ==========================================================================
   PRIMARY HERO PROMINENCE + WEBSITE ACTIONS v59
   Strengthen the main hero card and add a scripture witness with clear links.
   ========================================================================== */

.tcjc-home-v58-hero-layout {
  grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr);
  gap: clamp(20px, 2.35vw, 34px);
}

.tcjc-home-v58-hero-layout .tcjc-home-v88-hero-card {
  position: relative;
  padding: clamp(34px, 4.4vw, 62px);
  border-color: rgba(255, 255, 255, .70);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .40),
      rgba(255, 255, 255, .16) 55%,
      rgba(255, 255, 255, .25)
    );
  box-shadow:
    0 32px 72px rgba(0, 0, 0, .27),
    inset 0 1px 0 rgba(255, 255, 255, .88),
    inset 0 -1px 0 rgba(148, 184, 205, .20);
}

.tcjc-home-v58-hero-layout .tcjc-home-v88-hero-card h1 {
  max-width: 760px;
  font-size: clamp(2.65rem, 5.4vw, 5.55rem);
}

.tcjc-home-v58-hero-layout .tcjc-home-v88-hero-card .tcjc-true-home-lead {
  max-width: 690px;
  font-size: clamp(1rem, 1.42vw, 1.22rem);
}

.tcjc-home-v59-hero-verse {
  max-width: 680px;
  margin: clamp(25px, 3vw, 38px) 0 0;
  padding: 20px 22px 18px;
  border-left: 3px solid rgba(151, 207, 236, .98);
  border-radius: 0 18px 18px 0;
  background:
    linear-gradient(
      90deg,
      rgba(23, 52, 69, .30),
      rgba(23, 52, 69, .12)
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

.tcjc-home-v59-hero-verse blockquote {
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.55;
  text-shadow: 0 2px 4px rgba(8, 19, 29, .50);
}

.tcjc-home-v59-hero-verse figcaption {
  margin-top: 10px;
  color: #c8ecfc;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tcjc-home-v59-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}

.tcjc-home-v59-site-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: 15px;
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .01em;
  text-decoration: none;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.tcjc-home-v59-site-button:hover,
.tcjc-home-v59-site-button:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.tcjc-home-v59-site-button .tcjc-app-nav-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.tcjc-home-v59-site-button.is-primary {
  color: #fff;
  border-color: rgba(206, 235, 250, .68);
  background:
    linear-gradient(
      135deg,
      #79b9dd,
      #347ca8
    );
  box-shadow:
    0 14px 30px rgba(31, 83, 118, .30),
    inset 0 1px 0 rgba(255, 255, 255, .34);
}

.tcjc-home-v59-site-button.is-primary:hover,
.tcjc-home-v59-site-button.is-primary:focus-visible {
  background:
    linear-gradient(
      135deg,
      #8bc8e8,
      #3f89b4
    );
}

.tcjc-home-v59-site-button.is-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, .60);
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tcjc-home-v59-site-button.is-secondary:hover,
.tcjc-home-v59-site-button.is-secondary:focus-visible {
  border-color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .17);
}

@media (max-width: 980px) {
  .tcjc-home-v58-hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tcjc-home-v58-hero-layout .tcjc-home-v88-hero-card,
  .tcjc-home-v58-continue {
    width: min(780px, 100%);
  }
}

@media (max-width: 720px) {
  .tcjc-home-v58-hero-layout .tcjc-home-v88-hero-card {
    padding: 28px 22px 26px;
  }

  .tcjc-home-v58-hero-layout .tcjc-home-v88-hero-card h1 {
    font-size: clamp(2.25rem, 11.5vw, 3.75rem);
  }

  .tcjc-home-v59-hero-verse {
    margin-top: 22px;
    padding: 17px 17px 16px;
  }

  .tcjc-home-v59-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 22px;
  }

  .tcjc-home-v59-site-button {
    width: 100%;
  }
}


/* ==========================================================================
   THREE-CARD HERO BALANCE + UNIFIED TRANSPARENCY v60
   Main witness card remains largest. Continue Reading and Scripture Search
   share a balanced companion column. The same transparent glass is used at
   every viewport size so the painting remains visible on phones and tablets.
   ========================================================================== */

.tcjc-home-v60-hero-layout {
  position: relative;
  z-index: 2;
  width: min(1320px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr);
  align-items: stretch;
  gap: clamp(18px, 2.2vw, 30px);
}

.tcjc-home-v60-side-stack {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(14px, 1.6vw, 20px);
}

/* One shared glass recipe on desktop, tablet, and mobile. */
.tcjc-home-v60-hero-layout .tcjc-home-v60-main,
.tcjc-home-v60-hero-layout .tcjc-home-v58-continue,
.tcjc-home-v60-hero-layout .tcjc-home-v60-search {
  border: 1px solid rgba(255, 255, 255, .56) !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .22),
      rgba(255, 255, 255, .055) 52%,
      rgba(255, 255, 255, .13)
    ) !important;
  box-shadow:
    0 24px 58px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .64),
    inset 0 -1px 0 rgba(148, 184, 205, .12) !important;
  backdrop-filter: blur(12px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
}

.tcjc-home-v60-hero-layout .tcjc-home-v60-main {
  width: 100% !important;
  min-width: 0;
  padding: clamp(32px, 4vw, 54px);
  border-radius: 30px;
  transform: none !important;
}

.tcjc-home-v60-hero-layout .tcjc-home-v60-main h1 {
  max-width: none;
  font-size: clamp(2.35rem, 3.7vw, 4rem);
  white-space: nowrap;
}

.tcjc-home-personal-welcome {
  margin: 8px 0 0;
  color: rgba(255,255,255,.94);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 720;
  letter-spacing: .01em;
  text-shadow: 0 2px 8px rgba(0,0,0,.48);
}

.tcjc-home-v60-hero-layout
  .tcjc-home-v60-main
  .tcjc-true-home-lead {
  max-width: 650px;
}

.tcjc-home-v60-hero-layout .tcjc-home-v58-continue {
  width: 100% !important;
  min-height: 0;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: 28px;
}

.tcjc-home-v60-hero-layout .tcjc-home-v58-continue h2 {
  font-size: clamp(1.35rem, 1.9vw, 2.15rem);
}

.tcjc-home-v58-continue-reference {
  margin: 10px 0 0;
  color: #bfe8fb;
  font-size: clamp(.98rem, 1.2vw, 1.1rem);
  font-weight: 850;
  letter-spacing: .015em;
  text-shadow: 0 2px 5px rgba(7,18,29,.42);
}

.tcjc-home-v60-search {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 23px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.tcjc-home-v60-search:hover,
.tcjc-home-v60-search:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .82) !important;
  outline: none;
}

.tcjc-home-v60-search-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 15px;
  background: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.tcjc-home-v60-search-icon .tcjc-app-nav-icon {
  width: 1.45rem;
  height: 1.45rem;
}

.tcjc-home-v60-search-copy {
  min-width: 0;
}

.tcjc-home-v60-search-copy small,
.tcjc-home-v60-search-copy strong,
.tcjc-home-v60-search-copy em {
  display: block;
}

.tcjc-home-v60-search-copy small {
  margin-bottom: 4px;
  color: #c5edff;
  font-size: .67rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tcjc-home-v60-search-copy strong {
  color: #fff;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 900;
  line-height: 1.18;
  text-wrap: balance;
}

.tcjc-home-v60-search-copy em {
  margin-top: 5px;
  color: rgba(255, 255, 255, .80);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .76rem;
  font-style: italic;
  line-height: 1.35;
}

.tcjc-home-v60-search-action {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  color: #d2f0ff;
  font-size: .74rem;
  font-weight: 900;
}

.tcjc-home-v60-search-action .tcjc-app-nav-icon {
  width: .98rem;
  height: .98rem;
}

@media (max-width: 980px) {
  .tcjc-home-v60-hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tcjc-home-v60-side-stack {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
    grid-template-rows: auto;
  }

  .tcjc-home-v60-hero-layout .tcjc-home-v60-main,
  .tcjc-home-v60-hero-layout .tcjc-home-v58-continue,
  .tcjc-home-v60-hero-layout .tcjc-home-v60-search {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 720px) {
  .tcjc-home-v60-hero-layout {
    gap: 14px;
  }

  .tcjc-home-v60-side-stack {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .tcjc-home-v60-hero-layout .tcjc-home-v60-main {
    padding: 27px 21px 25px;
    border-radius: 25px;
  }

  .tcjc-home-v60-hero-layout .tcjc-home-v60-main h1 {
    font-size: clamp(2.2rem, 10.6vw, 3.5rem);
    white-space: normal;
  }

  .tcjc-home-v60-hero-layout .tcjc-home-v58-continue {
    padding: 22px 20px 24px;
    border-radius: 24px;
  }

  .tcjc-home-v60-search {
    padding: 17px 18px;
    border-radius: 22px;
  }
}


/* ==========================================================================
   MOBILE GLASS TRANSPARENCY MATCH v61
   Mobile Safari renders backdrop blur more densely than desktop browsers.
   Reduce blur and tint on small screens so the painting remains visible while
   preserving the same glass character and readable white type.
   ========================================================================== */

@media (max-width: 720px) {
  .tcjc-home-v60-hero-layout .tcjc-home-v60-main,
  .tcjc-home-v60-hero-layout .tcjc-home-v58-continue,
  .tcjc-home-v60-hero-layout .tcjc-home-v60-search {
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, .085),
        rgba(255, 255, 255, .012) 52%,
        rgba(255, 255, 255, .045)
      ) !important;
    border-color: rgba(255, 255, 255, .48) !important;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, .18),
      inset 0 1px 0 rgba(255, 255, 255, .52),
      inset 0 -1px 0 rgba(148, 184, 205, .08) !important;
    backdrop-filter: blur(3px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(3px) saturate(1.06) !important;
  }

  .tcjc-home-v59-hero-verse {
    background:
      linear-gradient(
        90deg,
        rgba(16, 31, 42, .34),
        rgba(16, 31, 42, .12)
      ) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }

  .tcjc-home-v59-site-button.is-secondary {
    background: rgba(255, 255, 255, .055) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
}

@media (max-width: 430px) {
  .tcjc-home-v60-hero-layout .tcjc-home-v60-main,
  .tcjc-home-v60-hero-layout .tcjc-home-v58-continue,
  .tcjc-home-v60-hero-layout .tcjc-home-v60-search {
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, .07),
        rgba(255, 255, 255, .008) 55%,
        rgba(255, 255, 255, .035)
      ) !important;
    backdrop-filter: blur(2px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(2px) saturate(1.04) !important;
  }
}



/* ==========================================================================
   HOME CONTENT REFINEMENT v61
   Daily Verse in hero, button-only Continue Reading interaction, and
   a balanced two-card lower Home section.
   ========================================================================== */

.tcjc-home-v61-hero-verse-action {
  appearance: none;
  width: fit-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 12px;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      rgba(121, 183, 216, .88),
      rgba(79, 159, 200, .88) 56%,
      rgba(47, 122, 167, .9)
    );
  box-shadow:
    0 10px 24px rgba(24, 70, 98, .22),
    inset 0 1px 0 rgba(255, 255, 255, .34);
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

.tcjc-home-v61-hero-verse-action:hover,
.tcjc-home-v61-hero-verse-action:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 14px 28px rgba(24, 70, 98, .28),
    inset 0 1px 0 rgba(255, 255, 255, .42);
  outline: none;
}

.tcjc-home-v61-hero-verse-action .tcjc-app-nav-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.tcjc-home-v58-continue,
.tcjc-home-v58-continue:hover {
  cursor: default;
  transform: none;
  border-color: rgba(255, 255, 255, .56);
}

button.tcjc-home-v58-continue-action {
  appearance: none;
  min-height: 40px;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(121, 183, 216, .88),
      rgba(79, 159, 200, .88) 56%,
      rgba(47, 122, 167, .9)
    );
  box-shadow:
    0 10px 24px rgba(24, 70, 98, .22),
    inset 0 1px 0 rgba(255, 255, 255, .34);
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

/* v65 — both primary hero actions use exactly the same typography. */
.tcjc-home-v61-hero-verse-action,
button.tcjc-home-v58-continue-action {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .78rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
}

.tcjc-home-daily-collection {
  margin: 26px 0 8px !important;
  color: #2f7ca5 !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em;
  line-height: 1.35 !important;
  text-transform: uppercase;
}

.tcjc-home-daily-collection + h3 {
  margin-top: 0;
}

button.tcjc-home-v58-continue-action:hover,
button.tcjc-home-v58-continue-action:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  outline: none;
}

.tcjc-home-v88-today .tcjc-true-home-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tcjc-home-learn-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.tcjc-home-learn-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #77b0cd, #397fa6); box-shadow: 0 7px 18px rgba(39, 91, 120, .12); text-decoration: none; font-weight: 800; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.tcjc-home-learn-actions a:hover { transform: translateY(-2px); filter: brightness(1.04); }
.tcjc-home-learn-actions a:focus-visible { outline: 3px solid rgba(79, 159, 200, .32); outline-offset: 3px; }
.tcjc-home-learn-actions a.is-secondary { color: #31586d; background: rgba(255,255,255,.64); border-color: rgba(94,143,169,.22); box-shadow: none; }
.tcjc-home-learn-actions a.is-donation { color: #fff; background: linear-gradient(145deg, #caaa69, #91703a); border-color: rgba(255,255,255,.28); box-shadow: 0 8px 20px rgba(109, 78, 29, .18); }
.tcjc-home-learn-actions .tcjc-app-nav-icon { width: 17px; height: 17px; }

.tcjc-home-v88-today
  .tcjc-true-home-glass-card:last-child {
  grid-column: auto;
}

@media (max-width: 720px) {
  .tcjc-home-v88-today .tcjc-true-home-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcjc-home-v61-hero-verse-action,
  button.tcjc-home-v58-continue-action {
    transition: none;
  }
}

/* v63 — readable scripture quotations across mobile and desktop. */
.tcjc-true-home-quote p,
.tcjc-true-home-last-verse,
.tcjc-true-home-verse-card blockquote,
.tcjc-home-v88-continue blockquote,
.tcjc-home-v58-continue blockquote,
.tcjc-home-v59-hero-verse blockquote,
.tcjc-home-v97-hero-continue-copy em,
.tcjc-home-v60-search-copy em {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 620;
  letter-spacing: .002em;
  line-height: 1.58;
}

.tcjc-home-v59-hero-verse blockquote,
.tcjc-home-v58-continue blockquote {
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .tcjc-home-v59-hero-verse blockquote,
  .tcjc-home-v58-continue blockquote {
    font-size: 1rem;
    line-height: 1.62;
  }
}

/* v70 preview — keep the rotating hero evenly inset on every viewport. */
.tcjc-true-home .tcjc-home-v88-hero {
  width: calc(100% - 32px);
  max-width: calc(100% - 32px);
  margin: 16px auto !important;
}

@media (max-width: 720px) {
  .tcjc-true-home .tcjc-home-v88-hero {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    margin: 12px auto !important;
  }
}

/* ==========================================================================
   v70 HOME / CALENDAR VISUAL ALIGNMENT
   ========================================================================== */

.tcjc-true-home-glass-card {
  border-radius: 18px;
}

.tcjc-true-home-card-icon,
.tcjc-home-v58-continue-icon,
.tcjc-home-v60-search-icon {
  border-radius: 8px;
}

.tcjc-true-home-card-action,
.tcjc-home-learn-actions a,
.tcjc-home-v61-hero-verse-action,
button.tcjc-home-v58-continue-action,
.tcjc-home-v88-section-header button,
.tcjc-home-v60-search-action {
  border-radius: 8px;
}

.tcjc-home-v88-cover {
  border-radius: 11px;
}

@media (min-width: 1280px) {
  .tcjc-home-v60-hero-layout {
    width: min(1500px, 100%);
  }

  .tcjc-home-v88-library,
  .tcjc-true-home-today {
    width: min(1580px, calc(100% - 32px));
  }

  .tcjc-home-v88-shelf {
    grid-auto-columns: clamp(172px, 13.5vw, 224px);
    gap: 18px;
  }

  .tcjc-home-v88-today .tcjc-true-home-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tcjc-home-v88-today .tcjc-true-home-glass-card {
    min-height: 360px;
  }
}

/* END v70 HOME / CALENDAR VISUAL ALIGNMENT */

/* v77 — one focused Home hero card with a compact search companion. */
.tcjc-home-v60-hero-layout > .tcjc-home-v60-search {
  align-self: center;
}

/* Sacred Calendar context for Home daily content */
.tcjc-home-sacred-date {
  margin: 0 0 11px;
  color: rgba(255, 255, 255, .78);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.tcjc-home-sacred-date-card {
  margin: 11px 0 2px;
  color: #4e7b90;
}

html.tcjc-app-dark-active .tcjc-home-sacred-date-card {
  color: #9fcce0;
}

/* ========================================================================== 
   v95 — Home action cards: one useful feature card, two compact utilities,
   and one horizontal Church card instead of four tall empty columns.
   ========================================================================== */

.tcjc-home-v88-today .tcjc-true-home-card-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 16px;
  align-items: stretch;
}

.tcjc-home-v88-today .tcjc-true-home-glass-card {
  min-height: 0;
  padding: clamp(22px, 2.25vw, 30px);
  border-radius: 22px;
}

.tcjc-home-v88-today .tcjc-true-home-card-top {
  margin-bottom: 22px;
}

.tcjc-home-v88-today .tcjc-true-home-card-icon {
  width: 44px;
  height: 44px;
}

.tcjc-home-v88-today .tcjc-true-home-glass-card h3 {
  font-size: clamp(1.5rem, 2vw, 2.15rem);
}

.tcjc-home-v88-today .tcjc-true-home-glass-card > p {
  margin: 14px 0 20px;
}

.tcjc-home-v88-today .tcjc-true-home-card-action {
  min-height: 46px;
  padding-inline: 17px;
  border-radius: 10px;
  font-size: .86rem;
}

.tcjc-home-daily-card {
  grid-column: span 6;
  grid-row: span 2;
  min-height: 390px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(239,248,253,.78) 58%, rgba(226,242,250,.88)),
    radial-gradient(circle at 92% 10%, rgba(76,157,198,.22), transparent 34%) !important;
}

.tcjc-home-daily-card::after,
.tcjc-home-calendar-card::after,
.tcjc-home-saved-card::after,
.tcjc-home-learn-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(67,147,187,.13);
  border-radius: 50%;
}

.tcjc-home-daily-card::after {
  width: 260px;
  height: 260px;
  right: -118px;
  bottom: -132px;
  box-shadow: 0 0 0 34px rgba(67,147,187,.045), 0 0 0 68px rgba(67,147,187,.025);
}

.tcjc-home-daily-card h3 {
  max-width: 18ch;
  font-size: clamp(1.9rem, 3vw, 3rem) !important;
}

.tcjc-home-daily-card > p:not(.tcjc-home-sacred-date):not(.tcjc-home-daily-collection) {
  max-width: 62ch;
}

.tcjc-home-calendar-card,
.tcjc-home-saved-card {
  grid-column: span 3;
  min-height: 250px !important;
}

.tcjc-home-calendar-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.93), rgba(246,250,252,.78)),
    radial-gradient(circle at 100% 0%, rgba(200,163,76,.15), transparent 46%) !important;
}

.tcjc-home-calendar-card::after {
  width: 144px;
  height: 144px;
  right: -72px;
  top: -72px;
  border-color: rgba(200,163,76,.14);
}

.tcjc-home-saved-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.93), rgba(244,250,253,.78)),
    radial-gradient(circle at 100% 0%, rgba(67,147,187,.16), transparent 46%) !important;
}

.tcjc-home-saved-card::after {
  width: 144px;
  height: 144px;
  right: -72px;
  top: -72px;
}

.tcjc-home-calendar-card .tcjc-true-home-card-top,
.tcjc-home-saved-card .tcjc-true-home-card-top {
  margin-bottom: 18px;
}

.tcjc-home-calendar-card h3,
.tcjc-home-saved-card h3 {
  font-size: clamp(1.35rem, 1.7vw, 1.8rem) !important;
}

.tcjc-home-calendar-card > p,
.tcjc-home-saved-card > p {
  font-size: .91rem !important;
  line-height: 1.5 !important;
}

.tcjc-home-learn-card {
  grid-column: 7 / -1;
  min-height: 220px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(20px, 3vw, 42px);
  align-items: start;
  background:
    linear-gradient(135deg, rgba(247,251,253,.94), rgba(236,245,249,.82)),
    radial-gradient(circle at 100% 50%, rgba(67,147,187,.17), transparent 42%) !important;
}

.tcjc-home-learn-card::after {
  width: 210px;
  height: 210px;
  right: -100px;
  bottom: -112px;
}

.tcjc-home-learn-card .tcjc-true-home-card-top,
.tcjc-home-learn-card h3,
.tcjc-home-learn-card > p {
  grid-column: 1;
}

.tcjc-home-learn-card .tcjc-true-home-card-top {
  margin-bottom: 14px;
}

.tcjc-home-learn-card h3 {
  max-width: 20ch;
}

.tcjc-home-learn-card > p {
  max-width: 56ch;
  margin-bottom: 0 !important;
}

.tcjc-home-learn-card .tcjc-home-learn-actions {
  grid-column: 2;
  grid-row: 1 / 4;
  width: min(245px, 24vw);
  margin: 0;
  align-self: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tcjc-home-learn-card .tcjc-home-learn-actions a:first-child {
  grid-column: 1 / -1;
}

.tcjc-home-learn-card .tcjc-home-learn-actions a {
  min-height: 44px;
  padding-inline: 12px;
  border-radius: 10px;
  font-size: .82rem;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-daily-card {
  background:
    linear-gradient(145deg, rgba(70,77,81,.97), rgba(43,50,54,.96) 58%, rgba(36,43,47,.98)),
    radial-gradient(circle at 92% 10%, rgba(73,163,207,.20), transparent 34%) !important;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-calendar-card {
  background:
    linear-gradient(145deg, rgba(67,72,74,.97), rgba(45,49,51,.97)),
    radial-gradient(circle at 100% 0%, rgba(200,163,76,.13), transparent 46%) !important;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-saved-card,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-learn-card {
  background:
    linear-gradient(145deg, rgba(67,73,76,.97), rgba(43,49,52,.97)),
    radial-gradient(circle at 100% 20%, rgba(73,163,207,.14), transparent 44%) !important;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-daily-card::after,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-calendar-card::after,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-saved-card::after,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-learn-card::after {
  border-color: rgba(151,206,232,.10);
}

@media (max-width: 1120px) {
  .tcjc-home-daily-card {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 320px !important;
  }

  .tcjc-home-calendar-card,
  .tcjc-home-saved-card {
    grid-column: span 6;
    min-height: 235px !important;
  }

  .tcjc-home-learn-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .tcjc-home-v88-today .tcjc-true-home-card-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .tcjc-home-daily-card,
  .tcjc-home-calendar-card,
  .tcjc-home-saved-card,
  .tcjc-home-learn-card {
    grid-column: auto;
    min-height: 0 !important;
  }

  .tcjc-home-daily-card {
    min-height: 330px !important;
  }

  .tcjc-home-calendar-card,
  .tcjc-home-saved-card {
    min-height: 225px !important;
  }

  .tcjc-home-learn-card {
    display: flex !important;
    min-height: 300px !important;
  }

  .tcjc-home-learn-card .tcjc-home-learn-actions {
    width: 100%;
    margin-top: auto;
    display: flex;
  }

  .tcjc-home-learn-card .tcjc-home-learn-actions a:first-child {
    flex-basis: 100%;
  }
}

@media (max-width: 430px) {
  .tcjc-home-v88-today .tcjc-true-home-glass-card {
    padding: 21px 19px;
    border-radius: 19px;
  }

  .tcjc-home-daily-card h3 {
    font-size: clamp(1.72rem, 8vw, 2.3rem) !important;
  }

  .tcjc-home-learn-card .tcjc-home-learn-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ========================================================================== 
   v96 — Scripture day hub
   A complete replacement for the former four equal Home cards.
   ========================================================================== */

.tcjc-home-v96-daily-hub {
  width: min(1380px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(54px, 7vw, 92px) 0 34px;
}

.tcjc-home-v96-heading {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}

.tcjc-home-v96-heading > p {
  margin: 0 0 10px;
  color: var(--tcjc-true-blue-strong);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tcjc-home-v96-heading > h2 {
  margin: 0;
  color: var(--tcjc-true-navy);
  font-size: clamp(2.15rem, 4.2vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .98;
}

.tcjc-home-v96-heading > span {
  display: block;
  max-width: 640px;
  margin: 16px auto 0;
  color: rgba(48, 48, 48, .68);
  font-size: 1rem;
  font-weight: 620;
  line-height: 1.58;
}

.tcjc-home-v96-daily-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .8fr);
  gap: 18px;
  align-items: stretch;
}

.tcjc-home-v96-reading-feature,
.tcjc-home-v96-utility,
.tcjc-home-v96-church-invitation {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 184, 205, .34);
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,250,252,.90) 62%, rgba(235,245,249,.92));
  box-shadow:
    0 18px 42px rgba(36, 52, 77, .11),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.tcjc-home-v96-reading-feature {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.2vw, 42px);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(242,249,252,.92) 58%, rgba(227,241,248,.94)),
    radial-gradient(circle at 90% 10%, rgba(79,159,200,.18), transparent 34%);
}

.tcjc-home-v96-reading-feature::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -132px;
  bottom: -145px;
  border: 1px solid rgba(79,159,200,.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 36px rgba(79,159,200,.035),
    0 0 0 72px rgba(79,159,200,.018);
  pointer-events: none;
}

.tcjc-home-v96-reading-feature > * {
  position: relative;
  z-index: 1;
}

.tcjc-home-v96-reading-topline {
  display: flex;
  align-items: center;
  gap: 15px;
}

.tcjc-home-v96-icon,
.tcjc-home-v96-church-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148,184,205,.48);
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, #91c3dc, #5e9fc2 52%, #357ea8);
  box-shadow:
    0 10px 22px rgba(42,118,163,.18),
    inset 0 1px 0 rgba(255,255,255,.48);
}

.tcjc-home-v96-icon .tcjc-app-nav-icon,
.tcjc-home-v96-church-mark .tcjc-app-nav-icon {
  width: 1.45rem;
  height: 1.45rem;
}

.tcjc-home-v96-reading-topline small,
.tcjc-home-v96-utility-copy small,
.tcjc-home-v96-church-copy > p {
  display: block;
  margin: 0;
  color: rgba(36,52,77,.58);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tcjc-home-v96-reading-topline p {
  margin: 6px 0 0;
  color: #4e7b90;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tcjc-home-v96-reading-copy {
  max-width: 820px;
  margin: clamp(34px, 5vw, 58px) 0 30px;
}

.tcjc-home-v96-collection {
  margin: 0 0 12px;
  color: var(--tcjc-true-blue-deep);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.tcjc-home-v96-reading-copy h3 {
  margin: 0;
  max-width: 20ch;
  color: var(--tcjc-true-navy);
  font-size: clamp(2rem, 3.5vw, 3.65rem);
  font-weight: 810;
  letter-spacing: -.055em;
  line-height: 1.01;
  text-wrap: balance;
}

.tcjc-home-v96-summary {
  max-width: 68ch;
  margin: 20px 0 0;
  color: rgba(48,48,48,.76);
  font-size: clamp(.98rem, 1.3vw, 1.08rem);
  font-weight: 620;
  line-height: 1.65;
}

.tcjc-home-v96-primary-action {
  width: fit-content;
  min-height: 50px;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid rgba(178,219,238,.82);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #91c3dc, #5e9fc2 52%, #357ea8);
  box-shadow:
    0 12px 26px rgba(42,118,163,.20),
    inset 0 1px 0 rgba(255,255,255,.48);
  font-size: .92rem;
  font-weight: 900;
  transition: transform .18s ease, filter .18s ease;
}

.tcjc-home-v96-primary-action:hover,
.tcjc-home-v96-primary-action:focus-visible,
.tcjc-home-v96-utility:hover,
.tcjc-home-v96-utility:focus-visible,
.tcjc-home-v96-church-actions a:hover,
.tcjc-home-v96-church-actions a:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.tcjc-home-v96-primary-action .tcjc-app-nav-icon,
.tcjc-home-v96-utility > .tcjc-app-nav-icon,
.tcjc-home-v96-church-actions .tcjc-app-nav-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.tcjc-home-v96-companion {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}

.tcjc-home-v96-utility {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  padding: clamp(22px, 2.5vw, 30px);
  border-radius: 24px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tcjc-home-v96-utility:hover,
.tcjc-home-v96-utility:focus-visible {
  border-color: rgba(79,159,200,.48);
  box-shadow:
    0 20px 42px rgba(36,52,77,.15),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.tcjc-home-v96-utility-copy {
  min-width: 0;
  display: block;
}

.tcjc-home-v96-utility-copy strong {
  display: block;
  margin-top: 8px;
  color: var(--tcjc-true-navy);
  font-size: clamp(1.25rem, 1.8vw, 1.72rem);
  font-weight: 790;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.tcjc-home-v96-utility-copy em {
  display: block;
  margin-top: 9px;
  color: rgba(48,48,48,.68);
  font-size: .9rem;
  font-style: normal;
  font-weight: 620;
  line-height: 1.48;
}

.tcjc-home-v96-utility > .tcjc-app-nav-icon {
  color: var(--tcjc-true-blue-deep);
}

.tcjc-home-v96-church-invitation {
  margin-top: 18px;
  min-height: 180px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 28px;
  background:
    linear-gradient(125deg, rgba(247,251,253,.97), rgba(236,245,249,.92)),
    radial-gradient(circle at 95% 50%, rgba(79,159,200,.16), transparent 36%);
}

.tcjc-home-v96-church-mark {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}

.tcjc-home-v96-church-copy h3 {
  margin: 8px 0 0;
  color: var(--tcjc-true-navy);
  font-size: clamp(1.55rem, 2.3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.03;
}

.tcjc-home-v96-church-copy > span {
  display: block;
  max-width: 740px;
  margin-top: 12px;
  color: rgba(48,48,48,.70);
  font-size: .98rem;
  font-weight: 620;
  line-height: 1.56;
}

.tcjc-home-v96-church-actions {
  width: min(360px, 30vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tcjc-home-v96-church-actions a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(148,184,205,.44);
  border-radius: 12px;
  color: #2d5870;
  background: rgba(255,255,255,.74);
  font-size: .86rem;
  font-weight: 900;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}

.tcjc-home-v96-church-actions .is-primary {
  grid-column: 1 / -1;
  color: #fff;
  background: linear-gradient(145deg, #91c3dc, #5e9fc2 52%, #357ea8);
  box-shadow: 0 10px 22px rgba(42,118,163,.18);
}

.tcjc-home-v96-church-actions .is-donation {
  color: #fff;
  border-color: rgba(210,179,106,.55);
  background: linear-gradient(145deg, #d3b56f, #ad8540);
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-heading > h2,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-reading-copy h3,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-utility-copy strong,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-church-copy h3 {
  color: #fff8df;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-heading > span,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-summary,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-utility-copy em,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-church-copy > span {
  color: rgba(255,248,223,.74);
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-reading-feature,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-utility,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-church-invitation {
  border-color: rgba(151,206,232,.18);
  background:
    linear-gradient(145deg, rgba(70,77,81,.98), rgba(43,50,54,.98) 62%, rgba(34,40,44,.99));
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-reading-topline small,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-utility-copy small,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-church-copy > p {
  color: rgba(198,224,237,.70);
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-reading-topline p,
body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-collection {
  color: #9fcce0;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-utility > .tcjc-app-nav-icon {
  color: #a8d7eb;
}

body.tcjc-app-dark-active.tcjc-true-home-active .tcjc-home-v96-church-actions a:not(.is-primary):not(.is-donation) {
  color: #d5edf7;
  border-color: rgba(151,206,232,.24);
  background: rgba(255,255,255,.06);
}

@media (max-width: 980px) {
  .tcjc-home-v96-daily-layout {
    grid-template-columns: 1fr;
  }

  .tcjc-home-v96-reading-feature {
    min-height: 390px;
  }

  .tcjc-home-v96-companion {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .tcjc-home-v96-church-invitation {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tcjc-home-v96-church-actions {
    grid-column: 1 / -1;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .tcjc-home-v96-church-actions .is-primary {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .tcjc-home-v96-daily-hub {
    width: calc(100% - 28px);
    padding-top: 58px;
  }

  .tcjc-home-v96-heading {
    margin-bottom: 24px;
    text-align: left;
  }

  .tcjc-home-v96-heading > h2 {
    font-size: clamp(2.15rem, 10vw, 3.05rem);
  }

  .tcjc-home-v96-heading > span {
    margin-left: 0;
    margin-right: 0;
  }

  .tcjc-home-v96-reading-feature {
    min-height: 0;
    padding: 24px 21px;
    border-radius: 24px;
  }

  .tcjc-home-v96-reading-copy {
    margin: 30px 0 26px;
  }

  .tcjc-home-v96-reading-copy h3 {
    font-size: clamp(1.85rem, 8.6vw, 2.65rem);
  }

  .tcjc-home-v96-primary-action {
    width: 100%;
  }

  .tcjc-home-v96-companion {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tcjc-home-v96-utility {
    min-height: 132px;
    padding: 20px;
    border-radius: 20px;
  }

  .tcjc-home-v96-utility-copy em {
    font-size: .86rem;
  }

  .tcjc-home-v96-church-invitation {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    padding: 22px 20px;
    border-radius: 22px;
  }

  .tcjc-home-v96-church-mark {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .tcjc-home-v96-church-copy h3 {
    font-size: 1.62rem;
  }

  .tcjc-home-v96-church-copy > span {
    font-size: .92rem;
  }

  .tcjc-home-v96-church-actions {
    grid-template-columns: 1fr 1fr;
  }

  .tcjc-home-v96-church-actions .is-primary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .tcjc-home-v96-daily-hub {
    width: calc(100% - 22px);
  }

  .tcjc-home-v96-reading-topline {
    align-items: flex-start;
  }

  .tcjc-home-v96-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .tcjc-home-v96-utility {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tcjc-home-v96-utility > .tcjc-app-nav-icon {
    display: none;
  }

  .tcjc-home-v96-church-invitation {
    grid-template-columns: 1fr;
  }

  .tcjc-home-v96-church-mark {
    width: 48px;
    height: 48px;
  }

  .tcjc-home-v96-church-actions {
    grid-template-columns: 1fr;
  }

  .tcjc-home-v96-church-actions .is-primary {
    grid-column: auto;
  }
}

/* ========================================================================== 
   v95 dark-mode containment repair
   Keep the rebuilt Scripture Day copy transparent in dark mode. The Home hero
   intentionally uses the same base picture, shade, and stacking rules in both
   themes; no dark-only hero layer overrides belong here.
   ========================================================================== */

body.tcjc-app-dark-active.tcjc-true-home-active
  .tcjc-home-v96-reading-feature
  > div.tcjc-home-v96-reading-topline,
body.tcjc-app-dark-active.tcjc-true-home-active
  .tcjc-home-v96-reading-feature
  > div.tcjc-home-v96-reading-copy {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

body.tcjc-app-dark-active.tcjc-true-home-active
  .tcjc-home-v96-reading-feature
  > div.tcjc-home-v96-reading-topline::before,
body.tcjc-app-dark-active.tcjc-true-home-active
  .tcjc-home-v96-reading-feature
  > div.tcjc-home-v96-reading-topline::after,
body.tcjc-app-dark-active.tcjc-true-home-active
  .tcjc-home-v96-reading-feature
  > div.tcjc-home-v96-reading-copy::before,
body.tcjc-app-dark-active.tcjc-true-home-active
  .tcjc-home-v96-reading-feature
  > div.tcjc-home-v96-reading-copy::after {
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* TCJC_V100_HOME_COVER_ONLY_START */

/*
 * Home library cover shelf.
 * The artwork already contains the scripture title.
 * Do not reserve layout space for duplicate title/subtitle copy.
 */

.tcjc-home-v88-shelf
> .tcjc-home-v88-volume {
  grid-template-rows:
    auto !important;

  gap:
    0 !important;
}

.tcjc-home-v88-shelf
> .tcjc-home-v88-volume
> .tcjc-home-v88-cover {
  margin-bottom:
    0 !important;
}

/* Defensive only: the JSX no longer renders these nodes. */

.tcjc-home-v88-shelf
> .tcjc-home-v88-volume
> strong,

.tcjc-home-v88-shelf
> .tcjc-home-v88-volume
> small {
  display:
    none !important;
}

/* TCJC_V100_HOME_COVER_ONLY_END */

/* TCJC_REAL_HOME_READING_COMPACTION_START */

.tcjc-home-v96-reading-copy {
  max-width:
    760px !important;

  margin:
    22px
    0
    20px !important;
}

.tcjc-home-v96-collection {
  margin-bottom:
    8px !important;
}

.tcjc-home-v96-reading-copy
h3 {
  max-width:
    30ch !important;

  font-size:
    clamp(
      1.35rem,
      1.65vw,
      2rem
    ) !important;

  line-height:
    1.08 !important;

  letter-spacing:
    -.025em !important;

  display:
    -webkit-box !important;

  -webkit-box-orient:
    vertical !important;

  -webkit-line-clamp:
    2 !important;

  overflow:
    hidden !important;
}

.tcjc-home-v96-summary {
  max-width:
    62ch !important;

  margin-top:
    12px !important;

  font-size:
    .9rem !important;

  line-height:
    1.48 !important;

  display:
    -webkit-box !important;

  -webkit-box-orient:
    vertical !important;

  -webkit-line-clamp:
    3 !important;

  overflow:
    hidden !important;
}

@media (max-width: 720px) {

  .tcjc-home-v96-reading-copy {
    margin:
      16px
      0
      16px !important;
  }

  .tcjc-home-v96-reading-copy
  h3 {
    font-size:
      1.22rem !important;

    line-height:
      1.1 !important;
  }

  .tcjc-home-v96-summary {
    font-size:
      .82rem !important;

    line-height:
      1.4 !important;
  }
}

/* TCJC_REAL_HOME_READING_COMPACTION_END */

/* source: src/styles/reader-v2.css */
/* ========================================================================== 
   TRUE CHURCH SCRIPTURE READER V2 — LUCIDE CHROME
   Isolated premium reading surface. The legacy reader remains available with
   ?reader=legacy while this version is tested.
   ========================================================================== */

.tcjc-reader-v2-host {
  min-height: 100svh;
}

.tcjc-r2,
.tcjc-r2 * {
  box-sizing: border-box;
}

.tcjc-r2 {
  --tcjc-r2-blue: #5f9fbe;
  --tcjc-r2-blue-deep: #2f7197;
  --tcjc-r2-navy: #27394e;
  --tcjc-r2-gold: #c6a45e;
  --tcjc-r2-ink: #302d29;
  --tcjc-r2-muted: #716b63;
  --tcjc-r2-paper: #fbf5e8;
  --tcjc-r2-paper-deep: #f2e6cc;
  --tcjc-r2-stage: #e9e4da;
  --tcjc-r2-border: rgba(74, 74, 68, .13);
  --tcjc-r2-shadow: rgba(37, 49, 59, .15);
  position: relative;
  min-height: 100svh;
  padding:
    calc(var(--tcjc-fixed-header-space, 78px) + 22px)
    0
    calc(var(--tcjc-bottom-nav-space, 86px) + 34px);
  color: var(--tcjc-r2-ink);
  background:
    radial-gradient(circle at 50% -10%, rgba(148,184,205,.24), transparent 34rem),
    linear-gradient(180deg, #f5f2ec 0%, var(--tcjc-r2-stage) 50%, #ded9cf 100%);
  transition: background .3s ease, color .3s ease, padding .3s ease;
}

.tcjc-r2-theme-dark {
  --tcjc-r2-ink: #ede8df;
  --tcjc-r2-muted: #aaa399;
  --tcjc-r2-paper: #252321;
  --tcjc-r2-paper-deep: #1c1a19;
  --tcjc-r2-stage: #0c0e10;
  --tcjc-r2-border: rgba(255,255,255,.11);
  --tcjc-r2-shadow: rgba(0,0,0,.42);
  background:
    radial-gradient(circle at 50% -10%, rgba(83,126,148,.12), transparent 34rem),
    linear-gradient(180deg, #111416 0%, #090b0c 55%, #060708 100%);
}



/* Fixed app chrome is owned by app-chrome.css. Reader V2 keeps only
   content, sheet, action, and reading-surface styles here. */

.tcjc-r2-round-button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148,184,205,.24);
  border-radius: 12px;
  color: var(--tcjc-r2-blue-deep);
  background: rgba(255,255,255,.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.tcjc-r2-theme-dark .tcjc-r2-round-button {
  color: #a9d4e8;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.tcjc-r2-round-button:hover,
.tcjc-r2-round-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(75,145,182,.42);
  background: rgba(148,184,205,.16);
  outline: none;
}

.tcjc-r2-round-button .tcjc-r2-icon {
  width: 21px;
  height: 21px;
}

/* ------------------------------- Stage ---------------------------------- */

.tcjc-r2-stage {
  position: relative;
  width: calc(100% - 12px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: start;
}

.tcjc-r2-canvas {
  position: relative;
  min-width: 0;
  min-height: 72svh;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(115,91,54,.16);
  border-radius: 28px;
  color: var(--tcjc-r2-ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.45), transparent 19rem),
    radial-gradient(circle at 88% 4%, rgba(198,164,94,.08), transparent 18rem),
    linear-gradient(90deg, rgba(97,68,33,.035), transparent 9%, transparent 91%, rgba(97,68,33,.035)),
    linear-gradient(180deg, var(--tcjc-r2-paper), var(--tcjc-r2-paper-deep));
  box-shadow:
    0 28px 72px var(--tcjc-r2-shadow),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 10px 0 24px rgba(91,66,35,.035),
    inset -10px 0 24px rgba(91,66,35,.035);
}

.tcjc-r2-paper-sepia:not(.tcjc-r2-theme-dark) {
  --tcjc-r2-paper: #f5e4bd;
  --tcjc-r2-paper-deep: #e8cfa0;
  --tcjc-r2-ink: #382d21;
  --tcjc-r2-muted: #7a674f;
}

.tcjc-r2-theme-dark .tcjc-r2-canvas {
  border-color: rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 14% 8%, rgba(212,168,94,.05), transparent 19rem),
    radial-gradient(circle at 88% 4%, rgba(0,0,0,.22), transparent 18rem),
    linear-gradient(90deg, rgba(0,0,0,.12), transparent 9%, transparent 91%, rgba(0,0,0,.12)),
    linear-gradient(180deg, var(--tcjc-r2-paper), var(--tcjc-r2-paper-deep));
  box-shadow:
    0 28px 72px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 10px 0 24px rgba(0,0,0,.10),
    inset -10px 0 24px rgba(0,0,0,.10);
}

.tcjc-r2-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    radial-gradient(circle at 15% 23%, rgba(89,60,26,.16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 68%, rgba(89,60,26,.12) 0 1px, transparent 1.5px);
  background-size: 31px 37px, 43px 41px;
  mix-blend-mode: multiply;
}

.tcjc-r2-page-content {
  position: relative;
  z-index: 2;
  width: calc(100% - clamp(28px, 5vw, 96px));
  margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) 0 clamp(64px, 8vw, 98px);
}

.tcjc-r2-chapter-header {
  max-width: none;
  margin: 0 auto clamp(42px, 6vw, 68px);
  text-align: center;
}

.tcjc-r2-chapter-header p {
  margin: 0 0 14px;
  color: var(--tcjc-r2-blue-deep);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.35;
  text-transform: uppercase;
}

.tcjc-r2-theme-dark .tcjc-r2-chapter-header p { color: #9ecfe6; }

.tcjc-r2-chapter-header h1 {
  margin: 0;
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 5vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.tcjc-r2-font-sans .tcjc-r2-chapter-header h1 {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 780;
}

.tcjc-r2-chapter-rule {
  position: relative;
  width: 128px;
  height: 9px;
  margin: 24px auto 0;
  display: grid;
  place-items: center;
}

.tcjc-r2-chapter-rule::before,
.tcjc-r2-chapter-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,164,94,.9));
}

.tcjc-r2-chapter-rule::before { left: 0; transform: translateY(-50%); }
.tcjc-r2-chapter-rule::after { right: 0; transform: translateY(-50%) scaleX(-1); }

.tcjc-r2-chapter-rule span {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(198,164,94,.82);
  transform: rotate(45deg);
}

/* --------------------------- Audio narration --------------------------- */

.tcjc-r2-audio {
  width: min(760px, 100%);
  margin: calc(clamp(42px, 6vw, 68px) * -0.45) auto clamp(36px, 5vw, 56px);
  padding: 18px;
  border: 1px solid rgba(95,159,190,.22);
  border-radius: 20px;
  background: rgba(255,255,255,.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 12px 30px rgba(44,67,79,.08);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tcjc-r2-theme-dark .tcjc-r2-audio {
  border-color: rgba(158,207,230,.16);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.2);
}

.tcjc-r2-audio-heading,
.tcjc-r2-audio-controls,
.tcjc-r2-audio-settings {
  display: flex;
  align-items: center;
}

.tcjc-r2-audio-heading { gap: 12px; }
.tcjc-r2-audio-heading > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--tcjc-r2-blue-deep);
  background: rgba(95,159,190,.14);
}
.tcjc-r2-theme-dark .tcjc-r2-audio-heading > span { color: #a9d4e8; }
.tcjc-r2-audio-heading div { min-width: 0; display: grid; gap: 2px; }
.tcjc-r2-audio-heading strong { font-size: .94rem; letter-spacing: -.01em; }
.tcjc-r2-audio-heading small { color: var(--tcjc-r2-muted); font-size: .74rem; }

.tcjc-r2-audio-controls { gap: 8px; margin-top: 14px; }
.tcjc-r2-audio-controls button {
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(95,159,190,.22);
  border-radius: 12px;
  color: var(--tcjc-r2-blue-deep);
  background: rgba(255,255,255,.66);
  cursor: pointer;
}
.tcjc-r2-theme-dark .tcjc-r2-audio-controls button {
  color: #b5dced;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}
.tcjc-r2-audio-controls button:disabled { opacity: .38; cursor: default; }
.tcjc-r2-audio-controls .tcjc-r2-audio-play {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--tcjc-r2-blue), var(--tcjc-r2-blue-deep));
}
.tcjc-r2-audio-controls .tcjc-r2-audio-stop {
  width: auto;
  min-width: 58px;
  padding: 0 12px;
  margin-left: auto;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.tcjc-r2-audio-settings { gap: 14px; margin-top: 14px; }
.tcjc-r2-audio-settings label { min-width: 0; flex: 1; display: grid; gap: 6px; }
.tcjc-r2-audio-settings label > span {
  display: flex;
  justify-content: space-between;
  color: var(--tcjc-r2-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tcjc-r2-audio-settings select {
  width: 100%;
  min-height: 40px;
  padding: 0 34px 0 10px;
  border: 1px solid rgba(95,159,190,.2);
  border-radius: 10px;
  color: inherit;
  background: rgba(255,255,255,.58);
}
.tcjc-r2-theme-dark .tcjc-r2-audio-settings select { background: #242424; }
.tcjc-r2-audio-settings input { width: 100%; accent-color: var(--tcjc-r2-blue-deep); }

[data-r2-speech-index] {
  transition: background-color .2s ease, box-shadow .2s ease;
}

.tcjc-r2-speaking {
  background: rgba(95,159,190,.13) !important;
  box-shadow: 0 0 0 3px rgba(95,159,190,.13) !important;
}

.tcjc-r2-theme-dark .tcjc-r2-speaking {
  background: rgba(158,207,230,.12) !important;
  box-shadow: 0 0 0 3px rgba(158,207,230,.1) !important;
}

.tcjc-r2-hymn-audio audio {
  width: 100%;
  margin-top: 16px;
  accent-color: var(--tcjc-r2-blue-deep);
}

.tcjc-r2-hymn-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tcjc-r2-hymn-actions button,
.tcjc-r2-hymn-actions a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(95,159,190,.22);
  border-radius: 10px;
  color: var(--tcjc-r2-blue-deep);
  background: rgba(255,255,255,.58);
  font-size: .74rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.tcjc-r2-theme-dark .tcjc-r2-hymn-actions button,
.tcjc-r2-theme-dark .tcjc-r2-hymn-actions a {
  color: #b5dced;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}
.tcjc-r2-hymn-actions button:disabled { opacity: .55; cursor: wait; }
.tcjc-r2-hymn-status { margin: 10px 0 0; color: var(--tcjc-r2-muted); font-size: .72rem; }
.tcjc-r2-hymn-status.error { color: #a94a46; }
.tcjc-r2-hymn-unavailable { border-color: rgba(198,164,94,.32); }

@media (max-width: 520px) {
  .tcjc-r2-hymn-actions { align-items: stretch; flex-direction: column; }
  .tcjc-r2-hymn-actions button,
  .tcjc-r2-hymn-actions a { width: 100%; }
}

@media (max-width: 620px) {
  .tcjc-r2-audio { padding: 14px; border-radius: 17px; }
  .tcjc-r2-audio-settings { align-items: stretch; flex-direction: column; }
  .tcjc-r2-audio-controls button { min-width: 44px; min-height: 44px; }
}

@media (max-width: 720px) {
  .tcjc-r2-chapter-rule {
    width: 104px;
    margin-top: 18px;
  }

  .tcjc-r2-chapter-rule::before,
  .tcjc-r2-chapter-rule::after {
    width: 40px;
  }
}

.tcjc-r2-introduction {
  margin: 0 0 42px;
  padding: 26px 28px;
  border: 1px solid rgba(115,91,54,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.22);
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--tcjc-r2-font-size) * .94);
  font-style: italic;
  line-height: var(--tcjc-r2-line-height);
}

.tcjc-r2-introduction p { margin: 0 0 1em; }
.tcjc-r2-introduction p:last-child { margin-bottom: 0; }

.tcjc-r2-verse-list {
  display: grid;
  gap: .28em;
}

.tcjc-r2-verse {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr) 1.35em;
  align-items: start;
  gap: .55em;
  margin: 0;
  padding: .42em .48em .48em .18em;
  border: 1px solid transparent;
  border-radius: 12px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.tcjc-r2-verse:hover,
.tcjc-r2-verse:focus-visible {
  border-color: rgba(95,159,190,.20);
  background: rgba(255,255,255,.28);
  outline: none;
}

.tcjc-r2-theme-dark .tcjc-r2-verse:hover,
.tcjc-r2-theme-dark .tcjc-r2-verse:focus-visible {
  background: rgba(255,255,255,.045);
}

.tcjc-r2-verse:active { transform: scale(.997); }

.tcjc-r2-verse.target {
  border-color: rgba(77,151,189,.38);
  background: linear-gradient(90deg, rgba(77,151,189,.16), rgba(77,151,189,.07));
  box-shadow: 0 9px 24px rgba(65,124,154,.10);
  animation: tcjcR2TargetPulse 2.8s ease both;
}

.tcjc-r2-verse.saved:not(.target) {
  background: linear-gradient(90deg, rgba(198,164,94,.10), transparent 62%);
}

.tcjc-r2-verse-number {
  padding-top: .27em;
  color: var(--tcjc-r2-blue-deep);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: calc(var(--tcjc-r2-font-size) * .58);
  font-weight: 900;
  line-height: 1;
  text-align: right;
  user-select: none;
}

.tcjc-r2-theme-dark .tcjc-r2-verse-number { color: #94c6dd; }

.tcjc-r2-verse-text,
.tcjc-r2-paragraph-text {
  font-size: var(--tcjc-r2-font-size);
  line-height: var(--tcjc-r2-line-height);
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

.tcjc-r2-font-serif .tcjc-r2-verse-text,
.tcjc-r2-font-serif .tcjc-r2-paragraph-text {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .003em;
}

.tcjc-r2-font-sans .tcjc-r2-verse-text,
.tcjc-r2-font-sans .tcjc-r2-paragraph-text {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.006em;
}

.tcjc-r2-saved-mark {
  padding-top: .26em;
  color: var(--tcjc-r2-gold);
}

.tcjc-r2-saved-mark .tcjc-r2-icon { width: 16px; height: 16px; }

.tcjc-r2-hide-numbers .tcjc-r2-verse {
  grid-template-columns: minmax(0, 1fr) 1.35em;
  padding-left: .48em;
}

.tcjc-r2-hide-numbers .tcjc-r2-verse-number { display: none; }

.tcjc-r2-paragraph-text {
  display: block;
  text-align: left;
}

.tcjc-r2-paragraph-verse {
  display: inline;
  margin: 0;
  padding: .1em .08em .16em;
  border: 0;
  border-radius: 6px;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease;
}

.tcjc-r2-paragraph-verse:hover,
.tcjc-r2-paragraph-verse:focus-visible {
  background: rgba(95,159,190,.13);
  outline: none;
}

.tcjc-r2-paragraph-verse.target {
  background: rgba(95,159,190,.18);
  box-shadow: 0 0 0 4px rgba(95,159,190,.07);
  animation: tcjcR2TargetPulse 2.8s ease both;
}

.tcjc-r2-paragraph-verse.saved:not(.target) {
  background: rgba(198,164,94,.10);
}

.tcjc-r2-paragraph-verse sup {
  margin-right: .28em;
  color: var(--tcjc-r2-blue-deep);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .58em;
  font-weight: 900;
  line-height: 0;
}

.tcjc-r2-hide-numbers .tcjc-r2-paragraph-verse sup { display: none; }

/* -------------------------- Chapter navigation -------------------------- */

.tcjc-r2-chapter-nav {
  margin-top: clamp(52px, 8vw, 88px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tcjc-r2-chapter-nav button {
  min-width: 0;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(115,91,54,.15);
  border-radius: 16px;
  color: inherit;
  background: rgba(255,255,255,.24);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.tcjc-r2-theme-dark .tcjc-r2-chapter-nav button { background: rgba(255,255,255,.035); }

.tcjc-r2-chapter-nav button:last-child { justify-content: flex-end; text-align: right; }

.tcjc-r2-chapter-nav button:hover:not(:disabled),
.tcjc-r2-chapter-nav button:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(75,145,182,.34);
  background: rgba(148,184,205,.12);
  outline: none;
}

.tcjc-r2-chapter-nav button:disabled { opacity: .34; cursor: default; }
.tcjc-r2-chapter-nav .tcjc-r2-icon { width: 21px; height: 21px; flex: 0 0 auto; color: var(--tcjc-r2-blue-deep); }
.tcjc-r2-chapter-nav span { min-width: 0; }
.tcjc-r2-chapter-nav small,
.tcjc-r2-chapter-nav strong { display: block; }
.tcjc-r2-chapter-nav small { color: var(--tcjc-r2-muted); font-size: .68rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.tcjc-r2-chapter-nav strong { margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .86rem; font-weight: 850; }

.tcjc-r2-reader-footer {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  color: var(--tcjc-r2-muted);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .69rem;
  font-weight: 700;
  text-align: center;
}

.tcjc-r2-edge {
  position: sticky;
  top: 45svh;
  width: 42px;
  height: 72px;
  align-self: start;
  display: grid;
  place-items: center;
  margin-top: 26svh;
  border: 1px solid rgba(148,184,205,.26);
  border-radius: 16px;
  color: var(--tcjc-r2-blue-deep);
  background: rgba(255,255,255,.58);
  box-shadow: 0 12px 28px rgba(39,57,78,.10);
  cursor: pointer;
  opacity: .30;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.tcjc-r2-theme-dark .tcjc-r2-edge { color: #a6d1e4; background: rgba(255,255,255,.055); }
.tcjc-r2-edge:hover,
.tcjc-r2-edge:focus-visible { opacity: 1; transform: translateY(-2px); background: rgba(255,255,255,.86); outline: none; }
.tcjc-r2-theme-dark .tcjc-r2-edge:hover,
.tcjc-r2-theme-dark .tcjc-r2-edge:focus-visible { background: rgba(255,255,255,.10); }
.tcjc-r2-edge:disabled { opacity: 0; pointer-events: none; }
.tcjc-r2-edge .tcjc-r2-icon { width: 23px; height: 23px; }
.tcjc-r2-edge-left { justify-self: start; }
.tcjc-r2-edge-right { justify-self: end; }

/* ---------------------------- Page movement ----------------------------- */

.tcjc-r2-page-turn-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.42) 48%, rgba(121,95,58,.10) 52%, transparent);
}

.tcjc-r2-theme-dark .tcjc-r2-page-turn-layer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07) 48%, rgba(0,0,0,.26) 52%, transparent);
}

.tcjc-r2-is-turning .tcjc-r2-page-content {
  animation: tcjcR2ContentTurn 430ms cubic-bezier(.22,.7,.22,1) both;
}

.tcjc-r2-turn-next .tcjc-r2-page-turn-layer {
  transform-origin: right center;
  animation: tcjcR2TurnNext 430ms cubic-bezier(.22,.7,.22,1) both;
}

.tcjc-r2-turn-prev .tcjc-r2-page-turn-layer {
  transform-origin: left center;
  animation: tcjcR2TurnPrev 430ms cubic-bezier(.22,.7,.22,1) both;
}

/* ------------------------------ Sheets ---------------------------------- */

.tcjc-r2-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147481000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(14,20,24,.48);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
  backdrop-filter: blur(12px) saturate(1.04);
  animation: tcjcR2BackdropIn 180ms ease both;
}

.tcjc-r2-sheet {
  width: min(760px, 100%);
  max-height: min(820px, calc(100svh - 36px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 26px;
  color: #2d3742;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,247,244,.90));
  box-shadow: 0 38px 100px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.98);

}

.tcjc-r2-theme-dark .tcjc-r2-sheet {
  color: #f4efe7;
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(55,59,62,.98), rgba(31,35,38,.97));
  box-shadow: 0 38px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}

.tcjc-r2-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.tcjc-r2-sheet-header p {
  margin: 0 0 6px;
  color: #4c91b5;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.tcjc-r2-sheet-header h2 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 820;
  letter-spacing: -.04em;
  line-height: 1;
}

.tcjc-r2-location-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tcjc-r2-location-selects label:last-child:nth-child(3) { grid-column: 1 / -1; }
.tcjc-r2-location-selects label span,
.tcjc-r2-setting-heading span {
  display: block;
  margin: 0 0 7px;
  color: rgba(45,55,66,.64);
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.tcjc-r2-theme-dark .tcjc-r2-location-selects label span,
.tcjc-r2-theme-dark .tcjc-r2-setting-heading span { color: rgba(244,239,231,.63); }

.tcjc-r2-location-selects select {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(95,159,190,.25);
  border-radius: 13px;
  color: inherit;
  background: rgba(255,255,255,.68);
  font-size: .88rem;
  font-weight: 760;
}

.tcjc-r2-theme-dark .tcjc-r2-location-selects select {
  border-color: rgba(255,255,255,.12);
  background: #292d30;
}

.tcjc-r2-chapter-heading {
  margin: 26px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tcjc-r2-chapter-heading span { font-weight: 900; }
.tcjc-r2-chapter-heading small { color: rgba(45,55,66,.55); font-weight: 700; }
.tcjc-r2-theme-dark .tcjc-r2-chapter-heading small { color: rgba(244,239,231,.55); }

.tcjc-r2-chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 8px;
}

.tcjc-r2-chapter-grid button {
  min-height: 48px;
  padding: 7px;
  border: 1px solid rgba(95,159,190,.20);
  border-radius: 12px;
  color: inherit;
  background: rgba(255,255,255,.64);
  font-size: .8rem;
  font-weight: 850;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.tcjc-r2-theme-dark .tcjc-r2-chapter-grid button { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.10); }
.tcjc-r2-chapter-grid button:hover,
.tcjc-r2-chapter-grid button:focus-visible { transform: translateY(-1px); border-color: rgba(75,145,182,.46); background: rgba(148,184,205,.15); outline: none; }
.tcjc-r2-chapter-grid button.active { color: #fff; border-color: rgba(255,255,255,.52); background: linear-gradient(145deg, #83bcd7, #4f93b8 58%, #34799f); box-shadow: 0 8px 18px rgba(52,121,159,.18); }

.tcjc-r2-setting-group {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(95,159,190,.16);
  border-radius: 17px;
  background: rgba(255,255,255,.40);
}

.tcjc-r2-theme-dark .tcjc-r2-setting-group { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.035); }

.tcjc-r2-setting-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.tcjc-r2-setting-heading span { margin: 0; }
.tcjc-r2-setting-heading strong { color: #4c91b5; font-size: .78rem; }

.tcjc-r2-stepper {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 10px;
}
.tcjc-r2-stepper button {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid rgba(95,159,190,.24); border-radius: 13px;
  color: #34799f; background: rgba(255,255,255,.72); cursor: pointer;
}
.tcjc-r2-theme-dark .tcjc-r2-stepper button { color: #a9d4e8; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.11); }
.tcjc-r2-stepper .tcjc-r2-icon { width: 20px; height: 20px; }
.tcjc-r2-size-preview { text-align: center; font-family: Georgia, "Times New Roman", serif; }

.tcjc-r2-range { width: 100%; accent-color: #4f93b8; }

.tcjc-r2-choice-grid { display: grid; gap: 8px; }
.tcjc-r2-choice-grid.two { grid-template-columns: repeat(2, 1fr); }
.tcjc-r2-choice-grid.three { grid-template-columns: repeat(3, 1fr); }

.tcjc-r2-choice {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(95,159,190,.18);
  border-radius: 12px;
  color: inherit;
  background: rgba(255,255,255,.58);
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.tcjc-r2-theme-dark .tcjc-r2-choice { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.09); }
.tcjc-r2-choice.active { color: #fff; border-color: rgba(255,255,255,.48); background: linear-gradient(145deg, #83bcd7, #4f93b8 58%, #34799f); }
.tcjc-r2-choice .tcjc-r2-icon { width: 16px; height: 16px; }

.tcjc-r2-color-swatches { display: grid; grid-template-columns: repeat(6, 44px); gap: 12px; align-items: center; }
.tcjc-r2-color-swatch { width: 42px; height: 42px; padding: 0; border: 2px solid rgba(50,71,82,.18); border-radius: 50%; display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 4px 10px rgba(25,47,60,.12); }
.tcjc-r2-color-swatch.active { outline: 3px solid #5b9dbf; outline-offset: 3px; }
.tcjc-r2-color-swatch:focus-visible { outline: 3px solid #2e769c; outline-offset: 4px; }
.tcjc-r2-color-swatch .tcjc-r2-icon { width: 19px; height: 19px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.tcjc-r2-color-swatch.is-cream { background: #fbf5e8; }
.tcjc-r2-color-swatch.is-sepia { background: #efd7a8; }
.tcjc-r2-color-swatch.is-pink { background: #efcfd8; }
.tcjc-r2-color-swatch.is-blue { background: #cfe4ed; }
.tcjc-r2-color-swatch.is-violet { background: #ded4f1; }
.tcjc-r2-color-swatch.is-green { background: #d6e8d4; }
.tcjc-r2-color-swatch.is-charcoal { background: #292725; }
.tcjc-r2-color-swatch.is-brown { background: #493429; }
.tcjc-r2-color-swatch.is-midnight { background: #17283c; }
.tcjc-r2-color-swatch.is-deep-violet { background: #2e253f; }
.tcjc-r2-color-swatch.is-forest { background: #20382e; }
.tcjc-r2-color-swatch.is-slate { background: #34414a; }

.tcjc-r2-paper-violet:not(.tcjc-r2-theme-dark) { --tcjc-r2-paper: #eee8f7; --tcjc-r2-paper-deep: #dcd1ed; --tcjc-r2-ink: #302b3a; }
.tcjc-r2-paper-green:not(.tcjc-r2-theme-dark) { --tcjc-r2-paper: #e8f1e5; --tcjc-r2-paper-deep: #d3e2cf; --tcjc-r2-ink: #27352a; }
.tcjc-r2-theme-dark.tcjc-r2-paper-midnight { --tcjc-r2-paper: #172f4a; --tcjc-r2-paper-deep: #0b1828; --tcjc-r2-stage: #08111c; --tcjc-r2-ink: #edf4f8; }
.tcjc-r2-theme-dark.tcjc-r2-paper-deep-violet { --tcjc-r2-paper: #392b52; --tcjc-r2-paper-deep: #1d152d; --tcjc-r2-stage: #120d1c; --tcjc-r2-ink: #f2edf8; }
.tcjc-r2-theme-dark.tcjc-r2-paper-forest { --tcjc-r2-paper: #244535; --tcjc-r2-paper-deep: #10251b; --tcjc-r2-stage: #09150f; --tcjc-r2-ink: #eef5f0; }
.tcjc-r2-theme-dark.tcjc-r2-paper-slate { --tcjc-r2-paper: #40515d; --tcjc-r2-paper-deep: #222f37; --tcjc-r2-stage: #11191e; --tcjc-r2-ink: #f1f4f5; }
@media (max-width: 420px) { .tcjc-r2-color-swatches { grid-template-columns: repeat(6, 38px); gap: 8px; } .tcjc-r2-color-swatch { width: 36px; height: 36px; } }

.tcjc-r2-toggle-row {
  margin-top: 16px;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(95,159,190,.16);
  border-radius: 17px;
  background: rgba(255,255,255,.40);
}
.tcjc-r2-theme-dark .tcjc-r2-toggle-row { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.035); }
.tcjc-r2-toggle-row strong,
.tcjc-r2-toggle-row small { display: block; }
.tcjc-r2-toggle-row strong { font-size: .88rem; }
.tcjc-r2-toggle-row small { margin-top: 3px; color: rgba(45,55,66,.57); font-size: .72rem; line-height: 1.35; }
.tcjc-r2-theme-dark .tcjc-r2-toggle-row small { color: rgba(244,239,231,.57); }
.tcjc-r2-toggle-row input { width: 42px; height: 23px; accent-color: #4f93b8; }

.tcjc-r2-sheet-footer { margin-top: 20px; color: rgba(45,55,66,.50); font-size: .69rem; font-weight: 700; text-align: center; }
.tcjc-r2-theme-dark .tcjc-r2-sheet-footer { color: rgba(244,239,231,.48); }

.tcjc-r2-verse-sheet { width: min(620px, 100%); }
.tcjc-r2-verse-sheet blockquote {
  margin: 0 0 20px;
  padding: 18px 19px;
  border: 1px solid rgba(95,159,190,.16);
  border-radius: 16px;
  color: rgba(45,55,66,.82);
  background: rgba(148,184,205,.09);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.6;
}
.tcjc-r2-theme-dark .tcjc-r2-verse-sheet blockquote { color: rgba(244,239,231,.83); border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.035); }

.tcjc-r2-action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.tcjc-r2-action-grid button {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(95,159,190,.19);
  border-radius: 14px;
  color: inherit;
  background: rgba(255,255,255,.62);
  font-size: .78rem;
  font-weight: 820;
  cursor: pointer;
}
.tcjc-r2-theme-dark .tcjc-r2-action-grid button { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.tcjc-r2-action-grid button:hover,
.tcjc-r2-action-grid button:focus-visible { border-color: rgba(75,145,182,.44); background: rgba(148,184,205,.13); outline: none; }
.tcjc-r2-action-grid .tcjc-r2-icon { width: 20px; height: 20px; color: #3e84aa; }
.tcjc-r2-copy-link { width: 100%; min-height: 44px; margin-top: 10px; border: 0; border-radius: 12px; color: #34799f; background: transparent; font-size: .75rem; font-weight: 850; cursor: pointer; }
.tcjc-r2-copy-link:hover,
.tcjc-r2-copy-link:focus-visible { background: rgba(148,184,205,.10); outline: none; }

/* ------------------------------ States ---------------------------------- */

.tcjc-r2-state-card {
  position: relative;
  z-index: 2;
  width: min(520px, calc(100% - 36px));
  margin: 18svh auto;
  padding: 32px;
  border: 1px solid rgba(95,159,190,.18);
  border-radius: 20px;
  background: rgba(255,255,255,.34);
  text-align: center;
}
.tcjc-r2-state-card strong { display: block; font-size: 1.1rem; }
.tcjc-r2-state-card p { margin: 10px 0 0; color: var(--tcjc-r2-muted); line-height: 1.55; }
.tcjc-r2-loading-card span {
  width: 28px; height: 28px; display: block; margin: 0 auto 14px;
  border: 3px solid rgba(95,159,190,.18); border-top-color: #4f93b8; border-radius: 50%;
  animation: tcjcR2Spin .8s linear infinite;
}

.tcjc-r2-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tcjc-bottom-nav-space, 86px) + 18px);
  z-index: 2147482000;
  transform: translateX(-50%);
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 999px;
  color: #fff;
  background: rgba(39,57,78,.90);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: .76rem;
  font-weight: 850;
  animation: tcjcR2ToastIn 220ms ease both;
}

.tcjc-r2-icon {
  display: block;
  color: currentColor;
}



/* ------------------------- Night reading surfaces ---------------------- */

.tcjc-r2-theme-dark.tcjc-r2-paper-cream {
  --tcjc-r2-paper: #292725;
  --tcjc-r2-paper-deep: #1b1a19;
  --tcjc-r2-stage: #0c0e10;
}

.tcjc-r2-theme-dark.tcjc-r2-paper-sepia {
  --tcjc-r2-ink: #f0e2d0;
  --tcjc-r2-muted: #bea992;
  --tcjc-r2-paper: #402f25;
  --tcjc-r2-paper-deep: #241914;
  --tcjc-r2-stage: #120d0a;
  background:
    radial-gradient(circle at 50% -10%, rgba(151,104,69,.16), transparent 34rem),
    linear-gradient(180deg, #17100d 0%, #0d0907 58%, #070504 100%);
}

.tcjc-r2-theme-dark.tcjc-r2-paper-sepia .tcjc-r2-canvas {
  border-color: rgba(198,153,111,.14);
  background:
    radial-gradient(circle at 14% 8%, rgba(214,165,112,.07), transparent 19rem),
    radial-gradient(circle at 88% 4%, rgba(0,0,0,.24), transparent 18rem),
    linear-gradient(90deg, rgba(0,0,0,.13), transparent 9%, transparent 91%, rgba(0,0,0,.13)),
    linear-gradient(180deg, var(--tcjc-r2-paper), var(--tcjc-r2-paper-deep));
  box-shadow:
    0 28px 72px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 10px 0 24px rgba(0,0,0,.12),
    inset -10px 0 24px rgba(0,0,0,.12);
}

/* ---------------------------- Responsive -------------------------------- */
@media (max-width: 860px) {
  .tcjc-r2 {
    padding-top: calc(var(--tcjc-fixed-header-space, 74px) + 12px);
    padding-bottom: calc(var(--tcjc-bottom-nav-space, 82px) + 20px);
  }

  .tcjc-r2-stage {
    width: calc(100% - 8px);
    grid-template-columns: minmax(0, 1fr);
  }

  .tcjc-r2-edge { display: none; }

  .tcjc-r2-canvas {
    min-height: 76svh;
    border-radius: 22px;
  }

  .tcjc-r2-page-content {
    width: calc(100% - 22px);
    padding: 48px 0 58px;
  }

  .tcjc-r2-chapter-header { margin-bottom: 38px; }
  .tcjc-r2-chapter-header p { font-size: .65rem; }
  .tcjc-r2-chapter-header h1 { font-size: clamp(2.15rem, 11vw, 3.5rem); }
  .tcjc-r2-verse { grid-template-columns: 1.8em minmax(0, 1fr) 1.15em; gap: .43em; padding-left: .05em; padding-right: .2em; }
  .tcjc-r2-hide-numbers .tcjc-r2-verse { grid-template-columns: minmax(0, 1fr) 1.15em; padding-left: .2em; }

  .tcjc-r2-sheet-backdrop {
    padding: 0;
  }

  .tcjc-r2-sheet {
    width: 100%;
    max-height: min(88svh, 840px);
    padding: 20px 16px calc(18px + env(safe-area-inset-bottom));

  }

  .tcjc-r2-location-selects { grid-template-columns: 1fr; }
  .tcjc-r2-location-selects label:last-child:nth-child(3) { grid-column: auto; }
  .tcjc-r2-chapter-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }

  .tcjc-r2-toast { bottom: calc(var(--tcjc-bottom-nav-space, 82px) + 10px); }
}

@media (max-width: 520px) {
  .tcjc-r2-page-content { width: calc(100% - 18px); padding-top: 42px; }
  .tcjc-r2-introduction { padding: 20px; }
  .tcjc-r2-chapter-nav { grid-template-columns: 1fr; }
  .tcjc-r2-chapter-nav button:last-child { grid-row: 1; }
  .tcjc-r2-reader-footer span:last-child,
  .tcjc-r2-reader-footer span:nth-child(2) { display: none; }
  .tcjc-r2-action-grid { grid-template-columns: 1fr 1fr; }
  .tcjc-r2-choice-grid.three { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .tcjc-r2-page-content { padding-top: 58px; padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .tcjc-r2 *,
  .tcjc-r2-sheet-backdrop,
  .tcjc-r2-sheet {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@keyframes tcjcR2TurnNext {
  0% { opacity: 0; transform: translateX(55%) scaleX(.30); }
  35% { opacity: .72; }
  100% { opacity: 0; transform: translateX(-55%) scaleX(.30); }
}

@keyframes tcjcR2TurnPrev {
  0% { opacity: 0; transform: translateX(-55%) scaleX(.30); }
  35% { opacity: .72; }
  100% { opacity: 0; transform: translateX(55%) scaleX(.30); }
}

@keyframes tcjcR2ContentTurn {
  0% { opacity: 1; transform: translateX(0); }
  34% { opacity: .76; transform: translateX(4px); }
  58% { opacity: .76; transform: translateX(-4px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes tcjcR2TargetPulse {
  0% { box-shadow: 0 0 0 0 rgba(75,145,182,.24); }
  30% { box-shadow: 0 0 0 8px rgba(75,145,182,.08); }
  100% { box-shadow: 0 0 0 0 rgba(75,145,182,0); }
}

@keyframes tcjcR2BackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tcjcR2SheetIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tcjcR2SheetUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tcjcR2ToastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes tcjcR2Spin { to { transform: rotate(360deg); } }


/* ========================================================================== 
   TCJC READER REFINEMENT — STRONG SAVED VERSE STATE
   ========================================================================== */

.tcjc-r2-verse.saved:not(.target) {
  border-color: rgba(172, 126, 39, .42);
  background:
    linear-gradient(90deg, rgba(220, 184, 103, .28), rgba(255, 248, 224, .22) 72%, rgba(198, 164, 94, .12));
  box-shadow:
    inset 4px 0 0 rgba(191, 139, 43, .92),
    0 8px 22px rgba(117, 84, 28, .09);
}

.tcjc-r2-verse.saved:not(.target) .tcjc-r2-verse-number {
  color: #9b6716;
}

.tcjc-r2-verse.saved:not(.target) .tcjc-r2-saved-mark {
  width: 30px;
  height: 30px;
  margin-top: .03em;
  padding: 0;
  display: grid;
  place-items: center;
  align-self: start;
  border: 1px solid rgba(151, 100, 21, .28);
  border-radius: 9px;
  color: #fffaf0;
  background: linear-gradient(180deg, #d8b45e, #b9842c);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 5px 12px rgba(101, 70, 19, .18);
}

.tcjc-r2-verse.saved:not(.target) .tcjc-r2-saved-mark .tcjc-r2-icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.4;
}

.tcjc-r2-paragraph-verse.saved:not(.target) {
  background: rgba(216, 177, 88, .28);
  box-shadow:
    inset 0 -3px 0 rgba(174, 122, 31, .82),
    0 0 0 3px rgba(216, 177, 88, .10);
}

.tcjc-r2-theme-dark .tcjc-r2-verse.saved:not(.target) {
  border-color: rgba(225, 190, 113, .42);
  background:
    linear-gradient(90deg, rgba(151, 108, 33, .38), rgba(87, 66, 34, .20) 72%, rgba(198, 164, 94, .12));
  box-shadow:
    inset 4px 0 0 rgba(220, 178, 84, .92),
    0 9px 24px rgba(0, 0, 0, .18);
}

.tcjc-r2-theme-dark .tcjc-r2-verse.saved:not(.target) .tcjc-r2-verse-number {
  color: #f0cf86;
}

.tcjc-r2-theme-dark .tcjc-r2-paragraph-verse.saved:not(.target) {
  background: rgba(173, 126, 39, .34);
  box-shadow:
    inset 0 -3px 0 rgba(226, 187, 97, .82),
    0 0 0 3px rgba(198, 164, 94, .09);
}


/* ----------------------- Cover-based Scripture Library ------------------ */

.tcjc-r2-location-sheet {
  width: min(920px, 100%);
}

.tcjc-r2-library-shelf {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 126px;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px 4px 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(76,145,181,.42) transparent;
}

.tcjc-r2-library-shelf::-webkit-scrollbar {
  height: 7px;
}

.tcjc-r2-library-shelf::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(76,145,181,.36);
}

.tcjc-r2-library-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(34px, auto);
  align-content: start;
  gap: 8px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.tcjc-r2-library-card:hover,
.tcjc-r2-library-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(76,145,181,.30);
  background: rgba(148,184,205,.10);
  outline: none;
}

.tcjc-r2-library-card.active {
  border-color: rgba(76,145,181,.48);
  background: rgba(148,184,205,.16);
  box-shadow: 0 12px 26px rgba(40,76,97,.14);
}

.tcjc-r2-library-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  box-shadow:
    0 10px 20px rgba(20,35,45,.22),
    0 1px 0 rgba(255,255,255,.62) inset;
}

.tcjc-r2-library-card span {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: .72rem;
  font-weight: 850;
  line-height: 1.18;
  text-align: center;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tcjc-r2-library-detail {
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid rgba(76,145,181,.18);
}

.tcjc-r2-library-detail-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.tcjc-r2-library-detail-heading small,
.tcjc-r2-testament-heading small {
  display: block;
  margin-bottom: 4px;
  color: #4c91b5;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tcjc-r2-library-detail-heading h3,
.tcjc-r2-testament-heading h3 {
  margin: 0;
  font-size: clamp(1.08rem, 2.8vw, 1.42rem);
  line-height: 1.05;
}

.tcjc-r2-library-detail-heading > span {
  flex: 0 0 auto;
  color: rgba(45,55,66,.56);
  font-size: .74rem;
  font-weight: 800;
}

.tcjc-r2-theme-dark .tcjc-r2-library-detail-heading > span {
  color: rgba(244,239,231,.58);
}

.tcjc-r2-testament-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tcjc-r2-bible-introduction-group {
  grid-column: 1 / -1;
}

.tcjc-r2-bible-introduction-group button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(76,145,181,.22);
  border-radius: 16px;
  color: #2d3742;
  background: rgba(255,255,255,.48);
  text-align: left;
}

.tcjc-r2-bible-introduction-group button.active {
  border-color: #4c91b5;
  color: #246f98;
  background: rgba(76,145,181,.12);
}

.tcjc-r2-bible-introduction-group svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.tcjc-r2-bible-introduction-group span,
.tcjc-r2-bible-introduction-group small,
.tcjc-r2-bible-introduction-group strong {
  display: block;
}

.tcjc-r2-bible-introduction-group small {
  margin-bottom: 2px;
  color: #4c91b5;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tcjc-r2-bible-introduction-group strong {
  font-size: 1rem;
}

.tcjc-r2-theme-dark .tcjc-r2-bible-introduction-group button {
  border-color: rgba(255,255,255,.12);
  color: #f4efe7;
  background: rgba(255,255,255,.045);
}

.tcjc-r2-theme-dark .tcjc-r2-bible-introduction-group button.active {
  border-color: #79c1e5;
  color: #a9dbf3;
  background: rgba(76,145,181,.18);
}

.tcjc-r2-testament-group {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(76,145,181,.17);
  border-radius: 18px;
  background: rgba(255,255,255,.34);
}

.tcjc-r2-theme-dark .tcjc-r2-testament-group {
  border-color: rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
}

.tcjc-r2-testament-heading {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tcjc-r2-testament-heading img {
  width: 64px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 7px 16px rgba(24,40,52,.20);
}

.tcjc-r2-bible-book-grid,
.tcjc-r2-subbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 7px;
}

.tcjc-r2-bible-book-grid button,
.tcjc-r2-subbook-grid button {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(95,159,190,.18);
  border-radius: 11px;
  color: inherit;
  background: rgba(255,255,255,.58);
  font-size: .73rem;
  font-weight: 800;
  line-height: 1.15;
  cursor: pointer;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.tcjc-r2-theme-dark .tcjc-r2-bible-book-grid button,
.tcjc-r2-theme-dark .tcjc-r2-subbook-grid button {
  border-color: rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
}

.tcjc-r2-bible-book-grid button:hover,
.tcjc-r2-bible-book-grid button:focus-visible,
.tcjc-r2-subbook-grid button:hover,
.tcjc-r2-subbook-grid button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(75,145,182,.44);
  background: rgba(148,184,205,.15);
  outline: none;
}

.tcjc-r2-bible-book-grid button.active,
.tcjc-r2-subbook-grid button.active {
  color: #fff;
  border-color: rgba(255,255,255,.48);
  background: linear-gradient(145deg, #83bcd7, #4f93b8 58%, #34799f);
  box-shadow: 0 8px 18px rgba(52,121,159,.18);
}

@media (max-width: 720px) {
  .tcjc-r2-location-sheet {
    padding: 19px;
  }

  .tcjc-r2-library-shelf {
    grid-auto-columns: 112px;
    gap: 10px;
    margin-inline: -4px;
  }

  .tcjc-r2-library-card {
    padding: 6px;
  }

  .tcjc-r2-testament-layout {
    grid-template-columns: 1fr;
  }

  .tcjc-r2-library-detail-heading {
    align-items: flex-start;
  }

  .tcjc-r2-bible-book-grid,
  .tcjc-r2-subbook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .tcjc-r2-library-shelf {
    grid-auto-columns: 104px;
  }

  .tcjc-r2-library-card span {
    font-size: .67rem;
  }

  .tcjc-r2-testament-group {
    padding: 12px;
  }

  .tcjc-r2-testament-heading {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .tcjc-r2-testament-heading img {
    width: 54px;
  }
}


/* ==========================================================================
   READER COVER FRAME CLEANUP v89
   Remove browser/default rectangular button frames from the cover shelf in
   both day and night modes. Active/focus feedback is applied to the cover.
   ========================================================================== */

.tcjc-r2-library-card,
.tcjc-r2-library-card:hover,
.tcjc-r2-library-card:focus,
.tcjc-r2-library-card:focus-visible,
.tcjc-r2-library-card:active,
.tcjc-r2-library-card.active {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tcjc-r2-library-card {
  padding: 6px !important;
  border-radius: 14px !important;
}

.tcjc-r2-library-card:hover,
.tcjc-r2-library-card:focus-visible {
  transform: translateY(-3px);
}

.tcjc-r2-library-card.active img {
  box-shadow:
    0 0 0 3px rgba(79, 159, 200, .48),
    0 12px 24px rgba(20,35,45,.24),
    inset 0 1px 0 rgba(255,255,255,.62);
}

.tcjc-r2-library-card:focus-visible img {
  box-shadow:
    0 0 0 3px rgba(79, 159, 200, .58),
    0 12px 24px rgba(20,35,45,.24),
    inset 0 1px 0 rgba(255,255,255,.62);
}

.tcjc-r2-theme-dark .tcjc-r2-library-card,
.tcjc-r2-theme-dark .tcjc-r2-library-card:hover,
.tcjc-r2-theme-dark .tcjc-r2-library-card:focus,
.tcjc-r2-theme-dark .tcjc-r2-library-card:focus-visible,
.tcjc-r2-theme-dark .tcjc-r2-library-card:active,
.tcjc-r2-theme-dark .tcjc-r2-library-card.active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tcjc-r2-theme-dark .tcjc-r2-library-card.active img,
.tcjc-r2-theme-dark .tcjc-r2-library-card:focus-visible img {
  box-shadow:
    0 0 0 3px rgba(154, 203, 225, .62),
    0 14px 28px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.30);
}

/* ==========================================================================
   READER CURRENT BOOK FOCUS — CONSOLIDATED v71
   Keep every cover exactly the same size. Reserve a badge row above every
   cover so CURRENT BOOK cannot clip, resize the grid track, or cover titles.
   ========================================================================== */

.tcjc-r2-library-shelf {
  align-items: start;
  padding-top: 18px;
  scroll-padding-inline: 50%;
}

.tcjc-r2-library-card,
.tcjc-r2-library-card.active {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-rows: 24px auto minmax(34px, auto) !important;
  align-content: start;
  padding: 6px !important;
  transform: none !important;
}

.tcjc-r2-library-card:hover,
.tcjc-r2-library-card:focus-visible {
  transform: translateY(-2px) !important;
}

.tcjc-r2-library-card.active,
.tcjc-r2-library-card.active:hover,
.tcjc-r2-library-card.active:focus-visible {
  transform: translateY(-4px) !important;
}

.tcjc-r2-library-card.active::after {
  content: none !important;
  display: none !important;
}

.tcjc-r2-current-book-badge,
.tcjc-r2-current-book-badge-placeholder {
  box-sizing: border-box;
  width: calc(100% - 4px) !important;
  min-width: 0 !important;
  max-width: 116px !important;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
}

.tcjc-r2-current-book-badge {
  padding: 5px 6px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 999px;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(145deg, #75b4d3, #3f86ad);
  box-shadow:
    0 7px 16px rgba(42, 93, 122, .24),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  font-size: .49rem;
  font-weight: 950;
  letter-spacing: .075em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(18, 52, 72, .34);
  text-transform: uppercase;
}

.tcjc-r2-current-book-badge-placeholder {
  visibility: hidden;
}

.tcjc-r2-library-card img,
.tcjc-r2-library-card.active img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.tcjc-r2-library-card.active img {
  box-shadow:
    0 0 0 2px rgba(79, 159, 200, .52),
    0 12px 24px rgba(20, 35, 45, .24),
    inset 0 1px 0 rgba(255, 255, 255, .62);
}

.tcjc-r2-theme-dark .tcjc-r2-library-card.active img {
  box-shadow:
    0 0 0 2px rgba(154, 203, 225, .62),
    0 14px 28px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .30);
}

@media (max-width: 720px) {
  .tcjc-r2-library-shelf {
    padding-top: 16px;
  }

  .tcjc-r2-library-card,
  .tcjc-r2-library-card.active {
    grid-template-rows: 22px auto minmax(34px, auto) !important;
    transform: none !important;
  }

  .tcjc-r2-library-card:hover,
  .tcjc-r2-library-card:focus-visible {
    transform: translateY(-1px) !important;
  }

  .tcjc-r2-library-card.active,
  .tcjc-r2-library-card.active:hover,
  .tcjc-r2-library-card.active:focus-visible {
    transform: translateY(-3px) !important;
  }

  .tcjc-r2-current-book-badge,
  .tcjc-r2-current-book-badge-placeholder {
    max-width: 98px !important;
    min-height: 22px;
  }

  .tcjc-r2-current-book-badge {
    padding: 4px 5px;
    font-size: .46rem;
    letter-spacing: .06em;
  }
}


/* ==========================================================================
   CURRENT BOOK BADGE TEXT FIT v72
   Keep the full label on one line without widening or resizing the book card.
   ========================================================================== */

.tcjc-r2-current-book-badge,
.tcjc-r2-current-book-badge-placeholder {
  width: calc(100% - 2px) !important;
  max-width: 124px !important;
  overflow: visible !important;
}

.tcjc-r2-current-book-badge {
  padding: 5px 6px !important;
  font-size: .43rem !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  .tcjc-r2-current-book-badge,
  .tcjc-r2-current-book-badge-placeholder {
    width: calc(100% - 2px) !important;
    max-width: 104px !important;
  }

  .tcjc-r2-current-book-badge {
    padding: 4px 5px !important;
    font-size: .40rem !important;
    letter-spacing: .035em !important;
  }
}


/* ==========================================================================
   CURRENT BOOK BADGE TEXT BALANCE v73
   Increase label size while preserving the equal-size book cards.
   ========================================================================== */

.tcjc-r2-current-book-badge,
.tcjc-r2-current-book-badge-placeholder {
  width: calc(100% - 2px) !important;
  max-width: 132px !important;
}

.tcjc-r2-current-book-badge {
  padding: 6px 7px !important;
  font-size: .56rem !important;
  letter-spacing: .055em !important;
  line-height: 1 !important;
}

@media (max-width: 720px) {
  .tcjc-r2-current-book-badge,
  .tcjc-r2-current-book-badge-placeholder {
    max-width: 106px !important;
  }

  .tcjc-r2-current-book-badge {
    padding: 5px 6px !important;
    font-size: .48rem !important;
    letter-spacing: .035em !important;
  }
}



/* ==========================================================================
   TCJC READER LIGHT PAPER COLORS — PINK AND BLUE
   ========================================================================== */

.tcjc-r2-paper-pink:not(.tcjc-r2-theme-dark) {
  --tcjc-r2-paper: #f7e5e9;
  --tcjc-r2-paper-deep: #ebcdd5;
  --tcjc-r2-ink: #3e3034;
  --tcjc-r2-muted: #806a71;
  --tcjc-r2-stage: #f1e9eb;

  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(255, 255, 255, .78),
      transparent 34rem
    ),
    linear-gradient(
      180deg,
      #f8f2f3 0%,
      #eee5e8 56%,
      #e5dade 100%
    );
}

.tcjc-r2-paper-blue:not(.tcjc-r2-theme-dark) {
  --tcjc-r2-paper: #e3f0f5;
  --tcjc-r2-paper-deep: #cbdfe8;
  --tcjc-r2-ink: #293b46;
  --tcjc-r2-muted: #667e8a;
  --tcjc-r2-stage: #eaf1f3;

  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(255, 255, 255, .82),
      transparent 34rem
    ),
    linear-gradient(
      180deg,
      #f0f6f8 0%,
      #e3edef 56%,
      #d9e5e8 100%
    );
}

.tcjc-r2-theme-dark.tcjc-r2-paper-pink,
.tcjc-r2-theme-dark.tcjc-r2-paper-blue {
  --tcjc-r2-paper: #292725;
  --tcjc-r2-paper-deep: #1b1a19;
  --tcjc-r2-stage: #0c0e10;
}

/* END TCJC READER LIGHT PAPER COLORS */

/* ==========================================================================
   v70 PREVIEW — COMPACT, RIGHT-ALIGNED READER AUDIO
   ========================================================================== */

.tcjc-r2-page-content > .tcjc-r2-audio {
  width: min(390px, 100%);
  margin: calc(clamp(42px, 6vw, 68px) * -0.38) 0 clamp(28px, 4vw, 42px) auto;
  padding: 10px 11px;
  border-color: rgba(95, 159, 190, .17);
  border-radius: 15px;
  background: rgba(255, 255, 255, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    0 7px 18px rgba(44, 67, 79, .055);
}

.tcjc-r2-theme-dark .tcjc-r2-page-content > .tcjc-r2-audio {
  border-color: rgba(158, 207, 230, .12);
  background: rgba(255, 255, 255, .035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 7px 18px rgba(0, 0, 0, .14);
}

.tcjc-r2-audio-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tcjc-r2-audio .tcjc-r2-audio-heading {
  min-width: 0;
  gap: 8px;
}

.tcjc-r2-audio .tcjc-r2-audio-heading > span {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: rgba(95, 159, 190, .1);
}

.tcjc-r2-audio .tcjc-r2-audio-heading > span .tcjc-app-nav-icon {
  width: 17px;
  height: 17px;
}

.tcjc-r2-audio .tcjc-r2-audio-heading strong {
  font-size: .79rem;
  font-weight: 820;
}

.tcjc-r2-audio .tcjc-r2-audio-heading small {
  max-width: 118px;
  overflow: hidden;
  font-size: .62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcjc-r2-audio .tcjc-r2-audio-controls {
  flex: 0 0 auto;
  gap: 5px;
  margin-top: 0;
}

.tcjc-r2-audio .tcjc-r2-audio-controls button {
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .42);
}

.tcjc-r2-audio .tcjc-r2-audio-controls button .tcjc-app-nav-icon {
  width: 17px;
  height: 17px;
}

.tcjc-r2-audio .tcjc-r2-audio-controls .tcjc-r2-audio-stop {
  min-width: 45px;
  margin-left: 0;
  padding: 0 7px;
  font-size: .57rem;
  letter-spacing: .05em;
}

.tcjc-r2-audio-options {
  margin-top: 7px;
  border-top: 1px solid rgba(95, 159, 190, .12);
}

.tcjc-r2-audio-options summary {
  width: fit-content;
  margin-left: auto;
  padding: 7px 2px 0 10px;
  color: var(--tcjc-r2-muted);
  font-size: .62rem;
  font-weight: 780;
  letter-spacing: .045em;
  cursor: pointer;
}

.tcjc-r2-audio-options summary:focus-visible {
  border-radius: 5px;
  outline: 2px solid var(--tcjc-r2-blue-deep);
  outline-offset: 2px;
}

.tcjc-r2-audio-options .tcjc-r2-audio-settings {
  align-items: end;
  gap: 10px;
  margin-top: 9px;
}

.tcjc-r2-audio-options .tcjc-r2-audio-settings label {
  gap: 4px;
}

.tcjc-r2-audio-options .tcjc-r2-audio-settings label > span {
  font-size: .58rem;
}

.tcjc-r2-audio-options .tcjc-r2-audio-settings select {
  min-height: 36px;
  font-size: .68rem;
}

.tcjc-r2-hymn-audio audio {
  margin-top: 10px;
}

.tcjc-r2-hymn-actions {
  margin-top: 8px;
}

@media (max-width: 620px) {
  .tcjc-r2-page-content > .tcjc-r2-audio {
    width: min(350px, calc(100% - 4px));
    margin-right: 2px;
    padding: 9px;
    border-radius: 14px;
  }

  .tcjc-r2-audio-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .tcjc-r2-audio .tcjc-r2-audio-controls {
    width: 100%;
    justify-content: flex-end;
  }

  .tcjc-r2-audio .tcjc-r2-audio-controls button {
    min-width: 44px;
    min-height: 44px;
  }

  .tcjc-r2-audio-options .tcjc-r2-audio-settings {
    align-items: stretch;
    flex-direction: column;
  }
}

/* END v70 COMPACT READER AUDIO */

/* ==========================================================================
   v70 PREVIEW — DISCREET FLOATING AUDIO PLAYERS
   ========================================================================== */

.tcjc-r2-floating-audio {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(var(--tcjc-bottom-nav-space, 94px) + env(safe-area-inset-bottom) + 12px);
  z-index: 2147483200;
  width: 48px;
  height: 48px;
  margin: 0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: opacity .22s ease, transform .28s cubic-bezier(.22, .7, .2, 1);
  will-change: opacity, transform;
}

body.tcjc-app-chrome-hidden .tcjc-r2-floating-audio,
.tcjc-app-shell.tcjc-app-chrome-hidden .tcjc-r2-floating-audio {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 28px));
}

.tcjc-r2-audio-launcher {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #70b2d1, #367896);
  box-shadow:
    0 10px 25px rgba(29, 62, 78, .28),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tcjc-r2-audio-launcher .tcjc-app-nav-icon {
  width: 21px;
  height: 21px;
}

.tcjc-r2-audio-launcher-status {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: #c6d3d8;
}

.tcjc-r2-floating-audio.is-playing .tcjc-r2-audio-launcher-status {
  background: #7fe1a5;
  animation: tcjc-r2-audio-pulse 1.8s ease-in-out infinite;
}

.tcjc-r2-audio-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(292px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid rgba(99, 154, 180, .22);
  border-radius: 18px;
  color: #263e4a;
  background: rgba(252, 253, 251, .94);
  box-shadow: 0 18px 48px rgba(24, 48, 60, .24), inset 0 1px 0 #fff;
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
}

.tcjc-r2-audio-popover header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tcjc-r2-audio-popover header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tcjc-r2-audio-popover header strong {
  font-size: .84rem;
  font-weight: 820;
  letter-spacing: -.012em;
}

.tcjc-r2-audio-popover header small {
  overflow: hidden;
  color: #6e818a;
  font-size: .66rem;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.tcjc-r2-audio-popover header small.is-error { color: #a24643; }

.tcjc-r2-audio-popover header > button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #5f7783;
  background: rgba(93, 145, 170, .09);
  cursor: pointer;
}

.tcjc-r2-audio-popover header > button .tcjc-app-nav-icon {
  width: 17px;
  height: 17px;
}

.tcjc-r2-audio-popover > p {
  margin: 10px 0 0;
  color: #6c7d85;
  font-size: .65rem;
  line-height: 1.45;
}

.tcjc-r2-floating-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.tcjc-r2-floating-controls button,
.tcjc-r2-hymn-play {
  display: inline-flex;
  min-width: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  border: 1px solid rgba(88, 140, 165, .18);
  border-radius: 12px;
  color: #35667d;
  background: rgba(230, 241, 246, .68);
  font: inherit;
  cursor: pointer;
}

.tcjc-r2-floating-controls button:disabled {
  opacity: .38;
  cursor: default;
}

.tcjc-r2-floating-controls .tcjc-r2-floating-play {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #70b2d1, #367896);
}

.tcjc-r2-floating-controls .tcjc-r2-floating-stop {
  min-width: 54px;
  margin-left: auto;
  padding: 0 10px;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tcjc-r2-floating-speed {
  display: grid;
  gap: 5px;
  margin-top: 11px;
}

.tcjc-r2-floating-speed > span {
  display: flex;
  justify-content: space-between;
  color: #6c7e87;
  font-size: .6rem;
  font-weight: 820;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tcjc-r2-floating-speed input {
  width: 100%;
  accent-color: #3d829f;
}

.tcjc-r2-hymn-popover { width: min(270px, calc(100vw - 24px)); }

.tcjc-r2-hymn-play {
  width: 100%;
  margin-top: 12px;
  padding-inline: 14px;
  font-size: .7rem;
  font-weight: 800;
}

.tcjc-r2-hymn-play .tcjc-app-nav-icon {
  width: 18px;
  height: 18px;
}

.tcjc-r2-theme-dark .tcjc-r2-audio-popover {
  color: #f3eee6;
  border-color: rgba(170, 211, 230, .15);
  background: rgba(31, 34, 35, .95);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.tcjc-r2-theme-dark .tcjc-r2-audio-popover header small,
.tcjc-r2-theme-dark .tcjc-r2-audio-popover > p,
.tcjc-r2-theme-dark .tcjc-r2-floating-speed > span { color: #aebbc0; }

.tcjc-r2-theme-dark .tcjc-r2-audio-popover header > button,
.tcjc-r2-theme-dark .tcjc-r2-floating-controls button,
.tcjc-r2-theme-dark .tcjc-r2-hymn-play {
  color: #b8deee;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .065);
}

.tcjc-r2-theme-dark .tcjc-r2-floating-controls .tcjc-r2-floating-play {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #70b2d1, #367896);
}

@keyframes tcjc-r2-audio-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(127, 225, 165, .38); }
  50% { box-shadow: 0 0 0 5px rgba(127, 225, 165, 0); }
}

@media (max-width: 620px) {
  .tcjc-r2-floating-audio {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--tcjc-bottom-nav-space, 80px) + env(safe-area-inset-bottom) + 10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcjc-r2-floating-audio { transition: none; }
  .tcjc-r2-floating-audio.is-playing .tcjc-r2-audio-launcher-status { animation: none; }
}

/* END v70 DISCREET FLOATING AUDIO PLAYERS */

/* ==========================================================================
   v70 COMPACT INLINE FLOATING PLAYERS — NO POPOVER
   ========================================================================== */

.tcjc-r2-floating-audio {
  width: auto;
  height: auto;
}

.tcjc-r2-mini-player {
  width: min(306px, calc(100vw - 28px));
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 8px 7px 13px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #70b2d1, #367896);
  box-shadow:
    0 10px 25px rgba(29, 62, 78, .28),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}

.tcjc-r2-mini-player-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tcjc-r2-mini-player-copy strong,
.tcjc-r2-mini-player-copy small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tcjc-r2-mini-player-copy strong {
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: -.01em;
}

.tcjc-r2-mini-player-copy small {
  color: rgba(255, 255, 255, .78);
  font-size: .59rem;
  line-height: 1.2;
}

.tcjc-r2-mini-player-copy small.is-error {
  color: #fff0d1;
}

.tcjc-r2-mini-player-controls {
  display: flex;
  align-items: center;
  gap: 3px;
}

.tcjc-r2-mini-player-controls button,
.tcjc-r2-mini-player > .tcjc-r2-mini-player-primary {
  display: grid;
  width: 34px;
  height: 40px;
  flex: 0 0 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, .09);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tcjc-r2-mini-player-controls button:disabled {
  opacity: .38;
  cursor: default;
}

.tcjc-r2-mini-player-controls .tcjc-r2-mini-player-primary,
.tcjc-r2-mini-player > .tcjc-r2-mini-player-primary {
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.tcjc-r2-mini-player-controls .tcjc-r2-mini-player-cancel {
  color: #fff;
  background: rgba(18, 54, 71, .22);
}

.tcjc-r2-mini-player .tcjc-app-nav-icon {
  width: 18px;
  height: 18px;
}

.tcjc-r2-mini-hymn-player {
  width: min(238px, calc(100vw - 28px));
}

@media (max-width: 420px) {
  .tcjc-r2-mini-player {
    width: min(280px, calc(100vw - 24px));
    min-height: 54px;
    padding-left: 11px;
  }

  .tcjc-r2-mini-player-controls button,
  .tcjc-r2-mini-player > .tcjc-r2-mini-player-primary {
    width: 32px;
    height: 38px;
    flex-basis: 32px;
  }

  .tcjc-r2-mini-hymn-player {
    width: min(224px, calc(100vw - 24px));
  }
}

/* END v70 COMPACT INLINE FLOATING PLAYERS */

/* ==========================================================================
   v94 INSTANT ISABELLA — READER BOTTOM-BAR AUDIO CONTROL
   ========================================================================== */

.tcjc-r2-isabella-nav-item {
  position: relative;
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tcjc-r2-isabella-nav-trigger {
  width: 100%;
  min-width: 0;
  height: 100%;
}

.tcjc-r2-isabella-nav-icon {
  position: relative;
  display: grid;
  place-items: center;
}

.tcjc-r2-headphones-icon {
  width: 32px !important;
  height: 32px !important;
  color: var(--tcjc-chrome-blue-strong);
}

.tcjc-r2-isabella-status {
  position: absolute;
  right: -3px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--tcjc-chrome-surface);
  border-radius: 50%;
  background: #c6d3d8;
}

.tcjc-r2-isabella-nav-item.tcjc-r2-audio-playing .tcjc-r2-isabella-status {
  background: #4fbd78;
  animation: tcjc-r2-audio-pulse 1.8s ease-in-out infinite;
}

.tcjc-r2-isabella-nav-item.tcjc-r2-audio-open .tcjc-r2-isabella-nav-trigger {
  color: var(--tcjc-chrome-blue-strong);
  background: rgba(95, 159, 190, .055);
  box-shadow: inset 0 -1px 0 rgba(40, 126, 169, .92);
}

.tcjc-r2-isabella-panel {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 16px);
  z-index: 4;
  width: min(286px, calc(100vw - 28px));
  padding: 13px;
  border: 1px solid rgba(99, 154, 180, .22);
  border-radius: 16px;
  color: #263e4a;
  background: rgba(252, 253, 251, .97);
  box-shadow:
    0 18px 48px rgba(24, 48, 60, .25),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  transform: translateX(-50%);
  transform-origin: center bottom;
  animation: tcjc-r2-isabella-panel-in .16s ease-out both;
}

@keyframes tcjc-r2-isabella-panel-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.97); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.tcjc-r2-isabella-panel header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tcjc-r2-isabella-panel header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tcjc-r2-isabella-panel header strong {
  font-size: .86rem;
  font-weight: 850;
  letter-spacing: -.012em;
}

.tcjc-r2-isabella-panel header small {
  overflow: hidden;
  color: #6e818a;
  font-size: .64rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcjc-r2-isabella-panel header small.is-error {
  color: #a24643;
  white-space: normal;
}

.tcjc-r2-isabella-panel header > button {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #5f7783;
  background: rgba(93, 145, 170, .09);
  cursor: pointer;
}

.tcjc-r2-isabella-panel header > button .tcjc-app-nav-icon {
  width: 15px;
  height: 15px;
}

.tcjc-r2-isabella-controls {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.tcjc-r2-isabella-controls button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(88, 140, 165, .16);
  border-radius: 11px;
  color: #35667d;
  background: rgba(230, 241, 246, .72);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tcjc-r2-isabella-controls button:disabled {
  opacity: .34;
  cursor: default;
}

.tcjc-r2-isabella-controls .tcjc-r2-isabella-play {
  color: #35667d;
  border-color: #5f9fbe;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 4px 12px rgba(54, 120, 150, .10);
}

.tcjc-r2-isabella-controls .tcjc-r2-isabella-stop span {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: currentColor;
}

.tcjc-r2-isabella-controls .tcjc-app-nav-icon {
  width: 18px;
  height: 18px;
}

.tcjc-r2-isabella-speed {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.tcjc-r2-isabella-speed > span {
  display: flex;
  justify-content: space-between;
  color: #6c7e87;
  font-size: .59rem;
  font-weight: 820;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.tcjc-r2-isabella-speed b {
  color: #3d7189;
  font-weight: 850;
}

.tcjc-r2-isabella-speed input {
  width: 100%;
  margin: 0;
  accent-color: #3d829f;
}

.tcjc-r2-theme-dark .tcjc-r2-isabella-panel {
  color: #f3eee6;
  border-color: rgba(170, 211, 230, .15);
  background: rgba(31, 34, 35, .97);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

.tcjc-r2-theme-dark .tcjc-r2-isabella-panel header small,
.tcjc-r2-theme-dark .tcjc-r2-isabella-speed > span {
  color: #aebbc0;
}

.tcjc-r2-theme-dark .tcjc-r2-isabella-panel header > button,
.tcjc-r2-theme-dark .tcjc-r2-isabella-controls button {
  color: #b8deee;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .065);
}

.tcjc-r2-theme-dark .tcjc-r2-isabella-controls .tcjc-r2-isabella-play {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #70b2d1, #367896);
}

.tcjc-r2-theme-dark .tcjc-r2-isabella-speed b {
  color: #b8deee;
}

@media (max-width: 720px) {
  .tcjc-r2-isabella-nav-item {
    min-height: 54px;
  }

  .tcjc-r2-headphones-icon {
    width: 30px !important;
    height: 30px !important;
  }

  .tcjc-r2-isabella-panel {
    width: min(280px, calc(100vw - 20px));
    bottom: calc(100% + 14px);
  }
}

@media (max-width: 390px) {
  .tcjc-r2-isabella-nav-trigger > span:last-child {
    font-size: .62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcjc-r2-isabella-panel { animation: none; }
  .tcjc-r2-isabella-nav-item.tcjc-r2-audio-playing .tcjc-r2-isabella-status { animation: none; }
}

/* END v94 INSTANT ISABELLA */



.tcjc-r2-location-step-note {
  margin: 18px 0 2px;
  padding: 16px 18px;
  border: 1px solid rgba(148, 184, 205, 0.34);
  border-radius: 16px;
  background: rgba(148, 184, 205, 0.1);
  color: var(--tcjc-r2-muted, #61717c);
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: center;
}

body.tcjc-reader-dark-active .tcjc-r2-location-step-note {
  border-color: rgba(148, 184, 205, 0.22);
  background: rgba(148, 184, 205, 0.08);
  color: rgba(235, 241, 245, 0.72);
}

/* TCJC_R2_VERSE_REAL_GLASS_START */

/* =========================================================
   READER V2 — SELECTED SCRIPTURE REAL GLASS

   Matches the approved app popup treatment:
   - no page shading
   - real backdrop blur
   - colors remain visible behind glass
   - text and shapes behind the sheet lose detail
   - smooth opening and closing
   ========================================================= */

.tcjc-r2-verse-popup-layer {
  position: fixed;

  inset: 0;

  z-index: 2147483647;

  pointer-events: none;
}

.tcjc-r2-verse-dismiss-layer {
  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: auto;

  background: transparent;
}

/* ---------------------------------------------------------
   MAIN GLASS SHEET
   --------------------------------------------------------- */

.tcjc-r2-verse-glass {
  position: absolute !important;

  left: 50% !important;
  right: auto !important;

  top: auto !important;

  bottom:
    max(
      12px,
      env(safe-area-inset-bottom)
    ) !important;

  z-index: 1;

  width:
    min(
      620px,
      calc(100vw - 22px)
    ) !important;

  max-height:
    min(
      82svh,
      760px
    ) !important;

  margin: 0 !important;

  padding:
    22px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  pointer-events: auto;

  color:
    rgba(255,255,255,.97) !important;

  border:
    1px solid
    rgba(255,255,255,.50) !important;

  border-radius:
    30px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.30),
      rgba(255,255,255,.08) 50%,
      rgba(255,255,255,.22)
    ) !important;

  -webkit-backdrop-filter:
    blur(26px)
    saturate(160%)
    contrast(108%) !important;

  backdrop-filter:
    blur(26px)
    saturate(160%)
    contrast(108%) !important;

  box-shadow:
    0 32px 88px
      rgba(0,0,0,.30),
    inset 0 1px 0
      rgba(255,255,255,.82),
    inset 0 -1px 0
      rgba(148,184,205,.14) !important;

  transform:
    translateX(-50%);

  transform-origin:
    center bottom;

  animation:
    tcjcR2VerseGlassIn
    280ms
    cubic-bezier(.16,1,.3,1)
    both;
}

.tcjc-r2-verse-glass::before {
  content: "";

  position: absolute;

  inset: 1px;

  z-index: 0;

  border-radius: inherit;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.54),
      transparent 30%,
      rgba(255,255,255,.10) 64%,
      transparent 100%
    );

  opacity: .62;

  mix-blend-mode: screen;
}

.tcjc-r2-verse-glass
> * {
  position: relative;

  z-index: 1;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.tcjc-r2-verse-glass
.tcjc-r2-sheet-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  margin: 0 0 18px;

  padding: 0;

  border: 0;

  background: transparent;
}

.tcjc-r2-verse-glass
.tcjc-r2-sheet-header
> div {
  min-width: 0;
}

.tcjc-r2-verse-glass
.tcjc-r2-sheet-header
p {
  margin:
    0
    0
    6px;

  color: #a9def7 !important;

  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .16em;

  text-transform: uppercase;

  text-shadow:
    0 1px 2px
      rgba(5,18,30,.64),
    0 0 14px
      rgba(77,170,220,.28);
}

.tcjc-r2-verse-glass
.tcjc-r2-sheet-header
h2 {
  margin: 0;

  color:
    rgba(255,255,255,.97) !important;

  font-size:
    clamp(
      2rem,
      5vw,
      3rem
    );

  font-weight: 820;

  letter-spacing: -.05em;
  line-height: 1;

  text-shadow:
    0 2px 4px
      rgba(8,18,32,.42),
    0 12px 28px
      rgba(8,18,32,.32);
}

.tcjc-r2-verse-glass
.tcjc-r2-round-button {
  display: grid;

  width: 48px;
  height: 48px;

  flex:
    0
    0
    48px;

  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(255,255,255,.50) !important;

  border-radius: 14px;

  color: #fff !important;

  background:
    rgba(255,255,255,.16) !important;

  box-shadow:
    0 10px 24px
      rgba(8,24,42,.20),
    inset 0 1px 0
      rgba(255,255,255,.26) !important;

  -webkit-backdrop-filter:
    blur(10px)
    saturate(125%) !important;

  backdrop-filter:
    blur(10px)
    saturate(125%) !important;
}

/* ---------------------------------------------------------
   VERSE TEXT GLASS CARD
   --------------------------------------------------------- */

.tcjc-r2-verse-glass
blockquote {
  margin:
    0
    0
    18px !important;

  padding:
    20px
    21px !important;

  border:
    1px solid
    rgba(255,255,255,.26) !important;

  border-radius:
    18px !important;

  color:
    rgba(255,255,255,.91) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.07)
    ) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.30) !important;

  -webkit-backdrop-filter:
    blur(10px)
    saturate(125%) !important;

  backdrop-filter:
    blur(10px)
    saturate(125%) !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1rem;

  font-style: italic;

  line-height: 1.62;

  text-shadow:
    0 1px 3px
      rgba(7,18,31,.44) !important;
}

/* ---------------------------------------------------------
   ACTION BUTTONS
   --------------------------------------------------------- */

.tcjc-r2-verse-glass
.tcjc-r2-action-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 9px;
}

.tcjc-r2-verse-glass
.tcjc-r2-action-grid
button {
  display: flex;

  min-height: 58px;

  align-items: center;

  gap: 10px;

  padding:
    12px
    14px;

  border:
    1px solid
    rgba(255,255,255,.26) !important;

  border-radius: 14px;

  color:
    rgba(255,255,255,.96) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.17),
      rgba(255,255,255,.07)
    ) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.24) !important;

  -webkit-backdrop-filter:
    blur(9px)
    saturate(120%) !important;

  backdrop-filter:
    blur(9px)
    saturate(120%) !important;

  font-size: .78rem;

  font-weight: 820;

  text-shadow:
    0 1px 2px
      rgba(7,18,31,.40);

  cursor: pointer;

  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.tcjc-r2-verse-glass
.tcjc-r2-action-grid
button:hover,
.tcjc-r2-verse-glass
.tcjc-r2-action-grid
button:focus-visible {
  transform:
    translateY(-1px);

  outline: none;

  border-color:
    rgba(255,255,255,.42) !important;

  background:
    rgba(255,255,255,.18) !important;
}

.tcjc-r2-verse-glass
.tcjc-r2-action-grid
.tcjc-r2-icon {
  width: 20px;
  height: 20px;

  color: #c6ebfb !important;

  filter:
    drop-shadow(
      0 1px 2px
      rgba(7,18,31,.35)
    );
}

.tcjc-r2-verse-glass
.tcjc-r2-copy-link {
  width: 100%;

  min-height: 42px;

  margin-top: 10px;

  border:
    1px solid
    transparent !important;

  border-radius: 11px;

  color: #c5eaff !important;

  background:
    transparent !important;

  font-size: .75rem;

  font-weight: 850;

  text-shadow:
    0 1px 2px
      rgba(7,18,31,.40);

  cursor: pointer;
}

.tcjc-r2-verse-glass
.tcjc-r2-copy-link:hover,
.tcjc-r2-verse-glass
.tcjc-r2-copy-link:focus-visible {
  outline: none;

  border-color:
    rgba(255,255,255,.18) !important;

  background:
    rgba(255,255,255,.08) !important;
}

/* ---------------------------------------------------------
   READER DARK MODE
   --------------------------------------------------------- */

.tcjc-r2-theme-dark
.tcjc-r2-verse-glass,
body.tcjc-reader-dark-active
.tcjc-r2-verse-glass {
  border-color:
    rgba(255,255,255,.34) !important;

  background:
    linear-gradient(
      135deg,
      rgba(26,30,33,.38),
      rgba(8,13,17,.26) 50%,
      rgba(36,35,32,.30)
    ) !important;

  -webkit-backdrop-filter:
    blur(28px)
    saturate(140%)
    contrast(108%)
    brightness(.78) !important;

  backdrop-filter:
    blur(28px)
    saturate(140%)
    contrast(108%)
    brightness(.78) !important;

  box-shadow:
    0 32px 88px
      rgba(0,0,0,.42),
    inset 0 1px 0
      rgba(255,255,255,.25),
    inset 0 -1px 0
      rgba(255,255,255,.06) !important;
}

.tcjc-r2-theme-dark
.tcjc-r2-verse-glass
blockquote,
body.tcjc-reader-dark-active
.tcjc-r2-verse-glass
blockquote {
  color:
    rgba(244,239,231,.90) !important;

  border-color:
    rgba(255,255,255,.17) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.11),
      rgba(255,255,255,.035)
    ) !important;
}

.tcjc-r2-theme-dark
.tcjc-r2-verse-glass
.tcjc-r2-action-grid
button,
body.tcjc-reader-dark-active
.tcjc-r2-verse-glass
.tcjc-r2-action-grid
button {
  border-color:
    rgba(255,255,255,.15) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.035)
    ) !important;
}

/* ---------------------------------------------------------
   OPEN / CLOSE
   --------------------------------------------------------- */

@keyframes tcjcR2VerseGlassIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tcjcR2VerseGlassOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.tcjc-r2-verse-glass.is-closing {
  pointer-events: none;

  animation:
    tcjcR2VerseGlassOut
    240ms
    cubic-bezier(.4,0,1,1)
    both !important;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 720px) {
  .tcjc-r2-verse-glass {
    width:
      calc(
        100vw - 12px
      ) !important;

    max-height:
      min(
        84svh,
        760px
      ) !important;

    bottom:
      max(
        6px,
        env(safe-area-inset-bottom)
      ) !important;

    padding:
      18px !important;

    border-radius:
      27px
      27px
      18px
      18px !important;

    -webkit-backdrop-filter:
      blur(20px)
      saturate(145%)
      contrast(106%) !important;

    backdrop-filter:
      blur(20px)
      saturate(145%)
      contrast(106%) !important;
  }

  .tcjc-r2-verse-glass
  .tcjc-r2-sheet-header {
    margin-bottom: 15px;
  }

  .tcjc-r2-verse-glass
  .tcjc-r2-sheet-header
  h2 {
    font-size:
      clamp(
        1.8rem,
        8vw,
        2.35rem
      );
  }

  .tcjc-r2-verse-glass
  .tcjc-r2-round-button {
    width: 44px;
    height: 44px;

    flex-basis: 44px;
  }

  .tcjc-r2-verse-glass
  blockquote {
    padding:
      17px
      18px !important;

    font-size: .96rem;
  }

  .tcjc-r2-verse-glass
  .tcjc-r2-action-grid
  button {
    min-height: 56px;

    padding:
      11px
      12px;
  }
}

/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (
  prefers-reduced-motion:
  reduce
) {
  .tcjc-r2-verse-glass {
    animation-duration:
      .01ms !important;

    transition-duration:
      .01ms !important;
  }
}

/* TCJC_R2_VERSE_REAL_GLASS_END */

/* TCJC_R2_VERSE_DAY_TEXT_START */

/* Light Reader theme */

.tcjc-r2-verse-glass {
  color: #263f4b !important;
}

.tcjc-r2-verse-glass
.tcjc-r2-sheet-header
h2 {
  color: #263f4b !important;

  text-shadow:
    0 1px 1px
    rgba(255,255,255,.68) !important;
}

.tcjc-r2-verse-glass
.tcjc-r2-sheet-header
p {
  color: #347fa2 !important;

  text-shadow:
    0 1px 1px
    rgba(255,255,255,.65) !important;
}

.tcjc-r2-verse-glass
.tcjc-r2-round-button {
  color: #294956 !important;

  border-color:
    rgba(74,106,122,.22) !important;

  background:
    rgba(255,255,255,.24) !important;
}

.tcjc-r2-verse-glass
blockquote {
  color: #53616a !important;

  text-shadow:
    0 1px 1px
    rgba(255,255,255,.52) !important;
}

.tcjc-r2-verse-glass
.tcjc-r2-action-grid
button {
  color: #293f4b !important;

  text-shadow: none !important;

  border-color:
    rgba(71,108,126,.20) !important;

  background:
    rgba(255,255,255,.19) !important;
}

.tcjc-r2-verse-glass
.tcjc-r2-action-grid
.tcjc-r2-icon {
  color: #347fa2 !important;

  filter: none !important;
}

.tcjc-r2-verse-glass
.tcjc-r2-copy-link {
  color: #347fa2 !important;

  text-shadow: none !important;
}

/* Dark Reader theme */

body.tcjc-reader-dark-active
.tcjc-r2-verse-glass {
  color: #f1eee8 !important;
}

body.tcjc-reader-dark-active
.tcjc-r2-verse-glass
.tcjc-r2-sheet-header
h2 {
  color: #f1eee8 !important;

  text-shadow:
    0 1px 3px
    rgba(0,0,0,.38) !important;
}

body.tcjc-reader-dark-active
.tcjc-r2-verse-glass
.tcjc-r2-sheet-header
p {
  color: #a9def7 !important;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.42) !important;
}

body.tcjc-reader-dark-active
.tcjc-r2-verse-glass
.tcjc-r2-round-button {
  color: #f1eee8 !important;

  border-color:
    rgba(255,255,255,.20) !important;

  background:
    rgba(255,255,255,.09) !important;
}

body.tcjc-reader-dark-active
.tcjc-r2-verse-glass
blockquote {
  color:
    rgba(244,239,231,.90) !important;

  text-shadow:
    0 1px 3px
    rgba(0,0,0,.34) !important;
}

body.tcjc-reader-dark-active
.tcjc-r2-verse-glass
.tcjc-r2-action-grid
button {
  color: #f1eee8 !important;

  border-color:
    rgba(255,255,255,.15) !important;

  background:
    rgba(255,255,255,.07) !important;
}

body.tcjc-reader-dark-active
.tcjc-r2-verse-glass
.tcjc-r2-action-grid
.tcjc-r2-icon {
  color: #b9e3f6 !important;
}

body.tcjc-reader-dark-active
.tcjc-r2-verse-glass
.tcjc-r2-copy-link {
  color: #b9e3f6 !important;
}

/* TCJC_R2_VERSE_DAY_TEXT_END */



/* TCJC_R2_DESCRIPTIVE_PICKER_START */

/* =========================================================
   DESCRIPTIVE SCRIPTURE PICKER CARDS

   Numeric chapters/sections stay compact.
   Song titles get real title cards.
   Non-Bible / non-Book-of-Mormon prefaces and introductions
   get extra horizontal room instead of narrow stacked words.
   ========================================================= */

.tcjc-r2-location-sheet
.tcjc-r2-chapter-grid-song-titles {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;

  gap:
    10px !important;
}

.tcjc-r2-location-sheet
.tcjc-r2-chapter-grid-song-titles
button {
  min-width:
    0 !important;

  min-height:
    76px !important;

  padding:
    13px
    12px !important;

  font-size:
    clamp(
      .82rem,
      1.8vw,
      .94rem
    ) !important;

  font-weight:
    820 !important;

  line-height:
    1.24 !important;

  text-align:
    center !important;

  white-space:
    normal !important;

  word-break:
    normal !important;

  overflow-wrap:
    normal !important;

  hyphens:
    none !important;
}

.tcjc-r2-location-sheet
.tcjc-r2-chapter-grid
button.tcjc-r2-chapter-card-descriptive {
  grid-column:
    span 3 !important;

  min-width:
    0 !important;

  min-height:
    64px !important;

  padding:
    12px
    14px !important;

  font-size:
    .86rem !important;

  font-weight:
    820 !important;

  line-height:
    1.25 !important;

  white-space:
    normal !important;

  word-break:
    normal !important;

  overflow-wrap:
    normal !important;

  hyphens:
    none !important;
}

/*
 * Stop browsers from creating the one-word-per-line effect
 * anywhere inside these descriptive cards.
 */

.tcjc-r2-location-sheet
.tcjc-r2-chapter-grid-song-titles
button,
.tcjc-r2-location-sheet
.tcjc-r2-chapter-card-descriptive {
  text-wrap:
    balance;
}

/* Tablet / desktop */

@media (min-width: 700px) {
  .tcjc-r2-location-sheet
  .tcjc-r2-chapter-grid-song-titles {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      ) !important;
  }

  .tcjc-r2-location-sheet
  .tcjc-r2-chapter-grid
  button.tcjc-r2-chapter-card-descriptive {
    grid-column:
      span 4 !important;
  }
}

/* Wide selector */

@media (min-width: 1000px) {
  .tcjc-r2-location-sheet
  .tcjc-r2-chapter-grid-song-titles {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      ) !important;
  }
}

/* Very small phones still get readable titles */

@media (max-width: 390px) {
  .tcjc-r2-location-sheet
  .tcjc-r2-chapter-grid-song-titles {
    grid-template-columns:
      1fr
      1fr !important;

    gap:
      8px !important;
  }

  .tcjc-r2-location-sheet
  .tcjc-r2-chapter-grid-song-titles
  button {
    min-height:
      72px !important;

    padding:
      11px
      9px !important;

    font-size:
      .8rem !important;
  }
}

/* TCJC_R2_DESCRIPTIVE_PICKER_END */

/* TCJC_V108_SCRIPTURE_NAV_LAYOUT_START */

/* =========================================================
   SCRIPTURE NAVIGATOR

   MATERIAL:
   Supplied entirely by the existing AppPopup glass system.

   THIS BLOCK:
   Header / content / scrolling / Reader control layout only.
   ========================================================= */

.tcjc-r2-location-backdrop.tcjc-app-popup-overlay {
  place-items: center !important;

  padding:
    max(18px, calc(env(safe-area-inset-top) + 10px))
    14px
    max(18px, calc(env(safe-area-inset-bottom) + 10px)) !important;
}

.tcjc-r2-location-sheet.tcjc-app-popup-sheet {










  width:
    min(
      980px,
      calc(100vw - 28px)
    ) !important;

  max-width:
    980px !important;

  max-height:
    min(
      86svh,
      860px
    ) !important;



  padding:
    0 !important;

  display:
    grid !important;

  grid-template-rows:
    auto
    minmax(0, 1fr) !important;

  overflow:
    hidden !important;


}

/* ---------------------------------------------------------
   HEADER
   Uses the same geometry as the other working app popups.
   --------------------------------------------------------- */

.tcjc-r2-location-sheet
.tcjc-r2-location-header {
  position:
    relative !important;

  z-index:
    3 !important;

  display:
    flex !important;

  align-items:
    flex-start !important;

  justify-content:
    space-between !important;

  gap:
    18px !important;

  margin:
    0 !important;

  padding:
    24px
    24px
    18px !important;

  flex:
    none !important;
}

.tcjc-r2-location-sheet
.tcjc-r2-location-header
p,
.tcjc-r2-location-sheet
.tcjc-r2-location-header
h2 {
  margin:
    0 !important;
}

.tcjc-r2-location-sheet
.tcjc-r2-location-header
p {
  letter-spacing:
    .18em !important;

  font-size:
    .72rem !important;

  font-weight:
    900 !important;

  line-height:
    1.2 !important;

  text-transform:
    uppercase !important;
}

.tcjc-r2-location-sheet
.tcjc-r2-location-header
h2 {
  margin-top:
    4px !important;

  font-family:
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size:
    clamp(
      2rem,
      5vw,
      3.2rem
    ) !important;

  font-weight:
    850 !important;

  letter-spacing:
    -.055em !important;

  line-height:
    1 !important;
}

.tcjc-r2-location-sheet
.tcjc-r2-location-close {
  position:
    relative !important;

  top:
    auto !important;

  right:
    auto !important;

  flex:
    0 0 48px !important;

  width:
    48px !important;

  height:
    48px !important;

  margin:
    0 !important;
}

/* ---------------------------------------------------------
   BODY

   Header remains fixed in the card.
   Only the navigator body scrolls.
   --------------------------------------------------------- */

.tcjc-r2-location-sheet
.tcjc-r2-location-content.tcjc-app-popup-content {
  min-width:
    0 !important;

  min-height:
    0 !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  overscroll-behavior:
    contain !important;

  padding:
    12px
    24px
    26px !important;

  -webkit-overflow-scrolling:
    touch;
}

/* ---------------------------------------------------------
   LIBRARY SHELF
   --------------------------------------------------------- */

.tcjc-r2-location-sheet
.tcjc-r2-library-shelf {
  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    6px
    2px
    18px !important;

  scroll-padding-inline:
    2px !important;
}

/* Give the first and last covers breathing room. */

.tcjc-r2-location-sheet
.tcjc-r2-library-card:first-child {
  margin-left:
    0 !important;
}

.tcjc-r2-location-sheet
.tcjc-r2-library-card:last-child {
  margin-right:
    2px !important;
}

/* ---------------------------------------------------------
   DETAIL AREA
   --------------------------------------------------------- */

.tcjc-r2-location-sheet
.tcjc-r2-library-detail {
  margin-top:
    18px !important;

  padding-top:
    20px !important;
}

.tcjc-r2-location-sheet
.tcjc-r2-library-detail-heading {
  margin-bottom:
    14px !important;
}

.tcjc-r2-location-sheet
.tcjc-r2-chapter-heading {
  margin:
    24px
    0
    12px !important;
}

/* ---------------------------------------------------------
   DAY MODE TYPOGRAPHY

   V102 intentionally makes normal day-mode app popup text
   white. Scripture navigation needs its Reader ink back.
   --------------------------------------------------------- */

html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet {
  color:
    #243548 !important;
}

html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-location-header
p,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-library-detail-heading
small,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-testament-heading
small {
  color:
    #397fa6 !important;

  text-shadow:
    none !important;
}

html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-location-header
h2,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-library-detail-heading
h3,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-testament-heading
h3,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-chapter-heading
span,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-library-card
span {
  color:
    #243548 !important;

  text-shadow:
    none !important;
}

html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-library-detail-heading
> span,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-chapter-heading
small,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-location-step-note {
  color:
    #607080 !important;

  text-shadow:
    none !important;
}

html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-bible-book-grid
button,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-subbook-grid
button,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-chapter-grid
button,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-bible-introduction-group
button {
  color:
    #243548 !important;

  text-shadow:
    none !important;
}

html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-bible-book-grid
button.active,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-subbook-grid
button.active,
html:not(.tcjc-app-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-location-sheet
.tcjc-r2-chapter-grid
button.active {
  color:
    #fff !important;
}

/* ---------------------------------------------------------
   DARK MODE

   The portal lives under document.body, so the old
   .tcjc-r2-theme-dark ancestor selectors cannot reach it.
   These reproduce the existing Reader dark control behavior.
   --------------------------------------------------------- */

html.tcjc-app-dark-active
.tcjc-r2-location-sheet,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet {
  color:
    #ede8df !important;
}

html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-location-header
p,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-location-header
p,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-location-header
p {
  color:
    #9bd5ef !important;
}

html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-location-header
h2,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-location-header
h2,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-location-header
h2 {
  color:
    #d5edf8 !important;
}

html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-library-card
span,
html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-library-detail-heading
h3,
html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-chapter-heading
span,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-library-card
span,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-library-detail-heading
h3,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-chapter-heading
span,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-library-card
span,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-library-detail-heading
h3,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-chapter-heading
span {
  color:
    #ede8df !important;

  text-shadow:
    none !important;
}

html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-library-detail-heading
> span,
html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-chapter-heading
small,
html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-location-step-note,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-library-detail-heading
> span,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-chapter-heading
small,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-location-step-note,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-library-detail-heading
> span,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-chapter-heading
small,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-location-step-note {
  color:
    #b8b2aa !important;
}

html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-chapter-grid
button,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-chapter-grid
button,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-chapter-grid
button {
  color:
    #ede8df !important;

  background:
    rgba(255,255,255,.05) !important;

  border-color:
    rgba(255,255,255,.09) !important;

  text-shadow:
    none !important;
}

html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-bible-book-grid
button,
html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-subbook-grid
button,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-bible-book-grid
button,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-subbook-grid
button,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-bible-book-grid
button,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-subbook-grid
button {
  color:
    #ede8df !important;

  background:
    rgba(255,255,255,.043) !important;

  border-color:
    rgba(255,255,255,.09) !important;

  text-shadow:
    none !important;
}

html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-testament-group,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-testament-group,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-testament-group {
  background:
    rgba(255,255,255,.035) !important;

  border-color:
    rgba(255,255,255,.09) !important;
}

html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-bible-introduction-group
button,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-bible-introduction-group
button,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-bible-introduction-group
button {
  color:
    #ede8df !important;

  background:
    rgba(255,255,255,.043) !important;

  border-color:
    rgba(255,255,255,.12) !important;
}

html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-chapter-grid
button.active,
html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-bible-book-grid
button.active,
html.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-subbook-grid
button.active,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-chapter-grid
button.active,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-bible-book-grid
button.active,
body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-subbook-grid
button.active,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-chapter-grid
button.active,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-bible-book-grid
button.active,
body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-subbook-grid
button.active {
  color:
    #fff !important;
}

/* ---------------------------------------------------------
   MOBILE
   Keep this a centered glass popup, not Search's bottom sheet.
   --------------------------------------------------------- */

@media (max-width: 720px) {
  .tcjc-r2-location-backdrop.tcjc-app-popup-overlay {
    place-items:
      center !important;

    padding:
      max(8px, env(safe-area-inset-top))
      6px
      max(8px, env(safe-area-inset-bottom)) !important;
  }

  .tcjc-r2-location-sheet.tcjc-app-popup-sheet {
    width:
      calc(100vw - 12px) !important;

    max-width:
      calc(100vw - 12px) !important;

    max-height:
      84svh !important;

    border:
      revert-layer;

    border-radius:
      26px !important;
  }

  .tcjc-r2-location-sheet
  .tcjc-r2-location-header {
    padding:
      19px
      18px
      14px !important;
  }

  .tcjc-r2-location-sheet
  .tcjc-r2-location-header
  h2 {
    font-size:
      2.25rem !important;
  }

  .tcjc-r2-location-sheet
  .tcjc-r2-location-close {
    flex-basis:
      44px !important;

    width:
      44px !important;

    height:
      44px !important;
  }

  .tcjc-r2-location-sheet
  .tcjc-r2-location-content {
    padding:
      10px
      18px
      max(
        22px,
        calc(env(safe-area-inset-bottom) + 16px)
      ) !important;
  }
}

/* TCJC_V108_SCRIPTURE_NAV_LAYOUT_END */

/* TCJC_V113_READER_THEME_REPAIR_START */

.tcjc-r2-sheet-backdrop {
  -webkit-backdrop-filter:
    blur(18px)
    saturate(1.02) !important;

  backdrop-filter:
    blur(18px)
    saturate(1.02) !important;
}

.tcjc-r2-sheet {
  -webkit-backdrop-filter:
    blur(38px)
    saturate(1.12) !important;

  backdrop-filter:
    blur(38px)
    saturate(1.12) !important;
}

.tcjc-r2-sheet-header p {
  font-size:
    .80rem !important;

  line-height:
    1.3 !important;
}

.tcjc-r2-sheet-header h2 {
  line-height:
    1.04 !important;
}

.tcjc-r2-round-button {
  width:
    50px !important;

  height:
    50px !important;

  min-width:
    50px !important;

  min-height:
    50px !important;
}

.tcjc-r2-round-button svg,
.tcjc-r2-round-button .tcjc-iconoir-icon {
  width:
    22px !important;

  height:
    22px !important;

  color:
    currentColor !important;

  stroke:
    currentColor !important;
}

.tcjc-r2-action-grid
button {
  min-height:
    50px !important;

  font-size:
    .96rem !important;
}

.tcjc-r2-action-grid
button
svg,
.tcjc-r2-action-grid
button
.tcjc-iconoir-icon {
  width:
    22px !important;

  height:
    22px !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-sheet-backdrop {
  background:
    rgba(238, 243, 243, .16) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(1.04)
    brightness(1.01) !important;

  backdrop-filter:
    blur(18px)
    saturate(1.04)
    brightness(1.01) !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-sheet {
  color:
    #203541 !important;

  background:
    rgba(244, 248, 248, .86) !important;

  border-color:
    rgba(255, 255, 255, .88) !important;

  box-shadow:
    0 30px 80px rgba(29, 44, 51, .22),
    inset 0 1px 0 rgba(255, 255, 255, .95)
    !important;

  -webkit-backdrop-filter:
    blur(42px)
    saturate(1.15)
    brightness(1.04) !important;

  backdrop-filter:
    blur(42px)
    saturate(1.15)
    brightness(1.04) !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-sheet * {
  text-shadow:
    none !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-sheet-header p {
  color:
    #287da3 !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-sheet-header h2,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-sheet h3,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-sheet strong {
  color:
    #203541 !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-sheet p,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-sheet span,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-sheet small,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-sheet em {
  color:
    #485b65 !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-round-button {
  color:
    #1f526b !important;

  background:
    rgba(255, 255, 255, .54) !important;

  border-color:
    rgba(255, 255, 255, .82) !important;
}html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-bible-book-grid button,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-subbook-grid button,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-chapter-grid button,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-action-grid button {
  color:
    #203541 !important;

  background:
    rgba(255, 255, 255, .44) !important;

  border-color:
    rgba(255, 255, 255, .70) !important;
}html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-bible-book-grid button.active,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-subbook-grid button.active,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-chapter-grid button.active {
  color:
    #ffffff !important;

  background:
    #3d9fc9 !important;

  border-color:
    rgba(255, 255, 255, .58) !important;
}

html.tcjc-app-dark-active
.tcjc-r2-sheet-backdrop,
body.tcjc-app-dark-active
.tcjc-r2-sheet-backdrop,
html.tcjc-reader-dark-active
.tcjc-r2-sheet-backdrop,
body.tcjc-reader-dark-active
.tcjc-r2-sheet-backdrop {
  background:
    rgba(7, 12, 16, .12) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(.92)
    brightness(.82) !important;

  backdrop-filter:
    blur(18px)
    saturate(.92)
    brightness(.82) !important;
}

html.tcjc-app-dark-active
.tcjc-r2-sheet,
body.tcjc-app-dark-active
.tcjc-r2-sheet,
html.tcjc-reader-dark-active
.tcjc-r2-sheet,
body.tcjc-reader-dark-active
.tcjc-r2-sheet {
  color:
    #f2eee7 !important;

  background:
    rgba(27, 31, 33, .91) !important;

  border-color:
    rgba(255, 255, 255, .14) !important;

  box-shadow:
    0 32px 88px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .07)
    !important;

  -webkit-backdrop-filter:
    blur(38px)
    saturate(1.06) !important;

  backdrop-filter:
    blur(38px)
    saturate(1.06) !important;
}

html.tcjc-app-dark-active
.tcjc-r2-sheet-header p,
body.tcjc-app-dark-active
.tcjc-r2-sheet-header p,
html.tcjc-reader-dark-active
.tcjc-r2-sheet-header p,
body.tcjc-reader-dark-active
.tcjc-r2-sheet-header p {
  color:
    #9bd4ed !important;
}

html.tcjc-app-dark-active
.tcjc-r2-sheet-header h2,
body.tcjc-app-dark-active
.tcjc-r2-sheet-header h2,
html.tcjc-reader-dark-active
.tcjc-r2-sheet-header h2,
body.tcjc-reader-dark-active
.tcjc-r2-sheet-header h2,
html.tcjc-app-dark-active
.tcjc-r2-sheet h3,
body.tcjc-app-dark-active
.tcjc-r2-sheet h3,
html.tcjc-reader-dark-active
.tcjc-r2-sheet h3,
body.tcjc-reader-dark-active
.tcjc-r2-sheet h3 {
  color:
    #f4f1eb !important;
}

html.tcjc-app-dark-active
.tcjc-r2-sheet p,
body.tcjc-app-dark-active
.tcjc-r2-sheet p,
html.tcjc-reader-dark-active
.tcjc-r2-sheet p,
body.tcjc-reader-dark-active
.tcjc-r2-sheet p,
html.tcjc-app-dark-active
.tcjc-r2-sheet span,
body.tcjc-app-dark-active
.tcjc-r2-sheet span,
html.tcjc-reader-dark-active
.tcjc-r2-sheet span,
body.tcjc-reader-dark-active
.tcjc-r2-sheet span,
html.tcjc-app-dark-active
.tcjc-r2-sheet small,
body.tcjc-app-dark-active
.tcjc-r2-sheet small,
html.tcjc-reader-dark-active
.tcjc-r2-sheet small,
body.tcjc-reader-dark-active
.tcjc-r2-sheet small {
  color:
    #d1cbc3 !important;
}

html.tcjc-app-dark-active
.tcjc-r2-round-button,
body.tcjc-app-dark-active
.tcjc-r2-round-button,
html.tcjc-reader-dark-active
.tcjc-r2-round-button,
body.tcjc-reader-dark-active
.tcjc-r2-round-button {
  color:
    #ffffff !important;

  background:
    rgba(255, 255, 255, .08) !important;

  border-color:
    rgba(255, 255, 255, .17) !important;
}html.tcjc-app-dark-active
.tcjc-r2-bible-book-grid button,
body.tcjc-app-dark-active
.tcjc-r2-bible-book-grid button,
html.tcjc-reader-dark-active
.tcjc-r2-bible-book-grid button,
body.tcjc-reader-dark-active
.tcjc-r2-bible-book-grid button,
html.tcjc-app-dark-active
.tcjc-r2-subbook-grid button,
body.tcjc-app-dark-active
.tcjc-r2-subbook-grid button,
html.tcjc-reader-dark-active
.tcjc-r2-subbook-grid button,
body.tcjc-reader-dark-active
.tcjc-r2-subbook-grid button,
html.tcjc-app-dark-active
.tcjc-r2-chapter-grid button,
body.tcjc-app-dark-active
.tcjc-r2-chapter-grid button,
html.tcjc-reader-dark-active
.tcjc-r2-chapter-grid button,
body.tcjc-reader-dark-active
.tcjc-r2-chapter-grid button,
html.tcjc-app-dark-active
.tcjc-r2-action-grid button,
body.tcjc-app-dark-active
.tcjc-r2-action-grid button,
html.tcjc-reader-dark-active
.tcjc-r2-action-grid button,
body.tcjc-reader-dark-active
.tcjc-r2-action-grid button {
  color:
    #f1eee8 !important;

  background:
    rgba(255, 255, 255, .052) !important;

  border-color:
    rgba(255, 255, 255, .11) !important;
}html.tcjc-app-dark-active
.tcjc-r2-bible-book-grid button.active,
body.tcjc-app-dark-active
.tcjc-r2-bible-book-grid button.active,
html.tcjc-reader-dark-active
.tcjc-r2-bible-book-grid button.active,
body.tcjc-reader-dark-active
.tcjc-r2-bible-book-grid button.active,
html.tcjc-app-dark-active
.tcjc-r2-chapter-grid button.active,
body.tcjc-app-dark-active
.tcjc-r2-chapter-grid button.active,
html.tcjc-reader-dark-active
.tcjc-r2-chapter-grid button.active,
body.tcjc-reader-dark-active
.tcjc-r2-chapter-grid button.active {
  color:
    #ffffff !important;

  background:
    rgba(61, 159, 201, .34) !important;

  border-color:
    rgba(147, 211, 239, .34) !important;
}

@media (max-width: 720px) {
  .tcjc-r2-sheet-backdrop {
    place-items:
      center !important;

    padding:
      max(10px, env(safe-area-inset-top))
      10px
      max(10px, env(safe-area-inset-bottom))
      !important;
  }

  .tcjc-r2-sheet {










    width:
      calc(100vw - 20px) !important;

    max-width:
      calc(100vw - 20px) !important;

    max-height:
      84svh !important;



    border-radius:
      26px !important;


  }
}

/* TCJC_V113_READER_THEME_REPAIR_END */

/* TCJC_V116_READER_VIEWPORT_CENTER_START */

/* =========================================================
   READER V2 POPUPS

   Same deterministic viewport-centering model.
   ========================================================= */

html body
.tcjc-r2-sheet-backdrop {
  position:
    fixed !important;

  inset:
    0 !important;

  top:
    0 !important;

  right:
    0 !important;

  bottom:
    0 !important;

  left:
    0 !important;

  width:
    100vw !important;

  height:
    100dvh !important;

  min-height:
    100dvh !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  box-sizing:
    border-box !important;
}

html body
.tcjc-r2-sheet-backdrop
>
.tcjc-r2-sheet {
  position:
    absolute !important;

  top:
    50% !important;

  left:
    50% !important;

  right:
    auto !important;

  bottom:
    auto !important;

  margin:
    0 !important;

  translate:
    -50% -50% !important;

  align-self:
    auto !important;

  justify-self:
    auto !important;

  max-height:
    min(
      88dvh,
      900px
    ) !important;
}

html body
.tcjc-r2-location-content {
  min-height:
    0 !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  overscroll-behavior:
    contain !important;

  -webkit-overflow-scrolling:
    touch;
}

@media (max-width: 720px) {

  html body
  .tcjc-r2-sheet-backdrop
  >
  .tcjc-r2-sheet {
    top:
      50% !important;

    left:
      50% !important;

    right:
      auto !important;

    bottom:
      auto !important;

    width:
      calc(
        100vw - 20px
      ) !important;

    max-width:
      calc(
        100vw - 20px
      ) !important;

    height:
      auto !important;

    max-height:
      calc(
        100dvh
        - max(
            24px,
            env(safe-area-inset-top)
          )
        - max(
            24px,
            env(safe-area-inset-bottom)
          )
      ) !important;

    margin:
      0 !important;

    translate:
      -50% -50% !important;

    border-radius:
      26px !important;
  }
}

@supports not (translate: -50% -50%) {

  html body
  .tcjc-r2-sheet-backdrop
  >
  .tcjc-r2-sheet {
    transform:
      translate(
        -50%,
        -50%
      ) !important;
  }
}

/* TCJC_V116_ACTUAL_VERSE_DOM_START */

/*
 * Current Selected Scripture popup renders:
 *
 * .tcjc-r2-verse-popup-layer
 *   > .tcjc-r2-verse-dismiss-layer
 *   > .tcjc-r2-verse-sheet
 *
 * The older generic .tcjc-r2-sheet-backdrop rule does not
 * own this popup anymore.
 */

html body
.tcjc-r2-verse-popup-layer {
  position:
    fixed !important;

  inset:
    0 !important;

  top:
    0 !important;

  right:
    0 !important;

  bottom:
    0 !important;

  left:
    0 !important;

  width:
    100vw !important;

  height:
    100dvh !important;

  min-height:
    100dvh !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  box-sizing:
    border-box !important;
}

html body
.tcjc-r2-verse-popup-layer
>
.tcjc-r2-verse-sheet {
  position:
    absolute !important;

  top:
    50% !important;

  left:
    50% !important;

  right:
    auto !important;

  bottom:
    auto !important;

  margin:
    0 !important;

  translate:
    none !important;

  transform:
    translate(
      -50%,
      -50%
    ) !important;

  max-height:
    min(
      88dvh,
      820px
    ) !important;
}

@media (max-width: 720px) {

  html body
  .tcjc-r2-verse-popup-layer
  >
  .tcjc-r2-verse-sheet {
    top:
      50% !important;

    left:
      50% !important;

    right:
      auto !important;

    bottom:
      auto !important;

    width:
      calc(
        100vw - 20px
      ) !important;

    max-width:
      calc(
        100vw - 20px
      ) !important;

    max-height:
      calc(
        100dvh
        - max(
            28px,
            env(safe-area-inset-top)
          )
        - max(
            28px,
            env(safe-area-inset-bottom)
          )
      ) !important;

    margin:
      0 !important;

    translate:
      none !important;

    transform:
      translate(
        -50%,
        -50%
      ) !important;
  }
}

/* TCJC_V116_ACTUAL_VERSE_DOM_END */

/* TCJC_V116_READER_VIEWPORT_CENTER_END */

/* TCJC_READER_CLOSE_LIFECYCLE_START */

@keyframes tcjcReaderPopupLayerFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.tcjc-r2-sheet-backdrop.is-closing {
  pointer-events: none !important;

  animation:
    tcjcReaderPopupLayerFadeOut
    240ms
    cubic-bezier(.4,0,1,1)
    both !important;
}

/* TCJC_READER_CLOSE_LIFECYCLE_END */

/* TCJC_V100_READER_POPUP_POLISH_START */

/*
 * Reader Settings and Selected Scripture use the same v100
 * glass recipe and entrance rhythm as the App/Search popups.
 *
 * Existing v99/v116 dimensions, centering and 240ms close
 * lifecycles remain unchanged.
 */

@keyframes tcjcV100ReaderPopupOpen {
  from {
    opacity: 0;
    scale: .985;
  }

  45% {
    opacity: .82;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes tcjcV100ReaderBackdropOpen {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*
 * READER SETTINGS — DAY GLASS
 */

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-sheet {
  background:
    linear-gradient(
      135deg,
      rgba(247,252,253,.62),
      rgba(231,243,247,.46) 48%,
      rgba(255,255,255,.32)
    ) !important;

  border-color:
    rgba(255,255,255,.56) !important;

  box-shadow:
    0 26px 72px
      rgba(24,61,79,.17),
    inset 0 1px 0
      rgba(255,255,255,.68) !important;

  -webkit-backdrop-filter:
    blur(34px)
    saturate(132%)
    contrast(103%)
    brightness(1.01) !important;

  backdrop-filter:
    blur(34px)
    saturate(132%)
    contrast(103%)
    brightness(1.01) !important;
}

/*
 * SELECTED SCRIPTURE — DAY GLASS
 */

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-verse-glass {
  background:
    linear-gradient(
      135deg,
      rgba(247,252,253,.62),
      rgba(231,243,247,.46) 48%,
      rgba(255,255,255,.32)
    ) !important;

  border-color:
    rgba(255,255,255,.56) !important;

  box-shadow:
    0 26px 72px
      rgba(24,61,79,.17),
    inset 0 1px 0
      rgba(255,255,255,.68) !important;

  -webkit-backdrop-filter:
    blur(34px)
    saturate(132%)
    contrast(103%)
    brightness(1.01) !important;

  backdrop-filter:
    blur(34px)
    saturate(132%)
    contrast(103%)
    brightness(1.01) !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-r2-verse-glass::before {
  opacity: .34 !important;
}

/*
 * READER SETTINGS OPENING
 */

.tcjc-r2-sheet-backdrop:not(.is-closing) {
  animation:
    tcjcV100ReaderBackdropOpen
    260ms
    ease-out
    both !important;
}

.tcjc-r2-sheet-backdrop:not(.is-closing)
> .tcjc-r2-sheet {
  transform-origin:
    center center !important;

  animation:
    tcjcV100ReaderPopupOpen
    420ms
    cubic-bezier(.16,1,.3,1)
    both !important;
}

/*
 * SELECTED SCRIPTURE OPENING
 */

.tcjc-r2-verse-popup-layer
> .tcjc-r2-verse-sheet:not(.is-closing) {
  transform-origin:
    center center !important;

  animation:
    tcjcV100ReaderPopupOpen
    420ms
    cubic-bezier(.16,1,.3,1)
    both !important;
}

@media (prefers-reduced-motion: reduce) {
  .tcjc-r2-sheet-backdrop:not(.is-closing),

  .tcjc-r2-sheet-backdrop:not(.is-closing)
  > .tcjc-r2-sheet,

  .tcjc-r2-verse-popup-layer
  > .tcjc-r2-verse-sheet:not(.is-closing) {
    animation-duration:
      .01ms !important;
  }
}

/* TCJC_V100_READER_POPUP_POLISH_END */


/* source: src/styles/app-chrome.css */
/* ========================================================================== 
   TCJC FULL-WIDTH PRECISION APP CHROME
   One full-width toolbar system for Home and Reader V2 using the TCJC precision Iconoir theme.
   This file owns all fixed top bars, bottom bars, shared navigation controls,
   icon sizing, responsive spacing, auto-hide motion, and Reader progress rail.
   ========================================================================== */

:root {
  --tcjc-chrome-gutter: clamp(4px, .55vw, 8px);
  --tcjc-chrome-top-offset: max(8px, env(safe-area-inset-top));
  --tcjc-chrome-bottom-offset: max(10px, calc(env(safe-area-inset-bottom) + 8px));
  --tcjc-chrome-top-height: 66px;
  --tcjc-chrome-bottom-height: 74px;
  --tcjc-chrome-radius: 12px;
  --tcjc-chrome-control-radius: 6px;
  --tcjc-chrome-hit-target: 52px;
  --tcjc-chrome-icon-size: 32px;
  --tcjc-chrome-width: calc(
    100vw - (var(--tcjc-chrome-gutter) * 2)
  );
  --tcjc-fixed-header-space: calc(
    var(--tcjc-chrome-top-offset) + var(--tcjc-chrome-top-height) + 10px
  );
  --tcjc-bottom-nav-space: calc(
    var(--tcjc-chrome-bottom-offset) + var(--tcjc-chrome-bottom-height) + 10px
  );
  --tcjc-chrome-blue: #397fa6;
  --tcjc-chrome-blue-strong: #24698f;
  --tcjc-chrome-ink: #26384b;
  --tcjc-chrome-muted: #72777b;
  --tcjc-chrome-surface: rgba(250, 249, 246, .965);
  --tcjc-chrome-control-hover: rgba(95, 159, 190, .055);
  --tcjc-chrome-control-active: rgba(95, 159, 190, .09);
  --tcjc-chrome-border: rgba(47, 83, 105, .11);
  --tcjc-chrome-divider: rgba(47, 83, 105, .12);
  --tcjc-chrome-shadow: 0 14px 36px rgba(31, 47, 61, .15);
}

html.tcjc-app-dark-active,
body.tcjc-app-dark-active,
body.tcjc-reader-dark-active {
  --tcjc-chrome-blue: #9acbe1;
  --tcjc-chrome-blue-strong: #b8dceb;
  --tcjc-chrome-ink: #f2eee7;
  --tcjc-chrome-muted: #b7b1a8;
  --tcjc-chrome-surface: rgba(27, 31, 34, .965);
  --tcjc-chrome-control-hover: rgba(154, 203, 225, .05);
  --tcjc-chrome-control-active: rgba(154, 203, 225, .085);
  --tcjc-chrome-border: rgba(255, 255, 255, .12);
  --tcjc-chrome-divider: rgba(255, 255, 255, .11);
  --tcjc-chrome-shadow: 0 16px 40px rgba(0, 0, 0, .38);
}

.tcjc-premium-chrome,
.tcjc-premium-chrome * {
  box-sizing: border-box;
}

/* ----------------------------- Icon system ----------------------------- */

.tcjc-iconoir-icon {
  display: block !important;
  width: 1em;
  height: 1em;
  overflow: visible;
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
  shape-rendering: geometricPrecision;
  vector-effect: non-scaling-stroke;
  stroke-linecap: square !important;
  stroke-linejoin: miter !important;
  filter: none !important;
  transform: none !important;
}

/* ----------------------------- Chrome shell ---------------------------- */


.tcjc-premium-topbar,
.tcjc-premium-bottom-bar {
  position: fixed !important;
  right: auto !important;
  left: 50% !important;
  z-index: 2147481200;
  width: var(--tcjc-chrome-width) !important;
  margin: 0 !important;
  overflow: visible !important;
  color: var(--tcjc-chrome-ink);
  border: 1px solid var(--tcjc-chrome-border) !important;
  border-radius: var(--tcjc-chrome-radius) !important;
  background: var(--tcjc-chrome-surface) !important;
  box-shadow: var(--tcjc-chrome-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
  opacity: 1;
  visibility: visible !important;
  transform: translateX(-50%);
  transition:
    opacity .28s cubic-bezier(.22, .61, .36, 1),
    transform .34s cubic-bezier(.22, .61, .36, 1),
    background .2s ease,
    box-shadow .2s ease;
  will-change: transform, opacity;
}

.tcjc-premium-topbar {
  top: var(--tcjc-chrome-top-offset) !important;
  bottom: auto !important;
  min-height: var(--tcjc-chrome-top-height) !important;
  padding: 7px !important;
}

.tcjc-premium-bottom-bar {
  top: auto !important;
  bottom: var(--tcjc-chrome-bottom-offset) !important;
  height: var(--tcjc-chrome-bottom-height) !important;
  min-height: var(--tcjc-chrome-bottom-height) !important;
  padding: 6px !important;
}

/* Retire layout inherited from the former App header/footer system. */
.tcjc-app-header.tcjc-home-premium-topbar,
.tcjc-app-bottom-shell.tcjc-home-premium-bottom {
  position: fixed !important;
  right: auto !important;
  left: 50% !important;
  width: var(--tcjc-chrome-width) !important;
  height: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) !important;
}

.tcjc-app-header.tcjc-home-premium-topbar {
  top: var(--tcjc-chrome-top-offset) !important;
  bottom: auto !important;
  min-height: var(--tcjc-chrome-top-height) !important;
}

.tcjc-app-bottom-shell.tcjc-home-premium-bottom {
  top: auto !important;
  bottom: var(--tcjc-chrome-bottom-offset) !important;
  height: var(--tcjc-chrome-bottom-height) !important;
  min-height: var(--tcjc-chrome-bottom-height) !important;
}

/* ---------------------------- Shared controls -------------------------- */

.tcjc-premium-icon-button,
.tcjc-premium-topbar-actions > button {
  appearance: none;
  width: var(--tcjc-chrome-hit-target) !important;
  min-width: var(--tcjc-chrome-hit-target) !important;
  height: var(--tcjc-chrome-hit-target) !important;
  min-height: var(--tcjc-chrome-hit-target) !important;
  display: grid !important;
  place-items: center;
  flex: 0 0 var(--tcjc-chrome-hit-target) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--tcjc-chrome-control-radius) !important;
  color: var(--tcjc-chrome-blue-strong) !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}

.tcjc-premium-icon-button:hover,
.tcjc-premium-icon-button:focus-visible,
.tcjc-premium-topbar-actions > button:hover,
.tcjc-premium-topbar-actions > button:focus-visible {
  color: var(--tcjc-chrome-blue-strong) !important;
  background: transparent !important;
  outline: none;
  box-shadow: inset 0 -1px 0 rgba(40, 126, 169, .52) !important;
}

.tcjc-premium-icon-button:active,
.tcjc-premium-topbar-actions > button:active {
  background: var(--tcjc-chrome-control-active) !important;
  transform: scale(.985);
}

.tcjc-premium-icon-button .tcjc-iconoir-icon,
.tcjc-premium-topbar-actions .tcjc-iconoir-icon {
  width: var(--tcjc-chrome-icon-size) !important;
  height: var(--tcjc-chrome-icon-size) !important;
}

/* ------------------------------- Home top ------------------------------ */

.tcjc-home-premium-topbar {
  display: grid !important;
  grid-template-columns: minmax(150px, 224px) minmax(180px, 1fr) repeat(2, var(--tcjc-chrome-hit-target));
  align-items: center;
  gap: 7px;
}

/*
  Keep the Home top bar opaque over the photographic hero.
  The Reader already receives the correct dark surface through its own chrome.
*/
html.tcjc-app-dark-active .tcjc-home-premium-topbar,
body.tcjc-app-dark-active .tcjc-home-premium-topbar,
body.tcjc-reader-dark-active .tcjc-home-premium-topbar {
  background-color: #1b1f22 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(48, 53, 56, .985),
      rgba(27, 31, 34, .985)
    ) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .09) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

.tcjc-premium-brand {
  appearance: none;
  min-width: 0;
  height: var(--tcjc-chrome-hit-target);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: 3px 8px;
  border: 0;
  border-radius: var(--tcjc-chrome-control-radius);
  background: transparent;
  cursor: pointer;
  isolation: isolate;
}

.tcjc-premium-brand::before,
.tcjc-premium-brand::after,
.tcjc-premium-search-button::before,
.tcjc-premium-search-button::after {
  content: none !important;
  display: none !important;
}

.tcjc-premium-brand:hover,
.tcjc-premium-brand:focus-visible {
  background: var(--tcjc-chrome-control-hover);
  outline: none;
}

.tcjc-premium-brand img.tcjc-premium-brand-logo {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 38px !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.tcjc-premium-search-button {
  appearance: none;
  min-width: 0;
  height: var(--tcjc-chrome-hit-target);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--tcjc-chrome-divider);
  border-radius: var(--tcjc-chrome-control-radius);
  color: var(--tcjc-chrome-ink);
  background: rgba(255, 255, 255, .52);
  box-shadow: none;
  font: inherit;
  font-size: .91rem;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

html.tcjc-app-dark-active .tcjc-premium-search-button,
body.tcjc-app-dark-active .tcjc-premium-search-button,
body.tcjc-reader-dark-active .tcjc-premium-search-button {
  background: rgba(255, 255, 255, .045);
}

.tcjc-premium-search-button:hover,
.tcjc-premium-search-button:focus-visible {
  border-color: rgba(57, 127, 166, .28);
  background: var(--tcjc-chrome-control-hover);
  outline: none;
}

.tcjc-premium-search-button .tcjc-iconoir-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 auto;
  color: var(--tcjc-chrome-blue-strong);
}

.tcjc-premium-search-button span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ------------------------------ Reader top ----------------------------- */

.tcjc-r2-topbar.tcjc-r2-unified-topbar {
  display: grid !important;
  grid-template-columns: var(--tcjc-chrome-hit-target) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px !important;
}

.tcjc-r2-location-button,
.tcjc-premium-location-button.tcjc-r2-location-button {
  appearance: none;
  width: 100%;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--tcjc-chrome-hit-target);
  min-height: var(--tcjc-chrome-hit-target) !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 3px 10px !important;
  border: 0 !important;
  border-radius: var(--tcjc-chrome-control-radius) !important;
  color: var(--tcjc-chrome-ink) !important;
  background: rgba(95, 159, 190, .065) !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background .15s ease;
}

.tcjc-r2-location-button:hover,
.tcjc-r2-location-button:focus-visible {
  background: var(--tcjc-chrome-control-hover) !important;
  outline: none;
}

.tcjc-r2-location-button:active {
  background: var(--tcjc-chrome-control-active) !important;
}

.tcjc-r2-location-button > .tcjc-iconoir-icon:first-child {
  width: 29px !important;
  height: 29px !important;
  color: var(--tcjc-chrome-blue-strong);
}

.tcjc-r2-location-button > .tcjc-iconoir-icon:last-child {
  width: 17px !important;
  height: 17px !important;
  color: var(--tcjc-chrome-muted);
}

.tcjc-r2-location-button span,
.tcjc-r2-location-button strong,
.tcjc-r2-location-button small {
  min-width: 0;
}

.tcjc-r2-location-button strong,
.tcjc-r2-location-button small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tcjc-r2-location-button strong {
  font-size: .94rem;
  font-weight: 820;
  letter-spacing: -.012em;
  line-height: 1.1;
}

.tcjc-r2-location-button small {
  margin-top: 2px;
  color: var(--tcjc-chrome-muted);
  font-size: .7rem;
  font-weight: 650;
  line-height: 1.1;
}

.tcjc-r2-topbar-actions {
  min-width: 0;
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: var(--tcjc-chrome-hit-target);
  align-items: center;
  gap: 2px !important;
  margin: 0 !important;
  padding-left: 7px;
  border-left: 1px solid var(--tcjc-chrome-divider);
}

/* ------------------------------ Home bottom ---------------------------- */

.tcjc-home-premium-bottom {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  gap: 2px;
}

.tcjc-premium-nav-button {
  appearance: none;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 3px;
  border: 0;
  border-radius: var(--tcjc-chrome-control-radius) !important;
  color: var(--tcjc-chrome-ink);
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.tcjc-premium-nav-button:hover:not(:disabled),
.tcjc-premium-nav-button:focus-visible:not(:disabled) {
  color: var(--tcjc-chrome-blue-strong);
  background: rgba(95, 159, 190, .035);
  outline: none;
}

.tcjc-premium-nav-button.active {
  color: var(--tcjc-chrome-blue-strong);
  background: transparent;
  box-shadow: inset 0 -1px 0 rgba(40, 126, 169, .92);
  outline: none;
}

.tcjc-premium-nav-button:active:not(:disabled) {
  background: var(--tcjc-chrome-control-active);
}

.tcjc-premium-nav-button:disabled {
  opacity: .4;
  cursor: default;
}

.tcjc-premium-nav-button .tcjc-iconoir-icon {
  width: 32px !important;
  height: 32px !important;
  color: var(--tcjc-chrome-blue-strong);
}

.tcjc-premium-nav-button span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: -.01em;
  line-height: 1.05;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

/* ----------------------------- Reader bottom --------------------------- */

.tcjc-r2-bottom-bar.tcjc-r2-unified-bottom {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(160px, .72fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 3px;
}

.tcjc-r2-bottom-bar > button {
  appearance: none;
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--tcjc-chrome-control-radius) !important;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.tcjc-r2-bottom-bar > button:last-child {
  justify-content: flex-end;
  text-align: right;
}

.tcjc-r2-bottom-bar > button:hover:not(:disabled),
.tcjc-r2-bottom-bar > button:focus-visible:not(:disabled) {
  color: var(--tcjc-chrome-blue-strong);
  background: var(--tcjc-chrome-control-hover);
  outline: none;
}

.tcjc-r2-bottom-bar > button:active:not(:disabled) {
  background: var(--tcjc-chrome-control-active);
}

.tcjc-r2-bottom-bar > button:disabled {
  opacity: .3;
  cursor: default;
}

.tcjc-r2-bottom-bar .tcjc-iconoir-icon {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 auto;
  color: var(--tcjc-chrome-blue-strong);
}

.tcjc-r2-bottom-bar button span,
.tcjc-r2-bottom-status {
  min-width: 0;
}

.tcjc-r2-bottom-bar button small,
.tcjc-r2-bottom-bar button strong,
.tcjc-r2-bottom-status small,
.tcjc-r2-bottom-status strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tcjc-r2-bottom-bar button small,
.tcjc-r2-bottom-status small {
  color: var(--tcjc-chrome-muted);
  font-size: .72rem;
  font-weight: 700;
}

.tcjc-r2-bottom-bar button strong,
.tcjc-r2-bottom-status strong {
  margin-top: 2px;
  font-size: .9rem;
  font-weight: 820;
}

.tcjc-r2-bottom-status {
  align-self: stretch;
  display: grid;
  place-content: center;
  padding: 4px 10px;
  border-right: 1px solid var(--tcjc-chrome-divider);
  border-left: 1px solid var(--tcjc-chrome-divider);
  text-align: center;
}

/* The progress rail is physically attached to the top edge of the footer. */
.tcjc-r2-progress-rail {
  position: fixed !important;
  right: auto !important;
  left: 50% !important;
  z-index: 2147481300 !important;
  width: calc(var(--tcjc-chrome-width) - 20px) !important;
  height: 3px !important;
  bottom: calc(
    var(--tcjc-chrome-bottom-offset) + var(--tcjc-chrome-bottom-height) - 2px
  ) !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(57, 127, 166, .15) !important;
  box-shadow: none !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: translateX(-50%) !important;
  transition:
    bottom .3s cubic-bezier(.22, .61, .36, 1),
    opacity .2s ease !important;
}

.tcjc-r2-progress-rail span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--tcjc-chrome-blue) !important;
  transition: width 120ms linear;
}

/* --------------------------- Reader positioning ------------------------ */

.tcjc-r2 {
  padding-top: calc(var(--tcjc-fixed-header-space) + 10px) !important;
  padding-bottom: calc(var(--tcjc-bottom-nav-space) + 24px) !important;
}

.tcjc-r2-stage {
  width: calc(100vw - 12px) !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px !important;
}

.tcjc-r2-canvas {
  width: 100% !important;
}

.tcjc-r2-page-content {
  width: calc(100% - clamp(28px, 5vw, 96px)) !important;
  max-width: none !important;
}

.tcjc-r2-chapter-header {
  max-width: none !important;
}

.tcjc-r2-chapter-nav,
.tcjc-r2-progress,
.tcjc-r2-reader-dock {
  display: none !important;
}

.tcjc-r2-sheet-backdrop,
.tcjc-r2-verse-backdrop {
  z-index: 2147483000 !important;
}

/* ------------------------------ Auto hide ------------------------------ */

body.tcjc-app-chrome-hidden .tcjc-premium-topbar,
.tcjc-app-shell.tcjc-app-chrome-hidden .tcjc-premium-topbar,
.tcjc-premium-topbar.tcjc-app-chrome-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(calc(-100% - 24px)) !important;
}

body.tcjc-app-chrome-hidden .tcjc-premium-bottom-bar,
.tcjc-app-shell.tcjc-app-chrome-hidden .tcjc-premium-bottom-bar,
.tcjc-premium-bottom-bar.tcjc-app-chrome-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(calc(100% + 24px)) !important;
}

/* The rail stays visible when the footer hides, but drops to the screen edge. */
body.tcjc-app-chrome-hidden .tcjc-r2-progress-rail,
.tcjc-app-shell.tcjc-app-chrome-hidden .tcjc-r2-progress-rail {
  bottom: max(6px, calc(env(safe-area-inset-bottom) + 4px)) !important;
  opacity: .86 !important;
  transform: translateX(-50%) !important;
}

/* ------------------------------ Responsive ----------------------------- */

@media (max-width: 720px) {
  :root {
    --tcjc-chrome-gutter: 4px;
    --tcjc-chrome-top-offset: max(7px, env(safe-area-inset-top));
    --tcjc-chrome-bottom-offset: max(10px, calc(env(safe-area-inset-bottom) + 8px));
    --tcjc-chrome-top-height: 62px;
    --tcjc-chrome-bottom-height: 72px;
    --tcjc-chrome-radius: 11px;
    --tcjc-chrome-control-radius: 5px;
    --tcjc-chrome-hit-target: 46px;
    --tcjc-chrome-icon-size: 30px;
  }

  .tcjc-premium-topbar {
    padding: 5px !important;
  }

  .tcjc-premium-bottom-bar {
    padding: 5px !important;
  }

  .tcjc-home-premium-topbar {
    grid-template-columns: minmax(112px, 160px) minmax(0, 1fr) repeat(2, var(--tcjc-chrome-hit-target));
    gap: 4px;
  }

  .tcjc-premium-brand {
    padding-inline: 5px;
  }

  .tcjc-premium-brand img.tcjc-premium-brand-logo {
    max-height: 32px !important;
  }

  .tcjc-premium-search-button {
    gap: 7px;
    padding-inline: 9px;
    font-size: .82rem;
  }

  .tcjc-premium-search-button .tcjc-iconoir-icon {
    width: 29px !important;
    height: 29px !important;
  }

  .tcjc-r2-topbar.tcjc-r2-unified-topbar {
    gap: 4px !important;
  }

  .tcjc-r2-location-button,
  .tcjc-premium-location-button.tcjc-r2-location-button {
    grid-template-columns: 24px minmax(0, 1fr) 15px;
    gap: 5px;
    padding-inline: 6px !important;
  }

  .tcjc-r2-location-button > .tcjc-iconoir-icon:first-child {
    width: 29px !important;
    height: 29px !important;
  }

  .tcjc-r2-location-button > .tcjc-iconoir-icon:last-child {
    width: 15px !important;
    height: 15px !important;
  }

  .tcjc-r2-location-button strong {
    font-size: .84rem;
  }

  .tcjc-r2-location-button small {
    display: none;
  }

  .tcjc-r2-topbar-actions {
    grid-auto-columns: var(--tcjc-chrome-hit-target);
    gap: 0 !important;
    padding-left: 3px;
  }

  .tcjc-premium-nav-button {
    min-height: 54px;
    gap: 2px;
    padding-inline: 1px;
  }

  .tcjc-premium-nav-button .tcjc-iconoir-icon {
    width: 30px !important;
    height: 30px !important;
  }

  .tcjc-premium-nav-button span {
    font-size: .61rem;
  }

  .tcjc-r2 {
    padding-top: calc(var(--tcjc-fixed-header-space) + 6px) !important;
    padding-bottom: calc(var(--tcjc-bottom-nav-space) + 18px) !important;
  }

  .tcjc-r2-stage {
    width: calc(100vw - 6px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .tcjc-r2-page-content {
    width: calc(100% - 18px) !important;
  }

  .tcjc-r2-bottom-bar.tcjc-r2-unified-bottom {
    grid-template-columns: 60px minmax(0, 1fr) 60px;
    gap: 0;
  }

  .tcjc-r2-bottom-bar > button,
  .tcjc-r2-bottom-bar > button:last-child {
    min-height: 58px;
    justify-content: center;
    gap: 0;
    padding: 0;
    text-align: center;
  }

  .tcjc-r2-bottom-bar > button span {
    display: none !important;
  }

  .tcjc-r2-bottom-bar .tcjc-iconoir-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .tcjc-r2-bottom-status {
    min-width: 0;
    padding: 4px 8px;
  }

  .tcjc-r2-bottom-status strong {
    overflow: visible;
    font-size: .94rem;
    letter-spacing: -.012em;
    white-space: nowrap;
    text-overflow: clip;
  }

  .tcjc-r2-bottom-status small {
    display: none;
  }
}

@media (max-width: 430px) {
  :root {
    --tcjc-chrome-hit-target: 44px;
    --tcjc-chrome-icon-size: 30px;
  }

  .tcjc-home-premium-topbar {
    grid-template-columns: minmax(96px, 132px) minmax(0, 1fr) repeat(2, var(--tcjc-chrome-hit-target));
  }

  .tcjc-premium-search-button span {
    max-width: 90px;
  }

  .tcjc-r2-location-button,
  .tcjc-premium-location-button.tcjc-r2-location-button {
    grid-template-columns: 23px minmax(0, 1fr);
    padding-inline: 5px !important;
  }

  .tcjc-r2-location-button > .tcjc-iconoir-icon:first-child {
    width: 23px !important;
    height: 23px !important;
  }

  .tcjc-r2-location-button > .tcjc-iconoir-icon:last-child {
    display: none !important;
  }

  .tcjc-r2-location-button strong {
    font-size: .79rem;
  }

  .tcjc-r2-topbar-actions {
    padding-left: 2px;
  }

  .tcjc-premium-nav-button span {
    font-size: .57rem;
  }

  .tcjc-r2-bottom-bar.tcjc-r2-unified-bottom {
    grid-template-columns: 56px minmax(0, 1fr) 56px;
  }

  .tcjc-r2-bottom-bar .tcjc-iconoir-icon {
    width: 33px !important;
    height: 33px !important;
  }

  .tcjc-r2-bottom-status strong {
    font-size: .92rem;
  }
}

@media (max-width: 350px) {
  :root {
    --tcjc-chrome-hit-target: 42px;
    --tcjc-chrome-icon-size: 29px;
  }

  .tcjc-home-premium-topbar {
    grid-template-columns: 88px minmax(0, 1fr) repeat(2, var(--tcjc-chrome-hit-target));
  }

  .tcjc-premium-search-button span {
    display: none;
  }

  .tcjc-r2-location-button strong {
    font-size: .74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcjc-premium-topbar,
  .tcjc-premium-bottom-bar,
  .tcjc-r2-progress-rail,
  .tcjc-premium-chrome button {
    transition-duration: 1ms !important;
  }
}


/* ==========================================================================
   TCJC READER FOOTER — SINGLE SEVEN-CONTROL BAR
   ========================================================================== */

.tcjc-r2-reader-app-bottom.tcjc-home-premium-bottom {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 2px !important;
}

.tcjc-r2-reader-app-bottom .tcjc-r2-footer-arrow .tcjc-iconoir-icon {
  width: 34px !important;
  height: 34px !important;
}

.tcjc-r2-reader-app-bottom .tcjc-r2-footer-arrow:disabled {
  opacity: .28;
}

.tcjc-r2-progress-rail {
  width: min(600px, calc(100vw - 34px)) !important;
  height: 4px !important;
  bottom: calc(var(--tcjc-chrome-bottom-offset) + var(--tcjc-chrome-bottom-height) + 8px) !important;
  background: rgba(57, 127, 166, .18) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) !important;
}

.tcjc-r2 {
  padding-bottom: calc(var(--tcjc-bottom-nav-space) + 14px) !important;
}

body.tcjc-app-chrome-hidden .tcjc-r2-progress-rail,
.tcjc-app-shell.tcjc-app-chrome-hidden .tcjc-r2-progress-rail {
  bottom: max(36px, calc(env(safe-area-inset-bottom) + 26px)) !important;
  width: min(600px, calc(100vw - 34px)) !important;
  height: 4px !important;
  opacity: .94 !important;
}

@media (max-width: 720px) {
  .tcjc-r2-reader-app-bottom.tcjc-home-premium-bottom {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  .tcjc-r2-reader-app-bottom .tcjc-premium-nav-button {
    min-height: 54px;
    padding-right: 1px;
    padding-left: 1px;
  }

  .tcjc-r2-reader-app-bottom .tcjc-r2-footer-arrow span {
    display: none;
  }

  .tcjc-r2-reader-app-bottom .tcjc-r2-footer-arrow .tcjc-iconoir-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .tcjc-r2-progress-rail {
    width: calc(100vw - 26px) !important;
    bottom: calc(var(--tcjc-chrome-bottom-offset) + var(--tcjc-chrome-bottom-height) + 7px) !important;
  }

  .tcjc-r2 {
    padding-bottom: calc(var(--tcjc-bottom-nav-space) + 12px) !important;
  }

  body.tcjc-app-chrome-hidden .tcjc-r2-progress-rail,
  .tcjc-app-shell.tcjc-app-chrome-hidden .tcjc-r2-progress-rail {
    bottom: max(38px, calc(env(safe-area-inset-bottom) + 28px)) !important;
    width: calc(100vw - 30px) !important;
  }
}


/* ==========================================================================
   READER TABLET WIDTH REPAIR v58
   Reader V2 hides its side arrows at 860px. App chrome previously restored a
   three-column grid until 720px, leaving the canvas in the 48px first column.
   Keep the Reader stage single-column throughout the same tablet range.
   ========================================================================== */

@media (min-width: 721px) and (max-width: 860px) {
  .tcjc-r2-stage {
    width: calc(100vw - 8px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .tcjc-r2-edge {
    display: none !important;
  }

  .tcjc-r2-canvas {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
  }

  .tcjc-r2-page-content {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}



/* ==========================================================================
   TCJC READER DAY ICON COLOR UNIFICATION
   ========================================================================== */

.tcjc-r2-theme-light
  .tcjc-r2-unified-topbar
  .tcjc-iconoir-icon,
.tcjc-r2-theme-light
  .tcjc-r2-reader-app-bottom
  .tcjc-iconoir-icon {
  color: var(--tcjc-chrome-blue-strong) !important;
  stroke: currentColor !important;
}

/* END TCJC READER DAY ICON COLOR UNIFICATION */

/* source: src/styles/search-modern.css */
/* ========================================================================== 
   TCJC MODERN LOCAL SCRIPTURE SEARCH
   Fresh isolated UI; the local offline search engine remains unchanged.
   ========================================================================== */

.tcjc-search-modern-overlay,
.tcjc-search-modern-overlay * {
  box-sizing: border-box;
}

.tcjc-search-modern-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147484000;
  display: grid;
  place-items: center;
  padding:
    max(18px, calc(env(safe-area-inset-top) + 10px))
    14px
    max(18px, calc(env(safe-area-inset-bottom) + 10px));
  background:
    radial-gradient(circle at 50% 20%, rgba(94, 154, 185, .16), transparent 34rem),
    rgba(20, 27, 31, .62);
  -webkit-backdrop-filter: blur(15px) saturate(.88);
  backdrop-filter: blur(15px) saturate(.88);
}

.tcjc-search-modern-sheet {
  width: min(920px, calc(100vw - 28px));
  max-height: min(86svh, 820px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(122, 160, 181, .25);
  border-radius: 28px;
  color: #243548;
  background:
    linear-gradient(150deg, rgba(255,255,255,.98), rgba(245,249,250,.96));
  box-shadow:
    0 32px 90px rgba(5, 16, 23, .34),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.tcjc-search-modern-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 16px;
}

.tcjc-search-modern-header p,
.tcjc-search-modern-header h2,
.tcjc-search-modern-header span {
  margin: 0;
}

.tcjc-search-modern-header p {
  color: #397fa6;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tcjc-search-modern-header h2 {
  margin-top: 4px;
  color: #17293c;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: 1;
}

.tcjc-search-modern-header span {
  display: block;
  margin-top: 8px;
  color: #607080;
  font-size: .9rem;
  font-weight: 600;
}

.tcjc-search-modern-close,
.tcjc-search-modern-clear {
  appearance: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(65, 125, 157, .17);
  color: #286f96;
  background: rgba(255,255,255,.72);
  cursor: pointer;
}

.tcjc-search-modern-close {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
}

.tcjc-search-modern-close .tcjc-iconoir-icon {
  width: 27px !important;
  height: 27px !important;
}

.tcjc-search-modern-close:hover,
.tcjc-search-modern-close:focus-visible,
.tcjc-search-modern-clear:hover,
.tcjc-search-modern-clear:focus-visible {
  border-color: rgba(39, 112, 151, .38);
  background: rgba(148, 184, 205, .16);
  outline: none;
}

.tcjc-search-modern-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 0 24px 18px;
  border-bottom: 1px solid rgba(66, 108, 132, .12);
}

.tcjc-search-modern-field {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 15px;
  border: 1px solid rgba(54, 126, 165, .24);
  border-radius: 16px;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 20px rgba(53, 83, 101, .07);
}

.tcjc-search-modern-field:focus-within {
  border-color: rgba(40, 126, 169, .62);
  box-shadow:
    0 0 0 4px rgba(67, 151, 194, .10),
    0 10px 24px rgba(53, 83, 101, .08);
}

.tcjc-search-modern-field > .tcjc-iconoir-icon {
  width: 28px !important;
  height: 28px !important;
  color: #397fa6;
}

.tcjc-search-modern-field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tcjc-search-modern-field input {
  min-width: 0;
  width: 100%;
  height: 42px;
  padding: 0;
  border: 0;
  outline: 0;
  color: #1f3042;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 680;
}

.tcjc-search-modern-field input::placeholder {
  color: #8a969f;
  opacity: 1;
}

.tcjc-search-modern-clear {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.tcjc-search-modern-clear .tcjc-iconoir-icon {
  width: 21px !important;
  height: 21px !important;
}

.tcjc-search-modern-submit {
  appearance: none;
  min-width: 136px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid rgba(26, 101, 141, .48);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #5ca8cb, #257ea9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 10px 24px rgba(34, 113, 151, .20);
  font: inherit;
  font-weight: 820;
  cursor: pointer;
}

.tcjc-search-modern-submit:hover:not(:disabled),
.tcjc-search-modern-submit:focus-visible:not(:disabled) {
  background: linear-gradient(135deg, #69b2d2, #22749c);
  outline: none;
  transform: translateY(-1px);
}

.tcjc-search-modern-submit:disabled {
  opacity: .72;
  cursor: wait;
}

.tcjc-search-modern-submit .tcjc-iconoir-icon {
  width: 24px !important;
  height: 24px !important;
}

.tcjc-search-modern-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 18px 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(57, 127, 166, .38) transparent;
}

.tcjc-search-modern-start {
  display: grid;
  gap: 18px;
  padding: 6px 0 10px;
}

.tcjc-search-modern-start-copy {
  display: grid;
  gap: 4px;
}

.tcjc-search-modern-start-copy strong {
  color: #203448;
  font-size: 1.02rem;
  font-weight: 820;
}

.tcjc-search-modern-start-copy span {
  color: #6d7b87;
  font-size: .88rem;
  font-weight: 590;
}

.tcjc-search-modern-suggestions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tcjc-search-modern-suggestions button {
  appearance: none;
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(64, 132, 168, .17);
  border-radius: 15px;
  color: #294359;
  background: rgba(239, 247, 250, .72);
  font: inherit;
  font-size: .92rem;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.tcjc-search-modern-suggestions button:hover,
.tcjc-search-modern-suggestions button:focus-visible {
  color: #1e6f9a;
  border-color: rgba(47, 132, 176, .38);
  background: rgba(218, 239, 248, .75);
  outline: none;
}

.tcjc-search-modern-suggestions .tcjc-iconoir-icon {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto;
}

.tcjc-search-modern-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 2px 15px;
}

.tcjc-search-modern-summary > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tcjc-search-modern-summary span {
  color: #71808c;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tcjc-search-modern-summary strong {
  overflow: hidden;
  color: #22384d;
  font-size: 1.05rem;
  font-weight: 820;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tcjc-search-modern-summary p {
  margin: 0;
  color: #61717e;
  font-size: .8rem;
  font-weight: 650;
  text-align: right;
}

.tcjc-search-modern-summary.error p {
  color: #9b4038;
}

.tcjc-search-modern-results {
  display: grid;
  gap: 9px;
}

.tcjc-search-modern-result {
  appearance: none;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 12px;
  border: 1px solid rgba(61, 112, 139, .14);
  border-radius: 16px;
  color: #263b4e;
  background: rgba(255,255,255,.80);
  box-shadow: 0 8px 22px rgba(35, 64, 82, .055);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tcjc-search-modern-result:hover,
.tcjc-search-modern-result:focus-visible {
  border-color: rgba(46, 132, 176, .40);
  background: #fff;
  box-shadow: 0 12px 28px rgba(35, 86, 116, .10);
  outline: none;
  transform: translateY(-1px);
}

.tcjc-search-modern-result-number {
  color: #4f94b7;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.tcjc-search-modern-result-body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.tcjc-search-modern-result-body strong,
.tcjc-search-modern-result-body small,
.tcjc-search-modern-result-body em {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tcjc-search-modern-result-body strong {
  color: #1f3a50;
  font-size: 1rem;
  font-weight: 840;
}

.tcjc-search-modern-result-body small {
  color: #74838f;
  font-size: .69rem;
  font-weight: 750;
}

.tcjc-search-modern-result-body em {
  color: #536270;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .9rem;
  font-style: normal;
  line-height: 1.35;
}

.tcjc-search-modern-result > .tcjc-iconoir-icon {
  width: 24px !important;
  height: 24px !important;
  color: #397fa6;
}

.tcjc-search-modern-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,.38);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tcjcSearchModernSpin .7s linear infinite;
}

html.tcjc-app-dark-active .tcjc-search-modern-sheet,
body.tcjc-app-dark-active .tcjc-search-modern-sheet,
body.tcjc-reader-dark-active .tcjc-search-modern-sheet {
  color: #f0ece4;
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(150deg, rgba(35,39,42,.985), rgba(24,28,31,.98));
  box-shadow: 0 34px 95px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

html.tcjc-app-dark-active .tcjc-search-modern-header h2,
body.tcjc-app-dark-active .tcjc-search-modern-header h2,
body.tcjc-reader-dark-active .tcjc-search-modern-header h2,
html.tcjc-app-dark-active .tcjc-search-modern-start-copy strong,
body.tcjc-app-dark-active .tcjc-search-modern-start-copy strong,
body.tcjc-reader-dark-active .tcjc-search-modern-start-copy strong,
html.tcjc-app-dark-active .tcjc-search-modern-summary strong,
body.tcjc-app-dark-active .tcjc-search-modern-summary strong,
body.tcjc-reader-dark-active .tcjc-search-modern-summary strong {
  color: #f2eee7;
}

html.tcjc-app-dark-active .tcjc-search-modern-header span,
body.tcjc-app-dark-active .tcjc-search-modern-header span,
body.tcjc-reader-dark-active .tcjc-search-modern-header span,
html.tcjc-app-dark-active .tcjc-search-modern-start-copy span,
body.tcjc-app-dark-active .tcjc-search-modern-start-copy span,
body.tcjc-reader-dark-active .tcjc-search-modern-start-copy span,
html.tcjc-app-dark-active .tcjc-search-modern-summary p,
body.tcjc-app-dark-active .tcjc-search-modern-summary p,
body.tcjc-reader-dark-active .tcjc-search-modern-summary p {
  color: #b8b2aa;
}

html.tcjc-app-dark-active .tcjc-search-modern-form,
body.tcjc-app-dark-active .tcjc-search-modern-form,
body.tcjc-reader-dark-active .tcjc-search-modern-form {
  border-color: rgba(255,255,255,.09);
}

html.tcjc-app-dark-active .tcjc-search-modern-field,
body.tcjc-app-dark-active .tcjc-search-modern-field,
body.tcjc-reader-dark-active .tcjc-search-modern-field {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

html.tcjc-app-dark-active .tcjc-search-modern-field input,
body.tcjc-app-dark-active .tcjc-search-modern-field input,
body.tcjc-reader-dark-active .tcjc-search-modern-field input {
  color: #f1eee8;
}

html.tcjc-app-dark-active .tcjc-search-modern-suggestions button,
body.tcjc-app-dark-active .tcjc-search-modern-suggestions button,
body.tcjc-reader-dark-active .tcjc-search-modern-suggestions button,
html.tcjc-app-dark-active .tcjc-search-modern-result,
body.tcjc-app-dark-active .tcjc-search-modern-result,
body.tcjc-reader-dark-active .tcjc-search-modern-result {
  color: #ede8df;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  box-shadow: none;
}

html.tcjc-app-dark-active .tcjc-search-modern-result-body strong,
body.tcjc-app-dark-active .tcjc-search-modern-result-body strong,
body.tcjc-reader-dark-active .tcjc-search-modern-result-body strong {
  color: #f1eee8;
}

html.tcjc-app-dark-active .tcjc-search-modern-result-body small,
body.tcjc-app-dark-active .tcjc-search-modern-result-body small,
body.tcjc-reader-dark-active .tcjc-search-modern-result-body small,
html.tcjc-app-dark-active .tcjc-search-modern-result-body em,
body.tcjc-app-dark-active .tcjc-search-modern-result-body em,
body.tcjc-reader-dark-active .tcjc-search-modern-result-body em {
  color: #bbb5ad;
}

@media (max-width: 720px) {
  .tcjc-search-modern-overlay {
    padding: max(8px, env(safe-area-inset-top)) 0 0;
  }

  .tcjc-search-modern-sheet {
    width: 100vw;
    max-height: min(89svh, 840px);
    
    
    
    
  }

  .tcjc-search-modern-header {
    padding: 19px 18px 13px;
  }

  .tcjc-search-modern-header h2 {
    font-size: 2.25rem;
  }

  .tcjc-search-modern-header span {
    font-size: .88rem;
  }

  .tcjc-search-modern-close {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .tcjc-search-modern-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 0 18px 15px;
  }

  .tcjc-search-modern-field,
  .tcjc-search-modern-submit {
    min-height: 54px;
  }

  .tcjc-search-modern-submit {
    width: 100%;
  }

  .tcjc-search-modern-content {
    padding: 15px 18px max(22px, calc(env(safe-area-inset-bottom) + 16px));
  }

  .tcjc-search-modern-suggestions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tcjc-search-modern-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .tcjc-search-modern-summary p {
    text-align: left;
  }

  .tcjc-search-modern-result {
    grid-template-columns: 30px minmax(0, 1fr) 22px;
    gap: 9px;
    padding: 13px 11px;
  }
}

@media (max-width: 390px) {
  .tcjc-search-modern-header h2 {
    font-size: 2rem;
  }

  .tcjc-search-modern-suggestions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes tcjcSearchModernFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tcjcSearchModernRise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tcjcSearchModernSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tcjc-search-modern-overlay,
  .tcjc-search-modern-sheet,
  .tcjc-search-modern-spinner {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ========================================================================== 
   v94 UNIFIED READER POPUPS
   Daily Reading, Verse of the Day, and Saved Scriptures now use the same
   modal shell, spacing, close control, backdrop, and responsive behavior as
   Scripture Search. Their existing content remains intact.
   ========================================================================== */

html.tcjc-app-popup-open,
body.tcjc-app-popup-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

.tcjc-app-popup-overlay {
  z-index: 2147484000;
}

.tcjc-app-popup-sheet {
  width: min(920px, calc(100vw - 28px));
  max-height: min(86svh, 820px);
  grid-template-rows: auto minmax(0, 1fr);
}

.tcjc-app-popup-content {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 18px 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(57, 127, 166, .38) transparent;
}

.tcjc-app-popup-content > :first-child {
  margin-top: 0;
}

.tcjc-app-popup-content > :last-child {
  margin-bottom: 0;
}

.tcjc-app-popup-content .tcjc-app-sacred-context {
  margin: 0 0 22px;
  border-radius: 16px;
}

.tcjc-app-popup-content-title {
  max-width: 760px;
  margin: 0 0 12px;
  color: #203448;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  font-weight: 840;
  letter-spacing: -.045em;
  line-height: 1.08;
}

.tcjc-app-popup-content .tcjc-app-daily-quote {
  max-width: 760px;
  margin: 0 0 14px;
  color: #294359;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  font-weight: 720;
  line-height: 1.48;
}

.tcjc-app-popup-content .tcjc-app-daily-reference {
  margin: 0 0 12px;
  color: #1f3a50;
  font-size: 1.02rem;
  font-weight: 840;
}

.tcjc-app-popup-content .tcjc-app-daily-description {
  max-width: 760px;
  color: #61717e;
  font-size: .98rem;
  font-weight: 620;
  line-height: 1.6;
}

.tcjc-app-popup-content .tcjc-app-daily-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.tcjc-app-popup-content .tcjc-app-daily-primary,
.tcjc-app-popup-content .tcjc-app-daily-secondary {
  min-height: 52px;
  padding: 0 20px;
  border-radius: 15px;
  font: inherit;
  font-weight: 820;
}

.tcjc-app-popup-content .tcjc-app-daily-primary {
  border: 1px solid rgba(26, 101, 141, .48);
  color: #fff;
  background: linear-gradient(135deg, #5ca8cb, #257ea9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 10px 24px rgba(34, 113, 151, .20);
}

.tcjc-app-popup-content .tcjc-app-daily-secondary {
  border: 1px solid rgba(54, 126, 165, .24);
  color: #294359;
  background: #fff;
  box-shadow: 0 8px 20px rgba(53, 83, 101, .07);
}

.tcjc-app-popup-content .tcjc-app-daily-primary:hover,
.tcjc-app-popup-content .tcjc-app-daily-primary:focus-visible {
  background: linear-gradient(135deg, #69b2d2, #22749c);
  outline: none;
  transform: translateY(-1px);
}

.tcjc-app-popup-content .tcjc-app-daily-secondary:hover,
.tcjc-app-popup-content .tcjc-app-daily-secondary:focus-visible {
  border-color: rgba(39, 112, 151, .38);
  background: rgba(148, 184, 205, .12);
  outline: none;
}

.tcjc-app-popup-content .tcjc-saved-scriptures-list {
  display: grid;
  gap: 8px;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

.tcjc-app-popup-content .tcjc-saved-scripture-item {
  padding: 0;
  border: 1px solid rgba(61, 112, 139, .14);
  border-radius: 14px;
  background: rgba(255,255,255,.80);
  box-shadow: 0 6px 16px rgba(35, 64, 82, .05);
}

.tcjc-app-popup-content .tcjc-saved-scripture-link {
  gap: 3px;
  padding: 10px 12px 6px;
}

.tcjc-app-popup-content .tcjc-saved-scripture-link span {
  font-size: .9rem;
  line-height: 1.15;
}

.tcjc-app-popup-content .tcjc-saved-scripture-link em {
  font-size: .72rem;
  line-height: 1.2;
}

.tcjc-app-popup-content .tcjc-saved-scripture-link p {
  margin: 4px 0 0;
  font-size: .8rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.tcjc-app-popup-content .tcjc-saved-scripture-remove {
  min-height: 32px;
  margin: 0 12px 10px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: .75rem;
}

html.tcjc-app-dark-active .tcjc-app-popup-content-title,
body.tcjc-app-dark-active .tcjc-app-popup-content-title,
body.tcjc-reader-dark-active .tcjc-app-popup-content-title,
html.tcjc-app-dark-active .tcjc-app-popup-content .tcjc-app-daily-reference,
body.tcjc-app-dark-active .tcjc-app-popup-content .tcjc-app-daily-reference,
body.tcjc-reader-dark-active .tcjc-app-popup-content .tcjc-app-daily-reference,
html.tcjc-app-dark-active .tcjc-app-popup-content .tcjc-app-daily-quote,
body.tcjc-app-dark-active .tcjc-app-popup-content .tcjc-app-daily-quote,
body.tcjc-reader-dark-active .tcjc-app-popup-content .tcjc-app-daily-quote {
  color: #f1eee8;
}

html.tcjc-app-dark-active .tcjc-app-popup-content .tcjc-app-daily-description,
body.tcjc-app-dark-active .tcjc-app-popup-content .tcjc-app-daily-description,
body.tcjc-reader-dark-active .tcjc-app-popup-content .tcjc-app-daily-description {
  color: #bbb5ad;
}

html.tcjc-app-dark-active .tcjc-app-popup-content .tcjc-app-daily-secondary,
body.tcjc-app-dark-active .tcjc-app-popup-content .tcjc-app-daily-secondary,
body.tcjc-reader-dark-active .tcjc-app-popup-content .tcjc-app-daily-secondary,
html.tcjc-app-dark-active .tcjc-app-popup-content .tcjc-saved-scripture-item,
body.tcjc-app-dark-active .tcjc-app-popup-content .tcjc-saved-scripture-item,
body.tcjc-reader-dark-active .tcjc-app-popup-content .tcjc-saved-scripture-item {
  color: #ede8df;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  box-shadow: none;
}

@media (max-width: 720px) {
  .tcjc-app-popup-sheet {
    width: min(92vw, 620px);
    max-width: min(92vw, 620px);
    max-height: min(74svh, 640px);
  }

  .tcjc-app-popup-content {
    padding: 12px 14px max(16px, calc(env(safe-area-inset-bottom) + 12px));
  }

  .tcjc-app-popup-content .tcjc-app-sacred-context {
    margin-bottom: 10px;
  }

  .tcjc-app-popup-content .tcjc-app-daily-actions {
    display: grid;
  }

  .tcjc-app-popup-content .tcjc-app-daily-primary,
  .tcjc-app-popup-content .tcjc-app-daily-secondary {
    width: 100%;
  }
}

/* END v94 UNIFIED READER POPUPS */





/* TCJC_V99_REAL_GLASS_START */

/* =========================================================
   APP POPUP LAYER

   Deliberately has NO:
   - opacity
   - transform
   - filter
   - backdrop-filter
   - isolation
   - background

   The glass card itself must see the real app underneath.
   ========================================================= */

.tcjc-app-popup-layer {
  position: fixed;

  inset: 0;

  z-index: 2147483647;

  pointer-events: none;
}

.tcjc-app-popup-dismiss-layer {
  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: auto;

  background: transparent;
}

/* =========================================================
   MAIN POPUP CARD

   Uses the same liquid-glass recipe as the website:
   translucent gradient + real backdrop blur + saturation +
   contrast + glass edge/highlight.
   ========================================================= */

.tcjc-app-popup-sheet {








  z-index: 1;

  display: grid;

  grid-template-rows:
    auto
    minmax(0, 1fr);

  width:
    min(
      740px,
      calc(100vw - 30px)
    ) !important;

  max-height:
    min(
      82svh,
      760px
    ) !important;



  overflow: hidden !important;

  pointer-events: auto;

  color:
    rgba(255,255,255,.97) !important;

  border:
    1px solid
    rgba(255,255,255,.50) !important;

  border-radius:
    30px !important;

  /*
   * This is intentionally translucent.
   * The blur does the visual work.
   */
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.30),
      rgba(255,255,255,.08) 50%,
      rgba(255,255,255,.22)
    ) !important;

  -webkit-backdrop-filter:
    blur(26px)
    saturate(160%)
    contrast(108%) !important;

  backdrop-filter:
    blur(26px)
    saturate(160%)
    contrast(108%) !important;

  box-shadow:
    0 32px 88px
      rgba(0,0,0,.30),
    inset 0 1px 0
      rgba(255,255,255,.82),
    inset 0 -1px 0
      rgba(148,184,205,.14) !important;






}

/* Website-style reflective glass highlight. */

.tcjc-app-popup-sheet::before {
  content: "";

  position: absolute;

  inset: 1px;

  z-index: 0;

  border-radius: inherit;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.54),
      transparent 30%,
      rgba(255,255,255,.10) 64%,
      transparent 100%
    );

  opacity: .62;

  mix-blend-mode: screen;
}

/* =========================================================
   HEADER
   ========================================================= */

.tcjc-app-popup-header {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding:
    24px
    24px
    17px;

  border-bottom:
    1px solid
    rgba(255,255,255,.22);

  background: transparent;
}

.tcjc-app-popup-header
  > div {
  min-width: 0;
}

.tcjc-app-popup-header p,
.tcjc-app-popup-header h2,
.tcjc-app-popup-header span {
  margin: 0;
}

.tcjc-app-popup-header p {
  margin-bottom: 7px;

  color: #a9def7;

  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;

  text-transform: uppercase;

  text-shadow:
    0 1px 2px
      rgba(5,18,30,.64),
    0 0 14px
      rgba(77,170,220,.28);
}

.tcjc-app-popup-header h2 {
  color:
    rgba(255,255,255,.97);

  font-size:
    clamp(
      2rem,
      4vw,
      3rem
    );

  font-weight: 820;

  letter-spacing: -.05em;
  line-height: 1;

  text-shadow:
    0 2px 4px
      rgba(8,18,32,.42),
    0 12px 28px
      rgba(8,18,32,.32);
}

.tcjc-app-popup-header span {
  display: block;

  margin-top: 8px;

  color:
    rgba(255,255,255,.91);

  font-size: .88rem;
  font-weight: 610;

  text-shadow:
    0 1px 3px
      rgba(7,18,31,.50),
    0 8px 22px
      rgba(7,18,31,.26);
}

.tcjc-app-popup-close {
  appearance: none;

  display: grid;

  width: 48px;
  height: 48px;

  flex:
    0
    0
    48px;

  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(255,255,255,.50);

  border-radius: 14px;

  color: #fff;

  background:
    rgba(255,255,255,.16);

  box-shadow:
    0 10px 24px
      rgba(8,24,42,.20),
    inset 0 1px 0
      rgba(255,255,255,.26);

  cursor: pointer;

  -webkit-backdrop-filter:
    blur(10px)
    saturate(125%);

  backdrop-filter:
    blur(10px)
    saturate(125%);
}

/* =========================================================
   CONTENT
   ========================================================= */

.tcjc-app-popup-content {
  position: relative;

  z-index: 1;

  min-height: 0;

  padding:
    16px
    22px
    22px;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  background: transparent !important;
}

/* =========================================================
   SACRED DATE / MOON CARD
   ========================================================= */

.tcjc-app-popup-content
.tcjc-app-sacred-context {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:
    4px
    8px;

  align-items: center;

  margin:
    0
    0
    10px !important;

  padding:
    8px
    10px !important;

  border:
    1px solid
    rgba(255,255,255,.26) !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.07)
    ) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.30) !important;

  -webkit-backdrop-filter:
    blur(12px)
    saturate(130%) !important;

  backdrop-filter:
    blur(12px)
    saturate(130%) !important;
}

.tcjc-app-sacred-context-date
small,
.tcjc-app-sacred-context-date
strong,
.tcjc-app-sacred-context-date
span {
  display: block;
}

.tcjc-app-sacred-context-date
small {
  margin-bottom: 2px;

  color: #b8e8ff !important;

  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .1em;

  text-transform: uppercase;

  text-shadow:
    0 1px 2px
      rgba(5,18,30,.66);
}

.tcjc-app-sacred-context-date
strong {
  color:
    rgba(255,255,255,.97) !important;

  font-size: .96rem;
  font-weight: 830;

  text-shadow:
    0 1px 3px
      rgba(7,18,31,.48);
}

.tcjc-app-sacred-context-date
span {
  margin-top: 2px;

  color:
    rgba(255,255,255,.80) !important;

  font-size: .64rem;

  text-shadow:
    0 1px 2px
      rgba(7,18,31,.40);
}

.tcjc-app-sacred-context-moon {
  display: flex;

  align-items: center;

  gap: 7px;
}

.tcjc-app-sacred-context-moon-icon {
  display: inline-grid !important;

  width: 30px !important;
  height: 30px !important;

  flex:
    0
    0
    30px !important;

  place-items: center;

  color:
    rgba(255,255,255,.38) !important;

  font-size: 0 !important;
}

.tcjc-app-sacred-context-moon-icon
svg {
  display: block;

  width: 100%;
  height: 100%;
}

.tcjc-popup-moon-lit {
  fill: #efe0a4;
}

.tcjc-popup-moon-dark {
  fill: #18303b;
}

.tcjc-popup-moon-outline {
  fill: none;

  stroke: currentColor;
  stroke-width: 1.1;
}

.tcjc-app-sacred-context-moon
> div
strong,
.tcjc-app-sacred-context-moon
> div
small {
  display: block;
}

.tcjc-app-sacred-context-moon
> div
strong {
  color:
    rgba(255,255,255,.96) !important;

  font-size: .66rem;

  text-shadow:
    0 1px 2px
      rgba(7,18,31,.42);
}

.tcjc-app-sacred-context-moon
> div
small {
  margin-top: 2px;

  color:
    rgba(255,255,255,.72) !important;

  font-size: .55rem;
}

.tcjc-app-sacred-context-observances {
  display: flex;

  grid-column:
    1 / -1;

  flex-wrap: wrap;

  gap: 5px;

  padding-top: 4px;

  border-top:
    1px solid
    rgba(255,255,255,.16) !important;
}

.tcjc-app-sacred-context-observances
span {
  min-height: 22px;

  padding:
    3px
    7px;

  border:
    1px solid
    rgba(255,255,255,.20);

  border-radius: 999px;

  color:
    rgba(255,255,255,.95) !important;

  background:
    rgba(255,255,255,.11) !important;

  font-size: .52rem;
  font-weight: 820;

  text-shadow:
    0 1px 2px
      rgba(7,18,31,.38);
}

/* =========================================================
   BRIEFING — CENTERED
   ========================================================= */

.tcjc-app-popup-briefing {



  width:
    min(
      680px,
      calc(100vw - 30px)
    ) !important;






}

/* =========================================================
   BRIEFING INNER CARDS
   ========================================================= */

.tcjc-app-briefing-events {
  display: grid;

  gap: 7px;
}

.tcjc-app-briefing-event,
.tcjc-app-briefing-reading,
.tcjc-app-popup-content
.tcjc-saved-scripture-item {
  position: relative;

  border:
    1px solid
    rgba(255,255,255,.26) !important;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.07)
    ) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.30) !important;

  -webkit-backdrop-filter:
    blur(10px)
    saturate(125%) !important;

  backdrop-filter:
    blur(10px)
    saturate(125%) !important;
}

.tcjc-app-briefing-event {
  --briefing-marker:
    #a9def7;

  padding:
    11px
    12px
    11px
    15px;

  overflow: hidden;
}

.tcjc-app-briefing-event::before {
  content: "";

  position: absolute;

  inset:
    0
    auto
    0
    0;

  width: 3px;

  background:
    var(--briefing-marker);
}

.tcjc-app-briefing-event[
data-category="appointed"
] {
  --briefing-marker:
    #e2c96d;
}

.tcjc-app-briefing-event[
data-category="christian"
] {
  --briefing-marker:
    #cbbfea;
}

.tcjc-app-briefing-event
header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;
}

.tcjc-app-briefing-event
header
span,
.tcjc-app-briefing-event
header
small {
  color:
    var(--briefing-marker) !important;

  font-size: .51rem;
  font-weight: 880;
  letter-spacing: .08em;

  text-transform: uppercase;

  text-shadow:
    0 1px 2px
      rgba(7,18,31,.46);
}

.tcjc-app-briefing-event
h4 {
  margin:
    5px
    0
    0;

  color:
    rgba(255,255,255,.97) !important;

  font-size: .88rem;
  font-weight: 830;

  text-shadow:
    0 1px 3px
      rgba(7,18,31,.50);
}

.tcjc-app-briefing-event
> p {
  margin:
    4px
    0
    0;

  color:
    rgba(255,255,255,.86) !important;

  font-size: .66rem;
  line-height: 1.38;

  text-shadow:
    0 1px 3px
      rgba(7,18,31,.44);
}

.tcjc-app-briefing-reference-row {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 8px;
}

.tcjc-app-briefing-reference {
  display: inline-flex;

  min-height: 30px;

  align-items: center;
  justify-content: space-between;

  gap: 6px;

  padding:
    5px
    8px;

  border:
    1px solid
    rgba(255,255,255,.28);

  border-radius: 8px;

  color: #fff;

  background:
    rgba(255,255,255,.12);

  font: inherit;
  font-size: .57rem;
  font-weight: 790;

  text-shadow:
    0 1px 2px
      rgba(7,18,31,.40);

  cursor: pointer;
}

.tcjc-app-briefing-reading {
  margin-top: 9px;

  padding:
    13px
    14px;
}

.tcjc-app-briefing-reading
> header {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 10px;
}

.tcjc-app-briefing-reading
> header
p {
  margin:
    0
    0
    4px;

  color: #b8e8ff !important;

  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .1em;

  text-transform: uppercase;

  text-shadow:
    0 1px 2px
      rgba(5,18,30,.64);
}

.tcjc-app-briefing-reading
> header
h3 {
  margin: 0;

  color:
    rgba(255,255,255,.97) !important;

  font-size:
    clamp(
      1rem,
      2vw,
      1.28rem
    );

  line-height: 1.18;

  text-shadow:
    0 1px 3px
      rgba(7,18,31,.50);
}

.tcjc-app-briefing-reading
> header
> span {
  color:
    rgba(255,255,255,.72) !important;

  font-size: .59rem;
  font-weight: 740;
}

.tcjc-app-briefing-reading-summary,
.tcjc-app-briefing-message {
  margin:
    7px
    0
    0;

  color:
    rgba(255,255,255,.84) !important;

  font-size: .65rem;
  line-height: 1.4;

  text-shadow:
    0 1px 3px
      rgba(7,18,31,.40);
}

.tcjc-app-briefing-reading-buttons {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 9px;
}

/* Website-style CTA blue retained. */

.tcjc-app-briefing-reading-buttons
button,
.tcjc-app-popup-content
.tcjc-app-daily-primary {
  min-height: 36px;

  padding:
    6px
    10px;

  border:
    1px solid
    rgba(255,255,255,.42) !important;

  border-radius: 9px;

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      rgba(111,177,215,.92),
      rgba(53,121,163,.92)
    ) !important;

  box-shadow:
    0 12px 30px
      rgba(36,82,112,.24),
    inset 0 1px 0
      rgba(255,255,255,.28) !important;

  font: inherit;
  font-size: .61rem;
  font-weight: 820;

  text-shadow:
    0 1px 2px
      rgba(12,28,44,.42);

  cursor: pointer;
}

/* =========================================================
   DAILY VERSE / DAILY READING / SAVED TYPOGRAPHY
   ========================================================= */

.tcjc-app-popup-content-title,
.tcjc-app-popup-content
.tcjc-app-daily-reference,
.tcjc-app-popup-content
.tcjc-app-daily-quote,
.tcjc-app-popup-content
.tcjc-saved-scripture-link,
.tcjc-app-popup-content
.tcjc-saved-scripture-link
span {
  color:
    rgba(255,255,255,.97) !important;

  text-shadow:
    0 1px 3px
      rgba(7,18,31,.48) !important;
}

.tcjc-app-popup-content
.tcjc-app-daily-description,
.tcjc-app-popup-content
.tcjc-saved-scripture-link
em,
.tcjc-app-popup-content
.tcjc-saved-scripture-link
p {
  color:
    rgba(255,255,255,.86) !important;

  text-shadow:
    0 1px 3px
      rgba(7,18,31,.40) !important;
}

.tcjc-app-popup-content
.tcjc-app-daily-secondary {
  border:
    1px solid
    rgba(255,255,255,.30) !important;

  color: #fff !important;

  background:
    rgba(255,255,255,.12) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.20) !important;
}

/* =========================================================
   NIGHT MODE
   ========================================================= */

html.tcjc-app-dark-active
.tcjc-app-popup-sheet,
body.tcjc-app-dark-active
.tcjc-app-popup-sheet,
body.tcjc-reader-dark-active
.tcjc-app-popup-sheet {
  border-color:
    rgba(255,255,255,.34) !important;

  /*
   * Neutral smoked glass.
   * Still translucent; still lets background color through.
   */
  background:
    linear-gradient(
      135deg,
      rgba(26,30,33,.38),
      rgba(8,13,17,.26) 50%,
      rgba(36,35,32,.30)
    ) !important;

  -webkit-backdrop-filter:
    blur(28px)
    saturate(140%)
    contrast(108%)
    brightness(.78) !important;

  backdrop-filter:
    blur(28px)
    saturate(140%)
    contrast(108%)
    brightness(.78) !important;

  box-shadow:
    0 32px 88px
      rgba(0,0,0,.42),
    inset 0 1px 0
      rgba(255,255,255,.25),
    inset 0 -1px 0
      rgba(255,255,255,.06) !important;
}

/* =========================================================
   OPEN/CLOSE MOTION

   Positioning is intentionally NOT animated here.

   Current popup geometry owns transform/translate separately.
   Motion therefore uses opacity only so opening and closing
   can never move a centered popup out of position.
   ========================================================= */

@keyframes tcjcRealGlassIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tcjcRealGlassOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes tcjcRealGlassCenterIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tcjcRealGlassCenterOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

html.tcjc-app-popup-closing
.tcjc-app-popup-sheet,
body.tcjc-app-popup-closing
.tcjc-app-popup-sheet {
  pointer-events: none;


}

html.tcjc-app-popup-closing
.tcjc-app-popup-briefing,
body.tcjc-app-popup-closing
.tcjc-app-popup-briefing {

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {
  .tcjc-app-popup-sheet {
    width:
      calc(
        100vw - 20px
      ) !important;

    max-height:
      min(
        84svh,
        760px
      ) !important;



    border-radius:
      22px !important;

    -webkit-backdrop-filter:
      blur(18px)
      saturate(138%)
      contrast(104%) !important;

    backdrop-filter:
      blur(18px)
      saturate(138%)
      contrast(104%) !important;
  }

  .tcjc-app-popup-briefing {



    width:
      calc(
        100vw - 20px
      ) !important;

    max-width:
      480px !important;
  }

  .tcjc-app-popup-header {
    padding:
      19px
      17px
      13px;
  }

  .tcjc-app-popup-header h2 {
    font-size:
      clamp(
        1.65rem,
        8vw,
        2.25rem
      );
  }

  .tcjc-app-popup-close {
    width: 42px;
    height: 42px;

    flex-basis: 42px;
  }

  .tcjc-app-popup-content {
    padding:
      12px
      14px
      max(
        17px,
        calc(
          env(
            safe-area-inset-bottom
          )
          + 10px
        )
      );
  }

  .tcjc-app-popup-content
  .tcjc-app-sacred-context {
    grid-template-columns:
      1fr
      auto;
  }

  .tcjc-app-sacred-context-moon
  > div {
    display: none;
  }

  .tcjc-app-briefing-event
  header {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap: 2px;
  }

  .tcjc-app-briefing-reading
  > header {
    grid-template-columns:
      1fr;

    gap: 4px;
  }

  .tcjc-app-briefing-reading-buttons {
    display: grid;
  }

  .tcjc-app-briefing-reading-buttons
  button {
    width: 100%;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .tcjc-app-popup-sheet,
  .tcjc-app-popup-briefing {
    animation-duration:
      .01ms !important;

    transition-duration:
      .01ms !important;
  }
}

/* TCJC_V99_REAL_GLASS_END */

/* TCJC_V100_POPUP_TEXT_START */

/* =========================================================
   LIGHT MODE — DARK, LEGIBLE TYPE OVER REAL GLASS
   ========================================================= */

.tcjc-app-popup-header h2,
.tcjc-app-popup-content-title,
.tcjc-app-popup-content
.tcjc-app-daily-reference,
.tcjc-app-popup-content
.tcjc-app-daily-quote,
.tcjc-app-sacred-context-date
strong,
.tcjc-app-sacred-context-moon
> div
strong,
.tcjc-app-briefing-event
h4,
.tcjc-app-briefing-reading
> header
h3,
.tcjc-app-popup-content
.tcjc-saved-scripture-link,
.tcjc-app-popup-content
.tcjc-saved-scripture-link
span {
  color: #263f4b !important;

  text-shadow:
    0 1px 1px
    rgba(255,255,255,.72) !important;
}

.tcjc-app-popup-header span,
.tcjc-app-popup-content
.tcjc-app-daily-description,
.tcjc-app-sacred-context-date
span,
.tcjc-app-sacred-context-moon
> div
small,
.tcjc-app-briefing-event
> p,
.tcjc-app-briefing-reading-summary,
.tcjc-app-briefing-message,
.tcjc-app-briefing-reading
> header
> span,
.tcjc-app-popup-content
.tcjc-saved-scripture-link
em,
.tcjc-app-popup-content
.tcjc-saved-scripture-link
p {
  color: #657983 !important;

  text-shadow:
    0 1px 1px
    rgba(255,255,255,.55) !important;
}

.tcjc-app-popup-header p,
.tcjc-app-sacred-context-date
small,
.tcjc-app-briefing-reading
> header
p {
  color: #347fa2 !important;

  text-shadow:
    0 1px 1px
    rgba(255,255,255,.68) !important;
}

.tcjc-app-popup-close {
  color: #294956 !important;

  border-color:
    rgba(80,112,127,.22) !important;

  background:
    rgba(255,255,255,.24) !important;
}

.tcjc-app-briefing-reference,
.tcjc-app-popup-content
.tcjc-app-daily-secondary {
  color: #315a6d !important;

  text-shadow: none !important;

  border-color:
    rgba(66,111,133,.20) !important;

  background:
    rgba(255,255,255,.22) !important;
}

/* Make both actions use the same readable text size. */

.tcjc-app-popup-content
.tcjc-app-daily-primary,
.tcjc-app-popup-content
.tcjc-app-daily-secondary {
  font-size: .84rem !important;
  font-weight: 820 !important;
}

/* =========================================================
   NIGHT MODE — RESTORE LIGHT TYPOGRAPHY
   ========================================================= */

html.tcjc-app-dark-active
.tcjc-app-popup-header h2,
body.tcjc-app-dark-active
.tcjc-app-popup-header h2,
body.tcjc-reader-dark-active
.tcjc-app-popup-header h2,

html.tcjc-app-dark-active
.tcjc-app-popup-content-title,
body.tcjc-app-dark-active
.tcjc-app-popup-content-title,
body.tcjc-reader-dark-active
.tcjc-app-popup-content-title,

html.tcjc-app-dark-active
.tcjc-app-popup-content
.tcjc-app-daily-reference,
body.tcjc-app-dark-active
.tcjc-app-popup-content
.tcjc-app-daily-reference,
body.tcjc-reader-dark-active
.tcjc-app-popup-content
.tcjc-app-daily-reference,

html.tcjc-app-dark-active
.tcjc-app-popup-content
.tcjc-app-daily-quote,
body.tcjc-app-dark-active
.tcjc-app-popup-content
.tcjc-app-daily-quote,
body.tcjc-reader-dark-active
.tcjc-app-popup-content
.tcjc-app-daily-quote,

html.tcjc-app-dark-active
.tcjc-app-sacred-context-date
strong,
body.tcjc-app-dark-active
.tcjc-app-sacred-context-date
strong,
body.tcjc-reader-dark-active
.tcjc-app-sacred-context-date
strong,

html.tcjc-app-dark-active
.tcjc-app-sacred-context-moon
strong,
body.tcjc-app-dark-active
.tcjc-app-sacred-context-moon
strong,
body.tcjc-reader-dark-active
.tcjc-app-sacred-context-moon
strong,

html.tcjc-app-dark-active
.tcjc-app-briefing-event
h4,
body.tcjc-app-dark-active
.tcjc-app-briefing-event
h4,
body.tcjc-reader-dark-active
.tcjc-app-briefing-event
h4,

html.tcjc-app-dark-active
.tcjc-app-briefing-reading
h3,
body.tcjc-app-dark-active
.tcjc-app-briefing-reading
h3,
body.tcjc-reader-dark-active
.tcjc-app-briefing-reading
h3 {
  color: #f1eee8 !important;

  text-shadow:
    0 1px 3px
    rgba(0,0,0,.36) !important;
}

html.tcjc-app-dark-active
.tcjc-app-popup-header span,
body.tcjc-app-dark-active
.tcjc-app-popup-header span,
body.tcjc-reader-dark-active
.tcjc-app-popup-header span,

html.tcjc-app-dark-active
.tcjc-app-daily-description,
body.tcjc-app-dark-active
.tcjc-app-daily-description,
body.tcjc-reader-dark-active
.tcjc-app-daily-description,

html.tcjc-app-dark-active
.tcjc-app-sacred-context-date span,
body.tcjc-app-dark-active
.tcjc-app-sacred-context-date span,
body.tcjc-reader-dark-active
.tcjc-app-sacred-context-date span,

html.tcjc-app-dark-active
.tcjc-app-briefing-event > p,
body.tcjc-app-dark-active
.tcjc-app-briefing-event > p,
body.tcjc-reader-dark-active
.tcjc-app-briefing-event > p,

html.tcjc-app-dark-active
.tcjc-app-briefing-reading-summary,
body.tcjc-app-dark-active
.tcjc-app-briefing-reading-summary,
body.tcjc-reader-dark-active
.tcjc-app-briefing-reading-summary {
  color: #c0bbb3 !important;

  text-shadow:
    0 1px 3px
    rgba(0,0,0,.30) !important;
}

html.tcjc-app-dark-active
.tcjc-app-popup-close,
body.tcjc-app-dark-active
.tcjc-app-popup-close,
body.tcjc-reader-dark-active
.tcjc-app-popup-close {
  color: #f1eee8 !important;

  border-color:
    rgba(255,255,255,.22) !important;

  background:
    rgba(255,255,255,.10) !important;
}

/* TCJC_V100_POPUP_TEXT_END */

/* TCJC_V113_POPUP_THEME_REPAIR_START */

.tcjc-app-popup-overlay,
.tcjc-search-popup-overlay,
.tcjc-search-modern-overlay {
  -webkit-backdrop-filter:
    blur(18px)
    saturate(1.02) !important;

  backdrop-filter:
    blur(18px)
    saturate(1.02) !important;
}

.tcjc-app-popup-sheet,
.tcjc-search-popup-sheet,
.tcjc-search-modern-sheet {
  -webkit-backdrop-filter:
    blur(38px)
    saturate(1.12) !important;

  backdrop-filter:
    blur(38px)
    saturate(1.12) !important;
}

.tcjc-app-popup-header p,
.tcjc-search-modern-header p {
  font-size:
    .82rem !important;

  line-height:
    1.28 !important;

  letter-spacing:
    .17em !important;
}

.tcjc-app-popup-header h2,
.tcjc-search-modern-header h2 {
  line-height:
    1.02 !important;
}

.tcjc-app-popup-header > div > span,
.tcjc-search-modern-header > div > span,
.tcjc-search-modern-header > span {
  font-size:
    1rem !important;

  line-height:
    1.4 !important;
}

.tcjc-search-modern-close {
  width:
    52px !important;

  height:
    52px !important;

  min-width:
    52px !important;

  min-height:
    52px !important;

  display:
    grid !important;

  place-items:
    center !important;
}

.tcjc-search-modern-close svg,
.tcjc-search-modern-close .tcjc-iconoir-icon {
  width:
    23px !important;

  height:
    23px !important;

  color:
    currentColor !important;

  stroke:
    currentColor !important;
}

.tcjc-app-popup-briefing
.tcjc-app-sacred-context-date
small {
  font-size:
    .80rem !important;

  line-height:
    1.3 !important;
}

.tcjc-app-popup-briefing
.tcjc-app-sacred-context-date
strong {
  font-size:
    1.17rem !important;

  line-height:
    1.22 !important;
}

.tcjc-app-popup-briefing
.tcjc-app-sacred-context-date
span {
  font-size:
    .94rem !important;

  line-height:
    1.4 !important;
}

.tcjc-app-popup-briefing
.tcjc-app-sacred-context-moon
strong {
  font-size:
    .96rem !important;

  line-height:
    1.25 !important;
}

.tcjc-app-popup-briefing
.tcjc-app-sacred-context-moon
small {
  font-size:
    .80rem !important;

  line-height:
    1.3 !important;
}

.tcjc-app-popup-briefing
.tcjc-app-sacred-context-observances
span {
  font-size:
    .80rem !important;

  line-height:
    1.25 !important;
}

.tcjc-app-popup-briefing
article
small {
  font-size:
    .80rem !important;

  line-height:
    1.3 !important;
}

.tcjc-app-popup-briefing
article
h3 {
  font-size:
    1.18rem !important;

  line-height:
    1.22 !important;
}

.tcjc-app-popup-briefing
article
p {
  font-size:
    1rem !important;

  line-height:
    1.48 !important;
}

.tcjc-app-popup-briefing
article
button {
  min-height:
    46px !important;

  padding:
    10px
    14px !important;

  font-size:
    .96rem !important;

  line-height:
    1.2 !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    12px !important;
}

.tcjc-app-popup-briefing
article
button
svg,
.tcjc-app-popup-briefing
article
button
.tcjc-iconoir-icon {
  width:
    21px !important;

  height:
    21px !important;

  flex:
    0 0 21px !important;

  margin-left:
    auto !important;
}

.tcjc-app-popup-briefing
.tcjc-app-briefing-reading
> header
> div
> p {
  font-size:
    .82rem !important;

  line-height:
    1.3 !important;
}

.tcjc-app-popup-briefing
.tcjc-app-briefing-reading
> header
h3 {
  font-size:
    clamp(
      1.28rem,
      2.25vw,
      1.48rem
    ) !important;

  line-height:
    1.18 !important;
}

.tcjc-app-popup-briefing
.tcjc-app-briefing-reading
> header
> span {
  font-size:
    .90rem !important;

  line-height:
    1.32 !important;
}

.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-summary,
.tcjc-app-popup-briefing
.tcjc-app-briefing-message {
  font-size:
    1rem !important;

  line-height:
    1.5 !important;
}

.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons {
  width:
    100% !important;
}

.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button {
  width:
    100% !important;

  min-height:
    42px !important;

  padding:
    12px
    16px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    14px !important;

  font-size:
    1rem !important;

  font-weight:
    800 !important;

  line-height:
    1.2 !important;
}

.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button
span {
  min-width:
    0 !important;

  font-size:
    1rem !important;

  line-height:
    1.2 !important;

  text-align:
    left !important;
}

.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button
svg,
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button
.tcjc-iconoir-icon {
  width:
    23px !important;

  height:
    23px !important;

  min-width:
    23px !important;

  flex:
    0 0 23px !important;

  margin:
    0 0 0 auto !important;

  align-self:
    center !important;
}

.tcjc-search-modern-form
input {
  font-size:
    1rem !important;
}

.tcjc-search-modern-submit {
  min-height:
    52px !important;

  font-size:
    1rem !important;
}

.tcjc-search-modern-submit
svg,
.tcjc-search-modern-submit
.tcjc-iconoir-icon {
  width:
    23px !important;

  height:
    23px !important;
}

.tcjc-search-modern-suggestion {
  min-height:
    54px !important;

  font-size:
    1rem !important;

  line-height:
    1.25 !important;
}

.tcjc-search-modern-suggestion
svg,
.tcjc-search-modern-suggestion
.tcjc-iconoir-icon {
  width:
    23px !important;

  height:
    23px !important;

  flex:
    0 0 23px !important;

  margin-left:
    auto !important;
}

.tcjc-search-modern-result-body
strong {
  font-size:
    1rem !important;

  line-height:
    1.3 !important;
}

.tcjc-search-modern-result-body
small,
.tcjc-search-modern-result-body
em {
  font-size:
    .88rem !important;

  line-height:
    1.4 !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-overlay,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-overlay {
  background:
    rgba(238, 243, 243, .16) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(1.04)
    brightness(1.01) !important;

  backdrop-filter:
    blur(18px)
    saturate(1.04)
    brightness(1.01) !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-sheet,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-sheet {
  color:
    #203541 !important;

  background:
    rgba(244, 248, 248, .86) !important;

  border-color:
    rgba(255, 255, 255, .88) !important;

  box-shadow:
    0 30px 80px rgba(29, 44, 51, .22),
    inset 0 1px 0 rgba(255, 255, 255, .95)
    !important;

  -webkit-backdrop-filter:
    blur(42px)
    saturate(1.15)
    brightness(1.04) !important;

  backdrop-filter:
    blur(42px)
    saturate(1.15)
    brightness(1.04) !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-sheet *,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-sheet * {
  text-shadow:
    none !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-header p,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-header p,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-sacred-context-date small,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-briefing-reading
> header
> div
> p {
  color:
    #287da3 !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-header h2,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-header h2,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-content h1,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-content h2,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-content h3,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-content strong,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-content h3,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-result-body strong {
  color:
    #203541 !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-header span,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-header span,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-content p,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-content small,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-content em,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-content p,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-result-body small,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-result-body em {
  color:
    #485b65 !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-close {
  color:
    #1f526b !important;

  background:
    rgba(255, 255, 255, .54) !important;

  border-color:
    rgba(255, 255, 255, .82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 8px 22px rgba(29, 44, 51, .11)
    !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-sacred-context,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
article,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-briefing-reading,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-saved-scripture-item,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-field,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-input-wrap,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-suggestion,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-result {
  color:
    #203541 !important;

  background:
    rgba(255, 255, 255, .42) !important;

  border-color:
    rgba(255, 255, 255, .68) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .76)
    !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-field input,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-input-wrap input,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-form input {
  color:
    #203541 !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-field input::placeholder,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-input-wrap input::placeholder,
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-form input::placeholder {
  color:
    #73818a !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
article
button:not(.tcjc-app-briefing-reading-buttons button) {
  color:
    #21495d !important;

  background:
    rgba(255, 255, 255, .48) !important;

  border-color:
    rgba(255, 255, 255, .72) !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button {
  color:
    #ffffff !important;

  background:
    #3d9fc9 !important;

  border-color:
    rgba(255, 255, 255, .56) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 8px 20px rgba(33, 111, 146, .18)
    !important;
}

html.tcjc-app-dark-active
.tcjc-app-popup-overlay,
body.tcjc-app-dark-active
.tcjc-app-popup-overlay,
html.tcjc-reader-dark-active
.tcjc-app-popup-overlay,
body.tcjc-reader-dark-active
.tcjc-app-popup-overlay,
html.tcjc-app-dark-active
.tcjc-search-modern-overlay,
body.tcjc-app-dark-active
.tcjc-search-modern-overlay,
html.tcjc-reader-dark-active
.tcjc-search-modern-overlay,
body.tcjc-reader-dark-active
.tcjc-search-modern-overlay {
  background:
    rgba(7, 12, 16, .12) !important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(.92)
    brightness(.82) !important;

  backdrop-filter:
    blur(18px)
    saturate(.92)
    brightness(.82) !important;
}

html.tcjc-app-dark-active
.tcjc-app-popup-sheet,
body.tcjc-app-dark-active
.tcjc-app-popup-sheet,
html.tcjc-reader-dark-active
.tcjc-app-popup-sheet,
body.tcjc-reader-dark-active
.tcjc-app-popup-sheet,
html.tcjc-app-dark-active
.tcjc-search-modern-sheet,
body.tcjc-app-dark-active
.tcjc-search-modern-sheet,
html.tcjc-reader-dark-active
.tcjc-search-modern-sheet,
body.tcjc-reader-dark-active
.tcjc-search-modern-sheet {
  color:
    #f2eee7 !important;

  background:
    rgba(27, 31, 33, .91) !important;

  border-color:
    rgba(255, 255, 255, .14) !important;

  box-shadow:
    0 32px 88px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .07)
    !important;

  -webkit-backdrop-filter:
    blur(38px)
    saturate(1.06) !important;

  backdrop-filter:
    blur(38px)
    saturate(1.06) !important;
}

html.tcjc-app-dark-active
.tcjc-app-popup-header p,
body.tcjc-app-dark-active
.tcjc-app-popup-header p,
html.tcjc-reader-dark-active
.tcjc-app-popup-header p,
body.tcjc-reader-dark-active
.tcjc-app-popup-header p,
html.tcjc-app-dark-active
.tcjc-search-modern-header p,
body.tcjc-app-dark-active
.tcjc-search-modern-header p,
html.tcjc-reader-dark-active
.tcjc-search-modern-header p,
body.tcjc-reader-dark-active
.tcjc-search-modern-header p {
  color:
    #9bd4ed !important;

  text-shadow:
    none !important;
}

html.tcjc-app-dark-active
.tcjc-app-popup-header h2,
body.tcjc-app-dark-active
.tcjc-app-popup-header h2,
html.tcjc-reader-dark-active
.tcjc-app-popup-header h2,
body.tcjc-reader-dark-active
.tcjc-app-popup-header h2,
html.tcjc-app-dark-active
.tcjc-search-modern-header h2,
body.tcjc-app-dark-active
.tcjc-search-modern-header h2,
html.tcjc-reader-dark-active
.tcjc-search-modern-header h2,
body.tcjc-reader-dark-active
.tcjc-search-modern-header h2,
html.tcjc-app-dark-active
.tcjc-app-popup-briefing
article
h3,
body.tcjc-app-dark-active
.tcjc-app-popup-briefing
article
h3,
html.tcjc-reader-dark-active
.tcjc-app-popup-briefing
article
h3,
body.tcjc-reader-dark-active
.tcjc-app-popup-briefing
article
h3,
html.tcjc-app-dark-active
.tcjc-app-briefing-reading
> header
h3,
body.tcjc-app-dark-active
.tcjc-app-briefing-reading
> header
h3,
html.tcjc-reader-dark-active
.tcjc-app-briefing-reading
> header
h3,
body.tcjc-reader-dark-active
.tcjc-app-briefing-reading
> header
h3 {
  color:
    #f4f1eb !important;

  text-shadow:
    none !important;
}

html.tcjc-app-dark-active
.tcjc-app-popup-header span,
body.tcjc-app-dark-active
.tcjc-app-popup-header span,
html.tcjc-reader-dark-active
.tcjc-app-popup-header span,
body.tcjc-reader-dark-active
.tcjc-app-popup-header span,
html.tcjc-app-dark-active
.tcjc-app-popup-briefing
article
p,
body.tcjc-app-dark-active
.tcjc-app-popup-briefing
article
p,
html.tcjc-reader-dark-active
.tcjc-app-popup-briefing
article
p,
body.tcjc-reader-dark-active
.tcjc-app-popup-briefing
article
p,
html.tcjc-app-dark-active
.tcjc-app-popup-briefing
article
small,
body.tcjc-app-dark-active
.tcjc-app-popup-briefing
article
small,
html.tcjc-reader-dark-active
.tcjc-app-popup-briefing
article
small,
body.tcjc-reader-dark-active
.tcjc-app-popup-briefing
article
small {
  color:
    #d1cbc3 !important;

  text-shadow:
    none !important;
}

html.tcjc-app-dark-active
.tcjc-search-modern-close,
body.tcjc-app-dark-active
.tcjc-search-modern-close,
html.tcjc-reader-dark-active
.tcjc-search-modern-close,
body.tcjc-reader-dark-active
.tcjc-search-modern-close {
  color:
    #ffffff !important;

  background:
    rgba(255, 255, 255, .08) !important;

  border-color:
    rgba(255, 255, 255, .17) !important;
}

html.tcjc-app-dark-active
.tcjc-app-popup-briefing
article
button,
body.tcjc-app-dark-active
.tcjc-app-popup-briefing
article
button,
html.tcjc-reader-dark-active
.tcjc-app-popup-briefing
article
button,
body.tcjc-reader-dark-active
.tcjc-app-popup-briefing
article
button {
  color:
    #f1eee8 !important;

  background:
    rgba(255, 255, 255, .075) !important;

  border-color:
    rgba(255, 255, 255, .13) !important;
}

html.tcjc-app-dark-active
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button,
body.tcjc-app-dark-active
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button,
html.tcjc-reader-dark-active
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button,
body.tcjc-reader-dark-active
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button {
  color:
    #ffffff !important;

  background:
    #3d9fc9 !important;

  border-color:
    rgba(147, 211, 239, .42) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .20),
    0 8px 22px rgba(0, 0, 0, .18)
    !important;
}

html.tcjc-app-dark-active
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button
svg,
body.tcjc-app-dark-active
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button
svg,
html.tcjc-reader-dark-active
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button
svg,
body.tcjc-reader-dark-active
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button
svg {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}

html.tcjc-app-dark-active
.tcjc-app-popup-briefing
.tcjc-app-sacred-context,
body.tcjc-app-dark-active
.tcjc-app-popup-briefing
.tcjc-app-sacred-context,
html.tcjc-reader-dark-active
.tcjc-app-popup-briefing
.tcjc-app-sacred-context,
body.tcjc-reader-dark-active
.tcjc-app-popup-briefing
.tcjc-app-sacred-context,
html.tcjc-app-dark-active
.tcjc-app-popup-briefing
article,
body.tcjc-app-dark-active
.tcjc-app-popup-briefing
article,
html.tcjc-reader-dark-active
.tcjc-app-popup-briefing
article,
body.tcjc-reader-dark-active
.tcjc-app-popup-briefing
article {
  background:
    rgba(255, 255, 255, .045) !important;

  border-color:
    rgba(255, 255, 255, .11) !important;
}

html.tcjc-app-dark-active
.tcjc-search-modern-field,
body.tcjc-app-dark-active
.tcjc-search-modern-field,
html.tcjc-reader-dark-active
.tcjc-search-modern-field,
body.tcjc-reader-dark-active
.tcjc-search-modern-field,
html.tcjc-app-dark-active
.tcjc-search-modern-input-wrap,
body.tcjc-app-dark-active
.tcjc-search-modern-input-wrap,
html.tcjc-reader-dark-active
.tcjc-search-modern-input-wrap,
body.tcjc-reader-dark-active
.tcjc-search-modern-input-wrap,
html.tcjc-app-dark-active
.tcjc-search-modern-suggestion,
body.tcjc-app-dark-active
.tcjc-search-modern-suggestion,
html.tcjc-reader-dark-active
.tcjc-search-modern-suggestion,
body.tcjc-reader-dark-active
.tcjc-search-modern-suggestion,
html.tcjc-app-dark-active
.tcjc-search-modern-result,
body.tcjc-app-dark-active
.tcjc-search-modern-result,
html.tcjc-reader-dark-active
.tcjc-search-modern-result,
body.tcjc-reader-dark-active
.tcjc-search-modern-result {
  color:
    #f1eee8 !important;

  background:
    rgba(255, 255, 255, .05) !important;

  border-color:
    rgba(255, 255, 255, .11) !important;
}

html.tcjc-app-dark-active
.tcjc-search-modern-field input,
body.tcjc-app-dark-active
.tcjc-search-modern-field input,
html.tcjc-reader-dark-active
.tcjc-search-modern-field input,
body.tcjc-reader-dark-active
.tcjc-search-modern-field input,
html.tcjc-app-dark-active
.tcjc-search-modern-input-wrap input,
body.tcjc-app-dark-active
.tcjc-search-modern-input-wrap input,
html.tcjc-reader-dark-active
.tcjc-search-modern-input-wrap input,
body.tcjc-reader-dark-active
.tcjc-search-modern-input-wrap input {
  color:
    #ffffff !important;
}

@media (max-width: 720px) {
  .tcjc-app-popup-overlay,
  .tcjc-search-popup-overlay {
    place-items:
      center !important;

    padding:
      max(10px, env(safe-area-inset-top))
      10px
      max(10px, env(safe-area-inset-bottom))
      !important;
  }

  .tcjc-app-popup-sheet,
  .tcjc-search-popup-sheet {
    position:
      relative !important;

    top:
      auto !important;

    right:
      auto !important;

    bottom:
      auto !important;

    left:
      auto !important;

    width:
      calc(100vw - 20px) !important;

    max-width:
      calc(100vw - 20px) !important;

    max-height:
      84svh !important;

    margin:
      0 !important;

    border-radius:
      26px !important;

    transform:
      none !important;
  }

  .tcjc-app-popup-briefing
  .tcjc-app-popup-header
  h2 {
    font-size:
      clamp(
        2rem,
        9.2vw,
        2.65rem
      ) !important;
  }

  .tcjc-app-popup-briefing
  article
  h3 {
    font-size:
      1.16rem !important;
  }

  .tcjc-app-popup-briefing
  article
  p {
    font-size:
      1rem !important;
  }

  .tcjc-app-popup-briefing
  .tcjc-app-briefing-reading
  > header
  h3 {
    font-size:
      1.30rem !important;
  }

  .tcjc-app-popup-briefing
  .tcjc-app-briefing-reading-buttons
  button {
    min-height:
      42px !important;

    font-size:
      1rem !important;
  }
}

/* TCJC_V113_POPUP_THEME_REPAIR_END */

/* TCJC_V114_BRIEFING_POLISH_START */

/* =========================================================
   DAILY BRIEFING — FINAL DESKTOP / DAY POLISH

   - Preserve current readable font sizes.
   - Give desktop briefing more room instead of shrinking type.
   - Strengthen day-mode eyebrow contrast.
   - Give secondary scripture buttons a visible frame.
   - Night mode intentionally untouched.
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP BRIEFING SIZE

   Wider card reduces title/description wrapping and therefore
   reduces vertical overflow. Scroll remains available only
   when the viewport genuinely requires it.
   --------------------------------------------------------- */

@media (min-width: 900px) {

  .tcjc-app-popup-sheet.tcjc-app-popup-briefing,
  .tcjc-app-popup-sheet:has(.tcjc-app-briefing-reading) {
    width:
      min(
        960px,
        calc(100vw - 96px)
      ) !important;

    max-width:
      960px !important;

    max-height:
      min(
        90svh,
        900px
      ) !important;
  }

  .tcjc-app-popup-briefing
  .tcjc-app-popup-content {
    padding-bottom:
      22px !important;
  }

  .tcjc-app-popup-briefing
  .tcjc-app-briefing-reading
  > header
  h3 {
    max-width:
      none !important;
  }
}


/* ---------------------------------------------------------
   DAY MODE — STRONGER EYEBROWS

   No shadows. Darker blue gives these labels proper hierarchy
   against the brighter frosted surface.
   --------------------------------------------------------- */

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
.tcjc-app-popup-header
p,

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
.tcjc-app-sacred-context-date
small,

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
article
small,

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading
> header
> div
> p {
  color:
    #12678e !important;

  font-weight:
    850 !important;

  opacity:
    1 !important;

  text-shadow:
    none !important;
}


/* The right-side ordinance/category eyebrow stays dark enough. */

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
article
header
> span,

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading
> header
> span {
  color:
    #435d6b !important;

  opacity:
    1 !important;

  text-shadow:
    none !important;
}


/* ---------------------------------------------------------
   DAY MODE — SCRIPTURE REFERENCE BUTTON

   This is the Book of Commandments 44:8-style action that was
   visually disappearing into the nested white glass.
   --------------------------------------------------------- */

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
article
button:not(
  .tcjc-app-briefing-reading-buttons button
) {
  color:
    #1e5068 !important;

  background:
    rgba(255, 255, 255, .66) !important;

  border:
    1.5px solid
    rgba(37, 92, 119, .34) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, .96),
    0 5px 14px
      rgba(30, 71, 91, .09)
    !important;

  font-weight:
    800 !important;

  text-shadow:
    none !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
article
button:not(
  .tcjc-app-briefing-reading-buttons button
)
svg,

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
article
button:not(
  .tcjc-app-briefing-reading-buttons button
)
.tcjc-iconoir-icon {
  color:
    #236986 !important;

  stroke:
    #236986 !important;

  opacity:
    1 !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
article
button:not(
  .tcjc-app-briefing-reading-buttons button
):hover,

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
article
button:not(
  .tcjc-app-briefing-reading-buttons button
):focus-visible {
  color:
    #173f54 !important;

  background:
    rgba(255, 255, 255, .82) !important;

  border-color:
    rgba(30, 92, 121, .54) !important;
}


/* Preserve the primary Open Today's Reading button exactly
   as the stronger blue primary action. */

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button {
  color:
    #ffffff !important;

  background:
    #3d9fc9 !important;

  border:
    1px solid
    rgba(255, 255, 255, .58) !important;

  text-shadow:
    none !important;
}

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button
svg,

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-buttons
button
.tcjc-iconoir-icon {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* TCJC_V114_BRIEFING_POLISH_END */

/* TCJC_V116_VIEWPORT_POPUP_CENTER_START */
/* =========================================================
   SINGLE POPUP POSITIONING SYSTEM

   The overlay owns the viewport.
   The popup is anchored directly to its exact center.

   This intentionally does NOT depend on:
   - grid place-items
   - flex align-items
   - bottom-sheet rules
   - margin auto
   - inherited page positioning
   ========================================================= */
html body
.tcjc-app-popup-overlay {
  position:
    fixed !important;

  inset:
    0 !important;

  top:
    0 !important;

  right:
    0 !important;

  bottom:
    0 !important;

  left:
    0 !important;

  width:
    100vw !important;

  height:
    100dvh !important;

  min-width:
    100vw !important;

  min-height:
    100dvh !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;
}


/* ---------------------------------------------------------
   APP POPUPS

   Includes:
   - Today's Guide
   - Saved Scriptures
   - Verse of the Day
   - Today's Reading
   --------------------------------------------------------- */

html body
.tcjc-app-popup-overlay
>
.tcjc-app-popup-sheet {
  position:
    absolute !important;

  top:
    50% !important;

  left:
    50% !important;

  right:
    auto !important;

  bottom:
    auto !important;

  margin:
    0 !important;

  translate:
    -50% -50% !important;

  align-self:
    auto !important;

  justify-self:
    auto !important;

  max-height:
    min(
      88dvh,
      900px
    ) !important;
}/* ---------------------------------------------------------
   SCRIPTURE SEARCH

   Search keeps its own internal layout and scrolling,
   but no longer gets to use the old bottom-sheet placement.
   --------------------------------------------------------- */



/* ---------------------------------------------------------
   INTERNAL SCROLLING

   The centered card itself stays put.
   Only its content area scrolls when genuinely necessary.
   --------------------------------------------------------- */

html body
.tcjc-app-popup-sheet
.tcjc-app-popup-content {
  min-height:
    0 !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  overscroll-behavior:
    contain !important;

  -webkit-overflow-scrolling:
    touch;
}

html body
.tcjc-search-popup-sheet
.tcjc-search-modern-content,

html body
.tcjc-search-modern-sheet
.tcjc-search-modern-content {
  min-height:
    0 !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  overscroll-behavior:
    contain !important;

  -webkit-overflow-scrolling:
    touch;
}


/* ---------------------------------------------------------
   MOBILE

   Center remains EXACTLY 50% of the usable viewport.
   Only width and maximum height change.
   --------------------------------------------------------- */

@media (max-width: 720px) {html body
  .tcjc-app-popup-overlay {
    padding:
      0 !important;
  }html body
  .tcjc-app-popup-overlay
  >
  .tcjc-app-popup-sheet {
    top:
      50% !important;

    left:
      50% !important;

    right:
      auto !important;

    bottom:
      auto !important;

    width:
      calc(
        100vw - 20px
      ) !important;

    max-width:
      calc(
        100vw - 20px
      ) !important;

    height:
      auto !important;

    max-height:
      calc(
        100dvh
        - max(
            24px,
            env(safe-area-inset-top)
          )
        - max(
            24px,
            env(safe-area-inset-bottom)
          )
      ) !important;

    margin:
      0 !important;

    translate:
      -50% -50% !important;

    border-radius:
      26px !important;
  }
}


/* ---------------------------------------------------------
   FALLBACK

   Current Safari supports individual translate. This fallback
   protects older engines without changing the normal path.
   --------------------------------------------------------- */

@supports not (translate: -50% -50%) {html body
  .tcjc-app-popup-overlay
  >
  .tcjc-app-popup-sheet {
    transform:
      translate(
        -50%,
        -50%
      ) !important;
  }
}

/* TCJC_V116_ACTUAL_APP_DOM_START */

/*
 * IMPORTANT:
 *
 * AppPopupShell currently renders:
 *
 * .tcjc-app-popup-layer
 *   > .tcjc-app-popup-dismiss-layer
 *   > .tcjc-app-popup-sheet
 *
 * It does NOT use .tcjc-app-popup-overlay.
 *
 * This is therefore the authoritative positioning rule for:
 * Saved Scriptures
 * Verse of the Day
 * Today's Reading
 * Today's Guide / Evening Reminder
 */

html body
.tcjc-app-popup-layer {
  position:
    fixed !important;

  inset:
    0 !important;

  top:
    0 !important;

  right:
    0 !important;

  bottom:
    0 !important;

  left:
    0 !important;

  width:
    100vw !important;

  height:
    100dvh !important;

  min-width:
    100vw !important;

  min-height:
    100dvh !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  box-sizing:
    border-box !important;
}

html body
.tcjc-app-popup-layer
>
.tcjc-app-popup-sheet {
  position:
    absolute !important;

  top:
    50% !important;

  left:
    50% !important;

  right:
    auto !important;

  bottom:
    auto !important;

  margin:
    0 !important;

  translate:
    none !important;

  transform:
    translate(
      -50%,
      -50%
    ) !important;

  align-self:
    auto !important;

  justify-self:
    auto !important;

  max-height:
    min(
      88dvh,
      900px
    ) !important;
}

/*
 * Keep the approved briefing card dimensions.
 * Only its position is now supplied by the same rule as
 * every other AppPopupShell.
 */

html body
.tcjc-app-popup-layer
>
.tcjc-app-popup-briefing {
  top:
    50% !important;

  left:
    50% !important;

  right:
    auto !important;

  bottom:
    auto !important;

  transform:
    translate(
      -50%,
      -50%
    ) !important;
}

@media (max-width: 720px) {

  html body
  .tcjc-app-popup-layer
  >
  .tcjc-app-popup-sheet {
    top:
      50% !important;

    left:
      50% !important;

    right:
      auto !important;

    bottom:
      auto !important;

    width:
      min(
        92vw,
        620px
      ) !important;

    max-width:
      min(
        92vw,
        620px
      ) !important;

    height:
      auto !important;

    max-height:
      min(
        74dvh,
        640px
      ) !important;

    margin:
      0 !important;

    translate:
      none !important;

    transform:
      translate(
        -50%,
        -50%
      ) !important;
  }
}

/* TCJC_V116_ACTUAL_APP_DOM_END */

/* TCJC_V116_VIEWPORT_POPUP_CENTER_END */

/* TCJC_POPUP_CLOSE_LIFECYCLE_START */

@keyframes tcjcPopupLayerFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.tcjc-search-modern-overlay.is-closing {
  pointer-events: none !important;

  animation:
    tcjcPopupLayerFadeOut
    240ms
    cubic-bezier(.4,0,1,1)
    both !important;
}

/* TCJC_POPUP_CLOSE_LIFECYCLE_END */

/* TCJC_V100_UNIFIED_POPUP_POLISH_START */

/*
 * V100 shared popup polish.
 *
 * Static positioning remains owned by the proven v116 rules.
 * Opening motion uses the independent CSS scale property rather
 * than transform, so motion cannot disturb viewport centering.
 */

@keyframes tcjcV100PopupOpen {
  from {
    opacity: 0;
    scale: .985;
  }

  45% {
    opacity: .82;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes tcjcV100BackdropOpen {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*
 * DAY MODE
 *
 * Replaces the later v113 .86-white surface with a genuinely
 * translucent blue-white glass. Text rules remain unchanged.
 */

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-sheet,

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-search-modern-sheet {
  background:
    linear-gradient(
      135deg,
      rgba(247,252,253,.62),
      rgba(231,243,247,.46) 48%,
      rgba(255,255,255,.32)
    ) !important;

  border-color:
    rgba(255,255,255,.56) !important;

  box-shadow:
    0 26px 72px
      rgba(24,61,79,.17),
    inset 0 1px 0
      rgba(255,255,255,.68) !important;

  -webkit-backdrop-filter:
    blur(34px)
    saturate(132%)
    contrast(103%)
    brightness(1.01) !important;

  backdrop-filter:
    blur(34px)
    saturate(132%)
    contrast(103%)
    brightness(1.01) !important;
}

/*
 * Reduce the bright reflective wash that made the App popup
 * read as a white card instead of transparent glass.
 */

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-sheet::before {
  opacity: .34 !important;
}

/*
 * APP POPUPS
 */

html:not(.tcjc-app-popup-closing)
body:not(.tcjc-app-popup-closing)
.tcjc-app-popup-layer
> .tcjc-app-popup-sheet {
  transform-origin:
    center center !important;

  animation:
    tcjcV100PopupOpen
    420ms
    cubic-bezier(.16,1,.3,1)
    both !important;
}

/*
 * SEARCH + CHOOSE A PASSAGE
 */

.tcjc-search-modern-overlay:not(.is-closing) {
  animation:
    tcjcV100BackdropOpen
    260ms
    ease-out
    both !important;
}

.tcjc-search-modern-overlay:not(.is-closing)
> .tcjc-search-modern-sheet {
  transform-origin:
    center center !important;

  animation:
    tcjcV100PopupOpen
    420ms
    cubic-bezier(.16,1,.3,1)
    both !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.tcjc-app-popup-closing)
  body:not(.tcjc-app-popup-closing)
  .tcjc-app-popup-layer
  > .tcjc-app-popup-sheet,

  .tcjc-search-modern-overlay:not(.is-closing),

  .tcjc-search-modern-overlay:not(.is-closing)
  > .tcjc-search-modern-sheet {
    animation-duration:
      .01ms !important;
  }
}

/* TCJC_V100_UNIFIED_POPUP_POLISH_END */

/* TCJC_V100_SACRED_CHIP_POLISH_START */

/*
 * Day-mode Sacred Calendar chips.
 *
 * The older white translucent surface became washed out after
 * the main popup glass was made clearer in v100. Give these
 * small status chips their own restrained blue-glass surface.
 */

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing
.tcjc-app-sacred-context-observances
span,

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-verse
.tcjc-app-sacred-context-observances
span,

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-reading
.tcjc-app-sacred-context-observances
span {
  color:
    #236f91 !important;

  background:
    linear-gradient(
      135deg,
      rgba(102,178,214,.18),
      rgba(65,143,183,.10)
    ) !important;

  border-color:
    rgba(55,139,181,.28) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.42),
    0 5px 15px
      rgba(37,108,143,.07)
    !important;

  -webkit-backdrop-filter:
    blur(10px)
    saturate(118%) !important;

  backdrop-filter:
    blur(10px)
    saturate(118%) !important;

  text-shadow:
    none !important;
}

/* TCJC_V100_SACRED_CHIP_POLISH_END */

/* TCJC_V104_DAILY_POPUP_ORDINANCE_CHIP_START */

/*
 * Daily Verse + Daily Reading ordinance chip.
 * Morning briefing Sabbath uses the same treatment.
 * Other briefing chips and the Calendar remain unchanged.
 */

/* Light mode */
html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-verse
.tcjc-app-sacred-context-observances
span,

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-reading
.tcjc-app-sacred-context-observances
span,

html:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
body:not(.tcjc-app-dark-active):not(.tcjc-reader-dark-active)
.tcjc-app-popup-briefing-morning
.tcjc-app-sacred-context-observances
span[data-category="ordinance"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 112px !important;
  min-height: 40px !important;

  padding: 8px 18px !important;

  border: 1px solid rgba(69, 145, 181, .28) !important;
  border-left: 5px solid #4b9bc1 !important;
  border-radius: 10px !important;

  color: #245a74 !important;
  background: rgba(255, 255, 255, .94) !important;

  box-shadow:
    0 6px 16px rgba(30, 86, 112, .08),
    inset 0 1px 0 rgba(255, 255, 255, .96) !important;

  font-size: .82rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .025em !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* Dark mode */
html.tcjc-app-dark-active
body
.tcjc-app-popup-verse
.tcjc-app-sacred-context-observances
span,

html.tcjc-app-dark-active
body
.tcjc-app-popup-reading
.tcjc-app-sacred-context-observances
span,

body.tcjc-app-dark-active
.tcjc-app-popup-verse
.tcjc-app-sacred-context-observances
span,

body.tcjc-app-dark-active
.tcjc-app-popup-reading
.tcjc-app-sacred-context-observances
span,

body.tcjc-reader-dark-active
.tcjc-app-popup-verse
.tcjc-app-sacred-context-observances
span,

body.tcjc-reader-dark-active
.tcjc-app-popup-reading
.tcjc-app-sacred-context-observances
span,

html.tcjc-app-dark-active
body
.tcjc-app-popup-briefing-morning
.tcjc-app-sacred-context-observances
span[data-category="ordinance"],

body.tcjc-app-dark-active
.tcjc-app-popup-briefing-morning
.tcjc-app-sacred-context-observances
span[data-category="ordinance"],

body.tcjc-reader-dark-active
.tcjc-app-popup-briefing-morning
.tcjc-app-sacred-context-observances
span[data-category="ordinance"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 112px !important;
  min-height: 40px !important;

  padding: 8px 18px !important;

  border: 1px solid rgba(123, 191, 221, .22) !important;
  border-left: 5px solid #69b8de !important;
  border-radius: 10px !important;

  color: #eef8fc !important;
  background: rgba(35, 44, 49, .94) !important;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;

  font-size: .82rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .025em !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* TCJC_V104_DAILY_POPUP_ORDINANCE_CHIP_END */

/* TCJC_V100_COVER_ONLY_NAV_START */

/* =========================================================
   SCRIPTURE NAVIGATION — COVER-ONLY SHELF

   HomeScripturePicker and Reader both render ReaderLocationSheet.

   The popup itself already uses the shared app popup/glass system.
   This block removes the old Reader-specific CARD presentation
   from the scripture-cover shelf only.

   Other book/chapter/section buttons below the shelf retain their
   normal glass button styling.
   ========================================================= */

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card,

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card:hover,

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card:focus,

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card:focus-visible,

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card:active,

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card.active {
  appearance:
    none !important;

  -webkit-appearance:
    none !important;

  position:
    relative !important;

  display:
    grid !important;

  grid-template-rows:
    24px
    auto !important;

  align-content:
    start !important;

  gap:
    7px !important;

  padding:
    3px !important;

  margin:
    0 !important;

  color:
    inherit !important;

  background:
    transparent !important;

  background-color:
    transparent !important;

  background-image:
    none !important;

  border:
    0 !important;

  border-color:
    transparent !important;

  border-radius:
    0 !important;

  outline:
    0 !important;

  box-shadow:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  backdrop-filter:
    none !important;

  filter:
    none !important;

  transform:
    none !important;
}


/* No old pseudo-element may rebuild a card surface. */

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card::before,

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card::after {
  content:
    none !important;

  display:
    none !important;

  background:
    none !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


/* The cover artwork itself remains the visual object. */

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card
> img {
  display:
    block !important;

  width:
    100% !important;

  max-width:
    100% !important;

  height:
    auto !important;

  margin:
    0 !important;

  transform:
    none !important;

  transition:
    transform
    180ms
    cubic-bezier(.16,1,.3,1),
    box-shadow
    180ms
    ease !important;
}


/* Interaction belongs to the cover, not a rectangle behind it. */

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card:hover
> img,

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card:focus-visible
> img {
  transform:
    translateY(-2px)
    scale(1.006) !important;
}


/* Selected/current state remains a restrained cover halo. */

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card.active
> img {
  box-shadow:
    0 0 0 2px
      rgba(79,159,200,.52),
    0 12px 24px
      rgba(20,35,45,.24),
    inset 0 1px 0
      rgba(255,255,255,.62)
    !important;
}


html.tcjc-app-dark-active body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card.active
> img,

body.tcjc-app-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card.active
> img,

html.tcjc-reader-dark-active body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card.active
> img,

body.tcjc-reader-dark-active
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
> button.tcjc-r2-library-card.active
> img {
  box-shadow:
    0 0 0 2px
      rgba(154,203,225,.62),
    0 14px 28px
      rgba(0,0,0,.38),
    inset 0 1px 0
      rgba(255,255,255,.30)
    !important;
}


/* Keep only the useful Selected / Current Book badge. */

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
.tcjc-r2-current-book-badge {
  position:
    relative !important;

  z-index:
    2 !important;
}


/* Invisible placeholder keeps every cover aligned with the active one. */

html body
.tcjc-r2-location-sheet
.tcjc-r2-library-shelf
.tcjc-r2-current-book-badge-placeholder {
  visibility:
    hidden !important;
}


@media (max-width: 720px) {
  html body
  .tcjc-r2-location-sheet
  .tcjc-r2-library-shelf
  > button.tcjc-r2-library-card,

  html body
  .tcjc-r2-location-sheet
  .tcjc-r2-library-shelf
  > button.tcjc-r2-library-card.active {
    grid-template-rows:
      22px
      auto !important;

    gap:
      6px !important;

    padding:
      2px !important;
  }
}

/* TCJC_V100_COVER_ONLY_NAV_END */

/* TCJC_REAL_DAILY_CARD_COMPACTION_START */

.tcjc-app-popup-briefing
.tcjc-app-popup-header
h2,

.tcjc-app-popup-reading
.tcjc-app-popup-header
h2,

.tcjc-app-popup-verse
.tcjc-app-popup-header
h2 {
  font-size:
    clamp(
      1.75rem,
      3vw,
      2.4rem
    ) !important;

  line-height:
    1 !important;
}

.tcjc-app-popup-sheet
.tcjc-app-popup-content
.tcjc-app-sacred-context {
  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  grid-template-rows:
    auto
    auto !important;

  gap:
    4px
    8px !important;

  align-items:
    center !important;

  min-height:
    0 !important;

  margin:
    0
    0
    10px !important;

  padding:
    8px
    10px !important;

  border-radius:
    14px !important;
}

.tcjc-app-popup-sheet
.tcjc-app-sacred-context-date
small {
  margin-bottom:
    2px !important;

  font-size:
    .52rem !important;

  line-height:
    1 !important;
}

.tcjc-app-popup-sheet
.tcjc-app-sacred-context-date
strong {
  font-size:
    .9rem !important;

  line-height:
    1.12 !important;
}

.tcjc-app-popup-sheet
.tcjc-app-sacred-context-date
> span {
  margin-top:
    2px !important;

  font-size:
    .66rem !important;

  line-height:
    1.12 !important;
}

.tcjc-app-popup-sheet
.tcjc-app-sacred-context-moon {
  align-self:
    center !important;

  gap:
    0 !important;
}

.tcjc-app-popup-sheet
.tcjc-app-sacred-context-moon
> div {
  display:
    none !important;
}

.tcjc-app-popup-sheet
.tcjc-app-sacred-context-moon-icon {
  width:
    30px !important;

  height:
    30px !important;

  flex:
    0
    0
    30px !important;
}

.tcjc-app-popup-sheet
.tcjc-app-sacred-context-moon-icon
svg {
  width:
    30px !important;

  height:
    30px !important;
}

.tcjc-app-popup-sheet
.tcjc-app-sacred-context-observances {
  grid-column:
    1 / -1 !important;

  gap:
    5px !important;

  margin:
    2px
    0
    0 !important;

  padding-top:
    2px !important;

  border-top:
    0 !important;
}

.tcjc-app-popup-reading
.tcjc-app-popup-content-title {
  max-width:
    none !important;

  margin:
    8px
    0
    6px !important;

  font-size:
    clamp(
      1.15rem,
      1.7vw,
      1.55rem
    ) !important;

  line-height:
    1.12 !important;

  letter-spacing:
    -.025em !important;

  display:
    -webkit-box !important;

  -webkit-box-orient:
    vertical !important;

  -webkit-line-clamp:
    2 !important;

  overflow:
    hidden !important;
}

.tcjc-app-popup-reading
.tcjc-app-daily-reference {
  margin:
    4px
    0 !important;

  font-size:
    .8rem !important;

  line-height:
    1.2 !important;
}

.tcjc-app-popup-reading
.tcjc-app-daily-description {
  margin:
    6px
    0 !important;

  font-size:
    .84rem !important;

  line-height:
    1.38 !important;

  display:
    -webkit-box !important;

  -webkit-box-orient:
    vertical !important;

  -webkit-line-clamp:
    3 !important;

  overflow:
    hidden !important;
}

.tcjc-app-popup-briefing
.tcjc-app-briefing-reading
h3 {
  max-width:
    none !important;

  font-size:
    1.08rem !important;

  line-height:
    1.14 !important;

  display:
    -webkit-box !important;

  -webkit-box-orient:
    vertical !important;

  -webkit-line-clamp:
    2 !important;

  overflow:
    hidden !important;
}

.tcjc-app-popup-briefing
.tcjc-app-briefing-reading
header
> span,

.tcjc-app-popup-briefing
.tcjc-app-briefing-reading-summary {
  display:
    none !important;
}

.tcjc-app-popup-verse
.tcjc-app-daily-quote {
  margin:
    10px
    0 !important;

  font-size:
    clamp(
      1.05rem,
      1.6vw,
      1.4rem
    ) !important;

  line-height:
    1.38 !important;
}

@media (max-width: 620px) {

  .tcjc-app-popup-sheet
  .tcjc-app-popup-content
  .tcjc-app-sacred-context {
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    padding:
      7px
      9px !important;
  }

  .tcjc-app-popup-briefing
  .tcjc-app-popup-header
  h2,

  .tcjc-app-popup-reading
  .tcjc-app-popup-header
  h2,

  .tcjc-app-popup-verse
  .tcjc-app-popup-header
  h2 {
    font-size:
      1.65rem !important;
  }

  .tcjc-app-popup-reading
  .tcjc-app-popup-content-title {
    font-size:
      1rem !important;
  }

  .tcjc-app-popup-briefing
  .tcjc-app-briefing-reading
  h3 {
    font-size:
      .94rem !important;
  }

  .tcjc-app-popup-verse
  .tcjc-app-daily-quote {
    font-size:
      1rem !important;
  }
}

/* TCJC_REAL_DAILY_CARD_COMPACTION_END */

/* source: src/styles/annual-calendar.css */
.tcjc-calendar-screen {
  min-height: 100vh;
  padding: clamp(94px, 11vw, 128px) 0 120px;
  color: #233844;
  background:
    radial-gradient(circle at 10% 0%, rgba(148, 184, 205, .28), transparent 34rem),
    linear-gradient(180deg, #f6f3ec 0%, #eef4f6 55%, #f8f6f0 100%);
}

.tcjc-calendar-hero,
.tcjc-calendar-controls,
.tcjc-calendar-month {
  width: min(1600px, calc(100% - 32px));
  margin-inline: auto;
}

.tcjc-calendar-hero {
  position: relative;
  min-height: clamp(560px, 62svh, 700px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 34px;
  background: #5d5244;
  box-shadow: 0 22px 58px rgba(36, 52, 77, .16);
  isolation: isolate;
}

.tcjc-calendar-hero-media,
.tcjc-calendar-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tcjc-calendar-hero-media {
  z-index: 0;
}

.tcjc-calendar-hero-media img {
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Match the restrained image shading used on the Home hero. */
.tcjc-calendar-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(22, 28, 31, .48) 0%,
      rgba(22, 28, 31, .24) 42%,
      rgba(22, 28, 31, .04) 72%
    ),
    linear-gradient(
      180deg,
      rgba(20, 26, 30, .03),
      rgba(20, 26, 30, .24)
    );
}

.tcjc-calendar-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(24px, 5vw, 78px);
}

.tcjc-calendar-hero-panel {
  position: relative;
  width: min(720px, 60vw);
  padding: clamp(32px, 4vw, 54px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: 30px;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .22),
      rgba(255, 255, 255, .055) 52%,
      rgba(255, 255, 255, .13)
    );
  box-shadow:
    0 24px 58px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .64),
    inset 0 -1px 0 rgba(148, 184, 205, .12);
  backdrop-filter: blur(12px) saturate(1.16);
  -webkit-backdrop-filter: blur(12px) saturate(1.16);
}

.tcjc-calendar-hero-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .52),
      transparent 28%,
      rgba(255, 255, 255, .09) 66%,
      transparent
    );
  opacity: .6;
  pointer-events: none;
}

.tcjc-calendar-hero-panel > * {
  position: relative;
  z-index: 1;
}

.tcjc-calendar-hero-panel > p,
.tcjc-calendar-month > header p {
  margin: 0 0 16px;
  color: #bce8fb;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow:
    0 1px 3px rgba(8, 20, 31, .66),
    0 0 16px rgba(79, 159, 200, .24);
}

.tcjc-calendar-hero h1 {
  max-width: 700px;
  margin: 0;
  color: rgba(255, 255, 255, .98);
  font-size: clamp(2.35rem, 3.7vw, 4rem);
  font-weight: 820;
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
  text-shadow:
    0 3px 5px rgba(7, 18, 29, .44),
    0 14px 32px rgba(7, 18, 29, .30);
}

.tcjc-calendar-hero-panel > span {
  display: block;
  max-width: 650px;
  margin-top: 20px;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1rem, 1.55vw, 1.18rem);
  font-weight: 620;
  line-height: 1.62;
  text-shadow:
    0 1px 3px rgba(7, 18, 29, .52),
    0 8px 22px rgba(7, 18, 29, .22);
}

.tcjc-calendar-hero-link {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  padding: 0 19px;
  border: 1px solid rgba(206, 235, 250, .68);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #79b9dd,
      #347ca8
    );
  box-shadow:
    0 14px 30px rgba(31, 83, 118, .30),
    inset 0 1px 0 rgba(255, 255, 255, .34);
  font-size: .82rem;
  font-weight: 950;
  letter-spacing: .01em;
  text-decoration: none;
  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.tcjc-calendar-hero-link:hover,
.tcjc-calendar-hero-link:focus-visible {
  transform: translateY(-2px);
  outline: none;
  background:
    linear-gradient(
      135deg,
      #8bc8e8,
      #3f89b4
    );
}

.tcjc-calendar-hero-link .tcjc-app-nav-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.tcjc-calendar-controls {
  position: sticky;
  z-index: 8;
  top: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid rgba(89, 130, 151, .18);
  border-radius: 14px;
  background: rgba(247, 249, 248, .88);
  box-shadow: 0 13px 34px rgba(42, 70, 84, .1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tcjc-calendar-year {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tcjc-calendar-year strong {
  min-width: 72px;
  text-align: center;
  font-size: 1.08rem;
}

.tcjc-calendar-year button,
.tcjc-calendar-months button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: #344b66;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.tcjc-calendar-months {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tcjc-calendar-months::-webkit-scrollbar { display: none; }

.tcjc-calendar-months button.active {
  color: white;
  background: linear-gradient(145deg, #70b2d1, #367896);
  box-shadow: 0 7px 18px rgba(71, 126, 156, .25);
}

.tcjc-calendar-month { margin-top: 36px; }
.tcjc-calendar-month > header { margin: 0 0 18px 4px; }

.tcjc-calendar-month > header h2 {
  margin: 0;
  color: #233d4a;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 760;
  letter-spacing: -.035em;
}

.tcjc-calendar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tcjc-calendar-card {
  display: flex;
  min-width: 0;
  min-height: 330px;
  flex-direction: column;
  padding: 20px;
  border: 1px solid rgba(93, 132, 151, .18);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(246,251,254,.72) 54%, rgba(255,255,255,.84)),
    radial-gradient(circle at 12% 8%, rgba(148,184,205,.14), transparent 38%);
  box-shadow: 0 13px 38px rgba(48, 76, 89, .08);
}

.tcjc-calendar-card.is-today {
  border-color: rgba(65, 132, 167, .62);
  box-shadow: 0 0 0 3px rgba(94, 157, 189, .12), 0 18px 45px rgba(48, 99, 124, .17);
}

.tcjc-calendar-card-date {
  display: flex;
  align-items: center;
  gap: 11px;
}

.tcjc-calendar-card-date > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, #70b2d1, #367896);
  font-size: 1.05rem;
  font-weight: 900;
}

.tcjc-calendar-card-date small,
.tcjc-calendar-card-date strong {
  display: block;
  color: #71858e;
  font-size: .76rem;
  font-style: normal;
}

.tcjc-calendar-card-date strong { color: #397698; }

.tcjc-calendar-card-collection {
  margin: 18px 0 6px;
  color: #2f7ca5;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tcjc-calendar-card h3 {
  margin: 0;
  color: #2a424e;
  font-size: 1.15rem;
  font-weight: 760;
  letter-spacing: -.02em;
  line-height: 1.28;
}

.tcjc-calendar-card-summary {
  margin: 10px 0;
  color: #647780;
  font-size: .86rem;
  line-height: 1.55;
}

.tcjc-calendar-reflection {
  padding: 6px 9px;
  border-radius: 7px;
  color: #344b66;
  background: rgba(111, 159, 184, .09);
  font-size: .68rem;
  font-weight: 800;
}

.tcjc-calendar-segments {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.tcjc-calendar-segments button {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(73, 124, 150, .18);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, #70b2d1, #367896);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.tcjc-calendar-segments svg { flex: 0 0 auto; }
.tcjc-calendar-reflection { margin-top: auto; text-align: center; }
.tcjc-calendar-message { padding: 30px; text-align: center; }

html.tcjc-app-dark-active .tcjc-calendar-screen {
  color: #e5e1d9;
  background: radial-gradient(circle at 10% 0%, rgba(73, 116, 140, .22), transparent 32rem), #171b1d;
}

html.tcjc-app-dark-active .tcjc-calendar-controls,
html.tcjc-app-dark-active .tcjc-calendar-card {
  border-color: rgba(157, 190, 207, .14);
  background: rgba(35, 42, 45, .92);
}

html.tcjc-app-dark-active .tcjc-calendar-month h2,
html.tcjc-app-dark-active .tcjc-calendar-card h3 { color: #f2eee6; }
html.tcjc-app-dark-active .tcjc-calendar-card-summary { color: #b7c0c2; }

@media (max-width: 1220px) {
  .tcjc-calendar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .tcjc-calendar-controls { grid-template-columns: 1fr; gap: 8px; }
  .tcjc-calendar-months { justify-content: flex-start; }
  .tcjc-calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .tcjc-calendar-hero,
  .tcjc-calendar-controls,
  .tcjc-calendar-month { width: calc(100% - 24px); }
  .tcjc-calendar-hero {
    min-height: clamp(590px, 72svh, 680px);
    border-radius: 28px;
  }

  .tcjc-calendar-hero-media img {
    object-position: center;
  }

  .tcjc-calendar-hero::after {
    background:
      linear-gradient(
        180deg,
        rgba(20, 27, 32, .10) 0%,
        rgba(20, 27, 32, .22) 36%,
        rgba(20, 27, 32, .56) 100%
      );
  }

  .tcjc-calendar-hero-content {
    align-items: center;
    justify-content: flex-start;
    padding: 24px 12px 28px;
  }

  .tcjc-calendar-hero-panel {
    width: calc(100% - 22px);
    max-width: none;
    margin: 0 auto;
    padding: 27px 21px 25px;
    border-radius: 25px;
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, .18),
        rgba(255, 255, 255, .035) 52%,
        rgba(255, 255, 255, .10)
      );
    backdrop-filter: blur(9px) saturate(1.12);
    -webkit-backdrop-filter: blur(9px) saturate(1.12);
  }

  .tcjc-calendar-hero-panel > p {
    margin-bottom: 14px;
    font-size: .68rem;
    letter-spacing: .14em;
  }

  .tcjc-calendar-hero h1 {
    font-size: clamp(2.2rem, 10.6vw, 3.5rem);
    line-height: 1;
  }

  .tcjc-calendar-hero-panel > span {
    margin-top: 17px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .tcjc-calendar-hero-link {
    width: 100%;
    margin-top: 20px;
  }
  .tcjc-calendar-controls { top: 68px; border-radius: 12px; }
  .tcjc-calendar-grid { grid-template-columns: 1fr; }
  .tcjc-calendar-card { min-height: 0; }
}

/* source: src/styles/sacred-calendar-preview.css */
.tcjc-sacred-preview {
  --cal-page: #f1f4f3;
  --cal-card: rgba(255,255,255,.92);
  --cal-card-solid: #fff;
  --cal-soft: #edf4f6;
  --cal-border: rgba(72,111,129,.16);
  --cal-border-strong: rgba(52,130,168,.55);
  --cal-text: #263f4b;
  --cal-muted: #71848d;
  --cal-blue: #3483a8;
  --cal-blue-dark: #286985;
  --cal-blue-soft: #deedf3;
  --cal-gold: #aa8734;
  --cal-gold-soft: #f6edd1;
  --cal-purple: #7a7096;
  --cal-purple-soft: #ece9f3;
  --cal-shadow: 0 18px 42px rgba(43,68,79,.08);

  min-height: 100vh;
  padding: clamp(92px, 9vw, 118px) 0 110px;

  color: var(--cal-text);

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(116,174,201,.18),
      transparent 30rem
    ),
    linear-gradient(
      180deg,
      #f4f3ef,
      var(--cal-page)
    );
}

.tcjc-sacred-preview *,
.tcjc-sacred-preview *::before,
.tcjc-sacred-preview *::after {
  box-sizing: border-box;
}

.tcjc-calendar-hero-shell,
.tcjc-calendar-control-bar,
.tcjc-calendar-month-slider,
.tcjc-calendar-selected-day,
.tcjc-calendar-month-section,
.tcjc-calendar-foundations {
  width: min(
    1580px,
    calc(100% - 30px)
  );
  margin-inline: auto;
}

/* =========================================================
   HERO
   ========================================================= */

.tcjc-calendar-hero-shell {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, .98fr)
    minmax(460px, 1.02fr);

  gap: clamp(20px, 3vw, 42px);

  min-height: 520px;

  padding: clamp(28px, 3vw, 46px);

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.36);
  border-radius: 30px;

  background:
    linear-gradient(
      90deg,
      rgba(6,22,32,.54),
      rgba(6,22,32,.20) 56%,
      rgba(6,22,32,.08)
    ),
    url('https://app.truechurchofjesuschrist.org/app/brand/tcjc-sacred-calendar-hero-desktop-v86.webp')
      center center / cover no-repeat;

  box-shadow:
    0 24px 58px rgba(30,48,58,.17);
}

.tcjc-calendar-hero-title {
  display: flex;
  align-items: center;
}

.tcjc-calendar-hero-title > div {
  width: min(700px, 100%);

  padding: clamp(
    26px,
    3.2vw,
    42px
  );

  border: 1px solid rgba(255,255,255,.32);
  border-radius: 24px;

  color: white;

  background: rgba(10,25,32,.42);

  box-shadow:
    0 18px 42px rgba(0,0,0,.17);

  backdrop-filter:
    blur(13px) saturate(1.08);

  -webkit-backdrop-filter:
    blur(13px) saturate(1.08);
}

.tcjc-calendar-hero-title p,
.tcjc-calendar-hero-date-card p,
.tcjc-calendar-hero-reading-card header p {
  margin: 0;

  color: #c7efff;

  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .18em;

  text-transform: uppercase;
}

.tcjc-calendar-hero-title h1 {
  margin: 14px 0 0;

  color: #fff;

  font-size: clamp(
    3rem,
    5.4vw,
    5.5rem
  );

  font-weight: 830;
  letter-spacing: -.065em;
  line-height: .91;
}

.tcjc-calendar-hero-title > div > span {
  display: block;

  max-width: 620px;

  margin-top: 19px;

  color: rgba(255,255,255,.9);

  font-size: clamp(
    .98rem,
    1.35vw,
    1.13rem
  );

  font-weight: 620;
  line-height: 1.53;
}

.tcjc-calendar-hero-today {
  display: grid;

  align-content: center;

  gap: 13px;
}

.tcjc-calendar-hero-date-card,
.tcjc-calendar-hero-reading-card {
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 22px;

  color: white;

  background: rgba(9,26,34,.45);

  box-shadow:
    0 18px 42px rgba(0,0,0,.16);

  backdrop-filter:
    blur(13px) saturate(1.08);

  -webkit-backdrop-filter:
    blur(13px) saturate(1.08);
  padding: 15px 18px;
}

.tcjc-calendar-hero-date-card {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 18px;

  align-items: center;

  padding: 24px;
}

.tcjc-calendar-hero-date-card h2 {
  margin: 9px 0 0;

  color: white;

  font-size: clamp(
    2rem,
    3vw,
    3.2rem
  );

  font-weight: 820;
  letter-spacing: -.05em;
  line-height: .96;
}

.tcjc-calendar-hero-date-card
  > div:first-child
  > span {
  display: block;

  margin-top: 10px;

  color: rgba(255,255,255,.78);

  font-size: .9rem;
  font-weight: 650;
}

.tcjc-calendar-hero-moon {
  display: flex;

  align-items: center;

  gap: 10px;
}

.tcjc-calendar-hero-moon
  > span:last-child
  strong,
.tcjc-calendar-hero-moon
  > span:last-child
  small {
  display: block;

  white-space: nowrap;
}

.tcjc-calendar-hero-moon
  > span:last-child
  strong {
  font-size: .87rem;
}

.tcjc-calendar-hero-moon
  > span:last-child
  small {
  margin-top: 3px;

  color: rgba(255,255,255,.66);

  font-size: .67rem;
}

.tcjc-calendar-hero-reading-card {
  padding: 23px 24px;
}

.tcjc-calendar-hero-reading-card header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 14px;
}

.tcjc-calendar-hero-reading-card
  header
  > span {
  color: rgba(255,255,255,.72);

  font-size: .7rem;
  font-weight: 750;
}

.tcjc-calendar-hero-reading-card h3 {
  margin: 7px 0 0;

  color: #fff;

  font-size: clamp(
    1.25rem,
    2.1vw,
    1.85rem
  );

  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
  max-width: 34ch;
  font-size: clamp(1.15rem, 1.55vw, 1.55rem);
}

.tcjc-calendar-hero-reading-card > p {
  display: -webkit-box;

  margin: 11px 0 0;

  overflow: hidden;

  color: rgba(255,255,255,.8);

  font-size: .83rem;
  line-height: 1.45;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tcjc-calendar-hero-reading-card
  > button {
  display: flex;

  width: 100%;

  min-height: 46px;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-top: 16px;
  padding: 9px 13px;

  border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px;

  color: white;

  background:
    linear-gradient(
      145deg,
      #64afd1,
      #3786aa
    );

  font: inherit;
  font-size: .72rem;
  font-weight: 840;

  text-align: left;

  cursor: pointer;
}

/* =========================================================
   MOON
   ========================================================= */

.tcjc-calendar-moon {
  display: inline-grid;

  width: 50px;
  height: 50px;

  flex: 0 0 50px;

  place-items: center;

  color: rgba(255,255,255,.45);
}

.tcjc-calendar-moon svg {
  display: block;

  width: 100%;
  height: 100%;
}

.tcjc-calendar-moon-compact {
  width: 34px;
  height: 34px;

  flex-basis: 34px;
}

.tcjc-calendar-moon-lit {
  fill: #f5e8ad;
}

.tcjc-calendar-moon-dark {
  fill: #122630;
}

.tcjc-calendar-moon-outline {
  fill: none;

  stroke: currentColor;
  stroke-width: 1.1;
}

/* =========================================================
   CONTROLS
   ========================================================= */

.tcjc-calendar-control-bar {
  display: grid;
  grid-template-columns:
    auto
    minmax(280px, 1fr)
    auto;

  gap: 16px;

  align-items: center;

  margin-top: 18px;
  padding: 13px 15px;

  border: 1px solid var(--cal-border);
  border-radius: 15px;

  background: var(--cal-card);

  box-shadow:
    0 10px 28px rgba(43,68,79,.06);
}

.tcjc-calendar-year-control {
  display: flex;

  align-items: center;

  gap: 9px;
}

.tcjc-calendar-year-control button {
  display: grid;

  width: 42px;
  height: 42px;

  place-items: center;

  border: 0;
  border-radius: 8px;

  color: white;

  background:
    linear-gradient(
      145deg,
      #6cb3d2,
      #377e9e
    );

  cursor: pointer;
}

.tcjc-calendar-year-control > span {
  min-width: 78px;

  text-align: center;
}

.tcjc-calendar-year-control small,
.tcjc-calendar-year-control strong,
.tcjc-calendar-alignment small,
.tcjc-calendar-alignment strong,
.tcjc-calendar-alignment span {
  display: block;
}

.tcjc-calendar-year-control small,
.tcjc-calendar-alignment small {
  color: var(--cal-muted);

  font-size: .61rem;
  font-weight: 800;
}

.tcjc-calendar-year-control strong {
  margin-top: 2px;

  font-size: 1.18rem;
}

.tcjc-calendar-alignment strong {
  margin-top: 2px;

  font-size: .88rem;
}

.tcjc-calendar-alignment span {
  margin-top: 3px;

  color: var(--cal-muted);

  font-size: .66rem;
}

.tcjc-calendar-legend {
  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 7px 12px;
}

.tcjc-calendar-legend span {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: var(--cal-muted);

  font-size: .64rem;
  font-weight: 780;
}

.tcjc-calendar-legend i {
  display: block;

  width: 7px;
  height: 7px;

  border-radius: 50%;
}

.tcjc-calendar-legend
  i[data-category="appointed"] {
  background: var(--cal-gold);
}

.tcjc-calendar-legend
  i[data-category="ordinance"] {
  background: var(--cal-blue);
}

.tcjc-calendar-legend
  i[data-category="christian"] {
  background: var(--cal-purple);
}

/* =========================================================
   MONTH SLIDER
   ========================================================= */

.tcjc-calendar-month-slider {
  display: flex;

  gap: 6px;

  margin-top: 13px;
  padding: 8px;

  overflow-x: auto;

  border: 1px solid var(--cal-border);
  border-radius: 14px;

  background: var(--cal-card);

  scrollbar-width: none;
}

.tcjc-calendar-month-slider::-webkit-scrollbar {
  display: none;
}

.tcjc-calendar-month-slider button {
  min-width: 132px;
  min-height: 66px;

  padding: 8px 11px;

  border: 0;
  border-radius: 9px;

  color: var(--cal-text);

  background: transparent;

  font: inherit;

  text-align: left;

  cursor: pointer;
}

.tcjc-calendar-month-slider
  button
  small,
.tcjc-calendar-month-slider
  button
  strong,
.tcjc-calendar-month-slider
  button
  span {
  display: block;
}

.tcjc-calendar-month-slider
  button
  small {
  color: var(--cal-muted);

  font-size: .53rem;
  font-weight: 800;
  letter-spacing: .08em;

  text-transform: uppercase;
}

.tcjc-calendar-month-slider
  button
  strong {
  margin-top: 3px;

  font-size: .82rem;
  font-weight: 850;
}

.tcjc-calendar-month-slider
  button
  span {
  margin-top: 2px;

  color: var(--cal-muted);

  font-size: .58rem;
}

.tcjc-calendar-month-slider
  button.active {
  color: white;

  background:
    linear-gradient(
      145deg,
      #69afd0,
      #377d9c
    );

  box-shadow:
    0 8px 18px rgba(47,117,151,.23);
}

.tcjc-calendar-month-slider
  button.active
  small,
.tcjc-calendar-month-slider
  button.active
  span {
  color: rgba(255,255,255,.74);
}

/* =========================================================
   SELECTED DAY
   ========================================================= */

.tcjc-calendar-selected-day {
  margin-top: 22px;
  padding: clamp(20px, 2.7vw, 30px);

  border: 1px solid var(--cal-border);
  border-radius: 20px;

  background: var(--cal-card);

  box-shadow: var(--cal-shadow);
}

.tcjc-calendar-selected-heading {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 20px;

  align-items: center;
}

.tcjc-calendar-selected-heading
  > div
  > p,
.tcjc-calendar-month-section
  > header
  p {
  margin: 0 0 8px;

  color: var(--cal-blue);

  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .17em;

  text-transform: uppercase;
}

.tcjc-calendar-selected-heading h2 {
  margin: 0;

  color: var(--cal-text);

  font-size: clamp(
    2rem,
    4vw,
    3.55rem
  );

  font-weight: 820;
  letter-spacing: -.055em;
  line-height: .96;
}

.tcjc-calendar-selected-heading
  > div
  > span {
  display: block;

  margin-top: 8px;

  color: var(--cal-muted);

  font-size: .82rem;
  font-weight: 650;
}

.tcjc-calendar-selected-heading
  > div
  > small {
  display: block;

  max-width: 700px;

  margin-top: 7px;

  color: var(--cal-muted);

  font-size: .68rem;
  line-height: 1.4;
}

.tcjc-calendar-selected-moon {
  display: flex;

  align-items: center;

  gap: 10px;
}

.tcjc-calendar-selected-moon
  .tcjc-calendar-moon {
  color: rgba(40,65,77,.28);
}

.tcjc-calendar-selected-moon
  > span:last-child
  strong,
.tcjc-calendar-selected-moon
  > span:last-child
  small {
  display: block;

  white-space: nowrap;
}

.tcjc-calendar-selected-moon
  > span:last-child
  strong {
  font-size: .82rem;
}

.tcjc-calendar-selected-moon
  > span:last-child
  small {
  margin-top: 3px;

  color: var(--cal-muted);

  font-size: .64rem;
}

.tcjc-calendar-year-progress {
  margin-top: 18px;
}

.tcjc-calendar-year-progress-track {
  height: 4px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(75,130,155,.1);
}

.tcjc-calendar-year-progress-track > span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: #5fa6c7;
}

.tcjc-calendar-year-progress small {
  display: block;

  margin-top: 6px;

  color: var(--cal-muted);

  font-size: .59rem;
  font-weight: 720;
  line-height: 1.35;
}

.tcjc-calendar-selected-grid {
  display: grid;
  grid-template-columns:
    minmax(320px, .85fr)
    minmax(0, 1.15fr);

  gap: 12px;

  margin-top: 15px;
  align-items: start;
}

.tcjc-calendar-selected-reading,
.tcjc-calendar-selected-observance {
  min-width: 0;

  padding: 14px;

  border: 1px solid var(--cal-border);
  border-radius: 13px;

  background: var(--cal-card-solid);
  align-self: start;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.tcjc-calendar-selected-reading > p {
  margin: 0 0 7px;

  color: var(--cal-blue);

  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;

  text-transform: uppercase;
}

.tcjc-calendar-selected-reading h3 {
  margin: 0;

  color: var(--cal-text);

  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.14;
  max-width: 36ch;
}

.tcjc-calendar-selected-reading
  > strong {
  display: block;

  margin-top: 6px;

  color: var(--cal-blue);

  font-size: .67rem;
}

.tcjc-calendar-selected-reading
  > span {
  display: block;

  margin-top: 8px;

  color: var(--cal-muted);

  font-size: .76rem;
  line-height: 1.4;
}

.tcjc-calendar-reading-buttons {
  display: grid;

  gap: 0;

  margin-top: 10px;
}

.tcjc-calendar-reading-buttons button {
  display: flex;

  min-height: 38px;

  align-items: center;
  justify-content: space-between;

  gap: 9px;

  padding: 7px 11px;

  border: 1px solid rgba(53,127,160,.16);
  border-radius: 8px;

  color: white;

  background:
    linear-gradient(
      145deg,
      #62a9c8,
      #327b9d
    );

  font: inherit;
  font-size: .7rem;
  font-weight: 800;

  text-align: left;

  cursor: pointer;
}

.tcjc-calendar-reflection {
  margin-top: 13px;
  padding: 9px 11px;

  border-radius: 8px;

  color: var(--cal-muted);

  background: var(--cal-soft);

  font-size: .7rem;
  font-weight: 760;

  text-align: center;
}

.tcjc-calendar-selected-observances {
  display: grid;

  gap: 8px;
  align-self: start;
  grid-auto-rows: max-content;
}

.tcjc-calendar-selected-observance {
  position: relative;

  overflow: hidden;
}

.tcjc-calendar-selected-observance::before {
  content: "";

  position: absolute;

  inset: 0 auto 0 0;

  width: 4px;

  background:
    var(--cal-blue);
}

.tcjc-calendar-selected-observance
  [data-category="appointed"],
.tcjc-calendar-selected-observance[data-category="appointed"] {
  --selected-marker: var(--cal-gold);
}

.tcjc-calendar-selected-observance[data-category="appointed"]::before {
  background: var(--cal-gold);
}

.tcjc-calendar-selected-observance[data-category="ordinance"]::before {
  background: var(--cal-blue);
}

.tcjc-calendar-selected-observance[data-category="christian"]::before {
  background: var(--cal-purple);
}

.tcjc-calendar-selected-observance header {
  display: flex;

  justify-content: space-between;

  gap: 12px;
}

.tcjc-calendar-selected-observance
  header
  small,
.tcjc-calendar-selected-observance
  header
  span {
  color: var(--cal-muted);

  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .08em;

  text-transform: uppercase;
}

.tcjc-calendar-selected-observance h3 {
  margin: 7px 0 0;

  color: var(--cal-text);

  font-size: 1.03rem;
}

.tcjc-calendar-selected-observance > p {
  margin: 7px 0 0;

  color: var(--cal-muted);

  font-size: .76rem;
  line-height: 1.45;
}

.tcjc-calendar-reference-row {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 11px;
}

.tcjc-calendar-reference {
  display: inline-flex;

  width: auto;

  min-height: 34px;

  align-items: center;
  justify-content: space-between;

  gap: 7px;

  padding: 6px 9px;

  border: 1px solid var(--cal-border);
  border-radius: 8px;

  color: var(--cal-text);

  background: var(--cal-soft);

  font: inherit;
  font-size: .63rem;
  font-weight: 790;

  cursor: pointer;
}

.tcjc-calendar-reference svg {
  width: 13px;
  height: 13px;

  flex: 0 0 auto;
}

.tcjc-calendar-return-today {
  min-height: 38px;

  margin-top: 14px;
  padding: 0 13px;

  border: 1px solid rgba(53,127,160,.24);
  border-radius: 8px;

  color: var(--cal-blue);

  background: var(--cal-blue-soft);

  font: inherit;
  font-size: .69rem;
  font-weight: 850;

  cursor: pointer;
}

/* =========================================================
   MONTH + LARGE DAY CARDS
   ========================================================= */

.tcjc-calendar-month-section {
  margin-top: 30px;
}

.tcjc-calendar-month-section > header {
  display: flex;

  align-items: end;
  justify-content: space-between;

  gap: 20px;

  margin: 0 3px 15px;
}

.tcjc-calendar-month-section
  > header
  h2 {
  margin: 0;

  color: var(--cal-text);

  font-size: clamp(
    2rem,
    4vw,
    3.5rem
  );

  font-weight: 820;
  letter-spacing: -.055em;
  line-height: .97;
}

.tcjc-calendar-month-section
  > header
  > span {
  color: var(--cal-muted);

  font-size: .82rem;
  font-weight: 700;
}

.tcjc-calendar-status {
  padding: 20px;

  color: var(--cal-muted);

  text-align: center;
}

.tcjc-calendar-day-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 12px;
}

.tcjc-calendar-day-card {
  position: relative;

  display: flex;

  min-width: 0;
  min-height: 260px;

  flex-direction: column;

  padding: 17px;

  border: 1px solid var(--cal-border);
  border-radius: 14px;

  color: inherit;

  background: var(--cal-card);

  box-shadow:
    0 10px 26px rgba(43,68,79,.055);

  cursor: pointer;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.tcjc-calendar-day-card:hover,
.tcjc-calendar-day-card:focus-visible {
  transform: translateY(-2px);

  outline: none;

  border-color:
    rgba(52,130,168,.42);

  box-shadow:
    0 15px 32px rgba(43,68,79,.09);
}

.tcjc-calendar-day-card.is-selected {
  border-color:
    var(--cal-border-strong);

  box-shadow:
    0 0 0 2px rgba(54,131,169,.09),
    0 15px 32px rgba(43,68,79,.09);
}

.tcjc-calendar-day-card.is-today {
  box-shadow:
    inset 0 4px 0 var(--cal-blue),
    0 15px 32px rgba(43,68,79,.09);
}

.tcjc-calendar-day-card > header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;
}

.tcjc-calendar-day-date {
  display: flex;

  align-items: center;

  gap: 10px;
}

.tcjc-calendar-day-date > strong {
  display: grid;

  width: 43px;
  height: 43px;

  flex: 0 0 43px;

  place-items: center;

  border-radius: 9px;

  color: white;

  background:
    linear-gradient(
      145deg,
      #69afd0,
      #377d9c
    );

  font-size: 1.08rem;
  font-weight: 900;
}

.tcjc-calendar-day-date
  > span
  small,
.tcjc-calendar-day-date
  > span
  b {
  display: block;
}

.tcjc-calendar-day-date
  > span
  small {
  color: var(--cal-muted);

  font-size: .59rem;
  font-weight: 820;
  letter-spacing: .05em;

  text-transform: uppercase;
}

.tcjc-calendar-day-date
  > span
  b {
  margin-top: 2px;

  color: var(--cal-text);

  font-size: .74rem;
}

.tcjc-calendar-day-moon {
  display: flex;

  align-items: center;

  gap: 6px;
}

.tcjc-calendar-day-moon
  .tcjc-calendar-moon {
  color: rgba(41,64,75,.27);
}

.tcjc-calendar-day-moon
  > span:last-child {
  display: none;
}

.tcjc-calendar-day-reading {
  margin-top: 16px;
  padding-top: 13px;

  border-top:
    1px solid var(--cal-border);
}

.tcjc-calendar-day-reading
  > small {
  display: block;

  color: var(--cal-blue);

  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .11em;

  text-transform: uppercase;
}

.tcjc-calendar-day-reading h3 {
  display: -webkit-box;

  margin: 6px 0 0;

  overflow: hidden;

  color: var(--cal-text);

  font-size: .93rem;
  font-weight: 790;
  letter-spacing: -.015em;
  line-height: 1.26;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.tcjc-calendar-day-reading > b {
  display: block;

  margin-top: 5px;

  overflow: hidden;

  color: var(--cal-blue);

  font-size: .59rem;
  font-weight: 760;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.tcjc-calendar-day-reading > p {
  display: -webkit-box;

  margin: 9px 0 0;

  overflow: hidden;

  color: var(--cal-muted);

  font-size: .69rem;
  line-height: 1.4;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tcjc-calendar-day-markers {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: auto;
  padding-top: 15px;
}

.tcjc-calendar-marker {
  display: inline-flex;

  min-height: 25px;

  align-items: center;

  gap: 5px;

  max-width: 100%;

  padding: 4px 7px;

  overflow: hidden;

  border-radius: 999px;

  font-size: .56rem;
  font-weight: 820;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.tcjc-calendar-marker i {
  display: block;

  width: 5px;
  height: 5px;

  flex: 0 0 5px;

  border-radius: 50%;
}

.tcjc-calendar-marker[data-category="appointed"] {
  color: #796228;

  background:
    var(--cal-gold-soft);
}

.tcjc-calendar-marker[data-category="appointed"] i {
  background: var(--cal-gold);
}

.tcjc-calendar-marker[data-category="ordinance"] {
  color: #2f7899;

  background:
    var(--cal-blue-soft);
}

.tcjc-calendar-marker[data-category="ordinance"] i {
  background: var(--cal-blue);
}

.tcjc-calendar-marker[data-category="christian"] {
  color: #645b7b;

  background:
    var(--cal-purple-soft);
}

.tcjc-calendar-marker[data-category="christian"] i {
  background: var(--cal-purple);
}



/* =========================================================
   SCRIPTURAL FOUNDATIONS ACCORDION
   ========================================================= */

.tcjc-calendar-foundations {
  margin-top: 30px;

  overflow: hidden;

  border: 1px solid var(--cal-border);
  border-radius: 16px;

  background: var(--cal-card);

  box-shadow:
    0 10px 28px rgba(43,68,79,.05);
}

.tcjc-calendar-foundations > summary {
  display: flex;

  min-height: 76px;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 15px 18px;

  list-style: none;

  cursor: pointer;
}

.tcjc-calendar-foundations
  > summary::-webkit-details-marker {
  display: none;
}

.tcjc-calendar-foundations
  > summary
  span,
.tcjc-calendar-foundations
  > summary
  small,
.tcjc-calendar-foundations
  > summary
  strong {
  display: block;
}

.tcjc-calendar-foundations
  > summary
  small {
  color: var(--cal-blue);

  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .13em;

  text-transform: uppercase;
}

.tcjc-calendar-foundations
  > summary
  strong {
  margin-top: 3px;

  font-size: 1rem;
}

.tcjc-calendar-foundations
  > summary
  em {
  display: inline-flex;

  min-height: 42px;

  align-items: center;
  justify-content: center;

  padding: 0 16px;

  border-radius: 10px;

  color: #fff;

  background: var(--cal-blue-dark);

  box-shadow:
    0 8px 18px
    rgba(39, 101, 132, .16);

  font-size: .84rem;
  font-style: normal;
  font-weight: 850;

  white-space: nowrap;
}

.tcjc-calendar-foundations-content {
  padding: 0 18px 18px;

  border-top:
    1px solid var(--cal-border);
}

.tcjc-calendar-foundations-content
  > p {
  max-width: 900px;

  margin: 15px 0;

  color: var(--cal-muted);

  font-size: .77rem;
  line-height: 1.48;
}

.tcjc-calendar-foundations-content
  > div {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 7px;
}

.tcjc-calendar-foundation-reference {
  display: flex;

  width: 100%;
  min-height: 58px;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding: 10px 12px;

  border: 1px solid var(--cal-border);
  border-radius: 9px;

  color: var(--cal-text);

  background: var(--cal-card-solid);

  font: inherit;

  text-align: left;

  cursor: pointer;
}

.tcjc-calendar-foundation-reference
  span,
.tcjc-calendar-foundation-reference
  strong,
.tcjc-calendar-foundation-reference
  small {
  display: block;
}

.tcjc-calendar-foundation-reference
  strong {
  font-size: .76rem;
}

.tcjc-calendar-foundation-reference
  small {
  margin-top: 3px;

  color: var(--cal-muted);

  font-size: .64rem;
  font-weight: 550;
  line-height: 1.35;
}

.tcjc-calendar-foundation-reference
  svg {
  width: 15px;
  height: 15px;

  flex: 0 0 auto;
}

/* =========================================================
   DARK MODE
   ========================================================= */

html.tcjc-app-dark-active
  .tcjc-sacred-preview {
  --cal-page: #171c1f;
  --cal-card: rgba(31,38,42,.94);
  --cal-card-solid: #242c30;
  --cal-soft: #2b353a;
  --cal-border: rgba(158,190,205,.14);
  --cal-border-strong: rgba(112,188,223,.48);
  --cal-text: #f0ece4;
  --cal-muted: #aab7bd;
  --cal-blue: #80c7e5;
  --cal-blue-dark: #61acd0;
  --cal-blue-soft: rgba(67,139,174,.16);
  --cal-gold: #d3b55f;
  --cal-gold-soft: rgba(157,124,45,.17);
  --cal-purple: #b4a9d2;
  --cal-purple-soft: rgba(123,107,157,.2);
  --cal-shadow: 0 20px 46px rgba(0,0,0,.24);

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(67,122,148,.15),
      transparent 28rem
    ),
    #171c1f;
}

html.tcjc-app-dark-active
  .tcjc-calendar-hero-shell {
  border-color:
    rgba(255,255,255,.12);

  box-shadow:
    0 25px 62px rgba(0,0,0,.34);
}

html.tcjc-app-dark-active
  .tcjc-calendar-hero-title
  > div,
html.tcjc-app-dark-active
  .tcjc-calendar-hero-date-card,
html.tcjc-app-dark-active
  .tcjc-calendar-hero-reading-card {
  background:
    rgba(7,22,30,.54);
}

html.tcjc-app-dark-active
  .tcjc-calendar-selected-moon
  .tcjc-calendar-moon,
html.tcjc-app-dark-active
  .tcjc-calendar-day-moon
  .tcjc-calendar-moon {
  color:
    rgba(225,235,240,.25);
}

html.tcjc-app-dark-active
  .tcjc-calendar-moon-lit {
  fill: #eadb9f;
}

html.tcjc-app-dark-active
  .tcjc-calendar-moon-dark {
  fill: #10181c;
}

html.tcjc-app-dark-active
  .tcjc-calendar-marker[data-category="appointed"] {
  color: #dec97f;
}

html.tcjc-app-dark-active
  .tcjc-calendar-marker[data-category="ordinance"] {
  color: #a8d9ee;
}

html.tcjc-app-dark-active
  .tcjc-calendar-marker[data-category="christian"] {
  color: #cabfe5;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1260px) {
  .tcjc-calendar-day-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 1080px) {
  .tcjc-calendar-hero-shell {
    grid-template-columns: 1fr;

    min-height: 0;
  }

  .tcjc-calendar-hero-title > div {
    width: min(760px, 100%);
  }

  .tcjc-calendar-control-bar {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .tcjc-calendar-legend {
    grid-column: 1 / -1;

    justify-content: flex-start;
  }

  .tcjc-calendar-selected-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 850px) {
  .tcjc-calendar-day-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .tcjc-calendar-foundations-content
    > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .tcjc-sacred-preview {
    padding:
      80px 0 92px;
  }

  .tcjc-calendar-hero-shell,
  .tcjc-calendar-control-bar,
  .tcjc-calendar-month-slider,
  .tcjc-calendar-selected-day,
  .tcjc-calendar-month-section,
  .tcjc-calendar-foundations {
    width:
      calc(100% - 20px);
  }

  .tcjc-calendar-hero-shell {
    display: block;

    padding: 14px;

    border-radius: 24px;

    background:
      linear-gradient(
        180deg,
        rgba(5,20,29,.22),
        rgba(5,20,29,.62)
      ),
      url('https://app.truechurchofjesuschrist.org/app/brand/tcjc-sacred-calendar-hero-mobile-v86.webp')
        center center / cover no-repeat;
  }

  .tcjc-calendar-hero-title > div {
    padding: 22px 20px;

    border-radius: 19px;
  }

  .tcjc-calendar-hero-title h1 {
    font-size:
      clamp(
        2.7rem,
        13vw,
        3.8rem
      );
  }

  .tcjc-calendar-hero-title
    > div
    > span {
    font-size: .9rem;
  }

  .tcjc-calendar-hero-today {
    margin-top: 11px;
  }

  .tcjc-calendar-hero-date-card {
    grid-template-columns: 1fr;

    padding: 19px;
  }

  .tcjc-calendar-hero-moon {
    padding-top: 12px;

    border-top:
      1px solid rgba(255,255,255,.14);
  }

  .tcjc-calendar-hero-reading-card {
    padding: 13px 14px;
  }

  .tcjc-calendar-hero-reading-card
    header {
    align-items: flex-start;
    flex-direction: column;

    gap: 4px;
  }

  .tcjc-calendar-control-bar {
    grid-template-columns: 1fr;

    gap: 11px;
  }

  .tcjc-calendar-year-control {
    justify-content: center;
  }

  .tcjc-calendar-alignment {
    text-align: center;
  }

  .tcjc-calendar-legend {
    justify-content: center;
  }

  .tcjc-calendar-month-slider
    button {
    min-width: 118px;
  }

  .tcjc-calendar-selected-day {
    padding: 17px;

    border-radius: 17px;
  }

  .tcjc-calendar-selected-heading {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    align-items: center;

    gap: 8px;
  }

  .tcjc-calendar-selected-heading h2 {
    font-size:
      clamp(
        1.9rem,
        9.5vw,
        2.65rem
      );
  }

  .tcjc-calendar-selected-moon {
    padding-top: 0;

    border-top: 0;
  }

  .tcjc-calendar-selected-grid {
    margin-top: 12px;
  }

  .tcjc-calendar-selected-reading,
  .tcjc-calendar-selected-observance {
    padding: 12px;
  }

  .tcjc-calendar-month-section
    > header {
    align-items: flex-start;
    flex-direction: column;

    gap: 6px;
  }

  .tcjc-calendar-day-grid {
    grid-template-columns: 1fr;

    gap: 9px;
  }

  .tcjc-calendar-day-card {
    min-height: 225px;

    padding: 15px;
  }

  .tcjc-calendar-day-reading h3 {
    -webkit-line-clamp: 2;
  }

  .tcjc-calendar-day-reading > p {
    -webkit-line-clamp: 2;
  }

  .tcjc-calendar-day-moon
    > span:last-child {
    display: block;
  }

  .tcjc-calendar-day-moon
    > span:last-child
    strong,
  .tcjc-calendar-day-moon
    > span:last-child
    small {
    display: block;
  }

  .tcjc-calendar-day-moon
    > span:last-child
    strong {
    font-size: .61rem;
  }

  .tcjc-calendar-day-moon
    > span:last-child
    small {
    margin-top: 2px;

    color: var(--cal-muted);

    font-size: .53rem;
  }

  .tcjc-calendar-foundations
    > summary {
    min-height: 68px;

    padding: 13px 15px;
  }

  .tcjc-calendar-foundations-content {
    padding:
      0 15px 15px;
  }
}

@media (max-width: 390px) {
  .tcjc-calendar-day-card
    > header {
    gap: 7px;
  }

  .tcjc-calendar-day-moon
    > span:last-child {
    display: none;
  }

  .tcjc-calendar-legend {
    gap: 6px 9px;
  }

  .tcjc-calendar-legend span {
    font-size: .58rem;
  }
}


/* source: website-v108.css */
/* TRUE CHURCH WEBSITE V114 APP-PARITY — DIRECT APP COMPONENT PARITY */

.tcjc-website-v114-host,
.tcjc-website-v114-host * {
  box-sizing: border-box;
}

.tcjc-website-v114-host {
  width: 100vw;
  max-width: 100vw;
  min-height: 1px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: visible;
  background: #f7f5f2;
}

.tcjc-website-v114-loading {
  width: min(920px, calc(100vw - 28px));
  margin: 28px auto;
  padding: 36px;
  border: 1px solid rgba(148,184,205,.22);
  border-radius: 24px;
  background: #fff;
  color: #24344d;
  text-align: center;
  box-shadow: 0 16px 44px rgba(36,52,77,.08);
}

/* Dedicated website pages use the app's current popup visual language as a page card. */
.tcjc-website-v114-static-page {
  min-height: min(760px, 82svh);
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(22px, 5vw, 64px) 14px;
  background:
    radial-gradient(circle at 14% 6%, rgba(148,184,205,.18), transparent 33%),
    #f7f5f2;
}

.tcjc-website-v114-static-sheet.tcjc-app-popup-sheet {
  position: relative !important;
  inset: auto !important;
  translate: none !important;
  width: min(920px, calc(100vw - 28px)) !important;
  max-height: none !important;
  margin: 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
  overflow: hidden;
}

.tcjc-website-v114-static-sheet .tcjc-app-popup-content {
  max-height: none !important;
  overflow: visible !important;
}

/* Zoho owns the website header/footer. The app components own only their page content. */
.tcjc-website-v114-host .tcjc-true-home,
.tcjc-website-v114-host .tcjc-calendar-screen,
.tcjc-website-v114-host .tcjc-r2 {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 720px) {
  .tcjc-website-v114-static-page {
    min-height: 0;
    padding: 12px 8px 28px;
  }

  .tcjc-website-v114-static-sheet.tcjc-app-popup-sheet {
    width: calc(100vw - 16px) !important;
  }
}


/* ========================================================================== 
   TRUE CHURCH WEBSITE V114 APP-PARITY — ZOHO HOST INTEGRATION REPAIR
   - Remove app-only header spacing from public website content.
   - Keep Sacred Calendar month cards intact under Zoho's global button rules.
   - Keep Reader V2 settings/audio controls inside the website runtime.
   ========================================================================== */

/* Zoho already owns the public-site header. Do not reserve the app's fixed-header space. */
html body.tcjc-true-home-active
.tcjc-website-v114-host
.tcjc-true-home.tcjc-app-content {
  padding-top: 10px !important;
  padding-bottom: 48px !important;
}

.tcjc-website-v114-host .tcjc-sacred-preview {
  padding-top: 10px !important;
  padding-bottom: 54px !important;
}

/* Static Daily pages should begin beneath the website header instead of vertically centering
   an app-style sheet inside a full viewport. */
.tcjc-website-v114-host .tcjc-website-v114-static-page {
  min-height: 0 !important;
  place-items: start center !important;
  padding-top: 10px !important;
  padding-bottom: 38px !important;
}

/* Zoho applies broad button/text rules. Lock each sacred-month card to the horizontal shelf. */
.tcjc-website-v114-host .tcjc-calendar-month-slider {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.tcjc-website-v114-host .tcjc-calendar-month-slider > button {
  flex: 0 0 132px !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  min-height: 66px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}

.tcjc-website-v114-host .tcjc-calendar-month-slider > button > small,
.tcjc-website-v114-host .tcjc-calendar-month-slider > button > strong,
.tcjc-website-v114-host .tcjc-calendar-month-slider > button > span {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.tcjc-website-v114-host .tcjc-calendar-month-slider > button > small,
.tcjc-website-v114-host .tcjc-calendar-month-slider > button > strong {
  white-space: nowrap !important;
}

/* Reader Settings must sit above the app chrome and the host site's click/navigation layers. */
.tcjc-website-v114-host .tcjc-r2-sheet-backdrop {
  z-index: 2147483600 !important;
}

.tcjc-website-v114-host .tcjc-r2-settings-sheet {
  position: relative !important;
  z-index: 2147483601 !important;
}

/* The lightweight system-speech player stays attached to Reader V2's Audio control. */
.tcjc-website-v114-host .tcjc-r2-isabella-nav-item {
  isolation: isolate !important;
}

.tcjc-website-v114-host .tcjc-r2-isabella-panel {
  z-index: 2147483601 !important;
  pointer-events: auto !important;
}

.tcjc-website-v114-host .tcjc-r2-isabella-panel button,
.tcjc-website-v114-host .tcjc-r2-settings-sheet button,
.tcjc-website-v114-host .tcjc-r2-topbar button,
.tcjc-website-v114-host .tcjc-app-bottom-shell button {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

@media (max-width: 720px) {
  html body.tcjc-true-home-active
  .tcjc-website-v114-host
  .tcjc-true-home.tcjc-app-content {
    padding-top: 6px !important;
    padding-bottom: 30px !important;
  }

  .tcjc-website-v114-host .tcjc-sacred-preview {
    padding-top: 6px !important;
    padding-bottom: 34px !important;
  }

  .tcjc-website-v114-host .tcjc-website-v114-static-page {
    padding-top: 6px !important;
    padding-bottom: 26px !important;
  }

  .tcjc-website-v114-host .tcjc-calendar-month-slider > button {
    flex-basis: 118px !important;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
  }
}


/* ========================================================================== 
   TRUE CHURCH WEBSITE V114 APP-PARITY — READER / CALENDAR EMBED REPAIR
   Owns only public-Zoho integration. App source behavior remains unchanged.
   ========================================================================== */

/* Zoho already places the custom page below its own site header. Reader V2's
   standalone-app top padding was therefore being counted a second time. */
.tcjc-website-v114-host .tcjc-r2 {
  padding-top: 6px !important;
}

.tcjc-website-v114-host .tcjc-r2-stage {
  margin-top: 0 !important;
}

/* The live Zoho template gives buttons a flex layout. Sacred month buttons
   are three-line cards, so explicitly restore their intended vertical stack. */
.tcjc-website-v114-host .tcjc-calendar-month-slider > button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  align-items: start !important;
  justify-content: stretch !important;
  justify-items: start !important;
  gap: 2px !important;
  text-align: left !important;
}

.tcjc-website-v114-host .tcjc-calendar-month-slider > button > small,
.tcjc-website-v114-host .tcjc-calendar-month-slider > button > strong,
.tcjc-website-v114-host .tcjc-calendar-month-slider > button > span {
  position: static !important;
  inset: auto !important;
  float: none !important;
  flex: none !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  text-align: left !important;
  transform: none !important;
}

.tcjc-website-v114-host .tcjc-calendar-month-slider > button > small {
  white-space: nowrap !important;
}

.tcjc-website-v114-host .tcjc-calendar-month-slider > button > strong {
  margin-top: 2px !important;
  white-space: nowrap !important;
}

.tcjc-website-v114-host .tcjc-calendar-month-slider > button > span {
  margin-top: 1px !important;
}

/* Do not use the generic .is-open/.is-playing state names inside the Zoho
   template. Those class names are common theme/menu states on commerce sites. */
.tcjc-website-v114-host .tcjc-r2-isabella-nav-item.tcjc-r2-audio-open
.tcjc-r2-isabella-nav-trigger {
  color: var(--tcjc-chrome-blue-strong) !important;
  background: rgba(95, 159, 190, .055) !important;
  box-shadow: inset 0 -1px 0 rgba(40, 126, 169, .92) !important;
}

.tcjc-website-v114-host .tcjc-r2-isabella-nav-item.tcjc-r2-audio-playing
.tcjc-r2-isabella-status {
  background: #4fbd78 !important;
}

@media (max-width: 720px) {
  .tcjc-website-v114-host .tcjc-r2 {
    padding-top: 4px !important;
  }
}


/* =========================================================
   WEBSITE V112 — AUDIO REMOVED
   The public Zoho website intentionally does not expose Reader audio.
   Native/PWA app audio remains unchanged.
   ========================================================= */
.tcjc-website-v114-host .tcjc-r2-isabella-nav-item,
.tcjc-website-v114-host .tcjc-r2-isabella-panel,
.tcjc-website-v114-host .tcjc-r2-isabella-nav-trigger {
  display: none !important;
}

/* =========================================================
   WEBSITE V112 — READER WEBSITE-ONLY SIMPLIFICATION
   - Reader Settings control intentionally omitted on Zoho website.
   - App/PWA Reader Settings remain unchanged.
   - Six visible Reader footer controls are centered evenly.
   ========================================================= */

/* Defensive: no settings trigger should appear even if an old cached fragment is retained. */
.tcjc-website-v114-host .tcjc-r2-topbar button[aria-label="Open reader settings"] {
  display: none !important;
}

/* Audio was intentionally removed in v111 and remains absent. */
.tcjc-website-v114-host .tcjc-r2-isabella-nav-item,
.tcjc-website-v114-host .tcjc-r2-isabella-panel,
.tcjc-website-v114-host .tcjc-r2-isabella-nav-trigger {
  display: none !important;
}

/* The app source originally had seven footer slots. The website exposes six:
   Previous, Inspiration, Reading, Calendar, Saved, Next. */
.tcjc-website-v114-host
.tcjc-r2-reader-app-bottom.tcjc-home-premium-bottom {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  justify-content: center !important;
}

@media (max-width: 720px) {
  .tcjc-website-v114-host
  .tcjc-r2-reader-app-bottom.tcjc-home-premium-bottom {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}