/* ============================================================================
   SANCTUM APP — standalone SPA stylesheet
   App-first, not a web-wrapper. This is the app's OWN component library,
   built on the locked Sanctum design tokens. It shares NO CSS with the
   website (1765sanctumco.com pages); it only shares the token values so the
   brand register is identical. See _Memory/feedback_app_first_not_web_wrapper.md
   ============================================================================ */

/* ---- DESIGN TOKENS (copied from assets/app-mode.css :root, the locked
   token system from the 2026-05-13 video-pipeline brand standard). The SPA
   is self-contained, so it carries its own copy rather than depending on the
   website's app-mode.css (which is being retired). ------------------------- */
:root {
  /* Chrome dimensions */
  --app-tab-bar-h: 64px;
  --app-header-h: 52px;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* SURFACE HIERARCHY — 4 tonal levels */
  --sanctum-surface-base:    #0A0A0A;
  --sanctum-surface-1:       #141416;
  --sanctum-surface-2:       #1C1C1F;
  --sanctum-surface-3:       #25252A;
  --sanctum-surface-overlay: rgba(8, 9, 12, 0.84);

  /* Brand palette */
  --sanctum-gold:        #FFD400;
  --sanctum-gold-warm:   #c9a96a;
  --sanctum-bone:        #f5e6c8;
  --sanctum-bone-soft:   #cfc6b0;
  --sanctum-bone-quiet:  #9a8d6f;
  --sanctum-oxblood:     #6E1B1F;
  --sanctum-line:        rgba(255, 212, 0, 0.16);
  --sanctum-line-soft:   rgba(245, 230, 200, 0.08);

  /* TYPE SCALE */
  --type-display:   clamp(28px, 6vw, 34px);
  --type-title-l:   clamp(22px, 4.5vw, 26px);
  --type-title-m:   clamp(18px, 3.8vw, 20px);
  --type-title-s:   17px;
  --type-body-l:    17px;
  --type-body-m:    15px;
  --type-body-s:    13px;
  --type-label:     11px;

  /* Font stacks */
  --font-display: "Cinzel", Georgia, serif;
  --font-elevated: "Cormorant Garamond", Georgia, serif;
  --font-body: "EB Garamond", Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* MOTION SYSTEM — split into sacred and utility registers */
  --motion-sacred:        500ms;
  --motion-sacred-fast:   400ms;
  --motion-utility:       180ms;
  --motion-instant:       120ms;
  --ease-sacred:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-utility:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);

  /* RADII */
  --radius-pill:    999px;
  --radius-lg:      18px;
  --radius-md:      12px;
  --radius-sm:      8px;
  --radius-xs:      4px;

  /* ELEVATION */
  --elev-1: 0 2px 6px rgba(0, 0, 0, 0.30);
  --elev-2: 0 6px 16px rgba(0, 0, 0, 0.42);
  --elev-3: 0 14px 36px rgba(0, 0, 0, 0.55);
  --elev-glow-gold: 0 0 24px rgba(255, 212, 0, 0.32);

  /* SPACING — 4px grid */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;
}

/* ---- RESET ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--sanctum-surface-base);
  color: var(--sanctum-bone);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  /* App, not a scrolling document: lock the body, scroll inside screens. */
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--sanctum-gold); text-decoration: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--sanctum-gold); outline-offset: 2px; }

/* ---- BOOT SPLASH ---------------------------------------------------------- */
.app-splash {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 30%, #15151b 0%, var(--sanctum-surface-base) 70%);
  transition: opacity var(--motion-sacred) var(--ease-sacred);
}
.app-splash.is-leaving { opacity: 0; pointer-events: none; }
.app-splash__tagline {
  font-family: var(--font-display);
  font-size: var(--type-label);
  letter-spacing: 0.32em;
  color: var(--sanctum-gold-warm);
  text-transform: uppercase;
  animation: splash-pulse 2.4s var(--ease-sacred) infinite;
}
@keyframes splash-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ---- APP ROOT + PERSISTENT SHELL ----------------------------------------- */
.app-root { position: fixed; inset: 0; display: flex; flex-direction: column; }
.app-root[data-booting="1"] { visibility: hidden; }

/* TopHeader — persistent, never torn down between routes */
.app-header {
  flex: 0 0 auto;
  height: calc(var(--app-header-h) + var(--app-safe-top));
  padding-top: var(--app-safe-top);
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid var(--sanctum-line);
  position: relative; z-index: 5;
}
.app-header__title {
  font-family: var(--font-display);
  font-size: var(--type-title-s);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--sanctum-bone);
  text-transform: uppercase;
}
.app-header__action {
  position: absolute; top: 50%; transform: translateY(-50%);
  margin-top: calc(var(--app-safe-top) / 2);
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  color: var(--sanctum-bone-soft);
  transition: background var(--motion-utility) var(--ease-utility);
}
.app-header__action:active { background: var(--sanctum-surface-2); }
.app-header__action.is-left { left: var(--space-2); }
.app-header__action.is-right { right: var(--space-2); }
.app-header[hidden] { display: none; }

/* Screen container — the only region that swaps on navigation */
.app-screens { flex: 1 1 auto; position: relative; overflow: hidden; }
.app-screen {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-5) var(--space-5) calc(var(--app-tab-bar-h) + var(--app-safe-bottom) + var(--space-6));
}
.app-screen.is-fullbleed { padding-bottom: calc(var(--app-safe-bottom) + var(--space-6)); }
/* Chrome-less screens (no persistent header / no tab bar): clear the status
   bar with the top inset, and only reserve the bottom inset (no phantom
   tab-bar gap). Keeps back buttons off the notch and trims dead space. */
.app-screen--safe {
  padding-top: calc(var(--app-safe-top) + var(--space-5));
  padding-bottom: calc(var(--app-safe-bottom) + var(--space-8));
}

/* Screen transition (route change). Sacred routes get the slow quint;
   utility routes get the snappy curve. Driven by a class on mount. */
.app-screen[data-enter] { animation-fill-mode: both; }
.app-screen[data-enter="sacred"] { animation: screen-in var(--motion-sacred) var(--ease-sacred); }
.app-screen[data-enter="utility"] { animation: screen-in var(--motion-utility) var(--ease-utility); }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* BottomTabs — persistent floating tab bar */
.app-tabs {
  flex: 0 0 auto;
  height: calc(var(--app-tab-bar-h) + var(--app-safe-bottom));
  padding-bottom: var(--app-safe-bottom);
  display: flex;
  background: rgba(15, 15, 17, 0.92);
  backdrop-filter: saturate(1.2) blur(18px);
  -webkit-backdrop-filter: saturate(1.2) blur(18px);
  border-top: 1px solid var(--sanctum-line);
  box-shadow: var(--elev-2);
  position: relative; z-index: 5;
}
.app-tabs[hidden] { display: none; }
.app-tab {
  position: relative;
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  color: var(--sanctum-bone-quiet);
  transition: color var(--motion-utility) var(--ease-utility),
              transform var(--motion-instant) var(--ease-utility);
}
/* Animated active indicator — a short gold bar that slides in under the top
   edge of the active tab. Sized off the icon, springs in on selection. */
.app-tab::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 26px; height: 2px; border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  background: var(--sanctum-gold);
  transform: translateX(-50%) scaleX(0); transform-origin: center;
  transition: transform var(--motion-utility) var(--ease-spring);
}
.app-tab:active { transform: scale(0.92); }
.app-tab.is-active { color: var(--sanctum-gold); }
.app-tab.is-active::before { transform: translateX(-50%) scaleX(1); }
.app-tab__icon { width: 24px; height: 24px; }
.app-tab__label {
  font-family: var(--font-ui);
  font-size: var(--type-label); letter-spacing: 0.04em; font-weight: 600;
}

/* ---- COMPONENT LIBRARY --------------------------------------------------- */

/* Eyebrow / section heads */
.app-eyebrow {
  font-family: var(--font-display);
  font-size: var(--type-label); letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--sanctum-gold-warm);
  margin-bottom: var(--space-2);
}
.app-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--type-display); line-height: 1.12; color: var(--sanctum-bone);
}
.app-h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--type-title-l); line-height: 1.18; color: var(--sanctum-bone);
}
.app-lede {
  font-family: var(--font-elevated); font-style: italic;
  font-size: var(--type-title-m); line-height: 1.4; color: var(--sanctum-bone-soft);
}
.app-body { font-size: var(--type-body-l); line-height: 1.55; color: var(--sanctum-bone-soft); }
.app-muted { color: var(--sanctum-bone-quiet); font-size: var(--type-body-s); }

/* Card */
.app-card {
  background: var(--sanctum-surface-1);
  border: 1px solid var(--sanctum-line-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--elev-1);
}
.app-card + .app-card { margin-top: var(--space-3); }
.app-card.is-feature {
  background:
    linear-gradient(180deg, rgba(255, 212, 0, 0.05), transparent 60%),
    var(--sanctum-surface-1);
  border-color: var(--sanctum-line);
}
.app-card__eyebrow { composes: app-eyebrow; }

/* List + ListItem */
.app-list { display: flex; flex-direction: column; gap: var(--space-2); }
.app-list-item {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left;
  background: var(--sanctum-surface-1);
  border: 1px solid var(--sanctum-line-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-height: 56px;
  transition: background var(--motion-utility) var(--ease-utility),
              transform var(--motion-instant) var(--ease-utility);
}
.app-list-item:active { background: var(--sanctum-surface-2); transform: scale(0.985); }
.app-list-item__body { flex: 1 1 auto; min-width: 0; }
.app-list-item__title { font-size: var(--type-body-l); color: var(--sanctum-bone); }
.app-list-item__sub { font-size: var(--type-body-s); color: var(--sanctum-bone-quiet); margin-top: 2px; }
.app-list-item__chev { color: var(--sanctum-bone-quiet); flex-shrink: 0; }
.app-list-item__lock { color: var(--sanctum-gold-warm); flex-shrink: 0; }

/* Button */
.app-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  width: 100%; min-height: 50px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--type-body-l); font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--motion-instant) var(--ease-utility),
              background var(--motion-utility) var(--ease-utility),
              opacity var(--motion-utility) var(--ease-utility);
}
.app-btn:active { transform: scale(0.97); }
.app-btn[disabled] { opacity: 0.5; pointer-events: none; }
.app-btn--primary { background: var(--sanctum-gold); color: #15140e; box-shadow: var(--elev-glow-gold); }
.app-btn--secondary { background: var(--sanctum-surface-2); color: var(--sanctum-bone); border: 1px solid var(--sanctum-line); }
.app-btn--ghost { background: transparent; color: var(--sanctum-bone-soft); min-height: 44px; }
.app-btn + .app-btn { margin-top: var(--space-3); }

/* Input */
.app-field { margin-bottom: var(--space-4); }
.app-field__label {
  display: block; font-family: var(--font-ui); font-size: var(--type-body-s);
  font-weight: 600; letter-spacing: 0.02em; color: var(--sanctum-bone-quiet);
  margin-bottom: var(--space-2); text-transform: uppercase;
}
.app-input {
  width: 100%; min-height: 50px;
  padding: var(--space-3) var(--space-4);
  background: var(--sanctum-surface-2);
  border: 1px solid var(--sanctum-line-soft);
  border-radius: var(--radius-sm);
  color: var(--sanctum-bone);
  font-family: var(--font-ui); font-size: var(--type-body-l);
  transition: border-color var(--motion-utility) var(--ease-utility);
  user-select: text; -webkit-user-select: text;
}
.app-input::placeholder { color: var(--sanctum-bone-quiet); opacity: 0.7; }
.app-input:focus { outline: none; border-color: var(--sanctum-gold); }

/* Chip / selectable option (onboarding) */
.app-choice {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left;
  padding: var(--space-4);
  background: var(--sanctum-surface-1);
  border: 1.5px solid var(--sanctum-line-soft);
  border-radius: var(--radius-md);
  color: var(--sanctum-bone-soft);
  font-size: var(--type-body-l);
  transition: border-color var(--motion-utility) var(--ease-utility),
              background var(--motion-utility) var(--ease-utility),
              transform var(--motion-instant) var(--ease-utility);
}
.app-choice:active { transform: scale(0.985); }
.app-choice.is-selected {
  border-color: var(--sanctum-gold);
  background: linear-gradient(180deg, rgba(255, 212, 0, 0.08), transparent), var(--sanctum-surface-1);
  color: var(--sanctum-bone);
}
.app-choice__radio {
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  border: 2px solid var(--sanctum-bone-quiet); flex-shrink: 0;
  display: grid; place-items: center;
}
.app-choice.is-selected .app-choice__radio { border-color: var(--sanctum-gold); }
.app-choice.is-selected .app-choice__radio::after {
  content: ""; width: 11px; height: 11px; border-radius: var(--radius-pill);
  background: var(--sanctum-gold);
}

/* Progress dots */
.app-dots { display: flex; gap: var(--space-2); justify-content: center; }
.app-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--sanctum-line-soft); transition: background var(--motion-utility) var(--ease-utility); }
.app-dot.is-done { background: var(--sanctum-gold-warm); }
.app-dot.is-current { background: var(--sanctum-gold); transform: scale(1.25); }

/* Banner (errors / notices) */
.app-banner {
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  font-size: var(--type-body-m); margin-bottom: var(--space-4);
}
.app-banner--error { background: rgba(110, 27, 31, 0.22); border: 1px solid var(--sanctum-oxblood); color: #f0c9c0; }
.app-banner--ok { background: rgba(255, 212, 0, 0.10); border: 1px solid var(--sanctum-line); color: var(--sanctum-bone); }

/* Skeleton loader */
.app-skeleton {
  background: linear-gradient(90deg, var(--sanctum-surface-1) 25%, var(--sanctum-surface-2) 50%, var(--sanctum-surface-1) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s var(--ease-utility) infinite;
}
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Spinner */
.app-spinner {
  width: 18px; height: 18px; border-radius: var(--radius-pill);
  border: 2px solid rgba(21, 20, 14, 0.35); border-top-color: #15140e;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- SCREEN: SignIn ------------------------------------------------------ */
.signin {
  min-height: 100%; display: flex; flex-direction: column; justify-content: center;
  max-width: 420px; margin: 0 auto;
}
.signin__brand { text-align: center; margin-bottom: var(--space-8); }
.signin__crest { width: 72px; height: 72px; border-radius: var(--radius-md); margin: 0 auto var(--space-4); display: block; box-shadow: var(--elev-2); }
.signin__tagline { font-family: var(--font-display); font-size: var(--type-label); letter-spacing: 0.3em; color: var(--sanctum-gold-warm); text-transform: uppercase; margin-top: var(--space-3); }
.signin__hint { text-align: center; margin-top: var(--space-5); }

/* ---- SCREEN: Onboarding -------------------------------------------------- */
.onboard { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.onboard__top { padding-top: var(--space-4); margin-bottom: var(--space-6); }
.onboard__q { margin: var(--space-6) 0 var(--space-5); }
.onboard__choices { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 auto; }
.onboard__nav { margin-top: var(--space-6); }

/* ---- SCREEN: Today ------------------------------------------------------- */
.today__greeting { margin-bottom: var(--space-2); }
.today__date { color: var(--sanctum-bone-quiet); font-size: var(--type-body-m); margin-bottom: var(--space-6); }
.today__section-title { margin: var(--space-8) 0 var(--space-3); }

/* Liturgical day card — left accent bar tinted by the day's liturgical color */
.today__lit {
  position: relative; overflow: hidden;
  background: var(--sanctum-surface-1);
  border: 1px solid var(--sanctum-line-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5); padding-left: calc(var(--space-5) + 4px);
  margin-bottom: var(--space-5);
}
.today__lit::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--sanctum-gold-warm);
}
.today__lit[data-color="green"]::before  { background: #5a7d52; }
.today__lit[data-color="purple"]::before { background: #6b5b95; }
.today__lit[data-color="red"]::before    { background: var(--sanctum-oxblood); }
.today__lit[data-color="rose"]::before   { background: #c98aa9; }
.today__lit[data-color="white"]::before  { background: var(--sanctum-bone); }
.today__lit[data-color="gold"]::before   { background: var(--sanctum-gold); }
.today__lit-season { margin-bottom: var(--space-2); }
.today__feast { font-family: var(--font-elevated); font-size: var(--type-title-m); line-height: 1.3; color: var(--sanctum-bone); }
.today__litnote { margin-top: var(--space-3); color: var(--sanctum-bone-quiet); font-size: var(--type-body-s); font-style: italic; }

.today__altar {
  background:
    linear-gradient(180deg, rgba(255, 212, 0, 0.06), transparent 55%),
    var(--sanctum-surface-1);
  border: 1px solid var(--sanctum-line);
  border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-5);
}
.today__altar-sub { margin-top: var(--space-3); color: var(--sanctum-bone-soft); font-size: var(--type-body-m); }
.today__altar-cta { margin-top: var(--space-4); }
.today__prep {
  background: var(--sanctum-surface-1);
  border: 1px solid var(--sanctum-line-soft); border-left: 3px solid var(--sanctum-gold-warm);
  border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-5);
}
.today__prep-cta { margin: var(--space-4) 0 var(--space-2); }
.today__prep .today__altar-sub:not(:last-child) { margin-bottom: var(--space-2); }

/* ---- SCREEN: Household setup --------------------------------------------- */
.household { max-width: 480px; margin: 0 auto; }
.household__top { padding-top: var(--space-4); margin-bottom: var(--space-6); }
.household__kids { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); }
.household__kid {
  background: var(--sanctum-surface-1); border: 1px solid var(--sanctum-line-soft);
  border-radius: var(--radius-md); padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.household__kid-sub { display: grid; grid-template-columns: 84px 1fr; gap: var(--space-2); }
.household__save { margin-top: var(--space-6); }

/* ---- SCREEN: Tools / More ------------------------------------------------ */
.tools__intro, .more__intro { margin-bottom: var(--space-6); }
.more__account { margin-bottom: var(--space-6); }
.more__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-ui); font-size: var(--type-body-s); font-weight: 600;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: rgba(255, 212, 0, 0.12); color: var(--sanctum-gold); border: 1px solid var(--sanctum-line);
}

/* ---- SCREEN: Pray With Wife --------------------------------------------- */
.praywife { max-width: 480px; margin: 0 auto; }
.praywife__top { margin: 0 0 var(--space-3); }
.praywife__back {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--sanctum-bone-quiet); font-family: var(--font-ui); font-size: var(--type-body-m);
  min-height: 44px; padding-right: var(--space-3);
}
.praywife__back:active { color: var(--sanctum-bone); }
.praywife__head { margin-bottom: var(--space-6); }
.praywife__head .app-lede { margin-top: var(--space-3); }
.praywife__step { display: flex; gap: var(--space-4); align-items: flex-start; }
.praywife__step-body { flex: 1 1 auto; min-width: 0; }
.praywife__num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--type-body-m);
  color: var(--sanctum-gold); border: 1px solid var(--sanctum-line);
}
.praywife__prayer {
  font-family: var(--font-elevated); font-style: italic;
  font-size: var(--type-title-m); line-height: 1.5; color: var(--sanctum-bone);
  padding-left: var(--space-3); border-left: 2px solid var(--sanctum-gold-warm);
  margin-bottom: var(--space-2);
}
.praywife__done { margin-top: var(--space-6); }

/* ---- SCREEN: Sacramental Calendar --------------------------------------- */
.sacr { max-width: 480px; margin: 0 auto; }
.sacr__top { margin: 0 0 var(--space-3); }
.sacr__head { margin-bottom: var(--space-6); }
.sacr__head .app-body { margin-top: var(--space-2); }
.sacr__kid { margin-bottom: var(--space-3); }
.sacr__kid-name { font-family: var(--font-elevated); font-size: var(--type-title-m); color: var(--sanctum-bone); margin-bottom: var(--space-4); }
.sacr__row { margin-bottom: var(--space-4); }
.sacr__row:last-child { margin-bottom: 0; }
.sacr__row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.sacr__sac-label {
  font-family: var(--font-ui); font-size: var(--type-body-s); font-weight: 600;
  letter-spacing: 0.02em; color: var(--sanctum-bone-quiet); text-transform: uppercase;
}
.sacr__chip { font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; padding: 2px var(--space-2); border-radius: var(--radius-pill); white-space: nowrap; }
.sacr__chip--done { background: rgba(90, 125, 82, 0.18); color: #8fb583; border: 1px solid rgba(90, 125, 82, 0.4); }
.sacr__chip--soon { background: rgba(255, 212, 0, 0.12); color: var(--sanctum-gold); border: 1px solid var(--sanctum-line); }
.sacr__chip--set { background: var(--sanctum-surface-2); color: var(--sanctum-bone-quiet); border: 1px solid var(--sanctum-line-soft); }
.sacr__date { color-scheme: dark; }
.sacr__save { margin-top: var(--space-6); }

/* ---- SCREEN: Three-Generation Map --------------------------------------- */
.tg { max-width: 480px; margin: 0 auto; }
.tg__top { margin: 0 0 var(--space-3); }
.tg__head { margin-bottom: var(--space-6); }
.tg__head .app-body { margin-top: var(--space-2); }
.tg__chain { margin-bottom: var(--space-5); }
.tg__vice { font-family: var(--font-elevated); font-style: italic; font-size: var(--type-title-l); color: var(--sanctum-bone); margin: var(--space-2) 0; }
.tg__disc { color: var(--sanctum-bone-soft); font-size: var(--type-body-m); margin-bottom: var(--space-4); }
.tg__dayline { font-family: var(--font-display); font-size: var(--type-title-m); color: var(--sanctum-gold); letter-spacing: 0.04em; margin-bottom: var(--space-3); }
.tg__bar { height: 6px; background: var(--sanctum-surface-3); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: var(--space-4); }
.tg__bar-fill { height: 100%; background: linear-gradient(90deg, var(--sanctum-gold-warm), var(--sanctum-gold)); border-radius: var(--radius-pill); transition: width var(--motion-sacred) var(--ease-sacred); }
.tg__gen { margin-bottom: var(--space-3); }
.tg__gen-title { font-family: var(--font-elevated); font-size: var(--type-title-m); color: var(--sanctum-bone); margin: var(--space-1) 0 var(--space-4); }
.tg__gen .app-field:last-child { margin-bottom: 0; }
.tg__save { margin-top: var(--space-4); }

/* ---- Confession Vault --------------------------------------------------- */
.vault { max-width: 480px; margin: 0 auto; }
.vault__top { margin: 0 0 var(--space-3); }
.vault__head { margin-bottom: var(--space-5); }
.vault__head .app-body { margin-top: var(--space-2); }
.vault__lock-card .app-field:last-of-type { margin-bottom: var(--space-2); }
.vault__unlock { margin-top: var(--space-3); }
.vault__err { color: #e98886; font-size: var(--type-body-s); margin: var(--space-1) 0 0; }
.vault__disclaimer { color: var(--sanctum-bone-quiet); font-size: var(--type-body-s); line-height: 1.55; margin-top: var(--space-5); text-align: center; }

.vault__cadence { margin-bottom: var(--space-5); position: relative; }
.vault__cadence-line { font-family: var(--font-elevated); font-size: var(--type-title-m); color: var(--sanctum-bone); margin: var(--space-1) 0; }
.vault__overdue { color: var(--sanctum-gold); font-size: var(--type-body-m); }
.vault__cadence-edit { position: absolute; top: var(--space-4); right: var(--space-4); }
.vault__cadence-edit, .vault__entry-del { background: none; border: none; color: var(--sanctum-bone-quiet); font-family: var(--font-ui); font-size: var(--type-body-s); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.vault__date { color-scheme: dark; }

.vault__section { margin: 0 0 var(--space-3); }
.vault__hint { color: var(--sanctum-bone-quiet); font-style: italic; font-size: var(--type-body-m); margin-bottom: var(--space-4); }
.vault__entries { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.vault__entry-text { color: var(--sanctum-bone); font-size: var(--type-body-m); line-height: 1.55; white-space: pre-wrap; }
.vault__entry-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); }
.vault__entry-meta { color: var(--sanctum-bone-quiet); font-family: var(--font-ui); font-size: var(--type-body-s); }

.vault__add { margin-bottom: var(--space-5); }
.vault__prompts-label { margin-bottom: var(--space-2); }
.vault__prompts { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.vault__prompt { text-align: left; background: var(--sanctum-surface-2); border: 1px solid var(--sanctum-line-soft); border-radius: var(--radius-sm); color: var(--sanctum-bone-soft); font-family: var(--font-body); font-size: var(--type-body-m); line-height: 1.4; padding: var(--space-2) var(--space-3); cursor: pointer; transition: border-color var(--motion-utility) var(--ease-utility), color var(--motion-utility) var(--ease-utility); }
.vault__prompt:hover { border-color: var(--sanctum-line); color: var(--sanctum-bone); }
.vault__add-text { width: 100%; box-sizing: border-box; resize: vertical; min-height: 76px; font-family: var(--font-body); font-size: var(--type-body-l); line-height: 1.5; }
.vault__add-btn { margin-top: var(--space-3); }

.vault__how { margin-bottom: var(--space-4); }
.vault__how-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; background: none; border: none; color: var(--sanctum-bone); font-family: var(--font-elevated); font-size: var(--type-title-s); text-align: left; cursor: pointer; padding: 0; }
.vault__how-body { margin-top: var(--space-4); }
.vault__rite-step { color: var(--sanctum-bone-soft); font-size: var(--type-body-m); line-height: 1.55; margin-bottom: var(--space-2); }
.vault__act-label { margin: var(--space-4) 0 var(--space-2); }
.vault__act { font-family: var(--font-elevated); font-style: italic; color: var(--sanctum-bone); font-size: var(--type-body-l); line-height: 1.6; }

.vault__confessed-cta { margin-top: var(--space-2); }
.vault__confessed-cta.is-armed { border-color: #C8302F; color: #e98886; }
.vault__lock-btn { margin-top: var(--space-2); }

/* ---- Tool viewer — native frame around an in-app web tool -------------- */
.app-screen--immersive { padding: 0 !important; overflow: hidden; }
.toolview { display: flex; flex-direction: column; height: 100%; background: var(--sanctum-surface-base, #0A0A0A); }
.toolview__bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2);
  padding: calc(var(--app-safe-top, 0px) + var(--space-3)) var(--space-2) var(--space-3);
  background: var(--sanctum-surface-1, #121316); border-bottom: 1px solid var(--sanctum-line);
}
.toolview__back { background: none; border: 0; color: var(--sanctum-bone); display: flex; align-items: center; padding: var(--space-1); cursor: pointer; }
.toolview__title { flex: 1 1 auto; text-align: center; font-family: var(--font-display); font-size: var(--type-title-s); letter-spacing: 0.04em; color: var(--sanctum-bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolview__spacer { flex: 0 0 auto; width: 32px; }
.toolview__stage { flex: 1 1 auto; position: relative; background: var(--sanctum-surface-base, #0A0A0A);
  /* Shrink the iframe up off the Android system nav bar so fixed-bottom tool
     footers (rosary Pray-Mode "Begin Beads", etc.) are tappable. MUST live here,
     NOT on .toolview — that element also carries .app-screen--immersive
     { padding:0 !important }, which silently killed the earlier attempt. env()
     is 0 inside the WebView, so use a hard floor that clears a 3-button nav. */
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 56px); }
.toolview__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.toolview__frame { width: 100%; height: 100%; border: 0; display: block; background: var(--sanctum-surface-base, #0A0A0A); transition: opacity var(--motion-utility) var(--ease-utility); }

/* ---- Generic centered state (empty / error) ----------------------------- */
.app-center { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-3); padding: var(--space-8); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================================
   DAILY DEPTH (added 2026-05-31) — styles for the daily-fight card, the app-
   native examen card + screen, and the in-app prayerbook. Built on the same
   tokens + card register as .today__altar / .today__prep above.
   ============================================================================ */

/* (1) Today — the man's daily fight */
.today__fight {
  background:
    linear-gradient(135deg, rgba(110,27,31,0.18), transparent 62%),
    var(--sanctum-surface-1);
  border: 1px solid var(--sanctum-line);
  border-left: 3px solid var(--sanctum-oxblood);
  border-radius: var(--radius-card, 14px);
  padding: var(--space-5);
  margin-top: var(--space-5);
}
.today__fight .app-eyebrow { color: var(--sanctum-gold-warm); }
.today__fight-counter { margin-top: var(--space-2); }
.today__fight-word {
  font-family: var(--font-elevated);
  font-style: italic;
  font-size: var(--type-title-m);
  color: var(--sanctum-bone);
  margin-top: var(--space-3);
}
.today__fight-cite { margin-top: var(--space-2); color: var(--sanctum-bone-quiet); font-size: var(--type-body-s); letter-spacing: 0.02em; }

/* (2) Today — examen streak card */
.today__examen {
  background: var(--sanctum-surface-1);
  border: 1px solid var(--sanctum-line-soft);
  border-radius: var(--radius-card, 14px);
  padding: var(--space-5);
  margin-top: var(--space-5);
}
.today__examen .app-eyebrow { color: var(--sanctum-gold-warm); }
.today__examen-streak {
  font-family: var(--font-elevated);
  font-style: italic;
  font-size: var(--type-title-m);
  color: var(--sanctum-bone);
  margin: var(--space-2) 0 var(--space-3);
}
.today__examen-dots { display: flex; gap: 6px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.examen-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sanctum-surface-3); border: 1px solid var(--sanctum-line-soft); }
.examen-dot.is-on { background: var(--sanctum-gold); border-color: var(--sanctum-gold); box-shadow: 0 0 6px rgba(255,212,0,0.4); }

/* (2) Examen screen */
.examen-screen { display: flex; flex-direction: column; }
.examen-screen__head { margin-bottom: var(--space-5); }
.examen-screen__head .app-lede { margin-top: var(--space-2); }
.examen-screen__step { margin-top: var(--space-3); }
.examen-screen__step .app-eyebrow { color: var(--sanctum-gold-warm); margin-bottom: var(--space-3); }
.examen-screen__step textarea { width: 100%; }
.examen-screen__privacy { margin-top: var(--space-4); }
.examen-fight { display: flex; gap: var(--space-3); }
.examen-fight__opt {
  flex: 1; padding: var(--space-3); border-radius: var(--radius-card, 14px);
  border: 1px solid var(--sanctum-line); background: var(--sanctum-surface-2);
  color: var(--sanctum-bone-soft); font-family: var(--font-ui); font-size: var(--type-body-m);
  cursor: pointer; transition: border-color var(--motion-utility) var(--ease-utility), color var(--motion-utility) var(--ease-utility);
}
.examen-fight__opt.is-sel { border-color: var(--sanctum-gold); color: var(--sanctum-gold); }

/* (3) Prayerbook */
.prayers__head { margin-bottom: var(--space-5); }
.prayers__head .app-lede { margin-top: var(--space-2); }
.prayer-card { padding: 0; overflow: hidden; }
.prayer__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--type-title-s); color: var(--sanctum-bone); text-align: left;
}
.prayer__toggle[aria-expanded="true"] .app-icon { transform: rotate(90deg); }
.prayer__toggle .app-icon { transition: transform var(--motion-utility) var(--ease-utility); color: var(--sanctum-gold-warm); flex: 0 0 auto; }
.prayer__body { padding: 0 var(--space-5) var(--space-5); }
.prayer__text { font-family: var(--font-body); font-size: var(--type-body-l); line-height: 1.7; color: var(--sanctum-bone-soft); white-space: pre-line; }
.prayer__source { margin-top: var(--space-3); color: var(--sanctum-bone-quiet); font-size: var(--type-body-s); font-style: italic; }

/* ============================================================================
   VISUAL OVERHAUL 2026-06-02 — sacred art direction. Adds the Caravaggio
   imagery layer (SignIn entrance + Today hero), gold chrome, and the depth the
   token system always supported but wasn't using. Append-only; later rules
   intentionally override earlier flat defaults via the cascade.
   ============================================================================ */

/* App-wide depth — a faint warm vignette so screens read as LIT SPACE, not flat black. */
.app-screens {
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(255, 212, 0, 0.055), transparent 55%),
    radial-gradient(150% 100% at 50% 118%, rgba(110, 27, 31, 0.10), transparent 60%),
    var(--sanctum-surface-base);
}

/* Header — gold Cinzel wordmark + a stronger gold hairline beneath. */
.app-header__title { color: var(--sanctum-gold); letter-spacing: 0.30em; font-weight: 700; }
.app-header { border-bottom-color: rgba(255, 212, 0, 0.22); }

/* Cards lift off the ground — faint top-light gradient + deeper shadow. */
.app-card,
.today__lit, .today__altar, .today__prep, .today__fight, .today__examen {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.024), transparent 42%);
}
.app-card { box-shadow: var(--elev-2); }

/* ---- SignIn — a cinematic sacred entrance over a Caravaggio candle -------- */
.signin { position: relative; z-index: 1; }
.signin__bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("/assets/app/signin_bg.png") center / cover no-repeat;
}
.signin__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 12, 0.60) 0%, rgba(8, 9, 12, 0.46) 36%, rgba(8, 9, 12, 0.88) 100%);
}
.signin > *:not(.signin__bg) { position: relative; z-index: 1; }
.signin__crest {
  width: 84px; height: 84px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 212, 0, 0.5); box-shadow: var(--elev-glow-gold), var(--elev-2);
  object-fit: cover;
}
.signin__wordmark {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 12vw, 56px); line-height: 1; letter-spacing: 0.16em;
  color: var(--sanctum-bone); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.75);
  margin-top: var(--space-3);
}
.signin__tagline { margin-top: var(--space-4); letter-spacing: 0.42em; color: var(--sanctum-gold); }
.signin .app-input { background: rgba(28, 28, 31, 0.74); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ---- Today — a hero band (dawn chapel) with the greeting overlaid --------- */
.today__hero {
  position: relative;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
  min-height: 190px; display: flex; align-items: flex-end; overflow: hidden;
  background: url("/assets/app/today_hero.png") center / cover no-repeat;
}
.today__hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.12) 0%, rgba(10, 10, 10, 0.32) 46%, rgba(10, 10, 10, 0.93) 100%);
}
.today__hero-inner { position: relative; z-index: 1; width: 100%; padding: var(--space-6) var(--space-5) var(--space-5); }
.today__hero-greeting {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--type-display); line-height: 1.08; color: var(--sanctum-bone);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}
.today__hero-date {
  margin-top: var(--space-2); color: var(--sanctum-gold-warm);
  font-family: var(--font-elevated); font-style: italic; font-size: var(--type-title-m);
}

/* ============================================================================
   FIELD-TEST FIXES 2026-06-02 (Will's S23 punch-list). Append-only; cascade wins.
   ============================================================================ */

/* (2) Home — one consistent rhythm between every card so the screen breathes
   (the cards previously mixed top + bottom margins → uneven gaps). */
.today > .today__lit,
.today > .today__altar,
.today > .today__prep,
.today > .today__fight,
.today > .today__examen { margin: 0 0 var(--space-5); }
.today .app-list { gap: var(--space-3); }
.today__section-title { margin: var(--space-8) 0 var(--space-4); }
.today__examen-reopen { margin-top: var(--space-4); }

/* Household — the native birthday picker needs more room than the old age box;
   stack the wife's name + her patron saint with a little air. */
.household__kid-sub { grid-template-columns: minmax(150px, 1fr) 1fr; }
.household .app-field input + input { margin-top: var(--space-2); }

/* Rule of Life — discipline cards (reuses the prayer-card accordion). */
.ruleoflife .rule__tag {
  font-family: var(--font-elevated); font-style: italic;
  font-size: var(--type-title-s); color: var(--sanctum-gold-warm); margin-bottom: var(--space-3);
}
.ruleoflife .rule__q {
  margin-top: var(--space-4); padding: var(--space-4);
  border-left: 2px solid var(--sanctum-gold-warm);
  background: rgba(255, 212, 0, 0.045); border-radius: var(--radius-sm);
}
.ruleoflife .rule__q .app-eyebrow { color: var(--sanctum-gold-warm); margin-bottom: var(--space-2); }
.ruleoflife .rule__q-text {
  font-family: var(--font-elevated); font-style: italic;
  font-size: var(--type-title-s); line-height: 1.4; color: var(--sanctum-bone);
}
.ruleoflife .prayer__body .app-btn { margin-top: var(--space-4); }
.ruleoflife__close { margin-top: var(--space-6); font-style: italic; text-align: center; }

/* (7) Prayerbook — category subheaders so the expanded arsenal stays scannable. */
.prayers__cat {
  margin: var(--space-6) 0 var(--space-3); color: var(--sanctum-gold-warm);
  font-size: var(--type-title-s); letter-spacing: 0.04em;
}
.prayers__cat:first-of-type { margin-top: var(--space-2); }

/* (24-26/44) Brotherhood Pass — its own bottom-tab home + native gateway. */
.brotherhood__intro { margin-bottom: var(--space-5); }
.brotherhood__intro .app-lede { margin-top: var(--space-2); }
.brotherhood__price { text-align: center; margin: var(--space-6) 0 var(--space-4); }
.brotherhood__amount { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; color: var(--sanctum-gold); line-height: 1; }
.brotherhood__price .app-muted { margin-top: var(--space-2); }
.brotherhood__manage { margin-top: var(--space-6); }
.brotherhood__note { margin-top: var(--space-3); text-align: center; font-size: var(--type-body-s); }
.brotherhood__err { margin-top: var(--space-3); }

/* (35) Three-Generation Map — daily check-in for the 90-day chain. */
.tg__keep { margin-top: var(--space-4); }
.tg__kept { margin-top: var(--space-4); color: var(--sanctum-gold); font-style: italic; }

/* (46-50) Fight Club — native battle tool. */
.fc__begin .app-btn { margin-top: var(--space-4); }
.fc__streak { margin-bottom: var(--space-4); }
.fc__sos { margin-top: var(--space-2); background: var(--sanctum-oxblood); border-color: var(--sanctum-oxblood); color: var(--sanctum-bone); }
.fc__panel { margin-top: var(--space-3); border-left: 3px solid var(--sanctum-oxblood); }
.fc__steps { margin: var(--space-3) 0 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); color: var(--sanctum-bone-soft); }
.fc__michael { margin-top: var(--space-4); font-style: italic; color: var(--sanctum-bone-quiet); font-size: var(--type-body-m); line-height: 1.6; }
.fc__fell { margin-top: var(--space-3); }
.fc__fall { margin-top: var(--space-3); }
.fc__fall .app-btn { margin-top: var(--space-4); }
.fc__plan { margin-top: var(--space-4); }
.fc__plan .app-btn { margin-top: var(--space-3); }

/* ============================================================================
   100x ELEGANCE PASS 2026-06-03 — Will: "needs a massive visual overhaul, 100x
   more elegant." Elevates type, buttons, cards, list items, inputs, headers,
   and depth — within the locked tokens (Cinzel / Cormorant / EB Garamond, gold,
   Caravaggio near-black). Append-only; cascade wins. Visual-only (no flow
   changes) so it lands safely sight-unseen on device.
   ============================================================================ */

/* Buttons become sacred, not app-generic — the single biggest lift: the
   website's Cinzel-uppercase register instead of a system sans-serif. */
.app-btn {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--type-body-m); letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.3; border-radius: var(--radius-xs);
}
.app-btn--primary {
  background: linear-gradient(180deg, #ffe04a 0%, var(--sanctum-gold) 55%, #e7c000 100%);
  color: #15140e;
  box-shadow: 0 6px 20px rgba(255, 212, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.app-btn--secondary {
  background: rgba(201, 169, 106, 0.08); color: var(--sanctum-bone);
  border: 1px solid rgba(201, 169, 106, 0.5);
}
.app-btn--ghost { color: var(--sanctum-gold-warm); }

/* Headings — finer tracking; italic emphasis renders in Cormorant gold. */
.app-h1 { letter-spacing: 0.015em; }
.app-h1 em, .app-h2 em { font-family: var(--font-elevated); font-style: italic; font-weight: 500; color: var(--sanctum-gold-warm); }
.app-eyebrow { letter-spacing: 0.3em; }

/* Section titles carry a short gold rule beneath — the website's register. */
.app-h2::after {
  content: ""; display: block; width: 36px; height: 2px; margin-top: 10px;
  background: linear-gradient(90deg, var(--sanctum-gold-warm), transparent);
}

/* Cards become vellum/stone panels: warmer ground, a faint top-light, a gold
   inner hairline, and real depth — Caravaggio, not flat UI. */
.app-card,
.today__lit, .today__altar, .today__prep, .today__fight, .today__examen,
.prayer-card, .sacr__kid, .tg__chain, .tg__gen, .fc__panel, .fc__plan, .fc__begin, .fc__fall {
  border-radius: var(--radius-lg);
  border-color: rgba(201, 169, 106, 0.16);
  box-shadow: var(--elev-2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  background-image:
    linear-gradient(180deg, rgba(201, 169, 106, 0.06), transparent 32%),
    radial-gradient(150% 130% at 0% 0%, rgba(255, 212, 0, 0.035), transparent 46%);
}

/* List items — refined: Cormorant titles, more air, gold-warm chevrons, a gold
   edge that answers the press. */
.app-list-item {
  border-radius: var(--radius-md); min-height: 60px; padding: var(--space-4) var(--space-5);
  border-color: rgba(201, 169, 106, 0.14);
  background-image: linear-gradient(180deg, rgba(201, 169, 106, 0.045), transparent 42%);
}
.app-list-item:active { border-color: rgba(201, 169, 106, 0.42); }
.app-list-item__title { font-family: var(--font-elevated); font-size: var(--type-title-m); letter-spacing: 0.01em; color: var(--sanctum-bone); }
.app-list-item__chev { color: var(--sanctum-gold-warm); opacity: 0.75; }

/* Inputs — warmer ground + a gold focus ring. */
.app-input {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(201, 169, 106, 0.22);
  background: rgba(18, 18, 21, 0.6);
}
.app-input:focus, .app-input:focus-visible {
  outline: none; border-color: var(--sanctum-gold-warm);
  box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.14);
}

/* Tab bar — a finer gold hairline, a touch of glass, Cinzel labels. */
.app-tabs {
  border-top: 1px solid rgba(201, 169, 106, 0.2);
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.app-tab__label { font-family: var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; }
.app-header__title { letter-spacing: 0.34em; }

/* Prayer/accordion toggles — Cormorant, a hair larger, more presence. */
.prayer__toggle { font-family: var(--font-elevated); font-size: var(--type-title-m); }

/* (14-19) Examination of Conscience — confession prep. */
.exm__lanes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-4); }
.exm__lane { padding: var(--space-3); border: 1px solid rgba(201,169,106,0.3); border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--type-body-s); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sanctum-bone-soft); }
.exm__lane.is-sel { border-color: var(--sanctum-gold); color: var(--sanctum-gold); background: rgba(255,212,0,0.06); }
.exm__cat { margin-bottom: var(--space-3); }
.exm__cat .app-eyebrow { margin-bottom: var(--space-2); }
.exm__prompt { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; text-align: left; padding: var(--space-3) 0; border-bottom: 1px solid var(--sanctum-line-soft); }
.exm__prompt:last-of-type { border-bottom: none; }
.exm__check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: var(--radius-xs); border: 1.5px solid rgba(201,169,106,0.5); margin-top: 3px; transition: background .15s ease, border-color .15s ease; }
.exm__prompt.is-sel .exm__check { background: var(--sanctum-gold); border-color: var(--sanctum-gold); box-shadow: inset 0 0 0 3px var(--sanctum-surface-1); }
.exm__prompt-text { font-family: var(--font-body); font-size: var(--type-body-l); line-height: 1.45; color: var(--sanctum-bone-soft); }
.exm__prompt.is-sel .exm__prompt-text { color: var(--sanctum-bone); }
.exm__own { margin-top: var(--space-3); }
.exm__since-card { margin-top: var(--space-4); }
.exm__since { margin-top: var(--space-2); }
.exm__result { margin-top: var(--space-3); }
.exm__flow .exm__say { font-family: var(--font-elevated); font-size: var(--type-title-m); line-height: 1.45; color: var(--sanctum-bone); margin: var(--space-2) 0 var(--space-4); }
.exm__flow .app-eyebrow { margin-top: var(--space-4); }
.exm__sins { margin: var(--space-2) 0 var(--space-4); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.exm__sins li { font-family: var(--font-body); color: var(--sanctum-bone-soft); line-height: 1.4; list-style: disc; }
.exm__contrition { font-style: italic; }
.exm__made { margin-top: var(--space-4); }
.exm__made-on { color: var(--sanctum-gold); font-style: italic; margin: var(--space-2) 0 var(--space-3); }

/* (20-21) Consecrations — 33-day tracker. */
.consec__choice { margin-bottom: var(--space-3); }
.consec__choice .app-btn { margin-top: var(--space-4); }
.consec__title { font-family: var(--font-display); font-size: var(--type-title-m); color: var(--sanctum-bone); line-height: 1.2; }
.consec__by { font-family: var(--font-elevated); font-style: italic; color: var(--sanctum-gold-warm); font-size: var(--type-body-s); margin: var(--space-1) 0 var(--space-3); }
.consec__today .tg__bar { margin: var(--space-3) 0; }
.consec__phase { font-family: var(--font-elevated); font-style: italic; font-size: var(--type-title-m); color: var(--sanctum-gold-warm); margin: var(--space-2) 0 var(--space-3); }
.consec__pray-h { margin-top: var(--space-4); }
.consec__pray { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.consec__pray li { font-family: var(--font-body); color: var(--sanctum-bone-soft); line-height: 1.4; list-style: disc; }
.consec__act { font-family: var(--font-elevated); font-style: italic; font-size: var(--type-body-l); line-height: 1.6; color: var(--sanctum-bone); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--sanctum-line-soft); }

/* (22-23) Sed Contra — apologetics accordion (the "clicker"). */
.sedc__claim { align-items: flex-start; color: var(--sanctum-bone); }
.sedc__claim span:first-child { flex: 1; line-height: 1.4; }
.sedc__claim .app-icon { margin-top: 4px; }
.sedc__sc { color: var(--sanctum-gold); margin-bottom: var(--space-2); }
.sedc__body { padding-top: var(--space-2); }

/* (paid) Rule of Life Builder — build + track your rule. */
.rb__disc { margin-bottom: var(--space-3); }
.rb__pick { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; }
.rb__pick-title { font-family: var(--font-display); font-size: var(--type-body-l); color: var(--sanctum-bone); }
.rb__pick-cad { font-family: var(--font-ui); font-size: var(--type-body-s); color: var(--sanctum-bone-quiet); letter-spacing: 0.04em; }
.rb__disc-line { font-family: var(--font-body); font-size: var(--type-body-m); color: var(--sanctum-bone-quiet); margin: var(--space-2) 0 var(--space-3); }
.rb__check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--radius-xs); border: 1.5px solid rgba(201,169,106,0.5); transition: background .15s ease, border-color .15s ease; }
.rb__pick.is-on .rb__check, .rb__item.is-done .rb__check { background: var(--sanctum-gold); border-color: var(--sanctum-gold); box-shadow: inset 0 0 0 4px var(--sanctum-surface-1); }
.rb__streak { margin-bottom: var(--space-4); }
.rb__check-list { display: flex; flex-direction: column; gap: var(--space-2); }
.rb__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; padding: var(--space-4); border: 1px solid rgba(201,169,106,0.14); border-radius: var(--radius-md); background: var(--sanctum-surface-1); }
.rb__item.is-done .rb__item-title { color: var(--sanctum-bone-quiet); text-decoration: line-through; }
.rb__item-body { display: flex; flex-direction: column; min-width: 0; }
.rb__item-title { font-family: var(--font-elevated); font-size: var(--type-title-m); color: var(--sanctum-bone); }
.rb__item-note { font-family: var(--font-body); font-size: var(--type-body-s); color: var(--sanctum-bone-quiet); margin-top: 2px; }
.rb__cadence { margin-top: var(--space-4); }
.rb__cadence .app-eyebrow { margin-bottom: var(--space-2); }
.rb__cad-line { font-family: var(--font-body); color: var(--sanctum-bone-soft); line-height: 1.5; }

/* (paid) Priest of the Home. */
.ph__today { margin-bottom: var(--space-4); }
.ph__today .app-lede { margin: var(--space-2) 0; }

/* Your Day — unified daily formation dashboard on Today. */
.today__day {
  background: var(--sanctum-surface-1); border: 1px solid rgba(201, 169, 106, 0.18);
  border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5);
  box-shadow: var(--elev-2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  background-image: linear-gradient(180deg, rgba(201, 169, 106, 0.06), transparent 32%);
}
.today__day .app-eyebrow { margin-bottom: var(--space-3); color: var(--sanctum-gold); }
.today__day-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; padding: var(--space-3) 0; border-bottom: 1px solid var(--sanctum-line-soft); }
.today__day-row:last-child { border-bottom: none; }
.today__day-label { font-family: var(--font-elevated); font-size: var(--type-title-m); color: var(--sanctum-bone); flex: 1; min-width: 0; }
.today__day-value { font-family: var(--font-ui); font-size: var(--type-body-s); color: var(--sanctum-bone-quiet); white-space: nowrap; }
.today__day-status { width: 16px; text-align: center; color: var(--sanctum-gold-warm); font-size: var(--type-body-m); flex: 0 0 auto; }
.today__day-row.is-done .today__day-value { color: var(--sanctum-gold-warm); }
.today__day-row.is-done .today__day-status { color: var(--sanctum-gold); }

/* Souls — the care of souls (intercession). */
.souls__offer { margin-bottom: var(--space-4); }
.souls__prayer { font-family: var(--font-elevated); font-style: italic; font-size: var(--type-title-m); line-height: 1.5; color: var(--sanctum-bone); margin: var(--space-2) 0; }
.souls__card { margin-bottom: var(--space-3); }
.souls__name { font-family: var(--font-display); font-size: var(--type-title-m); color: var(--sanctum-bone); }
.souls__sit { font-family: var(--font-ui); font-size: var(--type-body-s); color: var(--sanctum-gold-warm); letter-spacing: 0.04em; margin: 2px 0 var(--space-3); }
.souls__action { font-family: var(--font-body); font-size: var(--type-body-l); line-height: 1.55; color: var(--sanctum-bone-soft); }
.souls__patron { font-family: var(--font-elevated); font-style: italic; color: var(--sanctum-bone-quiet); margin-top: var(--space-2); }
.souls__remove { font-family: var(--font-ui); font-size: var(--type-body-s); color: var(--sanctum-bone-quiet); margin-top: var(--space-3); text-decoration: underline; }
.souls__add { margin-top: var(--space-4); }

/* FUNCTIONAL FIX 2026-06-03 — native form controls were rendering black-on-black
   (Will: "the date pickers on the calendars, you can't see the numbers, it's all
   black"). color-scheme: dark flips the native date-picker popup, the in-field
   date text, and <select> dropdowns to light-on-dark so the numbers are legible. */
:root { color-scheme: dark; }
.app-input { color-scheme: dark; color: var(--sanctum-bone); }
input[type="date"].app-input, input[type="time"].app-input, select.app-input { color: var(--sanctum-bone); }
input[type="date"].app-input::-webkit-calendar-picker-indicator,
input[type="time"].app-input::-webkit-calendar-picker-indicator {
  filter: invert(0.8) sepia(0.5) saturate(2) hue-rotate(5deg); opacity: 0.85; cursor: pointer;
}

/* ============================================================================
   PRECISION POLISH 2026-06-03 — final pass. High-confidence, layout-safe
   refinements (the aesthetic is Will's on-device call — harness can't shoot the
   SPA). Append-only; cascade wins.
   ============================================================================ */

/* Tab bar — backdrop-filter blur is janky/inconsistent in Android WebView; a
   solid premium bar with a gold hairline + a soft top-shadow lift is crisper
   and renders identically everywhere. */
.app-tabs {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: linear-gradient(180deg, rgba(13, 13, 15, 0.97) 0%, var(--sanctum-surface-base) 100%);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45);
  border-top: 1px solid rgba(201, 169, 106, 0.22);
}
.signin .app-input { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20, 20, 23, 0.88); }
.app-tab__icon { transition: transform var(--motion-utility) var(--ease-spring); }
.app-tab.is-active .app-tab__icon { transform: translateY(-1px) scale(1.04); }

/* Cards + list rows — a crisper, more deliberate press. */
.app-card { transition: transform var(--motion-instant) var(--ease-utility); }
.prayer-card:active, .app-list-item:active, .rb__item:active, .exm__prompt:active, .today__day-row:active { transform: scale(0.992); }

/* Headings — optical breathing room on the big greeting; consistent head rhythm. */
.today__hero-greeting { line-height: 1.1; }
.prayers__head, .examen-screen__head, .brotherhood__intro, .sacr__head, .tg__head { margin-bottom: var(--space-5); }
.app-lede { letter-spacing: 0.005em; }

/* Spinner — gold, thinner, more refined. */
.app-spinner { border-width: 2px; border-top-color: var(--sanctum-gold); }

/* Back button — a touch more presence + a clean press. */
.praywife__back { transition: opacity var(--motion-utility) var(--ease-utility); }
.praywife__back:active { opacity: 0.6; }

/* ============================================================================
   FINAL ELEVATION 2026-06-03 — implemented (inspection-grounded, not deferred).
   The editorial register the website carries, enforced across every app screen.
   ============================================================================ */

/* Every screen head opens with the website's mark: a short gold rule beneath the
   title. One considered, premium register on every page. */
.prayers__head .app-h1::after,
.examen-screen__head .app-h1::after,
.onboard__q .app-h2::after,
.household__top .app-h1::after,
.sacr__head .app-h1::after,
.tg__head .app-h1::after,
.vault__head .app-h1::after,
.brotherhood__intro .app-h1::after,
.more__intro .app-h1::after {
  content: ""; display: block; width: 44px; height: 2px; margin-top: var(--space-3);
  background: linear-gradient(90deg, var(--sanctum-gold), var(--sanctum-gold-warm) 60%, transparent);
}

/* "Your Day" — the daily OS dashboard is the centerpiece of Today: a gold top
   edge + a touch more presence so it reads as the command panel it is. */
.today__day {
  border-top: 2px solid var(--sanctum-gold); padding: var(--space-6) var(--space-5) var(--space-5);
  box-shadow: var(--elev-3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.today__day .app-eyebrow { letter-spacing: 0.34em; }
.today__day-label { transition: color var(--motion-utility) var(--ease-utility); }
.today__day-row:active .today__day-label { color: var(--sanctum-gold); }

/* Hero — a deeper, more cinematic gradient so the greeting sits in lit oil, and
   the date reads gold. */
.today__hero { min-height: 208px; }
.today__hero::before {
  background: linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0.28) 42%, rgba(10,10,10,0.78) 78%, rgba(10,10,10,0.96) 100%);
}
.today__hero-greeting { font-size: clamp(30px, 7vw, 36px); }

/* More — the account screen, lifted: the membership badge as a gold seal. */
.more__account { background-image: linear-gradient(180deg, rgba(255,212,0,0.05), transparent 50%); }
.more__badge { box-shadow: var(--elev-glow-gold); border-color: rgba(255,212,0,0.4); }

/* Tool/screen ledes — consistent measure + breathing room. */
.app-lede { max-width: 38rem; }

/* Inputs — a hair taller for a more deliberate, premium touch target. */
.app-input { min-height: 48px; }
textarea.app-input { min-height: auto; }

/* ============================================================================
   ATMOSPHERE PASS 2026-06-03 — the Caravaggio "lit oil" register, deepened.
   Layout-safe property changes only (warmth, depth, gold light), so it lands
   safely sight-unseen and reads as lit space in oil, never flat UI.
   ============================================================================ */

/* App-wide: a warmer, deeper field of light — gold from above, oxblood from
   below — so every screen sits inside a painting, not on a black slab. */
.app-screens {
  background:
    radial-gradient(150% 62% at 50% -6%, rgba(255, 212, 0, 0.075), transparent 52%),
    radial-gradient(130% 52% at 50% 106%, rgba(110, 27, 31, 0.15), transparent 62%),
    var(--sanctum-surface-base);
}

/* Cards — a warmer stone base + a finer gold rim so they catch the light. */
.app-card, .prayer-card,
.today__lit, .today__altar, .today__prep, .today__fight, .today__examen, .today__day {
  background-color: #131317;
  border-color: rgba(201, 169, 106, 0.2);
}

/* The greeting — a breath of gold light behind it for depth. */
.today__hero-greeting { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9), 0 0 44px rgba(255, 212, 0, 0.10); }

/* Primary buttons — a richer, three-dimensional gold (top sheen + warm under-shade). */
.app-btn--primary {
  box-shadow: 0 8px 22px rgba(255, 212, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 7px rgba(120, 90, 0, 0.30);
}

/* Eyebrows + the gold rules — a touch more luminous. */
.app-eyebrow { color: #d4b774; }
.app-h2::after, .prayers__head .app-h1::after { box-shadow: 0 0 10px rgba(255, 212, 0, 0.25); }

/* Latin / phase lines (short italic Cormorant) — warmer gold, the manuscript register. */
.rn-latin, .consec__phase { color: #cbae74; }