:root {
  --ink: #10211f;
  --muted: #5d6f6a;
  --line: #dbe7e2;
  --paper: #fbfdfb;
  --panel: #ffffff;
  --soft: #eef8f2;
  --teal: #08756f;
  --teal-strong: #045d58;
  --green: #247a45;
  --mint: #bfead2;
  --gold: #d7b75f;
  --rose: #b84b62;
  --shadow: 0 18px 48px rgba(16, 33, 31, 0.12);
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(191, 234, 210, 0.55), transparent 28rem),
    linear-gradient(135deg, #fbfdfb 0%, #f4fbf7 58%, #edf8f6 100%);
  color: var(--ink);
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

textarea,
input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0.75rem 0.85rem;
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.app-shell {
  display: grid;
  grid-template-columns: 18.5rem minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.82);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, var(--teal), var(--green));
  font-size: 1.5rem;
  font-weight: 900;
  box-shadow: var(--shadow);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 1.35rem;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(1.4rem, 2vw, 2rem);
}

h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.65rem);
}

.eyebrow {
  color: var(--teal-strong);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: 0.35rem;
}

.nav-item {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  text-align: left;
}

.nav-item:hover,
.nav-item.active {
  background: var(--soft);
  color: var(--teal-strong);
}

.nav-group {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.nav-section-label {
  padding: 0.65rem 0.9rem 0.15rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.9rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group summary::after {
  content: "v";
  color: var(--blue);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
}

.nav-group[open] summary::after {
  content: "^";
}

.nav-item.nested {
  padding-left: 2.2rem;
  font-size: 0.96rem;
}

.saint-card,
.module-card,
.word-card,
.assignment-card,
.compass-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 28px rgba(16, 33, 31, 0.07);
}

.saint-card {
  margin-top: auto;
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}

.saint-card p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.5;
}

main {
  min-width: 0;
  padding: 1.25rem;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 0.15rem;
}

body[data-view="roadmap"] .topbar {
  display: none;
}

.topbar-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.primary,
.secondary,
.icon-button {
  min-height: 2.65rem;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font-weight: 900;
}

.primary {
  background: var(--teal);
  color: #fff;
}

.primary:hover {
  background: var(--teal-strong);
}

.secondary,
.icon-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.action-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
}

.action-icon-button > span:last-child {
  min-width: 0;
}

.button-icon {
  display: inline-block;
  width: 1.08em;
  height: 1.08em;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.96;
  -webkit-mask: var(--button-icon) center / contain no-repeat;
  mask: var(--button-icon) center / contain no-repeat;
}

.button-icon-guardrails {
  --button-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 5 6v5.5c0 4.4 2.8 7.6 7 9.5 4.2-1.9 7-5.1 7-9.5V6l-7-3Z'/%3E%3Cpath d='m8.8 12 2.1 2.1 4.4-5'/%3E%3C/svg%3E");
}

.button-icon-journey {
  --button-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19c3-5.6 6.4-8.1 10.4-7.5 2.3.4 4.1-.6 5.6-3.5'/%3E%3Cpath d='M5 19h3'/%3E%3Cpath d='M16 5l.7 1.7L18.5 7l-1.8.7L16 9.5l-.7-1.8L13.5 7l1.8-.3L16 5Z'/%3E%3Ccircle cx='6' cy='17' r='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E");
}

body[data-view="today"] #generateBtn.action-icon-button::before {
  content: none !important;
  display: none !important;
}

.full {
  width: 100%;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.today-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  gap: 1rem;
}

/* TeoyubeWorld row height alignment */
body[data-view="today"] .today-integrations {
  align-items: stretch;
}

body[data-view="today"] .teoyube-promise-panel,
body[data-view="today"] .clients-promise-card {
  height: 19rem;
  min-height: 19rem;
}

body[data-view="today"] .teoyube-promise-panel {
  display: grid;
}

body[data-view="today"] .feed-video-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 12rem;
}

body[data-view="today"] .feed-video-title img {
  width: 3rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(0, 63, 49, 0.13);
}

/* Final requested fixes: keep TeoyubeWorld play button green and show the full Purpose Fulfilled banner. */
body[data-view="today"] .promise-video-play {
  background: linear-gradient(135deg, #006b52, #0f9f68) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 63, 49, 0.3) !important;
}

body[data-view="today"] .promise-video-thumbnail.promise-youtube-frame::after {
  content: none !important;
}

body[data-view="today"] .promise-video-thumbnail.promise-youtube-frame iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 12.2rem;
  border: 0;
  display: block;
}

body[data-view="today"] .promise-embed-play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3.9rem;
  height: 3.9rem;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: linear-gradient(135deg, #006b52, #0f9f68) !important;
  color: #ffffff !important;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 14px 34px rgba(0, 63, 49, 0.36);
}

body[data-view="today"] .promise-embed-play-overlay span {
  transform: translateX(0.08rem);
  font-size: 1.25rem;
  line-height: 1;
}

body[data-view="today"] .today-premium-shell .slide-artwork.banner-art.slide-purpose-fulfilled img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #004333;
}

body[data-view="today"] .promise-movie-card,
body[data-view="today"] .clients-promise-card {
  height: 100%;
}

body[data-view="today"] .promise-movie-detail {
  min-height: 0;
}

body[data-view="today"] .promise-video-thumbnail,
body[data-view="today"] .promise-video-thumbnail img {
  min-height: 13.1rem;
}

body[data-view="today"] .clients-table-wrap {
  max-height: 14.75rem;
  overflow-y: auto;
}

@media (max-width: 900px) {
  body[data-view="today"] .teoyube-promise-panel,
  body[data-view="today"] .clients-promise-card {
    height: auto;
    min-height: 19rem;
  }
}

/* Final Roadmap corrections: shared sidebar, panel badges, and continuous Phase 02 carousel */
body[data-view="roadmap"] .app-shell {
  display: grid;
  grid-template-columns: 16.25rem minmax(0, 1fr);
  min-height: 100vh;
  background: #f5faf8;
}

body[data-view="roadmap"] .sidebar {
  display: flex;
}

body[data-view="roadmap"] main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.55rem 2rem 2rem;
}

body[data-view="roadmap"] .roadmap-dashboard-header {
  padding-top: 0.25rem;
}

body[data-view="roadmap"] .roadmap-system-panel {
  padding-left: 4.65rem;
}

body[data-view="roadmap"] .roadmap-system-panel::before {
  content: "♛";
  position: absolute;
  left: 1.35rem;
  top: 1.5rem;
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #006f54, #008864);
  color: #f7d56f;
  font-size: 1.55rem;
  font-weight: 1000;
  box-shadow: 0 13px 28px rgba(0, 111, 84, 0.18);
}

body[data-view="roadmap"] .roadmap-system-panel .roadmap-module-grid {
  grid-column: 1 / -1;
  margin-left: -3.3rem;
}

body[data-view="roadmap"] .roadmap-module-card,
body[data-view="roadmap"] .roadmap-tech-card {
  position: relative;
  padding-left: 3.85rem !important;
}

body[data-view="roadmap"] .roadmap-card-icon {
  position: absolute;
  left: 0.9rem;
  top: 0.95rem;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 8px;
  background: #e1f4e9;
  color: var(--roadmap-green, #006f54);
  font-size: 1.25rem;
  font-weight: 1000;
  box-shadow: 0 8px 18px rgba(0, 111, 84, 0.12);
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-view="roadmap"] .roadmap-tech-card {
  min-height: 5.55rem !important;
}

body[data-view="roadmap"] .roadmap-journey-phase {
  overflow: hidden;
}

body[data-view="roadmap"] .teoyube-ad-carousel {
  overflow: hidden;
}

body[data-view="roadmap"] .ad-carousel-viewport {
  overflow: hidden;
  padding: 0.65rem 0.25rem 2rem;
}

body[data-view="roadmap"] .ad-carousel-track {
  width: max-content;
  gap: 1.15rem;
  transform: none;
  animation: roadmapJourneyMarquee 48s linear infinite;
  will-change: transform;
}

body[data-view="roadmap"] .ad-carousel-track:hover,
body[data-view="roadmap"] .teoyube-ad-card:hover ~ .teoyube-ad-card,
body[data-view="roadmap"] .teoyube-ad-carousel:hover .ad-carousel-track {
  animation-play-state: paused;
}

body[data-view="roadmap"] .teoyube-ad-card {
  flex: 0 0 clamp(10.5rem, 11.2vw, 13rem);
  min-width: clamp(10.5rem, 11.2vw, 13rem);
}

body[data-view="roadmap"] .teoyube-ad-card.active {
  flex: 0 0 clamp(12.4rem, 13.3vw, 15rem);
  min-width: clamp(12.4rem, 13.3vw, 15rem);
}

@keyframes roadmapJourneyMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="roadmap"] .ad-carousel-track {
    animation: none;
  }
}

@media (max-width: 1200px) {
  body[data-view="roadmap"] .roadmap-system-panel .roadmap-module-grid {
    margin-left: 0;
  }
}

@media (max-width: 980px) {
  body[data-view="roadmap"] .app-shell {
    grid-template-columns: 1fr;
  }
}

/* Shared sidebar shell: keep the Today navigation style consistent on every page */
body[data-view] .app-shell {
  grid-template-columns: 16.25rem minmax(0, 1fr);
  background: #f5faf8;
}

body[data-view] .sidebar {
  gap: 1.2rem;
  margin: 0.3rem;
  padding: 1.15rem;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--today-shadow, 0 20px 58px rgba(20, 54, 46, 0.12));
  backdrop-filter: blur(18px);
}

body[data-view] .brand-lockup {
  align-items: center;
  gap: 0.78rem;
  padding: 0.7rem 0.45rem 1rem;
}

body[data-view] .brand-lockup > div::after {
  content: none;
}

body[data-view] .brand-mark {
  position: relative;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background: linear-gradient(145deg, #005d4c, #00785d);
  color: #f5d36a;
  box-shadow: 0 10px 22px rgba(0, 86, 67, 0.18);
}

body[data-view] .brand-mark::before {
  content: "T";
  color: #f5d36a;
  font-size: 1.45rem;
  font-weight: 1000;
  line-height: 1;
}

body[data-view] .brand-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.67rem;
  width: 0.56rem;
  height: 0.18rem;
  border-radius: 999px;
  background: #f5d36a;
  transform: translateX(-50%);
}

body[data-view] .brand-lockup h1 {
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
}

body[data-view] .brand-subtitle {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

body[data-view] .nav-list {
  gap: 0.28rem;
}

body[data-view] .nav-item {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-height: 2.8rem;
  padding: 0.72rem 0.86rem;
  border-radius: 8px;
  color: #263c38;
  font-size: 0.9rem;
  font-weight: 850;
}

body[data-view] .nav-item::before {
  display: inline-grid;
  width: 1.08rem;
  place-items: center;
  color: #005d4c;
  font-size: 1.12em;
  line-height: 1;
}

body[data-view] .nav-item[data-view="today"]::before {
  content: "⌂";
}

body[data-view] .nav-item[data-view="roadmap"]::before {
  content: "♧";
}

body[data-view] .nav-item[data-view="search"]::before {
  content: "⌕";
}

body[data-view] .nav-item[data-view="canon"]::before {
  content: "✥";
}

body[data-view] .nav-item[data-view="table"]::before,
body[data-view] .nav-item[data-view="teoyube-tables"]::before {
  content: "▦";
}

body[data-view] .nav-item[data-view="calling"]::before {
  content: "◎";
}

body[data-view] .nav-item[data-view="book"]::before {
  content: "▣";
}

body[data-view] .nav-item[data-view="lexicon"]::before {
  content: "◇";
}

body[data-view] .nav-item[data-view="testimony"]::before {
  content: "♡";
}

body[data-view] .nav-item[data-view="guide"]::before {
  content: "⌬";
}

body[data-view] .nav-item[data-view="ui-elements"]::before {
  content: "▣";
}

body[data-view] .nav-item:hover,
body[data-view] .nav-item.active {
  background: #eef8f2;
  color: #005d4c;
}

body[data-view] .nav-section-label {
  padding: 1rem 0.9rem 0.15rem;
  color: var(--muted);
  font-size: 0.68rem;
}

body[data-view] .nav-group summary {
  color: var(--muted);
  font-size: 0.68rem;
}

body[data-view] .saint-card {
  gap: 0.9rem;
  padding: 1.05rem;
  border-radius: 10px;
}

body[data-view] .saint-profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
}

body[data-view] .saint-avatar {
  display: block;
  width: 3.2rem;
  aspect-ratio: 1;
  grid-row: span 2;
  border-radius: 999px;
  background:
    radial-gradient(circle at 48% 32%, rgba(255, 248, 218, 0.94), rgba(216, 138, 72, 0.48) 36%, transparent 37%),
    linear-gradient(135deg, #8f5527, #f5d49b);
  box-shadow: inset 0 0 0 3px #fff, 0 8px 20px rgba(16, 33, 31, 0.12);
}

body[data-view] .active-badge {
  grid-column: 2;
  justify-self: start;
  margin-top: -0.25rem;
  padding: 0.25rem 0.55rem;
}

body[data-view] #sidebarCalling {
  margin-top: 0.2rem;
  max-width: 11rem;
  line-height: 1.45;
}

body[data-view] #openAssessment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.65rem;
  border-color: rgba(8, 117, 111, 0.18);
  color: var(--teal-strong);
  font-size: 0.82rem;
}

body[data-view] #openAssessment::after {
  content: "→";
  font-size: 1.15rem;
}

@media (max-width: 980px) {
  body[data-view] .app-shell {
    grid-template-columns: 1fr;
  }

  body[data-view] .sidebar {
    position: static;
    height: auto;
  }
}

/* Screenshot-aligned premium Roadmap dashboard */
body[data-view="roadmap"] {
  --roadmap-bg: #f4faf7;
  --roadmap-card: rgba(255, 255, 255, 0.86);
  --roadmap-line: rgba(14, 78, 63, 0.11);
  --roadmap-green: #006f54;
  --roadmap-soft: #eaf7ef;
  --roadmap-shadow: 0 18px 48px rgba(25, 61, 51, 0.1);
  background:
    radial-gradient(circle at 20% 0%, rgba(210, 241, 224, 0.8), transparent 24rem),
    radial-gradient(circle at 95% 35%, rgba(245, 234, 190, 0.35), transparent 28rem),
    linear-gradient(135deg, #fbfdfb 0%, #f3faf6 55%, #edf7f1 100%);
}

body[data-view="roadmap"] .app-shell {
  display: block;
  min-height: 100vh;
  background: transparent;
}

body[data-view="roadmap"] .sidebar,
body[data-view="roadmap"] .topbar {
  display: none;
}

body[data-view="roadmap"] main {
  width: min(100%, 1920px);
  margin: 0 auto;
  padding: 1.55rem 2rem 2rem;
}

body[data-view="roadmap"] .roadmap-dashboard {
  gap: 1.05rem;
}

body[data-view="roadmap"] .roadmap-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0 0.15rem 0.4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-view="roadmap"] .roadmap-back {
  min-height: auto;
  margin-bottom: 0.45rem;
  padding: 0;
  background: transparent;
  color: var(--roadmap-green);
  font-size: 0.82rem;
  font-weight: 1000;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body[data-view="roadmap"] .roadmap-dashboard-header h3 {
  font-size: clamp(2rem, 3.1vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 0.94;
}

body[data-view="roadmap"] .roadmap-dashboard-header p:not(.eyebrow) {
  margin-top: 0.65rem;
  max-width: 64rem;
  color: #38514b;
  font-size: 1.02rem;
}

body[data-view="roadmap"] .roadmap-dashboard-actions {
  align-items: center;
  gap: 1rem;
}

body[data-view="roadmap"] .roadmap-dashboard-actions .secondary,
body[data-view="roadmap"] .roadmap-dashboard-actions .primary {
  min-height: 3.35rem;
  border-radius: 10px;
  padding: 0.85rem 1.55rem;
  box-shadow: var(--roadmap-shadow);
}

body[data-view="roadmap"] .roadmap-dashboard-actions .secondary {
  border: 1px solid var(--roadmap-line);
  background: rgba(255, 255, 255, 0.92);
  color: #004f3f;
}

body[data-view="roadmap"] .roadmap-dashboard-actions .secondary::before {
  content: "↓";
  margin-right: 0.55rem;
  color: var(--roadmap-green);
}

body[data-view="roadmap"] .roadmap-dashboard-actions .primary {
  background: linear-gradient(135deg, #007456, #004a3d);
  color: #fff;
}

body[data-view="roadmap"] .roadmap-dashboard-actions .primary::before {
  content: "✣";
  margin-right: 0.55rem;
  color: #f4d982;
}

body[data-view="roadmap"] .roadmap-icon-action {
  position: relative;
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border: 1px solid var(--roadmap-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #0b1d1a;
  font-size: 1.45rem;
  box-shadow: 0 12px 28px rgba(25, 61, 51, 0.08);
}

body[data-view="roadmap"] .roadmap-icon-action span {
  position: absolute;
  right: 0.15rem;
  top: 0.05rem;
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border-radius: 999px;
  background: #06945f;
  color: #fff;
  font-size: 0.62rem;
}

body[data-view="roadmap"] .roadmap-avatar {
  width: 3.4rem;
  height: 3.4rem;
  border: 3px solid #fff;
  border-radius: 999px;
  background: url("public/images/roadmap/roadmap-hero-avatar.png") center / cover no-repeat;
  box-shadow:
    0 12px 24px rgba(25, 61, 51, 0.16),
    0 0 0 1px rgba(0, 111, 84, 0.08);
}

body[data-view="roadmap"] .roadmap-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.1rem;
}

body[data-view="roadmap"] .roadmap-kpi-card,
body[data-view="roadmap"] .roadmap-phase,
body[data-view="roadmap"] .roadmap-subphase {
  border: 1px solid var(--roadmap-line);
  border-radius: 14px;
  background: var(--roadmap-card);
  box-shadow: var(--roadmap-shadow);
  backdrop-filter: blur(18px);
}

body[data-view="roadmap"] .roadmap-kpi-card {
  min-height: 7.85rem;
  padding: 1.45rem 1.55rem;
}

body[data-view="roadmap"] .roadmap-kpi-card span {
  color: #006047;
  font-size: 0.72rem;
  font-weight: 1000;
}

body[data-view="roadmap"] .roadmap-kpi-card strong {
  margin: 0.55rem 0 0.35rem;
  color: #071627;
  font-size: 2.2rem;
}

body[data-view="roadmap"] .roadmap-kpi-card small {
  color: #53615e;
  font-weight: 800;
}

body[data-view="roadmap"] .roadmap-kpi-icon {
  display: grid;
  width: 3.45rem;
  height: 3.45rem;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: #dff7e8;
  box-shadow: 0 12px 24px rgba(0, 111, 84, 0.16);
}

body[data-view="roadmap"] .roadmap-kpi-icon::before {
  color: var(--roadmap-green);
  font-size: 1.8rem;
  font-style: normal;
}

body[data-view="roadmap"] .roadmap-kpi-icon.layers::before {
  content: "▦";
}

body[data-view="roadmap"] .roadmap-kpi-icon.grid::before {
  content: "◇";
}

body[data-view="roadmap"] .roadmap-kpi-icon.target::before {
  content: "◎";
}

body[data-view="roadmap"] .roadmap-kpi-icon.document::before {
  content: "▤";
}

body[data-view="roadmap"] .roadmap-kpi-icon.puzzle::before {
  content: "✣";
}

body[data-view="roadmap"] .roadmap-kpi-icon.progress {
  border-radius: 999px;
  background: conic-gradient(#00785d 0 68%, #e4f1ea 68% 100%);
}

body[data-view="roadmap"] .roadmap-command-grid,
body[data-view="roadmap"] .roadmap-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.05rem;
}

body[data-view="roadmap"] .roadmap-phase {
  position: relative;
  padding: 1.35rem 1.45rem;
}

body[data-view="roadmap"] .roadmap-panel-menu {
  position: absolute;
  right: 1.2rem;
  top: 1rem;
  color: #0b1d1a;
  font-size: 1.2rem;
  font-weight: 1000;
}

body[data-view="roadmap"] .roadmap-phase h3 {
  color: #0b1526;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

body[data-view="roadmap"] .roadmap-phase > p:not(.eyebrow),
body[data-view="roadmap"] .roadmap-system-panel #tkosSummary,
body[data-view="roadmap"] .roadmap-ministry-panel > p:not(.eyebrow) {
  color: #576864;
  font-size: 0.86rem;
}

body[data-view="roadmap"] .roadmap-system-panel .roadmap-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.15rem;
}

body[data-view="roadmap"] .roadmap-dashboard .canon-card {
  min-height: 6.6rem;
  padding: 1rem;
  border: 1px solid var(--roadmap-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 28px rgba(25, 61, 51, 0.06);
}

body[data-view="roadmap"] .roadmap-reference-card {
  display: none;
}

body[data-view="roadmap"] .roadmap-dashboard .canon-card h3 {
  font-size: 0.92rem;
}

body[data-view="roadmap"] .roadmap-dashboard .canon-card p {
  font-size: 0.76rem;
}

body[data-view="roadmap"] .roadmap-card-metric {
  float: right;
  color: #092820;
  font-size: 0.78rem !important;
  font-weight: 1000;
}

body[data-view="roadmap"] progress {
  height: 0.42rem;
}

body[data-view="roadmap"] progress::-webkit-progress-bar {
  background: #d8ebde;
}

body[data-view="roadmap"] progress::-webkit-progress-value {
  background: linear-gradient(90deg, #007e5f, #1aa566);
}

body[data-view="roadmap"] .scripture-pill,
body[data-view="roadmap"] .status-pill.active {
  border-radius: 999px;
  background: #dff3e8;
  color: #005f49;
  padding: 0.36rem 0.58rem;
  font-size: 0.7rem;
  font-weight: 1000;
}

body[data-view="roadmap"] .roadmap-north-layout {
  grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 1fr);
  gap: 1.15rem;
  margin-top: 1rem;
}

body[data-view="roadmap"] .roadmap-north-layout .roadmap-compass-card {
  min-height: 14rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-view="roadmap"] .canon-card .roadmap-compass {
  width: 13.2rem;
  min-height: 13.2rem;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 30%, transparent 31%),
    conic-gradient(from 45deg, rgba(226, 194, 99, 0.32), rgba(188, 234, 203, 0.65), rgba(220, 214, 255, 0.42), rgba(246, 205, 111, 0.44), rgba(226, 194, 99, 0.32));
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.52), 0 16px 38px rgba(25, 61, 51, 0.08);
}

body[data-view="roadmap"] .roadmap-compass .compass-point,
body[data-view="roadmap"] .roadmap-compass .compass-core {
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.56);
  color: #263c38;
}

body[data-view="roadmap"] .roadmap-compass .compass-core {
  width: 5.2rem;
  height: 5.2rem;
  text-transform: uppercase;
}

body[data-view="roadmap"] .roadmap-compass .compass-core strong {
  font-size: 0.78rem;
}

body[data-view="roadmap"] .roadmap-calling-result {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-view="roadmap"] .roadmap-calling-result h3 {
  text-align: left !important;
  font-size: 0.92rem !important;
}

body[data-view="roadmap"] .roadmap-north-layout .calling-facts div {
  grid-template-columns: 11rem minmax(0, 1fr);
  min-height: 2rem;
  padding: 0.48rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(221, 243, 233, 0.78);
}

body[data-view="roadmap"] .roadmap-north-layout .calling-facts dt,
body[data-view="roadmap"] .roadmap-north-layout .calling-facts dd {
  font-size: 0.72rem;
}

body[data-view="roadmap"] .roadmap-journey-phase {
  overflow: hidden;
}

body[data-view="roadmap"] .roadmap-journey-phase > h3 {
  margin-bottom: -0.2rem;
}

body[data-view="roadmap"] .teoyube-ad-carousel {
  position: relative;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-view="roadmap"] .ad-carousel-head {
  position: absolute;
  right: 0;
  top: -3.3rem;
}

body[data-view="roadmap"] .ad-carousel-head > div:first-child {
  display: none;
}

body[data-view="roadmap"] .ad-arrow {
  width: 2.65rem;
  height: 2.65rem;
  background: rgba(255, 255, 255, 0.92);
}

body[data-view="roadmap"] .ad-carousel-viewport {
  padding: 0.4rem 0.25rem 1.95rem;
}

body[data-view="roadmap"] .ad-carousel-track {
  gap: 1.15rem;
}

body[data-view="roadmap"] .teoyube-ad-card {
  flex-basis: clamp(10.5rem, 11.2vw, 13rem);
  min-width: clamp(10.5rem, 11.2vw, 13rem);
  border-radius: 11px;
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 12px 26px rgba(25, 61, 51, 0.12);
}

body[data-view="roadmap"] .teoyube-ad-card.active {
  flex-basis: clamp(12.4rem, 13.3vw, 15rem);
  min-width: clamp(12.4rem, 13.3vw, 15rem);
  transform: translateY(-0.25rem) scale(1.05);
  box-shadow: 0 18px 44px rgba(0, 111, 84, 0.26);
}

body[data-view="roadmap"] .teoyube-ad-card.active .ad-art {
  outline: 3px solid #48b567;
  outline-offset: -3px;
}

body[data-view="roadmap"] .ad-art {
  aspect-ratio: 330 / 375;
  border-radius: 11px 11px 0 0;
}

body[data-view="roadmap"] .ad-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.1rem;
  padding: 0.65rem 0.75rem;
  background: #fff;
}

body[data-view="roadmap"] .ad-card-body .sequence-row,
body[data-view="roadmap"] .ad-stars,
body[data-view="roadmap"] .ad-card-actions .secondary {
  display: none;
}

body[data-view="roadmap"] .ad-card-body::before {
  content: "Jeremiah 29:11 ↗";
  border-radius: 999px;
  background: #f7faf8;
  color: #51635d;
  padding: 0.45rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 800;
}

body[data-view="roadmap"] .ad-icon-button {
  width: 2.2rem;
  height: 2.2rem;
  border-color: #d9eee3;
  color: var(--roadmap-green);
  box-shadow: none;
}

body[data-view="roadmap"] .teoyube-ad-carousel::after {
  content: "Add to Journey⌄";
  position: absolute;
  left: 50%;
  bottom: -1.05rem;
  z-index: 3;
  transform: translateX(-50%);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--roadmap-shadow);
  color: var(--roadmap-green);
  padding: 0.85rem 2.25rem;
  font-weight: 1000;
}

body[data-view="roadmap"] .ad-carousel-dots {
  display: none;
}

body[data-view="roadmap"] .roadmap-bottom-grid {
  align-items: stretch;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid {
  grid-template-columns: 1fr 1.55fr 1fr;
  gap: 0.85rem;
  margin-top: 1rem;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-compact-details {
  display: none;
}

body[data-view="roadmap"] .roadmap-project-widget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  align-items: center;
  min-height: 4.15rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--roadmap-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

body[data-view="roadmap"] .roadmap-project-widget-grid span {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  grid-row: span 2;
  place-items: center;
  border-radius: 8px;
  background: #e2f5ea;
  color: var(--roadmap-green);
  font-size: 1.3rem;
}

body[data-view="roadmap"] .roadmap-project-widget-grid strong {
  color: #0b1526;
  font-size: 0.84rem;
}

body[data-view="roadmap"] .roadmap-project-widget-grid small {
  color: #53615e;
  font-weight: 800;
}

body[data-view="roadmap"] .roadmap-link-button {
  justify-self: center;
  margin-top: 1rem;
  min-height: auto;
  background: transparent;
  color: var(--roadmap-green);
  font-weight: 1000;
}

body[data-view="roadmap"] .roadmap-archive .roadmap-subphase {
  display: none;
}

@media (max-width: 1200px) {
  body[data-view="roadmap"] .roadmap-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-view="roadmap"] .roadmap-command-grid,
  body[data-view="roadmap"] .roadmap-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body[data-view="roadmap"] main {
    padding: 1rem;
  }

  body[data-view="roadmap"] .roadmap-dashboard-header,
  body[data-view="roadmap"] .roadmap-dashboard-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-view="roadmap"] .roadmap-kpi-grid,
  body[data-view="roadmap"] .roadmap-system-panel .roadmap-module-grid,
  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid,
  body[data-view="roadmap"] .roadmap-project-widget-grid {
    grid-template-columns: 1fr;
  }

  body[data-view="roadmap"] .roadmap-north-layout {
    grid-template-columns: 1fr;
  }
}

/* Final carousel and Word of the Day alignment */
body[data-view="today"] .today-premium-shell .slide-artwork.banner-art img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center;
}

body[data-view="today"] .word-card {
  align-content: start !important;
  justify-content: stretch;
  padding-top: 1.15rem !important;
}

body[data-view="today"] .word-card .eyebrow {
  margin-top: 0;
  margin-bottom: 0.9rem;
}

body[data-view="today"] #dailyWord {
  margin-top: 0;
}

/* Bottom lock: TeoyubeWorld green heading character style */
body[data-view="today"] .search-promise-card h3,
body[data-view="today"] .clients-card-header h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--teal-strong);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-view="today"] .search-promise-card h3::before,
body[data-view="today"] .clients-card-header h3::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--teal-strong) !important;
  background: none !important;
  font-size: 1.05rem;
  line-height: 1;
}

body[data-view="today"] .search-promise-card h3::before {
  content: "⌕" !important;
}

body[data-view="today"] .clients-card-header h3::before {
  content: "▦" !important;
}

body[data-view="today"] .search-chip-row button::before {
  color: var(--teal-strong) !important;
}

/* Final TeoyubeWorld green heading character lock */
body[data-view="today"] .search-promise-card h3,
body[data-view="today"] .clients-card-header h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--teal-strong);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-view="today"] .search-promise-card h3::before,
body[data-view="today"] .clients-card-header h3::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--teal-strong) !important;
  background: none !important;
  font-size: 1.05rem;
  line-height: 1;
}

body[data-view="today"] .search-promise-card h3::before {
  content: "⌕" !important;
}

body[data-view="today"] .clients-card-header h3::before {
  content: "▦" !important;
}

body[data-view="today"] .search-chip-row button::before {
  color: var(--teal-strong) !important;
}

/* Final lock: TeoyubeWorld highlight and feed stay equal height */
body[data-view="today"] .teoyube-promise-panel,
body[data-view="today"] .promise-movie-card,
body[data-view="today"] .clients-promise-card {
  height: 21rem !important;
  min-height: 21rem !important;
  max-height: 21rem;
}

body[data-view="today"] .clients-table-wrap {
  max-height: 16.5rem;
}

/* TeoyubeWorld heading character style */
body[data-view="today"] .search-promise-card h3,
body[data-view="today"] .clients-card-header h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--teal-strong);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-view="today"] .search-promise-card h3::before,
body[data-view="today"] .clients-card-header h3::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--teal-strong);
}

body[data-view="today"] .search-promise-card h3::before {
  border: 0.16rem solid var(--teal-strong);
  border-radius: 999px;
  background: transparent;
  box-shadow: 0.45rem 0.45rem 0 -0.32rem var(--teal-strong);
}

body[data-view="today"] .clients-card-header h3::before {
  border-radius: 3px;
  background:
    linear-gradient(var(--teal-strong), var(--teal-strong)) 0 0 / 0.32rem 0.32rem no-repeat,
    linear-gradient(var(--teal-strong), var(--teal-strong)) 0.45rem 0 / 0.32rem 0.32rem no-repeat,
    linear-gradient(var(--teal-strong), var(--teal-strong)) 0.9rem 0 / 0.32rem 0.32rem no-repeat,
    linear-gradient(var(--teal-strong), var(--teal-strong)) 0 0.45rem / 0.32rem 0.32rem no-repeat,
    linear-gradient(var(--teal-strong), var(--teal-strong)) 0.45rem 0.45rem / 0.32rem 0.32rem no-repeat,
    linear-gradient(var(--teal-strong), var(--teal-strong)) 0.9rem 0.45rem / 0.32rem 0.32rem no-repeat;
}

body[data-view="today"] .search-chip-row button::before {
  color: var(--teal-strong) !important;
}

/* Final Word of the Day card match */
body[data-view="today"] .word-card {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 15.3rem;
  overflow: hidden;
  padding: 1.35rem 1.2rem;
  border: 1px solid rgba(219, 231, 226, 0.78);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 42px rgba(20, 54, 46, 0.08);
  isolation: isolate;
}

body[data-view="today"] .word-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 48%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.12) 100%);
}

body[data-view="today"] .word-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -2;
  width: 55%;
  height: 100%;
  background: url("public/images/ads/kingdom-wisdom.png") right bottom / cover no-repeat;
  opacity: 0.88;
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}

body[data-view="today"] .word-card .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
  color: var(--teal-strong);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.07em;
}

body[data-view="today"] .word-card .eyebrow::before {
  content: "▰";
  color: var(--teal-strong);
  font-size: 1.05rem;
}

body[data-view="today"] #dailyWord {
  margin-bottom: 0.55rem;
  color: var(--teal-strong);
  font-size: clamp(1.9rem, 2.8vw, 2.45rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

body[data-view="today"] #dailyMeaning {
  max-width: 21rem;
  color: #263f3a;
  font-size: 0.9rem;
  line-height: 1.6;
}

body[data-view="today"] #prayBtn {
  justify-self: start;
  min-width: 10.8rem;
  min-height: 2.95rem;
  margin-top: 1.25rem;
  border-radius: 8px;
  padding: 0.78rem 1rem;
  font-weight: 900;
}

body[data-view="today"] #prayBtn::after {
  content: " →";
  margin-left: 0.5rem;
  font-size: 1.05rem;
}

/* Premium Today dashboard recreation */
body[data-view="today"] {
  background:
    radial-gradient(circle at 82% 8%, rgba(191, 234, 210, 0.6), transparent 22rem),
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.95), transparent 24rem),
    linear-gradient(135deg, #f9fcfb 0%, #eef9f3 48%, #f7fbf7 100%);
}

body[data-view="today"] .app-shell {
  grid-template-columns: 17rem minmax(0, 1fr);
}

body[data-view="today"] .sidebar {
  margin: 0.35rem;
  height: calc(100vh - 0.7rem);
  overflow-y: auto;
  border: 1px solid rgba(219, 231, 226, 0.75);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 253, 249, 0.86));
  box-shadow: 0 24px 70px rgba(16, 33, 31, 0.11);
}

body[data-view="today"] .brand-mark {
  border-radius: 10px;
  background: linear-gradient(145deg, #005d4c, #0b8a63);
  font-size: 0;
}

body[data-view="today"] .brand-mark::before {
  content: "T";
  font-size: 1.4rem;
}

body[data-view="today"] .brand-lockup > div::after {
  content: "Creative Digital Ministry";
  display: block;
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

body[data-view="today"] .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.72rem;
  border-radius: 10px;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

body[data-view="today"] .nav-item::before {
  content: "◇";
  color: var(--teal-strong);
  font-size: 0.92rem;
}

body[data-view="today"] .nav-item:hover {
  transform: translateX(3px);
}

body[data-view="today"] .nav-item.active {
  background: linear-gradient(135deg, rgba(191, 234, 210, 0.58), rgba(255, 255, 255, 0.86));
  box-shadow: inset 0 0 0 1px rgba(8, 117, 111, 0.06);
}

body[data-view="today"] .saint-card {
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 246, 199, 0.4), transparent 7rem),
    rgba(255, 255, 255, 0.92);
}

body[data-view="today"] main {
  padding: clamp(1rem, 2vw, 2rem);
}

body[data-view="today"] .topbar {
  align-items: flex-start;
  margin-bottom: 1.35rem;
  padding: 0.3rem 0.15rem;
}

body[data-view="today"] #viewTitle {
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: -0.02em;
}

body[data-view="today"] .topbar-actions .primary,
body[data-view="today"] .topbar-actions .secondary,
.today-premium-shell .primary,
.today-premium-shell .secondary {
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(8, 117, 111, 0.12);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body[data-view="today"] .topbar-actions .primary:hover,
body[data-view="today"] .topbar-actions .secondary:hover,
.today-premium-shell .primary:hover,
.today-premium-shell .secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(8, 117, 111, 0.18);
}

.today-premium-shell {
  display: grid;
  gap: 1rem;
}

/* Premium Today dashboard recreation */
body[data-view="today"] {
  background:
    radial-gradient(circle at 82% 8%, rgba(191, 234, 210, 0.6), transparent 22rem),
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.95), transparent 24rem),
    linear-gradient(135deg, #f9fcfb 0%, #eef9f3 48%, #f7fbf7 100%);
}

body[data-view="today"] .app-shell {
  grid-template-columns: 17rem minmax(0, 1fr);
}

body[data-view="today"] .sidebar {
  margin: 0.35rem;
  height: calc(100vh - 0.7rem);
  overflow-y: auto;
  border: 1px solid rgba(219, 231, 226, 0.75);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 253, 249, 0.86));
  box-shadow: 0 24px 70px rgba(16, 33, 31, 0.11);
}

body[data-view="today"] .brand-mark {
  border-radius: 10px;
  background: linear-gradient(145deg, #005d4c, #0b8a63);
}

body[data-view="today"] .brand-mark::before {
  content: "♨";
}

body[data-view="today"] .brand-mark {
  font-size: 0;
}

body[data-view="today"] .brand-mark::before {
  font-size: 1.4rem;
}

body[data-view="today"] .brand-lockup > div::after {
  content: "Creative Digital Ministry";
  display: block;
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

body[data-view="today"] .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.72rem;
  border-radius: 10px;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

body[data-view="today"] .nav-item::before {
  content: "◇";
  color: var(--teal-strong);
  font-size: 0.92rem;
}

body[data-view="today"] .nav-item:hover {
  transform: translateX(3px);
}

body[data-view="today"] .nav-item.active {
  background: linear-gradient(135deg, rgba(191, 234, 210, 0.58), rgba(255, 255, 255, 0.86));
  box-shadow: inset 0 0 0 1px rgba(8, 117, 111, 0.06);
}

body[data-view="today"] .saint-card {
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 246, 199, 0.4), transparent 7rem),
    rgba(255, 255, 255, 0.92);
}

body[data-view="today"] main {
  padding: clamp(1rem, 2vw, 2rem);
}

body[data-view="today"] .topbar {
  align-items: flex-start;
  margin-bottom: 1.35rem;
  padding: 0.3rem 0.15rem;
}

body[data-view="today"] #viewTitle {
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: -0.02em;
}

body[data-view="today"] .topbar-actions .primary,
body[data-view="today"] .topbar-actions .secondary,
.today-premium-shell .primary,
.today-premium-shell .secondary {
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(8, 117, 111, 0.12);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body[data-view="today"] .topbar-actions .primary:hover,
body[data-view="today"] .topbar-actions .secondary:hover,
.today-premium-shell .primary:hover,
.today-premium-shell .secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(8, 117, 111, 0.18);
}

.today-premium-shell {
  display: grid;
  gap: 1rem;
}

.today-premium-shell .promise-carousel {
  min-height: min(42rem, 44vh);
  border-radius: 10px;
  background:
    radial-gradient(circle at 54% 30%, rgba(255, 246, 199, 0.48), transparent 18rem),
    linear-gradient(135deg, #004f3f 0%, #08756f 38%, #77aa62 100%);
  box-shadow: 0 28px 80px rgba(4, 93, 88, 0.22);
}

.today-premium-shell .carousel-viewport {
  min-height: inherit;
  padding: 0;
}

.today-premium-shell .carousel-slide {
  grid-template-columns: minmax(23rem, 0.47fr) minmax(26rem, 0.53fr);
  min-height: min(42rem, 44vh);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 0;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(0, 53, 42, 0.72), rgba(0, 68, 52, 0.22) 50%, rgba(0, 62, 50, 0.76)),
    transparent;
}

.today-premium-shell .carousel-copy {
  max-width: 34rem;
  padding-left: clamp(0.5rem, 2vw, 1rem);
}

.today-premium-shell .carousel-copy h3 {
  font-size: clamp(3rem, 5vw, 5.6rem);
  letter-spacing: -0.055em;
}

.today-premium-shell .carousel-copy p:not(.eyebrow) {
  max-width: 33rem;
  font-size: 1.05rem;
}

.today-premium-shell .slide-number {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
}

.today-premium-shell .slide-artwork {
  min-height: 100%;
  border-radius: 10px;
  opacity: 0.9;
  background: transparent;
  box-shadow: none;
}

.today-premium-shell .slide-artwork img {
  opacity: 0.98;
  filter: saturate(1.1) contrast(1.03);
}

.today-premium-shell .art-symbol {
  width: clamp(8rem, 16vw, 15rem);
  right: 32%;
  bottom: 20%;
}

.carousel-preview-rail {
  position: absolute;
  z-index: 3;
  inset: 1.4rem 1rem 1.4rem auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  width: min(48vw, 44rem);
  pointer-events: none;
}

.preview-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 18rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  padding: 0.9rem;
  background: rgba(7, 84, 67, 0.48);
  color: #fff;
  box-shadow: 0 16px 38px rgba(0, 36, 26, 0.18);
}

.preview-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.72;
}

.preview-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 54, 43, 0.08), rgba(0, 45, 35, 0.78));
}

.preview-card span,
.preview-card h4,
.preview-card p {
  position: relative;
  z-index: 1;
}

.preview-card span {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 7px;
  background: #f2f1c5;
  color: var(--teal-strong);
  font-size: 0.72rem;
  font-weight: 1000;
}

.preview-card h4 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.15;
}

.preview-card p {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  line-height: 1.35;
}

.today-insight-row {
  display: grid;
  grid-template-columns: minmax(16rem, 1.35fr) minmax(15rem, 1fr) minmax(14rem, 0.85fr) minmax(10rem, 0.55fr);
  gap: 0.85rem;
}

.promise-detail-card,
.daily-inspiration-card,
.daily-progress-card,
.streak-card,
.today-premium-shell .word-card,
.today-premium-shell .assignment-card,
.today-premium-shell .integration-card {
  border: 1px solid rgba(219, 231, 226, 0.82);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 48px rgba(16, 33, 31, 0.08);
  backdrop-filter: blur(16px);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.promise-detail-card:hover,
.daily-inspiration-card:hover,
.daily-progress-card:hover,
.streak-card:hover,
.today-premium-shell .word-card:hover,
.today-premium-shell .assignment-card:hover,
.today-premium-shell .integration-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 62px rgba(8, 117, 111, 0.13);
}

.daily-inspiration-card,
.daily-progress-card,
.streak-card {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.daily-inspiration-card blockquote {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
}

.daily-inspiration-card strong {
  color: var(--teal-strong);
}

.progress-widget {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.progress-ring {
  display: grid;
  width: 5.2rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #fff 55%, transparent 57%),
    conic-gradient(var(--teal) 0 72%, rgba(8, 117, 111, 0.13) 72% 100%);
  box-shadow: inset 0 0 0 1px rgba(8, 117, 111, 0.08);
}

.progress-ring span {
  color: var(--teal-strong);
  font-weight: 1000;
}

.progress-widget ul {
  display: grid;
  gap: 0.42rem;
  min-width: 8rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.progress-widget li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  border-radius: 7px;
  background: rgba(238, 248, 242, 0.76);
  padding: 0.34rem 0.55rem;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
}

.streak-card {
  justify-items: center;
  text-align: center;
}

.streak-number {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--ink);
}

.streak-number strong {
  font-size: 2.35rem;
}

.today-action-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.95fr) minmax(20rem, 1.35fr) minmax(18rem, 1fr);
  gap: 0.85rem;
}

.today-premium-shell .word-card {
  position: relative;
  min-height: 16rem;
  overflow: hidden;
  padding: 1.3rem;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.68)),
    url("public/images/ads/kingdom-wisdom.png") right bottom / 54% auto no-repeat;
}

.today-premium-shell .word-card h3 {
  font-size: clamp(2.2rem, 3vw, 3rem);
  letter-spacing: -0.04em;
}

.today-premium-shell .assignment-card {
  padding: 1.3rem;
}

.today-premium-shell .assignment-card li {
  border-left: 0;
  padding: 0.15rem 0 0.15rem 1.65rem;
  background:
    linear-gradient(var(--teal), var(--teal)) 0.2rem 0.65rem / 0.55rem 0.55rem no-repeat;
}

.today-premium-shell .assignment-card textarea {
  min-height: 3rem;
}

.today-action-grid .search-promise-card {
  align-content: start;
  justify-items: stretch;
  padding: 1.3rem;
  text-align: left;
}

.today-action-grid .promise-search-form {
  grid-template-columns: minmax(0, 1fr) auto;
  justify-items: stretch;
  gap: 0;
}

.today-action-grid .promise-search-form input {
  width: 100%;
  border-radius: 10px 0 0 10px;
}

.today-action-grid .promise-search-form .primary {
  border-radius: 0 10px 10px 0;
}

.search-chip-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.search-chip-row button {
  border-radius: 10px;
  background: rgba(238, 248, 242, 0.9);
  color: var(--teal-strong);
  padding: 0.8rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 900;
}

.today-premium-shell .today-integrations {
  grid-template-columns: minmax(22rem, 0.75fr) minmax(0, 1.45fr);
  gap: 0.85rem;
  margin-top: 0;
}

.today-premium-shell .promise-movie-card {
  min-height: 16rem;
  padding: 1.1rem;
  text-align: left;
}

.today-premium-shell .promise-movie-detail {
  grid-template-columns: minmax(14rem, 0.75fr) minmax(12rem, 0.55fr);
  align-items: center;
  justify-items: stretch;
  text-align: left;
}

.today-premium-shell .promise-youtube-frame {
  border-radius: 8px;
}

.today-premium-shell .clients-promise-card {
  min-height: 16rem;
  padding: 1.1rem;
}

.today-premium-shell .clients-table-wrap {
  max-height: 20rem;
}

.today-premium-shell .clients-table {
  min-width: 46rem;
}

.today-premium-shell .clients-table th,
.today-premium-shell .clients-table td {
  padding: 0.72rem 0.85rem;
  font-size: 0.82rem;
}

.today-premium-shell .client-video-thumb {
  width: 3.2rem;
  border-radius: 8px;
}

.today-premium-shell .video-button {
  width: auto;
  min-height: 1.9rem;
  padding: 0.3rem 0.8rem;
  background: var(--teal);
}

@media (max-width: 1280px) {
  .carousel-preview-rail {
    width: 39vw;
    grid-template-columns: repeat(3, minmax(8rem, 1fr));
  }

  .preview-card:nth-child(n + 4) {
    display: none;
  }

  .today-insight-row,
  .today-action-grid,
  .today-premium-shell .today-integrations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body[data-view="today"] .app-shell {
    grid-template-columns: 1fr;
  }

  body[data-view="today"] .sidebar {
    position: relative;
    height: auto;
  }

  .today-premium-shell .carousel-slide {
    grid-template-columns: 1fr;
    min-height: 42rem;
  }

  .carousel-preview-rail {
    position: relative;
    inset: auto;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-card {
    min-height: 12rem;
  }

  .today-insight-row,
  .today-action-grid,
  .today-premium-shell .today-integrations {
    grid-template-columns: 1fr;
  }
}

.today-carousel-layout {
  grid-template-columns: 1fr;
}

.promise-carousel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 246, 199, 0.38), transparent 18rem),
    linear-gradient(135deg, #0b6f58 0%, #11834f 48%, #8bb86b 100%);
  box-shadow: 0 26px 60px rgba(16, 33, 31, 0.18);
  outline: none;
}

.carousel-viewport {
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.45rem);
}

.carousel-track {
  display: flex;
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.carousel-slide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(19rem, 0.42fr) minmax(0, 0.58fr);
  flex: 0 0 100%;
  gap: clamp(1rem, 3vw, 2rem);
  min-height: 31rem;
  padding: clamp(1rem, 2.2vw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(6, 82, 64, 0.9), rgba(11, 109, 69, 0.72));
  color: #fff;
  opacity: 0.7;
  transform: scale(0.985);
  filter: blur(1px);
  transition: opacity 600ms ease, transform 600ms ease, filter 600ms ease;
}

.carousel-slide.active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.carousel-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 1rem;
  max-width: 35rem;
}

.slide-number {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border-radius: 8px;
  background: #f2f1c5;
  color: var(--teal-strong);
  font-weight: 1000;
}

.carousel-copy .eyebrow {
  color: rgba(255, 255, 255, 0.8);
}

.carousel-copy h3 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 4.6rem);
  line-height: 0.98;
}

.carousel-copy p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}

.carousel-copy .scripture-pill {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.carousel-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.carousel-cta-row .secondary {
  background: rgba(255, 255, 255, 0.88);
}

.slide-artwork {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.slide-artwork img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transform: scale(1.08);
  filter: saturate(1.05);
  animation: floatArtwork 8s ease-in-out infinite;
}

.slide-artwork.gate img,
.slide-artwork.river img,
.slide-artwork.tree img {
  object-position: left center;
}

.slide-artwork.shield img,
.slide-artwork.door img,
.slide-artwork.heart img,
.slide-artwork.mountain img,
.slide-artwork.scroll img,
.slide-artwork.city img {
  object-position: right center;
}

.art-glow {
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 246, 199, 0.55), transparent 64%);
  filter: blur(10px);
  animation: pulseGlow 4s ease-in-out infinite;
}

.art-symbol {
  position: absolute;
  inset: auto 10% 10% auto;
  width: clamp(5rem, 12vw, 10rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 246, 199, 0.92), rgba(255, 246, 199, 0.22) 42%, transparent 70%);
  box-shadow: 0 0 60px rgba(255, 246, 199, 0.45);
}

.carousel-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--teal-strong);
  font-size: 1.25rem;
  font-weight: 1000;
  box-shadow: 0 10px 24px rgba(16, 33, 31, 0.18);
  transform: translateY(-50%);
}

.carousel-arrow.prev {
  left: 0.9rem;
}

.carousel-arrow.next {
  right: 0.9rem;
}

.carousel-dots {
  position: absolute;
  z-index: 5;
  inset: auto 0 1rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.carousel-dots button {
  width: 2.4rem;
  height: 0.34rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

.carousel-dots button.active {
  background: #fff;
}

.promise-detail-card {
  display: grid;
  gap: 0.85rem;
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.promise-detail-card p:not(.eyebrow) {
  max-width: 68ch;
  color: var(--muted);
  line-height: 1.6;
}

.today-carousel-layout .today-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@keyframes floatArtwork {
  0%,
  100% {
    transform: scale(1.08) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.12) translate3d(-1.2%, -1%, 0);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

.promise-hero {
  min-height: calc(100vh - 8rem);
  display: grid;
  grid-template-rows: minmax(19rem, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero-scene {
  position: relative;
  overflow: hidden;
  min-height: 22rem;
  background:
    linear-gradient(180deg, rgba(245, 255, 249, 0.2), rgba(16, 116, 93, 0.22)),
    linear-gradient(135deg, #0b6c65 0%, #2f8d62 56%, #f3d783 100%);
}

.sun {
  position: absolute;
  top: 11%;
  right: 12%;
  width: clamp(5rem, 15vw, 9rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 246, 199, 0.95);
  box-shadow: 0 0 80px rgba(255, 246, 199, 0.82);
}

.path {
  position: absolute;
  inset: auto 12% -5rem 30%;
  height: 60%;
  transform: skewX(-15deg);
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(215, 183, 95, 0.42));
}

.door {
  position: absolute;
  left: 12%;
  bottom: 18%;
  width: clamp(6rem, 13vw, 10rem);
  height: clamp(9rem, 20vw, 15rem);
  border: 0.65rem solid rgba(255, 255, 255, 0.84);
  border-bottom: 0;
  border-radius: 6rem 6rem 0 0;
  box-shadow: inset 0 0 0 999px rgba(7, 87, 82, 0.28), 0 24px 50px rgba(16, 33, 31, 0.22);
}

.key {
  position: absolute;
  right: 9%;
  bottom: 18%;
  max-width: 16rem;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.82);
  color: var(--teal-strong);
  font-weight: 1000;
  box-shadow: var(--shadow);
}

.hero-content {
  display: grid;
  gap: 0.85rem;
  padding: clamp(1rem, 3vw, 2rem);
}

.hero-content p:not(.eyebrow) {
  max-width: 68ch;
  color: var(--muted);
  line-height: 1.6;
}

.scripture-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.scripture-pill,
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--teal-strong);
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 900;
}

.today-panel {
  display: grid;
  gap: 1rem;
}

.word-card,
.assignment-card,
.module-card,
.compass-card {
  padding: 1rem;
}

.word-card,
.assignment-card {
  display: grid;
  gap: 0.8rem;
}

.word-card h3 {
  font-size: 2.4rem;
  color: var(--teal-strong);
}

.assignment-card ul {
  display: grid;
  gap: 0.65rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.assignment-card li {
  border-left: 4px solid var(--mint);
  padding-left: 0.7rem;
  color: var(--muted);
  line-height: 1.45;
}

.today-integrations {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.6fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.teoyube-promise-panel {
  display: grid;
  align-content: start;
  gap: 1.5rem;
}

.integration-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 36px rgba(16, 33, 31, 0.08);
}

.search-promise-card,
.promise-movie-card {
  display: grid;
  gap: 1rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  text-align: center;
}

.promise-search-form {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
}

.promise-search-form input {
  width: min(100%, 28rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  font: inherit;
}

.small {
  font-size: 0.88rem;
}

.promise-movie-detail {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
}

.promise-movie-detail img {
  width: min(100%, 26rem);
  max-height: 34rem;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(16, 33, 31, 0.14);
}

.promise-youtube-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--soft);
  box-shadow: 0 10px 28px rgba(16, 33, 31, 0.14);
}

.promise-youtube-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.promise-movie-detail h4 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.clients-promise-card {
  display: grid;
  align-content: start;
  padding: 1.2rem;
  min-height: 42rem;
}

.clients-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.icon-menu {
  min-height: auto;
  padding: 0.3rem 0.45rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.2rem;
}

.clients-table-wrap {
  max-height: 40rem;
  overflow: auto;
}

.clients-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 48rem;
}

.clients-table th,
.clients-table td {
  border-top: 1px solid var(--line);
  padding: 1rem;
  text-align: left;
  vertical-align: middle;
}

.clients-table th {
  color: var(--muted);
  font-weight: 900;
}

.clients-table td {
  color: var(--muted);
  line-height: 1.45;
}

.clients-table td:nth-child(2) {
  color: var(--ink);
  font-weight: 700;
  min-width: 15rem;
}

.clients-table tr.active-video-row td {
  background: rgba(191, 234, 210, 0.28);
}

.client-avatar {
  display: inline-block;
  width: 2.4rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.86), transparent 35%),
    linear-gradient(135deg, hsl(var(--avatar-hue), 70%, 82%), hsl(calc(var(--avatar-hue) + 42), 65%, 62%));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.client-video-thumb {
  width: 4.5rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.video-button {
  display: inline-grid;
  place-items: center;
  width: 3.8rem;
  min-height: 3.1rem;
  border: 0;
  border-radius: 8px;
  background: #2f80dc;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.position-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 0.32rem 0.55rem;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
}

.position-badge.success {
  background: #36b662;
}

.position-badge.warning {
  background: #f6a40f;
}

.position-badge.danger {
  background: #e83248;
}

.promise-search-feed {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.promise-feed-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
}

.promise-feed-search input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  font: inherit;
}

.promise-video-panel,
.promise-search-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 36px rgba(16, 33, 31, 0.08);
}

.promise-video-panel {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}

.promise-table-video-frame {
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--soft);
}

.promise-table-video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.promise-search-list {
  max-height: 62rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ui-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

.ui-video-card {
  display: grid;
  gap: 0.65rem;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 36px rgba(16, 33, 31, 0.08);
}

.ui-video-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1.1rem;
}

.ui-video-card p {
  color: var(--muted);
}

.ui-embed-frame {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: #242424;
}

.ui-embed-frame.wide {
  aspect-ratio: 21 / 9;
}

.ui-embed-frame.standard {
  aspect-ratio: 16 / 9;
}

.ui-embed-frame.square {
  aspect-ratio: 1;
}

.ui-embed-frame.classic {
  aspect-ratio: 4 / 3;
}

.ui-embed-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-loading-state {
  display: grid;
  min-height: 12rem;
  place-items: center;
  color: #fff;
  font-weight: 800;
}

.teoyube-table-page {
  display: grid;
  gap: 1rem;
}

.teoyube-table-page > h3 {
  color: var(--ink);
}

.teoyube-table-card {
  display: grid;
  gap: 1.3rem;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 36px rgba(16, 33, 31, 0.08);
}

.table-card-head h4 {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: 1.05rem;
}

.table-card-head p {
  color: var(--muted);
  font-weight: 700;
}

.teoyube-table-scroll {
  max-height: 64rem;
  overflow: auto;
  border-top: 1px solid var(--line);
}

.teoyube-reference-table {
  width: 100%;
  min-width: 58rem;
  border-collapse: collapse;
}

.teoyube-reference-table th,
.teoyube-reference-table td {
  padding: 0.95rem 0.9rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  text-align: left;
  vertical-align: middle;
}

.teoyube-reference-table th {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.teoyube-main-row td {
  font-weight: 700;
}

.teoyube-main-row.expanded td {
  background: rgba(56, 189, 248, 0.05);
}

.table-name-cell {
  max-width: 15rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.table-expand-button {
  display: inline-grid;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.table-toggle-icon {
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
}

.table-icon-button {
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0;
  cursor: pointer;
}

.table-icon-button::before {
  display: inline-grid;
  min-width: 2rem;
  min-height: 1.6rem;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 5px;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.table-icon-button[aria-label^="Watch"]::before {
  content: "VID";
}

.table-icon-button[aria-label^="Play"]::before {
  content: "AUD";
}

.table-icon-button[aria-label^="Open"]::before {
  content: "GRID";
}

.table-detail-content {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(16rem, 24rem);
  align-items: center;
  gap: 1rem;
}

.table-detail-content img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
}

.table-detail-content p {
  color: var(--muted);
  font-weight: 700;
}

.table-detail-content small {
  display: block;
  margin-top: 0.35rem;
  color: var(--teal-strong);
  font-weight: 800;
}

.table-row-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #242424;
}

.table-row-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.teoyube-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.page-size-button {
  padding: 0.55rem 0.9rem;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(145deg, #8b5cf6, #a855f7);
  color: #fff;
  font-weight: 900;
}

.table-pagination {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.table-pagination button {
  min-width: 2.2rem;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-right: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.table-pagination button:last-child {
  border-right: 0;
}

.table-pagination button.active {
  background: var(--blue);
  color: #fff;
}

.promise-search-item {
  display: grid;
  grid-template-columns: 8.25rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
}

.promise-search-item:first-child {
  border-top: 0;
}

.scripture-thumbnail {
  min-height: 8.25rem;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(16, 33, 31, 0.08);
}

.promise-search-item h3 {
  font-size: 1rem;
  text-transform: uppercase;
}

.promise-search-item p {
  color: var(--muted);
  line-height: 1.42;
  font-size: 0.9rem;
}

.promise-search-item small {
  display: block;
  margin-top: 0.6rem;
  color: var(--muted);
}

.link-button {
  min-height: auto;
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 0;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.promise-table-grid,
.lexicon-grid,
.language-layer-grid,
.canon-grid,
.search-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.canon-wide {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.canon-card {
  display: grid;
  gap: 0.65rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(16, 33, 31, 0.07);
}

.canon-card p {
  color: var(--muted);
  line-height: 1.5;
}

.canon-card pre {
  overflow-x: auto;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbf8;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.45;
}

.canon-card code {
  white-space: pre;
}

.sequence-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.grammar-panel {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(191, 234, 210, 0.65), rgba(255, 255, 255, 0.92)),
    #fff;
  box-shadow: var(--shadow);
}

.grammar-panel p {
  color: var(--muted);
  line-height: 1.55;
}

.formula-grid,
.rank-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.formula-card,
.rank-card,
.layer-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

.formula-card code {
  white-space: normal;
  color: var(--teal-strong);
  font-weight: 900;
}

.language-layer-grid {
  margin-bottom: 1rem;
}

.layer-card strong {
  color: var(--teal-strong);
  font-size: 1.3rem;
}

.search-jumbotron {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(8, 117, 111, 0.08), rgba(36, 122, 69, 0.08)),
    #fff;
  box-shadow: var(--shadow);
}

.search-jumbotron h3 {
  max-width: 52rem;
}

.canon-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(8, 117, 111, 0.08), rgba(255, 255, 255, 0.92)),
    #fff;
  box-shadow: 0 8px 28px rgba(16, 33, 31, 0.06);
}

.canon-dashboard-header h3 {
  color: var(--ink);
}

.canon-dashboard-header p:not(.eyebrow) {
  max-width: 48rem;
  color: var(--muted);
  line-height: 1.55;
}

.canon-dashboard-actions,
.canon-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.canon-dashboard-actions {
  justify-content: flex-end;
}

.canon-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.canon-kpi-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 33, 31, 0.06);
}

.canon-kpi-card span,
.canon-kpi-card small {
  color: var(--muted);
  font-weight: 800;
}

.canon-kpi-card strong {
  color: var(--teal-strong);
  font-size: 1.55rem;
}

.canon-tabs {
  margin-bottom: 1rem;
}

.canon-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.canon-tab span {
  display: grid;
  min-width: 1.35rem;
  min-height: 1.35rem;
  place-items: center;
  border-radius: 999px;
  background: var(--soft);
  color: var(--teal-strong);
  font-size: 0.78rem;
}

.canon-tab.active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.canon-tab.active span {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.canon-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: 1rem;
  align-items: start;
}

.canon-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.canon-project-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 33, 31, 0.08);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.canon-project-card:hover,
.canon-project-card.active {
  border-color: var(--teal);
  box-shadow: 0 16px 38px rgba(16, 33, 31, 0.13);
  transform: translateY(-2px);
}

.canon-project-media {
  min-height: 8.5rem;
  background-color: var(--soft);
  background-position: center;
  background-size: cover;
}

.canon-project-body {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
}

.canon-project-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.canon-project-heading h4 {
  margin: 0 0 0.4rem;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.25;
}

.canon-project-heading button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.canon-project-body p {
  color: var(--muted);
  line-height: 1.55;
}

.canon-status {
  display: inline-flex;
  width: fit-content;
  padding: 0.22rem 0.45rem;
  border-radius: 6px;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
}

.canon-status.completed {
  background: #34a853;
}

.canon-status.in-progress {
  background: #f59e0b;
}

.canon-status.on-hold {
  background: #dc2626;
}

.canon-status.planning {
  background: #2f80ed;
}

.canon-status.review {
  background: #8b5cf6;
}

.canon-avatar-row {
  display: flex;
  align-items: center;
}

.canon-avatar-row span {
  width: 2rem;
  height: 2rem;
  margin-right: -0.45rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 2px 8px rgba(16, 33, 31, 0.12);
}

.canon-project-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-weight: 900;
}

.canon-project-card progress,
.canon-detail-panel progress {
  width: 100%;
  height: 0.58rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
}

.canon-project-card progress::-webkit-progress-bar,
.canon-detail-panel progress::-webkit-progress-bar {
  background: var(--soft);
}

.canon-project-card progress::-webkit-progress-value,
.canon-detail-panel progress::-webkit-progress-value {
  background: var(--blue);
}

.canon-detail-panel {
  min-height: 20rem;
}

.canon-detail-sticky {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 33, 31, 0.08);
}

.canon-detail-sticky h3,
.canon-detail-sticky h4 {
  color: var(--ink);
}

.canon-detail-sticky p,
.canon-activity-list {
  color: var(--muted);
  line-height: 1.55;
}

.canon-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.canon-detail-stats div {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem;
  border-radius: 8px;
  background: var(--soft);
}

.canon-detail-stats span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.canon-detail-stats strong {
  color: var(--teal-strong);
}

.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem auto;
  gap: 0.65rem;
}

.search-form select {
  min-height: 2.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-weight: 800;
}

.search-result-card {
  display: grid;
  gap: 0.7rem;
  min-height: 22rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(16, 33, 31, 0.07);
}

.search-result-card .thumbnail {
  min-height: 8rem;
  border-radius: 8px;
  background:
    radial-gradient(circle at 75% 20%, rgba(255, 246, 199, 0.95), transparent 4rem),
    linear-gradient(135deg, #0b6c65, #2f8d62 55%, #f3d783);
}

.search-result-card p {
  color: var(--muted);
  line-height: 1.5;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: auto;
}

.result-actions button {
  min-height: auto;
  padding: 0.55rem 0.65rem;
  font-size: 0.82rem;
}

.span-two {
  grid-column: span 2;
}

.roadmap-dashboard {
  display: grid;
  gap: 1rem;
}

.roadmap-dashboard-header,
.roadmap-phase,
.roadmap-subphase {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 32px rgba(16, 33, 31, 0.07);
}

.roadmap-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.13), transparent 18rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 246, 0.92));
}

.roadmap-dashboard-header h3 {
  color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: 1.05;
}

.roadmap-dashboard-header p:not(.eyebrow) {
  max-width: 54rem;
  color: var(--muted);
  line-height: 1.55;
}

.roadmap-dashboard-actions {
  display: flex;
  gap: 0.7rem;
}

.roadmap-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem;
}

.roadmap-kpi-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 6.6rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 33, 31, 0.08);
}

.roadmap-kpi-card span,
.roadmap-kpi-card small {
  color: var(--muted);
  font-weight: 900;
}

.roadmap-kpi-card span {
  color: var(--teal-strong);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.roadmap-kpi-card strong {
  display: block;
  margin: 0.35rem 0;
  color: var(--teal-strong);
  font-size: 2rem;
  line-height: 1;
}

.roadmap-kpi-icon {
  width: 2.2rem;
  height: 2.2rem;
  border: 3px solid rgba(8, 117, 111, 0.3);
  border-radius: 8px;
}

.roadmap-kpi-icon.progress {
  border-radius: 999px;
  border-right-color: var(--teal);
}

.roadmap-phase {
  display: grid;
  gap: 0.85rem;
  padding: 1.15rem;
}

.roadmap-phase > h3,
.roadmap-subphase h4 {
  color: var(--ink);
}

.roadmap-phase > p:not(.eyebrow),
.roadmap-subphase p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.55;
}

.roadmap-dashboard .canon-card {
  min-height: 7.1rem;
  padding: 1rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.roadmap-dashboard .canon-card h3 {
  color: var(--ink);
  font-size: 1.05rem;
}

.roadmap-dashboard .canon-card p {
  font-size: 0.9rem;
}

.roadmap-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.roadmap-north-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.roadmap-north-layout .roadmap-compass-card,
.roadmap-north-layout .roadmap-calling-result {
  border: 0;
  box-shadow: none;
}

.roadmap-north-layout .roadmap-calling-result {
  background: transparent;
}

.roadmap-north-layout .roadmap-calling-result h3 {
  margin-bottom: 0.5rem;
  text-align: center;
}

.roadmap-north-layout .calling-facts {
  gap: 0.25rem;
  grid-template-columns: 1fr;
}

.roadmap-north-layout .calling-facts div {
  grid-template-columns: 13rem minmax(0, 1fr);
  align-items: center;
  padding: 0.55rem 0.75rem;
  background: rgba(191, 234, 210, 0.38);
}

.teoyube-ad-carousel {
  display: grid;
  gap: 1rem;
  margin-top: 0.35rem;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 10%, rgba(191, 234, 210, 0.45), transparent 18rem),
    #f7fcf9;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.ad-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ad-carousel-head h4 {
  color: var(--ink);
  font-size: 1.2rem;
}

.ad-carousel-controls {
  display: flex;
  gap: 0.55rem;
}

.ad-arrow {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--teal-strong);
  font-size: 1.4rem;
  font-weight: 1000;
  box-shadow: 0 8px 22px rgba(16, 33, 31, 0.12);
}

.ad-carousel-viewport {
  overflow: hidden;
  padding: 0.75rem 0.45rem 1rem;
}

.ad-carousel-track {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.teoyube-ad-card {
  flex: 0 0 clamp(14rem, 20vw, 17rem);
  min-width: 16rem;
  overflow: hidden;
  border: 1px solid rgba(8, 117, 111, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(16, 33, 31, 0.12);
  opacity: 0.7;
  transform: scale(0.9);
  transform-origin: center;
  transition:
    flex-basis 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms ease;
}

.teoyube-ad-card.active {
  flex-basis: clamp(18rem, 27vw, 23rem);
  opacity: 1;
  transform: translateY(-7px) scale(1);
  box-shadow: 0 30px 70px rgba(8, 117, 111, 0.2);
}

.teoyube-ad-card.near {
  opacity: 0.9;
  transform: scale(0.96);
}

.teoyube-ad-card:hover {
  opacity: 1;
  transform: translateY(-5px) scale(0.98);
}

.teoyube-ad-card.active:hover {
  transform: translateY(-8px) scale(1.01);
}

.ad-art {
  position: relative;
  min-height: 0;
  aspect-ratio: 360 / 428;
  overflow: hidden;
  padding: 0;
  background: transparent;
  color: #fff;
}

.ad-art img {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: none;
}

.ad-art.direction img,
.ad-art.purpose img {
  object-position: 0% 0%;
}

.ad-art.strength img,
.ad-art.abundance img {
  object-position: 34% 0%;
}

.ad-art.growth img,
.ad-art.faith img {
  object-position: 66% 0%;
}

.ad-art.peace img,
.ad-art.wisdom img {
  object-position: 100% 0%;
}

.ad-art::after {
  display: none;
}

.teoyube-badge,
.ad-art h5,
.ad-art p {
  position: relative;
  z-index: 1;
}

.teoyube-badge {
  display: none;
  width: fit-content;
  margin-bottom: 4.6rem;
  border-radius: 6px;
  background: rgba(0, 120, 96, 0.88);
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 1000;
  letter-spacing: 0.03em;
}

.ad-art h5 {
  display: none;
  max-width: 11rem;
  margin: 0 0 0.6rem;
  color: #fff;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.08;
}

.ad-art p {
  display: none;
  max-width: 13rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.45;
}

.ad-card-body {
  display: none;
  gap: 0.8rem;
  padding: 1rem;
}

.ad-stars {
  color: #f5b400;
  font-weight: 1000;
}

.ad-stars span {
  color: var(--muted);
  font-weight: 800;
}

.ad-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ad-card-actions .secondary {
  border-color: var(--teal);
  color: var(--teal-strong);
}

.ad-icon-button {
  display: grid;
  width: 3.1rem;
  height: 3.1rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--teal-strong);
  font-weight: 1000;
  box-shadow: 0 8px 20px rgba(16, 33, 31, 0.1);
}

.ad-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
}

.ad-carousel-dots button {
  width: 1.8rem;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(8, 117, 111, 0.22);
}

.ad-carousel-dots button.active {
  background: var(--teal);
}

.roadmap-compact-details {
  display: grid;
  gap: 0.7rem;
}

.roadmap-compact-details .canon-card {
  max-height: 18rem;
  overflow: auto;
}

.roadmap-archive {
  gap: 1rem;
}

.roadmap-subphase {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.78);
}

.module-card {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-height: 12rem;
}

.module-card p:not(.eyebrow),
.module-card li,
.timeline p,
.testimony-list p {
  color: var(--muted);
  line-height: 1.55;
}

.status-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.status-pill.active {
  background: var(--teal);
  color: #fff;
}

.promise-scrolls-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(17rem, 28vw, 24rem);
  align-content: end;
  padding: clamp(1.35rem, 3vw, 2rem);
  border-color: rgba(255, 217, 112, 0.28);
  background:
    linear-gradient(90deg, rgba(0, 23, 18, 0.94) 0%, rgba(0, 48, 35, 0.74) 43%, rgba(0, 48, 35, 0.2) 100%),
    url("/public/images/promise/promise-scrolls-bg.png") center right / cover no-repeat;
  color: #fff;
  box-shadow: 0 22px 52px rgba(0, 52, 39, 0.22);
}

.promise-scrolls-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 218, 112, 0.24), transparent 18rem),
    linear-gradient(180deg, transparent 42%, rgba(0, 30, 23, 0.84));
  pointer-events: none;
}

.promise-scrolls-panel .eyebrow,
.promise-scrolls-panel h3,
.promise-scrolls-panel p,
.promise-scrolls-panel .status-rail {
  position: relative;
  z-index: 1;
}

.promise-scrolls-panel .eyebrow {
  color: #ffd873;
}

.promise-scrolls-panel h3 {
  max-width: 34rem;
  color: #fff8df;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4vw, 4.6rem);
  line-height: 0.95;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.34);
}

.promise-scrolls-panel p:not(.eyebrow) {
  max-width: 31rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}

.promise-scrolls-panel .status-pill {
  border-color: rgba(255, 219, 112, 0.28);
  background: rgba(0, 82, 61, 0.62);
  color: #fff7d4;
}

.promise-scrolls-panel .status-pill.active {
  background: linear-gradient(135deg, #0a7a58, #00583f);
  color: #fff;
}

.mini-compass {
  position: relative;
  min-height: 16rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: radial-gradient(circle, #fff 0 30%, var(--soft) 31% 100%);
}

.mini-compass span,
.mini-compass strong {
  position: absolute;
  max-width: 7rem;
  text-align: center;
  font-size: 0.85rem;
}

.mini-compass .north {
  top: 1rem;
}

.mini-compass .east {
  right: 1rem;
}

.mini-compass .south {
  bottom: 1rem;
}

.mini-compass .west {
  left: 1rem;
}

.mini-compass strong {
  color: var(--teal-strong);
}

progress {
  width: 100%;
  height: 0.75rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background: var(--soft);
}

progress::-webkit-progress-value {
  background: var(--green);
}

.calling-layout,
.guide-layout,
.testimony-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
  gap: 1rem;
}

.compass-card {
  min-height: calc(100vh - 8rem);
  display: grid;
  place-items: center;
}

.compass {
  position: relative;
  width: min(100%, 40rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 22%, transparent 23%),
    conic-gradient(from 45deg, rgba(191, 234, 210, 0.7), #fff, rgba(215, 183, 95, 0.55), #fff, rgba(191, 234, 210, 0.7));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1.2rem rgba(255, 255, 255, 0.6);
}

.compass-point,
.compass-core {
  position: absolute;
  display: grid;
  gap: 0.25rem;
  max-width: 13rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.compass-point span,
.compass-core span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.compass-point strong,
.compass-core strong {
  color: var(--teal-strong);
}

.compass-point.top {
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}

.compass-point.right {
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
}

.compass-point.bottom {
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

.compass-point.left {
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
}

.compass-core {
  inset: 50% auto auto 50%;
  width: 13rem;
  transform: translate(-50%, -50%);
}

.calling-facts {
  display: grid;
  gap: 0.7rem;
  margin: 0;
}

.calling-facts div {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem;
  border-radius: 8px;
  background: var(--soft);
}

.calling-facts dt {
  color: var(--teal-strong);
  font-size: 0.8rem;
  font-weight: 900;
}

.calling-facts dd {
  margin: 0;
  color: var(--muted);
}

.roadmap-compass-card,
.roadmap-calling-result {
  min-height: auto;
}

.roadmap-compass-card {
  justify-items: start;
}

.canon-card .roadmap-compass {
  justify-self: center;
  width: min(100%, 20rem);
  max-width: 20rem;
}

.roadmap-compass .compass-point,
.roadmap-compass .compass-core {
  max-width: 8.5rem;
  padding: 0.45rem;
  font-size: 0.78rem;
}

.roadmap-compass .compass-core {
  width: 8.5rem;
}

.compact-compass {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.compact-compass div {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.compact-compass span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.compact-compass strong {
  color: var(--teal-strong);
}

.compact-calling-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.compact-calling-facts div {
  padding: 0.6rem;
}

.compass-video-hub {
  grid-column: 1 / -1;
  display: grid;
  gap: 1rem;
}

.compass-video-status {
  color: var(--muted);
}

.compass-video-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.8fr);
  gap: 1rem;
  align-items: start;
}

.compass-video-player,
.compass-video-list {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.compass-video-frame {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #10211f;
  aspect-ratio: 16 / 9;
}

.compass-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.compass-video-item {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.7rem;
  align-items: center;
  width: 100%;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.compass-video-item:hover,
.compass-video-item.active {
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(16, 33, 31, 0.12);
}

.compass-video-item img,
.compass-video-thumb {
  width: 7rem;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
  background: var(--teal-strong);
}

.compass-video-thumb {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
}

.compass-video-item strong {
  display: block;
  color: var(--teal-strong);
}

.compass-video-item small {
  color: var(--muted);
}

body[data-view="calling"] {
  background:
    radial-gradient(circle at top right, rgba(13, 122, 90, 0.14), transparent 30rem),
    linear-gradient(135deg, #f7fbf7 0%, #eef7f0 100%);
}

body[data-view="calling"] main {
  max-width: none;
}

body[data-view="calling"] .topbar {
  display: none;
}

.calling-premium-page {
  display: grid;
  gap: 1rem;
}

.calling-premium-head,
.calling-premium-grid,
.calling-content-grid,
.calling-recommendation-grid,
.calling-category-grid,
.calling-progress-grid {
  display: grid;
}

.calling-premium-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.calling-premium-head h3 {
  margin: 0;
  color: #071524;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  line-height: 1;
}

.calling-premium-head h3 span {
  color: #0a7654;
}

.calling-premium-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.calling-premium-actions .secondary,
.calling-premium-actions .primary {
  min-height: 3rem;
  border-radius: 8px;
  font-weight: 900;
  box-shadow: 0 16px 30px rgba(5, 46, 36, 0.1);
}

.calling-premium-grid {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem);
  gap: 1rem;
  align-items: start;
}

.calling-main-column,
.calling-right-rail {
  display: grid;
  gap: 1rem;
}

.calling-hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: 1rem;
  overflow: hidden;
  min-height: 22rem;
  padding: 2rem;
  border: 1px solid rgba(206, 232, 220, 0.9);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(2, 27, 20, 0.92), rgba(2, 54, 40, 0.65) 56%, rgba(2, 27, 20, 0.28)),
    url("public/images/canon/canon-hero-journey.png") center / cover;
  box-shadow: 0 20px 50px rgba(4, 42, 33, 0.16);
  color: #fff;
}

.calling-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 30%, rgba(247, 211, 93, 0.2), transparent 14rem),
    linear-gradient(180deg, transparent, rgba(2, 36, 27, 0.55));
  pointer-events: none;
}

.calling-hero-panel > * {
  position: relative;
  z-index: 1;
}

.calling-hero-copy {
  align-self: start;
  max-width: 44rem;
}

.calling-hero-copy .eyebrow,
.calling-hero-panel .eyebrow {
  color: #ffe789;
}

.calling-hero-copy h3 {
  max-width: 43rem;
  margin: 0.5rem 0 0.75rem;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.calling-hero-copy h3::first-line {
  color: #fff;
}

.calling-hero-copy p {
  max-width: 38rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 700;
  line-height: 1.65;
}

.calling-search-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.65rem;
  width: min(48rem, 100%);
  margin-top: auto;
  padding: 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

.calling-search-form input {
  min-height: 3.2rem;
  border: 0;
  background: transparent;
  color: #10211f;
  font-weight: 800;
}

.calling-search-form input:focus {
  outline: none;
}

.calling-search-icon,
.calling-voice-button,
.calling-search-form .primary {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 999px;
}

.calling-search-icon {
  display: grid;
  place-items: center;
}

.calling-search-icon::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid #0a7654;
  border-radius: 999px;
  box-shadow: 0.45rem 0.45rem 0 -0.32rem #0a7654;
}

.calling-voice-button {
  border: 0;
  background: rgba(9, 102, 76, 0.09);
}

.calling-voice-button::before {
  content: "";
  display: block;
  width: 0.55rem;
  height: 1rem;
  margin: auto;
  border: 2px solid #075f47;
  border-radius: 999px;
  border-bottom-width: 4px;
}

.calling-search-form .primary {
  padding: 0;
  font-size: 0;
}

.calling-search-form .primary::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: auto;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0.45rem 0.45rem 0 -0.32rem #fff;
}

.calling-hero-panel .quick-prompts {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: -0.25rem;
}

.calling-hero-panel .quick-prompts span {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
}

.calling-hero-panel .cluster-nav-chip {
  border: 1px solid rgba(191, 255, 224, 0.22);
  background: linear-gradient(135deg, rgba(0, 114, 80, 0.96), rgba(7, 74, 56, 0.96));
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.calling-daily-inspiration {
  align-self: end;
  display: grid;
  gap: 0.8rem;
  padding: 1.4rem;
  border: 1px solid rgba(119, 235, 177, 0.3);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(2, 62, 47, 0.95), rgba(2, 32, 25, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.calling-daily-inspiration h4,
.calling-daily-inspiration p {
  margin: 0;
}

.calling-daily-inspiration p {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.calling-daily-inspiration strong {
  color: #fff2a7;
}

.calling-daily-inspiration .secondary {
  background: rgba(0, 134, 93, 0.5);
  color: #fff;
}

.compass-video-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(7, 118, 84, 0.08);
  color: #075f47;
  font-weight: 900;
}

.calling-content-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.82fr);
  gap: 1rem;
}

.calling-featured-video {
  grid-row: span 2;
}

.calling-featured-video,
.calling-assistant-panel,
.calling-compass-panel,
.calling-recommended-section,
.calling-category-section,
.calling-playlist-card,
.calling-continue-card,
.calling-progress-card {
  border: 1px solid rgba(217, 231, 223, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 34px rgba(7, 45, 35, 0.08);
}

.calling-featured-video,
.calling-assistant-panel,
.calling-compass-panel,
.calling-recommended-section,
.calling-category-section,
.calling-playlist-card,
.calling-continue-card,
.calling-progress-card {
  padding: 1rem;
}

body[data-view="calling"] .compass-video-player {
  padding: 0;
  border: 0;
  background: transparent;
}

.compass-player-shell {
  overflow: hidden;
  border-radius: 12px;
  background: #030b08;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18);
}

.compass-player-topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  color: #fff;
}

.compass-player-topbar strong,
.compass-player-topbar small {
  display: block;
}

.compass-player-topbar small,
.compass-player-actions {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  font-weight: 800;
}

body[data-view="calling"] .compass-video-frame {
  border: 0;
  border-radius: 0;
  background: #020b08;
}

.compass-featured-meta {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem 0.25rem 0;
}

.compass-featured-meta h4,
.compass-featured-meta p {
  margin: 0;
}

.compass-featured-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.compass-featured-row span {
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(11, 105, 78, 0.08);
  color: #075f47;
  font-size: 0.78rem;
  font-weight: 900;
}

.calling-player-empty,
.compass-playlist-empty {
  display: grid;
  place-items: center;
  min-height: 18rem;
  padding: 2rem;
  border: 1px dashed rgba(5, 95, 71, 0.22);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(7, 118, 84, 0.1), rgba(255, 255, 255, 0.92));
  text-align: center;
}

.calling-player-empty span {
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background: #086a50;
}

.calling-assistant-panel {
  position: relative;
  display: grid;
  gap: 1rem;
  overflow: hidden;
}

.calling-assistant-panel::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(246, 221, 108, 0.75), rgba(0, 104, 76, 0.55) 35%, rgba(0, 50, 38, 0.95) 70%);
  box-shadow: 0 0 28px rgba(6, 111, 77, 0.28);
}

.calling-assistant-panel h4 {
  max-width: 16rem;
  margin: 0.25rem 0 0.9rem;
}

.calling-assistant-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}

.calling-assistant-actions button {
  min-height: 4.6rem;
  border: 1px solid rgba(217, 231, 223, 0.95);
  border-radius: 8px;
  background: #fff;
  color: #0d2a24;
  font-weight: 900;
}

.calling-compass-panel {
  display: grid;
  gap: 1rem;
}

.calling-radar {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 18rem;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(7, 118, 84, 0.24), rgba(237, 250, 243, 0.92));
}

.calling-radar::before {
  content: "";
  position: absolute;
  width: 11rem;
  height: 11rem;
  border-radius: 38% 62% 45% 55%;
  background: conic-gradient(from 30deg, rgba(8, 106, 80, 0.1), rgba(8, 106, 80, 0.62), rgba(8, 106, 80, 0.16));
  border: 1px solid rgba(5, 95, 71, 0.22);
}

.calling-radar strong {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  background: #075f47;
  color: #fff;
  text-align: center;
}

.calling-radar span {
  position: absolute;
  color: #0c2a24;
  font-size: 0.78rem;
  font-weight: 900;
}

.calling-radar span:nth-child(1) { top: 1.1rem; left: 50%; transform: translateX(-50%); }
.calling-radar span:nth-child(2) { top: 3rem; right: 1.4rem; }
.calling-radar span:nth-child(3) { right: 1rem; top: 50%; }
.calling-radar span:nth-child(4) { right: 2.2rem; bottom: 3rem; }
.calling-radar span:nth-child(6) { bottom: 1.2rem; left: 50%; transform: translateX(-50%); }
.calling-radar span:nth-child(7) { left: 1.2rem; bottom: 3rem; }
.calling-radar span:nth-child(8) { left: 1.2rem; top: 50%; }

.calling-section-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.calling-section-title h4,
.calling-section-title p {
  margin: 0;
}

.calling-section-title p,
.calling-section-title span {
  color: #58706a;
  font-weight: 800;
}

.calling-recommendation-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
}

.calling-recommendation-grid article {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: 11rem;
  padding: 0.75rem;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(2, 27, 20, 0.9)),
    var(--media) center / cover;
  color: #fff;
}

.calling-recommendation-grid span {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  font-size: 0.75rem;
  font-weight: 900;
}

.calling-recommendation-grid h5,
.calling-recommendation-grid p {
  margin: 0;
}

.calling-recommendation-grid progress {
  width: 100%;
  height: 0.25rem;
  margin-top: 0.55rem;
}

.calling-category-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
}

.calling-category-grid button {
  min-height: 5rem;
  padding: 1rem;
  border: 1px solid rgba(16, 127, 92, 0.22);
  border-radius: 10px;
  background: linear-gradient(135deg, #075f47, #0a8460);
  color: #fff;
  font-weight: 900;
  text-align: left;
  box-shadow: 0 14px 28px rgba(5, 74, 55, 0.13);
}

.calling-category-grid small {
  display: block;
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.78);
}

.calling-playlist-card,
.calling-continue-card,
.calling-progress-card {
  display: grid;
  gap: 0.85rem;
}

body[data-view="calling"] .compass-video-list {
  display: grid;
  gap: 0;
  max-height: 28rem;
  overflow: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-view="calling"] .compass-video-item {
  position: relative;
  grid-template-columns: 6.4rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  min-height: 4.9rem;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid rgba(217, 231, 223, 0.95);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-view="calling"] .compass-video-item:hover,
body[data-view="calling"] .compass-video-item.active {
  border-color: rgba(217, 231, 223, 0.95);
  background: rgba(8, 106, 80, 0.05);
  box-shadow: none;
}

body[data-view="calling"] .compass-video-item img,
body[data-view="calling"] .compass-video-thumb {
  grid-row: 1;
  width: 6.4rem;
  border-radius: 6px;
}

body[data-view="calling"] .compass-video-item b {
  position: absolute;
  left: 4.7rem;
  bottom: 0.75rem;
  padding: 0.14rem 0.28rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.7rem;
}

body[data-view="calling"] .compass-video-item strong {
  color: #075f47;
  font-size: 0.9rem;
}

body[data-view="calling"] .compass-video-item em {
  color: #0a231e;
  font-style: normal;
  font-weight: 900;
}

.compass-playlist-link,
.calling-continue-card .secondary,
.calling-progress-card .primary,
.calling-compass-panel .secondary {
  justify-self: stretch;
  min-height: 2.8rem;
  border-radius: 8px;
  font-weight: 900;
}

.compass-playlist-link {
  border: 0;
  background: transparent;
  color: #075f47;
}

.calling-continue-card,
.calling-progress-card {
  background: linear-gradient(145deg, #075f47, #043a2e);
  color: #fff;
}

.calling-continue-row {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: 0.65rem;
  align-items: center;
}

.calling-continue-row span {
  height: 3.2rem;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(2, 27, 20, 0.45)),
    url("public/images/canon/canon-card-01.png") center / cover;
}

.calling-continue-row strong,
.calling-continue-row small {
  display: block;
}

.calling-continue-row small,
.calling-continue-card p {
  color: rgba(255, 255, 255, 0.72);
}

.calling-progress-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.calling-progress-grid div {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.calling-progress-grid strong {
  font-size: 2rem;
}

.calling-progress-grid span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
}

.calling-progress-grid small {
  color: #8bf2b5;
  font-weight: 900;
}

@media (max-width: 1200px) {
  .calling-premium-grid,
  .calling-content-grid,
  .calling-hero-panel {
    grid-template-columns: 1fr;
  }

  .calling-recommendation-grid,
  .calling-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .calling-premium-head {
    grid-template-columns: 1fr;
  }

  .calling-premium-actions {
    flex-wrap: wrap;
  }

  .calling-hero-panel {
    padding: 1rem;
  }

  .calling-search-form {
    grid-template-columns: auto 1fr auto;
    border-radius: 16px;
  }

  .calling-search-form .primary {
    grid-column: 1 / -1;
    width: 100%;
    font-size: 0.85rem;
  }

  .calling-search-form .primary::before {
    content: "Search";
    width: auto;
    height: auto;
    border: 0;
    box-shadow: none;
  }

  .calling-assistant-actions,
  .calling-recommendation-grid,
  .calling-category-grid,
  .calling-progress-grid {
    grid-template-columns: 1fr;
  }
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.timeline,
.testimony-list {
  display: grid;
  gap: 0.75rem;
}

.timeline-entry,
.testimony-entry {
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.timeline-entry time,
.testimony-entry time {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.lexicon-item {
  display: grid;
  gap: 0.55rem;
  min-height: 12rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.lexicon-item strong {
  color: var(--teal-strong);
  font-size: 1.55rem;
}

.quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.prompt-chip {
  min-height: auto;
  padding: 0.55rem 0.7rem;
}

.chat-card {
  min-height: 30rem;
}

.chat-log {
  display: grid;
  align-content: end;
  gap: 0.75rem;
  min-height: 22rem;
  max-height: 52vh;
  overflow: auto;
}

.message {
  max-width: 88%;
  border-radius: 8px;
  padding: 0.75rem;
  line-height: 1.45;
}

.message.user {
  justify-self: end;
  background: var(--teal);
  color: #fff;
}

.message.teo {
  justify-self: start;
  background: var(--soft);
  color: var(--ink);
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

dialog {
  width: min(48rem, calc(100vw - 2rem));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  color: var(--ink);
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(16, 33, 31, 0.42);
}

.assessment-form,
.guardrail-content {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
}

.dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.icon-button {
  min-width: 2.65rem;
  padding: 0;
  font-size: 1.35rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.form-grid label:nth-last-child(-n + 2) {
  grid-column: 1 / -1;
}

menu {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}

.guardrail-content ul {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 1050px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .nav-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .today-layout,
  .today-integrations,
  .today-carousel-layout .today-panel,
  .promise-feed-search,
  .promise-search-item,
  .canon-dashboard-layout,
  .roadmap-north-layout,
  .ui-video-grid,
  .calling-layout,
  .guide-layout,
  .testimony-layout {
    grid-template-columns: 1fr;
  }

  .canon-kpi-grid,
  .roadmap-kpi-grid,
  .roadmap-module-grid,
  .canon-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promise-hero,
  .compass-card {
    min-height: auto;
  }

  .teoyube-ad-card {
    flex-basis: clamp(14rem, 40vw, 18rem);
  }

  .teoyube-ad-card.active {
    flex-basis: clamp(18rem, 58vw, 25rem);
  }

  .carousel-slide {
    grid-template-columns: 1fr;
  }

  .slide-artwork {
    min-height: 18rem;
  }
}

@media (max-width: 720px) {
  main,
  .sidebar {
    padding: 0.85rem;
  }

  .topbar,
  .section-head,
  .canon-dashboard-header,
  .roadmap-dashboard-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions,
  .topbar-actions button,
  .canon-dashboard-actions,
  .canon-dashboard-actions button,
  .roadmap-dashboard-actions,
  .roadmap-dashboard-actions button {
    width: 100%;
  }

  .carousel-viewport {
    padding: 0.75rem;
  }

  .carousel-slide {
    min-height: 36rem;
    padding: 1rem;
  }

  .carousel-copy h3 {
    font-size: clamp(2rem, 12vw, 3.5rem);
  }

  .carousel-arrow {
    width: 2.55rem;
    height: 2.55rem;
  }

  .carousel-dots button {
    width: 1.5rem;
  }

  .ad-carousel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ad-carousel-controls {
    width: 100%;
    justify-content: space-between;
  }

  .teoyube-ad-card {
    min-width: min(78vw, 22rem);
    flex-basis: min(78vw, 22rem);
  }

  .teoyube-ad-card.active {
    flex-basis: min(88vw, 25rem);
  }

  .teoyube-table-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .table-detail-content {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .table-row-video {
    grid-column: 1 / -1;
  }

  .nav-list,
  .canon-kpi-grid,
  .canon-project-grid,
  .roadmap-kpi-grid,
  .roadmap-module-grid,
  .promise-table-grid,
  .lexicon-grid,
  .language-layer-grid,
  .canon-grid,
  .search-results,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .span-two,
  .form-grid label:nth-last-child(-n + 2) {
    grid-column: auto;
  }

  .compass {
    width: 100%;
    min-height: 33rem;
    aspect-ratio: auto;
    border-radius: 8px;
  }

  .canon-card .roadmap-compass {
    width: min(100%, 20rem);
    min-height: 20rem;
    aspect-ratio: 1;
    border-radius: 999px;
  }

  .compass-point,
  .compass-core {
    max-width: 11rem;
    font-size: 0.86rem;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }

  .roadmap-north-layout .calling-facts div {
    grid-template-columns: 1fr;
  }

  .search-form {
    grid-template-columns: 1fr;
  }

  .formula-grid,
  .rank-grid {
    grid-template-columns: 1fr;
  }
}

/* Final premium Today overrides */
body[data-view="today"] .today-premium-shell {
  display: grid;
  gap: 1rem;
}

body[data-view="today"] .today-premium-shell .promise-carousel {
  min-height: min(42rem, 44vh);
  border-radius: 10px;
}

body[data-view="today"] .today-premium-shell .carousel-slide {
  grid-template-columns: minmax(23rem, 0.47fr) minmax(26rem, 0.53fr);
  min-height: min(42rem, 44vh);
}

body[data-view="today"] .today-insight-row {
  display: grid;
  grid-template-columns: minmax(16rem, 1.35fr) minmax(15rem, 1fr) minmax(14rem, 0.85fr) minmax(10rem, 0.55fr);
  gap: 0.85rem;
}

body[data-view="today"] .today-action-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.95fr) minmax(20rem, 1.35fr) minmax(18rem, 1fr);
  gap: 0.85rem;
}

body[data-view="today"] .today-premium-shell .today-integrations {
  display: grid;
  grid-template-columns: minmax(22rem, 0.75fr) minmax(0, 1.45fr);
  gap: 0.85rem;
  margin-top: 0;
}

body[data-view="today"] .today-integrations {
  display: grid;
  grid-template-columns: minmax(22rem, 0.75fr) minmax(0, 1.45fr);
  gap: 0.85rem;
  margin-top: 1rem;
}

body[data-view="today"] .promise-detail-card,
body[data-view="today"] .daily-inspiration-card,
body[data-view="today"] .daily-progress-card,
body[data-view="today"] .streak-card,
body[data-view="today"] .word-card,
body[data-view="today"] .assignment-card,
body[data-view="today"] .integration-card {
  border-radius: 10px;
}

body[data-view="today"] .carousel-preview-rail {
  position: absolute;
  z-index: 3;
}

@media (max-width: 1280px) {
  body[data-view="today"] .today-insight-row,
  body[data-view="today"] .today-action-grid,
  body[data-view="today"] .today-premium-shell .today-integrations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="today"] .today-integrations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body[data-view="today"] .today-premium-shell .carousel-slide,
  body[data-view="today"] .today-insight-row,
  body[data-view="today"] .today-action-grid,
  body[data-view="today"] .today-premium-shell .today-integrations {
    grid-template-columns: 1fr;
  }

body[data-view="today"] .today-integrations {
    grid-template-columns: 1fr;
  }
}

/* Exact Today screenshot composition */
body[data-view="today"] {
  --today-card-radius: 10px;
  --today-green: #007b62;
  --today-deep: #023f34;
  --today-shadow: 0 20px 58px rgba(20, 54, 46, 0.12);
}

body[data-view="today"] .app-shell {
  grid-template-columns: 16.25rem minmax(0, 1fr);
  background: #f5faf8;
}

body[data-view="today"] .sidebar {
  gap: 1.2rem;
  margin: 0.3rem;
  padding: 1.15rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--today-shadow);
}

body[data-view="today"] .brand-lockup {
  padding: 0.7rem 0.45rem 1rem;
}

body[data-view="today"] .brand-mark {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 8px;
  background: linear-gradient(145deg, #004f3f, #008165);
}

body[data-view="today"] .brand-mark::before {
  content: "T";
  color: #fff;
  font-size: 1.35rem;
  font-weight: 1000;
}

body[data-view="today"] .brand-lockup h1 {
  font-size: 1.35rem;
  line-height: 1;
}

body[data-view="today"] .nav-list {
  gap: 0.28rem;
}

body[data-view="today"] .nav-item {
  min-height: 2.8rem;
  padding: 0.72rem 0.86rem;
  border-radius: 8px;
  color: #263c38;
  font-size: 0.9rem;
}

body[data-view="today"] .nav-item::before {
  display: inline-grid;
  width: 1.05rem;
  place-items: center;
  color: #005d4c;
  font-size: 0.96rem;
}

body[data-view="today"] .nav-item[data-view="today"]::before {
  content: "⌂";
}

body[data-view="today"] .nav-item[data-view="roadmap"]::before {
  content: "♧";
}

body[data-view="today"] .nav-item[data-view="search"]::before {
  content: "⌕";
}

body[data-view="today"] .nav-item[data-view="canon"]::before {
  content: "✥";
}

body[data-view="today"] .nav-item[data-view="table"]::before,
body[data-view="today"] .nav-item[data-view="teoyube-tables"]::before {
  content: "▦";
}

body[data-view="today"] .nav-item[data-view="calling"]::before {
  content: "◎";
}

body[data-view="today"] .nav-item[data-view="book"]::before {
  content: "▣";
}

body[data-view="today"] .nav-item[data-view="lexicon"]::before {
  content: "◇";
}

body[data-view="today"] .nav-item[data-view="testimony"]::before {
  content: "♡";
}

body[data-view="today"] .nav-item[data-view="guide"]::before {
  content: "⌬";
}

body[data-view="today"] .nav-item[data-view="ui-elements"]::before {
  content: "▣";
}

body[data-view="today"] .nav-item.active {
  background: #eef8f2;
  color: #005d4c;
}

body[data-view="today"] .nav-section-label {
  padding-top: 1rem;
  font-size: 0.68rem;
}

body[data-view="today"] .saint-card {
  border-radius: 10px;
  padding: 1rem;
}

body[data-view="today"] .saint-profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
}

body[data-view="today"] .saint-avatar {
  display: block;
  width: 2.85rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 48% 32%, rgba(255, 248, 218, 0.94), rgba(216, 138, 72, 0.48) 36%, transparent 37%),
    linear-gradient(135deg, #8f5527, #f5d49b);
  box-shadow: inset 0 0 0 3px #fff, 0 8px 20px rgba(16, 33, 31, 0.12);
}

body[data-view="today"] .saint-profile-head p {
  color: var(--muted);
  font-size: 0.78rem;
}

body[data-view="today"] .saint-profile-head h2 {
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.05;
}

body[data-view="today"] .active-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border-radius: 999px;
  background: rgba(0, 123, 98, 0.1);
  color: var(--teal-strong);
  padding: 0.3rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 900;
}

body[data-view="today"] .active-badge::before {
  content: "";
  width: 0.42rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #0f9f68;
}

body[data-view="today"] main {
  padding: 1.5rem 1.65rem 1.8rem;
}

body[data-view="today"] .topbar {
  margin-bottom: 1.15rem;
  padding: 0;
}

body[data-view="today"] #viewTitle {
  font-size: clamp(1.9rem, 2.05vw, 2.45rem);
  line-height: 1.05;
}

body[data-view="today"] .topbar-actions {
  gap: 0.75rem;
}

body[data-view="today"] .topbar-actions .primary,
body[data-view="today"] .topbar-actions .secondary {
  min-height: 2.65rem;
  border-radius: 8px;
  padding-inline: 1.25rem;
}

body[data-view="today"] #generateBtn::before {
  content: "✦";
  margin-right: 0.45rem;
}

body[data-view="today"] .today-premium-shell {
  gap: 0.95rem;
}

body[data-view="today"] .today-premium-shell .promise-carousel {
  height: 23.75rem;
  min-height: 23.75rem;
  border-radius: 10px;
  overflow: hidden;
}

body[data-view="today"] .carousel-viewport,
body[data-view="today"] .carousel-track {
  height: 100%;
}

body[data-view="today"] .today-premium-shell .carousel-slide {
  position: relative;
  display: block;
  height: 100%;
  min-height: 0;
  padding: 1.55rem 1.5rem 1.35rem;
  isolation: isolate;
}

body[data-view="today"] .today-premium-shell .slide-artwork {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-radius: 0;
  opacity: 1;
  z-index: -2;
}

body[data-view="today"] .today-premium-shell .slide-artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 52, 40, 0.92) 0%, rgba(0, 64, 50, 0.58) 36%, rgba(0, 64, 50, 0.2) 62%, rgba(0, 51, 39, 0.68) 100%),
    radial-gradient(circle at 45% 38%, rgba(250, 236, 151, 0.35), transparent 20rem);
}

body[data-view="today"] .today-premium-shell .slide-artwork img {
  opacity: 0.98;
  transform: scale(1.04);
  object-position: center;
}

body[data-view="today"] .today-premium-shell .carousel-copy {
  width: min(40%, 34rem);
  height: 100%;
  align-content: center;
  gap: 0.72rem;
  padding-left: 0.7rem;
}

body[data-view="today"] .today-premium-shell .carousel-copy h3 {
  font-size: clamp(3.4rem, 4.4vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

body[data-view="today"] .today-premium-shell .carousel-copy p:not(.eyebrow) {
  max-width: 29rem;
  font-size: 0.98rem;
  line-height: 1.55;
}

body[data-view="today"] .today-premium-shell .slide-number {
  width: 2rem;
  height: 2rem;
  font-size: 0.78rem;
}

body[data-view="today"] .today-premium-shell .scripture-pill {
  padding: 0.34rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
}

body[data-view="today"] .carousel-cta-row {
  margin-top: 0.2rem;
}

body[data-view="today"] .carousel-cta-row .primary,
body[data-view="today"] .carousel-cta-row .secondary {
  min-height: 2.35rem;
  padding: 0.55rem 1rem;
}

body[data-view="today"] .carousel-preview-rail {
  inset: 1.45rem 1rem 1.45rem auto;
  width: 47.8%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}

body[data-view="today"] #promisePreviewRail {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

body[data-view="today"] #promisePreviewRail .carousel-preview-rail {
  position: absolute;
}

body[data-view="today"] .preview-card {
  min-height: 0;
  height: 100%;
  padding: 0.8rem;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 18px 38px rgba(0, 42, 31, 0.18);
}

body[data-view="today"] .preview-card h4 {
  font-size: 0.83rem;
  color: #fff;
}

body[data-view="today"] .preview-card p {
  font-size: 0.65rem;
}

body[data-view="today"] .preview-card:nth-child(4) h4,
body[data-view="today"] .preview-card:nth-child(5) h4 {
  font-size: 0.95rem;
}

/* Screenshot carousel appearance */
body[data-view="today"] .today-premium-shell .promise-carousel {
  height: 23.1rem;
  min-height: 23.1rem;
  border-radius: 9px;
  border: 0;
  background:
    linear-gradient(90deg, #006047 0%, #006047 42%, rgba(0, 96, 71, 0.8) 50%, rgba(129, 176, 93, 0.98) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 22px 58px rgba(7, 94, 78, 0.2);
}

body[data-view="today"] .today-premium-shell .promise-carousel::before {
  content: "";
  position: absolute;
  inset: 1.1rem 1.2rem;
  z-index: 2;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 65, 50, 0.18);
  pointer-events: none;
}

body[data-view="today"] .today-premium-shell .carousel-slide {
  padding: 2.35rem 2.65rem 2.15rem;
  background: transparent;
  flex: 0 0 100%;
}

body[data-view="today"] .carousel-track {
  display: flex;
  width: 100%;
  transform: translateX(var(--carousel-offset, 0));
}

body[data-view="today"] .today-premium-shell .slide-artwork {
  opacity: 0;
}

body[data-view="today"] .today-premium-shell .carousel-copy {
  width: 40%;
  max-width: 45rem;
  padding-left: 0;
  gap: 0.7rem;
}

body[data-view="today"] .today-premium-shell .carousel-copy h3 {
  max-width: 43rem;
  font-size: clamp(3.3rem, 4.35vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

body[data-view="today"] .today-premium-shell .carousel-copy p:not(.eyebrow) {
  max-width: 43rem;
  font-size: clamp(0.9rem, 0.98vw, 1.05rem);
}

body[data-view="today"] .today-premium-shell .carousel-copy .eyebrow {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.78rem;
}

body[data-view="today"] .today-premium-shell .slide-number {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
}

body[data-view="today"] .today-premium-shell .scripture-strip {
  gap: 0.62rem;
}

body[data-view="today"] .today-premium-shell .scripture-pill {
  padding: 0.48rem 0.84rem;
  background: rgba(255, 255, 255, 0.17);
  font-size: 0.82rem;
}

body[data-view="today"] .carousel-cta-row {
  margin-top: 0.35rem;
  gap: 0.8rem;
}

body[data-view="today"] .carousel-cta-row .primary,
body[data-view="today"] .carousel-cta-row .secondary {
  min-height: 2.45rem;
  border-radius: 8px;
  padding: 0.78rem 1.22rem;
  font-size: 0.95rem;
}

body[data-view="today"] #promisePreviewRail .carousel-preview-rail {
  inset: 1.7rem 2rem 1.9rem auto;
  width: 55.4%;
  gap: 0;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 70px rgba(0, 50, 34, 0.25);
}

body[data-view="today"] .preview-card {
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0;
  padding: 1.05rem;
  opacity: 0.78;
  box-shadow: none;
}

body[data-view="today"] .preview-card img {
  opacity: 0.95;
  filter: saturate(1.08) contrast(1.03) brightness(1.02);
}

body[data-view="today"] .preview-card::after {
  background:
    linear-gradient(180deg, rgba(0, 82, 62, 0.04), rgba(0, 56, 43, 0.26)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent);
}

body[data-view="today"] .preview-card span {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 5px;
  font-size: 0.64rem;
}

body[data-view="today"] .preview-card h4 {
  max-width: 11rem;
  font-size: 0;
  line-height: 1.12;
}

body[data-view="today"] .preview-card p {
  max-width: 11rem;
  font-size: 0;
  line-height: 1.45;
}

body[data-view="today"] .preview-card:nth-child(4),
body[data-view="today"] .preview-card:nth-child(5) {
  padding: 1.1rem;
}

body[data-view="today"] .preview-card:nth-child(4) img,
body[data-view="today"] .preview-card:nth-child(5) img {
  opacity: 0.74;
}

body[data-view="today"] .preview-card:nth-child(4)::after,
body[data-view="today"] .preview-card:nth-child(5)::after {
  background:
    linear-gradient(180deg, rgba(0, 82, 62, 0.08), rgba(0, 56, 43, 0.72)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent);
}

body[data-view="today"] .preview-card:nth-child(4) h4,
body[data-view="today"] .preview-card:nth-child(5) h4 {
  font-size: 1.15rem;
}

body[data-view="today"] .preview-card:nth-child(4) p,
body[data-view="today"] .preview-card:nth-child(5) p {
  font-size: 0.7rem;
}

body[data-view="today"] .carousel-arrow {
  z-index: 6;
  width: 2.8rem;
  height: 2.8rem;
}

body[data-view="today"] .carousel-arrow.prev {
  left: 0.9rem;
}

body[data-view="today"] .carousel-arrow.next {
  right: 0.9rem;
}

body[data-view="today"] .carousel-dots {
  bottom: 1rem;
  z-index: 7;
}

body[data-view="today"] .carousel-dots button {
  width: 2.15rem;
  height: 0.32rem;
}

@media (max-width: 1400px) {
  body[data-view="today"] #promisePreviewRail .carousel-preview-rail {
    width: 47%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-view="today"] .today-premium-shell .carousel-copy {
    width: 48%;
  }
}

body[data-view="today"] .carousel-arrow {
  width: 2.35rem;
  height: 2.35rem;
}

body[data-view="today"] .carousel-arrow.prev {
  left: -0.2rem;
}

body[data-view="today"] .carousel-arrow.next {
  right: -0.2rem;
}

body[data-view="today"] .carousel-dots {
  bottom: 0.75rem;
}

body[data-view="today"] .carousel-dots button {
  width: 1.75rem;
  height: 0.28rem;
}

body[data-view="today"] .today-insight-row {
  grid-template-columns: minmax(20rem, 1.48fr) minmax(18rem, 1fr) minmax(16rem, 0.78fr) minmax(10rem, 0.48fr);
  gap: 0.85rem;
}

body[data-view="today"] .promise-detail-card,
body[data-view="today"] .daily-inspiration-card,
body[data-view="today"] .daily-progress-card,
body[data-view="today"] .streak-card,
body[data-view="today"] .word-card,
body[data-view="today"] .assignment-card,
body[data-view="today"] .integration-card {
  border: 1px solid rgba(219, 231, 226, 0.78);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 42px rgba(20, 54, 46, 0.08);
}

body[data-view="today"] .promise-detail-card,
body[data-view="today"] .daily-inspiration-card,
body[data-view="today"] .daily-progress-card,
body[data-view="today"] .streak-card {
  min-height: 8.5rem;
  padding: 1.15rem 1.25rem;
}

body[data-view="today"] .promise-detail-card .eyebrow::before {
  content: "♨ ";
}

body[data-view="today"] .daily-inspiration-card .eyebrow::before {
  content: "“ ";
}

body[data-view="today"] .daily-progress-card .eyebrow::before {
  content: "◎ ";
}

body[data-view="today"] .streak-card .eyebrow::before {
  content: "♨ ";
}

body[data-view="today"] .promise-detail-card h3 {
  font-size: 1.55rem;
}

body[data-view="today"] .daily-inspiration-card blockquote {
  font-size: 0.95rem;
}

body[data-view="today"] .progress-ring {
  width: 4.9rem;
}

body[data-view="today"] .today-action-grid {
  grid-template-columns: minmax(20rem, 0.95fr) minmax(24rem, 1.2fr) minmax(22rem, 1fr);
  gap: 0.85rem;
}

body[data-view="today"] .word-card,
body[data-view="today"] .assignment-card,
body[data-view="today"] .search-promise-card {
  min-height: 15.3rem;
}

body[data-view="today"] .word-card {
  isolation: isolate;
  background: rgba(255, 255, 255, 0.94);
}

body[data-view="today"] .word-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48%;
  height: 82%;
  background: url("public/images/ads/kingdom-wisdom.png") right bottom / cover no-repeat;
  opacity: 0.82;
  z-index: -1;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}

body[data-view="today"] .word-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 54%, rgba(255, 255, 255, 0.52) 100%);
}

body[data-view="today"] .word-card .eyebrow::before {
  content: "▰ ";
}

body[data-view="today"] .assignment-card .eyebrow::before {
  content: "✣ ";
}

body[data-view="today"] .search-promise-card h3::before {
  content: "⌕ ";
  color: var(--teal-strong);
}

body[data-view="today"] .search-promise-card {
  display: grid;
  align-content: start;
  gap: 1rem;
}

body[data-view="today"] .search-promise-card label {
  display: none;
}

body[data-view="today"] .search-chip-row {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 0.4rem;
}

body[data-view="today"] .search-chip-row button:nth-child(1)::before {
  content: "▶ ";
}

body[data-view="today"] .search-chip-row button:nth-child(2)::before {
  content: "▰ ";
}

body[data-view="today"] .search-chip-row button:nth-child(3)::before {
  content: "♥ ";
  color: #c94444;
}

body[data-view="today"] .search-chip-row button:nth-child(4)::before {
  content: "▤ ";
  color: #d99a20;
}

body[data-view="today"] .today-integrations {
  grid-template-columns: minmax(25rem, 0.78fr) minmax(0, 1.42fr);
  gap: 0.85rem;
  margin-top: 0.95rem;
}

body[data-view="today"] .promise-movie-card,
body[data-view="today"] .clients-promise-card {
  min-height: 17.2rem;
}

body[data-view="today"] .promise-movie-card {
  padding: 1rem;
}

body[data-view="today"] .promise-movie-card > h3::before {
  content: "TeoyubeWorld Video Highlight";
  display: block;
  margin-bottom: 0.35rem;
  color: var(--teal-strong);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-view="today"] .clients-card-header h3::before {
  content: "▦ ";
  color: var(--teal-strong);
}

body[data-view="today"] .promise-movie-detail {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 0.58fr);
  gap: 1rem;
}

body[data-view="today"] .clients-table-wrap {
  max-height: 14.5rem;
}

body[data-view="today"] .clients-table th,
body[data-view="today"] .clients-table td {
  padding: 0.58rem 0.72rem;
  font-size: 0.76rem;
}

body[data-view="today"] .clients-table td:nth-child(2) {
  color: var(--ink);
  font-weight: 900;
}

@media (max-width: 1400px) {
  body[data-view="today"] .carousel-preview-rail {
    width: 43%;
    grid-template-columns: repeat(3, minmax(7rem, 1fr));
  }

  body[data-view="today"] .preview-card:nth-child(n + 4) {
    display: none;
  }

  body[data-view="today"] .today-premium-shell .carousel-copy {
    width: 52%;
  }
}

@media (max-width: 1000px) {
  body[data-view="today"] .app-shell,
  body[data-view="today"] .today-insight-row,
  body[data-view="today"] .today-action-grid,
  body[data-view="today"] .today-integrations {
    grid-template-columns: 1fr;
  }

  body[data-view="today"] .sidebar {
    position: relative;
    height: auto;
  }

  body[data-view="today"] .today-premium-shell .promise-carousel {
    height: auto;
    min-height: 40rem;
  }

  body[data-view="today"] .today-premium-shell .carousel-copy {
    width: 100%;
    height: auto;
    padding-right: 0;
  }

  body[data-view="today"] .carousel-preview-rail {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 1rem;
  }
}

/* Uploaded high-resolution carousel banners */
body[data-view="today"] .today-premium-shell .promise-carousel {
  background: #003f31;
  height: clamp(22rem, 30vw, 36rem);
  min-height: clamp(22rem, 30vw, 36rem);
}

body[data-view="today"] .today-premium-shell .promise-carousel::before {
  display: none;
}

body[data-view="today"] .today-premium-shell .carousel-viewport,
body[data-view="today"] .today-premium-shell .carousel-track {
  height: 100%;
}

body[data-view="today"] .today-premium-shell .carousel-track {
  display: flex;
  width: 100%;
  transform: translate3d(var(--carousel-offset, 0%), 0, 0) !important;
  transition: transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-view="today"] .today-premium-shell .carousel-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body[data-view="today"] .today-premium-shell .slide-artwork.banner-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  opacity: 1;
  border-radius: inherit;
  overflow: hidden;
}

body[data-view="today"] .today-premium-shell .slide-artwork.banner-art::after,
body[data-view="today"] .today-premium-shell .slide-artwork.banner-art .art-glow,
body[data-view="today"] .today-premium-shell .slide-artwork.banner-art .art-symbol {
  display: none;
}

body[data-view="today"] .today-premium-shell .slide-artwork.banner-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1 !important;
  filter: none !important;
  transform: none;
}

body[data-view="today"] .today-premium-shell .carousel-copy,
body[data-view="today"] #promisePreviewRail {
  opacity: 0;
  pointer-events: none;
}

body[data-view="today"] .carousel-arrow {
  opacity: 1;
  z-index: 8;
  background: rgba(255, 255, 255, 0.96);
  color: #006047;
  box-shadow: 0 12px 28px rgba(0, 42, 31, 0.18);
}

body[data-view="today"] .carousel-dots {
  opacity: 1;
  z-index: 8;
}

body[data-view="today"] .carousel-dots button {
  background: rgba(255, 255, 255, 0.28);
}

body[data-view="today"] .carousel-dots button.active {
  background: #eef5bb;
  box-shadow: 0 0 16px rgba(238, 245, 187, 0.52);
}

/* Today page final polish */
body[data-view="today"] .today-premium-shell .slide-artwork.banner-art img {
  object-fit: cover;
  object-position: center;
}

body[data-view="today"] .nav-item::before,
body[data-view="today"] .promise-detail-card .eyebrow::before,
body[data-view="today"] .daily-inspiration-card .eyebrow::before,
body[data-view="today"] .daily-progress-card .eyebrow::before,
body[data-view="today"] .streak-card .eyebrow::before,
body[data-view="today"] .word-card .eyebrow::before,
body[data-view="today"] .assignment-card .eyebrow::before,
body[data-view="today"] .search-promise-card h3::before,
body[data-view="today"] .clients-card-header h3::before,
body[data-view="today"] .search-chip-row button::before {
  font-size: 1.12em;
}

body[data-view="today"] .brand-mark {
  width: 3.35rem;
  height: 3.35rem;
}

body[data-view="today"] .carousel-arrow {
  width: 2.7rem;
  height: 2.7rem;
  font-size: 1.28rem;
}

body[data-view="today"] .saint-card {
  gap: 0.9rem;
  padding: 1.05rem;
}

body[data-view="today"] .saint-profile-head {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.72rem;
}

body[data-view="today"] .saint-avatar {
  width: 3.2rem;
  grid-row: span 2;
}

body[data-view="today"] .active-badge {
  grid-column: 2;
  justify-self: start;
  margin-top: -0.25rem;
  padding: 0.25rem 0.55rem;
}

body[data-view="today"] #sidebarCalling {
  margin-top: 0.2rem;
  max-width: 11rem;
  line-height: 1.45;
}

body[data-view="today"] #openAssessment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.65rem;
  border-color: rgba(8, 117, 111, 0.18);
  color: var(--teal-strong);
  font-size: 0.82rem;
}

body[data-view="today"] #openAssessment::after {
  content: "→";
  font-size: 1.15rem;
}

body[data-view="today"] .today-integrations {
  grid-template-columns: minmax(24rem, 0.92fr) minmax(0, 1.45fr);
  align-items: stretch;
}

body[data-view="today"] .promise-movie-card {
  min-height: 17.2rem;
  padding: 0.9rem;
}

body[data-view="today"] .promise-movie-detail {
  grid-template-columns: minmax(14rem, 1fr) minmax(9rem, 0.58fr);
  align-items: stretch;
  gap: 0.95rem;
}

body[data-view="today"] .promise-youtube-frame {
  min-height: 11.5rem;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #062e27, #0b654d);
}

body[data-view="today"] .promise-movie-detail > div:last-child {
  display: grid;
  align-content: center;
  gap: 0.62rem;
}

body[data-view="today"] .promise-movie-card .secondary,
body[data-view="today"] .promise-movie-card button {
  justify-self: start;
  min-height: 2.55rem;
  border: 1px solid rgba(8, 117, 111, 0.24);
  border-radius: 8px;
  background: #ffffff;
  color: var(--teal-strong);
  font-weight: 900;
}

body[data-view="today"] .promise-movie-card .secondary::after,
body[data-view="today"] .promise-movie-card button::after {
  content: " ↗";
}

body[data-view="today"] .video-button,
body[data-view="today"] .clients-table .video-button,
body[data-view="today"] .clients-table button {
  background: linear-gradient(135deg, #08756f, #0f9f68);
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  min-width: 3.3rem;
  min-height: 1.8rem;
  box-shadow: 0 8px 18px rgba(8, 117, 111, 0.2);
}

body[data-view="today"] .clients-table-wrap {
  max-height: 17.2rem;
}

/* Reference-aligned Today brand and action panels */
body[data-view="today"] .brand-lockup > div::after {
  content: none;
}

body[data-view="today"] .brand-lockup {
  align-items: center;
  gap: 0.78rem;
  padding: 0.7rem 0.45rem 1rem;
}

body[data-view="today"] .brand-mark {
  position: relative;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background: linear-gradient(145deg, #005d4c, #00785d);
  box-shadow: 0 10px 22px rgba(0, 86, 67, 0.18);
}

body[data-view="today"] .brand-mark::before {
  content: "♣";
  color: #f5d36a;
  font-size: 1.45rem;
  line-height: 1;
}

body[data-view="today"] .brand-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.67rem;
  width: 0.56rem;
  height: 0.18rem;
  border-radius: 999px;
  background: #f5d36a;
  transform: translateX(-50%);
}

body[data-view="today"] .brand-subtitle {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

body[data-view="today"] #prayBtn,
body[data-view="today"] #completeAssignment,
body[data-view="today"] #promiseMovieForm .primary,
body[data-view="today"] .video-button,
body[data-view="today"] .clients-table .video-button,
body[data-view="today"] .clients-table button {
  background: linear-gradient(135deg, #005d4c, #00785d);
  color: #ffffff;
  border: 0;
  box-shadow: 0 10px 22px rgba(0, 86, 67, 0.18);
}

body[data-view="today"] #promiseMovieForm .primary {
  border-radius: 0 8px 8px 0;
  min-width: 3.7rem;
  font-size: 0;
}

body[data-view="today"] #promiseMovieForm .primary::before {
  content: "⌕";
  font-size: 1.15rem;
}

body[data-view="today"] #completeAssignment::after {
  content: " ✨";
}

body[data-view="today"] .promise-movie-card {
  min-height: 17.2rem;
  padding: 0.85rem 0.9rem 0.95rem;
}

body[data-view="today"] .promise-movie-card > .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}

body[data-view="today"] .promise-movie-card > .eyebrow::before {
  content: "♜";
  color: var(--teal-strong);
  font-size: 1.05rem;
}

body[data-view="today"] .promise-movie-card > h3::before {
  content: none;
}

body[data-view="today"] .promise-movie-detail {
  grid-template-columns: minmax(14rem, 1fr) minmax(8.4rem, 0.54fr);
  align-items: stretch;
  gap: 1rem;
}

body[data-view="today"] .promise-video-thumbnail {
  position: relative;
  display: block;
  min-height: 12.2rem;
  overflow: hidden;
  border-radius: 8px;
  background: #063d31;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 63, 49, 0.13);
}

body[data-view="today"] .promise-video-thumbnail img {
  width: 100%;
  height: 100%;
  min-height: 12.2rem;
  object-fit: cover;
  display: block;
}

body[data-view="today"] .promise-video-thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 31, 24, 0.45));
}

body[data-view="today"] .promise-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: linear-gradient(135deg, #00785d, #0f9f68);
  color: #ffffff;
  font-size: 1rem;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 24px rgba(0, 63, 49, 0.3);
}

body[data-view="today"] .promise-video-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.6rem;
}

body[data-view="today"] .promise-video-copy h3 {
  font-size: 1.02rem;
  line-height: 1.25;
}

body[data-view="today"] .promise-video-copy p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

body[data-view="today"] .watch-now-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.45rem;
  border: 1px solid rgba(8, 117, 111, 0.18);
  border-radius: 8px;
  background: #ffffff;
  color: var(--teal-strong);
  padding: 0.65rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 900;
}

body[data-view="today"] .watch-now-button::after {
  content: "↗";
}

@media (max-width: 900px) {
  body[data-view="today"] .today-premium-shell .promise-carousel {
    height: clamp(16rem, 60vw, 28rem);
    min-height: clamp(16rem, 60vw, 28rem);
  }
}

/* Final TeoyubeWorld row height alignment */
body[data-view="today"] .today-integrations {
  align-items: stretch;
}

body[data-view="today"] .teoyube-promise-panel,
body[data-view="today"] .clients-promise-card {
  height: 19rem;
  min-height: 19rem;
}

body[data-view="today"] .teoyube-promise-panel {
  display: grid;
}

body[data-view="today"] .promise-movie-card,
body[data-view="today"] .clients-promise-card {
  height: 100%;
}

body[data-view="today"] .promise-movie-detail {
  min-height: 0;
}

body[data-view="today"] .promise-video-thumbnail,
body[data-view="today"] .promise-video-thumbnail img {
  min-height: 13.1rem;
}

body[data-view="today"] .clients-table-wrap {
  max-height: 14.75rem;
  overflow-y: auto;
}

@media (max-width: 900px) {
  body[data-view="today"] .teoyube-promise-panel,
  body[data-view="today"] .clients-promise-card {
    height: auto;
    min-height: 19rem;
  }
}
/* Roadmap final cascade lock: must stay after all page polish */
body[data-view="roadmap"] .app-shell {
  display: grid !important;
  grid-template-columns: 16.25rem minmax(0, 1fr) !important;
  min-height: 100vh;
  background: #f5faf8;
}

body[data-view="roadmap"] .sidebar {
  display: flex !important;
}

body[data-view="roadmap"] main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.55rem 2rem 2rem;
}

body[data-view="roadmap"] .roadmap-system-panel {
  padding-left: 4.65rem;
}

body[data-view="roadmap"] .roadmap-system-panel::before {
  content: "♛";
  position: absolute;
  left: 1.35rem;
  top: 1.5rem;
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #006f54, #008864);
  color: #f7d56f;
  font-size: 1.55rem;
  font-weight: 1000;
  box-shadow: 0 13px 28px rgba(0, 111, 84, 0.18);
}

body[data-view="roadmap"] .roadmap-system-panel .roadmap-module-grid {
  grid-column: 1 / -1;
  margin-left: -3.3rem;
}

body[data-view="roadmap"] .roadmap-module-card,
body[data-view="roadmap"] .roadmap-tech-card {
  position: relative;
  padding-left: 3.85rem !important;
}

body[data-view="roadmap"] .roadmap-card-icon {
  position: absolute;
  left: 0.9rem;
  top: 0.95rem;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 8px;
  background: #e1f4e9;
  color: var(--roadmap-green, #006f54);
  font-size: 1.25rem;
  font-weight: 1000;
  box-shadow: 0 8px 18px rgba(0, 111, 84, 0.12);
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-view="roadmap"] .roadmap-tech-card {
  min-height: 5.55rem !important;
}

body[data-view="roadmap"] .ad-carousel-track {
  width: max-content;
  will-change: transform;
}

body[data-view="roadmap"] .teoyube-ad-carousel:hover .ad-carousel-track {
  animation-play-state: paused;
}

body[data-view="roadmap"] .teoyube-ad-card {
  flex: 0 0 clamp(10.5rem, 11.2vw, 13rem);
  min-width: clamp(10.5rem, 11.2vw, 13rem);
}

body[data-view="roadmap"] .teoyube-ad-card.active {
  flex: 0 0 clamp(12.4rem, 13.3vw, 15rem);
  min-width: clamp(12.4rem, 13.3vw, 15rem);
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="roadmap"] .ad-carousel-track {
    animation: none;
  }
}

@media (max-width: 1200px) {
  body[data-view="roadmap"] .roadmap-system-panel .roadmap-module-grid {
    margin-left: 0;
  }
}

@media (max-width: 980px) {
  body[data-view="roadmap"] .app-shell {
    grid-template-columns: 1fr !important;
  }
}
/* Roadmap badge/icon reliability layer */
body[data-view="roadmap"] .roadmap-system-panel::before {
  content: "TK" !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.02em;
}

body[data-view="roadmap"] .roadmap-card-icon {
  font-size: 0 !important;
  text-transform: uppercase;
}

body[data-view="roadmap"] .roadmap-card-icon::before {
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

body[data-view="roadmap"] .roadmap-module-card:nth-child(1) .roadmap-card-icon::before {
  content: "API";
}

body[data-view="roadmap"] .roadmap-module-card:nth-child(2) .roadmap-card-icon::before {
  content: "CMS";
}

body[data-view="roadmap"] .roadmap-module-card:nth-child(3) .roadmap-card-icon::before {
  content: "KPI";
}

body[data-view="roadmap"] .roadmap-module-card:nth-child(4) .roadmap-card-icon::before {
  content: "AI";
}

body[data-view="roadmap"] .roadmap-module-card:nth-child(5) .roadmap-card-icon::before {
  content: "AI";
}

body[data-view="roadmap"] .roadmap-module-card:nth-child(6) .roadmap-card-icon::before {
  content: "SEC";
}

body[data-view="roadmap"] .roadmap-tech-card:nth-child(1) .roadmap-card-icon::before {
  content: "NX";
}

body[data-view="roadmap"] .roadmap-tech-card:nth-child(2) .roadmap-card-icon::before {
  content: "MOD";
}

body[data-view="roadmap"] .roadmap-tech-card:nth-child(3) .roadmap-card-icon::before {
  content: "AI";
}

body[data-view="roadmap"] .roadmap-tech-card:nth-child(4) .roadmap-card-icon::before {
  content: "API";
}

body[data-view="roadmap"] .roadmap-tech-card:nth-child(5) .roadmap-card-icon::before {
  content: "UX";
}

body[data-view="roadmap"] .roadmap-tech-card:nth-child(6) .roadmap-card-icon::before {
  content: "PRO";
}

body[data-view="roadmap"] .ad-carousel-track {
  transform: translateX(0);
  animation: roadmapJourneyMarqueeReliable 54s linear infinite !important;
}

body[data-view="roadmap"] .teoyube-ad-carousel:hover .ad-carousel-track,
body[data-view="roadmap"] .teoyube-ad-card:hover {
  animation-play-state: paused !important;
}

@keyframes roadmapJourneyMarqueeReliable {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Roadmap icon and Phase 04 alignment fixes */
body[data-view="roadmap"] .roadmap-card-icon::before {
  content: attr(data-icon) !important;
  display: block;
}

body[data-view="roadmap"] .roadmap-tech-card:first-child .roadmap-card-icon::before {
  content: "NX" !important;
}

body[data-view="roadmap"] .roadmap-tech-card:nth-child(4) .roadmap-card-icon::before {
  content: "API" !important;
}

body[data-view="roadmap"] .roadmap-bottom-grid {
  align-items: start !important;
}

body[data-view="roadmap"] .roadmap-tech-panel,
body[data-view="roadmap"] .roadmap-archive {
  align-self: start;
  margin-top: 0 !important;
}

body[data-view="roadmap"] .roadmap-archive {
  padding-top: 1.35rem !important;
}

body[data-view="roadmap"] .roadmap-archive > .eyebrow,
body[data-view="roadmap"] .roadmap-tech-panel > .eyebrow {
  margin-top: 0 !important;
}

body[data-view="roadmap"] .roadmap-archive > h3,
body[data-view="roadmap"] .roadmap-tech-panel > h3 {
  margin-top: 0 !important;
  line-height: 1.18;
}

/* Roadmap Phase 03/04 equal-height alignment and explicit icon lock */
body[data-view="roadmap"] .roadmap-bottom-grid {
  align-items: stretch !important;
}

body[data-view="roadmap"] .roadmap-tech-panel,
body[data-view="roadmap"] .roadmap-archive {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 24rem;
  align-self: stretch !important;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid,
body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
  flex: 1 1 auto;
}

body[data-view="roadmap"] .roadmap-card-icon[data-icon="NX"]::before {
  content: "NX" !important;
}

body[data-view="roadmap"] .roadmap-card-icon[data-icon="API"]::before {
  content: "API" !important;
}

body[data-view="roadmap"] .roadmap-tech-card:first-child .roadmap-card-icon,
body[data-view="roadmap"] .roadmap-tech-card:nth-child(4) .roadmap-card-icon {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Roadmap compact Phase 03/04 height and hard icon display */
body[data-view="roadmap"] .roadmap-tech-panel,
body[data-view="roadmap"] .roadmap-archive {
  min-height: 18rem !important;
  height: auto !important;
  padding-top: 1.05rem !important;
  padding-bottom: 1.05rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid,
body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
  flex: 0 1 auto !important;
}

body[data-view="roadmap"] .roadmap-tech-card {
  min-height: 4.75rem !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article {
  min-height: 3.55rem !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}

body[data-view="roadmap"] .roadmap-stack-icon,
body[data-view="roadmap"] .roadmap-routes-icon {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 0.66rem !important;
  color: var(--roadmap-green, #006f54) !important;
}

body[data-view="roadmap"] .roadmap-stack-icon::before,
body[data-view="roadmap"] .roadmap-routes-icon::before {
  content: none !important;
}
/* Roadmap visibility fix: keep Phase 03/04 compact without cutting content */
body[data-view="roadmap"] .roadmap-bottom-grid {
  align-items: stretch !important;
}

body[data-view="roadmap"] .roadmap-tech-panel,
body[data-view="roadmap"] .roadmap-archive {
  height: auto !important;
  min-height: 19.5rem !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 1rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-compact-details,
body[data-view="roadmap"] .roadmap-archive .roadmap-subphase {
  display: none !important;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.65rem !important;
  margin-top: 0.65rem !important;
}

body[data-view="roadmap"] .roadmap-tech-card {
  min-height: 5.05rem !important;
  overflow: visible !important;
  padding: 0.66rem 0.68rem 0.66rem 3.35rem !important;
}

body[data-view="roadmap"] .roadmap-tech-card .eyebrow {
  font-size: 0.57rem !important;
  line-height: 1.1 !important;
  margin-bottom: 0.2rem !important;
}

body[data-view="roadmap"] .roadmap-tech-card h3 {
  font-size: 0.82rem !important;
  line-height: 1.12 !important;
  margin-bottom: 0.18rem !important;
}

body[data-view="roadmap"] .roadmap-tech-card p {
  font-size: 0.64rem !important;
  line-height: 1.24 !important;
  margin: 0.12rem 0 !important;
}

body[data-view="roadmap"] .roadmap-tech-card .sequence-row {
  gap: 0.24rem !important;
}

body[data-view="roadmap"] .roadmap-tech-card .scripture-pill,
body[data-view="roadmap"] .roadmap-tech-card .status-pill {
  font-size: 0.55rem !important;
  padding: 0.18rem 0.4rem !important;
}

body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.65rem !important;
  margin-top: 0.65rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article {
  min-height: 3.4rem !important;
  padding: 0.55rem 0.65rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid span {
  width: 2.15rem !important;
  height: 2.15rem !important;
  font-size: 1rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid strong {
  font-size: 0.74rem !important;
  line-height: 1.1 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid small {
  font-size: 0.64rem !important;
}

body[data-view="roadmap"] .roadmap-stack-icon,
body[data-view="roadmap"] .roadmap-routes-icon {
  left: 0.72rem !important;
  top: 0.72rem !important;
  width: 2.1rem !important;
  height: 2.1rem !important;
  display: grid !important;
  place-items: center !important;
  background: #e1f4e9 !important;
  color: #006f54 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body[data-view="roadmap"] .roadmap-stack-icon::before,
body[data-view="roadmap"] .roadmap-routes-icon::before,
body[data-view="roadmap"] .roadmap-stack-icon::after,
body[data-view="roadmap"] .roadmap-routes-icon::after {
  content: none !important;
  display: none !important;
}

body[data-view="roadmap"] .roadmap-inline-icon {
  display: block !important;
  width: 1.18rem !important;
  height: 1.18rem !important;
  stroke: #006f54 !important;
}

/* Roadmap tech card chips: replace long stack/routes text with compact icon rows */
body[data-view="roadmap"] .roadmap-tech-icon-list,
body[data-view="roadmap"] .roadmap-route-chip-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.3rem !important;
  margin-top: 0.35rem !important;
}

body[data-view="roadmap"] .roadmap-tech-icon-chip,
body[data-view="roadmap"] .roadmap-route-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28rem !important;
  min-height: 1.28rem !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  background: #edf8f1 !important;
  color: #005d4c !important;
  padding: 0.18rem 0.42rem 0.18rem 0.2rem !important;
  font-size: 0.55rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 111, 84, 0.05) !important;
}

body[data-view="roadmap"] .roadmap-tech-icon-chip span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-view="roadmap"] .roadmap-tech-icon-chip i,
body[data-view="roadmap"] .roadmap-route-chip i {
  display: grid !important;
  flex: 0 0 auto !important;
  width: 1.02rem !important;
  height: 1.02rem !important;
  place-items: center !important;
  border-radius: 0.32rem !important;
  background: linear-gradient(145deg, #006f54, #0a936d) !important;
  color: #ffffff !important;
  font-size: 0.42rem !important;
  font-style: normal !important;
  font-weight: 950 !important;
  letter-spacing: 0.01em !important;
}

body[data-view="roadmap"] .roadmap-route-chip-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-view="roadmap"] .roadmap-route-chip {
  min-width: 0 !important;
  padding-right: 0.34rem !important;
  text-transform: capitalize !important;
}

body[data-view="roadmap"] .roadmap-route-chip i {
  width: 1.28rem !important;
  font-size: 0.38rem !important;
  text-transform: uppercase !important;
}

/* Roadmap Phase 03/04 balanced height: wider-feeling cards, no clipped content */
body[data-view="roadmap"] .roadmap-tech-panel,
body[data-view="roadmap"] .roadmap-archive {
  height: auto !important;
  min-height: 18.2rem !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0.82rem 0.9rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > .eyebrow,
body[data-view="roadmap"] .roadmap-archive > .eyebrow {
  margin-bottom: 0.18rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > h3,
body[data-view="roadmap"] .roadmap-archive > h3 {
  font-size: 1rem !important;
  line-height: 1.08 !important;
  margin-bottom: 0.18rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow),
body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
  font-size: 0.66rem !important;
  line-height: 1.16 !important;
  margin-bottom: 0.42rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid {
  gap: 0.48rem !important;
  margin-top: 0.45rem !important;
}

body[data-view="roadmap"] .roadmap-tech-card {
  min-height: 4.65rem !important;
  padding: 0.52rem 0.56rem 0.52rem 3.05rem !important;
}

body[data-view="roadmap"] .roadmap-tech-card h3 {
  font-size: 0.78rem !important;
}

body[data-view="roadmap"] .roadmap-tech-card p {
  font-size: 0.6rem !important;
  line-height: 1.17 !important;
}

body[data-view="roadmap"] .roadmap-tech-icon-list,
body[data-view="roadmap"] .roadmap-route-chip-grid {
  gap: 0.22rem !important;
  margin-top: 0.26rem !important;
}

body[data-view="roadmap"] .roadmap-tech-icon-chip,
body[data-view="roadmap"] .roadmap-route-chip {
  min-height: 1.12rem !important;
  padding: 0.14rem 0.34rem 0.14rem 0.16rem !important;
  font-size: 0.5rem !important;
}

body[data-view="roadmap"] .roadmap-tech-icon-chip i,
body[data-view="roadmap"] .roadmap-route-chip i {
  width: 0.92rem !important;
  height: 0.92rem !important;
  font-size: 0.36rem !important;
}

body[data-view="roadmap"] .roadmap-route-chip-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
  gap: 0.48rem !important;
  margin-top: 0.45rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article {
  min-height: 3.05rem !important;
  padding: 0.45rem 0.55rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid span {
  width: 1.92rem !important;
  height: 1.92rem !important;
  font-size: 0.92rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid strong {
  font-size: 0.7rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid small {
  font-size: 0.6rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-link-button,
body[data-view="roadmap"] .roadmap-archive .roadmap-link-button {
  min-height: 1.45rem !important;
  padding: 0.24rem 0.52rem !important;
}

/* Phase 04 showcase recreation */
body[data-view="roadmap"] .roadmap-archive {
  position: relative !important;
  grid-column: 1 / -1 !important;
  min-height: 44rem !important;
  padding: 2.45rem 2.25rem 6.2rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 93, 76, 0.09) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 82% 14%, rgba(225, 244, 233, 0.95), transparent 17rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 251, 0.95)) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08) !important;
}

body[data-view="roadmap"] .roadmap-archive::before {
  content: "";
  position: absolute;
  right: 4rem;
  top: 2.15rem;
  z-index: 0;
  width: 20rem;
  height: 10.4rem;
  opacity: 0.92;
  background:
    linear-gradient(180deg, rgba(0, 111, 84, 0.16), rgba(0, 111, 84, 0.04)) 11.3rem 1.9rem / 3.8rem 7.4rem no-repeat,
    linear-gradient(180deg, rgba(0, 111, 84, 0.24), rgba(0, 111, 84, 0.08)) 14rem 0.3rem / 3.8rem 9rem no-repeat,
    linear-gradient(180deg, rgba(0, 111, 84, 0.36), rgba(0, 111, 84, 0.12)) 16.8rem 3.2rem / 3rem 6.1rem no-repeat,
    radial-gradient(circle at 76% 0%, #1d7b60 0 0.35rem, transparent 0.38rem),
    linear-gradient(45deg, transparent 45%, rgba(0, 111, 84, 0.7) 46% 54%, transparent 55%) 16rem 0 / 4rem 4rem no-repeat,
    linear-gradient(90deg, transparent 0 42%, rgba(0, 111, 84, 0.58) 43% 56%, transparent 57%) 16.5rem 0.9rem / 3.5rem 3.2rem no-repeat,
    linear-gradient(180deg, #f9fbfa, #e8f1ec) 2.1rem 1.2rem / 7.6rem 8rem no-repeat,
    radial-gradient(circle at 3.7rem 4rem, #2f8d70 0 0.8rem, transparent 0.85rem),
    radial-gradient(circle at 3.7rem 6.1rem, #2f8d70 0 0.8rem, transparent 0.85rem),
    radial-gradient(circle at 3.7rem 8.2rem, #2f8d70 0 0.8rem, transparent 0.85rem),
    linear-gradient(#9fb8ad, #9fb8ad) 5rem 3.55rem / 3.8rem 0.35rem no-repeat,
    linear-gradient(#9fb8ad, #9fb8ad) 5rem 4.55rem / 5.1rem 0.35rem no-repeat,
    linear-gradient(#9fb8ad, #9fb8ad) 5rem 5.75rem / 3.8rem 0.35rem no-repeat,
    linear-gradient(#9fb8ad, #9fb8ad) 5rem 6.75rem / 5.1rem 0.35rem no-repeat,
    linear-gradient(#9fb8ad, #9fb8ad) 5rem 7.95rem / 3.8rem 0.35rem no-repeat;
  border-radius: 18px;
  filter: drop-shadow(0 22px 36px rgba(0, 93, 76, 0.13));
}

body[data-view="roadmap"] .roadmap-archive::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 8.5rem;
  opacity: 0.92;
  background:
    radial-gradient(circle at 27% 70%, rgba(255, 234, 145, 0.9) 0 2.1rem, transparent 2.2rem),
    linear-gradient(135deg, transparent 0 52%, rgba(0, 93, 76, 0.18) 53%) 0 4.8rem / 13rem 4rem no-repeat,
    linear-gradient(45deg, transparent 0 50%, rgba(0, 93, 76, 0.22) 51%) right bottom / 17rem 5rem no-repeat,
    linear-gradient(12deg, rgba(109, 160, 88, 0.38), transparent 52%) 0 5.5rem / 100% 4rem no-repeat,
    linear-gradient(180deg, transparent, rgba(221, 237, 213, 0.88));
}

body[data-view="roadmap"] .roadmap-archive > .eyebrow,
body[data-view="roadmap"] .roadmap-archive > h3,
body[data-view="roadmap"] .roadmap-archive > p,
body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid,
body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button {
  position: relative !important;
  z-index: 1 !important;
}

body[data-view="roadmap"] .roadmap-archive > .eyebrow {
  color: #005d4c !important;
  font-size: 0.92rem !important;
  font-weight: 1000 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body[data-view="roadmap"] .roadmap-archive > h3 {
  max-width: 58rem !important;
  margin-top: 1.1rem !important;
  color: #061426 !important;
  font-size: clamp(2rem, 3vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
}

body[data-view="roadmap"] .roadmap-archive > h3::after {
  content: "  \1F331";
  color: #2f8d70;
  font-size: 0.82em;
}

body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
  max-width: 57rem !important;
  margin-top: 1.2rem !important;
  color: #5c6973 !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow)::after {
  content: "";
  display: block;
  width: 24rem;
  height: 1rem;
  margin: 1.7rem 0 1.2rem 15.8rem;
  background:
    linear-gradient(90deg, rgba(0, 93, 76, 0.12), rgba(0, 93, 76, 0.38), rgba(0, 93, 76, 0.12)) center / 100% 1px no-repeat,
    radial-gradient(circle, #2f8d70 0 0.18rem, transparent 0.2rem) center / 1.3rem 1rem repeat-x;
  opacity: 0.72;
}

body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
  margin-top: 0.8rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 3.35rem minmax(0, 1fr) 2.5rem !important;
  align-items: center !important;
  gap: 1rem !important;
  min-height: 8.5rem !important;
  padding: 1.25rem 1.25rem !important;
  border: 1px solid rgba(0, 93, 76, 0.1) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06) !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > span {
  display: grid !important;
  width: 3.35rem !important;
  height: 3.35rem !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: #dff3e6 !important;
  color: #006f54 !important;
  font-size: 0 !important;
}

body[data-view="roadmap"] .phase4-widget-icon::before {
  content: "";
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  background: #006f54;
  -webkit-mask: var(--phase4-mask) center / contain no-repeat;
  mask: var(--phase4-mask) center / contain no-repeat;
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="structure"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm2 4v2h10V7H7Zm0 4v2h10v-2H7Zm0 4v2h7v-2H7Z'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="pages"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3h2v4h5v6h3v8h-7v-5h-4v5H3v-8h3V7h5V3Zm-3 6v4h8V9H8Z'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="components"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h4v4H4V4Zm6 0h4v4h-4V4Zm6 0h4v4h-4V4ZM4 10h4v4H4v-4Zm6 0h4v4h-4v-4Zm6 0h4v4h-4v-4ZM4 16h4v4H4v-4Zm6 0h4v4h-4v-4Zm6 0h4v4h-4v-4Z'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="brand"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 5 3.4 8.7 8 10 4.6-1.3 8-5 8-10V5l-8-3Zm0 5a5 5 0 0 1 5 5c0 3.5-5 6-5 6s-5-2.5-5-6a5 5 0 0 1 5-5Zm0 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="database"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3c5 0 9 1.6 9 3.5v11c0 1.9-4 3.5-9 3.5s-9-1.6-9-3.5v-11C3 4.6 7 3 12 3Zm0 2C8 5 5 5.9 5 6.5S8 8 12 8s7-.9 7-1.5S16 5 12 5Zm7 5.1C17.4 11.3 14.7 12 12 12s-5.4-.7-7-1.9V13c0 .6 3 1.5 7 1.5s7-.9 7-1.5v-2.9Zm0 5C17.4 16.3 14.7 17 12 17s-5.4-.7-7-1.9v2.4c0 .6 3 1.5 7 1.5s7-.9 7-1.5v-2.4Z'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="prompts"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 3a4 4 0 0 1 4 4v2h1V7a4 4 0 1 1 4 4h-2v1h2a4 4 0 1 1-4 4v-2h-1v2a4 4 0 1 1-4-4h2v-1H8a4 4 0 1 1 0-8Zm0 2a2 2 0 1 0 0 4h2V7a2 2 0 0 0-2-2Zm7 2v2h2a2 2 0 1 0-2-2ZM7 16a2 2 0 1 0 3-1.7V14H8a2 2 0 0 0-1 2Zm8-2v2a2 2 0 1 0 2-2h-2Z'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="launch"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 9.5 9.5 2 12l7.5 2.5L12 22l2.5-7.5L22 12l-7.5-2.5L12 2Zm0 6a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="deploy"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2c3 2 5 5.5 5 9 0 1.6-.4 3-1.1 4.3L19 19l-4.8-.7L12 22l-2.2-3.7L5 19l3.1-3.7A9 9 0 0 1 7 11c0-3.5 2-7 5-9Zm0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="docs"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 1.5V8h4.5L14 3.5ZM8 11v2h8v-2H8Zm0 4v2h8v-2H8Z'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > div {
  min-width: 0;
}

body[data-view="roadmap"] .roadmap-project-widget-grid strong {
  display: block !important;
  margin-bottom: 0.48rem !important;
  color: #071426 !important;
  font-size: 1.05rem !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid small {
  display: block !important;
  margin-bottom: 0.8rem !important;
  color: #006f54 !important;
  font-size: 0.82rem !important;
  font-weight: 1000 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid p {
  display: block !important;
  margin: 0 !important;
  color: #5c6973 !important;
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > button {
  display: grid !important;
  width: 2.3rem !important;
  height: 2.3rem !important;
  place-items: center !important;
  border: 2px solid rgba(0, 93, 76, 0.13) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #006f54 !important;
  font-size: 0 !important;
  box-shadow: 0 8px 20px rgba(0, 93, 76, 0.08) !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > button::before {
  content: "->";
  font-size: 1.2rem;
  font-weight: 1000;
}

body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button {
  position: absolute !important;
  left: 50% !important;
  bottom: 2.2rem !important;
  z-index: 2 !important;
  display: inline-flex !important;
  width: 28rem !important;
  max-width: calc(100% - 4rem) !important;
  height: 4.4rem !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #006f54, #00513f) !important;
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 1000 !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 18px 40px rgba(0, 93, 76, 0.28) !important;
}

/* Phase 03/04 side-by-side alignment */
body[data-view="roadmap"] .roadmap-bottom-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 1rem !important;
}

body[data-view="roadmap"] .roadmap-archive {
  grid-column: auto !important;
  min-height: 23rem !important;
  padding: 1.05rem 1rem 3.3rem !important;
  border-radius: 14px !important;
}

body[data-view="roadmap"] .roadmap-tech-panel {
  min-height: 23rem !important;
  align-self: stretch !important;
}

body[data-view="roadmap"] .roadmap-archive::before {
  right: 0.7rem !important;
  top: 0.75rem !important;
  width: 8rem !important;
  height: 5.1rem !important;
  opacity: 0.45 !important;
  transform: scale(0.7);
  transform-origin: top right;
}

body[data-view="roadmap"] .roadmap-archive::after {
  height: 3.2rem !important;
  opacity: 0.5 !important;
}

body[data-view="roadmap"] .roadmap-archive > .eyebrow {
  font-size: 0.62rem !important;
}

body[data-view="roadmap"] .roadmap-archive > h3 {
  max-width: 78% !important;
  margin-top: 0.35rem !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.02em !important;
}

body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
  max-width: 72% !important;
  margin-top: 0.35rem !important;
  margin-bottom: 0.55rem !important;
  font-size: 0.66rem !important;
  line-height: 1.25 !important;
}

body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow)::after {
  display: none !important;
}

body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  margin-top: 0.55rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article {
  grid-template-columns: 2rem minmax(0, 1fr) 1.45rem !important;
  gap: 0.5rem !important;
  min-height: 4.6rem !important;
  padding: 0.55rem !important;
  border-radius: 10px !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > span {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 8px !important;
}

body[data-view="roadmap"] .phase4-widget-icon::before {
  width: 1rem !important;
  height: 1rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid strong {
  margin-bottom: 0.18rem !important;
  font-size: 0.7rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid small {
  margin-bottom: 0.2rem !important;
  font-size: 0.58rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid p {
  font-size: 0.54rem !important;
  line-height: 1.22 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > button {
  width: 1.45rem !important;
  height: 1.45rem !important;
  border-width: 1px !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > button::before {
  font-size: 0.78rem !important;
}

body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button {
  bottom: 0.9rem !important;
  width: 15rem !important;
  height: 2.15rem !important;
  border-radius: 9px !important;
  font-size: 0.78rem !important;
}

/* Roadmap Phase 03/04 matching action buttons */
body[data-view="roadmap"] .roadmap-tech-panel {
  position: relative !important;
  padding-bottom: 3.3rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button,
body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button {
  position: absolute !important;
  left: 50% !important;
  bottom: 0.9rem !important;
  z-index: 2 !important;
  display: inline-flex !important;
  width: 15rem !important;
  max-width: calc(100% - 2rem) !important;
  height: 2.15rem !important;
  min-height: 2.15rem !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #006f54, #00513f) !important;
  color: #ffffff !important;
  padding: 0.35rem 0.85rem !important;
  font-size: 0.78rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 14px 30px rgba(0, 93, 76, 0.24) !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button::after,
body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button::after {
  content: "->";
  font-size: 1rem;
  line-height: 1;
}

/* Premium TeoyubeSearch experience */
body[data-view="search"] main {
  background:
    radial-gradient(circle at 82% 8%, rgba(232, 246, 238, 0.9), transparent 18rem),
    linear-gradient(180deg, #fbfdfb, #f3faf6) !important;
}

body[data-view="search"] #search {
  display: grid;
  gap: 1rem;
}

body[data-view="search"] .search-jumbotron {
  position: relative;
  min-height: 16.4rem;
  overflow: hidden;
  border: 1px solid rgba(0, 93, 76, 0.14);
  border-radius: 18px;
  padding: 2rem 2rem 1.25rem;
  background:
    linear-gradient(90deg, rgba(0, 52, 40, 0.96) 0%, rgba(0, 70, 54, 0.9) 48%, rgba(0, 70, 54, 0.36) 100%),
    url("public/images/search/search-purpose-hero.png") right center / cover no-repeat;
  box-shadow: 0 22px 60px rgba(0, 63, 49, 0.16);
}

body[data-view="search"] .search-jumbotron::before {
  content: "";
  position: absolute;
  inset: -25% -5% auto 38%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 245, 174, 0.45), transparent 55%);
  filter: blur(16px);
  pointer-events: none;
}

body[data-view="search"] .search-jumbotron::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 244, 168, 0.22) 0 0.14rem, transparent 0.16rem),
    radial-gradient(circle at 61% 66%, rgba(255, 255, 255, 0.18) 0 0.1rem, transparent 0.12rem),
    linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  background-size: auto, auto, 180% 100%;
  animation: teoyubeSearchShimmer 8s ease-in-out infinite;
  pointer-events: none;
}

body[data-view="search"] .search-jumbotron > * {
  position: relative;
  z-index: 1;
}

body[data-view="search"] .search-jumbotron .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: max-content;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  color: #eafff4;
  padding: 0.38rem 0.72rem;
  background: rgba(0, 40, 31, 0.22);
}

body[data-view="search"] .search-jumbotron .eyebrow::before {
  content: "⌕";
}

body[data-view="search"] .search-jumbotron h3 {
  max-width: 62rem;
  margin: 1rem 0 0.45rem;
  color: #ffffff;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

body[data-view="search"] .search-jumbotron h3 span {
  color: #c7ed80;
}

body[data-view="search"] .search-hero-copy {
  max-width: 48rem;
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
}

body[data-view="search"] .search-form {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) 8rem auto;
  max-width: 64rem;
  gap: 0.45rem;
  padding: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 35px rgba(0, 36, 28, 0.18);
}

body[data-view="search"] .search-form input,
body[data-view="search"] .search-form select {
  min-height: 2.8rem;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  color: #122033;
}

body[data-view="search"] .search-form input:focus,
body[data-view="search"] .search-form select:focus {
  outline: 2px solid rgba(0, 111, 84, 0.18);
}

body[data-view="search"] .search-form .primary {
  min-height: 2.8rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #006f54, #004d3d);
  box-shadow: 0 10px 22px rgba(0, 80, 62, 0.26);
}

body[data-view="search"] .quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  max-width: 72rem;
  margin-top: 1rem;
}

body[data-view="search"] .quick-prompts button {
  border: 0;
  border-radius: 999px;
  background: rgba(246, 255, 250, 0.92);
  color: #092116;
  padding: 0.58rem 0.9rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0, 39, 31, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body[data-view="search"] .quick-prompts button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0, 39, 31, 0.18);
}

body[data-view="search"] .search-results-shell {
  border: 1px solid rgba(0, 93, 76, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  padding: 1.2rem;
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.06);
}

body[data-view="search"] .search-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

body[data-view="search"] .search-results-toolbar .eyebrow {
  margin: 0 0 0.18rem;
  color: #006f54;
}

body[data-view="search"] .search-results-toolbar h3 {
  margin: 0;
  color: #51606b;
  font-size: 0.88rem;
  font-weight: 700;
}

body[data-view="search"] .search-view-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

body[data-view="search"] .search-view-actions button,
body[data-view="search"] .search-view-actions select {
  min-height: 2.2rem;
  border: 1px solid rgba(0, 93, 76, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: #0a3126;
  padding: 0 0.72rem;
  font-weight: 850;
}

body[data-view="search"] .search-view-actions button.active {
  background: #006f54;
  color: #ffffff;
}

body[data-view="search"] .search-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

body[data-view="search"] .search-result-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 93, 76, 0.1);
  border-radius: 14px;
  background: #ffffff;
  padding: 0 0 0.8rem;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

body[data-view="search"] .search-result-card:hover {
  border-color: rgba(0, 111, 84, 0.3);
  box-shadow: 0 24px 55px rgba(0, 63, 49, 0.16);
  transform: translateY(-4px);
}

body[data-view="search"] .search-result-card .thumbnail {
  position: relative;
  height: 8.8rem;
  border-radius: 14px 14px 0 0;
  background-position: center right;
  background-size: cover;
}

body[data-view="search"] .search-bookmark {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 39, 31, 0.58);
  color: #ffffff;
}

body[data-view="search"] .search-result-card > :not(.thumbnail) {
  margin-left: 0.95rem;
  margin-right: 0.95rem;
}

body[data-view="search"] .search-result-card .eyebrow {
  margin-top: 0.8rem;
  color: #57636e;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

body[data-view="search"] .search-result-card h3 {
  margin-top: 0.3rem;
  color: #071426;
  font-size: 1.05rem;
  line-height: 1.18;
}

body[data-view="search"] .search-result-card p {
  color: #4d5d68;
  font-size: 0.78rem;
  line-height: 1.45;
}

body[data-view="search"] .search-result-card .scripture-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

body[data-view="search"] .search-result-card .scripture-pill {
  background: #dff3e6;
  color: #006f54;
}

body[data-view="search"] .search-progress {
  height: 0.26rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e8f2ec;
}

body[data-view="search"] .search-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #006f54, #1c9d72);
}

body[data-view="search"] .result-actions {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1.28fr) minmax(0, 1fr);
  gap: 0.5rem;
  margin-top: 0.85rem;
}

body[data-view="search"] .result-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  min-height: 2.25rem;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 950;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

body[data-view="search"] .result-actions .search-add-table,
body[data-view="search"] .result-actions .search-generate-prayer {
  padding-inline: 0.55rem;
}

body[data-view="search"] .result-actions .icon-only {
  padding: 0;
  border-color: rgba(0, 111, 84, 0.18);
  background: linear-gradient(145deg, #ffffff, #f0faf5);
  color: #005d4c;
}

body[data-view="search"] .result-actions .search-add-table {
  border-color: rgba(0, 111, 84, 0.18);
  background: linear-gradient(145deg, #ffffff, #f5fbf8);
  color: #005d4c;
}

body[data-view="search"] .result-actions .search-generate-prayer {
  border: 0;
  background: linear-gradient(135deg, #006f54, #00513f);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(0, 85, 65, 0.18);
}

body[data-view="search"] .result-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 111, 84, 0.32);
  box-shadow: 0 10px 20px rgba(5, 57, 43, 0.1);
}

body[data-view="search"] .result-actions .search-generate-prayer:hover {
  background: linear-gradient(135deg, #087b5f, #004636);
  box-shadow: 0 13px 24px rgba(0, 85, 65, 0.24);
}

body[data-view="search"] .search-bookmark:hover {
  background: rgba(0, 111, 84, 0.82);
  box-shadow: 0 10px 20px rgba(0, 48, 36, 0.2);
}

body[data-view="search"] .search-bookmark,
body[data-view="search"] .result-actions .icon-only {
  font-size: 0;
  line-height: 1;
}

body[data-view="search"] .search-bookmark::before,
body[data-view="search"] .result-actions .icon-only::before,
body[data-view="search"] .result-actions .search-add-table::before,
body[data-view="search"] .result-actions .search-generate-prayer::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--search-action-mask) center / contain no-repeat;
  mask: var(--search-action-mask) center / contain no-repeat;
}

body[data-view="search"] .search-bookmark::before {
  --search-action-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4.8A2.8 2.8 0 0 1 8.8 2h6.4A2.8 2.8 0 0 1 18 4.8V21l-6-3.5L6 21V4.8Z'/%3E%3C/svg%3E");
  width: 1.05rem;
  height: 1.05rem;
}

body[data-view="search"] .result-actions .icon-only::before {
  --search-action-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4.5A2.5 2.5 0 0 1 7.5 2H17a2 2 0 0 1 2 2v16l-7-4-7 4V4.5Z'/%3E%3Cpath d='M8 6h7'/%3E%3Cpath d='M8 10h5'/%3E%3C/svg%3E");
  width: 1.05rem;
  height: 1.05rem;
}

body[data-view="search"] .result-actions .search-add-table::before {
  --search-action-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.4'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M9 4v16'/%3E%3Cpath d='M15 4v16'/%3E%3Cpath d='M12 12h6'/%3E%3Cpath d='M15 9v6'/%3E%3C/svg%3E");
}

body[data-view="search"] .result-actions .search-generate-prayer::before {
  --search-action-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19c5.5-8.5 10.5-8.5 16-15'/%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M5 19h5'/%3E%3Cpath d='M10 19v-5'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.8'/%3E%3C/svg%3E");
}

body[data-view="search"] .search-feature-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 93, 76, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 15px 42px rgba(15, 23, 42, 0.05);
}

body[data-view="search"] .search-feature-row article {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 1.3rem 1.4rem;
  border-right: 1px solid rgba(0, 93, 76, 0.12);
}

body[data-view="search"] .search-feature-row article:last-child {
  border-right: 0;
}

body[data-view="search"] .search-feature-icon {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  color: #006f54;
}

body[data-view="search"] .search-feature-icon::before {
  font-size: 1.65rem;
  font-weight: 1000;
}

body[data-view="search"] .search-feature-icon[data-icon="book"]::before {
  content: "▱";
}

body[data-view="search"] .search-feature-icon[data-icon="person"]::before {
  content: "●";
}

body[data-view="search"] .search-feature-icon[data-icon="check"]::before {
  content: "✓";
}

body[data-view="search"] .search-feature-icon[data-icon="leaf"]::before {
  content: "♧";
}

body[data-view="search"] .search-feature-row h3 {
  margin: 0 0 0.22rem;
  color: #006f54;
  font-size: 0.9rem;
}

body[data-view="search"] .search-feature-row p {
  margin: 0;
  color: #52616c;
  font-size: 0.76rem;
  line-height: 1.35;
}

body[data-view="search"] .search-feature-icon {
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid rgba(0, 111, 84, 0.12);
  border-radius: 14px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 224, 143, 0.36), transparent 42%),
    linear-gradient(145deg, rgba(232, 247, 240, 0.98), rgba(255, 255, 255, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 22px rgba(5, 57, 43, 0.08);
}

body[data-view="search"] .search-feature-icon::before {
  content: "";
  display: block;
  width: 1.42rem;
  height: 1.42rem;
  background: currentColor;
  -webkit-mask: var(--search-feature-mask) center / contain no-repeat;
  mask: var(--search-feature-mask) center / contain no-repeat;
}

body[data-view="search"] .search-feature-icon[data-icon="book"]::before {
  --search-feature-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H11V4H6.5A2.5 2.5 0 0 0 4 6.5v13Z'/%3E%3Cpath d='M20 19.5A2.5 2.5 0 0 0 17.5 17H13V4h4.5A2.5 2.5 0 0 1 20 6.5v13Z'/%3E%3Cpath d='M11 17v3'/%3E%3Cpath d='M13 17v3'/%3E%3Cpath d='M7 8h2'/%3E%3Cpath d='M15 8h2'/%3E%3C/svg%3E");
}

body[data-view="search"] .search-feature-icon[data-icon="person"]::before {
  --search-feature-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='7' r='3.2'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3Cpath d='M18.5 4.5l1.5 1.5'/%3E%3Cpath d='M20.5 2.5 17 6'/%3E%3Cpath d='m4 5 2 2 4-4'/%3E%3C/svg%3E");
}

body[data-view="search"] .search-feature-icon[data-icon="check"]::before {
  --search-feature-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.7 2.7L16.5 9'/%3E%3Cpath d='M12 3v3'/%3E%3Cpath d='M21 12h-3'/%3E%3C/svg%3E");
}

body[data-view="search"] .search-feature-icon[data-icon="leaf"]::before {
  --search-feature-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21V10'/%3E%3Cpath d='M12 14c-4.5 0-7-2.5-7-7 4.5 0 7 2.5 7 7Z'/%3E%3Cpath d='M12 12c4.5 0 7-2.5 7-7-4.5 0-7 2.5-7 7Z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
}

@keyframes teoyubeSearchShimmer {
  0%,
  100% {
    background-position: 0 0, 0 0, -80% 0;
  }

  50% {
    background-position: 0 0, 0 0, 100% 0;
  }
}

/* Canon clickable card table pagination */
body[data-view="canon"] .canon-dashboard-layout {
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
}

body[data-view="canon"] .canon-grid-shell {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

body[data-view="canon"] .canon-project-grid {
  animation: canonPageFade 0.32s ease both;
}

body[data-view="canon"] .canon-project-card {
  position: relative;
  border-radius: 12px;
}

body[data-view="canon"] .canon-project-card::after {
  content: "▱";
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 39, 31, 0.5);
  color: #ffffff;
  font-weight: 1000;
  opacity: 0.95;
}

body[data-view="canon"] .canon-project-media {
  min-height: 7.2rem;
}

body[data-view="canon"] .canon-project-body {
  gap: 0.55rem;
  padding: 0.75rem;
}

body[data-view="canon"] .canon-project-heading {
  flex-direction: column-reverse;
  gap: 0.35rem;
}

body[data-view="canon"] .canon-project-heading h4 {
  font-size: 0.85rem;
}

body[data-view="canon"] .canon-project-heading button {
  position: absolute;
  right: 0.65rem;
  top: 6.6rem;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body[data-view="canon"] .canon-project-body p {
  font-size: 0.7rem;
  line-height: 1.35;
}

body[data-view="canon"] .canon-avatar-row span {
  width: 1.35rem;
  height: 1.35rem;
}

body[data-view="canon"] .canon-project-footer {
  font-size: 0.68rem;
}

body[data-view="canon"] .canon-project-card progress,
body[data-view="canon"] .canon-detail-panel progress {
  height: 0.34rem;
}

body[data-view="canon"] .canon-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.6rem 0 0.2rem;
}

body[data-view="canon"] .canon-pagination button,
body[data-view="canon"] .canon-page-ellipsis {
  display: grid;
  min-width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid rgba(0, 93, 76, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: #0a3126;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

body[data-view="canon"] .canon-pagination button {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body[data-view="canon"] .canon-pagination button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0, 93, 76, 0.12);
}

body[data-view="canon"] .canon-pagination button.active {
  background: linear-gradient(135deg, #006f54, #00513f);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 93, 76, 0.24);
  animation: canonPagePulse 1.7s ease-in-out infinite;
}

body[data-view="canon"] .canon-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

body[data-view="canon"] .canon-detail-panel {
  animation: canonPageFade 0.28s ease both;
}

body[data-view="canon"] .canon-detail-sticky::before {
  content: "";
  display: block;
  min-height: 10rem;
  margin: -1rem -1rem 0.65rem;
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg, rgba(0, 39, 31, 0.05), rgba(0, 39, 31, 0.25)),
    url("public/images/carousel/divine-direction.png") center / cover no-repeat;
}

body[data-view="canon"] .canon-detail-sticky .primary,
body[data-view="canon"] .canon-detail-sticky .secondary {
  width: 100%;
}

@keyframes canonPageFade {
  from {
    opacity: 0;
    transform: translateY(0.55rem);
  }

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

@keyframes canonPagePulse {
  0%,
  100% {
    box-shadow: 0 12px 28px rgba(0, 93, 76, 0.22);
  }

  50% {
    box-shadow: 0 12px 32px rgba(0, 93, 76, 0.38);
  }
}

@media (max-width: 1100px) {
  body[data-view="canon"] .canon-dashboard-layout {
    grid-template-columns: 1fr;
  }

  body[data-view="canon"] .canon-detail-sticky {
    position: static;
  }
}

@media (max-width: 760px) {
  body[data-view="canon"] .canon-project-grid {
    grid-template-columns: 1fr;
  }

  body[data-view="canon"] .canon-pagination {
    position: sticky;
    bottom: 0.5rem;
    z-index: 4;
    border-radius: 14px;
    background: rgba(245, 250, 248, 0.92);
    backdrop-filter: blur(12px);
  }
}

@media (max-width: 1100px) {
  body[data-view="search"] .search-results,
  body[data-view="search"] .search-feature-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="search"] .search-feature-row article {
    border-bottom: 1px solid rgba(0, 93, 76, 0.12);
  }
}

@media (max-width: 760px) {
  body[data-view="search"] .search-jumbotron {
    padding: 1.25rem;
  }

  body[data-view="search"] .search-form,
  body[data-view="search"] .search-results,
  body[data-view="search"] .search-feature-row {
    grid-template-columns: 1fr;
  }

  body[data-view="search"] .search-results-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Premium Canon Kingdom dashboard */
body[data-view="canon"] {
  --canon-green: #006946;
  --canon-deep: #003f2f;
  --canon-mint: #eaf7f0;
  --canon-gold: #d8a636;
  background:
    radial-gradient(circle at 78% 10%, rgba(0, 105, 70, 0.08), transparent 34rem),
    linear-gradient(135deg, #f8fbf8 0%, #eef7f2 46%, #fff 100%);
}

body[data-view="canon"] main {
  padding: 1.35rem 1.55rem;
}

body[data-view="canon"] .topbar {
  align-items: center;
  margin-bottom: 0.9rem;
  padding: 0;
}

body[data-view="canon"] .topbar .eyebrow {
  color: var(--canon-green);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
}

body[data-view="canon"] #viewTitle {
  color: #0e1629;
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.04em;
}

body[data-view="canon"] #viewTitle::after {
  content: " ✨";
  color: var(--canon-gold);
  font-size: 1.35rem;
  vertical-align: top;
}

body[data-view="canon"] .topbar-actions .secondary,
body[data-view="canon"] .topbar-actions .primary {
  min-height: 3rem;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

body[data-view="canon"] .topbar-actions .primary {
  background: linear-gradient(135deg, #006b4b, #003d2e);
}

body[data-view="canon"] .canon-premium-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 23.5rem);
  gap: 1.35rem;
  align-items: start;
}

body[data-view="canon"] .canon-main-column {
  min-width: 0;
}

body[data-view="canon"] .canon-kingdom-hero {
  position: relative;
  display: grid;
  min-height: 22rem;
  align-content: end;
  gap: 1rem;
  overflow: hidden;
  padding: 2rem 3.2rem 1.35rem;
  border: 1px solid rgba(0, 82, 61, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(0, 41, 31, 0.96) 0%, rgba(0, 58, 43, 0.72) 30%, rgba(0, 58, 43, 0.12) 76%),
    url("public/images/canon/canon-hero-journey.png") center / cover no-repeat;
  box-shadow: 0 22px 50px rgba(11, 39, 32, 0.18);
}

body[data-view="canon"] .canon-kingdom-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 223, 126, 0.18), transparent 18rem),
    linear-gradient(180deg, transparent 45%, rgba(0, 39, 31, 0.72));
}

body[data-view="canon"] .canon-hero-copy,
body[data-view="canon"] .canon-hero-search,
body[data-view="canon"] .canon-quick-chips {
  position: relative;
  z-index: 1;
}

body[data-view="canon"] .canon-hero-copy h3 {
  max-width: 35rem;
  margin: 0;
  color: #fff7dc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.28);
}

body[data-view="canon"] .canon-hero-copy h3 span:first-child {
  color: #9addaf;
}

body[data-view="canon"] .canon-hero-copy h3 span:last-child {
  color: #ffd36d;
}

body[data-view="canon"] .canon-hero-copy p {
  margin-top: 0.9rem;
  color: #ffe698;
  font-weight: 900;
}

body[data-view="canon"] .canon-hero-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 12rem 7.5rem;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 34px rgba(0, 28, 21, 0.16);
}

body[data-view="canon"] .canon-hero-search span {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  color: var(--canon-deep);
  font-size: 1.35rem;
  font-weight: 1000;
}

body[data-view="canon"] .canon-hero-search input,
body[data-view="canon"] .canon-hero-search select {
  min-height: 3.05rem;
  border: 0;
  border-right: 1px solid rgba(0, 82, 61, 0.12);
  background: transparent;
  color: #425466;
  font: inherit;
  font-weight: 700;
}

body[data-view="canon"] .canon-hero-search input:focus,
body[data-view="canon"] .canon-hero-search select:focus {
  outline: 0;
}

body[data-view="canon"] .canon-hero-search .primary {
  min-height: 3.05rem;
  border-radius: 9px;
  background: linear-gradient(135deg, #006b4b, #003d2e);
}

body[data-view="canon"] .canon-quick-chips {
  display: flex;
  gap: 0.72rem;
  flex-wrap: wrap;
}

body[data-view="canon"] .canon-quick-chips button {
  min-height: 2.25rem;
  padding: 0 1.05rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #0f2d25;
  font-weight: 950;
  box-shadow: 0 10px 18px rgba(0, 28, 21, 0.08);
}

body[data-view="canon"] .canon-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.72rem;
  margin: 1.1rem 0 0.95rem;
}

body[data-view="canon"] .canon-kpi-card {
  position: relative;
  min-height: 5.35rem;
  padding: 1rem 1rem 0.9rem 4.25rem;
  border-color: rgba(0, 82, 61, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(18px);
}

body[data-view="canon"] .canon-kpi-card::before {
  position: absolute;
  left: 1rem;
  top: 1.08rem;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 12px;
  background: #e1f4e8;
  color: var(--canon-green);
  box-shadow: inset 0 0 0 1px rgba(0, 105, 70, 0.08);
}

body[data-view="canon"] .canon-kpi-card[data-icon="book"]::before {
  content: "▤";
}

body[data-view="canon"] .canon-kpi-card[data-icon="check"]::before {
  content: "✓";
}

body[data-view="canon"] .canon-kpi-card[data-icon="cycle"]::before {
  content: "↻";
}

body[data-view="canon"] .canon-kpi-card[data-icon="pause"]::before {
  content: "Ⅱ";
}

body[data-view="canon"] .canon-kpi-card[data-icon="trend"]::before {
  content: "↗";
}

body[data-view="canon"] .canon-kpi-card span {
  color: #0b5a42;
  font-size: 0.74rem;
}

body[data-view="canon"] .canon-kpi-card strong {
  color: #00513d;
  font-size: 1.55rem;
  line-height: 1;
}

body[data-view="canon"] .canon-kpi-card small {
  color: #566879;
  font-size: 0.73rem;
}

body[data-view="canon"] .canon-tabs {
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.05rem;
}

body[data-view="canon"] .canon-tab {
  min-height: 2.6rem;
  padding: 0.65rem 1.15rem;
  border-color: rgba(0, 82, 61, 0.08);
  border-radius: 12px;
  color: #0d1729;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

body[data-view="canon"] .canon-tab.active {
  background: linear-gradient(135deg, #006b4b, #003d2e);
  box-shadow: 0 14px 28px rgba(0, 87, 63, 0.22);
}

body[data-view="canon"] .canon-section-block {
  margin-top: 1rem;
}

body[data-view="canon"] .canon-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.55rem;
}

body[data-view="canon"] .canon-section-title h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: #111827;
  font-size: 1.02rem;
}

body[data-view="canon"] .canon-section-title h3::before {
  content: "✦";
  color: var(--canon-green);
}

body[data-view="canon"] .canon-section-title span {
  color: #0b5a42;
  font-weight: 900;
}

body[data-view="canon"] .canon-project-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.78rem;
}

body[data-view="canon"] .canon-project-card {
  border-radius: 12px;
  border-color: rgba(0, 82, 61, 0.08);
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

body[data-view="canon"] .canon-project-card::after {
  content: "";
  display: none;
}

body[data-view="canon"] .canon-project-card.active,
body[data-view="canon"] .canon-project-card:hover {
  border-color: rgba(0, 105, 70, 0.35);
  box-shadow: 0 18px 34px rgba(0, 85, 62, 0.16);
}

body[data-view="canon"] .canon-project-media {
  position: relative;
  min-height: 7.35rem;
  background-position: center;
  background-size: cover;
}

body[data-view="canon"] .canon-project-media::after,
body[data-view="canon"] .canon-recent-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 31, 24, 0.78));
}

body[data-view="canon"] .canon-project-body {
  gap: 0.45rem;
  padding: 0.65rem 0.72rem 0.75rem;
}

body[data-view="canon"] .canon-project-heading {
  flex-direction: column-reverse;
  gap: 0.3rem;
}

body[data-view="canon"] .canon-project-heading h4,
body[data-view="canon"] .canon-recent-card h4 {
  margin: 0;
  color: #071426;
  font-size: 0.82rem;
  line-height: 1.18;
}

body[data-view="canon"] .canon-project-heading button {
  position: absolute;
  right: 0.55rem;
  top: 0.45rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

body[data-view="canon"] .canon-project-body p,
body[data-view="canon"] .canon-recent-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #3e4d5b;
  font-size: 0.68rem;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-view="canon"] .canon-status {
  border-radius: 999px;
  padding: 0.2rem 0.45rem;
  font-size: 0.62rem;
}

body[data-view="canon"] .canon-avatar-row span {
  width: 1.25rem;
  height: 1.25rem;
}

body[data-view="canon"] .canon-project-footer {
  color: #101828;
  font-size: 0.66rem;
}

body[data-view="canon"] .canon-project-card progress,
body[data-view="canon"] .canon-recent-card progress,
body[data-view="canon"] .canon-detail-panel progress {
  height: 0.28rem;
}

body[data-view="canon"] .canon-project-card progress::-webkit-progress-value,
body[data-view="canon"] .canon-recent-card progress::-webkit-progress-value,
body[data-view="canon"] .canon-detail-panel progress::-webkit-progress-value {
  background: linear-gradient(90deg, #006b4b, #15a46f);
}

body[data-view="canon"] .canon-category-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.7rem;
}

body[data-view="canon"] .canon-category-carousel {
  position: relative;
  display: block !important;
  overflow: hidden;
  padding: 0.15rem 0;
  border-radius: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

body[data-view="canon"] .canon-category-track {
  display: flex;
  width: max-content;
  gap: 0.78rem;
  animation: canonCategoryMarquee 32s linear infinite;
  will-change: transform;
}

body[data-view="canon"] .canon-category-carousel:hover .canon-category-track,
body[data-view="canon"] .canon-category-carousel:focus-within .canon-category-track {
  animation-play-state: paused;
}

body[data-view="canon"] .canon-category-card {
  display: grid;
  min-height: 6.8rem;
  align-content: end;
  gap: 0.15rem;
  overflow: hidden;
  padding: 0.75rem;
  border-radius: 12px;
  background-position: center;
  background-size: cover;
  color: #fff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

body[data-view="canon"] .canon-category-carousel .canon-category-card {
  flex: 0 0 clamp(8.6rem, 12.5vw, 12.25rem);
  min-height: 7.15rem;
  box-shadow: 0 16px 30px rgba(5, 57, 43, 0.12);
}

body[data-view="canon"] .canon-category-card span {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

body[data-view="canon"] .canon-category-card span::before {
  content: "✥";
}

body[data-view="canon"] .canon-category-card strong {
  font-size: 0.78rem;
  line-height: 1.05;
}

body[data-view="canon"] .canon-category-card small {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
}

@keyframes canonCategoryMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-50% - 0.39rem), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="canon"] .canon-category-track {
    animation: none;
    transform: none;
  }
}

body[data-view="canon"] .canon-recent-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7rem;
}

body[data-view="canon"] .canon-recent-card {
  overflow: hidden;
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}

body[data-view="canon"] .canon-recent-card > div:last-child {
  display: grid;
  gap: 0.35rem;
  padding: 0.55rem;
}

body[data-view="canon"] .canon-recent-media {
  position: relative;
  min-height: 4.8rem;
  background-position: center;
  background-size: cover;
}

body[data-view="canon"] .canon-pagination {
  justify-content: center;
  margin: 1rem 0 0;
}

body[data-view="canon"] .canon-detail-panel {
  min-width: 0;
}

body[data-view="canon"] .canon-right-rail {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 1rem;
}

body[data-view="canon"] .canon-profile-widget,
body[data-view="canon"] .canon-overview-widget,
body[data-view="canon"] .canon-actions-widget,
body[data-view="canon"] .canon-detail-sticky,
body[data-view="canon"] .canon-recommended-widget,
body[data-view="canon"] .canon-builder-widget {
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(18px);
}

body[data-view="canon"] .canon-profile-widget,
body[data-view="canon"] .canon-overview-widget,
body[data-view="canon"] .canon-actions-widget,
body[data-view="canon"] .canon-detail-sticky,
body[data-view="canon"] .canon-recommended-widget {
  padding: 1rem;
}

body[data-view="canon"] .canon-profile-widget {
  position: relative;
  overflow: hidden;
}

body[data-view="canon"] .canon-profile-widget::after {
  content: none;
  display: none;
  position: absolute;
  right: 1.5rem;
  top: 1.15rem;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 999px;
  background: none;
  opacity: 0.08;
  pointer-events: none;
}

body[data-view="canon"] .canon-profile-head {
  display: grid;
  grid-template-columns: 5.9rem 1fr auto;
  gap: 0.9rem;
  align-items: center;
}

body[data-view="canon"] .canon-profile-avatar {
  display: block;
  width: 5.9rem;
  height: 5.9rem;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 999px;
  background-color: #eaf7ef;
  background-image: url("public/images/sidebar/saint-profile-avatar.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow:
    0 0 0 1px rgba(0, 82, 61, 0.12),
    0 14px 24px rgba(0, 53, 38, 0.18);
}

body[data-view="canon"] .canon-profile-head h3 {
  margin: 0;
  color: #111827;
  font-size: 1.55rem;
}

body[data-view="canon"] .canon-profile-head p {
  margin: 0.15rem 0 0.55rem;
  color: #1f2937;
}

body[data-view="canon"] .canon-profile-head div > span {
  display: inline-flex;
  width: fit-content;
  border-radius: 8px;
  padding: 0.32rem 0.62rem;
  background: #00945f;
  color: #fff;
  font-weight: 900;
}

body[data-view="canon"] .canon-profile-head button {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(0, 82, 61, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #0f513d;
  font-size: 0;
}

body[data-view="canon"] .canon-profile-head button::before {
  content: "✎";
  font-size: 0.9rem;
}

body[data-view="canon"] .canon-xp-row {
  display: grid;
  gap: 0.45rem;
  margin: 0.8rem 0 1rem;
}

body[data-view="canon"] .canon-xp-row span {
  height: 0.35rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #006b4b 62%, #edf3ef 62%);
}

body[data-view="canon"] .canon-xp-row strong {
  justify-self: end;
  color: #0f172a;
}

body[data-view="canon"] .canon-profile-widget blockquote {
  margin: 0;
  padding: 1rem;
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 12px;
  background: #fbfdfc;
  color: #1f2937;
  line-height: 1.5;
}

body[data-view="canon"] .canon-overview-widget h4,
body[data-view="canon"] .canon-actions-widget h4 {
  margin: 0 0 0.8rem;
  color: #0b362a;
}

body[data-view="canon"] .canon-radar {
  display: grid;
  width: 11.5rem;
  height: 11.5rem;
  place-items: center;
  margin: 0.4rem auto;
  clip-path: polygon(50% 0%, 98% 35%, 80% 100%, 20% 100%, 2% 35%);
  background:
    radial-gradient(circle, #006b4b 0 24%, rgba(0, 107, 75, 0.42) 25% 44%, rgba(0, 107, 75, 0.18) 45% 66%, rgba(0, 107, 75, 0.08) 67%);
  box-shadow: inset 0 0 0 1px rgba(0, 82, 61, 0.14);
}

body[data-view="canon"] .radar-core {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border-radius: 999px;
  background: #00513d;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 1000;
}

body[data-view="canon"] .canon-radar-labels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  color: #12382f;
  font-size: 0.68rem;
  text-align: center;
}

body[data-view="canon"] .canon-maturity {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  color: #0f362c;
  font-weight: 900;
}

body[data-view="canon"] .canon-actions-widget {
  display: grid;
  gap: 0.55rem;
}

body[data-view="canon"] .canon-actions-widget button {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 10px;
  background: #fff;
  color: #102a23;
  font-weight: 900;
}

body[data-view="canon"] .canon-detail-sticky {
  position: static;
  gap: 0.6rem;
}

body[data-view="canon"] .canon-detail-sticky::before {
  display: none !important;
}

body[data-view="canon"] .canon-detail-media {
  min-height: 9rem;
  margin: -1rem -1rem 0.4rem;
  border-radius: 14px 14px 0 0;
  background-position: center;
  background-size: cover;
}

body[data-view="canon"] .canon-builder-widget {
  display: grid;
  grid-template-columns: 4.9rem 1fr;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  padding: 1.2rem;
  background:
    linear-gradient(90deg, rgba(0, 47, 36, 0.92), rgba(0, 71, 50, 0.88)),
    url("public/images/carousel/eternal-hope.png") center / cover no-repeat;
  color: #fff;
}

body[data-view="canon"] .canon-builder-badge {
  display: block;
  width: 4.9rem;
  height: 4.9rem;
  border: 1px solid rgba(255, 225, 120, 0.36);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 225, 120, 0.14), rgba(0, 82, 61, 0.1)),
    url("public/images/canon/canon-builder-badge.png") center / cover no-repeat;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

body[data-view="canon"] .canon-builder-widget h3 {
  margin: 0;
  color: #ffe178;
  font-size: 1.25rem;
}

body[data-view="canon"] .canon-builder-widget p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.92);
}

body[data-view="canon"] .canon-builder-widget button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 2.7rem;
  margin-top: 0.7rem;
  border: 1px solid rgba(255, 225, 120, 0.5);
  border-radius: 10px;
  background: rgba(0, 82, 61, 0.55);
  color: #ffe178;
  font-weight: 950;
}

body[data-view="canon"] .canon-recommended-widget {
  display: grid;
  gap: 0.75rem;
}

body[data-view="canon"] .canon-recommended-widget h4 {
  margin: 0;
  color: #0b362a;
  font-size: 0.95rem;
  font-weight: 950;
}

body[data-view="canon"] .canon-recommended-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
}

body[data-view="canon"] .canon-recommended-media {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

body[data-view="canon"] .canon-recommended-image-frame {
  width: 100%;
  aspect-ratio: 1122 / 1402;
  overflow: hidden;
  border-radius: 14px;
  background-color: #fbf4df;
  background-image: var(--canon-recommended-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 12px 24px rgba(0, 50, 38, 0.14);
}

body[data-view="canon"] .canon-recommended-media span {
  display: none;
}

body[data-view="canon"] .canon-recommended-media span::before {
  content: "";
}

body[data-view="canon"] .canon-recommended-controls {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  gap: 0.45rem;
  align-items: center;
}

body[data-view="canon"] .canon-recommended-arrow {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(0, 107, 75, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #006b4b;
  box-shadow: 0 8px 16px rgba(0, 50, 38, 0.1);
  font-size: 1.2rem;
  font-weight: 950;
  line-height: 1;
}

body[data-view="canon"] .canon-recommended-arrow:hover,
body[data-view="canon"] .canon-recommended-arrow:focus-visible {
  background: linear-gradient(135deg, #006b4b, #008a63);
  color: #ffffff;
  transform: translateY(-1px);
}

body[data-view="canon"] .canon-recommended-dots {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.24rem;
}

body[data-view="canon"] .canon-recommended-dots button {
  width: 0.72rem;
  height: 0.28rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 107, 75, 0.22);
  box-shadow: none;
}

body[data-view="canon"] .canon-recommended-dots button.active {
  width: 1.25rem;
  background: linear-gradient(90deg, #f6c85f, #008a63);
}

body[data-view="canon"] .canon-recommended-copy {
  display: grid;
  gap: 0.35rem;
  align-content: space-between;
  min-width: 0;
}

body[data-view="canon"] .canon-recommended-copy h5 {
  margin: 0;
  color: #101828;
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1.18;
}

body[data-view="canon"] .canon-recommended-copy p {
  margin: 0;
  color: #536761;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
}

body[data-view="canon"] .canon-recommended-copy button {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  width: 100%;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #006b4b, #008a63);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(0, 82, 61, 0.18);
  font-size: 0.72rem;
  font-weight: 950;
}

@media (max-width: 1300px) {
  body[data-view="canon"] .canon-premium-layout {
    grid-template-columns: 1fr;
  }

  body[data-view="canon"] .canon-right-rail {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body[data-view="canon"] .canon-hero-search,
  body[data-view="canon"] .canon-kpi-grid,
  body[data-view="canon"] .canon-project-grid,
  body[data-view="canon"] .canon-category-grid,
  body[data-view="canon"] .canon-recent-grid,
  body[data-view="canon"] .canon-right-rail {
    grid-template-columns: 1fr;
  }

  body[data-view="canon"] .canon-kingdom-hero {
    padding: 1.35rem;
  }
}

/* Calling Compass: keep Daily Inspiration inside the TeoyubeWorld hero. */
body[data-view="calling"] .calling-hero-panel {
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem);
  grid-template-areas:
    "copy inspiration"
    "search inspiration"
    "prompts inspiration";
  align-items: center;
  gap: 0.75rem 1.15rem;
  min-height: 18.75rem;
  padding: 1.45rem;
}

body[data-view="calling"] .calling-hero-copy {
  grid-area: copy;
}

body[data-view="calling"] .calling-hero-copy h3 {
  max-width: 39rem;
  margin: 0.4rem 0 0.55rem;
  font-size: clamp(1.95rem, 3.2vw, 3.05rem);
}

body[data-view="calling"] .calling-hero-copy p {
  max-width: 35rem;
  line-height: 1.55;
}

body[data-view="calling"] .calling-hero-panel > .calling-search-form {
  grid-area: search;
  grid-column: auto;
  width: 100%;
  max-width: 44rem;
  margin-top: 0;
}

body[data-view="calling"] .calling-hero-panel > .quick-prompts {
  grid-area: prompts;
  grid-column: auto;
  margin-top: 0;
  gap: 0.38rem;
}

body[data-view="calling"] .calling-daily-inspiration {
  grid-area: inspiration;
  align-self: center;
  justify-self: stretch;
  gap: 0.65rem;
  min-height: 13rem;
  padding: 1.05rem;
}

body[data-view="calling"] .calling-daily-inspiration p {
  font-size: 0.9rem;
  line-height: 1.55;
}

@media (max-width: 1000px) {
  body[data-view="calling"] .calling-hero-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "inspiration"
      "search"
      "prompts";
    min-height: auto;
  }

  body[data-view="calling"] .calling-daily-inspiration {
    min-height: 0;
  }
}

/* Promise Table: compact premium dashboard layout. */
body[data-view="table"] #table {
  gap: 0.9rem;
}

body[data-view="table"] .promise-table-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: stretch;
}

body[data-view="table"] .promise-table-grid .module-card {
  min-height: 0;
  padding: 1rem;
  border-radius: 18px;
  border-color: rgba(0, 82, 61, 0.12);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(0, 54, 41, 0.08);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

body[data-view="table"] .promise-table-grid .module-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 111, 82, 0.22);
  box-shadow: 0 18px 42px rgba(0, 54, 41, 0.12);
}

body[data-view="table"] .promise-table-grid .module-card h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
}

body[data-view="table"] .promise-table-grid .module-card p {
  margin: 0;
  line-height: 1.45;
}

body[data-view="table"] .promise-table-grid .module-card.promise-scrolls-panel {
  grid-column: span 3;
  min-height: 13.5rem;
  padding: 1.2rem;
  background:
    linear-gradient(90deg, rgba(0, 30, 24, 0.78) 0%, rgba(0, 64, 48, 0.52) 46%, rgba(0, 64, 48, 0.08) 100%),
    url("/public/images/promise/promise-scrolls-bg.png") center right / cover no-repeat;
  border-color: rgba(255, 217, 112, 0.34);
  color: #fff;
}

body[data-view="table"] .promise-table-grid .module-card.promise-scrolls-panel::after {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 235, 174, 0.16), transparent 15rem),
    linear-gradient(180deg, rgba(0, 30, 23, 0.02), rgba(0, 30, 23, 0.36));
}

body[data-view="table"] .promise-scrolls-panel h3 {
  max-width: 25rem;
  font-size: clamp(1.75rem, 3.2vw, 3.35rem);
  line-height: 0.98;
}

body[data-view="table"] .promise-scrolls-panel p:not(.eyebrow) {
  max-width: 28rem;
  font-size: 0.92rem;
}

body[data-view="table"] .promise-scrolls-panel .status-rail {
  gap: 0.45rem;
  margin-top: 0.75rem;
}

body[data-view="table"] .promise-scrolls-panel .status-pill {
  min-height: 2rem;
  padding: 0.42rem 0.72rem;
  font-size: 0.78rem;
}

body[data-view="table"] .promise-table-grid .module-card:not(.promise-scrolls-panel) {
  display: grid;
  align-content: center;
  gap: 0.55rem;
}

body[data-view="table"] .promise-table-grid .module-card:nth-child(2) {
  position: relative;
  isolation: isolate;
  grid-column: span 3;
  min-height: clamp(15rem, 27vw, 18rem);
  overflow: hidden;
  align-content: stretch;
  border-color: rgba(255, 232, 170, 0.32);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.34) 28%, rgba(255, 246, 220, 0.1) 52%, rgba(255, 255, 255, 0.18) 100%),
    linear-gradient(180deg, rgba(3, 40, 28, 0.05), rgba(3, 40, 28, 0.16)),
    url("public/images/table/calling-compass-panel-bg.png") center center / cover no-repeat;
  box-shadow: 0 22px 58px rgba(80, 61, 18, 0.14);
}

body[data-view="table"] .promise-table-grid .module-card:nth-child(2)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 51% 48%, rgba(255, 255, 246, 0.12), transparent 12rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 42%, transparent 68%, rgba(255, 247, 222, 0.1));
  pointer-events: none;
}

body[data-view="table"] .promise-table-grid .module-card:nth-child(2) > .eyebrow {
  align-self: start;
  justify-self: start;
  color: #005f4c;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.72);
}

body[data-view="table"] .promise-table-grid .module-card:nth-child(n + 3) {
  grid-column: span 2;
}

body[data-view="table"] .mini-compass {
  width: min(13rem, 100%);
  min-height: 10.5rem;
  margin: 0 auto;
  align-self: center;
  justify-self: center;
  border-color: rgba(0, 93, 76, 0.12);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.94) 0 30%, rgba(233, 246, 239, 0.78) 31% 100%);
  box-shadow:
    0 18px 42px rgba(0, 75, 55, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
}

body[data-view="table"] .mini-compass span {
  color: #11231f;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.72);
}

body[data-view="table"] .mini-compass strong {
  color: #00624e;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.86);
}

body[data-view="table"] .promise-search-feed {
  display: grid;
  grid-template-columns: minmax(17rem, 0.82fr) minmax(0, 1.65fr);
  grid-template-areas:
    "search search"
    "player results";
  gap: 0.85rem;
  margin-top: 0.85rem;
  padding: 0.85rem;
  border: 1px solid rgba(0, 82, 61, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 250, 244, 0.74)),
    radial-gradient(circle at top right, rgba(0, 115, 84, 0.08), transparent 34rem);
  box-shadow: 0 20px 54px rgba(0, 54, 41, 0.08);
}

body[data-view="table"] .promise-feed-search {
  grid-area: search;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.42rem;
  border: 1px solid rgba(0, 82, 61, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body[data-view="table"] .promise-feed-search input {
  min-height: 2.65rem;
  padding: 0.65rem 0.85rem;
  border: 0;
  border-radius: 12px;
  background: rgba(245, 249, 246, 0.92);
  outline: none;
}

body[data-view="table"] .promise-feed-search input:focus {
  box-shadow: 0 0 0 3px rgba(0, 111, 82, 0.12);
}

body[data-view="table"] .promise-feed-search .primary {
  min-height: 2.65rem;
  padding-inline: 1.05rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #007a58, #004d3b);
  box-shadow: 0 12px 24px rgba(0, 87, 64, 0.18);
}

body[data-view="table"] .promise-video-panel {
  grid-area: player;
  align-self: start;
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 0.65rem;
  min-height: 0;
  padding: 0.85rem;
  border-radius: 18px;
  border: 1px solid rgba(0, 82, 61, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 249, 0.92));
  box-shadow: 0 16px 38px rgba(0, 54, 41, 0.09);
}

body[data-view="table"] .promise-video-panel h3 {
  margin: 0;
  color: #053f33;
  font-size: 1rem;
}

body[data-view="table"] .promise-video-panel p {
  margin: 0;
  color: #58706a;
  font-size: 0.86rem;
  line-height: 1.45;
}

body[data-view="table"] .promise-table-video-frame {
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border-radius: 15px;
  background: #062f26;
  box-shadow: 0 14px 30px rgba(0, 44, 34, 0.18);
}

body[data-view="table"] .promise-search-list {
  grid-area: results;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.25rem, 1fr));
  gap: 0.72rem;
  max-height: min(58vh, 42rem);
  padding: 0.05rem 0.2rem 0.2rem 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-view="table"] .promise-search-list::-webkit-scrollbar,
body[data-view="table"] .teoyube-table-scroll::-webkit-scrollbar {
  width: 0.55rem;
  height: 0.55rem;
}

body[data-view="table"] .promise-search-list::-webkit-scrollbar-thumb,
body[data-view="table"] .teoyube-table-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(0, 90, 68, 0.28);
}

body[data-view="table"] .promise-search-item {
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr);
  gap: 0.72rem;
  min-height: 8rem;
  padding: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(0, 82, 61, 0.11);
  border-radius: 17px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 249, 244, 0.9)),
    radial-gradient(circle at top left, rgba(245, 197, 66, 0.12), transparent 12rem);
  box-shadow: 0 12px 28px rgba(0, 54, 41, 0.075);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

body[data-view="table"] .promise-search-item:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 111, 82, 0.24);
  box-shadow: 0 18px 38px rgba(0, 54, 41, 0.12);
}

body[data-view="table"] .promise-search-item:first-child {
  border-top: 1px solid rgba(0, 82, 61, 0.11);
}

body[data-view="table"] .promise-search-item img {
  width: 5.8rem;
  height: 100%;
  min-height: 6.6rem;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 10px 22px rgba(0, 42, 32, 0.14);
}

body[data-view="table"] .promise-search-item > div {
  display: grid;
  align-content: start;
  min-width: 0;
}

body[data-view="table"] .promise-search-item h3 {
  margin: 0 0 0.28rem;
  color: #0b2f2a;
  font-size: 0.88rem;
  line-height: 1.16;
  letter-spacing: 0;
  text-transform: none;
}

body[data-view="table"] .promise-search-item p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #5b6f69;
  font-size: 0.75rem;
  line-height: 1.36;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body[data-view="table"] .promise-watch-video {
  justify-self: start;
  min-height: 2rem;
  margin-top: 0.55rem;
  padding: 0.42rem 0.78rem;
  border: 1px solid rgba(0, 98, 72, 0.18);
  border-radius: 999px;
  background: linear-gradient(135deg, #007a58, #00533e);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(0, 87, 64, 0.16);
}

body[data-view="table"] .promise-watch-video:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0, 87, 64, 0.22);
}

body[data-view="table"] .clients-promise-card {
  min-height: 0;
  padding: 1rem;
  border-radius: 20px;
}

body[data-view="table"] .clients-card-header {
  margin-bottom: 0.7rem;
}

body[data-view="table"] .teoyube-table-scroll {
  max-height: min(56vh, 38rem);
  border-top-color: rgba(0, 82, 61, 0.1);
}

@media (max-width: 1180px) {
  body[data-view="table"] .promise-table-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="table"] .promise-scrolls-panel,
  body[data-view="table"] .promise-table-grid .module-card:nth-child(2),
  body[data-view="table"] .promise-table-grid .module-card:nth-child(n + 3) {
    grid-column: auto;
  }

  body[data-view="table"] .promise-search-feed {
    grid-template-columns: 1fr;
    grid-template-areas:
      "search"
      "player"
      "results";
  }

  body[data-view="table"] .promise-video-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  body[data-view="table"] .promise-table-grid,
  body[data-view="table"] .promise-feed-search {
    grid-template-columns: 1fr;
  }

  body[data-view="table"] .promise-search-feed {
    padding: 0.7rem;
    border-radius: 18px;
  }

  body[data-view="table"] .promise-search-list {
    grid-template-columns: 1fr;
    max-height: none;
    overflow: visible;
  }

  body[data-view="table"] .promise-search-item {
    grid-template-columns: 4.85rem minmax(0, 1fr);
  }

  body[data-view="table"] .promise-search-item img {
    width: 4.85rem;
    min-height: 5.7rem;
  }

  body[data-view="table"] .promise-scrolls-panel {
    min-height: 15rem;
  }
}

/* Keep the uploaded Promise Scrolls artwork visible after compact table-card styles apply. */
body[data-view="table"] #table .promise-table-grid .module-card.promise-scrolls-panel {
  grid-column: span 3;
  position: relative;
  min-height: clamp(14rem, 20vw, 18rem);
  padding: clamp(1.15rem, 2vw, 1.55rem);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(0, 38, 30, 0.62) 0%, rgba(0, 64, 49, 0.18) 54%, rgba(255, 245, 199, 0.02) 100%),
    url("/public/images/promise/promise-scrolls-bg.png") center right / cover no-repeat;
  border-color: rgba(245, 197, 66, 0.34);
  color: #fff;
  box-shadow: 0 22px 52px rgba(0, 68, 50, 0.2);
}

body[data-view="table"] #table .promise-table-grid .module-card.promise-scrolls-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/public/images/promise/promise-scrolls-bg.png") center center / cover no-repeat;
  opacity: 1;
  transform: scale(1.01);
}

body[data-view="table"] #table .promise-table-grid .module-card.promise-scrolls-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0, 38, 30, 0.74) 0%, rgba(0, 64, 49, 0.3) 48%, rgba(255, 245, 199, 0.08) 100%),
    radial-gradient(circle at 85% 15%, rgba(255, 231, 160, 0.24), transparent 14rem);
  pointer-events: none;
}

body[data-view="table"] #table .promise-table-grid .module-card.promise-scrolls-panel > * {
  position: relative;
  z-index: 1;
}

body[data-view="table"] #table .promise-scrolls-panel h3,
body[data-view="table"] #table .promise-scrolls-panel p {
  text-shadow: 0 2px 16px rgba(0, 24, 18, 0.45);
}

@media (max-width: 1180px) {
  body[data-view="table"] #table .promise-table-grid .module-card.promise-scrolls-panel {
    grid-column: auto;
    min-height: 14.5rem;
    background-position: 62% center;
  }
}

/* Fallback: keep the Promise Scrolls artwork visible even before the body view flag is applied. */
#table .promise-table-grid .module-card.promise-scrolls-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(0, 38, 30, 0.62) 0%, rgba(0, 64, 49, 0.18) 54%, rgba(255, 245, 199, 0.02) 100%),
    url("/public/images/promise/promise-scrolls-bg.png") center right / cover no-repeat;
  color: #fff;
}

#table .promise-table-grid .module-card.promise-scrolls-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/public/images/promise/promise-scrolls-bg.png") center right / cover no-repeat;
  opacity: 1;
}

#table .promise-table-grid .module-card.promise-scrolls-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0, 38, 30, 0.62) 0%, rgba(0, 64, 49, 0.18) 54%, rgba(255, 245, 199, 0.02) 100%),
    radial-gradient(circle at 82% 18%, rgba(255, 231, 160, 0.18), transparent 13rem);
  pointer-events: none;
}

#table .promise-table-grid .module-card.promise-scrolls-panel > * {
  position: relative;
  z-index: 1;
}

/* Promise Table feed rescue: keep the feed intro full-width and let cards grow naturally. */
body[data-view="table"] .promise-search-feed {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "search"
    "player"
    "results" !important;
  align-items: stretch !important;
  gap: 1rem !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 1rem !important;
}

body[data-view="table"] .promise-feed-search {
  grid-area: search !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body[data-view="table"] .promise-video-panel {
  grid-area: player !important;
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 1rem 1.15rem !important;
  border-radius: 20px !important;
}

body[data-view="table"] .promise-video-panel iframe,
body[data-view="table"] .promise-video-panel video,
body[data-view="table"] .promise-table-video-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
}

body[data-view="table"] .promise-search-list {
  grid-area: results !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)) !important;
  align-items: stretch !important;
  gap: 1rem !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

body[data-view="table"] .promise-search-item {
  display: grid !important;
  grid-template-columns: 7.25rem minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 0.85rem !important;
  width: 100% !important;
  height: auto !important;
  min-height: 11rem !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0.8rem !important;
}

body[data-view="table"] .promise-search-item img {
  width: 7.25rem !important;
  height: 9.25rem !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
}

body[data-view="table"] .promise-search-item > div {
  display: flex !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  flex-direction: column !important;
}

body[data-view="table"] .promise-search-item h3 {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.22 !important;
}

body[data-view="table"] .promise-search-item p {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

body[data-view="table"] .promise-watch-video {
  align-self: flex-start !important;
  margin-top: auto !important;
}

body[data-view="table"] #table,
body[data-view="table"] #table .view-shell,
body[data-view="table"] #table .promise-table-grid,
body[data-view="table"] #table .promise-search-feed,
body[data-view="table"] #promiseTableSearchResults,
body[data-view="table"] #promiseTableVideoPanel {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 900px) {
  body[data-view="table"] .promise-search-feed {
    padding: 0.85rem !important;
  }

  body[data-view="table"] .promise-search-list {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important;
  }

  body[data-view="table"] .promise-search-item {
    grid-template-columns: 6.25rem minmax(0, 1fr) !important;
    min-height: 9.5rem !important;
  }

  body[data-view="table"] .promise-search-item img {
    width: 6.25rem !important;
    height: 8rem !important;
  }
}

@media (max-width: 640px) {
  body[data-view="table"] .promise-feed-search {
    grid-template-columns: 1fr !important;
  }

  body[data-view="table"] .promise-search-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-view="table"] .promise-search-item {
    grid-template-columns: 1fr !important;
  }

  body[data-view="table"] .promise-search-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Promise Table fallback: apply the same feed layout before the view flag catches up. */
#table .promise-search-feed {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "search"
    "player"
    "results" !important;
  gap: 1rem !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#table .promise-feed-search {
  grid-area: search !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#table .promise-video-panel {
  grid-area: player !important;
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#table .promise-search-list {
  grid-area: results !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)) !important;
  align-items: stretch !important;
  gap: 1rem !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

#table .promise-search-item {
  display: grid !important;
  grid-template-columns: 7.25rem minmax(0, 1fr) !important;
  gap: 0.85rem !important;
  width: 100% !important;
  height: auto !important;
  min-height: 11rem !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0.8rem !important;
}

#table .promise-search-item img {
  width: 7.25rem !important;
  height: 9.25rem !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
}

#table .promise-search-item > div,
#table .promise-search-item h3,
#table .promise-search-item p {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
}

#table .promise-search-item > div {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
}

#table .promise-search-item p {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

#table .promise-watch-video {
  align-self: flex-start !important;
  margin-top: auto !important;
}

@media (max-width: 900px) {
  #table .promise-search-list {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important;
  }

  #table .promise-search-item {
    grid-template-columns: 6.25rem minmax(0, 1fr) !important;
    min-height: 9.5rem !important;
  }

  #table .promise-search-item img {
    width: 6.25rem !important;
    height: 8rem !important;
  }
}

@media (max-width: 640px) {
  #table .promise-feed-search,
  #table .promise-search-item {
    grid-template-columns: 1fr !important;
  }

  #table .promise-search-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #table .promise-search-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Promise Table compact premium panels and YouTube presentation. */
body[data-view="table"] #table .promise-table-grid {
  gap: 0.9rem !important;
}

body[data-view="table"] #table .promise-table-grid .module-card:nth-child(3),
body[data-view="table"] #table .promise-table-grid .module-card:nth-child(4),
body[data-view="table"] #table .promise-table-grid .module-card:nth-child(5) {
  position: relative;
  display: grid !important;
  grid-template-columns: 5.1rem minmax(0, 1fr);
  grid-template-areas:
    "icon eyebrow"
    "icon title"
    "icon body";
  align-content: center;
  align-items: center;
  column-gap: 1rem;
  min-height: 8.6rem !important;
  padding: 1.05rem 1.2rem !important;
  overflow: hidden;
  border: 1px solid rgba(0, 82, 61, 0.08) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(251, 254, 252, 0.92)),
    radial-gradient(circle at 8% 18%, rgba(226, 244, 235, 0.72), transparent 9rem) !important;
  box-shadow: 0 14px 34px rgba(13, 52, 42, 0.07) !important;
}

body[data-view="table"] #table .promise-table-grid .module-card:nth-child(3)::before,
body[data-view="table"] #table .promise-table-grid .module-card:nth-child(4)::before,
body[data-view="table"] #table .promise-table-grid .module-card:nth-child(5)::before {
  grid-area: icon;
  content: "";
  display: block;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(222, 243, 231, 0.96), rgba(239, 250, 244, 0.9)),
    radial-gradient(circle at 50% 42%, rgba(0, 111, 84, 0.12), transparent 58%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 111, 84, 0.08),
    0 12px 24px rgba(0, 89, 66, 0.08);
}

body[data-view="table"] #table .promise-table-grid .module-card:nth-child(3)::after,
body[data-view="table"] #table .promise-table-grid .module-card:nth-child(4)::after,
body[data-view="table"] #table .promise-table-grid .module-card:nth-child(5)::after {
  grid-area: icon;
  content: "";
  justify-self: center;
  align-self: center;
  width: 2.25rem;
  height: 2.25rem;
  background: #007258;
  -webkit-mask: var(--table-summary-icon) center / contain no-repeat;
  mask: var(--table-summary-icon) center / contain no-repeat;
}

body[data-view="table"] #table .promise-table-grid .module-card:nth-child(3)::after {
  --table-summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 4 15h16L12 3Zm0 4.4 4.3 6.6H7.7L12 7.4ZM3 19h18v2H3v-2Zm8-6h2v3h-2v-3Z'/%3E%3C/svg%3E");
}

body[data-view="table"] #table .promise-table-grid .module-card:nth-child(4)::after {
  --table-summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h11a2 2 0 0 1 2 2v16H7a3 3 0 0 1-3-3V5a2 2 0 0 1 2-2Zm1 2v12.1A3.8 3.8 0 0 1 8 17h9V5H7Zm1 4h7v2H8V9Zm0 4h6v2H8v-2Zm0 6a1 1 0 0 0-1 1h10v-1H8Z'/%3E%3C/svg%3E");
}

body[data-view="table"] #table .promise-table-grid .module-card:nth-child(5)::after {
  --table-summary-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm0 4.2 1.5 3.1 3.4.5-2.5 2.4.6 3.4-3-1.6-3 1.6.6-3.4-2.5-2.4 3.4-.5L12 6.2Z'/%3E%3C/svg%3E");
}

body[data-view="table"] #table .promise-table-grid .module-card:nth-child(3) .eyebrow,
body[data-view="table"] #table .promise-table-grid .module-card:nth-child(4) .eyebrow,
body[data-view="table"] #table .promise-table-grid .module-card:nth-child(5) .eyebrow {
  grid-area: eyebrow;
  margin: 0 0 0.12rem !important;
  color: #007258;
  font-size: 0.66rem;
}

body[data-view="table"] #table .promise-table-grid .module-card:nth-child(3) h3,
body[data-view="table"] #table .promise-table-grid .module-card:nth-child(4) h3,
body[data-view="table"] #table .promise-table-grid .module-card:nth-child(5) h3 {
  grid-area: title;
  color: #071426;
  font-size: clamp(1.15rem, 1.55vw, 1.45rem) !important;
  line-height: 1.08;
}

body[data-view="table"] #table .promise-table-grid .module-card:nth-child(3) p,
body[data-view="table"] #table .promise-table-grid .module-card:nth-child(4) p,
body[data-view="table"] #table .promise-table-grid .module-card:nth-child(5) p {
  grid-area: body;
  max-width: 24rem;
  color: #4f625d;
  font-size: 0.82rem;
  line-height: 1.45;
}

body[data-view="table"] #table .promise-table-grid .module-card:nth-child(3) progress {
  grid-column: 2;
  width: min(13rem, 78%);
  height: 0.48rem;
  margin-top: 0.35rem;
}

body[data-view="table"] #table .promise-search-feed {
  gap: 0.8rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-view="table"] #table .promise-feed-search {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.6rem !important;
  align-items: center !important;
  padding: 0.42rem !important;
  border: 1px solid rgba(0, 82, 61, 0.08) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 12px 28px rgba(13, 52, 42, 0.06) !important;
}

body[data-view="table"] #table .promise-feed-search::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  margin-left: 0.65rem;
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  z-index: 1;
  pointer-events: none;
  border: 2px solid #7d928d;
  border-radius: 999px;
  box-shadow: 0.48rem 0.48rem 0 -0.36rem #7d928d;
}

body[data-view="table"] #table .promise-feed-search input {
  grid-row: 1;
  grid-column: 1;
  min-height: 2.9rem !important;
  padding-left: 2.45rem !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #233631 !important;
  font-size: 0.9rem !important;
}

body[data-view="table"] #table .promise-feed-search .primary {
  grid-row: 1;
  grid-column: 2;
  min-height: 2.85rem !important;
  padding: 0 1.25rem !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 24px rgba(0, 103, 77, 0.18) !important;
}

body[data-view="table"] #table .promise-feed-search .primary::before {
  content: "";
  display: inline-block;
  width: 0.86rem;
  height: 0.86rem;
  margin-right: 0.45rem;
  vertical-align: -0.12rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  box-shadow: 0.42rem 0.42rem 0 -0.3rem currentColor;
}

body[data-view="table"] #table .promise-video-panel {
  display: grid !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(0, 82, 61, 0.08) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 38px rgba(13, 52, 42, 0.08) !important;
}

body[data-view="table"] #table .promise-table-video-frame {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-height: min(54vh, 32rem) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 13px 13px 0 0 !important;
  background: #14211d !important;
}

body[data-view="table"] #table .promise-table-video-frame iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

body[data-view="table"] #table .promise-video-panel h3,
body[data-view="table"] #table .promise-video-panel p {
  margin: 0 !important;
  background: #fff !important;
}

body[data-view="table"] #table .promise-video-panel h3 {
  padding: 0.95rem 1.1rem 0.2rem !important;
  color: #071426 !important;
  font-size: 1.05rem !important;
  line-height: 1.18 !important;
}

body[data-view="table"] #table .promise-video-panel p {
  padding: 0 1.1rem 1rem !important;
  color: #536762 !important;
  font-size: 0.82rem !important;
  line-height: 1.42 !important;
}

body[data-view="table"] #table .promise-search-list {
  margin-top: 0.4rem !important;
}

@media (max-width: 1180px) {
  body[data-view="table"] #table .promise-table-grid .module-card:nth-child(3),
  body[data-view="table"] #table .promise-table-grid .module-card:nth-child(4),
  body[data-view="table"] #table .promise-table-grid .module-card:nth-child(5) {
    grid-column: auto !important;
  }
}

@media (max-width: 720px) {
  body[data-view="table"] #table .promise-table-grid .module-card:nth-child(3),
  body[data-view="table"] #table .promise-table-grid .module-card:nth-child(4),
  body[data-view="table"] #table .promise-table-grid .module-card:nth-child(5) {
    grid-template-columns: 4.4rem minmax(0, 1fr);
    min-height: 7.5rem !important;
    padding: 0.95rem !important;
  }

  body[data-view="table"] #table .promise-feed-search {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-view="table"] #table .promise-feed-search .primary {
    grid-row: 2;
    grid-column: 1;
    width: 100%;
  }
}

/* Calling Compass premium dashboard alignment. */
body[data-view="calling"] #calling {
  gap: 0;
}

body[data-view="calling"] .calling-premium-page {
  display: grid;
  gap: 0.85rem;
  max-width: 100%;
}

body[data-view="calling"] .calling-premium-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.15rem;
}

body[data-view="calling"] .calling-premium-head h3 {
  font-size: clamp(2rem, 2.8vw, 2.85rem);
  line-height: 1.02;
}

body[data-view="calling"] .calling-premium-head .eyebrow {
  margin-bottom: 0.25rem;
  color: #005d49;
  letter-spacing: 0.04em;
}

body[data-view="calling"] .calling-premium-actions .secondary,
body[data-view="calling"] .calling-premium-actions .primary {
  min-height: 2.7rem;
  padding: 0.72rem 1rem;
  border-radius: 10px;
}

body[data-view="calling"] .calling-premium-grid {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(18rem, 3fr);
  gap: 1rem;
  align-items: start;
}

body[data-view="calling"] .calling-main-column,
body[data-view="calling"] .calling-right-rail {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

body[data-view="calling"] .calling-right-rail {
  position: sticky;
  top: 1rem;
}

body[data-view="calling"] .calling-hero-panel {
  grid-template-columns: minmax(0, 1fr) minmax(14.5rem, 17rem);
  gap: 0.8rem 1rem;
  min-height: clamp(17rem, 28vw, 20.5rem);
  padding: clamp(1.25rem, 2vw, 1.65rem);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(4, 42, 33, 0.15);
}

body[data-view="calling"] .calling-hero-copy h3 {
  max-width: 38rem;
  margin: 0.35rem 0 0.55rem;
  font-size: clamp(2.05rem, 3.25vw, 3.25rem);
  line-height: 1.08;
}

body[data-view="calling"] .calling-hero-copy p {
  max-width: 35rem;
  font-size: 0.96rem;
}

body[data-view="calling"] .calling-search-form {
  max-width: 44rem;
  padding: 0.38rem;
}

body[data-view="calling"] .calling-search-form input {
  min-height: 2.85rem;
}

body[data-view="calling"] .calling-search-icon,
body[data-view="calling"] .calling-voice-button,
body[data-view="calling"] .calling-search-form .primary {
  width: 2.55rem;
  height: 2.55rem;
}

body[data-view="calling"] .calling-hero-panel .quick-prompts {
  gap: 0.38rem;
}

body[data-view="calling"] .calling-hero-panel .quick-prompts span,
body[data-view="calling"] .calling-hero-panel .cluster-nav-chip {
  font-size: 0.76rem;
}

body[data-view="calling"] .calling-hero-panel .cluster-nav-chip {
  min-height: 2rem;
  padding: 0.44rem 0.72rem;
  border-radius: 999px;
}

body[data-view="calling"] .calling-daily-inspiration {
  align-self: stretch;
  align-content: center;
  gap: 0.62rem;
  min-height: 12.4rem;
  padding: 1rem;
  border-radius: 14px;
}

body[data-view="calling"] .compass-video-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 2rem;
  align-items: center;
  padding: 0.38rem 0.7rem;
  margin: -0.1rem 0;
  border: 1px solid rgba(0, 82, 61, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #075f47;
  box-shadow: 0 8px 18px rgba(5, 57, 43, 0.05);
  font-size: 0.78rem;
}

body[data-view="calling"] .calling-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.95fr);
  grid-template-areas:
    "video assistant"
    "video compass";
  gap: 0.85rem;
  align-items: stretch;
}

body[data-view="calling"] .calling-featured-video {
  grid-area: video;
  grid-row: auto;
}

body[data-view="calling"] .calling-assistant-panel {
  grid-area: assistant;
}

body[data-view="calling"] .calling-compass-panel {
  grid-area: compass;
}

body[data-view="calling"] .calling-featured-video,
body[data-view="calling"] .calling-assistant-panel,
body[data-view="calling"] .calling-compass-panel,
body[data-view="calling"] .calling-recommended-section,
body[data-view="calling"] .calling-category-section,
body[data-view="calling"] .calling-playlist-card,
body[data-view="calling"] .calling-continue-card,
body[data-view="calling"] .calling-progress-card {
  padding: 0.9rem;
  border: 1px solid rgba(0, 82, 61, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(5, 57, 43, 0.08);
}

body[data-view="calling"] .calling-featured-video > .eyebrow {
  margin-bottom: 0.65rem;
  color: #075f47;
}

body[data-view="calling"] .compass-player-shell {
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(0, 20, 14, 0.2);
}

body[data-view="calling"] .compass-player-topbar {
  padding: 0.75rem 0.9rem;
}

body[data-view="calling"] .compass-video-frame {
  aspect-ratio: 1672 / 941;
  max-height: min(43vh, 28.5rem);
  min-height: 0;
}

body[data-view="calling"] .compass-video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
}

body[data-view="calling"] .compass-featured-meta {
  padding: 0.82rem 0.35rem 0.2rem;
}

body[data-view="calling"] .compass-featured-meta h4 {
  color: #071524;
  font-size: 1.05rem;
}

body[data-view="calling"] .compass-featured-meta p {
  color: #536762;
  font-size: 0.84rem;
}

body[data-view="calling"] .compass-featured-row {
  align-items: center;
  gap: 0.5rem;
}

body[data-view="calling"] .calling-assistant-panel {
  min-height: 0;
  align-content: start;
}

body[data-view="calling"] .calling-assistant-panel::after {
  width: 4.15rem;
  height: 4.15rem;
}

body[data-view="calling"] .calling-assistant-panel h4 {
  max-width: 15rem;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

body[data-view="calling"] .calling-assistant-panel .primary {
  min-height: 2.5rem;
  border-radius: 9px;
}

body[data-view="calling"] .calling-assistant-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

body[data-view="calling"] .calling-assistant-actions button {
  min-height: 4.25rem;
  padding: 0.6rem 0.45rem;
  border-radius: 10px;
  font-size: 0.76rem;
  line-height: 1.18;
}

body[data-view="calling"] .calling-compass-panel {
  gap: 0.7rem;
}

body[data-view="calling"] .calling-compass-panel h4,
body[data-view="calling"] .calling-playlist-card h4,
body[data-view="calling"] .calling-continue-card h4,
body[data-view="calling"] .calling-progress-card h4 {
  margin: 0;
  color: #064c3d;
}

body[data-view="calling"] .calling-radar {
  min-height: clamp(14rem, 22vw, 17rem);
  border-radius: 14px;
}

body[data-view="calling"] .calling-radar::before {
  width: clamp(8.8rem, 14vw, 11rem);
  height: clamp(8.8rem, 14vw, 11rem);
}

body[data-view="calling"] .calling-radar strong {
  width: 4.6rem;
  height: 4.6rem;
  font-size: 0.82rem;
}

body[data-view="calling"] .calling-radar span {
  font-size: 0.72rem;
}

body[data-view="calling"] .calling-compass-panel .secondary {
  min-height: 2.35rem;
}

body[data-view="calling"] .calling-playlist-card,
body[data-view="calling"] .calling-continue-card,
body[data-view="calling"] .calling-progress-card {
  gap: 0.72rem;
  align-content: start;
}

body[data-view="calling"] .calling-playlist-card {
  max-height: none;
}

body[data-view="calling"] .calling-section-title {
  align-items: start;
}

body[data-view="calling"] .calling-section-title p,
body[data-view="calling"] .calling-section-title span {
  font-size: 0.82rem;
}

body[data-view="calling"] .icon-only {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  border-radius: 999px;
}

body[data-view="calling"] .compass-video-list {
  max-height: clamp(18rem, 36vh, 24rem);
  padding-right: 0.15rem;
}

body[data-view="calling"] .compass-video-item {
  grid-template-columns: 5.75rem minmax(0, 1fr) auto;
  gap: 0.58rem;
  min-height: 4.25rem;
  padding: 0.48rem 0;
}

body[data-view="calling"] .compass-video-item img,
body[data-view="calling"] .compass-video-thumb {
  width: 5.75rem;
  border-radius: 8px;
}

body[data-view="calling"] .compass-video-item b {
  left: 4.2rem;
  bottom: 0.58rem;
  font-size: 0.64rem;
}

body[data-view="calling"] .compass-video-item strong {
  font-size: 0.82rem;
  line-height: 1.22;
}

body[data-view="calling"] .compass-video-item small,
body[data-view="calling"] .compass-video-item em {
  font-size: 0.72rem;
}

body[data-view="calling"] .compass-playlist-link,
body[data-view="calling"] .calling-continue-card .secondary,
body[data-view="calling"] .calling-progress-card .primary {
  min-height: 2.45rem;
  border-radius: 10px;
}

body[data-view="calling"] .calling-continue-card,
body[data-view="calling"] .calling-progress-card {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 95% 8%, rgba(245, 207, 79, 0.22), transparent 9rem),
    linear-gradient(145deg, #075f47, #04372c);
  box-shadow: 0 16px 34px rgba(2, 46, 35, 0.16);
}

body[data-view="calling"] .calling-continue-row {
  grid-template-columns: 4.55rem minmax(0, 1fr) auto;
  gap: 0.58rem;
}

body[data-view="calling"] .calling-continue-row span {
  height: 3rem;
  border-radius: 10px;
}

body[data-view="calling"] .calling-continue-row strong {
  font-size: 0.82rem;
}

body[data-view="calling"] .calling-continue-row small,
body[data-view="calling"] .calling-continue-row b {
  font-size: 0.72rem;
}

body[data-view="calling"] .calling-progress-grid {
  gap: 0.5rem;
}

body[data-view="calling"] .calling-progress-grid div {
  min-width: 0;
  padding: 0.72rem;
  border-radius: 12px;
}

body[data-view="calling"] .calling-progress-grid strong {
  font-size: 1.75rem;
}

body[data-view="calling"] .calling-recommendation-grid {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.72rem;
}

body[data-view="calling"] .calling-recommendation-carousel {
  position: relative;
  display: block !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0.15rem 0;
  border-radius: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

body[data-view="calling"] .calling-recommendation-track {
  display: flex;
  width: max-content;
  gap: 0.78rem;
  animation: callingRecommendationMarquee 28s linear infinite;
  will-change: transform;
}

body[data-view="calling"] .calling-recommendation-carousel:hover .calling-recommendation-track,
body[data-view="calling"] .calling-recommendation-carousel:focus-within .calling-recommendation-track {
  animation-play-state: paused;
}

body[data-view="calling"] .calling-recommendation-grid article {
  flex: 0 0 clamp(13rem, 20vw, 18rem);
  min-height: 9.25rem;
  border-radius: 12px;
}

body[data-view="calling"] .calling-recommendation-carousel article {
  box-shadow: 0 16px 30px rgba(5, 57, 43, 0.12);
}

@keyframes callingRecommendationMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-50% - 0.39rem), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="calling"] .calling-recommendation-track {
    animation: none;
    transform: none;
  }
}

body[data-view="calling"] .calling-category-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.72rem;
}

body[data-view="calling"] .calling-category-grid button {
  min-height: 4.65rem;
  border-radius: 12px;
}

body[data-view="calling"] .calling-recommended-section,
body[data-view="calling"] .calling-category-section {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0.9rem;
}

@media (max-width: 1380px) {
  body[data-view="calling"] .calling-premium-grid {
    grid-template-columns: minmax(0, 8.4fr) minmax(17rem, 3.1fr);
  }

  body[data-view="calling"] .calling-content-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.9fr);
  }

  body[data-view="calling"] .calling-assistant-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="calling"] .calling-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  body[data-view="calling"] .calling-premium-grid {
    grid-template-columns: 1fr;
  }

  body[data-view="calling"] .calling-right-rail {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  body[data-view="calling"] .calling-content-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.9fr);
  }

  body[data-view="calling"] .compass-video-list {
    max-height: 22rem;
  }
}

@media (max-width: 900px) {
  body[data-view="calling"] .calling-premium-head,
  body[data-view="calling"] .calling-premium-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-view="calling"] .calling-hero-panel,
  body[data-view="calling"] .calling-content-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "inspiration"
      "search"
      "prompts";
  }

  body[data-view="calling"] .calling-content-grid {
    grid-template-areas:
      "video"
      "assistant"
      "compass";
  }

  body[data-view="calling"] .calling-hero-panel {
    min-height: auto;
  }

  body[data-view="calling"] .calling-right-rail,
  body[data-view="calling"] .calling-recommendation-grid {
    grid-template-columns: 1fr;
  }

  body[data-view="calling"] .calling-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body[data-view="calling"] .calling-premium-page {
    gap: 0.75rem;
  }

  body[data-view="calling"] .calling-premium-head h3 {
    font-size: 2rem;
  }

  body[data-view="calling"] .calling-hero-panel,
  body[data-view="calling"] .calling-featured-video,
  body[data-view="calling"] .calling-assistant-panel,
  body[data-view="calling"] .calling-compass-panel,
  body[data-view="calling"] .calling-recommended-section,
  body[data-view="calling"] .calling-category-section,
  body[data-view="calling"] .calling-playlist-card,
  body[data-view="calling"] .calling-continue-card,
  body[data-view="calling"] .calling-progress-card {
    border-radius: 14px;
    padding: 0.82rem;
  }

  body[data-view="calling"] .calling-search-form {
    grid-template-columns: auto minmax(0, 1fr) auto;
    border-radius: 18px;
  }

  body[data-view="calling"] .calling-search-form .primary {
    grid-column: 1 / -1;
    width: 100%;
    border-radius: 12px;
  }

  body[data-view="calling"] .calling-voice-button {
    display: none;
  }

  body[data-view="calling"] .calling-assistant-actions,
  body[data-view="calling"] .calling-category-grid,
  body[data-view="calling"] .calling-progress-grid {
    grid-template-columns: 1fr;
  }

  body[data-view="calling"] .compass-video-item {
    grid-template-columns: 5.2rem minmax(0, 1fr);
  }

  body[data-view="calling"] .compass-video-item img,
  body[data-view="calling"] .compass-video-thumb {
    width: 5.2rem;
  }
}

/* Book of the Saint premium journal dashboard. */
body[data-view="book"] #book {
  gap: 0;
}

body[data-view="book"] .book-saint-shell {
  display: grid;
  grid-template-columns: minmax(0, 8.8fr) minmax(18rem, 2.7fr);
  gap: 1rem;
  align-items: start;
  max-width: 100%;
}

body[data-view="book"] .book-saint-main,
body[data-view="book"] .book-saint-rail {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

body[data-view="book"] .book-saint-rail {
  position: sticky;
  top: 1rem;
}

body[data-view="book"] .book-saint-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem);
  grid-template-areas:
    "copy encouragement"
    "stats encouragement";
  gap: 1rem;
  overflow: hidden;
  min-height: clamp(20rem, 31vw, 24rem);
  padding: clamp(1.45rem, 2.4vw, 2rem);
  border: 1px solid rgba(0, 82, 61, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.9) 34%, rgba(255, 255, 255, 0.34) 58%, rgba(0, 50, 38, 0.54) 100%),
    radial-gradient(circle at 72% 25%, rgba(255, 222, 126, 0.22), transparent 18rem),
    url("public/images/book/book-saint-garden-hero-bg.png") center center / cover no-repeat;
  box-shadow: 0 20px 52px rgba(5, 57, 43, 0.12);
}

body[data-view="book"] .book-saint-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(247, 252, 249, 0.18)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 44%, rgba(0, 58, 44, 0.42) 100%),
    radial-gradient(circle at 86% 78%, rgba(0, 69, 51, 0.54), transparent 17rem);
  pointer-events: none;
}

body[data-view="book"] .book-saint-hero > * {
  position: relative;
  z-index: 1;
}

body[data-view="book"] .book-hero-content {
  grid-area: copy;
  align-self: start;
  max-width: 42rem;
}

body[data-view="book"] .book-hero-content .eyebrow {
  margin-bottom: 0.4rem;
  color: #00614d;
  letter-spacing: 0.045em;
}

body[data-view="book"] .book-hero-content h3 {
  margin: 0;
  color: #071524;
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  line-height: 1;
  letter-spacing: 0;
}

body[data-view="book"] .book-hero-content h4 {
  margin: 1rem 0 0.45rem;
  color: #172923;
  font-size: 1.05rem;
  line-height: 1.35;
}

body[data-view="book"] .book-hero-content p {
  max-width: 34rem;
  margin: 0;
  color: #536762;
  font-size: 1rem;
  line-height: 1.65;
}

body[data-view="book"] .book-encouragement-card {
  grid-area: encouragement;
  align-self: center;
  display: grid;
  gap: 0.8rem;
  min-height: 14.5rem;
  padding: 1.15rem;
  border: 1px solid rgba(255, 226, 130, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 221, 117, 0.2), transparent 7rem),
    linear-gradient(145deg, rgba(1, 66, 49, 0.93), rgba(2, 34, 26, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 20px 42px rgba(2, 39, 30, 0.28);
  color: #fff;
  backdrop-filter: blur(10px);
}

body[data-view="book"] .book-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

body[data-view="book"] .book-card-top strong {
  color: #fff;
  font-size: 0.92rem;
}

body[data-view="book"] .book-card-top span {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(255, 226, 130, 0.5);
  border-radius: 999px;
  color: #ffe178;
  font-size: 1.2rem;
}

body[data-view="book"] .book-encouragement-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 750;
  line-height: 1.7;
}

body[data-view="book"] .book-encouragement-card b {
  color: #ffe178;
}

body[data-view="book"] .book-stat-grid {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72rem;
  align-self: end;
}

body[data-view="book"] .book-stat-card {
  position: relative;
  display: grid;
  grid-template-columns: 3.15rem minmax(0, 1fr);
  grid-template-areas:
    "icon value"
    "icon label"
    "icon trend";
  gap: 0.15rem 0.72rem;
  min-height: 6.2rem;
  padding: 1rem;
  border: 1px solid rgba(0, 82, 61, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 34px rgba(5, 57, 43, 0.08);
  backdrop-filter: blur(12px);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

body[data-view="book"] .book-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 112, 85, 0.18);
  box-shadow: 0 22px 44px rgba(5, 57, 43, 0.12);
}

body[data-view="book"] .book-stat-icon {
  grid-area: icon;
  align-self: center;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 231, 137, 0.82), transparent 33%),
    linear-gradient(145deg, #00775d, #003e31);
  box-shadow: 0 10px 24px rgba(0, 82, 61, 0.2);
  color: transparent;
}

body[data-view="book"] .book-stat-icon::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #ffe178;
  border-radius: 4px;
  box-shadow: inset 0 -0.28rem 0 rgba(255, 225, 120, 0.25);
}

body[data-view="book"] .book-stat-card.amber .book-stat-icon {
  background: linear-gradient(145deg, #e2a723, #976500);
}

body[data-view="book"] .book-stat-card.amber .book-stat-icon::before {
  width: 1rem;
  height: 1.35rem;
  border-radius: 0.25rem;
}

body[data-view="book"] .book-stat-card.gold .book-stat-icon {
  background: linear-gradient(145deg, #f0c44d, #b77b05);
}

body[data-view="book"] .book-stat-card.gold .book-stat-icon::before {
  width: 1.35rem;
  height: 1.35rem;
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 80% 92%, 50% 70%, 20% 92%, 31% 56%, 2% 35%, 38% 34%);
  border: 0;
  background: #fff1ad;
}

body[data-view="book"] .book-stat-card.mint .book-stat-icon {
  background: linear-gradient(145deg, #0b8a6a, #045343);
}

body[data-view="book"] .book-stat-card.mint .book-stat-icon::before {
  width: 1.35rem;
  height: 1.2rem;
  border-radius: 0.25rem;
}

body[data-view="book"] .book-stat-card strong {
  grid-area: value;
  align-self: end;
  color: #071524;
  font-size: 1.55rem;
  line-height: 1;
}

body[data-view="book"] .book-stat-card small {
  grid-area: label;
  color: #536762;
  font-weight: 850;
}

body[data-view="book"] .book-stat-card em {
  grid-area: trend;
  width: fit-content;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: rgba(7, 118, 84, 0.08);
  color: #08775f;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

body[data-view="book"] .book-toolbar {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(8.5rem, auto) minmax(8.5rem, auto) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(5, 57, 43, 0.06);
}

body[data-view="book"] .book-search-field {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  min-height: 2.85rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 12px;
  background: #fff;
}

body[data-view="book"] .book-search-field span {
  position: relative;
  overflow: hidden;
  width: 1rem;
  height: 1rem;
  color: transparent;
}

body[data-view="book"] .book-search-field span::before {
  content: "";
  position: absolute;
  inset: 0.05rem 0.18rem 0.18rem 0.05rem;
  border: 2px solid #0a6751;
  border-radius: 999px;
  box-shadow: 0.42rem 0.42rem 0 -0.28rem #0a6751;
}

body[data-view="book"] .book-search-field input,
body[data-view="book"] .book-toolbar select {
  min-height: 2.85rem;
  border: 0;
  background: transparent;
  color: #12251f;
  font-weight: 780;
}

body[data-view="book"] .book-search-field input {
  padding: 0;
}

body[data-view="book"] .book-toolbar select {
  padding: 0 0.9rem;
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

body[data-view="book"] .book-filter-button {
  min-height: 2.85rem;
  padding: 0 1.2rem;
  border-radius: 12px;
}

body[data-view="book"] .book-timeline {
  position: relative;
  display: grid;
  gap: 0.72rem;
}

body[data-view="book"] .book-timeline::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 5.3rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0, 82, 61, 0.14), transparent);
}

body[data-view="book"] .book-timeline .timeline-entry {
  position: relative;
  grid-template-columns: 4.5rem 4.4rem minmax(0, 1fr);
  grid-template-areas:
    "date icon title"
    "date icon body"
    "date icon chips";
  gap: 0.22rem 1rem;
  align-items: center;
  min-height: 7.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(5, 57, 43, 0.065);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

body[data-view="book"] .book-timeline .timeline-entry:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 112, 85, 0.16);
  box-shadow: 0 22px 44px rgba(5, 57, 43, 0.1);
}

body[data-view="book"] .book-timeline .timeline-entry time {
  grid-area: date;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 5.6rem;
  padding: 0.6rem 0.25rem;
  border-right: 1px solid rgba(0, 82, 61, 0.08);
  color: #071524;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

body[data-view="book"] .book-timeline .timeline-entry::before {
  content: "";
  grid-area: icon;
  display: block;
  width: 4rem;
  height: 4rem;
  border: 0.55rem solid rgba(7, 118, 84, 0.11);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #ffe178 0 0.28rem, transparent 0.32rem),
    linear-gradient(145deg, #08775f, #004334);
  box-shadow: 0 14px 28px rgba(5, 57, 43, 0.16);
}

body[data-view="book"] .book-timeline .timeline-entry::after {
  --book-entry-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.8l2.25 5.6 6.05.45-4.65 3.85 1.45 5.9L12 15.45 6.9 18.6l1.45-5.9L3.7 8.85l6.05-.45L12 2.8Z'/%3E%3C/svg%3E");
  content: "";
  grid-area: icon;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  align-self: center;
  justify-self: center;
  background: #ffe178;
  -webkit-mask: var(--book-entry-icon) center / contain no-repeat;
  mask: var(--book-entry-icon) center / contain no-repeat;
  pointer-events: none;
}

body[data-view="book"] .book-timeline .timeline-entry:nth-child(even)::before {
  border-color: rgba(231, 177, 47, 0.16);
  background:
    radial-gradient(circle at 50% 42%, #fff2b5 0 0.32rem, transparent 0.36rem),
    linear-gradient(145deg, #d69c16, #8a5d00);
}

body[data-view="book"] .book-timeline .timeline-entry.book-entry-journey::before {
  border-color: rgba(7, 118, 84, 0.13);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 225, 120, 0.2) 0 1.05rem, transparent 1.08rem),
    linear-gradient(145deg, #08775f, #004334);
}

body[data-view="book"] .book-timeline .timeline-entry.book-entry-assignment::before {
  border-color: rgba(231, 177, 47, 0.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 242, 181, 0.24) 0 1.02rem, transparent 1.06rem),
    linear-gradient(145deg, #d69c16, #8a5d00);
}

body[data-view="book"] .book-timeline .timeline-entry.book-entry-assignment::after {
  --book-entry-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 2h6a2 2 0 0 1 2 2h1.5A2.5 2.5 0 0 1 21 6.5v12A2.5 2.5 0 0 1 18.5 21h-13A2.5 2.5 0 0 1 3 18.5v-12A2.5 2.5 0 0 1 5.5 4H7a2 2 0 0 1 2-2Zm0 3h6V4H9v1Zm7.7 5.7-1.4-1.4-4.8 4.8-1.9-1.9-1.4 1.4 3.3 3.3 6.2-6.2Z'/%3E%3C/svg%3E");
  background: #fff1b2;
}

body[data-view="book"] .book-timeline .timeline-entry.book-entry-discovery::before {
  border-color: rgba(231, 177, 47, 0.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 242, 181, 0.2) 0 1rem, transparent 1.04rem),
    linear-gradient(145deg, #c58a05, #7b5200);
}

body[data-view="book"] .book-timeline .timeline-entry.book-entry-discovery::after {
  --book-entry-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19h14l-1-9-4 3-2-7-2 7-4-3-1 9Zm0 2a1 1 0 0 1-1-1v-1h16v1a1 1 0 0 1-1 1H5Z'/%3E%3C/svg%3E");
  background: #fff1b2;
}

body[data-view="book"] .book-timeline .timeline-entry h4 {
  grid-area: title;
  margin: 0;
  color: #071524;
  font-size: 1.02rem;
  line-height: 1.28;
}

body[data-view="book"] .book-timeline .timeline-entry h4::before {
  content: "Generated Journey";
  display: block;
  margin-bottom: 0.22rem;
  color: #08775f;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-view="book"] .book-timeline .timeline-entry:nth-child(even) h4::before {
  content: "Daily Divine Assignment";
  color: #b77b05;
}

body[data-view="book"] .book-timeline .timeline-entry.book-entry-journey h4::before {
  content: "Generated Journey";
  color: #08775f;
}

body[data-view="book"] .book-timeline .timeline-entry.book-entry-assignment h4::before {
  content: "Daily Divine Assignment";
  color: #b77b05;
}

body[data-view="book"] .book-timeline .timeline-entry.book-entry-discovery h4::before {
  content: "Promise Discovery";
  color: #b77b05;
}

body[data-view="book"] .book-timeline .timeline-entry p {
  grid-area: body;
  margin: 0;
  color: #62726d;
  font-size: 0.86rem;
  line-height: 1.45;
}

body[data-view="book"] .book-timeline .scripture-strip {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

body[data-view="book"] .book-timeline .scripture-pill {
  padding: 0.26rem 0.58rem;
  border: 1px solid rgba(7, 118, 84, 0.08);
  border-radius: 999px;
  background: rgba(7, 118, 84, 0.09);
  color: #075f47;
  font-size: 0.72rem;
  font-weight: 900;
}

body[data-view="book"] .book-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  align-items: center;
}

body[data-view="book"] .book-pagination button,
body[data-view="book"] .book-pagination span {
  display: grid;
  place-items: center;
  min-width: 2.45rem;
  height: 2.45rem;
  border-radius: 10px;
  background: #fff;
  color: #0b4035;
  box-shadow: 0 10px 22px rgba(5, 57, 43, 0.06);
  font-weight: 900;
}

body[data-view="book"] .book-pagination .active {
  background: linear-gradient(135deg, #08775f, #004d3d);
  color: #fff;
}

body[data-view="book"] .book-rail-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0.65rem;
}

body[data-view="book"] .book-rail-actions button {
  min-height: 2.7rem;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(5, 57, 43, 0.08);
}

body[data-view="book"] .book-rail-card,
body[data-view="book"] .book-lantern-card {
  overflow: hidden;
  padding: 1rem;
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(5, 57, 43, 0.08);
}

body[data-view="book"] .book-rail-card h4,
body[data-view="book"] .book-lantern-card h4 {
  margin: 0 0 0.8rem;
  color: #064c3d;
}

body[data-view="book"] .book-overview-card svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.2rem 0 0.7rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(7, 118, 84, 0.035), rgba(255, 255, 255, 0));
}

body[data-view="book"] .book-overview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

body[data-view="book"] .book-overview-stats span {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem;
  border-left: 1px solid rgba(0, 82, 61, 0.09);
}

body[data-view="book"] .book-overview-stats span:first-child {
  border-left: 0;
}

body[data-view="book"] .book-overview-stats b {
  color: #071524;
  font-size: 1.35rem;
}

body[data-view="book"] .book-overview-stats small {
  color: #536762;
  font-size: 0.74rem;
  line-height: 1.35;
}

body[data-view="book"] .book-topics-card p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.52rem 0;
  color: #263d36;
  font-weight: 800;
}

body[data-view="book"] .book-topics-card b {
  color: #071524;
}

body[data-view="book"] .book-topics-card a {
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(0, 82, 61, 0.09);
  color: #08775f;
  font-weight: 950;
  text-align: center;
  text-decoration: none;
}

body[data-view="book"] .book-lantern-card {
  min-height: 11.5rem;
  display: grid;
  align-content: end;
  border-color: rgba(255, 226, 130, 0.18);
  background:
    linear-gradient(90deg, rgba(3, 60, 46, 0.92), rgba(3, 60, 46, 0.28)),
    url("public/images/canon/canon-card-03.png") center / cover no-repeat;
  color: #fff;
}

body[data-view="book"] .book-lantern-card h4 {
  max-width: 17rem;
  margin-bottom: 0.7rem;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.45;
}

body[data-view="book"] .book-lantern-card b {
  color: #ffe178;
}

body[data-view="book"] .book-actions-card {
  display: grid;
  gap: 0.58rem;
}

body[data-view="book"] .book-actions-card button {
  --book-action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'/%3E%3C/svg%3E");
  display: flex;
  min-height: 2.85rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0.58rem 0.88rem;
  border: 1px solid rgba(7, 118, 84, 0.08);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(7, 118, 84, 0.11), rgba(7, 118, 84, 0.055));
  color: #075f47;
  font-weight: 950;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

body[data-view="book"] .book-actions-card button::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  background: #08775f;
  -webkit-mask: var(--book-action-icon) center / contain no-repeat;
  mask: var(--book-action-icon) center / contain no-repeat;
}

body[data-view="book"] .book-actions-card button:nth-of-type(2) {
  --book-action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E");
}

body[data-view="book"] .book-actions-card button:nth-of-type(3) {
  --book-action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
}

body[data-view="book"] .book-actions-card button:hover {
  transform: translateX(2px);
  border-color: rgba(7, 118, 84, 0.18);
  background: rgba(7, 118, 84, 0.14);
  box-shadow: 0 0.55rem 1.1rem rgba(0, 68, 50, 0.08);
}

@media (max-width: 1320px) {
  body[data-view="book"] .book-saint-shell {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.34fr);
  }

  body[data-view="book"] .book-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="book"] .book-toolbar {
    grid-template-columns: minmax(18rem, 1fr) repeat(3, auto);
  }
}

@media (max-width: 1120px) {
  body[data-view="book"] .book-saint-shell {
    grid-template-columns: 1fr;
  }

  body[data-view="book"] .book-saint-rail {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="book"] .book-rail-actions,
  body[data-view="book"] .book-lantern-card,
  body[data-view="book"] .book-actions-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  body[data-view="book"] .book-saint-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "encouragement"
      "stats";
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.74) 54%, rgba(0, 58, 44, 0.2) 100%),
      url("public/images/book/book-saint-garden-hero-bg.png") center center / cover no-repeat;
  }

  body[data-view="book"] .book-toolbar,
  body[data-view="book"] .book-saint-rail,
  body[data-view="book"] .book-rail-actions {
    grid-template-columns: 1fr;
  }

  body[data-view="book"] .book-timeline::before {
    display: none;
  }

  body[data-view="book"] .book-timeline .timeline-entry {
    grid-template-columns: 4rem minmax(0, 1fr);
    grid-template-areas:
      "icon date"
      "icon title"
      "body body"
      "chips chips";
    gap: 0.45rem 0.8rem;
  }

  body[data-view="book"] .book-timeline .timeline-entry time {
    min-height: auto;
    justify-items: start;
    border-right: 0;
    text-align: left;
  }

}

@media (max-width: 560px) {
  body[data-view="book"] .book-saint-main,
  body[data-view="book"] .book-saint-rail {
    gap: 0.75rem;
  }

  body[data-view="book"] .book-saint-hero,
  body[data-view="book"] .book-rail-card,
  body[data-view="book"] .book-lantern-card {
    border-radius: 16px;
    padding: 0.9rem;
  }

  body[data-view="book"] .book-hero-content h3 {
    font-size: 2.25rem;
  }

  body[data-view="book"] .book-stat-grid,
  body[data-view="book"] .book-overview-stats {
    grid-template-columns: 1fr;
  }

  body[data-view="book"] .book-overview-stats span {
    border-left: 0;
    border-top: 1px solid rgba(0, 82, 61, 0.09);
  }

  body[data-view="book"] .book-overview-stats span:first-child {
    border-top: 0;
  }

  body[data-view="book"] .book-timeline .timeline-entry {
    padding: 0.9rem;
  }
}

/* Canon Explore paths: premium visual card grid. */
body[data-view="canon"] .canon-explore-section {
  margin-top: 1.15rem;
}

body[data-view="canon"] .canon-section-title-stacked {
  align-items: flex-start;
}

body[data-view="canon"] .canon-section-title-stacked p {
  max-width: 52rem;
  margin: 0.25rem 0 0;
  color: #41564f;
  font-size: 0.92rem;
  line-height: 1.45;
}

body[data-view="canon"] .canon-explore-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7rem;
  align-items: stretch;
}

body[data-view="canon"] .canon-explore-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 5.1rem minmax(0, 1fr) auto;
  min-height: 12.1rem;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  color: #071426;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

body[data-view="canon"] .canon-explore-card::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  min-height: 5.1rem;
  background:
    linear-gradient(180deg, rgba(0, 44, 33, 0.08), rgba(0, 44, 33, 0.72)),
    var(--canon-explore-image) center / cover no-repeat;
  pointer-events: none;
}

body[data-view="canon"] .canon-explore-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 105, 70, 0.26);
  box-shadow: 0 18px 34px rgba(0, 85, 62, 0.14);
}

body[data-view="canon"] .canon-explore-icon {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  align-self: start;
  border: 1px solid rgba(255, 225, 120, 0.42);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 225, 120, 0.28), transparent 32%),
    linear-gradient(145deg, rgba(0, 119, 89, 0.95), rgba(0, 50, 39, 0.95));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.25);
}

body[data-view="canon"] .canon-explore-icon::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  background: #ffe178;
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 80% 92%, 50% 70%, 20% 92%, 31% 56%, 2% 35%, 38% 34%);
}

body[data-view="canon"] .canon-explore-icon[data-icon="scripture"]::before,
body[data-view="canon"] .canon-explore-icon[data-icon="lexicon"]::before,
body[data-view="canon"] .canon-explore-icon[data-icon="teachings"]::before {
  clip-path: polygon(8% 12%, 46% 22%, 46% 88%, 8% 78%, 8% 12%, 54% 22%, 92% 12%, 92% 78%, 54% 88%, 54% 22%);
}

body[data-view="canon"] .canon-explore-icon[data-icon="prayer"]::before,
body[data-view="canon"] .canon-explore-icon[data-icon="worship"]::before {
  clip-path: polygon(47% 6%, 61% 31%, 86% 37%, 66% 55%, 71% 84%, 48% 69%, 25% 84%, 30% 55%, 10% 37%, 35% 31%);
}

body[data-view="canon"] .canon-explore-icon[data-icon="warfare"]::before {
  clip-path: polygon(50% 0, 88% 18%, 78% 72%, 50% 100%, 22% 72%, 12% 18%);
}

body[data-view="canon"] .canon-explore-icon[data-icon="growth"]::before {
  clip-path: polygon(50% 100%, 43% 62%, 16% 70%, 33% 43%, 12% 22%, 42% 28%, 50% 0, 58% 28%, 88% 22%, 67% 43%, 84% 70%, 57% 62%);
}

body[data-view="canon"] .canon-explore-icon[data-icon="calling"]::before {
  clip-path: polygon(50% 0, 60% 35%, 98% 35%, 67% 56%, 80% 98%, 50% 72%, 20% 98%, 33% 56%, 2% 35%, 40% 35%);
}

body[data-view="canon"] .canon-explore-icon[data-icon="identity"]::before {
  clip-path: polygon(50% 0, 70% 38%, 100% 38%, 76% 60%, 84% 100%, 50% 78%, 16% 100%, 24% 60%, 0 38%, 30% 38%);
}

body[data-view="canon"] .canon-explore-icon[data-icon="testimony"]::before {
  clip-path: polygon(50% 84%, 14% 46%, 14% 24%, 32% 10%, 50% 24%, 68% 10%, 86% 24%, 86% 46%);
}

body[data-view="canon"] .canon-explore-copy {
  display: grid;
  gap: 0.35rem;
  align-self: start;
  padding: 0.58rem 0.6rem 0;
  margin-top: 0;
}

body[data-view="canon"] .canon-explore-copy h4 {
  margin: 0;
  color: #071426;
  font-size: 0.82rem;
  line-height: 1.18;
  text-shadow: none;
}

body[data-view="canon"] .canon-explore-copy p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #3e4d5b;
  font-size: 0.68rem;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-view="canon"] .canon-explore-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
  align-items: center;
  align-self: end;
  padding: 0.45rem 0.6rem 0.58rem;
  margin-top: 0.25rem;
}

body[data-view="canon"] .canon-explore-footer > span {
  min-width: 0;
  overflow: hidden;
  color: #101828;
  font-size: 0.66rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
}

body[data-view="canon"] .canon-explore-footer button {
  min-height: 1.7rem;
  padding: 0 0.52rem;
  border: 1px solid rgba(0, 82, 61, 0.12);
  border-radius: 999px;
  background: rgba(7, 118, 84, 0.08);
  color: #075f47;
  box-shadow: none;
  font-size: 0.66rem;
  font-weight: 950;
  white-space: nowrap;
}

body[data-view="canon"] .canon-explore-footer button:hover {
  background: rgba(7, 118, 84, 0.14);
}

body[data-view="canon"] .canon-pagination {
  margin-top: 1.15rem;
}

@media (max-width: 1180px) {
  body[data-view="canon"] .canon-explore-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body[data-view="canon"] .canon-explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="canon"] .canon-explore-card {
    min-height: 11.5rem;
  }

  body[data-view="canon"] .canon-explore-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-view="canon"] .canon-explore-footer button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  body[data-view="canon"] .canon-explore-grid {
    grid-template-columns: 1fr;
  }
}

/* Calling Compass compact panel stack and premium action/category icons. */
body[data-view="calling"] .calling-content-grid {
  grid-template-columns: minmax(0, 1.62fr) minmax(18rem, 0.92fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "video assistant"
    "video compass" !important;
  gap: 0.75rem !important;
  align-items: start !important;
}

body[data-view="calling"] .calling-featured-video {
  align-self: stretch !important;
}

body[data-view="calling"] .calling-assistant-panel,
body[data-view="calling"] .calling-compass-panel {
  align-self: start !important;
  min-height: 0 !important;
}

body[data-view="calling"] .calling-assistant-panel {
  gap: 0.72rem !important;
  padding: 0.85rem !important;
}

body[data-view="calling"] .calling-assistant-panel h4 {
  margin-bottom: 0.65rem !important;
}

body[data-view="calling"] .calling-assistant-actions {
  gap: 0.52rem !important;
}

body[data-view="calling"] .calling-assistant-actions button {
  position: relative;
  display: grid;
  grid-template-rows: 1.55rem auto;
  justify-items: center;
  align-items: center;
  min-height: 4.15rem !important;
  padding: 0.58rem 0.45rem 0.5rem !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #fff, rgba(250, 253, 251, 0.96)) !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

body[data-view="calling"] .calling-assistant-actions button:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 118, 84, 0.2);
  box-shadow: 0 12px 24px rgba(5, 57, 43, 0.09);
}

body[data-view="calling"] .calling-assistant-actions button::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: #08775f;
  -webkit-mask: var(--assistant-action-icon) center / contain no-repeat;
  mask: var(--assistant-action-icon) center / contain no-repeat;
}

body[data-view="calling"] .calling-assistant-actions button:nth-child(1) {
  --assistant-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h7l4 4v14H7z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M14 3v5h5M9 12h6M9 16h6M9 8h3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

body[data-view="calling"] .calling-assistant-actions button:nth-child(2) {
  --assistant-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='18' cy='6' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='18' cy='18' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8.7 10.7l6.6-3.4M8.7 13.3l6.6 3.4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

body[data-view="calling"] .calling-assistant-actions button:nth-child(3) {
  --assistant-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M14 12h5m0 0-2-2m2 2-2 2' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

body[data-view="calling"] .calling-assistant-actions button:nth-child(4) {
  --assistant-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c4 0 7-3 7-7 0-4-4-7-5-12-3 2-6 6-6 10-1-1-2-3-2-5-2 2-3 5-3 7 0 4 4 7 9 7z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

body[data-view="calling"] .calling-compass-panel {
  gap: 0.58rem !important;
  padding: 0.85rem !important;
  margin-top: 0 !important;
}

body[data-view="calling"] .calling-radar {
  min-height: clamp(12.4rem, 17vw, 15.2rem) !important;
}

body[data-view="calling"] .calling-radar::before {
  width: clamp(8rem, 11.5vw, 9.8rem) !important;
  height: clamp(8rem, 11.5vw, 9.8rem) !important;
}

body[data-view="calling"] .calling-radar strong {
  width: 4.25rem !important;
  height: 4.25rem !important;
}

body[data-view="calling"] .calling-compass-panel .secondary {
  min-height: 2.25rem !important;
}

body[data-view="calling"] .calling-category-grid {
  gap: 0.68rem !important;
}

body[data-view="calling"] .calling-category-grid button {
  position: relative;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 0.72rem;
  min-height: 4.9rem !important;
  padding: 0.78rem 0.9rem !important;
  border: 1px solid rgba(255, 225, 120, 0.2) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(255, 225, 120, 0.18), transparent 5.5rem),
    linear-gradient(135deg, #064936, #088361) !important;
  box-shadow: 0 14px 28px rgba(5, 74, 55, 0.14) !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

body[data-view="calling"] .calling-category-grid button:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 225, 120, 0.42) !important;
  box-shadow: 0 20px 36px rgba(5, 74, 55, 0.2) !important;
}

body[data-view="calling"] .calling-category-grid button::before {
  content: "";
  grid-row: 1 / span 2;
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-self: center;
  border: 1px solid rgba(255, 225, 120, 0.62);
  border-radius: 10px;
  background: rgba(2, 54, 40, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-view="calling"] .calling-category-grid button::after {
  content: "";
  position: absolute;
  left: 1.47rem;
  top: 50%;
  width: 1.18rem;
  height: 1.18rem;
  background: #ffe178;
  transform: translateY(-50%);
  -webkit-mask: var(--calling-category-icon) center / contain no-repeat;
  mask: var(--calling-category-icon) center / contain no-repeat;
}

body[data-view="calling"] .calling-category-grid button:nth-child(1) {
  --calling-category-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5c3 0 5 .8 8 3v12c-3-2.2-5-3-8-3zM20 5c-3 0-5 .8-8 3v12c3-2.2 5-3 8-3z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

body[data-view="calling"] .calling-category-grid button:nth-child(2) {
  --calling-category-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c4 0 7-3 7-7 0-4-4-7-5-12-3 2-6 6-6 10-1-1-2-3-2-5-2 2-3 5-3 7 0 4 4 7 9 7z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

body[data-view="calling"] .calling-category-grid button:nth-child(3) {
  --calling-category-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7l8-4 8 4-8 4zM6 10v5c2 2 10 2 12 0v-5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

body[data-view="calling"] .calling-category-grid button:nth-child(4) {
  --calling-category-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

body[data-view="calling"] .calling-category-grid button:nth-child(5) {
  --calling-category-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M8 7l4-4 4 4M6 14c0 3 2 5 6 5s6-2 6-5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

body[data-view="calling"] .calling-category-grid button:nth-child(6) {
  --calling-category-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

body[data-view="calling"] .calling-category-grid button small {
  grid-column: 2;
  margin-top: 0.12rem !important;
  color: rgba(255, 255, 255, 0.76) !important;
}

@media (max-width: 1380px) {
  body[data-view="calling"] .calling-content-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(16rem, 0.9fr) !important;
  }
}

@media (max-width: 900px) {
  body[data-view="calling"] .calling-content-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "video"
      "assistant"
      "compass" !important;
  }
}

/* Calling Compass desktop correction: stack right panels independently of video height. */
@media (min-width: 901px) {
  body[data-view="calling"] .calling-content-grid {
    position: relative !important;
    display: block !important;
    min-height: clamp(35rem, 52vw, 42rem) !important;
  }

  body[data-view="calling"] .calling-featured-video {
    width: calc(64% - 0.38rem) !important;
  }

  body[data-view="calling"] .calling-assistant-panel,
  body[data-view="calling"] .calling-compass-panel {
    position: absolute !important;
    right: 0 !important;
    width: calc(36% - 0.38rem) !important;
  }

  body[data-view="calling"] .calling-assistant-panel {
    top: 0 !important;
  }

  body[data-view="calling"] .calling-compass-panel {
    top: clamp(15rem, 18vw, 16.25rem) !important;
  }

  body[data-view="calling"] .calling-radar {
    min-height: clamp(11.5rem, 15vw, 13.6rem) !important;
  }

  body[data-view="calling"] .calling-recommended-section {
    margin-top: -0.2rem !important;
  }
}

/* Canon Quick Actions icon treatment. */
body[data-view="canon"] .canon-actions-widget {
  gap: 0.62rem;
}

body[data-view="canon"] .canon-actions-widget h4 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

body[data-view="canon"] .canon-actions-widget h4::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #006a52, #19a27f);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3Z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3Z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="canon"] .canon-actions-widget button {
  --canon-action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M7 19V8l5-3 5 3v11'/%3E%3C/svg%3E");
  display: grid !important;
  grid-template-columns: 1.65rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  min-height: 3.15rem;
  align-items: center;
  justify-content: initial;
  padding: 0.62rem 0.72rem;
  border-color: rgba(0, 82, 61, 0.12);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 250, 0.98));
  box-shadow: 0 0.7rem 1.7rem rgba(0, 50, 38, 0.06);
  line-height: 1.15;
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body[data-view="canon"] .canon-actions-widget button::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: #00745b;
  -webkit-mask: var(--canon-action-icon) center / contain no-repeat;
  mask: var(--canon-action-icon) center / contain no-repeat;
}

body[data-view="canon"] .canon-actions-widget button span {
  display: inline-grid;
  width: 1.4rem;
  height: 1.4rem;
  place-items: center;
  border-radius: 999px;
  color: #005b49;
  font-size: 1.2rem;
  line-height: 1;
  transition: background 0.18s ease, transform 0.18s ease;
}

body[data-view="canon"] .canon-actions-widget button:nth-of-type(2) {
  --canon-action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Cpath d='M5 21v-2a7 7 0 0 1 14 0v2'/%3E%3Cpath d='M4 10l3 2'/%3E%3Cpath d='M20 10l-3 2'/%3E%3C/svg%3E");
}

body[data-view="canon"] .canon-actions-widget button:nth-of-type(3) {
  --canon-action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.4'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.4'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.4'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.4'/%3E%3C/svg%3E");
}

body[data-view="canon"] .canon-actions-widget button:nth-of-type(4) {
  --canon-action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18l-6 3V6l6-3 6 3 6-3v15l-6 3-6-3Z'/%3E%3Cpath d='M9 3v15'/%3E%3Cpath d='M15 6v15'/%3E%3C/svg%3E");
}

body[data-view="canon"] .canon-actions-widget button:nth-of-type(5) {
  --canon-action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M10 4v16'/%3E%3Cpath d='M14 15h4'/%3E%3Cpath d='M16 13v4'/%3E%3C/svg%3E");
}

body[data-view="canon"] .canon-actions-widget button:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 117, 91, 0.25);
  background: linear-gradient(180deg, #fff, #f1faf6);
  box-shadow: 0 1rem 2rem rgba(0, 50, 38, 0.1);
}

body[data-view="canon"] .canon-actions-widget button:hover span {
  background: rgba(0, 117, 91, 0.08);
  transform: translateX(2px);
}

/* Lexicon premium Scripture vocabulary dashboard. */
body[data-view="lexicon"] #lexicon {
  padding-top: 0;
}

body[data-view="lexicon"] .lexicon-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 0.28fr);
  gap: 1.1rem;
  align-items: start;
}

body[data-view="lexicon"] .lexicon-main,
body[data-view="lexicon"] .lexicon-rail {
  display: grid;
  gap: 1rem;
}

body[data-view="lexicon"] .lexicon-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(13rem, 21vw, 18rem);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(245, 251, 247, 0.98) 0 34%, rgba(245, 251, 247, 0.72) 52%, rgba(0, 49, 38, 0.14)),
    url("public/images/lexicon/lexicon-hero-bg.png") center center / cover no-repeat;
  box-shadow: 0 1.2rem 3rem rgba(3, 48, 37, 0.1);
}

body[data-view="lexicon"] .lexicon-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 68% 18%, rgba(255, 226, 124, 0.28), transparent 24%),
    linear-gradient(180deg, transparent 60%, rgba(0, 52, 40, 0.18));
  pointer-events: none;
}

body[data-view="lexicon"] .lexicon-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 34rem;
  gap: 0.75rem;
  padding: clamp(1.25rem, 2vw, 2rem);
}

body[data-view="lexicon"] .lexicon-hero-copy .eyebrow {
  color: #006a52;
}

body[data-view="lexicon"] .lexicon-hero-copy h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: #071524;
  font-size: clamp(2.1rem, 3.2vw, 3.35rem);
  letter-spacing: 0;
}

body[data-view="lexicon"] .lexicon-hero-copy h3 span {
  display: inline-grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  color: transparent;
  background: #006a52;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M8 10h8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M8 10h8'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="lexicon"] .lexicon-hero-copy p:not(.eyebrow) {
  max-width: 32rem;
  margin: 0;
  color: #263b35;
  font-size: 1.02rem;
  line-height: 1.65;
}

body[data-view="lexicon"] .lexicon-toolbar,
body[data-view="lexicon"] .lexicon-alpha-card {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(10rem, 0.22fr) minmax(11rem, 0.24fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid rgba(0, 82, 61, 0.09);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.9rem 2rem rgba(3, 48, 37, 0.08);
}

body[data-view="lexicon"] .lexicon-search-field {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(0, 82, 61, 0.1);
  border-radius: 12px;
  background: #fff;
}

body[data-view="lexicon"] .lexicon-search-field span,
body[data-view="lexicon"] .lexicon-filter-button::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  background: #006a52;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="lexicon"] .lexicon-search-field input,
body[data-view="lexicon"] .lexicon-toolbar select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #132822;
  font-weight: 800;
}

body[data-view="lexicon"] .lexicon-toolbar select,
body[data-view="lexicon"] .lexicon-filter-button {
  min-height: 3.25rem;
  padding: 0 0.85rem;
  border: 1px solid rgba(0, 82, 61, 0.1);
  border-radius: 12px;
  background: #fff;
  color: #132822;
  font-weight: 900;
}

body[data-view="lexicon"] .lexicon-filter-button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

body[data-view="lexicon"] .lexicon-filter-button::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M10 19h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M10 19h4'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}

body[data-view="lexicon"] .lexicon-stat-card,
body[data-view="lexicon"] .lexicon-rail-card,
body[data-view="lexicon"] .lexicon-item,
body[data-view="lexicon"] .grammar-panel,
body[data-view="lexicon"] .layer-card {
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1rem 2.2rem rgba(3, 48, 37, 0.07);
}

body[data-view="lexicon"] .lexicon-stat-card {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  min-height: 5.9rem;
  padding: 0.95rem;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

body[data-view="lexicon"] .lexicon-stat-card > span {
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #efe3ba;
  position: relative;
}

body[data-view="lexicon"] .lexicon-stat-card > span::before {
  content: "";
  position: absolute;
  inset: 0.72rem;
  background: #005b49;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="lexicon"] .lexicon-stat-card small,
body[data-view="lexicon"] .lexicon-stat-card em {
  display: block;
  color: #526761;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

body[data-view="lexicon"] .lexicon-stat-card strong {
  display: block;
  color: #00634f;
  font-size: 1.28rem;
}

body[data-view="lexicon"] .lexicon-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  gap: 0.85rem;
}

body[data-view="lexicon"] .lexicon-word-day,
body[data-view="lexicon"] .lexicon-inspiration-card,
body[data-view="lexicon"] .lexicon-scripture-art,
body[data-view="lexicon"] .lexicon-challenge-card {
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 1.2rem 2.8rem rgba(3, 48, 37, 0.12);
}

body[data-view="lexicon"] .lexicon-word-day {
  display: grid;
  align-content: end;
  min-height: 17rem;
  padding: 1.35rem;
  background:
    linear-gradient(90deg, rgba(245, 251, 247, 0.95), rgba(245, 251, 247, 0.72) 43%, rgba(0, 51, 40, 0.08)),
    url("public/images/lexicon/word-of-the-day-bg.png") center center / cover no-repeat;
}

body[data-view="lexicon"] .lexicon-word-day h4 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.2rem 0 0.35rem;
  color: #071524;
  font-size: 2rem;
}

body[data-view="lexicon"] .lexicon-word-day h4 button,
body[data-view="lexicon"] .lexicon-card-head button,
body[data-view="lexicon"] .lexicon-card-footer button,
body[data-view="lexicon"] .lexicon-word-day-actions button:not(.secondary) {
  width: 2rem;
  height: 2rem;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0.55rem 1rem rgba(0, 54, 41, 0.12);
}

body[data-view="lexicon"] .lexicon-word-day h4 button::before,
body[data-view="lexicon"] .lexicon-card-head button::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: auto;
  background: #006a52;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="lexicon"] .lexicon-word-day p {
  max-width: 23rem;
  color: #213c34;
  line-height: 1.55;
}

body[data-view="lexicon"] .lexicon-word-day small {
  display: inline-flex;
  width: fit-content;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: #005b49;
  font-weight: 950;
}

body[data-view="lexicon"] .lexicon-word-day-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 1rem;
}

body[data-view="lexicon"] .lexicon-inspiration-card {
  display: grid;
  align-content: space-between;
  min-height: 17rem;
  padding: 1.5rem;
  background:
    linear-gradient(90deg, rgba(0, 35, 27, 0.86), rgba(0, 53, 41, 0.58) 48%, rgba(0, 35, 27, 0.24)),
    url("public/images/lexicon/daily-inspiration-bg.png") center center / cover no-repeat;
  color: #fff;
}

body[data-view="lexicon"] .lexicon-inspiration-card p {
  font-size: 1.05rem;
  line-height: 1.7;
}

body[data-view="lexicon"] .lexicon-inspiration-card span,
body[data-view="lexicon"] .lexicon-inspiration-card b {
  color: #ffe178;
}

body[data-view="lexicon"] .lexicon-inspiration-card button {
  width: fit-content;
  border-color: rgba(255, 225, 120, 0.5);
  color: #fff;
}

body[data-view="lexicon"] .lexicon-alpha-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

body[data-view="lexicon"] .lexicon-alpha-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

body[data-view="lexicon"] .lexicon-alpha-tabs button {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  color: #12332b;
  font-weight: 900;
}

body[data-view="lexicon"] .lexicon-alpha-tabs button.active {
  background: #006a52;
  color: #fff;
}

body[data-view="lexicon"] .lexicon-view-toggle {
  display: flex;
  gap: 0.4rem;
}

body[data-view="lexicon"] .lexicon-view-toggle span {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.7rem;
  background: #006a52;
}

body[data-view="lexicon"] .lexicon-view-toggle span + span {
  background: #fff;
  border: 1px solid rgba(0, 82, 61, 0.1);
}

body[data-view="lexicon"] .lexicon-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

body[data-view="lexicon"] .lexicon-item {
  min-height: 14rem;
  padding: 1.15rem;
  border-radius: 15px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

body[data-view="lexicon"] .lexicon-item:hover,
body[data-view="lexicon"] .lexicon-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 112, 85, 0.18);
  box-shadow: 0 1.35rem 2.8rem rgba(3, 48, 37, 0.12);
}

body[data-view="lexicon"] .lexicon-card-head,
body[data-view="lexicon"] .lexicon-card-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
}

body[data-view="lexicon"] .lexicon-card-head strong {
  color: #005b49;
  font-size: 1.18rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body[data-view="lexicon"] .lexicon-card-head span,
body[data-view="lexicon"] .lexicon-item p,
body[data-view="lexicon"] .lexicon-card-footer span {
  color: #526761;
  font-size: 0.84rem;
  line-height: 1.55;
}

body[data-view="lexicon"] .lexicon-item p b {
  color: #172923;
}

body[data-view="lexicon"] .lexicon-card-footer {
  align-items: center;
  margin-top: auto;
}

body[data-view="lexicon"] .lexicon-card-footer span {
  color: #005b49;
  font-weight: 950;
}

body[data-view="lexicon"] .lexicon-card-footer button::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: auto;
  background: #006a52;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="lexicon"] .lexicon-load-more {
  justify-self: center;
}

body[data-view="lexicon"] .lexicon-footer-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(126, 96, 28, 0.1);
  border-radius: 15px;
  background: #f4ecd7;
}

body[data-view="lexicon"] .lexicon-footer-features article {
  display: flex;
  gap: 0.7rem;
  padding: 0.95rem;
  border-right: 1px solid rgba(126, 96, 28, 0.12);
}

body[data-view="lexicon"] .lexicon-footer-features span {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e6d69e;
}

body[data-view="lexicon"] .lexicon-footer-features h4,
body[data-view="lexicon"] .lexicon-footer-features p {
  margin: 0;
}

body[data-view="lexicon"] .lexicon-footer-features h4 {
  color: #005b49;
}

body[data-view="lexicon"] .lexicon-footer-features p {
  color: #425b54;
  font-size: 0.78rem;
  line-height: 1.45;
}

body[data-view="lexicon"] .lexicon-language-lab {
  display: grid;
  gap: 1rem;
}

body[data-view="lexicon"] .grammar-panel,
body[data-view="lexicon"] .language-layer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-view="lexicon"] .grammar-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-color: rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 36%, rgba(255, 255, 255, 0.48) 62%, rgba(0, 54, 41, 0.46) 100%),
    radial-gradient(circle at 72% 20%, rgba(255, 222, 126, 0.24), transparent 18rem),
    url("public/images/lexicon/promise-language-panel-bg.png") center right / cover no-repeat;
  box-shadow: 0 18px 44px rgba(5, 57, 43, 0.13);
}

body[data-view="lexicon"] .grammar-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(247, 252, 249, 0.2)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 45%, rgba(0, 58, 44, 0.32) 100%);
  pointer-events: none;
}

body[data-view="lexicon"] .grammar-panel > * {
  position: relative;
  z-index: 1;
}

body[data-view="lexicon"] .grammar-panel .formula-card,
body[data-view="lexicon"] .grammar-panel .rank-card,
body[data-view="lexicon"] .grammar-panel .scripture-pill {
  border-color: rgba(0, 82, 61, 0.13);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 24px rgba(5, 57, 43, 0.08);
  backdrop-filter: blur(10px);
}

body[data-view="lexicon"] .lexicon-rail-card,
body[data-view="lexicon"] .lexicon-challenge-card {
  padding: 1rem;
}

body[data-view="lexicon"] .lexicon-rail-card h4,
body[data-view="lexicon"] .lexicon-challenge-card h4 {
  margin: 0 0 0.85rem;
  color: #0d332a;
}

body[data-view="lexicon"] .lexicon-ring {
  display: grid;
  width: 8.5rem;
  height: 8.5rem;
  place-items: center;
  margin: 0.8rem auto;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #fff 0 48%, transparent 49%),
    conic-gradient(#00745b calc(var(--lexicon-progress) * 1%), #d9ebe5 0);
}

body[data-view="lexicon"] .lexicon-ring strong {
  color: #006a52;
  font-size: 1.65rem;
}

body[data-view="lexicon"] .lexicon-ring span {
  margin-top: -2.6rem;
  color: #526761;
  font-size: 0.78rem;
  font-weight: 800;
}

body[data-view="lexicon"] .lexicon-ring-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  text-align: center;
}

body[data-view="lexicon"] .lexicon-ring-stats b {
  display: block;
  color: #0d332a;
}

body[data-view="lexicon"] .lexicon-ring-stats small,
body[data-view="lexicon"] .lexicon-category-list p,
body[data-view="lexicon"] .lexicon-recent-list p {
  color: #526761;
  font-size: 0.78rem;
  font-weight: 800;
}

body[data-view="lexicon"] .lexicon-category-list,
body[data-view="lexicon"] .lexicon-recent-list,
body[data-view="lexicon"] .lexicon-tools-card {
  display: grid;
  gap: 0.62rem;
}

body[data-view="lexicon"] .lexicon-category-list p,
body[data-view="lexicon"] .lexicon-recent-list p {
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  margin: 0;
}

body[data-view="lexicon"] .lexicon-category-list span,
body[data-view="lexicon"] .lexicon-recent-list span {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: #eef4ee;
}

body[data-view="lexicon"] .lexicon-category-list b,
body[data-view="lexicon"] .lexicon-recent-list b {
  color: #20352f;
}

body[data-view="lexicon"] .lexicon-rail-card a,
body[data-view="lexicon"] .lexicon-tools-card a {
  justify-self: end;
  color: #006a52;
  font-weight: 950;
  text-decoration: none;
}

body[data-view="lexicon"] .lexicon-challenge-card {
  display: grid;
  gap: 0.72rem;
  align-items: start;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 225, 120, 0.18), transparent 22%),
    linear-gradient(135deg, #00513f, #003329);
  color: #fff;
}

body[data-view="lexicon"] .lexicon-challenge-head {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

body[data-view="lexicon"] .lexicon-challenge-head h4,
body[data-view="lexicon"] .lexicon-challenge-head span {
  color: #fff;
}

body[data-view="lexicon"] .lexicon-challenge-head h4 {
  margin: 0;
}

body[data-view="lexicon"] .lexicon-challenge-head > span:last-child {
  color: #ffe178;
  font-weight: 950;
}

body[data-view="lexicon"] .lexicon-challenge-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: rgba(255, 207, 77, 0.16);
  border: 1px solid rgba(255, 207, 77, 0.35);
}

body[data-view="lexicon"] .lexicon-challenge-icon::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  background: #ffcf4d;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v4a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M5 5H3v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M19 5h2v2a4 4 0 0 1-4 4'/%3E%3Cpath d='M9 21h6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v4a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M5 5H3v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M19 5h2v2a4 4 0 0 1-4 4'/%3E%3Cpath d='M9 21h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="lexicon"] .lexicon-challenge-card p {
  margin: 0;
  line-height: 1.5;
}

body[data-view="lexicon"] .lexicon-challenge-card strong {
  display: block;
  font-size: 1.12rem;
  line-height: 1;
}

body[data-view="lexicon"] .lexicon-challenge-card progress {
  width: 100%;
  height: 0.55rem;
  margin: 0.1rem 0 0.2rem;
  accent-color: #ffcf4d;
}

body[data-view="lexicon"] .lexicon-challenge-card .primary {
  width: 100%;
  margin-top: 0.1rem;
}

body[data-view="lexicon"] .lexicon-tools-card button {
  display: grid;
  gap: 0.15rem;
  min-height: 3rem;
  padding: 0.65rem 0.8rem;
  border-radius: 11px;
  background: #f5faf8;
  color: #0d332a;
  text-align: left;
  font-weight: 950;
}

body[data-view="lexicon"] .lexicon-tools-card small {
  color: #687b75;
  font-weight: 700;
}

body[data-view="lexicon"] .lexicon-scripture-art {
  min-height: 10rem;
  padding: 1rem;
  display: grid;
  align-content: end;
  background:
    linear-gradient(180deg, rgba(0, 40, 31, 0.12), rgba(0, 40, 31, 0.86)),
    url("public/images/canon/category-promise.png") center / cover no-repeat;
  color: #fff;
}

body[data-view="lexicon"] .lexicon-scripture-art p {
  max-width: 13rem;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.35;
}

body[data-view="lexicon"] .lexicon-scripture-art b {
  color: #ffe178;
}

@media (max-width: 1320px) {
  body[data-view="lexicon"] .lexicon-stats-grid,
  body[data-view="lexicon"] .lexicon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-view="lexicon"] .lexicon-shell {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr);
  }
}

@media (max-width: 980px) {
  body[data-view="lexicon"] .lexicon-shell,
  body[data-view="lexicon"] .lexicon-feature-grid {
    grid-template-columns: 1fr;
  }

  body[data-view="lexicon"] .lexicon-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="lexicon"] .lexicon-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  body[data-view="lexicon"] .lexicon-search-field {
    grid-column: 1 / -1;
  }

  body[data-view="lexicon"] .lexicon-stats-grid,
  body[data-view="lexicon"] .lexicon-grid,
  body[data-view="lexicon"] .lexicon-footer-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body[data-view="lexicon"] .lexicon-toolbar,
  body[data-view="lexicon"] .lexicon-rail,
  body[data-view="lexicon"] .lexicon-stats-grid,
  body[data-view="lexicon"] .lexicon-grid,
  body[data-view="lexicon"] .lexicon-footer-features,
  body[data-view="lexicon"] .grammar-panel,
  body[data-view="lexicon"] .language-layer-grid {
    grid-template-columns: 1fr;
  }

  body[data-view="lexicon"] .lexicon-alpha-card {
    grid-template-columns: 1fr;
  }

  body[data-view="lexicon"] .grammar-panel {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 52%, rgba(255, 255, 255, 0.64) 82%, rgba(0, 54, 41, 0.22) 100%),
      url("public/images/lexicon/promise-language-panel-bg.png") center center / cover no-repeat;
  }

body[data-view="lexicon"] .lexicon-hero-copy {
    padding: 1rem;
  }
}

/* Testimony Archive premium multimedia dashboard. */
body[data-view="testimony"] #testimony {
  padding-top: 0;
}

body[data-view="testimony"] .testimony-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(13rem, 22vw, 18.5rem);
  margin-bottom: 1rem;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(245, 251, 247, 0.99) 0%, rgba(245, 251, 247, 0.92) 32%, rgba(245, 251, 247, 0.48) 53%, rgba(0, 68, 51, 0.12) 100%),
    url("public/images/testimony/testimony-hero-bg.png") center right / cover no-repeat;
  box-shadow: 0 1.2rem 3rem rgba(3, 48, 37, 0.1);
}

body[data-view="testimony"] .testimony-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 20%, rgba(255, 224, 139, 0.26), transparent 25%),
    linear-gradient(180deg, transparent 54%, rgba(0, 52, 40, 0.18)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(0, 76, 57, 0.12));
  pointer-events: none;
}

body[data-view="testimony"] .testimony-hero > div {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 35rem;
  gap: 0.62rem;
  padding: clamp(1.25rem, 2.4vw, 2.15rem);
}

body[data-view="testimony"] .testimony-hero h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  color: #071524;
  font-size: clamp(2.05rem, 3.2vw, 3.4rem);
  letter-spacing: 0;
}

body[data-view="testimony"] .testimony-hero h3 span,
body[data-view="testimony"] .testimony-card-icon,
body[data-view="testimony"] .testimony-wall-card h3::before,
body[data-view="testimony"] .testimony-impact-card h3::before {
  display: inline-block;
  width: 1.55rem;
  height: 1.55rem;
  background: #006a52;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="testimony"] .testimony-hero h4,
body[data-view="testimony"] .testimony-hero p {
  margin: 0;
}

body[data-view="testimony"] .testimony-hero h4 {
  color: #102a23;
  font-size: 1.08rem;
}

body[data-view="testimony"] .testimony-hero p:not(.eyebrow) {
  max-width: 31rem;
  color: #263b35;
  font-size: 1.02rem;
  line-height: 1.62;
}

body[data-view="testimony"] .testimony-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(24rem, 0.82fr);
  gap: 1rem;
  align-items: start;
}

body[data-view="testimony"] .testimony-main,
body[data-view="testimony"] .testimony-rail {
  display: grid;
  gap: 1rem;
}

body[data-view="testimony"] .testimony-form-card,
body[data-view="testimony"] .testimony-archive-card,
body[data-view="testimony"] .testimony-insights-card,
body[data-view="testimony"] .testimony-wall-card,
body[data-view="testimony"] .testimony-impact-card,
body[data-view="testimony"] .testimony-quick-card {
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1rem 2.4rem rgba(3, 48, 37, 0.08);
}

body[data-view="testimony"] .testimony-form-card {
  gap: 1rem;
  padding: 1.35rem;
}

body[data-view="testimony"] .testimony-card-head,
body[data-view="testimony"] .testimony-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

body[data-view="testimony"] .testimony-card-head h3,
body[data-view="testimony"] .testimony-section-head h3,
body[data-view="testimony"] .testimony-rail h3 {
  margin: 0;
  color: #0d332a;
  font-size: 1.18rem;
}

body[data-view="testimony"] .testimony-card-head p,
body[data-view="testimony"] .testimony-section-head p {
  margin: 0.25rem 0 0;
  color: #526761;
  font-weight: 700;
}

body[data-view="testimony"] .testimony-card-icon {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #08775f;
  box-shadow: inset 0 0 0 0.75rem rgba(7, 118, 84, 0.12);
}

body[data-view="testimony"] .testimony-media-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  max-width: 13rem;
}

body[data-view="testimony"] .testimony-media-actions small {
  width: 100%;
  color: #526761;
  font-weight: 800;
  text-align: right;
}

body[data-view="testimony"] .testimony-media-actions button {
  width: 2.8rem;
  height: 2.8rem;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
  background: #e8f4ef;
  transition: transform 180ms ease, background 180ms ease;
}

body[data-view="testimony"] .testimony-media-actions button::before,
body[data-view="testimony"] .testimony-insight-grid article span::before {
  content: "";
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  margin: auto;
  background: #006a52;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 19'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="testimony"] .testimony-media-actions button:nth-of-type(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 10l5-3v10l-5-3v-4Z'/%3E%3Crect x='3' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 10l5-3v10l-5-3v-4Z'/%3E%3Crect x='3' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-media-actions button:nth-of-type(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-media-actions button:nth-of-type(4)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 13a5 5 0 0 0 7.1 0l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.1 0l-2 2A5 5 0 0 0 12 20.1l1.1-1.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 13a5 5 0 0 0 7.1 0l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.1 0l-2 2A5 5 0 0 0 12 20.1l1.1-1.1'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-form-card label {
  gap: 0.45rem;
  color: #243b34;
  font-weight: 850;
}

body[data-view="testimony"] .testimony-form-card input,
body[data-view="testimony"] .testimony-form-card select,
body[data-view="testimony"] .testimony-form-card textarea {
  min-height: 3.1rem;
  border-color: rgba(0, 82, 61, 0.12);
  border-radius: 11px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body[data-view="testimony"] .testimony-form-card textarea {
  min-height: 7rem;
}

body[data-view="testimony"] .testimony-form-card .primary.full {
  min-height: 3.1rem;
  border-radius: 11px;
  box-shadow: 0 0.9rem 1.6rem rgba(0, 82, 61, 0.16);
}

body[data-view="testimony"] .testimony-archive-card,
body[data-view="testimony"] .testimony-insights-card,
body[data-view="testimony"] .testimony-wall-card,
body[data-view="testimony"] .testimony-impact-card,
body[data-view="testimony"] .testimony-quick-card {
  padding: 1rem;
}

body[data-view="testimony"] .testimony-list-tools {
  display: flex;
  gap: 0.55rem;
}

body[data-view="testimony"] .testimony-list-tools select,
body[data-view="testimony"] .testimony-list-tools button {
  min-height: 2.65rem;
  border: 1px solid rgba(0, 82, 61, 0.1);
  border-radius: 10px;
  background: #fff;
  color: #17362e;
  font-weight: 850;
}

body[data-view="testimony"] .testimony-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0 0.75rem;
}

body[data-view="testimony"] .testimony-tabs button {
  min-height: 2.4rem;
  padding: 0 1rem;
  border: 1px solid rgba(0, 82, 61, 0.1);
  border-radius: 8px;
  background: #fff;
  color: #17362e;
  font-weight: 850;
}

body[data-view="testimony"] .testimony-tabs button.active {
  border-color: #006a52;
  background: #006a52;
  color: #fff;
}

body[data-view="testimony"] .testimony-list {
  display: grid;
  gap: 0.65rem;
}

body[data-view="testimony"] .testimony-entry {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) minmax(10rem, 0.28fr);
  gap: 0.85rem;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid rgba(0, 82, 61, 0.1);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0.75rem 1.6rem rgba(3, 48, 37, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

body[data-view="testimony"] .testimony-entry:hover {
  transform: translateY(-2px);
  box-shadow: 0 1rem 2.1rem rgba(3, 48, 37, 0.1);
}

body[data-view="testimony"] .testimony-thumb {
  position: relative;
  min-height: 5.3rem;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}

body[data-view="testimony"] .testimony-thumb span {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 41, 32, 0.78);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

body[data-view="testimony"] .testimony-entry-body {
  display: grid;
  gap: 0.28rem;
}

body[data-view="testimony"] .testimony-entry h4,
body[data-view="testimony"] .testimony-entry p {
  margin: 0;
}

body[data-view="testimony"] .testimony-entry h4 {
  color: #071524;
  font-size: 1rem;
}

body[data-view="testimony"] .testimony-entry p {
  display: -webkit-box;
  overflow: hidden;
  color: #526761;
  font-size: 0.82rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-view="testimony"] .testimony-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: #526761;
  font-size: 0.76rem;
  font-weight: 800;
}

body[data-view="testimony"] .testimony-entry-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 0.4rem;
  align-items: center;
  border-left: 1px solid rgba(0, 82, 61, 0.1);
  padding-left: 0.75rem;
}

body[data-view="testimony"] .testimony-entry-stats span {
  display: grid;
  gap: 0.18rem;
  text-align: center;
}

body[data-view="testimony"] .testimony-entry-stats b {
  color: #006a52;
  font-size: 1rem;
}

body[data-view="testimony"] .testimony-entry-stats small {
  color: #526761;
  font-size: 0.7rem;
}

body[data-view="testimony"] .testimony-entry-stats button {
  min-height: 2rem;
  padding: 0 0.35rem;
  color: #17362e;
  font-weight: 950;
}

body[data-view="testimony"] .testimony-empty-state {
  display: grid;
  place-items: center;
  gap: 0.75rem;
  min-height: 16rem;
  padding: 2rem;
  border: 1px dashed rgba(0, 82, 61, 0.18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(237, 249, 243, 0.86), rgba(255, 255, 255, 0.96));
  text-align: center;
}

body[data-view="testimony"] .testimony-empty-state span {
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #006a52, #e4a928);
}

body[data-view="testimony"] .testimony-load-more {
  justify-self: center;
  margin-top: 0.75rem;
}

body[data-view="testimony"] .testimony-insight-grid,
body[data-view="testimony"] .testimony-impact-card > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

body[data-view="testimony"] .testimony-insight-grid article,
body[data-view="testimony"] .testimony-impact-card span {
  display: grid;
  gap: 0.18rem;
  min-height: 6.4rem;
  padding: 0.85rem;
  border-radius: 13px;
  background: #f5faf8;
  color: #17362e;
}

body[data-view="testimony"] .testimony-insight-grid article span {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: #f4e3bb;
}

body[data-view="testimony"] .testimony-insight-grid strong,
body[data-view="testimony"] .testimony-impact-card strong {
  color: #071524;
  font-size: 1.35rem;
}

body[data-view="testimony"] .testimony-insight-grid small,
body[data-view="testimony"] .testimony-impact-card small {
  color: #526761;
  font-weight: 800;
}

body[data-view="testimony"] .testimony-insight-grid em {
  color: #006a52;
  font-style: normal;
  font-weight: 950;
}

body[data-view="testimony"] .testimony-milestones-card {
  overflow: hidden;
  padding: 1rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 225, 120, 0.22), transparent 22%),
    linear-gradient(135deg, #00614d, #003329);
  color: #fff;
  box-shadow: 0 1rem 2.4rem rgba(3, 48, 37, 0.14);
}

body[data-view="testimony"] .testimony-milestones-card h3 {
  color: #fff;
}

body[data-view="testimony"] .testimony-milestones {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}

body[data-view="testimony"] .testimony-milestones::before {
  content: "";
  position: absolute;
  top: 1.22rem;
  left: 8%;
  right: 8%;
  height: 0.18rem;
  background: rgba(255, 255, 255, 0.35);
}

body[data-view="testimony"] .testimony-milestones span {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.32rem;
  text-align: center;
}

body[data-view="testimony"] .testimony-milestones b {
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 40, 31, 0.42);
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.18);
}

body[data-view="testimony"] .testimony-milestones .active b {
  background: #edb247;
}

body[data-view="testimony"] .testimony-milestones strong {
  font-size: 0.78rem;
}

body[data-view="testimony"] .testimony-milestones small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  line-height: 1.35;
}

body[data-view="testimony"] .testimony-milestones-card progress {
  width: 100%;
  height: 0.55rem;
  margin-top: 1.25rem;
  accent-color: #f1c46a;
}

body[data-view="testimony"] .testimony-milestone-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.65rem;
}

body[data-view="testimony"] .testimony-milestone-footer strong,
body[data-view="testimony"] .testimony-milestone-footer a {
  color: #ffe178;
  font-weight: 950;
  text-decoration: none;
}

body[data-view="testimony"] .testimony-wall-card p {
  margin: 0.35rem 0 0.8rem;
  color: #526761;
}

body[data-view="testimony"] .testimony-avatar-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.85rem;
}

body[data-view="testimony"] .testimony-avatar-row span,
body[data-view="testimony"] .testimony-avatar-row b {
  width: 2.2rem;
  height: 2.2rem;
  margin-right: -0.35rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: none;
}

body[data-view="testimony"] .testimony-avatar-row span:nth-child(2) { background-image: url("public/images/canon/canon-builder-badge.png"); }
body[data-view="testimony"] .testimony-avatar-row span:nth-child(3) { background-image: url("public/images/canon/canon-card-04.png"); }
body[data-view="testimony"] .testimony-avatar-row span:nth-child(4) { background-image: url("public/images/canon/canon-card-06.png"); }
body[data-view="testimony"] .testimony-avatar-row span:nth-child(5) { background-image: url("public/images/canon/canon-card-09.png"); }

body[data-view="testimony"] .testimony-avatar-row b {
  display: grid;
  place-items: center;
  background: #006a52;
  color: #fff;
  font-size: 0.78rem;
}

body[data-view="testimony"] .testimony-impact-card > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0.85rem 0;
}

body[data-view="testimony"] .testimony-impact-card button {
  width: 100%;
}

body[data-view="testimony"] .testimony-quick-card {
  display: grid;
  gap: 0.55rem;
}

body[data-view="testimony"] .testimony-quick-card button {
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border-radius: 11px;
  background: #eef8f3;
  color: #006a52;
  font-weight: 950;
  text-align: left;
}

@media (max-width: 1220px) {
  body[data-view="testimony"] .testimony-hero {
    background:
      linear-gradient(90deg, rgba(245, 251, 247, 0.99) 0%, rgba(245, 251, 247, 0.9) 36%, rgba(245, 251, 247, 0.5) 62%, rgba(0, 68, 51, 0.14) 100%),
      url("public/images/testimony/testimony-hero-bg.png") center center / cover no-repeat;
  }

  body[data-view="testimony"] .testimony-dashboard {
    grid-template-columns: 1fr;
  }

  body[data-view="testimony"] .testimony-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-view="testimony"] .testimony-hero {
    min-height: clamp(15rem, 56vw, 19rem);
    border-radius: 16px;
    background:
      linear-gradient(90deg, rgba(245, 251, 247, 0.99) 0%, rgba(245, 251, 247, 0.92) 48%, rgba(245, 251, 247, 0.68) 76%, rgba(0, 68, 51, 0.18) 100%),
      url("public/images/testimony/testimony-hero-bg.png") 58% center / cover no-repeat;
  }

  body[data-view="testimony"] .testimony-hero::after {
    background:
      radial-gradient(circle at 70% 18%, rgba(255, 224, 139, 0.18), transparent 24%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 52, 40, 0.14));
  }

  body[data-view="testimony"] .testimony-hero > div {
    max-width: 30rem;
  }

  body[data-view="testimony"] .testimony-rail,
  body[data-view="testimony"] .testimony-insight-grid,
  body[data-view="testimony"] .testimony-impact-card > div,
  body[data-view="testimony"] .testimony-milestones {
    grid-template-columns: 1fr;
  }

  body[data-view="testimony"] .testimony-card-head,
  body[data-view="testimony"] .testimony-section-head,
  body[data-view="testimony"] .testimony-milestone-footer {
    flex-direction: column;
  }

  body[data-view="testimony"] .testimony-entry {
    grid-template-columns: 1fr;
  }

body[data-view="testimony"] .testimony-entry-stats {
    border-left: 0;
    border-top: 1px solid rgba(0, 82, 61, 0.1);
    padding: 0.75rem 0 0;
  }

  body[data-view="testimony"] .testimony-milestones::before {
    display: none;
  }
}

/* Teo Guide premium biblical mentor dashboard. */
body[data-view="guide"] #guide {
  padding-top: 0;
}

body[data-view="guide"] .guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(24rem, 0.82fr);
  gap: 1.15rem;
  align-items: start;
}

body[data-view="guide"] .guide-main {
  display: grid;
  gap: 1rem;
}

body[data-view="guide"] .guide-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(15rem, 25vw, 21rem);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(245, 251, 247, 0.98) 0 32%, rgba(245, 251, 247, 0.7) 54%, rgba(0, 52, 40, 0.08)),
    url("public/images/lexicon/word-of-the-day-bg.png") center center / cover no-repeat;
  box-shadow: 0 1.2rem 3rem rgba(3, 48, 37, 0.1);
}

body[data-view="guide"] .guide-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 18%, rgba(255, 226, 124, 0.28), transparent 26%),
    linear-gradient(180deg, transparent 58%, rgba(0, 52, 40, 0.14));
  pointer-events: none;
}

body[data-view="guide"] .guide-hero > div {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 34rem;
  gap: 0.65rem;
  padding: clamp(1.25rem, 2.4vw, 2.15rem);
}

body[data-view="guide"] .guide-hero h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  color: #071524;
  font-size: clamp(2.15rem, 3.3vw, 3.45rem);
  letter-spacing: 0;
}

body[data-view="guide"] .guide-hero h3 span,
body[data-view="guide"] .guide-chat-head > span {
  display: inline-block;
  width: 1.7rem;
  height: 1.7rem;
  background: #006a52;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.8l1.7 4.7 4.7 1.7-4.7 1.7-1.7 4.7-1.7-4.7-4.7-1.7 4.7-1.7L12 2.8Z'/%3E%3Cpath d='M19 14l.9 2.5L22.4 17.4l-2.5.9L19 20.8l-.9-2.5-2.5-.9 2.5-.9L19 14Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.8l1.7 4.7 4.7 1.7-4.7 1.7-1.7 4.7-1.7-4.7-4.7-1.7 4.7-1.7L12 2.8Z'/%3E%3Cpath d='M19 14l.9 2.5L22.4 17.4l-2.5.9L19 20.8l-.9-2.5-2.5-.9 2.5-.9L19 14Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="guide"] .guide-hero h4,
body[data-view="guide"] .guide-hero p {
  margin: 0;
}

body[data-view="guide"] .guide-hero h4 {
  color: #102a23;
  font-size: 1.08rem;
}

body[data-view="guide"] .guide-hero p:not(.eyebrow) {
  color: #263b35;
  font-size: 1.02rem;
  line-height: 1.55;
}

body[data-view="guide"] .guide-feature-panel {
  display: grid;
  grid-template-columns: 7rem minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at 9% 20%, rgba(255, 255, 255, 0.18), transparent 23%),
    linear-gradient(135deg, rgba(0, 95, 74, 0.96), rgba(0, 53, 42, 0.98));
  color: #fff;
  box-shadow: 0 1.1rem 2.6rem rgba(0, 55, 42, 0.16);
}

body[data-view="guide"] .guide-feature-orb {
  display: grid;
  width: 6.2rem;
  height: 6.2rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

body[data-view="guide"] .guide-feature-orb::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M8 10h8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M8 10h8'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="guide"] .guide-feature-copy h3,
body[data-view="guide"] .guide-feature-copy p {
  margin: 0;
}

body[data-view="guide"] .guide-feature-copy p {
  margin-top: 0.45rem;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.55;
}

body[data-view="guide"] .guide-feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  padding-left: 1rem;
}

body[data-view="guide"] .guide-feature-list article {
  display: grid;
  gap: 0.35rem;
}

body[data-view="guide"] .guide-feature-list span,
body[data-view="guide"] .guide-help-grid span {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

body[data-view="guide"] .guide-feature-list small {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}

body[data-view="guide"] .guide-help-section,
body[data-view="guide"] .guide-topics-section {
  display: grid;
  gap: 0.85rem;
}

body[data-view="guide"] .guide-help-section h3,
body[data-view="guide"] .guide-topics-section h3 {
  margin: 0;
  color: #0d332a;
  font-size: 1.05rem;
}

body[data-view="guide"] .guide-help-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

body[data-view="guide"] .guide-help-grid article {
  display: grid;
  gap: 0.7rem;
  min-height: 11rem;
  padding: 1.15rem;
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 0.9rem 2rem rgba(3, 48, 37, 0.07);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

body[data-view="guide"] .guide-help-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 1.25rem 2.5rem rgba(3, 48, 37, 0.12);
}

body[data-view="guide"] .guide-help-grid span {
  background: #e6f4ef;
}

body[data-view="guide"] .guide-help-grid article:nth-child(2) span { background: #f7ecd1; }
body[data-view="guide"] .guide-help-grid article:nth-child(3) span { background: #e6f2ff; }
body[data-view="guide"] .guide-help-grid article:nth-child(4) span { background: #efe9fb; }

body[data-view="guide"] .guide-help-grid h4,
body[data-view="guide"] .guide-help-grid p {
  margin: 0;
}

body[data-view="guide"] .guide-help-grid h4 {
  color: #071524;
  font-size: 1.02rem;
}

body[data-view="guide"] .guide-help-grid p {
  color: #526761;
  line-height: 1.5;
}

body[data-view="guide"] .guide-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}

body[data-view="guide"] .guide-topic-grid .prompt-chip,
body[data-view="guide"] .guide-suggested-prompts .prompt-chip {
  min-height: 2.55rem;
  border: 1px solid rgba(0, 82, 61, 0.1);
  border-radius: 10px;
  background: #fff;
  color: #17362e;
  font-weight: 850;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

body[data-view="guide"] .guide-topic-grid .prompt-chip:hover,
body[data-view="guide"] .guide-suggested-prompts .prompt-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 112, 85, 0.18);
  background: #f3faf7;
}

body[data-view="guide"] .guide-wisdom-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 6rem;
  padding: 1rem;
  border-radius: 15px;
  background:
    linear-gradient(90deg, rgba(0, 61, 48, 0.78), rgba(0, 61, 48, 0.26)),
    url("public/images/lexicon/lexicon-hero-bg.png") center center / cover no-repeat;
  color: #fff;
  box-shadow: 0 1rem 2.2rem rgba(3, 48, 37, 0.12);
}

body[data-view="guide"] .guide-wisdom-banner > span {
  display: grid;
  width: 3.6rem;
  height: 3.6rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

body[data-view="guide"] .guide-wisdom-banner > span::before {
  content: '"';
  color: #fff;
  font-size: 2.2rem;
  font-weight: 900;
}

body[data-view="guide"] .guide-wisdom-banner p,
body[data-view="guide"] .guide-wisdom-banner b {
  margin: 0;
}

body[data-view="guide"] .guide-wisdom-banner p {
  font-size: 1.15rem;
  line-height: 1.45;
}

body[data-view="guide"] .guide-wisdom-banner b {
  color: #ffe178;
}

body[data-view="guide"] .guide-chat-panel {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 1rem;
  min-height: calc(100vh - 3rem);
  padding: 1.2rem;
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1.2rem 3rem rgba(3, 48, 37, 0.1);
}

body[data-view="guide"] .guide-chat-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

body[data-view="guide"] .guide-chat-head > span {
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #00745b;
  -webkit-mask: none;
  mask: none;
}

body[data-view="guide"] .guide-chat-head h3,
body[data-view="guide"] .guide-chat-head p {
  margin: 0;
}

body[data-view="guide"] .guide-chat-head h3 {
  color: #0d332a;
  font-size: 1rem;
}

body[data-view="guide"] .guide-chat-head p {
  color: #526761;
  font-size: 0.82rem;
  font-weight: 800;
}

body[data-view="guide"] .chat-log {
  display: grid;
  align-content: start;
  gap: 0.95rem;
  min-height: 34rem;
  max-height: 56vh;
  padding: 0.35rem;
  overflow: auto;
}

body[data-view="guide"] .message-row {
  display: grid;
  grid-template-columns: 2.45rem minmax(0, max-content);
  gap: 0.65rem;
  align-items: start;
  max-width: 92%;
}

body[data-view="guide"] .message-row.user {
  justify-self: end;
  grid-template-columns: minmax(0, max-content) 2.45rem;
}

body[data-view="guide"] .message-icon {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #00745b, #00513f);
  box-shadow: 0 0.75rem 1.45rem rgba(0, 82, 61, 0.14);
}

body[data-view="guide"] .message-icon::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="guide"] .message-row.user .message-icon {
  grid-column: 2;
  grid-row: 1;
  background: linear-gradient(135deg, #f3c76a, #00745b);
}

body[data-view="guide"] .message-row.user .message-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.8l1.7 4.7 4.7 1.7-4.7 1.7-1.7 4.7-1.7-4.7-4.7-1.7 4.7-1.7L12 2.8Z'/%3E%3Cpath d='M19 14l.9 2.5L22.4 17.4l-2.5.9L19 20.8l-.9-2.5-2.5-.9 2.5-.9L19 14Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.8l1.7 4.7 4.7 1.7-4.7 1.7-1.7 4.7-1.7-4.7-4.7-1.7 4.7-1.7L12 2.8Z'/%3E%3Cpath d='M19 14l.9 2.5L22.4 17.4l-2.5.9L19 20.8l-.9-2.5-2.5-.9 2.5-.9L19 14Z'/%3E%3C/svg%3E");
}

body[data-view="guide"] .message {
  width: fit-content;
  max-width: min(42rem, 100%);
  padding: 0.85rem 1rem;
  border-radius: 14px;
  color: #18342d;
  font-size: 0.9rem;
  line-height: 1.55;
  box-shadow: 0 0.55rem 1.4rem rgba(3, 48, 37, 0.06);
}

body[data-view="guide"] .message.user {
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, #00745b, #00513f);
  color: #fff;
  grid-column: 1;
  grid-row: 1;
}

body[data-view="guide"] .message.teo {
  border: 1px solid rgba(0, 82, 61, 0.08);
  border-radius: 14px 14px 14px 4px;
  background: #eef6f2;
}

body[data-view="guide"] .guide-suggested-prompts {
  display: grid;
  gap: 0.55rem;
}

body[data-view="guide"] .guide-suggested-prompts p {
  margin: 0;
  color: #17362e;
  font-size: 0.78rem;
  font-weight: 950;
}

body[data-view="guide"] .guide-suggested-prompts > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

body[data-view="guide"] .guide-suggested-prompts .prompt-chip {
  min-height: 3.65rem;
  padding: 0.65rem;
  text-align: left;
}

body[data-view="guide"] .chat-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid rgba(0, 82, 61, 0.1);
  border-radius: 12px;
  background: #fff;
}

body[data-view="guide"] .chat-form input {
  border: 0;
  background: transparent;
  outline: 0;
}

body[data-view="guide"] .guide-attach-button,
body[data-view="guide"] .guide-mic-button {
  width: 2.45rem;
  height: 2.45rem;
  min-height: 0;
  padding: 0;
  border-radius: 9px;
  background: #eef8f3;
}

body[data-view="guide"] .guide-attach-button::before,
body[data-view="guide"] .guide-mic-button::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: auto;
  background: #006a52;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.4 11.6 12 21a6 6 0 0 1-8.5-8.5L14.2 1.8a4 4 0 0 1 5.7 5.7L9.2 18.2a2 2 0 1 1-2.8-2.8L16 5.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.4 11.6 12 21a6 6 0 0 1-8.5-8.5L14.2 1.8a4 4 0 0 1 5.7 5.7L9.2 18.2a2 2 0 1 1-2.8-2.8L16 5.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="guide"] .guide-mic-button::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-chat-note {
  margin: 0;
  color: #6b7f79;
  font-size: 0.78rem;
  text-align: center;
}

@media (max-width: 1240px) {
  body[data-view="guide"] .guide-layout {
    grid-template-columns: 1fr;
  }

  body[data-view="guide"] .guide-chat-panel {
    position: static;
    min-height: auto;
  }
}

@media (max-width: 860px) {
  body[data-view="guide"] .guide-feature-panel,
  body[data-view="guide"] .guide-feature-list,
  body[data-view="guide"] .guide-help-grid,
  body[data-view="guide"] .guide-topic-grid,
  body[data-view="guide"] .guide-suggested-prompts > div {
    grid-template-columns: 1fr 1fr;
  }

  body[data-view="guide"] .guide-feature-panel {
    grid-template-columns: 1fr;
  }

  body[data-view="guide"] .guide-feature-list {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 620px) {
  body[data-view="guide"] .guide-help-grid,
  body[data-view="guide"] .guide-topic-grid,
  body[data-view="guide"] .guide-suggested-prompts > div,
  body[data-view="guide"] .chat-form {
    grid-template-columns: 1fr;
  }

body[data-view="guide"] .guide-hero > div {
    padding: 1rem;
  }
}

/* Lexicon panel icon refinements. */
body[data-view="lexicon"] .lexicon-stat-card[data-icon="scripture"] > span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-stat-card[data-icon="folder"] > span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.5A2.5 2.5 0 0 1 5.5 4H10l2 2h6.5A2.5 2.5 0 0 1 21 8.5v9A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5v-11Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.5A2.5 2.5 0 0 1 5.5 4H10l2 2h6.5A2.5 2.5 0 0 1 21 8.5v9A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5v-11Z'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-stat-card[data-icon="globe"] > span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18'/%3E%3Cpath d='M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18'/%3E%3Cpath d='M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-stat-card[data-icon="star"] > span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6-5.4-2.8-5.4 2.8 1-6-4.4-4.3 6.1-.9L12 3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6-5.4-2.8-5.4 2.8 1-6-4.4-4.3 6.1-.9L12 3Z'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-category-list span,
body[data-view="lexicon"] .lexicon-recent-list span,
body[data-view="lexicon"] .lexicon-footer-features span {
  position: relative;
  display: inline-grid;
  place-items: center;
}

body[data-view="lexicon"] .lexicon-category-list span::before,
body[data-view="lexicon"] .lexicon-recent-list span::before,
body[data-view="lexicon"] .lexicon-footer-features span::before,
body[data-view="lexicon"] .lexicon-tools-card button::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: #006a52;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="lexicon"] .lexicon-category-list p:nth-child(2) span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6-5.4-2.8-5.4 2.8 1-6-4.4-4.3 6.1-.9L12 3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6-5.4-2.8-5.4 2.8 1-6-4.4-4.3 6.1-.9L12 3Z'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-category-list p:nth-child(3) span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2v6'/%3E%3Cpath d='M5 8a7 7 0 0 1 14 0c0 5-7 8-7 14 0-6-7-9-7-14Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2v6'/%3E%3Cpath d='M5 8a7 7 0 0 1 14 0c0 5-7 8-7 14 0-6-7-9-7-14Z'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-recent-list span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-recent-list p:nth-child(2) span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-recent-list p:nth-child(3) span::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6-5.4-2.8-5.4 2.8 1-6-4.4-4.3 6.1-.9L12 3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6-5.4-2.8-5.4 2.8 1-6-4.4-4.3 6.1-.9L12 3Z'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-footer-features span[data-icon="rooted"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M6 8c3 0 6 2 6 5-3 0-6-2-6-5Z'/%3E%3Cpath d='M18 8c-3 0-6 2-6 5 3 0 6-2 6-5Z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M6 8c3 0 6 2 6 5-3 0-6-2-6-5Z'/%3E%3Cpath d='M18 8c-3 0-6 2-6 5 3 0 6-2 6-5Z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-footer-features span[data-icon="language"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18'/%3E%3Cpath d='M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18'/%3E%3Cpath d='M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-footer-features span[data-icon="audio"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-footer-features span[data-icon="collection"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M15 6v6l-2-1.5L11 12V6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M15 6v6l-2-1.5L11 12V6'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-tools-card button {
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
}

body[data-view="lexicon"] .lexicon-tools-card button::before {
  grid-row: span 2;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  padding: 0.5rem;
  background-color: #006a52;
}

body[data-view="lexicon"] .lexicon-tools-card button:nth-of-type(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-tools-card button:nth-of-type(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4v16'/%3E%3Cpath d='M19 4v16'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M8 17h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4v16'/%3E%3Cpath d='M19 4v16'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M8 17h8'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-tools-card button:nth-of-type(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M4 5h8a4 4 0 0 1 0 8H4'/%3E%3Cpath d='M12 13h3a4 4 0 0 1 0 8H4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19V5'/%3E%3Cpath d='M4 5h8a4 4 0 0 1 0 8H4'/%3E%3Cpath d='M12 13h3a4 4 0 0 1 0 8H4'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-tools-card button:nth-of-type(4)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M9 9h6'/%3E%3Cpath d='M12 6v6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M9 9h6'/%3E%3Cpath d='M12 6v6'/%3E%3C/svg%3E");
}

/* Lexicon action icons matching the reference panel. */
body[data-view="lexicon"] .lexicon-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.7rem;
  white-space: nowrap;
}

body[data-view="lexicon"] .lexicon-action-button span {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background: currentColor;
}

body[data-view="lexicon"] .lexicon-action-button span:first-child {
  color: #006a52;
}

body[data-view="lexicon"] .lexicon-action-button span:last-child {
  color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="lexicon"] .lexicon-explore-word-button span:first-child {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M9 8h6'/%3E%3Cpath d='M9 12h4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M9 8h6'/%3E%3Cpath d='M9 12h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="lexicon"] .lexicon-reflection-button {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

body[data-view="lexicon"] .lexicon-reflection-button span:first-child {
  color: #ffe178;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M5 8c3.5 0 7 2.3 7 6-3.5 0-7-2.3-7-6Z'/%3E%3Cpath d='M19 8c-3.5 0-7 2.3-7 6 3.5 0 7-2.3 7-6Z'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M5 8c3.5 0 7 2.3 7 6-3.5 0-7-2.3-7-6Z'/%3E%3Cpath d='M19 8c-3.5 0-7 2.3-7 6 3.5 0 7-2.3 7-6Z'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="lexicon"] .lexicon-icon-button::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: auto;
  background: #006a52;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

body[data-view="lexicon"] .lexicon-share-word-button::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.5 6.8-4'/%3E%3Cpath d='m8.6 13.5 6.8 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.5 6.8-4'/%3E%3Cpath d='m8.6 13.5 6.8 4'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-save-word-button::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-view-toggle button {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(0, 106, 82, 0.14);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0.55rem 1rem rgba(0, 54, 41, 0.08);
}

body[data-view="lexicon"] .lexicon-view-toggle button::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  background: #006a52;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="lexicon"] .lexicon-view-toggle button + button::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-view-toggle button.active {
  background: #006a52;
}

body[data-view="lexicon"] .lexicon-view-toggle button.active::before {
  background: #fff;
}

/* Testimony media gallery refinement. */
body[data-view="testimony"] .testimony-archive-card {
  overflow: hidden;
  padding: 1.1rem;
}

body[data-view="testimony"] .testimony-archive-card .testimony-section-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

body[data-view="testimony"] .testimony-archive-card .testimony-section-head h3::before,
body[data-view="testimony"] .testimony-list-tools button::before,
body[data-view="testimony"] .testimony-status-badge::before,
body[data-view="testimony"] .testimony-entry-stats span::before,
body[data-view="testimony"] .testimony-play-icon::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

body[data-view="testimony"] .testimony-archive-card .testimony-section-head h3::before {
  width: 1.35rem;
  height: 1.35rem;
  color: #006a52;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M8 18a4 4 0 0 1 8 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M8 18a4 4 0 0 1 8 0'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-list-tools button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

body[data-view="testimony"] .testimony-list-tools button::before {
  color: #006a52;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M10 19h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M10 19h4'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-media-card {
  grid-template-columns: minmax(11rem, 13.2rem) minmax(0, 1fr) minmax(13.5rem, 0.36fr);
  gap: 1rem;
  min-height: 7.15rem;
  padding: 0.62rem;
  border-radius: 18px;
  box-shadow: 0 0.8rem 2.2rem rgba(3, 48, 37, 0.055);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body[data-view="testimony"] .testimony-media-card:hover {
  border-color: rgba(0, 106, 82, 0.26);
  box-shadow: 0 1.2rem 2.7rem rgba(3, 48, 37, 0.13);
}

body[data-view="testimony"] .testimony-thumb {
  overflow: hidden;
  min-height: auto;
  aspect-ratio: 16 / 9;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 22%, rgba(255, 225, 120, 0.42), transparent 24%),
    linear-gradient(135deg, #003329, #dcefe7);
}

body[data-view="testimony"] .testimony-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 35, 27, 0.02), rgba(0, 35, 27, 0.42));
  pointer-events: none;
}

body[data-view="testimony"] .testimony-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 240ms ease;
}

body[data-view="testimony"] .testimony-media-card:hover .testimony-thumb img {
  transform: scale(1.045);
}

body[data-view="testimony"] .testimony-status-badge {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(0, 32, 25, 0.78);
  backdrop-filter: blur(8px);
  box-shadow: 0 0.45rem 1.1rem rgba(0, 0, 0, 0.18);
}

body[data-view="testimony"] .testimony-status-badge::before {
  width: 0.78rem;
  height: 0.78rem;
  color: #fff;
}

body[data-view="testimony"] .testimony-status-badge[data-status="public"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18'/%3E%3Cpath d='M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18'/%3E%3Cpath d='M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-status-badge[data-status="lock"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-status-badge[data-status="draft"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M5 3h9l6 6v12H5V3Z'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M5 3h9l6 6v12H5V3Z'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-play-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  transform: translate(-50%, -50%);
}

body[data-view="testimony"] .testimony-play-icon::before {
  color: #006a52;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7L8 5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7L8 5Z'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-duration {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(0, 32, 25, 0.78);
  color: #fff;
  font-weight: 900;
}

body[data-view="testimony"] .testimony-entry-body {
  align-self: center;
  gap: 0.38rem;
  min-width: 0;
}

body[data-view="testimony"] .testimony-entry h4 {
  font-size: clamp(1rem, 1.25vw, 1.28rem);
  line-height: 1.2;
}

body[data-view="testimony"] .testimony-entry-meta {
  gap: 0.9rem;
}

body[data-view="testimony"] .testimony-entry-meta b {
  color: #17362e;
}

body[data-view="testimony"] .testimony-entry p {
  position: relative;
  max-width: 44rem;
  -webkit-line-clamp: 2;
}

body[data-view="testimony"] .testimony-entry .scripture-strip {
  margin-top: 0.15rem;
}

body[data-view="testimony"] .testimony-entry-stats {
  grid-template-columns: repeat(3, minmax(3.8rem, 1fr)) 2rem;
  gap: 0.55rem;
  min-width: 0;
}

body[data-view="testimony"] .testimony-entry-stats span {
  align-content: center;
  justify-items: center;
  min-height: 4.3rem;
  padding: 0.45rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f7fbf9);
}

body[data-view="testimony"] .testimony-entry-stats span::before {
  width: 1.05rem;
  height: 1.05rem;
  color: #006a52;
}

body[data-view="testimony"] .testimony-entry-stats span[data-metric="encouragements"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-entry-stats span[data-metric="views"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-entry-stats span[data-metric="shares"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.5 6.8-4'/%3E%3Cpath d='m8.6 13.5 6.8 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.5 6.8-4'/%3E%3Cpath d='m8.6 13.5 6.8 4'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-entry-stats button {
  width: 2rem;
  height: 2.5rem;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: #17362e;
  font-size: 0;
}

body[data-view="testimony"] .testimony-entry-stats button::before {
  content: "...";
  display: block;
  color: #17362e;
  font-size: 1.18rem;
  line-height: 1;
  transform: rotate(90deg);
}

body[data-view="testimony"] .testimony-load-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border-color: transparent;
  background: transparent;
  color: #006a52;
}

body[data-view="testimony"] .testimony-load-more::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="testimony"] .testimony-draft-empty-state {
  min-height: 18rem;
  padding: 2.25rem 1.5rem;
  border: 0;
  background: #fff;
  box-shadow: none;
}

body[data-view="testimony"] .testimony-draft-empty-state .testimony-draft-illustration {
  position: relative;
  width: 9rem;
  height: 5.35rem;
  border-radius: 0;
  background:
    url("public/images/testimony/draft-empty-icon.png") center center / contain no-repeat;
  box-shadow: none;
}

body[data-view="testimony"] .testimony-draft-empty-state h4 {
  margin: 0;
  color: #071524;
  font-size: 1.12rem;
}

body[data-view="testimony"] .testimony-draft-empty-state p {
  max-width: 31rem;
  margin: 0;
  color: #6f7f7a;
  line-height: 1.65;
}

body[data-view="testimony"] .testimony-draft-empty-state .primary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.85rem;
  border-radius: 8px;
  box-shadow: 0 0.8rem 1.6rem rgba(0, 106, 82, 0.18);
}

body[data-view="testimony"] .testimony-draft-empty-state .primary span {
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Testimony right-rail icon system. */
body[data-view="testimony"] .testimony-milestones-card h3,
body[data-view="testimony"] .testimony-wall-card h3,
body[data-view="testimony"] .testimony-impact-card h3,
body[data-view="testimony"] .testimony-quick-card h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

body[data-view="testimony"] .testimony-milestones-card h3::before,
body[data-view="testimony"] .testimony-wall-card h3::before,
body[data-view="testimony"] .testimony-impact-card h3::before,
body[data-view="testimony"] .testimony-quick-card h3::before,
body[data-view="testimony"] .testimony-milestones b::before,
body[data-view="testimony"] .testimony-impact-card span::before,
body[data-view="testimony"] .testimony-quick-card button::before,
body[data-view="testimony"] .testimony-wall-card .primary::before,
body[data-view="testimony"] .testimony-impact-card .secondary::after,
body[data-view="testimony"] .testimony-milestone-footer a::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

body[data-view="testimony"] .testimony-milestones-card h3::before {
  color: #ffe178;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v4a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M5 5H3v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M19 5h2v2a4 4 0 0 1-4 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v4a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M5 5H3v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M19 5h2v2a4 4 0 0 1-4 4'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-milestones b {
  display: grid;
  place-items: center;
}

body[data-view="testimony"] .testimony-milestones b::before {
  width: 1.18rem;
  height: 1.18rem;
  color: #d9fff2;
}

body[data-view="testimony"] .testimony-milestones .active b::before {
  color: #fff;
}

body[data-view="testimony"] .testimony-milestones [data-icon="first-step"] b::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4L16.5 3.5Z'/%3E%3Cpath d='M12 20h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4L16.5 3.5Z'/%3E%3Cpath d='M12 20h8'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-milestones [data-icon="light"] b::before,
body[data-view="testimony"] .testimony-wall-card h3::before,
body[data-view="testimony"] .testimony-impact-card span[data-icon="heart"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-milestones [data-icon="share"] b::before,
body[data-view="testimony"] .testimony-impact-card span[data-icon="share"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.5 6.8-4'/%3E%3Cpath d='m8.6 13.5 6.8 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.5 6.8-4'/%3E%3Cpath d='m8.6 13.5 6.8 4'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-milestones [data-icon="impact"] b::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-8 0v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-8 0v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-milestones [data-icon="legacy"] b::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 8 4 10h10l4-10-6 4-3-7-3 7-6-4Z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 8 4 10h10l4-10-6 4-3-7-3 7-6-4Z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-wall-card h3::before,
body[data-view="testimony"] .testimony-impact-card h3::before,
body[data-view="testimony"] .testimony-quick-card h3::before {
  color: #006a52;
}

body[data-view="testimony"] .testimony-wall-card .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

body[data-view="testimony"] .testimony-wall-card .primary::before {
  width: 0.95rem;
  height: 0.95rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8l1-8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8l1-8Z'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-impact-card span {
  justify-items: center;
  align-content: center;
}

body[data-view="testimony"] .testimony-impact-card span::before {
  width: 1.2rem;
  height: 1.2rem;
  color: #006a52;
}

body[data-view="testimony"] .testimony-impact-card span[data-icon="views"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-impact-card span[data-icon="prayer"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11V5a2 2 0 1 1 4 0v8'/%3E%3Cpath d='M12 9V4a2 2 0 1 1 4 0v9'/%3E%3Cpath d='M16 9V6a2 2 0 1 1 4 0v7a8 8 0 0 1-16 0v-2a2 2 0 1 1 4 0v1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11V5a2 2 0 1 1 4 0v8'/%3E%3Cpath d='M12 9V4a2 2 0 1 1 4 0v9'/%3E%3Cpath d='M16 9V6a2 2 0 1 1 4 0v7a8 8 0 0 1-16 0v-2a2 2 0 1 1 4 0v1'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-impact-card .secondary,
body[data-view="testimony"] .testimony-milestone-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

body[data-view="testimony"] .testimony-impact-card .secondary::after,
body[data-view="testimony"] .testimony-milestone-footer a::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-quick-card h3::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8l1-8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8l1-8Z'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-quick-card button {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
}

body[data-view="testimony"] .testimony-quick-card button::before {
  width: 1rem;
  height: 1rem;
  padding: 0.45rem;
  border-radius: 999px;
  background-color: #006a52;
}

body[data-view="testimony"] .testimony-quick-card button[data-icon="write"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4L16.5 3.5Z'/%3E%3Cpath d='M12 20h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4L16.5 3.5Z'/%3E%3Cpath d='M12 20h8'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-quick-card button[data-icon="invite"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-8 0v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-8 0v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E");
}

body[data-view="testimony"] .testimony-quick-card button[data-icon="export"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
}

/* Teo Guide icon refinements. */
body[data-view="guide"] .guide-feature-copy h3,
body[data-view="guide"] .guide-help-section h3,
body[data-view="guide"] .guide-topics-section h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

body[data-view="guide"] .guide-feature-copy h3::before,
body[data-view="guide"] .guide-help-section h3::before,
body[data-view="guide"] .guide-topics-section h3::before,
body[data-view="guide"] .guide-feature-list span::before,
body[data-view="guide"] .guide-help-grid span::before,
body[data-view="guide"] .guide-topic-grid .prompt-chip::before,
body[data-view="guide"] .guide-chat-head > span::before,
body[data-view="guide"] .guide-chat-note::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

body[data-view="guide"] .guide-feature-copy h3::before {
  color: #d9fff2;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-help-section h3::before {
  color: #006a52;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2v6'/%3E%3Cpath d='M5 8a7 7 0 0 1 14 0c0 5-7 8-7 14 0-6-7-9-7-14Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2v6'/%3E%3Cpath d='M5 8a7 7 0 0 1 14 0c0 5-7 8-7 14 0-6-7-9-7-14Z'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-topics-section h3::before {
  color: #006a52;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 7h-9'/%3E%3Cpath d='M14 17H5'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 7h-9'/%3E%3Cpath d='M14 17H5'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-feature-list span,
body[data-view="guide"] .guide-help-grid span {
  display: grid;
  place-items: center;
}

body[data-view="guide"] .guide-feature-list span::before {
  color: #fff;
}

body[data-view="guide"] .guide-feature-list span[data-icon="scripture"]::before,
body[data-view="guide"] .guide-help-grid span[data-icon="word"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-feature-list span[data-icon="personal"]::before,
body[data-view="guide"] .guide-help-grid span[data-icon="calling"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6-5.4-2.8-5.4 2.8 1-6-4.4-4.3 6.1-.9L12 3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6-5.4-2.8-5.4 2.8 1-6-4.4-4.3 6.1-.9L12 3Z'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-feature-list span[data-icon="access"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-help-grid span::before {
  color: #006a52;
}

body[data-view="guide"] .guide-help-grid span[data-icon="decision"]::before {
  color: #2f7bc7;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M8.6 14a6 6 0 1 1 6.8 0c-.8.5-1.4 1.5-1.4 2.5h-4c0-1-.6-2-1.4-2.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M8.6 14a6 6 0 1 1 6.8 0c-.8.5-1.4 1.5-1.4 2.5h-4c0-1-.6-2-1.4-2.5Z'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-help-grid span[data-icon="growth"]::before {
  color: #7755c7;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M6 8c3 0 6 2 6 5-3 0-6-2-6-5Z'/%3E%3Cpath d='M18 8c-3 0-6 2-6 5 3 0 6-2 6-5Z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M6 8c3 0 6 2 6 5-3 0-6-2-6-5Z'/%3E%3Cpath d='M18 8c-3 0-6 2-6 5 3 0 6-2 6-5Z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-topic-grid .prompt-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

body[data-view="guide"] .guide-topic-grid .prompt-chip::before {
  color: #006a52;
}

body[data-view="guide"] .guide-topic-grid .prompt-chip:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-topic-grid .prompt-chip:nth-child(2)::before,
body[data-view="guide"] .guide-topic-grid .prompt-chip:nth-child(3)::before,
body[data-view="guide"] .guide-topic-grid .prompt-chip:nth-child(8)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M8.6 14a6 6 0 1 1 6.8 0c-.8.5-1.4 1.5-1.4 2.5h-4c0-1-.6-2-1.4-2.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M8.6 14a6 6 0 1 1 6.8 0c-.8.5-1.4 1.5-1.4 2.5h-4c0-1-.6-2-1.4-2.5Z'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-topic-grid .prompt-chip:nth-child(4)::before,
body[data-view="guide"] .guide-topic-grid .prompt-chip:nth-child(7)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.5 6.8-4'/%3E%3Cpath d='m8.6 13.5 6.8 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.5 6.8-4'/%3E%3Cpath d='m8.6 13.5 6.8 4'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-topic-grid .prompt-chip:nth-child(5)::before,
body[data-view="guide"] .guide-topic-grid .prompt-chip:nth-child(6)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-chat-head > span {
  display: grid;
  place-items: center;
}

body[data-view="guide"] .guide-chat-head > span::before {
  width: 1.2rem;
  height: 1.2rem;
  color: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.8l1.7 4.7 4.7 1.7-4.7 1.7-1.7 4.7-1.7-4.7-4.7-1.7 4.7-1.7L12 2.8Z'/%3E%3Cpath d='M19 14l.9 2.5L22.4 17.4l-2.5.9L19 20.8l-.9-2.5-2.5-.9 2.5-.9L19 14Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.8l1.7 4.7 4.7 1.7-4.7 1.7-1.7 4.7-1.7-4.7-4.7-1.7 4.7-1.7L12 2.8Z'/%3E%3Cpath d='M19 14l.9 2.5L22.4 17.4l-2.5.9L19 20.8l-.9-2.5-2.5-.9 2.5-.9L19 14Z'/%3E%3C/svg%3E");
}

body[data-view="guide"] .guide-chat-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

body[data-view="guide"] .guide-chat-note::before {
  color: #006a52;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
}

@media (max-width: 980px) {
  body[data-view="testimony"] .testimony-media-card {
    grid-template-columns: minmax(10rem, 12rem) minmax(0, 1fr);
  }

  body[data-view="testimony"] .testimony-entry-stats {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid rgba(0, 82, 61, 0.1);
    padding: 0.75rem 0 0;
  }
}

@media (max-width: 760px) {
  body[data-view="testimony"] .testimony-media-card {
    grid-template-columns: 1fr;
  }

  body[data-view="testimony"] .testimony-thumb {
    width: 100%;
  }

  body[data-view="testimony"] .testimony-entry-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  }
}

/* Embedded Videos premium library */
body[data-view="ui-elements"] main {
  background:
    linear-gradient(90deg, rgba(248, 252, 249, 0.97) 0%, rgba(248, 252, 249, 0.82) 45%, rgba(248, 252, 249, 0.38) 100%),
    url("public/images/search/search-purpose-hero.png") center top / cover no-repeat;
}

body[data-view="ui-elements"] #ui-elements {
  padding: 0;
}

.embedded-video-page {
  display: grid;
  gap: 1rem;
}

.embedded-video-hero {
  position: relative;
  overflow: hidden;
  min-height: 15rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.8rem 1.2rem 2.4rem;
  background:
    linear-gradient(90deg, rgba(248, 252, 249, 0.98) 0%, rgba(248, 252, 249, 0.88) 34%, rgba(248, 252, 249, 0.42) 56%, rgba(0, 45, 34, 0.6) 100%),
    radial-gradient(circle at 74% 18%, rgba(255, 221, 129, 0.22), transparent 18rem),
    url("public/images/embed/embedded-videos-hero-bg.png") center center / cover no-repeat;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 1.2rem 3.25rem rgba(3, 48, 37, 0.1);
}

.embedded-video-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(247, 252, 249, 0.16)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 44%, rgba(0, 52, 39, 0.34) 100%);
  pointer-events: none;
}

.embedded-video-hero > * {
  position: relative;
  z-index: 1;
}

.embedded-video-hero h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.3rem 0 0.65rem;
  color: #142224;
  font-size: clamp(2.15rem, 4vw, 3.35rem);
  line-height: 1;
  letter-spacing: 0;
}

.embedded-video-hero p:not(.eyebrow) {
  max-width: 44rem;
  margin: 0;
  color: #31434a;
  font-size: 1.05rem;
  line-height: 1.65;
}

.embedded-title-icon {
  width: 2.05rem;
  height: 2.05rem;
  border: 2px solid #122a2c;
  border-radius: 7px;
  position: relative;
  flex: 0 0 auto;
}

.embedded-title-icon::before {
  content: "";
  position: absolute;
  left: 0.58rem;
  top: 0.45rem;
  width: 0;
  height: 0;
  border-top: 0.42rem solid transparent;
  border-bottom: 0.42rem solid transparent;
  border-left: 0.68rem solid #122a2c;
}

.embedded-title-icon::after {
  content: "";
  position: absolute;
  right: -0.48rem;
  top: 0.45rem;
  width: 0.32rem;
  height: 1rem;
  border: 2px solid #122a2c;
  border-left: 0;
  border-radius: 0 4px 4px 0;
}

.embedded-hero-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.7rem;
  min-width: min(100%, 34rem);
}

.embedded-hero-actions .primary,
.embedded-hero-actions .secondary,
.embedded-filter-controls .secondary,
.embedded-load-more .secondary {
  min-height: 2.8rem;
  border-radius: 8px;
  font-weight: 800;
}

.embedded-hero-actions #refreshUiVideos::before {
  content: "↻";
  margin-right: 0.45rem;
}

.embedded-video-library {
  overflow: hidden;
  margin: -1.8rem 1.2rem 1.2rem;
  border: 1px solid rgba(19, 72, 64, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(13, 36, 34, 0.11);
  backdrop-filter: blur(12px);
}

.embedded-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(15, 62, 56, 0.09);
}

.embedded-category-tabs,
.embedded-filter-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.embedded-category-tabs button,
.embedded-filter-controls select {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(15, 62, 56, 0.13);
  border-radius: 8px;
  background: #fff;
  color: #18343a;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(13, 36, 34, 0.04);
}

.embedded-category-tabs button.active {
  border-color: transparent;
  background: linear-gradient(135deg, #006b57, #004c3f);
  color: #fff;
  box-shadow: 0 12px 26px rgba(0, 96, 78, 0.22);
}

.embedded-stats-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem);
  align-items: center;
  gap: 1rem;
  padding: 1.45rem 1rem;
  border-bottom: 1px solid rgba(15, 62, 56, 0.09);
}

.embedded-video-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.embedded-stat-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  min-height: 5.3rem;
  padding: 0.8rem;
  border-radius: 16px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.embedded-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 32px rgba(14, 42, 40, 0.08);
}

.embedded-stat-card p,
.embedded-stat-card small {
  margin: 0;
  color: #587072;
}

.embedded-stat-card strong {
  display: block;
  margin: 0.15rem 0;
  color: #102728;
  font-size: 1.25rem;
}

.embedded-stat-card small {
  color: #006b57;
  font-weight: 800;
}

.embedded-stat-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 107, 87, 0.1);
  color: #006b57;
  border: 1px solid rgba(0, 107, 87, 0.08);
}

.embedded-stat-icon.library::before { content: "▣"; }
.embedded-stat-icon.views::before { content: "◁"; }
.embedded-stat-icon.time::before { content: "◷"; }
.embedded-stat-icon.updated::before { content: "↺"; }

.embedded-search-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 3rem;
  padding: 0 0.9rem 0 1rem;
  border: 1px solid rgba(15, 62, 56, 0.14);
  border-radius: 8px;
  background: #fff;
}

.embedded-search-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #163237;
  font: inherit;
}

.embedded-search-field span::before {
  content: "⌕";
  color: #315b5d;
  font-size: 1.2rem;
}

body[data-view="ui-elements"] .ui-video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
  padding: 1.2rem;
}

body[data-view="ui-elements"] .ui-video-card {
  overflow: hidden;
  display: grid;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(14, 62, 56, 0.13);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(10, 34, 32, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

body[data-view="ui-elements"] .ui-video-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 107, 87, 0.32);
  box-shadow: 0 24px 58px rgba(7, 47, 41, 0.15);
}

body[data-view="ui-elements"] .ui-embed-frame {
  aspect-ratio: 21 / 7.35;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.34)),
    var(--video-thumb) center / cover no-repeat,
    #14302d;
}

body[data-view="ui-elements"] .ui-embed-frame iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  transition: transform 220ms ease;
}

body[data-view="ui-elements"] .ui-video-card:hover .ui-embed-frame iframe {
  transform: scale(1.015);
}

.ui-video-badge,
.ui-video-duration,
.ui-video-play {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.ui-video-badge {
  top: 1rem;
  left: 1rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 125, 101, 0.94), rgba(0, 82, 68, 0.94));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.ui-video-duration {
  right: 0.85rem;
  bottom: 0.85rem;
  padding: 0.3rem 0.5rem;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.ui-video-play {
  left: 50%;
  top: 50%;
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(4px);
}

.ui-video-play::before {
  content: "";
  margin-left: 0.22rem;
  border-top: 0.65rem solid transparent;
  border-bottom: 0.65rem solid transparent;
  border-left: 1rem solid #fff;
}

.ui-video-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1rem 1.05rem;
}

body[data-view="ui-elements"] .ui-video-card h4 {
  margin: 0 0 0.55rem;
  color: #16272b;
  font-size: 1.12rem;
}

.ui-video-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  color: #5d7175;
  font-size: 0.86rem;
}

.ui-video-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.ui-video-meta span:not(:first-child)::before {
  content: "•";
  color: #8a9b9d;
}

.ui-video-meta .channel::before {
  content: "♙";
  color: #006b57;
}

.ui-video-menu {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #163237;
  font-size: 1.25rem;
  font-weight: 900;
}

.ui-video-menu:focus-visible,
.embedded-category-tabs button:focus-visible,
.embedded-filter-controls select:focus-visible,
.embedded-search-field:focus-within,
.embedded-load-more .secondary:focus-visible {
  outline: 3px solid rgba(236, 197, 110, 0.55);
  outline-offset: 2px;
}

.ui-video-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 13rem;
  padding: 2rem;
  border: 1px dashed rgba(0, 107, 87, 0.25);
  border-radius: 16px;
  color: #315b5d;
  background: rgba(241, 248, 245, 0.75);
}

.embedded-load-more {
  display: flex;
  justify-content: center;
  padding: 0 1.2rem 1.2rem;
}

.embedded-load-more .secondary::after {
  content: "⌄";
  margin-left: 0.6rem;
}

@media (max-width: 1180px) {
  .embedded-video-hero,
  .embedded-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .embedded-video-hero {
    background:
      linear-gradient(90deg, rgba(248, 252, 249, 0.98) 0%, rgba(248, 252, 249, 0.9) 38%, rgba(248, 252, 249, 0.5) 66%, rgba(0, 45, 34, 0.44) 100%),
      radial-gradient(circle at 72% 18%, rgba(255, 221, 129, 0.18), transparent 17rem),
      url("public/images/embed/embedded-videos-hero-bg.png") center center / cover no-repeat;
  }

  .embedded-hero-actions {
    justify-content: flex-start;
  }

  .embedded-stats-search,
  .embedded-video-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  body[data-view="ui-elements"] .ui-video-grid,
  .embedded-stats-search,
  .embedded-video-stats {
    grid-template-columns: 1fr;
  }

  .embedded-video-library {
    margin-inline: 0.75rem;
  }

  .embedded-video-hero {
    padding-inline: 0.9rem;
    background:
      linear-gradient(90deg, rgba(248, 252, 249, 0.99) 0%, rgba(248, 252, 249, 0.9) 50%, rgba(248, 252, 249, 0.58) 78%, rgba(0, 45, 34, 0.22) 100%),
      url("public/images/embed/embedded-videos-hero-bg.png") 52% center / cover no-repeat;
  }
}

@media (max-width: 560px) {
  .embedded-video-hero {
    min-height: 17rem;
    padding-block: 1.45rem 2.2rem;
  }

  .embedded-video-hero::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(247, 252, 249, 0.2)),
      linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(0, 52, 39, 0.16) 100%);
  }

  .embedded-video-hero h3 {
    font-size: 2rem;
  }

  .embedded-hero-actions,
  .embedded-filter-controls,
  .embedded-category-tabs {
    width: 100%;
  }

  .embedded-hero-actions > *,
  .embedded-filter-controls > *,
  .embedded-category-tabs > * {
    flex: 1 1 100%;
  }

  body[data-view="ui-elements"] .ui-embed-frame {
    aspect-ratio: 1672 / 941;
  }
}

/* Premium cinematic Embed Video panels. */
body[data-view="ui-elements"] .ui-video-grid {
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: 1.35rem;
}

body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(17rem, 0.78fr) minmax(26rem, 1.22fr);
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.6rem);
  min-height: 24rem;
  padding: clamp(1.25rem, 2.4vw, 2.15rem);
  border: 1px solid rgba(0, 107, 87, 0.16);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(249, 253, 250, 0.98) 0%, rgba(249, 253, 250, 0.92) 32%, rgba(243, 249, 244, 0.56) 56%, rgba(0, 45, 34, 0.7) 100%),
    radial-gradient(circle at 72% 20%, rgba(247, 204, 104, 0.42), transparent 18rem),
    radial-gradient(circle at 18% 96%, rgba(0, 107, 87, 0.14), transparent 16rem),
    var(--video-thumb) right center / 58% cover no-repeat,
    #f7fbf7;
  box-shadow: 0 26px 76px rgba(8, 50, 43, 0.16);
  backdrop-filter: blur(14px);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card::before,
body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card::before {
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.45) 42%, rgba(0, 77, 61, 0.1) 100%),
    radial-gradient(circle at 64% 45%, rgba(255, 219, 132, 0.32), transparent 10rem);
}

body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card::after {
  z-index: 0;
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 255, 255, 0.55) 0 0.08rem, transparent 0.12rem),
    radial-gradient(circle at 83% 58%, rgba(236, 197, 110, 0.42) 0 0.07rem, transparent 0.11rem),
    radial-gradient(circle at 69% 72%, rgba(255, 255, 255, 0.45) 0 0.06rem, transparent 0.1rem),
    linear-gradient(180deg, transparent 0%, rgba(0, 42, 32, 0.12) 100%);
  background-size: auto, auto, auto, 100% 100%;
  opacity: 0.72;
  animation: uiVideoLightShimmer 8s ease-in-out infinite alternate;
}

body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 107, 87, 0.35);
  box-shadow: 0 32px 88px rgba(6, 55, 45, 0.2);
}

body[data-view="ui-elements"] .ui-video-card-glow {
  position: absolute;
  inset: auto 10% -42% auto;
  z-index: 0;
  width: 34rem;
  height: 34rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(236, 197, 110, 0.26), rgba(0, 107, 87, 0.12) 38%, transparent 66%);
  filter: blur(10px);
  pointer-events: none;
}

body[data-view="ui-elements"] .ui-video-copy,
body[data-view="ui-elements"] .ui-video-stage,
body[data-view="ui-elements"] .ui-video-menu {
  position: relative;
  z-index: 2;
}

body[data-view="ui-elements"] .ui-video-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-right: clamp(0rem, 1.4vw, 1rem);
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-video-badge {
  position: relative;
  inset: auto;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 2rem;
  margin-bottom: 1.1rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(236, 197, 110, 0.34);
  border-radius: 9px;
  background: linear-gradient(135deg, #00856c, #005544);
  box-shadow: 0 12px 24px rgba(0, 93, 74, 0.22);
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0;
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-video-badge::before {
  content: "";
  width: 0.46rem;
  height: 0.46rem;
  margin-right: 0.48rem;
  border-radius: 999px;
  background: #f1cf79;
  box-shadow: 0 0 14px rgba(241, 207, 121, 0.72);
}

body[data-view="ui-elements"] .ui-video-feature-card h4 {
  max-width: 13ch;
  margin: 0 0 0.72rem;
  color: #0a3b31;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.8vw, 3.35rem);
  line-height: 0.96;
  letter-spacing: 0;
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-video-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1.05rem;
  color: #476062;
  font-size: 0.96rem;
  font-weight: 750;
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-video-meta .channel::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.15rem;
  border-radius: 999px;
  background: #00785f;
  box-shadow: inset 0 -0.18rem 0 rgba(255, 255, 255, 0.24);
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-video-description {
  max-width: 31rem;
  margin: 0;
  color: #1d3538;
  font-size: 1.04rem;
  line-height: 1.58;
}

body[data-view="ui-elements"] .ui-video-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.7rem;
}

body[data-view="ui-elements"] .ui-video-watch,
body[data-view="ui-elements"] .ui-video-secondary {
  min-height: 3.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0 1.25rem;
  border-radius: 10px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

body[data-view="ui-elements"] .ui-video-watch {
  border: 0;
  background: linear-gradient(135deg, #008b70, #005a49);
  color: #fff;
  box-shadow: 0 14px 30px rgba(0, 107, 87, 0.28);
}

body[data-view="ui-elements"] .ui-video-watch span {
  width: 0;
  height: 0;
  margin-left: 0.1rem;
  border-top: 0.36rem solid transparent;
  border-bottom: 0.36rem solid transparent;
  border-left: 0.55rem solid currentColor;
}

body[data-view="ui-elements"] .ui-video-secondary {
  border: 1px solid rgba(0, 107, 87, 0.22);
  background: rgba(255, 255, 255, 0.58);
  color: #00624f;
  backdrop-filter: blur(10px);
}

body[data-view="ui-elements"] .ui-video-watch:hover,
body[data-view="ui-elements"] .ui-video-secondary:hover {
  transform: translateY(-2px);
}

body[data-view="ui-elements"] .ui-video-watch:hover {
  box-shadow: 0 18px 36px rgba(0, 107, 87, 0.34);
}

body[data-view="ui-elements"] .ui-video-stage {
  display: grid;
  align-content: center;
  gap: 0.9rem;
  min-width: 0;
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-embed-frame {
  position: relative;
  min-height: 17.25rem;
  aspect-ratio: 16 / 8.6;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(1, 26, 21, 0.16), rgba(1, 45, 35, 0.5)),
    var(--video-thumb) center / cover no-repeat,
    #102a25;
  box-shadow:
    0 24px 54px rgba(0, 31, 25, 0.28),
    inset 0 0 0 1px rgba(236, 197, 110, 0.16);
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-embed-frame iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
}

body[data-view="ui-elements"] .ui-video-artwork {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(5, 32, 27, 0.16), rgba(5, 32, 27, 0.05), rgba(5, 32, 27, 0.34)),
    radial-gradient(circle at 50% 42%, rgba(255, 219, 129, 0.38), transparent 11rem),
    radial-gradient(circle at 52% 52%, rgba(0, 148, 116, 0.22), transparent 8rem),
    var(--video-thumb) center / cover no-repeat;
  pointer-events: none;
}

body[data-view="ui-elements"] .ui-video-artwork::before,
body[data-view="ui-elements"] .ui-video-artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body[data-view="ui-elements"] .ui-video-artwork::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 20, 16, 0.36)),
    radial-gradient(circle at 50% 12%, rgba(255, 227, 145, 0.32), transparent 9rem);
}

body[data-view="ui-elements"] .ui-video-artwork::after {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 34%, rgba(0, 90, 70, 0.16) 100%),
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.34), transparent 5rem),
    radial-gradient(circle at 83% 14%, rgba(236, 197, 110, 0.28), transparent 7rem);
  mix-blend-mode: screen;
  opacity: 0.72;
}

body[data-view="ui-elements"] .ui-video-source,
body[data-view="ui-elements"] .ui-video-feature-card .ui-video-duration {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

body[data-view="ui-elements"] .ui-video-source {
  top: 0.95rem;
  left: 0.95rem;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background: rgba(0, 108, 87, 0.9);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(0, 52, 42, 0.24);
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-video-duration {
  right: 0.95rem;
  bottom: 0.95rem;
  padding: 0.36rem 0.58rem;
  border-radius: 8px;
  background: rgba(2, 23, 19, 0.82);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
}

body[data-view="ui-elements"] .ui-embed-play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: 5.9rem;
  height: 5.9rem;
  display: grid;
  place-items: center;
  border: 2px solid rgba(246, 216, 143, 0.88);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 30%),
    linear-gradient(135deg, #009171, #005744);
  color: #fff;
  box-shadow:
    0 0 0 0.55rem rgba(236, 197, 110, 0.16),
    0 0 38px rgba(0, 145, 113, 0.44),
    0 18px 42px rgba(0, 39, 31, 0.34);
  transform: translate(-50%, -50%);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  animation: uiEmbedPlayPulse 2.6s ease-in-out infinite;
}

body[data-view="ui-elements"] .ui-embed-play-overlay span {
  width: 0;
  height: 0;
  margin-left: 0.35rem;
  border-top: 0.78rem solid transparent;
  border-bottom: 0.78rem solid transparent;
  border-left: 1.18rem solid currentColor;
}

body[data-view="ui-elements"] .ui-embed-play-overlay:hover {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow:
    0 0 0 0.72rem rgba(236, 197, 110, 0.2),
    0 0 46px rgba(0, 145, 113, 0.54),
    0 20px 48px rgba(0, 39, 31, 0.38);
}

body[data-view="ui-elements"] .ui-embed-play-overlay:active {
  transform: translate(-50%, -50%) scale(0.96);
}

body[data-view="ui-elements"] .ui-video-card.playing .ui-embed-frame iframe {
  position: relative;
}

body[data-view="ui-elements"] .ui-video-card-nav {
  display: grid;
  grid-template-columns: auto minmax(4rem, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0 0.1rem;
}

body[data-view="ui-elements"] .ui-video-card-nav > button {
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 107, 87, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #00624f;
  box-shadow: 0 10px 24px rgba(0, 48, 38, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

body[data-view="ui-elements"] .ui-video-card-nav > button::before {
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

body[data-view="ui-elements"] .ui-video-card-nav > button[data-ui-video-nav="previous"]::before {
  transform: rotate(-135deg);
}

body[data-view="ui-elements"] .ui-video-card-nav > button[data-ui-video-nav="next"]::before {
  transform: rotate(45deg);
}

body[data-view="ui-elements"] .ui-video-card-nav > button:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 14px 28px rgba(0, 83, 66, 0.18);
}

body[data-view="ui-elements"] .ui-video-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
}

body[data-view="ui-elements"] .ui-video-dots span {
  width: 1.55rem;
  height: 0.32rem;
  border-radius: 999px;
  background: rgba(0, 107, 87, 0.18);
  transition: width 180ms ease, background 180ms ease;
}

body[data-view="ui-elements"] .ui-video-dots span.active {
  width: 2.55rem;
  background: linear-gradient(90deg, #00a986, #e4c066);
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-video-menu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 1px solid rgba(0, 107, 87, 0.14);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
}

body[data-view="ui-elements"] .ui-embed-play-overlay:focus-visible,
body[data-view="ui-elements"] .ui-video-watch:focus-visible,
body[data-view="ui-elements"] .ui-video-secondary:focus-visible,
body[data-view="ui-elements"] .ui-video-card-nav > button:focus-visible {
  outline: 3px solid rgba(236, 197, 110, 0.62);
  outline-offset: 3px;
}

@keyframes uiEmbedPlayPulse {
  0%, 100% {
    box-shadow:
      0 0 0 0.45rem rgba(236, 197, 110, 0.12),
      0 0 30px rgba(0, 145, 113, 0.38),
      0 18px 42px rgba(0, 39, 31, 0.34);
  }
  50% {
    box-shadow:
      0 0 0 0.78rem rgba(236, 197, 110, 0.22),
      0 0 48px rgba(0, 145, 113, 0.52),
      0 22px 48px rgba(0, 39, 31, 0.38);
  }
}

@keyframes uiVideoLightShimmer {
  from {
    opacity: 0.56;
    transform: translate3d(-0.2rem, -0.1rem, 0);
  }
  to {
    opacity: 0.78;
    transform: translate3d(0.25rem, 0.1rem, 0);
  }
}

@media (max-width: 1180px) {
  body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body[data-view="ui-elements"] .ui-video-feature-card h4 {
    max-width: 20ch;
  }
}

@media (max-width: 720px) {
  body[data-view="ui-elements"] .ui-video-grid {
    padding: 0.95rem;
  }

  body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card {
    padding: 1rem;
    border-radius: 18px;
  }

  body[data-view="ui-elements"] .ui-video-feature-card .ui-embed-frame {
    min-height: 13.5rem;
    aspect-ratio: 1672 / 941;
    border-radius: 16px;
  }

  body[data-view="ui-elements"] .ui-video-feature-card h4 {
    font-size: 2rem;
  }

  body[data-view="ui-elements"] .ui-video-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-view="ui-elements"] .ui-video-watch,
  body[data-view="ui-elements"] .ui-video-secondary {
    width: 100%;
  }

  body[data-view="ui-elements"] .ui-embed-play-overlay {
    width: 4.85rem;
    height: 4.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card::after,
  body[data-view="ui-elements"] .ui-embed-play-overlay {
    animation: none;
  }
}

/* Embed page 2x2 video-card arrangement. */
body[data-view="ui-elements"] .ui-video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
  padding: 1.2rem;
}

body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(5.15rem, auto);
  gap: 0;
  min-height: 0;
  padding: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(16, 33, 31, 0.08);
  backdrop-filter: none;
}

body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card::before,
body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card::after,
body[data-view="ui-elements"] .ui-video-card-glow {
  display: none;
}

body[data-view="ui-elements"] .ui-video-stage {
  order: 1;
  position: relative;
  display: block;
  min-width: 0;
  gap: 0;
}

body[data-view="ui-elements"] .ui-video-copy {
  order: 2;
  position: static;
  display: block;
  min-width: 0;
  padding: 1rem 1rem 1.05rem;
  background: rgba(255, 255, 255, 0.98);
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-embed-frame {
  min-height: 0;
  aspect-ratio: 21 / 7.35;
  border: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: none;
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-video-badge {
  position: absolute;
  inset: 0.95rem auto auto 0.95rem;
  z-index: 8;
  min-height: 1.9rem;
  margin: 0;
  padding: 0.42rem 0.75rem;
  border-radius: 7px;
  font-size: 0.72rem;
  box-shadow: 0 10px 22px rgba(0, 67, 55, 0.24);
}

body[data-view="ui-elements"] .ui-video-source,
body[data-view="ui-elements"] .ui-video-description,
body[data-view="ui-elements"] .ui-video-actions,
body[data-view="ui-elements"] .ui-video-dots {
  display: none;
}

body[data-view="ui-elements"] .ui-video-feature-card h4 {
  max-width: none;
  margin: 0 2.75rem 0.55rem 0;
  color: #16272b;
  font-family: inherit;
  font-size: 1.13rem;
  line-height: 1.2;
  letter-spacing: 0;
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-video-meta {
  gap: 0.45rem;
  margin: 0;
  color: #5d7175;
  font-size: 0.82rem;
  font-weight: 600;
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-video-meta .channel::before {
  width: 0.62rem;
  height: 0.62rem;
  margin-right: 0.1rem;
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-video-duration {
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 7;
  padding: 0.28rem 0.45rem;
  border-radius: 5px;
  font-size: 0.72rem;
}

body[data-view="ui-elements"] .ui-embed-play-overlay {
  width: 4.3rem;
  height: 4.3rem;
}

body[data-view="ui-elements"] .ui-embed-play-overlay span {
  margin-left: 0.25rem;
  border-top-width: 0.58rem;
  border-bottom-width: 0.58rem;
  border-left-width: 0.9rem;
}

body[data-view="ui-elements"] .ui-video-card-nav {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0 0.75rem;
  pointer-events: none;
}

body[data-view="ui-elements"] .ui-video-card-nav > button {
  width: 2.35rem;
  height: 2.35rem;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  opacity: 0;
  pointer-events: auto;
}

body[data-view="ui-elements"] .ui-video-card:hover .ui-video-card-nav > button,
body[data-view="ui-elements"] .ui-video-card-nav > button:focus-visible {
  opacity: 1;
}

body[data-view="ui-elements"] .ui-video-card-nav > button:hover {
  background: rgba(0, 107, 87, 0.88);
}

body[data-view="ui-elements"] .ui-video-feature-card .ui-video-menu {
  top: auto;
  right: 0.8rem;
  bottom: 1.05rem;
  z-index: 4;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: #143137;
  box-shadow: none;
  backdrop-filter: none;
}

@media (max-width: 1180px) {
  body[data-view="ui-elements"] .ui-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  body[data-view="ui-elements"] .ui-video-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  body[data-view="ui-elements"] .ui-video-grid {
    padding: 0.9rem;
  }

  body[data-view="ui-elements"] .ui-video-feature-card .ui-embed-frame {
    aspect-ratio: 16 / 9;
  }
}

/* Teoyube Tables premium Scripture data explorer */
body[data-view="teoyube-tables"] main {
  background:
    linear-gradient(90deg, rgba(249, 252, 249, 0.96) 0%, rgba(249, 252, 249, 0.84) 48%, rgba(249, 252, 249, 0.42) 100%),
    url("public/images/promise/promise-scrolls-bg.png") center top / cover no-repeat;
}

body[data-view="teoyube-tables"] #teoyube-tables {
  padding: 0;
}

body[data-view="teoyube-tables"] .teoyube-table-page {
  gap: 0;
}

.teoyube-tables-hero {
  min-height: 15rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.8rem 1.2rem 3rem;
  background:
    linear-gradient(90deg, rgba(249, 252, 249, 0.96) 0%, rgba(249, 252, 249, 0.72) 46%, rgba(0, 82, 65, 0.08) 100%),
    url("public/images/lexicon/lexicon-hero-bg.png") center / cover no-repeat;
  border-radius: 0 0 18px 18px;
}

.teoyube-tables-hero h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.35rem 0 0.75rem;
  color: #142224;
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0;
}

.teoyube-tables-hero p:not(.eyebrow) {
  max-width: 44rem;
  margin: 0;
  color: #31434a;
  font-size: 1.08rem;
  line-height: 1.65;
}

.tables-title-icon {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.2rem;
  padding: 0.25rem;
  border: 2px solid #0b5f4d;
  border-radius: 7px;
}

.tables-title-icon::before,
.tables-title-icon::after {
  content: "";
  border-radius: 2px;
  background:
    linear-gradient(#0b5f4d 0 0) 0 0 / 100% 0.18rem no-repeat,
    linear-gradient(#0b5f4d 0 0) 0 50% / 100% 0.18rem no-repeat,
    linear-gradient(#0b5f4d 0 0) 0 100% / 100% 0.18rem no-repeat;
}

.tables-hero-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.7rem;
  min-width: min(100%, 28rem);
}

.tables-hero-actions .primary,
.tables-hero-actions .secondary {
  min-height: 2.8rem;
  border-radius: 8px;
  font-weight: 800;
}

body[data-view="teoyube-tables"] .teoyube-table-card {
  overflow: hidden;
  gap: 1.1rem;
  margin: -2.05rem 1.2rem 1.2rem;
  padding: 1rem;
  border: 1px solid rgba(16, 72, 64, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 24px 70px rgba(13, 36, 34, 0.11);
  backdrop-filter: blur(12px);
}

body[data-view="teoyube-tables"] .table-card-head {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(22rem, 3fr);
  align-items: center;
  gap: 1rem;
  padding: 0.25rem 0.2rem 0.75rem;
}

.tables-card-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
}

.tables-card-title h4,
.tables-card-title p {
  grid-column: 2;
}

.tables-card-icon {
  grid-row: 1 / 3;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 107, 87, 0.1);
  color: #006b57;
}

.tables-card-icon::before {
  content: "▦";
  font-size: 1.2rem;
  font-weight: 900;
}

body[data-view="teoyube-tables"] .table-card-head h4 {
  margin: 0;
  color: #142224;
  font-size: 1.15rem;
}

body[data-view="teoyube-tables"] .table-card-head p {
  margin: 0.25rem 0 0;
  color: #5d7175;
  font-weight: 700;
}

.tables-toolbar {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(10rem, 14rem) minmax(10rem, 14rem) auto;
  align-items: center;
  gap: 0.75rem;
}

.tables-search-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 3rem;
  padding: 0 0.9rem 0 1rem;
  border: 1px solid rgba(15, 62, 56, 0.14);
  border-radius: 8px;
  background: #fff;
}

.tables-search-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #163237;
  font: inherit;
}

.tables-search-field span::before {
  content: "⌕";
  color: #315b5d;
  font-size: 1.2rem;
}

.tables-toolbar select,
.tables-page-size select {
  min-height: 3rem;
  padding: 0 1rem;
  border: 1px solid rgba(15, 62, 56, 0.14);
  border-radius: 8px;
  background: #fff;
  color: #18343a;
  font-weight: 800;
}

.tables-toolbar .secondary {
  min-height: 3rem;
  border-radius: 8px;
  font-weight: 800;
}

.tables-toolbar .secondary::before {
  content: "≡";
  margin-right: 0.45rem;
  transform: rotate(90deg);
}

.tables-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.tables-stat-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  min-height: 4.9rem;
  padding: 0.85rem;
  border: 1px solid rgba(16, 72, 64, 0.08);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 247, 0.92));
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.tables-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(14, 42, 40, 0.08);
}

.tables-stat-card p,
.tables-stat-card small {
  margin: 0;
  color: #587072;
}

.tables-stat-card strong {
  display: block;
  margin: 0.12rem 0;
  color: #102728;
  font-size: 1.2rem;
}

.tables-stat-card small {
  color: #006b57;
  font-weight: 800;
}

.tables-stat-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 107, 87, 0.1);
  color: #006b57;
  border: 1px solid rgba(0, 107, 87, 0.08);
}

.tables-stat-icon.tables::before { content: "▦"; }
.tables-stat-icon.verses::before { content: "✣"; }
.tables-stat-icon.audio::before { content: "♪"; }
.tables-stat-icon.video::before { content: "▣"; }
.tables-stat-icon.updated::before { content: "▤"; }

body[data-view="teoyube-tables"] .teoyube-table-scroll {
  max-height: 62rem;
  overflow: auto;
  border: 1px solid rgba(16, 72, 64, 0.1);
  border-radius: 12px;
  background: #fff;
}

body[data-view="teoyube-tables"] .teoyube-reference-table {
  min-width: 78rem;
  border-collapse: separate;
  border-spacing: 0;
}

body[data-view="teoyube-tables"] .teoyube-reference-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.95rem 1rem;
  border-bottom: 0;
  background: linear-gradient(135deg, #006b57, #004c3f);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 900;
}

body[data-view="teoyube-tables"] .teoyube-reference-table th:first-child {
  border-radius: 10px 0 0 0;
}

body[data-view="teoyube-tables"] .teoyube-reference-table th:last-child {
  border-radius: 0 10px 0 0;
}

body[data-view="teoyube-tables"] .teoyube-reference-table td {
  padding: 0.82rem 1rem;
  border-bottom: 1px solid rgba(16, 72, 64, 0.08);
  color: #395156;
}

body[data-view="teoyube-tables"] .teoyube-main-row {
  background: rgba(255, 255, 255, 0.98);
  transition: background 160ms ease, box-shadow 160ms ease;
}

body[data-view="teoyube-tables"] .teoyube-main-row:nth-of-type(4n + 1) {
  background: rgba(249, 252, 249, 0.94);
}

body[data-view="teoyube-tables"] .teoyube-main-row:hover td {
  background: rgba(231, 246, 240, 0.62);
}

body[data-view="teoyube-tables"] .teoyube-main-row.expanded td {
  background: rgba(236, 197, 110, 0.08);
}

body[data-view="teoyube-tables"] .table-name-cell {
  max-width: 22rem;
  color: #2c3f45;
  font-weight: 900;
  text-transform: uppercase;
}

body[data-view="teoyube-tables"] .table-expand-button {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-view="teoyube-tables"] .table-toggle-icon {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(0, 107, 87, 0.24);
  background: rgba(242, 249, 246, 0.94);
  color: #0b5f4d;
  font-size: 1.05rem;
  transition: transform 160ms ease, background 160ms ease;
}

body[data-view="teoyube-tables"] .teoyube-main-row.expanded .table-toggle-icon {
  background: rgba(0, 107, 87, 0.1);
}

body[data-view="teoyube-tables"] .table-icon-button::before {
  min-width: 2.3rem;
  min-height: 1.8rem;
  border: 1px solid rgba(0, 82, 65, 0.55);
  border-radius: 6px;
  color: #0b4f43;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
}

.table-position-pill,
.table-period-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #30494f;
  font-weight: 900;
}

.table-audio-control {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.table-speaker-icon {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(0, 107, 87, 0.18);
  border-radius: 999px;
  background: rgba(0, 107, 87, 0.08);
  color: #006b57;
}

.table-speaker-icon::before {
  content: "◔";
  font-size: 1.1rem;
}

body[data-view="teoyube-tables"] .table-airplay-button::before {
  min-width: 3rem;
}

.table-action-button {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #163237;
  font-size: 1.25rem;
  font-weight: 900;
}

body[data-view="teoyube-tables"] .teoyube-detail-row td {
  background: #fff;
}

body[data-view="teoyube-tables"] .table-detail-content {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(18rem, 1fr) minmax(18rem, 26rem);
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.65rem 0.8rem 3.7rem;
  animation: tableDetailFade 180ms ease both;
}

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

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

.table-detail-preview {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(8, 32, 30, 0.16);
}

body[data-view="teoyube-tables"] .table-video-preview-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 36%, rgba(236, 197, 110, 0.2), transparent 58%),
    #102a25;
  cursor: pointer;
}

body[data-view="teoyube-tables"] .table-preview-video-panel {
  display: block;
  background:
    radial-gradient(circle at 50% 36%, rgba(236, 197, 110, 0.2), transparent 58%),
    var(--table-preview-thumb) center / cover no-repeat,
    #102a25;
}

body[data-view="teoyube-tables"] .table-detail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-view="teoyube-tables"] .table-preview-video-panel iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
}

body[data-view="teoyube-tables"] .table-preview-video-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.38)),
    radial-gradient(circle at 50% 42%, rgba(236, 197, 110, 0.3), transparent 56%),
    var(--table-preview-thumb) center / cover no-repeat;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

.table-detail-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.36)),
    radial-gradient(circle at 50% 42%, rgba(236, 197, 110, 0.25), transparent 54%);
  pointer-events: none;
  transition: opacity 180ms ease;
}

.table-detail-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border: 2px solid rgba(246, 216, 143, 0.9);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.25), transparent 32%),
    linear-gradient(135deg, #009171, #005744);
  box-shadow:
    0 0 0 0.28rem rgba(236, 197, 110, 0.14),
    0 0 24px rgba(0, 145, 113, 0.42),
    0 12px 26px rgba(0, 39, 31, 0.28);
  transform: translate(-50%, -50%);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.table-detail-play::before {
  content: "";
  position: absolute;
  left: 1.08rem;
  top: 0.82rem;
  border-top: 0.55rem solid transparent;
  border-bottom: 0.55rem solid transparent;
  border-left: 0.82rem solid #fff;
}

body[data-view="teoyube-tables"] .table-video-preview-button:hover .table-detail-play,
body[data-view="teoyube-tables"] .table-video-preview-button:focus-visible .table-detail-play,
body[data-view="teoyube-tables"] .table-preview-embed-play-overlay:hover,
body[data-view="teoyube-tables"] .table-preview-embed-play-overlay:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow:
    0 0 0 0.4rem rgba(236, 197, 110, 0.2),
    0 0 32px rgba(0, 145, 113, 0.5),
    0 14px 28px rgba(0, 39, 31, 0.32);
}

.table-detail-duration {
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  z-index: 1;
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.76);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
}

body[data-view="teoyube-tables"] .table-preview-embed-play-overlay {
  z-index: 5;
  padding: 0;
  appearance: none;
  cursor: pointer;
}

body[data-view="teoyube-tables"] .table-preview-embed-play-overlay span {
  display: none;
}

body[data-view="teoyube-tables"] .table-preview-video-panel .table-detail-duration {
  z-index: 5;
}

body[data-view="teoyube-tables"] .table-preview-video-panel.playing .table-preview-video-cover,
body[data-view="teoyube-tables"] .table-preview-video-panel.playing .table-preview-embed-play-overlay,
body[data-view="teoyube-tables"] .table-preview-video-panel.playing::after {
  opacity: 0;
  pointer-events: none;
}

body[data-view="teoyube-tables"] .table-video-preview-button:focus-visible {
  outline: 3px solid rgba(236, 197, 110, 0.62);
  outline-offset: 3px;
}

body[data-view="teoyube-tables"] .table-preview-embed-play-overlay:focus-visible {
  outline: 3px solid rgba(236, 197, 110, 0.62);
  outline-offset: 3px;
}

body[data-view="teoyube-tables"] .table-detail-content p {
  margin: 0;
  color: #1f3338;
  font-size: 1.02rem;
  line-height: 1.65;
  font-weight: 900;
}

body[data-view="teoyube-tables"] .table-detail-content small {
  margin-top: 0.8rem;
  color: #006b57;
}

.table-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.table-detail-chips span {
  padding: 0.34rem 0.55rem;
  border: 1px solid rgba(0, 107, 87, 0.16);
  border-radius: 999px;
  background: rgba(232, 246, 241, 0.8);
  color: #0b5f4d;
  font-size: 0.78rem;
  font-weight: 900;
}

body[data-view="teoyube-tables"] .table-row-video {
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(8, 32, 30, 0.15);
}

body[data-view="teoyube-tables"] .teoyube-table-footer {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto minmax(16rem, auto);
  align-items: center;
  gap: 1rem;
  padding: 0.2rem 0.1rem 0;
}

#teoyubeTableEntryStatus {
  margin: 0;
  color: #5d7175;
  font-weight: 700;
}

.tables-page-size {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: #5d7175;
  font-weight: 700;
}

body[data-view="teoyube-tables"] .table-pagination {
  justify-self: end;
  gap: 0.45rem;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

body[data-view="teoyube-tables"] .table-pagination button {
  min-width: 2.35rem;
  min-height: 2.35rem;
  border: 1px solid rgba(16, 72, 64, 0.11);
  border-radius: 8px;
  background: #fff;
  color: #3d565c;
  font-weight: 900;
}

body[data-view="teoyube-tables"] .table-pagination button.active {
  background: linear-gradient(135deg, #006b57, #004c3f);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 96, 78, 0.2);
}

body[data-view="teoyube-tables"] .table-pagination .table-page-ellipsis {
  pointer-events: none;
}

.teoyube-empty-row td {
  padding: 2rem;
  text-align: center;
}

.teoyube-empty-row strong {
  display: block;
  color: #142224;
  font-size: 1.05rem;
}

.teoyube-empty-row p {
  margin: 0.3rem 0 0;
  color: #5d7175;
}

.tables-search-field:focus-within,
.tables-toolbar select:focus-visible,
.tables-page-size select:focus-visible,
body[data-view="teoyube-tables"] .table-pagination button:focus-visible,
.table-expand-button:focus-visible,
.table-icon-button:focus-visible,
.table-action-button:focus-visible {
  outline: 3px solid rgba(236, 197, 110, 0.55);
  outline-offset: 2px;
}

@media (max-width: 1260px) {
  body[data-view="teoyube-tables"] .table-card-head,
  .tables-toolbar,
  .tables-stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tables-search-field {
    grid-column: 1 / -1;
  }

  body[data-view="teoyube-tables"] .table-detail-content {
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  }

  body[data-view="teoyube-tables"] .table-row-video {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .teoyube-tables-hero,
  .tables-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body[data-view="teoyube-tables"] .teoyube-table-card {
    margin-inline: 0.75rem;
  }

  body[data-view="teoyube-tables"] .table-card-head,
  .tables-toolbar,
  .tables-stat-grid,
  body[data-view="teoyube-tables"] .teoyube-table-footer {
    grid-template-columns: 1fr;
  }

  body[data-view="teoyube-tables"] .table-pagination {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  body[data-view="teoyube-tables"] .teoyube-reference-table,
  body[data-view="teoyube-tables"] .teoyube-reference-table tbody,
  body[data-view="teoyube-tables"] .teoyube-reference-table tr,
  body[data-view="teoyube-tables"] .teoyube-reference-table td {
    display: block;
    min-width: 0;
    width: 100%;
  }

  body[data-view="teoyube-tables"] .teoyube-reference-table thead {
    display: none;
  }

  body[data-view="teoyube-tables"] .teoyube-main-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    margin: 0.75rem;
    padding: 0.8rem;
    border: 1px solid rgba(16, 72, 64, 0.1);
    border-radius: 14px;
  }

  body[data-view="teoyube-tables"] .teoyube-main-row td {
    padding: 0.25rem;
    border: 0;
  }

  body[data-view="teoyube-tables"] .teoyube-main-row td:first-child {
    grid-row: span 4;
    width: auto;
  }

  body[data-view="teoyube-tables"] .teoyube-detail-row {
    margin: 0 0.75rem 0.9rem;
  }

  body[data-view="teoyube-tables"] .table-detail-content {
    grid-template-columns: 1fr;
    padding: 0.85rem;
  }

  .table-detail-preview,
  body[data-view="teoyube-tables"] .table-row-video {
    max-width: none;
  }

  .teoyube-tables-hero h3 {
    font-size: 2rem;
  }
}

/* Embed Video cleanup and icon polish. */
body[data-view="ui-elements"] .topbar {
  display: none;
}

body[data-view="ui-elements"] main {
  padding-top: 0;
}

body[data-view="ui-elements"] .embedded-stat-icon {
  position: relative;
  background: linear-gradient(135deg, rgba(0, 107, 87, 0.12), rgba(236, 197, 110, 0.14));
  box-shadow: inset 0 0 0 1px rgba(0, 107, 87, 0.08);
}

body[data-view="ui-elements"] .embedded-stat-icon::before {
  content: "";
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

body[data-view="ui-elements"] .embedded-stat-icon.library::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M8 8h5'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M8 16h4'/%3E%3Cpath d='m17 10 3 2-3 2v-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M8 8h5'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M8 16h4'/%3E%3Cpath d='m17 10 3 2-3 2v-4Z'/%3E%3C/svg%3E");
}

body[data-view="ui-elements"] .embedded-stat-icon.views::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

body[data-view="ui-elements"] .embedded-stat-icon.time::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3Cpath d='M5 4 3.5 5.5'/%3E%3Cpath d='M19 4l1.5 1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3Cpath d='M5 4 3.5 5.5'/%3E%3Cpath d='M19 4l1.5 1.5'/%3E%3C/svg%3E");
}

body[data-view="ui-elements"] .embedded-stat-icon.updated::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5' width='16' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M9 15h6'/%3E%3Cpath d='m13 13 2 2-2 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5' width='16' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M9 15h6'/%3E%3Cpath d='m13 13 2 2-2 2'/%3E%3C/svg%3E");
}

body[data-view="ui-elements"] .embedded-stat-icon.library { color: #006b57; }
body[data-view="ui-elements"] .embedded-stat-icon.views { color: #0b6b78; }
body[data-view="ui-elements"] .embedded-stat-icon.time { color: #006b57; }
body[data-view="ui-elements"] .embedded-stat-icon.updated { color: #0b5f4d; }

/* Keep Teo Guide panels using clean, masked icon artwork. */
body[data-view="guide"] .guide-hero h3 span,
body[data-view="guide"] .guide-feature-list span,
body[data-view="guide"] .guide-help-grid span,
body[data-view="guide"] .guide-chat-head > span {
  box-shadow: 0 10px 24px rgba(0, 82, 65, 0.12);
}

/* Tables page duplicate header removal and icon polish. */
body[data-view="teoyube-tables"] .topbar {
  display: none;
}

body[data-view="teoyube-tables"] main {
  padding-top: 0;
}

body[data-view="teoyube-tables"] .tables-card-icon,
body[data-view="teoyube-tables"] .tables-stat-icon,
body[data-view="teoyube-tables"] .table-speaker-icon {
  position: relative;
  background: linear-gradient(135deg, rgba(0, 107, 87, 0.12), rgba(236, 197, 110, 0.14));
  box-shadow: inset 0 0 0 1px rgba(0, 107, 87, 0.08), 0 10px 24px rgba(0, 82, 65, 0.08);
}

body[data-view="teoyube-tables"] .tables-card-icon::before,
body[data-view="teoyube-tables"] .tables-stat-icon::before,
body[data-view="teoyube-tables"] .table-speaker-icon::before,
body[data-view="teoyube-tables"] .table-expand-audio::before,
body[data-view="teoyube-tables"] .tables-search-field span::before,
body[data-view="teoyube-tables"] .tables-toolbar .secondary::before {
  content: "";
  display: block;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

body[data-view="teoyube-tables"] .tables-card-icon::before,
body[data-view="teoyube-tables"] .tables-stat-icon::before {
  width: 1.35rem;
  height: 1.35rem;
}

body[data-view="teoyube-tables"] .tables-card-icon {
  color: #006b57;
}

body[data-view="teoyube-tables"] .tables-card-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h6'/%3E%3Cpath d='M8 15h7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15Z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h6'/%3E%3Cpath d='M8 15h7'/%3E%3C/svg%3E");
}

body[data-view="teoyube-tables"] .tables-stat-icon.tables {
  color: #006b57;
}

body[data-view="teoyube-tables"] .tables-stat-icon.tables::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 4v16'/%3E%3Cpath d='M16 4v16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 4v16'/%3E%3Cpath d='M16 4v16'/%3E%3C/svg%3E");
}

body[data-view="teoyube-tables"] .tables-stat-icon.verses {
  color: #b88012;
}

body[data-view="teoyube-tables"] .tables-stat-icon.verses::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M4 5.5A3.5 3.5 0 0 1 7.5 2H12v19H7.5A3.5 3.5 0 0 0 4 17.5v-12Z'/%3E%3Cpath d='M20 5.5A3.5 3.5 0 0 0 16.5 2H12v19h4.5A3.5 3.5 0 0 1 20 17.5v-12Z'/%3E%3Cpath d='M7 7h2'/%3E%3Cpath d='M15 7h2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M4 5.5A3.5 3.5 0 0 1 7.5 2H12v19H7.5A3.5 3.5 0 0 0 4 17.5v-12Z'/%3E%3Cpath d='M20 5.5A3.5 3.5 0 0 0 16.5 2H12v19h4.5A3.5 3.5 0 0 1 20 17.5v-12Z'/%3E%3Cpath d='M7 7h2'/%3E%3Cpath d='M15 7h2'/%3E%3C/svg%3E");
}

body[data-view="teoyube-tables"] .tables-stat-icon.audio {
  color: #6f52d9;
}

body[data-view="teoyube-tables"] .tables-stat-icon.audio::before,
body[data-view="teoyube-tables"] .table-expand-audio::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 15V9'/%3E%3Cpath d='M8 18V6'/%3E%3Cpath d='M12 21V3'/%3E%3Cpath d='M16 18V6'/%3E%3Cpath d='M20 15V9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 15V9'/%3E%3Cpath d='M8 18V6'/%3E%3Cpath d='M12 21V3'/%3E%3Cpath d='M16 18V6'/%3E%3Cpath d='M20 15V9'/%3E%3C/svg%3E");
}

body[data-view="teoyube-tables"] .tables-stat-icon.video {
  color: #0b6b78;
}

body[data-view="teoyube-tables"] .tables-stat-icon.video::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m10 9 5 3-5 3V9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m10 9 5 3-5 3V9Z'/%3E%3C/svg%3E");
}

body[data-view="teoyube-tables"] .tables-stat-icon.updated {
  color: #006b57;
}

body[data-view="teoyube-tables"] .tables-stat-icon.updated::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5' width='16' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='m9 15 2 2 4-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5' width='16' height='15' rx='2.5'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='m9 15 2 2 4-5'/%3E%3C/svg%3E");
}

body[data-view="teoyube-tables"] .table-expand-audio::before {
  min-width: 2.25rem;
  min-height: 1.85rem;
  border: 1px solid rgba(111, 82, 217, 0.34);
  background-color: #6f52d9;
  background-image: none;
  border-radius: 7px;
  color: #6f52d9;
}

body[data-view="teoyube-tables"] .table-speaker-icon {
  color: #006b57;
}

body[data-view="teoyube-tables"] .table-speaker-icon::before {
  width: 1.05rem;
  height: 1.05rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10v4h4l5 4V6l-5 4H4Z'/%3E%3Cpath d='M16 9.5a4 4 0 0 1 0 5'/%3E%3Cpath d='M18.5 7a7.5 7.5 0 0 1 0 10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 10v4h4l5 4V6l-5 4H4Z'/%3E%3Cpath d='M16 9.5a4 4 0 0 1 0 5'/%3E%3Cpath d='M18.5 7a7.5 7.5 0 0 1 0 10'/%3E%3C/svg%3E");
}

body[data-view="teoyube-tables"] .tables-search-field span::before {
  width: 1.15rem;
  height: 1.15rem;
  color: #315b5d;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E");
}

body[data-view="teoyube-tables"] .tables-toolbar .secondary::before {
  width: 1rem;
  height: 1rem;
  margin-right: 0.45rem;
  color: currentColor;
  transform: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
}

/* Book of the Saint: premium Journey Overview timeline. */
body[data-view="book"] .book-journey-overview {
  position: relative;
  display: grid;
  gap: 1.15rem;
  overflow: hidden;
  min-height: 30rem;
  padding: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 42%, rgba(255, 255, 255, 0.28) 68%, rgba(0, 51, 38, 0.18) 100%),
    radial-gradient(circle at 18% 20%, rgba(248, 214, 133, 0.28), transparent 16rem),
    radial-gradient(circle at 82% 16%, rgba(255, 227, 152, 0.42), transparent 17rem),
    url("public/images/canon/canon-hero-journey.png") center right / cover no-repeat;
  box-shadow: 0 24px 58px rgba(5, 57, 43, 0.14);
}

body[data-view="book"] .book-journey-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(247, 252, 249, 0.48) 64%, rgba(247, 252, 249, 0.9) 100%),
    radial-gradient(circle at 82% 74%, rgba(0, 65, 49, 0.24), transparent 17rem);
  pointer-events: none;
}

body[data-view="book"] .book-journey-overview > * {
  position: relative;
  z-index: 1;
}

body[data-view="book"] .book-journey-head {
  display: flex;
  max-width: 46rem;
  align-items: center;
  gap: 1rem;
}

body[data-view="book"] .book-journey-icon {
  display: grid;
  width: 4.6rem;
  height: 4.6rem;
  flex: 0 0 auto;
  place-items: center;
  border: 3px solid rgba(255, 219, 126, 0.82);
  border-radius: 50%;
  background: linear-gradient(145deg, #00765d, #004735);
  color: #f7cf62;
  box-shadow:
    0 14px 30px rgba(2, 67, 50, 0.22),
    0 0 0 8px rgba(255, 255, 255, 0.5);
}

body[data-view="book"] .book-journey-icon::before,
body[data-view="book"] .book-journey-heart::before,
body[data-view="book"] .book-journey-metric-icon::before,
body[data-view="book"] .book-week-step b::before,
body[data-view="book"] .book-journey-scripture span::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  -webkit-mask: var(--book-journey-icon) center / contain no-repeat;
  mask: var(--book-journey-icon) center / contain no-repeat;
}

body[data-view="book"] .book-journey-icon::before {
  --book-journey-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 20h18'/%3E%3Cpath d='m4 20 6.4-11 3.2 5.2L16 10l4 10'/%3E%3Cpath d='M10.4 9V4'/%3E%3Cpath d='M10.4 4h5l-1.2 1.5L15.4 7h-5'/%3E%3Ccircle cx='7.5' cy='14.5' r='.7'/%3E%3C/svg%3E");
  width: 2.65rem;
  height: 2.65rem;
}

body[data-view="book"] .book-journey-head h4 {
  margin: 0;
  color: #064734;
  font-size: 2.55rem;
  line-height: 1;
}

body[data-view="book"] .book-journey-head p {
  margin: 0.45rem 0 0;
  color: #395951;
  font-size: 1.08rem;
  line-height: 1.45;
}

body[data-view="book"] .book-journey-heart {
  color: #d99a12;
}

body[data-view="book"] .book-journey-heart::before {
  --book-journey-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z'/%3E%3C/svg%3E");
  width: 1.35rem;
  height: 1.35rem;
}

body[data-view="book"] .book-journey-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 47rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 22px;
  background: rgba(255, 253, 246, 0.82);
  box-shadow:
    0 22px 44px rgba(5, 57, 43, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
}

body[data-view="book"] .book-journey-metric {
  display: grid;
  min-height: 8.3rem;
  place-items: center;
  align-content: center;
  gap: 0.45rem;
  padding: 0.95rem 0.8rem;
  border-left: 1px solid rgba(0, 82, 61, 0.11);
  text-align: center;
  transition:
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

body[data-view="book"] .book-journey-metric:first-child {
  border-left: 0;
}

body[data-view="book"] .book-journey-metric:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 26px rgba(5, 57, 43, 0.12);
}

body[data-view="book"] .book-journey-metric-icon {
  display: grid;
  width: 3.3rem;
  height: 3.3rem;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(232, 239, 215, 0.98), rgba(255, 248, 229, 0.95));
  color: #08775f;
  box-shadow: 0 10px 24px rgba(5, 57, 43, 0.1);
}

body[data-view="book"] .book-journey-metric-icon::before {
  --book-journey-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E");
  width: 1.65rem;
  height: 1.65rem;
}

body[data-view="book"] .book-journey-metric[data-icon="month"] .book-journey-metric-icon::before {
  --book-journey-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='17' rx='2.5'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E");
}

body[data-view="book"] .book-journey-metric[data-icon="streak"] .book-journey-metric-icon {
  color: #bd7b05;
}

body[data-view="book"] .book-journey-metric[data-icon="streak"] .book-journey-metric-icon::before {
  --book-journey-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 14.5A3.5 3.5 0 0 0 12 20a5.5 5.5 0 0 0 5.5-5.5c0-3.7-2.7-5.9-4-8.5-.5 2.2-1.9 3.3-3.5 4.8A5.2 5.2 0 0 0 8.5 14.5Z'/%3E%3Cpath d='M12 20a2.7 2.7 0 0 0 2.7-2.7c0-1.8-1.2-2.9-2.2-4.1-.3 1.2-1.1 1.9-2 2.8A2.7 2.7 0 0 0 12 20Z'/%3E%3C/svg%3E");
}

body[data-view="book"] .book-journey-metric[data-icon="milestones"] .book-journey-metric-icon {
  color: #00614d;
}

body[data-view="book"] .book-journey-metric[data-icon="milestones"] .book-journey-metric-icon::before {
  --book-journey-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 7 4 10h10l4-10-5.5 4L12 4 8.5 11 3 7Z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
}

body[data-view="book"] .book-journey-metric strong {
  color: #073c2f;
  font-size: 2rem;
  line-height: 1;
}

body[data-view="book"] .book-journey-metric small {
  max-width: 7.8rem;
  color: #285247;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.3;
}

body[data-view="book"] .book-week-journey {
  position: relative;
  display: grid;
  gap: 0.9rem;
  overflow: hidden;
  margin-top: 0.35rem;
  padding: 1.15rem 1.2rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(247, 252, 249, 0.96), rgba(255, 252, 239, 0.88)),
    radial-gradient(circle at 50% 70%, rgba(255, 224, 141, 0.28), transparent 22rem);
  box-shadow:
    0 18px 38px rgba(5, 57, 43, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

body[data-view="book"] .book-week-journey h5 {
  margin: 0;
  color: #064734;
  font-size: 1.05rem;
  line-height: 1.2;
}

body[data-view="book"] .book-week-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  min-height: 7.35rem;
  align-items: start;
  padding-top: 0.65rem;
}

body[data-view="book"] .book-week-timeline::before {
  content: "";
  position: absolute;
  top: 1.92rem;
  right: 7%;
  left: 7%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #08775f 0%, #08775f 45%, #d99a12 52%, rgba(217, 154, 18, 0.42) 74%, rgba(0, 82, 61, 0.18) 100%);
  box-shadow: 0 0 16px rgba(217, 154, 18, 0.18);
}

body[data-view="book"] .book-week-step {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 0.22rem;
  text-align: center;
}

body[data-view="book"] .book-week-step b {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #08775f;
  box-shadow: 0 9px 18px rgba(5, 57, 43, 0.13);
}

body[data-view="book"] .book-week-step.completed b {
  background: linear-gradient(145deg, #11916f, #00664d);
  color: #fff;
  box-shadow:
    0 11px 20px rgba(0, 87, 65, 0.22),
    0 0 0 5px rgba(8, 119, 95, 0.09);
}

body[data-view="book"] .book-week-step.current b {
  border: 3px solid #e5a629;
  color: #c88405;
  box-shadow:
    0 10px 24px rgba(217, 154, 18, 0.22),
    0 0 0 7px rgba(255, 229, 167, 0.34);
}

body[data-view="book"] .book-week-step.upcoming b {
  border: 3px solid rgba(201, 140, 16, 0.78);
  color: transparent;
  box-shadow: 0 8px 16px rgba(5, 57, 43, 0.08);
}

body[data-view="book"] .book-week-step.completed b::before {
  --book-journey-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
  width: 1.35rem;
  height: 1.35rem;
}

body[data-view="book"] .book-week-step.current b::before {
  --book-journey-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3Cpath d='M9 7h7'/%3E%3Cpath d='M9 11h5'/%3E%3C/svg%3E");
  width: 1.35rem;
  height: 1.35rem;
}

body[data-view="book"] .book-week-step.upcoming b::before {
  display: none;
}

body[data-view="book"] .book-week-step strong {
  margin-top: 0.35rem;
  color: #083e31;
  font-size: 0.8rem;
  line-height: 1.1;
}

body[data-view="book"] .book-week-step small {
  color: #285247;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.2;
}

body[data-view="book"] .book-week-step em {
  color: #7b6c47;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.15;
}

body[data-view="book"] .book-journey-scripture {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.9rem;
  overflow: hidden;
  align-items: center;
  min-height: 7.25rem;
  padding: 1.1rem 1.25rem;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(0, 55, 39, 0.94), rgba(0, 70, 50, 0.76) 48%, rgba(0, 55, 39, 0.16) 100%),
    url("public/images/lexicon/lexicon-hero-bg.png") center right / cover no-repeat;
  color: #fff;
  box-shadow: 0 18px 34px rgba(0, 48, 36, 0.18);
}

body[data-view="book"] .book-journey-scripture span {
  display: grid;
  width: 3rem;
  height: 3rem;
  grid-row: span 2;
  place-items: center;
  align-self: start;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffd76b;
}

body[data-view="book"] .book-journey-scripture span::before {
  --book-journey-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2 6.2C4.7 8.3 3.5 10.7 3.5 13.4c0 2.9 1.7 4.9 4.3 4.9 2.1 0 3.7-1.5 3.7-3.6 0-1.9-1.3-3.3-3.2-3.3-.5 0-.9.1-1.3.2.3-1.3 1.2-2.6 2.8-3.9L7.2 6.2Zm10 0c-2.5 2.1-3.7 4.5-3.7 7.2 0 2.9 1.7 4.9 4.3 4.9 2.1 0 3.7-1.5 3.7-3.6 0-1.9-1.3-3.3-3.2-3.3-.5 0-.9.1-1.3.2.3-1.3 1.2-2.6 2.8-3.9l-2.6-1.5Z'/%3E%3C/svg%3E");
  width: 1.55rem;
  height: 1.55rem;
}

body[data-view="book"] .book-journey-scripture p {
  max-width: 36rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 720;
  line-height: 1.45;
}

body[data-view="book"] .book-journey-scripture b {
  color: #ffd76b;
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  body[data-view="book"] .book-journey-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 34rem;
  }

  body[data-view="book"] .book-journey-metric:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(0, 82, 61, 0.11);
  }

  body[data-view="book"] .book-journey-metric:nth-child(4) {
    border-top: 1px solid rgba(0, 82, 61, 0.11);
  }
}

@media (max-width: 1120px) {
  body[data-view="book"] .book-journey-overview {
    min-height: 27rem;
  }

  body[data-view="book"] .book-journey-metrics {
    max-width: 44rem;
  }
}

@media (max-width: 760px) {
  body[data-view="book"] .book-journey-overview {
    min-height: auto;
    padding: 1rem;
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.82)),
      url("public/images/canon/canon-hero-journey.png") center / cover no-repeat;
  }

  body[data-view="book"] .book-journey-head {
    align-items: flex-start;
  }

  body[data-view="book"] .book-journey-icon {
    width: 3.8rem;
    height: 3.8rem;
  }

  body[data-view="book"] .book-journey-icon::before {
    width: 2.2rem;
    height: 2.2rem;
  }

  body[data-view="book"] .book-journey-head h4 {
    font-size: 2rem;
  }

  body[data-view="book"] .book-journey-head p {
    font-size: 0.98rem;
  }

  body[data-view="book"] .book-journey-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  body[data-view="book"] .book-journey-metric {
    min-height: 7.4rem;
  }

  body[data-view="book"] .book-week-timeline {
    display: flex;
    min-height: auto;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.25rem 0 0.1rem;
  }

  body[data-view="book"] .book-week-timeline::before {
    top: 1.45rem;
    bottom: 1.45rem;
    left: 1.28rem;
    width: 4px;
    height: auto;
    background: linear-gradient(180deg, #08775f 0%, #08775f 45%, #d99a12 52%, rgba(217, 154, 18, 0.42) 74%, rgba(0, 82, 61, 0.18) 100%);
  }

  body[data-view="book"] .book-week-step {
    grid-template-columns: 2.55rem minmax(0, 1fr);
    grid-template-areas:
      "icon day"
      "icon status"
      "icon label";
    justify-items: start;
    gap: 0.12rem 0.75rem;
    text-align: left;
  }

  body[data-view="book"] .book-week-step b {
    grid-area: icon;
  }

  body[data-view="book"] .book-week-step strong {
    grid-area: day;
    margin-top: 0.12rem;
  }

  body[data-view="book"] .book-week-step small {
    grid-area: status;
  }

  body[data-view="book"] .book-week-step em {
    grid-area: label;
  }

  body[data-view="book"] .book-journey-scripture {
    grid-template-columns: 1fr;
    min-height: 9rem;
    padding: 1rem;
    background:
      linear-gradient(180deg, rgba(0, 55, 39, 0.93), rgba(0, 55, 39, 0.72)),
      url("public/images/lexicon/lexicon-hero-bg.png") center / cover no-repeat;
  }

  body[data-view="book"] .book-journey-scripture span {
    grid-row: auto;
  }
}

@media (max-width: 520px) {
  body[data-view="book"] .book-journey-metrics {
    grid-template-columns: 1fr;
  }

  body[data-view="book"] .book-journey-metric,
  body[data-view="book"] .book-journey-metric:nth-child(3),
  body[data-view="book"] .book-journey-metric:nth-child(4) {
    border-left: 0;
    border-top: 1px solid rgba(0, 82, 61, 0.11);
  }

  body[data-view="book"] .book-journey-metric:first-child {
    border-top: 0;
  }
}

/* Keep the Book Journey Overview in its original insight-rail position. */
body[data-view="book"] .book-saint-rail .book-journey-overview {
  gap: 0.82rem;
  min-height: auto;
  padding: 1rem;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 56%, rgba(247, 252, 249, 0.9) 100%),
    radial-gradient(circle at 80% 8%, rgba(255, 220, 130, 0.34), transparent 9rem),
    url("public/images/canon/canon-hero-journey.png") center right / cover no-repeat;
  box-shadow: 0 16px 34px rgba(5, 57, 43, 0.1);
}

body[data-view="book"] .book-saint-rail .book-journey-overview::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(247, 252, 249, 0.86)),
    radial-gradient(circle at 72% 24%, rgba(0, 65, 49, 0.16), transparent 10rem);
}

body[data-view="book"] .book-saint-rail .book-journey-head {
  gap: 0.68rem;
}

body[data-view="book"] .book-saint-rail .book-journey-icon {
  width: 3.1rem;
  height: 3.1rem;
  border-width: 2px;
  box-shadow:
    0 10px 20px rgba(2, 67, 50, 0.18),
    0 0 0 5px rgba(255, 255, 255, 0.48);
}

body[data-view="book"] .book-saint-rail .book-journey-icon::before {
  width: 1.78rem;
  height: 1.78rem;
}

body[data-view="book"] .book-saint-rail .book-journey-head h4 {
  font-size: 1.22rem;
  line-height: 1.1;
}

body[data-view="book"] .book-saint-rail .book-journey-head p {
  margin-top: 0.24rem;
  font-size: 0.78rem;
  line-height: 1.35;
}

body[data-view="book"] .book-saint-rail .book-journey-heart::before {
  width: 1rem;
  height: 1rem;
}

body[data-view="book"] .book-saint-rail .book-journey-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
  border-radius: 15px;
}

body[data-view="book"] .book-saint-rail .book-journey-metric {
  min-height: 5.75rem;
  gap: 0.28rem;
  padding: 0.62rem 0.5rem;
  border-top: 0;
  border-left: 1px solid rgba(0, 82, 61, 0.11);
}

body[data-view="book"] .book-saint-rail .book-journey-metric:nth-child(odd) {
  border-left: 0;
}

body[data-view="book"] .book-saint-rail .book-journey-metric:nth-child(n + 3) {
  border-top: 1px solid rgba(0, 82, 61, 0.11);
}

body[data-view="book"] .book-saint-rail .book-journey-metric-icon {
  width: 2.18rem;
  height: 2.18rem;
}

body[data-view="book"] .book-saint-rail .book-journey-metric-icon::before {
  width: 1.12rem;
  height: 1.12rem;
}

body[data-view="book"] .book-saint-rail .book-journey-metric strong {
  font-size: 1.32rem;
}

body[data-view="book"] .book-saint-rail .book-journey-metric small {
  max-width: 5.9rem;
  font-size: 0.68rem;
  line-height: 1.22;
}

body[data-view="book"] .book-saint-rail .book-week-journey {
  gap: 0.62rem;
  margin-top: 0;
  padding: 0.8rem 0.72rem 0.72rem;
  border-radius: 15px;
}

body[data-view="book"] .book-saint-rail .book-week-journey h5 {
  font-size: 0.84rem;
}

body[data-view="book"] .book-saint-rail .book-week-timeline {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 5.2rem;
  gap: 0.12rem;
  padding-top: 0.42rem;
}

body[data-view="book"] .book-saint-rail .book-week-timeline::before {
  top: 1.38rem;
  right: 8%;
  left: 8%;
  height: 3px;
}

body[data-view="book"] .book-saint-rail .book-week-step {
  gap: 0.16rem;
}

body[data-view="book"] .book-saint-rail .book-week-step b {
  width: 1.85rem;
  height: 1.85rem;
}

body[data-view="book"] .book-saint-rail .book-week-step.completed b::before,
body[data-view="book"] .book-saint-rail .book-week-step.current b::before {
  width: 0.95rem;
  height: 0.95rem;
}

body[data-view="book"] .book-saint-rail .book-week-step strong {
  margin-top: 0.18rem;
  font-size: 0.58rem;
}

body[data-view="book"] .book-saint-rail .book-week-step small {
  font-size: 0.56rem;
}

body[data-view="book"] .book-saint-rail .book-week-step em {
  display: none;
}

body[data-view="book"] .book-saint-rail .book-journey-scripture {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 4.75rem;
  gap: 0.14rem 0.58rem;
  padding: 0.78rem;
  border-radius: 15px;
  background:
    linear-gradient(90deg, rgba(0, 55, 39, 0.96), rgba(0, 70, 50, 0.72), rgba(0, 55, 39, 0.2)),
    url("public/images/lexicon/lexicon-hero-bg.png") center right / cover no-repeat;
}

body[data-view="book"] .book-saint-rail .book-journey-scripture span {
  width: 2rem;
  height: 2rem;
}

body[data-view="book"] .book-saint-rail .book-journey-scripture span::before {
  width: 1.05rem;
  height: 1.05rem;
}

body[data-view="book"] .book-saint-rail .book-journey-scripture p {
  font-size: 0.75rem;
  line-height: 1.35;
}

body[data-view="book"] .book-saint-rail .book-journey-scripture b {
  font-size: 0.7rem;
}

@media (max-width: 1120px) {
  body[data-view="book"] .book-saint-rail .book-journey-overview {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body[data-view="book"] .book-saint-rail .book-week-timeline {
    display: flex;
    min-height: auto;
    flex-direction: column;
    gap: 0.55rem;
  }

  body[data-view="book"] .book-saint-rail .book-week-timeline::before {
    top: 1.08rem;
    right: auto;
    bottom: 1.08rem;
    left: 0.92rem;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, #08775f 0%, #08775f 45%, #d99a12 52%, rgba(217, 154, 18, 0.42) 74%, rgba(0, 82, 61, 0.18) 100%);
  }

  body[data-view="book"] .book-saint-rail .book-week-step {
    grid-template-columns: 1.85rem minmax(0, 1fr);
  }
}

/* Roadmap KPI icon refresh: premium masked icons without changing generated data. */
body[data-view="roadmap"] .roadmap-kpi-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

body[data-view="roadmap"] .roadmap-kpi-card::before {
  content: "";
  position: absolute;
  right: -2.3rem;
  top: -2.7rem;
  z-index: 0;
  width: 7rem;
  height: 7rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0, 111, 84, 0.1), transparent 68%);
}

body[data-view="roadmap"] .roadmap-kpi-card > * {
  position: relative;
  z-index: 1;
}

body[data-view="roadmap"] .roadmap-kpi-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 111, 84, 0.18);
  box-shadow: 0 24px 54px rgba(25, 61, 51, 0.14);
}

body[data-view="roadmap"] .roadmap-kpi-icon {
  position: relative;
  display: grid;
  width: 3.45rem;
  height: 3.45rem;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 230, 147, 0.42), transparent 42%),
    linear-gradient(145deg, #e8f8ef, #f8fffb);
  color: #006f54;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 13px 28px rgba(0, 111, 84, 0.14);
}

body[data-view="roadmap"] .roadmap-kpi-icon::before {
  content: "";
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  background: currentColor;
  -webkit-mask: var(--roadmap-kpi-mask) center / contain no-repeat;
  mask: var(--roadmap-kpi-mask) center / contain no-repeat;
}

body[data-view="roadmap"] .roadmap-kpi-icon.layers::before {
  --roadmap-kpi-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='4' height='4' rx='1'/%3E%3Crect x='10' y='4' width='4' height='4' rx='1'/%3E%3Crect x='16' y='4' width='4' height='4' rx='1'/%3E%3Crect x='4' y='10' width='4' height='4' rx='1'/%3E%3Crect x='10' y='10' width='4' height='4' rx='1'/%3E%3Crect x='16' y='10' width='4' height='4' rx='1'/%3E%3Crect x='4' y='16' width='4' height='4' rx='1'/%3E%3Crect x='10' y='16' width='4' height='4' rx='1'/%3E%3Crect x='16' y='16' width='4' height='4' rx='1'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .roadmap-kpi-icon.grid {
  background:
    radial-gradient(circle at 30% 24%, rgba(185, 224, 255, 0.58), transparent 42%),
    linear-gradient(145deg, #e4f4ff, #f7fcff);
  color: #0b6b91;
}

body[data-view="roadmap"] .roadmap-kpi-icon.grid::before {
  --roadmap-kpi-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2.8 8 4.4v9.6l-8 4.4-8-4.4V7.2l8-4.4Z'/%3E%3Cpath d='M4.4 7.5 12 12l7.6-4.5'/%3E%3Cpath d='M12 21.2V12'/%3E%3Cpath d='m8.3 5 7.5 4.4'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .roadmap-kpi-icon.target::before {
  --roadmap-kpi-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M22 12h-3'/%3E%3Cpath d='M12 22v-3'/%3E%3Cpath d='M2 12h3'/%3E%3Cpath d='m15 9 4-4'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .roadmap-kpi-icon.document {
  background:
    radial-gradient(circle at 30% 24%, rgba(207, 191, 255, 0.52), transparent 42%),
    linear-gradient(145deg, #eee9ff, #fbfaff);
  color: #6d52c8;
}

body[data-view="roadmap"] .roadmap-kpi-icon.document::before {
  --roadmap-kpi-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h7l5 5v13H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 3v6h5'/%3E%3Cpath d='M8.5 13h7'/%3E%3Cpath d='M8.5 17h5.5'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .roadmap-kpi-icon.puzzle {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 224, 143, 0.58), transparent 42%),
    linear-gradient(145deg, #fff4d7, #fffdf5);
  color: #c98505;
}

body[data-view="roadmap"] .roadmap-kpi-icon.puzzle::before {
  --roadmap-kpi-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h4.2a2.8 2.8 0 0 1 0 5.6H15V11h2.4a2.8 2.8 0 1 1 0 5.6H15V21H9v-4.4H6.6a2.8 2.8 0 1 1 0-5.6H9V8.6H6.8A2.8 2.8 0 0 1 6.8 3H9Z'/%3E%3C/svg%3E");
}

body[data-view="roadmap"] .roadmap-kpi-icon.progress {
  border-radius: 999px;
  background: conic-gradient(#00785d 0 68%, rgba(0, 111, 84, 0.12) 68% 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 13px 28px rgba(0, 111, 84, 0.16);
}

body[data-view="roadmap"] .roadmap-kpi-icon.progress::before {
  position: absolute;
  inset: 0.55rem;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 230, 147, 0.45), transparent 46%),
    #ffffff;
  -webkit-mask: none;
  mask: none;
}

body[data-view="roadmap"] .roadmap-kpi-icon.progress::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  top: 0.44rem;
  width: 0.62rem;
  height: 0.62rem;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #00785d;
  box-shadow: 0 4px 10px rgba(0, 72, 55, 0.2);
}

/* Shared sidebar icon refresh: scoped masks preserve existing navigation behavior. */
body[data-view] .nav-section-label,
body[data-view="today"] .nav-section-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

body[data-view] .nav-section-label::before,
body[data-view="today"] .nav-section-label::before,
body[data-view] .nav-group summary::before,
body[data-view="today"] .nav-group summary::before,
body[data-view] .nav-item::before,
body[data-view="today"] .nav-item::before {
  content: "";
  display: inline-grid;
  width: 1.12rem;
  height: 1.12rem;
  flex: 0 0 1.12rem;
  place-items: center;
  background: currentColor;
  color: #00614d;
  -webkit-mask: var(--sidebar-icon) center / contain no-repeat;
  mask: var(--sidebar-icon) center / contain no-repeat;
}

body[data-view] .nav-item,
body[data-view="today"] .nav-item {
  position: relative;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

body[data-view] .nav-item:hover,
body[data-view="today"] .nav-item:hover {
  transform: translateX(2px);
}

body[data-view] .nav-item.active::before,
body[data-view="today"] .nav-item.active::before {
  color: #005d4c;
}

body[data-view] .nav-section-label::before,
body[data-view="today"] .nav-section-label::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M7 7V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2'/%3E%3Crect x='3' y='7' width='18' height='13' rx='2.5'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M12 9v6'/%3E%3C/svg%3E");
  width: 0.95rem;
  height: 0.95rem;
  flex-basis: 0.95rem;
}

body[data-view] .nav-group summary,
body[data-view="today"] .nav-group summary {
  justify-content: flex-start;
  gap: 0.55rem;
}

body[data-view] .nav-group summary::before,
body[data-view="today"] .nav-group summary::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5' width='16' height='14' rx='2.5'/%3E%3Cpath d='M8 9h2'/%3E%3Cpath d='M14 9h2'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M10 17h4'/%3E%3C/svg%3E");
  width: 0.95rem;
  height: 0.95rem;
  flex-basis: 0.95rem;
}

body[data-view] .nav-group summary::after,
body[data-view="today"] .nav-group summary::after {
  margin-left: auto;
}

body[data-view] .nav-item[data-view="today"]::before,
body[data-view="today"] .nav-item[data-view="today"]::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 11.5 12 5l8 6.5'/%3E%3Cpath d='M6.5 10.5V20h11v-9.5'/%3E%3Cpath d='M9.5 20v-5h5v5'/%3E%3Cpath d='M18.5 4.5l1 1'/%3E%3Cpath d='M20.5 2.5 17 6'/%3E%3C/svg%3E");
}

body[data-view] .nav-item[data-view="roadmap"]::before,
body[data-view="today"] .nav-item[data-view="roadmap"]::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M6 17c2.4-5.6 5.7-8.7 12-11'/%3E%3Cpath d='M14 5h5v5'/%3E%3Ccircle cx='6' cy='17' r='2'/%3E%3Ccircle cx='12' cy='10.5' r='1.6'/%3E%3C/svg%3E");
}

body[data-view] .nav-item[data-view="search"]::before,
body[data-view="today"] .nav-item[data-view="search"]::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='10.5' r='6.2'/%3E%3Cpath d='m15.2 15.2 4.8 4.8'/%3E%3Cpath d='M8.3 10.5h4.4'/%3E%3Cpath d='M10.5 8.3v4.4'/%3E%3C/svg%3E");
}

body[data-view] .nav-item[data-view="canon"]::before,
body[data-view="today"] .nav-item[data-view="canon"]::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4.8A2.8 2.8 0 0 1 7.8 2H19v18H7.8A2.8 2.8 0 0 1 5 17.2V4.8Z'/%3E%3Cpath d='M8 6h7'/%3E%3Cpath d='M8 10h6'/%3E%3Cpath d='M8 14h4'/%3E%3Cpath d='M5.2 17.5H19'/%3E%3C/svg%3E");
}

body[data-view] .nav-item[data-view="table"]::before,
body[data-view="today"] .nav-item[data-view="table"]::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.4'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M9 4v16'/%3E%3Cpath d='M15 4v16'/%3E%3Cpath d='M6 13h3'/%3E%3Cpath d='M12 17h6'/%3E%3C/svg%3E");
}

body[data-view] .nav-item[data-view="calling"]::before,
body[data-view="today"] .nav-item[data-view="calling"]::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m14.7 9.3-2 5.4-5.4 2 2-5.4 5.4-2Z'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M22 12h-3'/%3E%3Cpath d='M12 22v-3'/%3E%3Cpath d='M2 12h3'/%3E%3C/svg%3E");
}

body[data-view] .nav-item[data-view="book"]::before,
body[data-view="today"] .nav-item[data-view="book"]::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3Cpath d='M12 6v7'/%3E%3Cpath d='M9.5 8.5h5'/%3E%3C/svg%3E");
}

body[data-view] .nav-item[data-view="lexicon"]::before,
body[data-view="today"] .nav-item[data-view="lexicon"]::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H11V4H6.5A2.5 2.5 0 0 0 4 6.5v13Z'/%3E%3Cpath d='M20 19.5A2.5 2.5 0 0 0 17.5 17H13V4h4.5A2.5 2.5 0 0 1 20 6.5v13Z'/%3E%3Cpath d='M8 8h1.5'/%3E%3Cpath d='M15 8h1.5'/%3E%3Cpath d='M8 12h1.5'/%3E%3Cpath d='M15 12h1.5'/%3E%3C/svg%3E");
}

body[data-view] .nav-item[data-view="testimony"]::before,
body[data-view="today"] .nav-item[data-view="testimony"]::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 4.8a5.2 5.2 0 0 0-7.4 0L12 6.2l-1.4-1.4a5.2 5.2 0 1 0-7.4 7.4L12 21l8.8-8.8a5.2 5.2 0 0 0 0-7.4Z'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
}

body[data-view] .nav-item[data-view="guide"]::before,
body[data-view="today"] .nav-item[data-view="guide"]::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l1.2 3.2L16.5 7.5l-3.3 1.3L12 12l-1.2-3.2-3.3-1.3 3.3-1.3L12 3Z'/%3E%3Cpath d='M6 13l.8 2.2L9 16l-2.2.8L6 19l-.8-2.2L3 16l2.2-.8L6 13Z'/%3E%3Cpath d='M18 12l1 2.7 2.7 1-2.7 1L18 19.5l-1-2.8-2.7-1 2.7-1L18 12Z'/%3E%3C/svg%3E");
}

body[data-view] .nav-item[data-view="ui-elements"]::before,
body[data-view="today"] .nav-item[data-view="ui-elements"]::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m10 9 5 3-5 3V9Z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
}

body[data-view] .nav-item[data-view="teoyube-tables"]::before,
body[data-view="today"] .nav-item[data-view="teoyube-tables"]::before {
  --sidebar-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='7' ry='3'/%3E%3Cpath d='M5 5v6c0 1.7 3.1 3 7 3s7-1.3 7-3V5'/%3E%3Cpath d='M5 11v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3Cpath d='M8.5 10.5h7'/%3E%3Cpath d='M8.5 16.5h7'/%3E%3C/svg%3E");
}

/* Sidebar Saint profile avatar: use the uploaded ministry image as the profile icon. */
body[data-view] .sidebar .saint-avatar,
body[data-view="today"] .sidebar .saint-avatar {
  overflow: hidden;
  border: 2px solid #ffffff;
  background:
    linear-gradient(145deg, rgba(0, 79, 62, 0.08), rgba(245, 211, 106, 0.16)),
    url("public/images/sidebar/saint-profile-avatar.png") center / cover no-repeat;
  box-shadow:
    0 0 0 1px rgba(0, 93, 76, 0.12),
    0 10px 22px rgba(16, 33, 31, 0.14);
}

/* Canon profile widget cleanup: one avatar image and a crisp edit icon. */
body[data-view="canon"] .canon-profile-head button::before {
  content: "";
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="canon"] .canon-profile-widget::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

body[data-view="canon"] .canon-profile-head > .canon-profile-avatar {
  display: block !important;
  width: 5.9rem !important;
  height: 5.9rem !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #eaf7ef url("public/images/sidebar/saint-profile-avatar.png") center / cover no-repeat !important;
}

/* Canon profile Scripture panel icon treatment. */
body[data-view="canon"] .canon-profile-widget blockquote {
  position: relative;
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  min-height: 6.6rem;
  padding: 1rem 1rem 1rem 0.9rem;
  background:
    radial-gradient(circle at 16% 28%, rgba(255, 224, 143, 0.18), transparent 5rem),
    linear-gradient(145deg, #fbfdfc, #f5fbf8);
}

body[data-view="canon"] .canon-profile-widget blockquote::before {
  content: "";
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border: 1px solid rgba(0, 105, 70, 0.12);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 224, 143, 0.38), transparent 44%),
    linear-gradient(145deg, #e8f7ee, #ffffff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 10px 20px rgba(0, 75, 55, 0.1);
}

body[data-view="canon"] .canon-profile-widget blockquote::after {
  content: "";
  position: absolute;
  left: 1.52rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  background: #006b4b;
  transform: translateY(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H11V4H6.5A2.5 2.5 0 0 0 4 6.5v13Z'/%3E%3Cpath d='M20 19.5A2.5 2.5 0 0 0 17.5 17H13V4h4.5A2.5 2.5 0 0 1 20 6.5v13Z'/%3E%3Cpath d='M11 17v3'/%3E%3Cpath d='M13 17v3'/%3E%3Cpath d='M8 8h1'/%3E%3Cpath d='M15 8h1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H11V4H6.5A2.5 2.5 0 0 0 4 6.5v13Z'/%3E%3Cpath d='M20 19.5A2.5 2.5 0 0 0 17.5 17H13V4h4.5A2.5 2.5 0 0 1 20 6.5v13Z'/%3E%3Cpath d='M11 17v3'/%3E%3Cpath d='M13 17v3'/%3E%3Cpath d='M8 8h1'/%3E%3Cpath d='M15 8h1'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="canon"] .canon-profile-widget blockquote b {
  display: inline-block;
  margin-top: 0.35rem;
  color: #006b4b;
  font-size: 0.82rem;
}

/* Canon dashboard stat icons and overview label placement. */
body[data-view="canon"] .canon-kpi-card {
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

body[data-view="canon"] .canon-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 105, 70, 0.2);
  box-shadow: 0 18px 36px rgba(0, 75, 55, 0.12);
}

body[data-view="canon"] .canon-kpi-card::before {
  content: "";
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 226, 143, 0.34), transparent 42%),
    linear-gradient(145deg, #e9f8ef, #fbfffc);
  color: #006b4b;
  -webkit-mask: none;
  mask: none;
}

body[data-view="canon"] .canon-kpi-card::after {
  content: "";
  position: absolute;
  left: 1.58rem;
  top: 1.66rem;
  z-index: 1;
  width: 1.32rem;
  height: 1.32rem;
  background: currentColor;
  color: #006b4b;
  -webkit-mask: var(--canon-kpi-mask) center / contain no-repeat;
  mask: var(--canon-kpi-mask) center / contain no-repeat;
}

body[data-view="canon"] .canon-kpi-card[data-icon="book"]::after {
  --canon-kpi-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H11V4H6.5A2.5 2.5 0 0 0 4 6.5v13Z'/%3E%3Cpath d='M20 19.5A2.5 2.5 0 0 0 17.5 17H13V4h4.5A2.5 2.5 0 0 1 20 6.5v13Z'/%3E%3Cpath d='M11 17v3'/%3E%3Cpath d='M13 17v3'/%3E%3C/svg%3E");
}

body[data-view="canon"] .canon-kpi-card[data-icon="check"]::after {
  --canon-kpi-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='3' width='16' height='18' rx='3'/%3E%3Cpath d='M9 12.5 11.2 15 16 9'/%3E%3Cpath d='M9 7h6'/%3E%3C/svg%3E");
}

body[data-view="canon"] .canon-kpi-card[data-icon="cycle"]::after {
  --canon-kpi-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12a8 8 0 0 1 13.4-5.9'/%3E%3Cpath d='M17.5 3v4h-4'/%3E%3Cpath d='M20 12a8 8 0 0 1-13.4 5.9'/%3E%3Cpath d='M6.5 21v-4h4'/%3E%3Cpath d='M12 8v4l2.5 1.5'/%3E%3C/svg%3E");
}

body[data-view="canon"] .canon-kpi-card[data-icon="pause"]::after {
  --canon-kpi-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4.5A2.5 2.5 0 0 1 7.5 2H17a2 2 0 0 1 2 2v16l-7-4-7 4V4.5Z'/%3E%3Cpath d='M9 8v6'/%3E%3Cpath d='M15 8v6'/%3E%3C/svg%3E");
}

body[data-view="canon"] .canon-kpi-card[data-icon="trend"]::after {
  --canon-kpi-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 17.5 8.5 12l4 4L21 7.5'/%3E%3Cpath d='M15 7.5h6v6'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E");
}

body[data-view="canon"] .canon-kpi-card[data-icon="check"]::before,
body[data-view="canon"] .canon-kpi-card[data-icon="cycle"]::before {
  background:
    radial-gradient(circle at 32% 24%, rgba(198, 238, 217, 0.62), transparent 42%),
    linear-gradient(145deg, #ecfbf2, #ffffff);
}

body[data-view="canon"] .canon-kpi-card[data-icon="pause"]::before {
  background:
    radial-gradient(circle at 32% 24%, rgba(214, 233, 255, 0.6), transparent 42%),
    linear-gradient(145deg, #edf6ff, #ffffff);
}

body[data-view="canon"] .canon-kpi-card[data-icon="trend"]::before {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 226, 143, 0.54), transparent 42%),
    linear-gradient(145deg, #fff7df, #ffffff);
}

body[data-view="canon"] .canon-kpi-card[data-icon="trend"]::after {
  color: #b87900;
}

body[data-view="canon"] .canon-overview-widget {
  position: relative;
  min-height: 19rem;
}

body[data-view="canon"] .canon-radar {
  width: 10.6rem;
  height: 10.6rem;
  margin: 1.9rem auto 2.3rem;
}

body[data-view="canon"] .canon-radar-labels {
  position: absolute;
  top: 3.15rem;
  right: 1rem;
  left: 1rem;
  display: block;
  height: 12.8rem;
  pointer-events: none;
}

body[data-view="canon"] .canon-radar-labels span {
  position: absolute;
  width: 4.7rem;
  color: #0d352b;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.18;
  text-align: center;
}

body[data-view="canon"] .canon-radar-labels b {
  color: #00513d;
  font-size: 0.72rem;
}

body[data-view="canon"] .canon-radar-labels span:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

body[data-view="canon"] .canon-radar-labels span:nth-child(2) {
  top: 4.15rem;
  right: 0;
  text-align: right;
}

body[data-view="canon"] .canon-radar-labels span:nth-child(3) {
  right: 1.55rem;
  bottom: 0.15rem;
  text-align: right;
}

body[data-view="canon"] .canon-radar-labels span:nth-child(4) {
  bottom: 0.15rem;
  left: 1.55rem;
  text-align: left;
}

body[data-view="canon"] .canon-radar-labels span:nth-child(5) {
  top: 4.15rem;
  left: 0;
  text-align: left;
}

body[data-view="canon"] .canon-maturity {
  margin-top: 1.25rem;
}

/* Premium Today cinematic carousel */
body[data-view="today"] .today-premium-shell .promise-carousel {
  position: relative;
  width: 100%;
  height: clamp(34rem, 58vw, 48rem);
  min-height: clamp(34rem, 58vw, 48rem);
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: #052b24;
  box-shadow: 0 30px 76px rgba(0, 47, 36, 0.2);
}

body[data-view="today"] .today-premium-shell .carousel-viewport,
body[data-view="today"] .today-premium-shell .carousel-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: inherit;
}

body[data-view="today"] .today-premium-shell .carousel-track {
  display: block;
  transform: none !important;
  transition: none;
  will-change: auto;
}

body[data-view="today"] .today-premium-shell .carousel-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(1.4rem, 3vw, 3.25rem);
  overflow: hidden;
  flex: none;
  opacity: 0;
  pointer-events: none;
  filter: none;
  transform: scale(1.012);
  transition:
    opacity 1000ms ease,
    transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

body[data-view="today"] .today-premium-shell .carousel-slide.active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

body[data-view="today"] .today-premium-shell .carousel-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 20%, rgba(246, 204, 101, 0.18), transparent 28rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 30%, rgba(255, 255, 255, 0.18) 52%, rgba(0, 75, 58, 0.32) 72%, rgba(0, 42, 33, 0.86) 100%);
}

body[data-view="today"] .today-premium-shell .slide-artwork.banner-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  opacity: 1;
}

body[data-view="today"] .today-premium-shell .slide-artwork.banner-art::after,
body[data-view="today"] .today-premium-shell .slide-artwork.banner-art .art-glow,
body[data-view="today"] .today-premium-shell .slide-artwork.banner-art .art-symbol {
  display: none;
}

body[data-view="today"] .today-premium-shell .slide-artwork.banner-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1.02);
  transition: transform 7000ms ease;
  backface-visibility: hidden;
}

body[data-view="today"] .today-premium-shell .carousel-slide.active .slide-artwork.banner-art img {
  transform: scale(1.06);
}

body[data-view="today"] .today-premium-shell .carousel-slide .carousel-copy {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(36rem, 42%);
  max-width: min(36rem, 100%);
  height: 100%;
  align-content: center;
  gap: 0.95rem;
  padding: clamp(0.25rem, 1vw, 1rem);
  color: #0a342b;
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(1.35rem) scale(0.985);
}

body[data-view="today"] .today-premium-shell .carousel-slide.active .carousel-copy {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  animation: todayHeroContentIn 920ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body[data-view="today"] .today-premium-shell .slide-number {
  display: inline-grid;
  width: max-content;
  min-width: 4.45rem;
  height: 2rem;
  padding: 0 0.72rem;
  place-items: center;
  border: 1px solid rgba(0, 84, 64, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #00513d;
  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0;
  box-shadow: 0 12px 26px rgba(0, 45, 35, 0.1);
  backdrop-filter: blur(14px);
}

body[data-view="today"] .today-premium-shell .carousel-copy .eyebrow {
  color: #00745b;
  font-weight: 1000;
  letter-spacing: 0;
  text-shadow: none;
}

body[data-view="today"] .today-premium-shell .carousel-copy h3 {
  max-width: 36rem;
  color: #0a251f;
  font-size: clamp(2.25rem, 3.85vw, 4.45rem);
  line-height: 1.02;
  letter-spacing: 0;
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.5);
}

body[data-view="today"] .today-premium-shell .carousel-copy p:not(.eyebrow) {
  max-width: 34rem;
  color: #173d34;
  font-size: clamp(0.98rem, 1.08vw, 1.18rem);
  line-height: 1.58;
}

body[data-view="today"] .today-premium-shell .scripture-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

body[data-view="today"] .today-premium-shell .scripture-pill {
  border: 1px solid rgba(0, 88, 67, 0.14);
  background: rgba(255, 255, 255, 0.62);
  color: #004b39;
  box-shadow: 0 10px 20px rgba(0, 45, 35, 0.08);
  backdrop-filter: blur(12px);
}

body[data-view="today"] .today-premium-shell .carousel-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.15rem;
}

body[data-view="today"] .today-premium-shell .carousel-cta-row .primary,
body[data-view="today"] .today-premium-shell .carousel-cta-row .secondary {
  min-height: 2.9rem;
  border-radius: 10px;
  padding: 0.86rem 1.18rem;
  font-weight: 950;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

body[data-view="today"] .today-premium-shell .carousel-cta-row .primary {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, #007a5f, #004736);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(0, 80, 62, 0.26);
}

body[data-view="today"] .today-premium-shell .carousel-cta-row .secondary {
  border: 1px solid rgba(0, 84, 64, 0.24);
  background: rgba(255, 255, 255, 0.64);
  color: #063f33;
  backdrop-filter: blur(14px);
}

body[data-view="today"] .today-premium-shell .carousel-cta-row .primary:hover,
body[data-view="today"] .today-premium-shell .carousel-cta-row .secondary:hover {
  transform: translateY(-2px);
}

body[data-view="today"] .today-premium-shell .carousel-cta-row .primary:focus-visible,
body[data-view="today"] .today-premium-shell .carousel-cta-row .secondary:focus-visible,
body[data-view="today"] .today-premium-shell .carousel-arrow:focus-visible,
body[data-view="today"] .today-premium-shell .carousel-dots button:focus-visible {
  outline: 3px solid rgba(246, 204, 101, 0.86);
  outline-offset: 3px;
}

body[data-view="today"] #promisePreviewRail {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-view="today"] .today-premium-shell .carousel-arrow {
  z-index: 8;
  top: 50%;
  width: 2.85rem;
  height: 2.85rem;
  border: 1px solid rgba(0, 79, 61, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: #004b3a;
  font-size: 1.25rem;
  box-shadow: 0 16px 36px rgba(0, 42, 31, 0.16);
  backdrop-filter: blur(14px);
  transform: translateY(-50%);
}

body[data-view="today"] .today-premium-shell .carousel-arrow.prev {
  left: 1rem;
}

body[data-view="today"] .today-premium-shell .carousel-arrow.next {
  right: 1rem;
}

body[data-view="today"] .today-premium-shell .carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.92);
  color: #00624b;
}

body[data-view="today"] .today-premium-shell .carousel-dots {
  z-index: 8;
  inset: auto auto 1.15rem 50%;
  display: flex;
  width: auto;
  gap: 0.45rem;
  justify-content: center;
  padding: 0.38rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(0, 50, 39, 0.22);
  box-shadow: 0 12px 28px rgba(0, 40, 31, 0.18);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}

body[data-view="today"] .today-premium-shell .carousel-dots button {
  width: 0.56rem;
  height: 0.56rem;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  transition:
    width 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

body[data-view="today"] .today-premium-shell .carousel-dots button.active {
  width: 2.25rem;
  background: #f2cc62;
  box-shadow: 0 0 18px rgba(242, 204, 98, 0.54);
}

@keyframes todayHeroContentIn {
  from {
    opacity: 0;
    transform: translateY(1.2rem) scale(0.985);
  }

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

@media (max-width: 1180px) {
  body[data-view="today"] .today-premium-shell .promise-carousel {
    height: clamp(33rem, 64vw, 43rem);
    min-height: clamp(33rem, 64vw, 43rem);
  }

  body[data-view="today"] .today-premium-shell .carousel-slide .carousel-copy {
    width: min(36rem, 62%);
  }

  body[data-view="today"] .today-premium-shell .carousel-slide::before {
    background:
      radial-gradient(circle at 72% 20%, rgba(246, 204, 101, 0.15), transparent 24rem),
      linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 36%, rgba(255, 255, 255, 0.16) 62%, rgba(0, 66, 51, 0.76) 100%);
  }
}

@media (max-width: 760px) {
  body[data-view="today"] .today-premium-shell .promise-carousel {
    height: clamp(39rem, 112vw, 45rem);
    min-height: clamp(39rem, 112vw, 45rem);
    border-radius: 14px;
  }

  body[data-view="today"] .today-premium-shell .carousel-slide {
    display: grid;
    align-items: end;
    padding: 1.1rem 1rem 4.35rem;
  }

  body[data-view="today"] .today-premium-shell .carousel-slide::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 35%, rgba(0, 44, 34, 0.9) 100%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(0, 68, 52, 0.52));
  }

  body[data-view="today"] .today-premium-shell .carousel-slide .carousel-copy {
    width: 100%;
    max-width: 100%;
    height: auto;
    align-content: end;
    gap: 0.72rem;
    padding: 0;
    color: #ffffff;
  }

  body[data-view="today"] .today-premium-shell .carousel-copy .eyebrow {
    color: #f2cc62;
  }

  body[data-view="today"] .today-premium-shell .carousel-copy h3 {
    max-width: 100%;
    color: #ffffff;
    font-size: clamp(2.35rem, 12vw, 3.7rem);
    line-height: 1;
    text-shadow: 0 10px 32px rgba(0, 25, 19, 0.56);
  }

  body[data-view="today"] .today-premium-shell .carousel-copy p:not(.eyebrow) {
    max-width: 100%;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.96rem;
  }

  body[data-view="today"] .today-premium-shell .scripture-pill {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }

  body[data-view="today"] .today-premium-shell .carousel-cta-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-view="today"] .today-premium-shell .carousel-cta-row .primary,
  body[data-view="today"] .today-premium-shell .carousel-cta-row .secondary {
    justify-content: center;
    width: 100%;
  }

  body[data-view="today"] .today-premium-shell .carousel-cta-row .secondary {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
  }

  body[data-view="today"] .today-premium-shell .carousel-arrow {
    width: 2.5rem;
    height: 2.5rem;
  }

  body[data-view="today"] .today-premium-shell .carousel-arrow.prev {
    left: 0.7rem;
  }

  body[data-view="today"] .today-premium-shell .carousel-arrow.next {
    right: 0.7rem;
  }

  body[data-view="today"] .today-premium-shell .carousel-dots {
    bottom: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="today"] .today-premium-shell .carousel-slide,
  body[data-view="today"] .today-premium-shell .slide-artwork.banner-art img,
body[data-view="today"] .today-premium-shell .carousel-slide.active .carousel-copy {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* Today TeoyubeWorld Search background artwork */
body[data-view="today"] .today-action-grid .search-promise-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(0, 102, 78, 0.13);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 48%, rgba(240, 251, 239, 0.72) 100%),
    url("public/images/today/teoyubeworld-search-bg.png") center / cover no-repeat;
  box-shadow: 0 18px 46px rgba(0, 76, 57, 0.1);
}

body[data-view="today"] .today-action-grid .search-promise-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 18%, rgba(134, 185, 74, 0.16), transparent 9rem),
    radial-gradient(circle at 82% 84%, rgba(0, 95, 69, 0.12), transparent 10rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.22));
}

body[data-view="today"] .today-action-grid .search-promise-card > * {
  position: relative;
  z-index: 1;
}

body[data-view="today"] .today-action-grid .search-promise-card h3 {
  color: #004f3c;
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.72);
}

body[data-view="today"] .today-action-grid .search-promise-card .promise-search-form input {
  border-color: rgba(0, 89, 67, 0.16);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 26px rgba(0, 66, 50, 0.08);
}

body[data-view="today"] .today-action-grid .search-promise-card .search-chip-row button {
  border-color: rgba(0, 91, 69, 0.14);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(0, 63, 47, 0.07);
  backdrop-filter: blur(10px);
}

/* TeoyubeWorld featured story carousel panel */
body[data-view="today"] .today-action-grid {
  grid-template-areas:
    "word assignment"
    "featured featured";
  grid-template-columns: minmax(16rem, 0.82fr) minmax(24rem, 1.18fr);
  align-items: stretch;
}

body[data-view="today"] .today-action-grid .word-card {
  grid-area: word;
}

body[data-view="today"] .today-action-grid .assignment-card {
  grid-area: assignment;
}

body[data-view="today"] .today-action-grid .teoyubeworld-featured-panel {
  grid-area: featured;
  position: relative;
  display: block !important;
  min-height: clamp(29rem, 34vw, 34rem) !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(0, 91, 70, 0.14);
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 226, 140, 0.32), transparent 14rem),
    linear-gradient(135deg, rgba(247, 253, 248, 0.96) 0%, rgba(236, 249, 241, 0.88) 46%, rgba(214, 236, 222, 0.88) 100%);
  box-shadow:
    0 28px 70px rgba(0, 61, 45, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body[data-view="today"] .teoyubeworld-featured-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.65) 38%, rgba(255, 255, 255, 0.12) 100%),
    url("public/images/today/teoyubeworld-search-bg.png") center / cover no-repeat;
  opacity: 0.44;
  pointer-events: none;
}

body[data-view="today"] .teoyubeworld-featured-panel::after {
  content: "";
  position: absolute;
  inset: auto -10% -26% 26%;
  z-index: 0;
  height: 18rem;
  background:
    radial-gradient(circle at 42% 24%, rgba(255, 220, 126, 0.72) 0 0.13rem, transparent 0.16rem),
    radial-gradient(circle at 66% 55%, rgba(255, 238, 174, 0.68) 0 0.1rem, transparent 0.13rem),
    linear-gradient(0deg, rgba(0, 92, 70, 0.14), rgba(255, 255, 255, 0));
  pointer-events: none;
}

body[data-view="today"] .featured-story-panel-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(24rem, 1.28fr);
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  min-height: inherit;
  padding: clamp(1rem, 1.8vw, 1.35rem);
}

body[data-view="today"] .featured-story-search-shell {
  display: grid;
  align-content: start;
  gap: 0.92rem;
  min-width: 0;
  padding: clamp(1rem, 1.7vw, 1.35rem);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 44px rgba(0, 62, 47, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body[data-view="today"] .featured-story-heading {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 0;
}

body[data-view="today"] .featured-story-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 211, 96, 0.72);
  border-radius: 999px;
  background: radial-gradient(circle at 34% 28%, #ffffff 0 0.35rem, #008264 0.38rem 100%);
  box-shadow: 0 12px 26px rgba(0, 87, 67, 0.2);
}

body[data-view="today"] .featured-story-brand-icon::before {
  content: "";
  width: 1.18rem;
  height: 1.18rem;
  background: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m16 16 4 4'/%3E%3Cpath d='M8.7 11.2 10.4 13l3.1-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m16 16 4 4'/%3E%3Cpath d='M8.7 11.2 10.4 13l3.1-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="today"] .teoyubeworld-featured-panel .featured-story-heading .eyebrow {
  margin: 0 0 0.22rem;
  color: #00634d;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

body[data-view="today"] .teoyubeworld-featured-panel .featured-story-heading .eyebrow::before,
body[data-view="today"] .teoyubeworld-featured-panel .featured-story-heading h3::before,
body[data-view="today"] .teoyubeworld-featured-panel .featured-story-copy h3::before {
  content: none !important;
  display: none !important;
}

body[data-view="today"] .teoyubeworld-featured-panel .featured-story-heading h3,
body[data-view="today"] .teoyubeworld-featured-panel .featured-story-copy h3 {
  display: block !important;
  margin: 0;
  color: #033f34;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: none;
}

body[data-view="today"] .teoyubeworld-featured-panel .featured-story-heading h3 {
  font-size: clamp(1.65rem, 2.8vw, 2.55rem);
}

body[data-view="today"] .featured-story-lede {
  max-width: 31rem;
  margin: 0;
  color: rgba(21, 42, 38, 0.76);
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.55;
}

body[data-view="today"] .teoyubeworld-featured-panel .promise-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.75rem;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 90, 69, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 30px rgba(0, 72, 55, 0.08);
}

body[data-view="today"] .teoyubeworld-featured-panel .promise-search-form label {
  display: none;
}

body[data-view="today"] .teoyubeworld-featured-panel .promise-search-form input {
  width: 100%;
  min-height: 3.45rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #173a34;
  font-size: 0.98rem;
}

body[data-view="today"] .teoyubeworld-featured-panel .promise-search-form input:focus {
  outline: 2px solid rgba(0, 117, 91, 0.24);
  outline-offset: -2px;
}

body[data-view="today"] .teoyubeworld-featured-panel #promiseMovieForm .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 3.45rem;
  border-radius: 0;
  background: linear-gradient(135deg, #006048, #008466);
  box-shadow: none;
}

body[data-view="today"] .teoyubeworld-featured-panel #promiseMovieForm .primary::before {
  content: "";
  width: 1.08rem;
  height: 1.08rem;
  background: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="today"] .teoyubeworld-featured-panel .search-chip-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
}

body[data-view="today"] .teoyubeworld-featured-panel .search-chip-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  min-height: 2.95rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: #005844;
  box-shadow: 0 12px 24px rgba(0, 66, 50, 0.07);
  font-size: 0.86rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body[data-view="today"] .teoyubeworld-featured-panel .search-chip-row button:hover,
body[data-view="today"] .teoyubeworld-featured-panel .search-chip-row button.active {
  background: #ffffff;
  box-shadow: 0 16px 30px rgba(0, 72, 55, 0.12);
  transform: translateY(-1px);
}

body[data-view="today"] .teoyubeworld-featured-panel #promiseMovieStatus {
  margin: 0;
  color: rgba(22, 45, 40, 0.74);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.45;
}

body[data-view="today"] .featured-story-carousel {
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 22px;
  background: #0a3f33;
  box-shadow: 0 22px 54px rgba(0, 57, 42, 0.18);
  outline: none;
}

body[data-view="today"] .featured-story-stage {
  position: absolute;
  inset: 0;
}

body[data-view="today"] .featured-story-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: end;
  padding: clamp(1rem, 2vw, 1.45rem);
  background:
    linear-gradient(90deg, rgba(0, 43, 33, 0.88) 0%, rgba(0, 59, 45, 0.56) 42%, rgba(0, 49, 37, 0.16) 100%),
    linear-gradient(0deg, rgba(0, 36, 28, 0.84) 0%, rgba(0, 36, 28, 0.14) 62%),
    var(--featured-image) center / cover no-repeat;
  opacity: 0;
  transform: translateX(1.2rem) scale(1.015);
  transition: opacity 420ms ease, transform 520ms ease;
}

body[data-view="today"] .featured-story-slide.active {
  z-index: 1;
  opacity: 1;
  transform: translateX(0) scale(1);
}

body[data-view="today"] .featured-story-copy {
  display: grid;
  gap: 0.78rem;
  max-width: min(34rem, 100%);
  padding: clamp(1rem, 1.8vw, 1.35rem);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(238, 249, 242, 0.72));
  box-shadow: 0 18px 42px rgba(0, 35, 27, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body[data-view="today"] .featured-story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.48rem;
  color: #005844;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-view="today"] .featured-story-meta span,
body[data-view="today"] .featured-story-meta time {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.32rem 0.58rem;
  border: 1px solid rgba(0, 99, 77, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
}

body[data-view="today"] .teoyubeworld-featured-panel .featured-story-copy h3 {
  color: #033d32;
  font-size: clamp(1.75rem, 2.4vw, 2.7rem);
}

body[data-view="today"] .featured-story-copy p {
  margin: 0;
  color: rgba(19, 38, 35, 0.78);
  font-size: clamp(0.95rem, 1vw, 1.08rem);
  font-weight: 650;
  line-height: 1.55;
}

body[data-view="today"] .featured-story-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.18rem;
}

body[data-view="today"] .featured-story-actions .primary,
body[data-view="today"] .featured-story-actions .secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 930;
  text-decoration: none;
}

body[data-view="today"] .featured-story-actions .primary {
  border: 0;
  background: linear-gradient(135deg, #006048, #008466);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(0, 80, 61, 0.22);
}

body[data-view="today"] .featured-story-actions .secondary {
  border: 1px solid rgba(0, 95, 74, 0.15);
  background: rgba(255, 255, 255, 0.78);
  color: #005844;
}

body[data-view="today"] .featured-story-controls {
  position: absolute;
  right: clamp(0.8rem, 1.5vw, 1.15rem);
  bottom: clamp(0.8rem, 1.5vw, 1.15rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0 14px 30px rgba(0, 35, 27, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body[data-view="today"] .featured-story-arrow {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #005844;
  box-shadow: 0 10px 20px rgba(0, 49, 37, 0.12);
  font-size: 1rem;
  font-weight: 950;
}

body[data-view="today"] .featured-story-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

body[data-view="today"] .featured-story-dots button {
  width: 1.35rem;
  height: 0.34rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: none;
  transition: width 180ms ease, background 180ms ease;
}

body[data-view="today"] .featured-story-dots button.active {
  width: 2.55rem;
  background: #f2c866;
}

body[data-view="today"] .featured-story-empty {
  display: grid;
  place-content: center;
  gap: 0.5rem;
  min-height: 100%;
  padding: 2rem;
  color: #ffffff;
  text-align: center;
}

@media (max-width: 1280px) {
  body[data-view="today"] .today-action-grid {
    grid-template-areas:
      "word assignment"
      "featured featured";
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="today"] .today-action-grid .teoyubeworld-featured-panel {
    min-height: clamp(27rem, 48vw, 33rem) !important;
  }
}

@media (max-width: 900px) {
  body[data-view="today"] .today-action-grid {
    grid-template-areas:
      "word"
      "assignment"
      "featured";
    grid-template-columns: 1fr;
  }

  body[data-view="today"] .featured-story-panel-inner {
    grid-template-columns: 1fr;
  }

  body[data-view="today"] .featured-story-carousel {
    min-height: 25rem;
  }

  body[data-view="today"] .featured-story-search-shell {
    align-content: start;
  }
}

@media (max-width: 620px) {
  body[data-view="today"] .today-action-grid .teoyubeworld-featured-panel {
    min-height: 0 !important;
  }

  body[data-view="today"] .featured-story-panel-inner {
    padding: 0.82rem;
  }

  body[data-view="today"] .featured-story-search-shell,
  body[data-view="today"] .featured-story-copy {
    border-radius: 16px;
  }

  body[data-view="today"] .teoyubeworld-featured-panel .search-chip-row {
    grid-template-columns: 1fr;
  }

  body[data-view="today"] .featured-story-carousel {
    min-height: 28rem;
  }

  body[data-view="today"] .featured-story-slide {
    align-items: stretch;
  }

  body[data-view="today"] .featured-story-copy {
    align-self: end;
  }

  body[data-view="today"] .featured-story-controls {
    left: 0.82rem;
    right: 0.82rem;
    justify-content: space-between;
  }

  body[data-view="today"] .featured-story-dots {
    max-width: 48%;
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  body[data-view="today"] .today-integrations,
  body[data-view="today"] .today-premium-shell .today-integrations {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-view="today"] .today-integrations > *,
  body[data-view="today"] .teoyube-promise-panel,
  body[data-view="today"] .clients-promise-card {
    min-width: 0 !important;
    width: 100%;
  }

  body[data-view="today"] .clients-promise-card {
    overflow: hidden;
  }

  body[data-view="today"] .clients-table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: auto;
  }
}

/* Today TeoyubeWorld premium YouTube highlight covering */
body[data-view="today"] .teoyube-promise-panel,
body[data-view="today"] .clients-promise-card {
  height: clamp(23.5rem, 28vw, 30rem) !important;
  min-height: clamp(23.5rem, 28vw, 30rem) !important;
  max-height: none !important;
}

body[data-view="today"] .promise-movie-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.78rem;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden;
  padding: clamp(1rem, 1.45vw, 1.35rem) !important;
  border: 1px solid rgba(255, 215, 118, 0.34);
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 62% 8%, rgba(255, 216, 111, 0.5), transparent 16rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(237, 248, 241, 0.9) 42%, rgba(5, 65, 49, 0.78) 100%);
  box-shadow:
    0 28px 70px rgba(0, 51, 39, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

body[data-view="today"] .promise-movie-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.64) 34%, rgba(255, 255, 255, 0.12) 67%, rgba(0, 47, 35, 0.26) 100%),
    radial-gradient(ellipse at 67% 11%, rgba(255, 214, 112, 0.56), transparent 22rem),
    url("public/images/search/teoyube-search-panel-bg.png") center right / cover no-repeat;
  filter: saturate(1.02) brightness(1.05);
  opacity: 0.9;
}

body[data-view="today"] .promise-movie-card::after {
  content: "";
  position: absolute;
  inset: -15% -6% auto 20%;
  z-index: -1;
  height: 70%;
  background:
    radial-gradient(circle at 42% 18%, rgba(255, 232, 160, 0.72) 0 0.12rem, transparent 0.14rem),
    radial-gradient(circle at 54% 42%, rgba(255, 246, 200, 0.58) 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 72% 30%, rgba(255, 220, 128, 0.5) 0 0.1rem, transparent 0.12rem),
    linear-gradient(115deg, rgba(255, 224, 134, 0.22), rgba(255, 255, 255, 0));
  opacity: 0.9;
  animation: teoyubeVideoLightDrift 8s ease-in-out infinite alternate;
  pointer-events: none;
}

body[data-view="today"] .promise-movie-card > .eyebrow {
  position: relative;
  z-index: 1;
  width: max-content;
  margin: 0;
  padding: 0.48rem 0.78rem;
  border: 1px solid rgba(255, 222, 131, 0.5);
  border-radius: 999px;
  background: rgba(0, 96, 72, 0.92);
  color: #fffdf4;
  box-shadow: 0 12px 26px rgba(0, 70, 52, 0.16);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

body[data-view="today"] .promise-movie-card > .eyebrow::before {
  content: "" !important;
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 999px;
  background: #f4cf72;
  box-shadow: 0 0 18px rgba(244, 207, 114, 0.72);
}

body[data-view="today"] .promise-movie-detail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(17rem, 1.15fr) minmax(13rem, 0.85fr) !important;
  align-items: stretch;
  min-height: 0;
  gap: clamp(0.9rem, 1.45vw, 1.25rem);
}

body[data-view="today"] .promise-video-thumbnail.promise-youtube-frame {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(16rem, 23vw, 24rem) !important;
  overflow: hidden;
  border: 1px solid rgba(255, 221, 134, 0.42);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 220, 120, 0.32), transparent 42%),
    linear-gradient(135deg, #062b23, #0a5d45 52%, #17361f);
  box-shadow:
    0 24px 58px rgba(0, 44, 33, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -4rem 8rem rgba(0, 31, 24, 0.18);
}

body[data-view="today"] .promise-video-thumbnail.promise-youtube-frame iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: clamp(16rem, 23vw, 24rem) !important;
  border: 0;
  border-radius: inherit;
  display: block;
}

body[data-view="today"] .promise-video-thumbnail.promise-youtube-frame::before {
  content: "TEACHING";
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 2;
  min-height: 2rem;
  padding: 0.42rem 0.78rem;
  border: 1px solid rgba(255, 220, 128, 0.42);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 113, 85, 0.94), rgba(0, 86, 65, 0.9));
  color: #fffdf4;
  box-shadow: 0 12px 26px rgba(0, 45, 34, 0.2);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  pointer-events: none;
}

body[data-view="today"] .promise-video-thumbnail.promise-youtube-frame::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 19%, rgba(255, 221, 121, 0.34), transparent 18%),
    linear-gradient(90deg, rgba(0, 29, 22, 0.36), transparent 28%, transparent 72%, rgba(0, 29, 22, 0.28)),
    linear-gradient(0deg, rgba(0, 22, 17, 0.42), transparent 34%, rgba(255, 239, 184, 0.1));
  opacity: 0.82;
  pointer-events: none;
}

body[data-view="today"] .promise-embed-play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: clamp(5rem, 7vw, 6.35rem) !important;
  height: clamp(5rem, 7vw, 6.35rem) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 2px solid rgba(255, 229, 151, 0.92) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.24), transparent 32%),
    linear-gradient(135deg, #008264, #005b46) !important;
  color: #ffffff !important;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 0.55rem rgba(255, 214, 116, 0.22),
    0 0 34px rgba(255, 220, 128, 0.48),
    0 22px 48px rgba(0, 45, 34, 0.38);
  animation: teoyubePlayPulse 2.6s ease-in-out infinite;
}

body[data-view="today"] .promise-embed-play-overlay::before {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border: 1px solid rgba(255, 229, 151, 0.45);
  border-radius: inherit;
}

body[data-view="today"] .promise-embed-play-overlay::after {
  content: "" !important;
  position: absolute;
  inset: -1.2rem;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(0, 130, 100, 0.22), transparent 67%);
  z-index: -1;
}

body[data-view="today"] .promise-embed-play-overlay span {
  display: grid;
  place-items: center;
  width: 1.52rem;
  height: 1.72rem;
  font-size: 0 !important;
  transform: translateX(0.12rem);
}

body[data-view="today"] .promise-embed-play-overlay span::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.86rem solid transparent;
  border-bottom: 0.86rem solid transparent;
  border-left: 1.28rem solid #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 34, 26, 0.22));
}

body[data-view="today"] .promise-embed-play-overlay:hover {
  transform: translate(-50%, -50%) scale(1.055);
  box-shadow:
    0 0 0 0.65rem rgba(255, 214, 116, 0.28),
    0 0 44px rgba(255, 220, 128, 0.58),
    0 26px 54px rgba(0, 45, 34, 0.42);
}

body[data-view="today"] .promise-embed-play-overlay:active {
  transform: translate(-50%, -50%) scale(0.96);
}

body[data-view="today"] .promise-video-copy {
  position: relative;
  isolation: isolate;
  align-content: center;
  gap: 0.78rem;
  min-width: 0;
  padding: clamp(1rem, 1.5vw, 1.35rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(238, 250, 242, 0.68));
  box-shadow: 0 18px 42px rgba(0, 48, 36, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body[data-view="today"] .promise-video-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(120deg, rgba(255, 231, 154, 0.34), transparent 34%),
    radial-gradient(circle at 96% 0%, rgba(0, 116, 88, 0.16), transparent 9rem);
  pointer-events: none;
}

body[data-view="today"] .promise-video-copy h3 {
  margin: 0;
  color: #043f34;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 1.55vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.12;
}

body[data-view="today"] .promise-video-copy .position-badge {
  border: 1px solid rgba(0, 97, 74, 0.12);
  background: rgba(255, 255, 255, 0.76);
  color: #006047;
  box-shadow: 0 8px 18px rgba(0, 64, 48, 0.08);
}

body[data-view="today"] .promise-video-copy p {
  margin: 0;
  color: rgba(21, 40, 37, 0.78);
  font-size: clamp(0.84rem, 0.95vw, 0.98rem);
  font-weight: 650;
  line-height: 1.5;
}

body[data-view="today"] .promise-video-actions {
  display: grid;
  gap: 0.65rem;
  justify-items: start;
  margin-top: 0.1rem;
}

body[data-view="today"] .watch-now-button {
  min-height: 2.75rem;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(255, 218, 129, 0.48);
  border-radius: 999px;
  background: linear-gradient(135deg, #006048, #008466);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(0, 74, 56, 0.2);
}

body[data-view="today"] .watch-now-button::after {
  color: #f5d36a;
}

body[data-view="today"] .promise-video-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
}

body[data-view="today"] .promise-video-nav-button {
  min-height: 2.45rem;
  padding: 0.62rem 0.88rem;
  border: 1px solid rgba(0, 93, 70, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: #005844 !important;
  box-shadow: 0 10px 22px rgba(0, 61, 45, 0.08) !important;
  font-size: 0.78rem;
  font-weight: 950;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body[data-view="today"] .promise-video-nav-button::after {
  content: none !important;
}

body[data-view="today"] .promise-video-nav-button:hover {
  background: #ffffff !important;
  box-shadow: 0 14px 28px rgba(0, 61, 45, 0.14) !important;
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  body[data-view="today"] .promise-movie-detail {
    grid-template-columns: 1fr !important;
  }

  body[data-view="today"] .promise-video-thumbnail.promise-youtube-frame,
  body[data-view="today"] .promise-video-thumbnail.promise-youtube-frame iframe {
    min-height: clamp(17rem, 42vw, 24rem) !important;
  }
}

@media (max-width: 900px) {
  body[data-view="today"] .teoyube-promise-panel,
  body[data-view="today"] .clients-promise-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body[data-view="today"] .promise-movie-card {
    grid-template-rows: auto auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body[data-view="today"] .promise-movie-detail {
    height: auto;
  }
}

@media (max-width: 620px) {
  body[data-view="today"] .promise-video-thumbnail.promise-youtube-frame,
  body[data-view="today"] .promise-video-thumbnail.promise-youtube-frame iframe {
    min-height: 15.5rem !important;
  }

  body[data-view="today"] .promise-embed-play-overlay {
    width: 4.85rem !important;
    height: 4.85rem !important;
  }
}

@keyframes teoyubePlayPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0.48rem rgba(255, 214, 116, 0.2),
      0 0 30px rgba(255, 220, 128, 0.42),
      0 20px 44px rgba(0, 45, 34, 0.34);
  }
  50% {
    box-shadow:
      0 0 0 0.78rem rgba(255, 214, 116, 0.1),
      0 0 46px rgba(255, 220, 128, 0.62),
      0 25px 56px rgba(0, 45, 34, 0.42);
  }
}

@keyframes teoyubeVideoLightDrift {
  from {
    transform: translate3d(-0.6rem, -0.2rem, 0);
    opacity: 0.72;
  }
  to {
    transform: translate3d(0.65rem, 0.28rem, 0);
    opacity: 0.96;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="today"] .promise-movie-card::after,
  body[data-view="today"] .promise-embed-play-overlay,
  body[data-view="today"] .promise-video-nav-button {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="today"] .featured-story-slide,
  body[data-view="today"] .featured-story-dots button,
  body[data-view="today"] .teoyubeworld-featured-panel .search-chip-row button {
    transition: none;
    transform: none;
  }
}

/* TeoyubeSearch page uploaded background */
body[data-view="search"] .search-jumbotron {
  background:
    linear-gradient(90deg, rgba(0, 42, 33, 0.94) 0%, rgba(0, 66, 51, 0.86) 38%, rgba(0, 78, 59, 0.34) 62%, rgba(0, 50, 39, 0.18) 100%),
    url("public/images/search/teoyube-search-panel-bg.png") center center / cover no-repeat;
}

body[data-view="search"] .search-jumbotron .search-form {
  backdrop-filter: blur(12px);
}

/* Calling Compass: trim Daily Inspiration card excess height */
body[data-view="calling"] .calling-daily-inspiration {
  align-self: start !important;
  align-content: start !important;
  min-height: 0 !important;
  gap: 0.48rem !important;
  padding: 0.82rem 0.95rem !important;
}

body[data-view="calling"] .calling-daily-inspiration h4 {
  line-height: 1.15;
}

body[data-view="calling"] .calling-daily-inspiration p {
  font-size: 0.84rem !important;
  line-height: 1.42 !important;
}

body[data-view="calling"] .calling-daily-inspiration strong {
  line-height: 1.15;
}

body[data-view="calling"] .calling-daily-inspiration .secondary {
  width: fit-content;
  min-height: 2.18rem;
  padding: 0.58rem 0.82rem;
  white-space: nowrap;
}

/* Calling Compass: premium Continue Watching and Kingdom Progress cards */
body[data-view="calling"] .calling-continue-card,
body[data-view="calling"] .calling-progress-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 0.92rem !important;
  padding: 1.15rem !important;
  border: 1px solid rgba(143, 255, 198, 0.22) !important;
  border-radius: 20px !important;
  color: #fff;
  box-shadow:
    0 24px 56px rgba(0, 38, 29, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-view="calling"] .calling-continue-card::before,
body[data-view="calling"] .calling-progress-card::before,
body[data-view="calling"] .calling-continue-card::after,
body[data-view="calling"] .calling-progress-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body[data-view="calling"] .calling-continue-card {
  background:
    linear-gradient(90deg, rgba(0, 37, 28, 0.98) 0%, rgba(0, 59, 44, 0.91) 46%, rgba(0, 42, 32, 0.42) 100%),
    url("public/images/today-carousel/today-carousel-07-live-promises.png") center right / cover no-repeat !important;
}

body[data-view="calling"] .calling-progress-card {
  background:
    linear-gradient(180deg, rgba(0, 38, 29, 0.92) 0%, rgba(0, 58, 43, 0.84) 46%, rgba(0, 34, 27, 0.96) 100%),
    url("public/images/today-carousel/today-carousel-04-canon.png") center / cover no-repeat !important;
}

body[data-view="calling"] .calling-continue-card::before {
  background:
    radial-gradient(circle at 84% 15%, rgba(255, 220, 105, 0.34), transparent 8rem),
    linear-gradient(180deg, transparent 38%, rgba(0, 26, 20, 0.76) 100%);
}

body[data-view="calling"] .calling-progress-card::before {
  background:
    radial-gradient(circle at 78% 12%, rgba(255, 221, 116, 0.28), transparent 9rem),
    linear-gradient(90deg, rgba(0, 47, 35, 0.88), rgba(0, 65, 48, 0.52), rgba(0, 34, 27, 0.83));
}

body[data-view="calling"] .calling-continue-card::after,
body[data-view="calling"] .calling-progress-card::after {
  content: none;
}

body[data-view="calling"] .calling-premium-card-head,
body[data-view="calling"] .calling-progress-heading,
body[data-view="calling"] .calling-progress-title {
  display: flex;
  align-items: center;
}

body[data-view="calling"] .calling-premium-card-head {
  gap: 0.85rem;
}

body[data-view="calling"] .calling-progress-title {
  justify-content: space-between;
  gap: 0.8rem;
}

body[data-view="calling"] .calling-progress-heading {
  gap: 0.75rem;
}

body[data-view="calling"] .calling-panel-icon {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  border: 1px solid rgba(255, 210, 100, 0.72);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 28%, rgba(255, 238, 159, 0.2), rgba(1, 93, 67, 0.38) 56%, rgba(0, 23, 17, 0.78));
  box-shadow:
    0 0 0 0.38rem rgba(113, 255, 176, 0.08),
    0 18px 36px rgba(0, 25, 18, 0.28);
}

body[data-view="calling"] .calling-play-icon::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.18rem;
  border-top: 0.48rem solid transparent;
  border-bottom: 0.48rem solid transparent;
  border-left: 0.72rem solid #f5c85f;
  filter: drop-shadow(0 0 8px rgba(245, 200, 95, 0.6));
}

body[data-view="calling"] .calling-crown-icon::before {
  content: "";
  width: 1.55rem;
  height: 1.18rem;
  background: linear-gradient(180deg, #fff1aa, #aef263);
  clip-path: polygon(0 100%, 0 42%, 24% 62%, 50% 5%, 76% 62%, 100% 42%, 100% 100%);
  filter: drop-shadow(0 0 9px rgba(184, 246, 99, 0.58));
}

body[data-view="calling"] .calling-continue-card h4,
body[data-view="calling"] .calling-progress-card h4,
body[data-view="calling"] .calling-continue-card p {
  margin: 0;
}

body[data-view="calling"] .calling-continue-card h4,
body[data-view="calling"] .calling-progress-card h4 {
  color: #fff !important;
  font-size: 1.35rem;
  line-height: 1.08;
  letter-spacing: 0;
}

body[data-view="calling"] .calling-continue-card h4 span,
body[data-view="calling"] .calling-progress-card h4 span,
body[data-view="calling"] .calling-progress-period {
  color: #b9f36a;
}

body[data-view="calling"] .calling-continue-card p {
  margin-top: 0.22rem;
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 0.94rem;
  font-weight: 800;
}

body[data-view="calling"] .calling-progress-period {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.38rem 0.68rem;
  border: 1px solid rgba(185, 243, 106, 0.2);
  border-radius: 999px;
  background: rgba(0, 39, 30, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 0.82rem;
  font-weight: 950;
}

body[data-view="calling"] .calling-progress-period::after {
  content: "";
  width: 0.82rem;
  height: 0.82rem;
  border: 2px solid currentColor;
  border-top-width: 0.3rem;
  border-radius: 3px;
  opacity: 0.9;
}

body[data-view="calling"] .calling-continue-row {
  grid-template-columns: 5.9rem minmax(0, 1fr) auto !important;
  gap: 0.78rem !important;
  min-width: 0;
  padding: 0.58rem;
  border: 1px solid rgba(120, 255, 187, 0.16);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  box-shadow:
    0 15px 30px rgba(0, 21, 16, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body[data-view="calling"] .calling-continue-row:hover {
  transform: translateY(-3px);
  border-color: rgba(185, 243, 106, 0.36);
  box-shadow:
    0 20px 38px rgba(0, 21, 16, 0.28),
    0 0 0 1px rgba(185, 243, 106, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-view="calling"] .calling-continue-row > .calling-continue-thumb {
  position: relative;
  width: 100%;
  height: 3.7rem !important;
  border: 1px solid rgba(161, 255, 203, 0.22);
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 20, 15, 0.38)),
    var(--thumb) center / cover no-repeat !important;
  box-shadow: 0 10px 20px rgba(0, 22, 16, 0.28);
  transition: transform 180ms ease;
}

body[data-view="calling"] .calling-continue-row:hover > .calling-continue-thumb {
  transform: scale(1.025);
}

body[data-view="calling"] .calling-continue-row > .calling-continue-thumb::after {
  content: "";
  position: absolute;
  right: 0.42rem;
  bottom: 0.38rem;
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 38%, rgba(255, 255, 255, 0.9) 38% 52%, transparent 52%),
    rgba(0, 40, 30, 0.72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

body[data-view="calling"] .calling-continue-row > div {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

body[data-view="calling"] .calling-continue-row strong {
  overflow: hidden;
  color: #fff !important;
  font-size: 0.96rem !important;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="calling"] .calling-continue-row small {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.78rem !important;
}

body[data-view="calling"] .calling-watch-bar,
body[data-view="calling"] .calling-watch-bar span {
  display: block;
  height: 0.42rem !important;
  border-radius: 999px !important;
}

body[data-view="calling"] .calling-watch-bar {
  width: 100%;
  overflow: hidden;
  background: rgba(177, 238, 158, 0.24);
}

body[data-view="calling"] .calling-watch-bar span {
  width: var(--watch-progress);
  background: linear-gradient(90deg, #baf56c, #77dc53);
  box-shadow: 0 0 13px rgba(158, 244, 86, 0.48);
  animation: calling-progress-fill 900ms ease both;
}

body[data-view="calling"] .calling-continue-row b {
  align-self: center;
  color: #b9f36a !important;
  font-size: 1.06rem !important;
  font-weight: 950;
  text-shadow: 0 0 18px rgba(185, 243, 106, 0.28);
}

body[data-view="calling"] .calling-continue-card .secondary,
body[data-view="calling"] .calling-progress-card .primary {
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  align-items: center;
  justify-content: center;
  gap: 0.72rem;
  width: 100%;
  min-height: 3.25rem !important;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(137, 255, 184, 0.28) !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, rgba(36, 158, 72, 0.98), rgba(0, 105, 75, 0.98)) !important;
  color: #fff !important;
  box-shadow:
    0 15px 30px rgba(0, 30, 23, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-weight: 950;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

body[data-view="calling"] .calling-continue-card .secondary:hover,
body[data-view="calling"] .calling-progress-card .primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 38px rgba(0, 30, 23, 0.38),
    0 0 0 1px rgba(185, 243, 106, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body[data-view="calling"] .calling-button-grid {
  width: 1rem;
  height: 1rem;
  background:
    linear-gradient(currentColor 0 0) left top / 0.38rem 0.38rem no-repeat,
    linear-gradient(currentColor 0 0) right top / 0.38rem 0.38rem no-repeat,
    linear-gradient(currentColor 0 0) left bottom / 0.38rem 0.38rem no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 0.38rem 0.38rem no-repeat;
  opacity: 0.92;
}

body[data-view="calling"] .calling-button-arrow {
  width: 0.72rem;
  height: 0.72rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

body[data-view="calling"] .calling-progress-button-icon {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: conic-gradient(from 90deg, currentColor 0 72%, rgba(255, 255, 255, 0.22) 72% 100%);
}

body[data-view="calling"] .calling-progress-button-icon::after {
  content: "";
  position: absolute;
  inset: 0.34rem;
  border-radius: 999px;
  background: rgba(0, 100, 72, 0.95);
}

body[data-view="calling"] .calling-progress-grid {
  grid-template-columns: repeat(3, minmax(6.2rem, 1fr)) !important;
  gap: 0.65rem !important;
}

body[data-view="calling"] .calling-progress-metric {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.18rem 0.48rem !important;
  align-items: center;
  min-width: 0;
  padding: 0.78rem !important;
  border: 1px solid rgba(170, 255, 205, 0.18) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)) !important;
  box-shadow:
    0 17px 32px rgba(0, 20, 15, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body[data-view="calling"] .calling-progress-metric:hover {
  transform: translateY(-3px);
  border-color: rgba(185, 243, 106, 0.32) !important;
  box-shadow:
    0 21px 40px rgba(0, 20, 15, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body[data-view="calling"] .calling-metric-icon {
  position: relative;
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid rgba(185, 243, 106, 0.2);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(137, 244, 91, 0.2), rgba(16, 110, 48, 0.46));
  box-shadow:
    inset 0 0 0 0.28rem rgba(135, 234, 94, 0.07),
    0 12px 24px rgba(0, 21, 16, 0.2);
}

body[data-view="calling"] .metric-videos .calling-metric-icon::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.12rem;
  border-top: 0.42rem solid transparent;
  border-bottom: 0.42rem solid transparent;
  border-left: 0.66rem solid #baf56c;
}

body[data-view="calling"] .metric-prayers .calling-metric-icon::before,
body[data-view="calling"] .metric-prayers .calling-metric-icon::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 1.15rem;
  border: 2px solid #baf56c;
  border-radius: 999px 999px 0.28rem 0.28rem;
  transform-origin: bottom center;
}

body[data-view="calling"] .metric-prayers .calling-metric-icon::before {
  transform: rotate(-28deg);
}

body[data-view="calling"] .metric-prayers .calling-metric-icon::after {
  transform: rotate(28deg);
}

body[data-view="calling"] .metric-scriptures .calling-metric-icon::before {
  content: "";
  width: 1.25rem;
  height: 0.98rem;
  border: 2px solid #baf56c;
  border-radius: 0.18rem;
  background:
    linear-gradient(90deg, transparent 47%, #baf56c 47% 53%, transparent 53%),
    rgba(185, 243, 106, 0.06);
}

body[data-view="calling"] .calling-progress-metric strong {
  color: #fff !important;
  font-size: clamp(1.7rem, 4vw, 2.35rem) !important;
  line-height: 1;
  letter-spacing: 0;
}

body[data-view="calling"] .calling-progress-metric > span:not(.calling-metric-icon) {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.76rem !important;
  font-weight: 850;
  line-height: 1.18;
}

body[data-view="calling"] .calling-progress-metric small {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #9df45a !important;
  font-size: 0.88rem !important;
  font-weight: 950;
}

body[data-view="calling"] .calling-progress-metric small span {
  width: 0;
  height: 0;
  border-left: 0.24rem solid transparent;
  border-right: 0.24rem solid transparent;
  border-bottom: 0.38rem solid currentColor;
}

body[data-view="calling"] .calling-sparkline {
  position: relative;
  grid-column: 1 / -1;
  display: block;
  height: 2.2rem;
  margin-top: 0.15rem;
  overflow: hidden;
}

body[data-view="calling"] .calling-sparkline::before {
  content: "";
  position: absolute;
  inset: 0.2rem 0 0;
  background:
    linear-gradient(180deg, transparent 49%, rgba(185, 243, 106, 0.14) 50%, transparent 51%),
    linear-gradient(90deg, rgba(185, 243, 106, 0.1), transparent);
  opacity: 0.8;
}

body[data-view="calling"] .calling-sparkline::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  bottom: 0.48rem;
  height: 1.05rem;
  border-bottom: 2px dotted rgba(141, 237, 83, 0.82);
  transform: skewY(-13deg);
  transform-origin: left bottom;
}

body[data-view="calling"] .calling-sparkline span {
  position: absolute;
  z-index: 1;
  width: 0.32rem;
  height: 0.32rem !important;
  border-radius: 999px !important;
  background: #9df45a !important;
  box-shadow: 0 0 10px rgba(157, 244, 90, 0.72);
}

body[data-view="calling"] .calling-sparkline span:nth-child(1) { left: 5%; bottom: 18%; }
body[data-view="calling"] .calling-sparkline span:nth-child(2) { left: 22%; bottom: 38%; }
body[data-view="calling"] .calling-sparkline span:nth-child(3) { left: 39%; bottom: 32%; }
body[data-view="calling"] .calling-sparkline span:nth-child(4) { left: 56%; bottom: 48%; }
body[data-view="calling"] .calling-sparkline span:nth-child(5) { left: 73%; bottom: 42%; }
body[data-view="calling"] .calling-sparkline span:nth-child(6) { left: 90%; bottom: 68%; }

body[data-view="calling"] .sparkline-b span:nth-child(2) { bottom: 28%; }
body[data-view="calling"] .sparkline-b span:nth-child(4) { bottom: 31%; }
body[data-view="calling"] .sparkline-b span:nth-child(5) { bottom: 55%; }
body[data-view="calling"] .sparkline-b span:nth-child(6) { bottom: 76%; }

body[data-view="calling"] .sparkline-c span:nth-child(2) { bottom: 44%; }
body[data-view="calling"] .sparkline-c span:nth-child(3) { bottom: 24%; }
body[data-view="calling"] .sparkline-c span:nth-child(4) { bottom: 46%; }
body[data-view="calling"] .sparkline-c span:nth-child(5) { bottom: 58%; }
body[data-view="calling"] .sparkline-c span:nth-child(6) { bottom: 74%; }

@keyframes calling-progress-fill {
  from { transform: scaleX(0); transform-origin: left center; }
  to { transform: scaleX(1); transform-origin: left center; }
}

@media (max-width: 720px) {
  body[data-view="calling"] .calling-continue-row {
    grid-template-columns: 5.2rem minmax(0, 1fr) auto !important;
  }

  body[data-view="calling"] .calling-progress-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Calling Compass: uploaded AI Calling Assistant emblem */
body[data-view="calling"] .calling-assistant-panel {
  isolation: isolate;
}

body[data-view="calling"] .calling-assistant-panel > * {
  position: relative;
  z-index: 1;
}

body[data-view="calling"] .calling-assistant-panel::after {
  content: "";
  position: absolute;
  top: 0.72rem !important;
  right: 0.78rem !important;
  z-index: 0;
  width: 4.35rem !important;
  height: 4.35rem !important;
  border: 2px solid rgba(255, 232, 139, 0.86);
  border-radius: 999px;
  background: url("public/images/calling/ai-calling-assistant-icon.png") center / cover no-repeat !important;
  box-shadow:
    0 16px 30px rgba(0, 61, 45, 0.18),
    0 0 0 0.35rem rgba(0, 114, 80, 0.08);
  pointer-events: none;
}

/* Calling Compass: premium Divine Calling Compass panel */
body[data-view="calling"] .calling-compass-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 0.85rem !important;
  min-height: 35rem;
  padding: 1rem !important;
  border: 1px solid rgba(255, 222, 118, 0.24) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 85% 8%, rgba(255, 223, 118, 0.22), transparent 10rem),
    linear-gradient(90deg, rgba(0, 26, 20, 0.98) 0%, rgba(0, 47, 35, 0.92) 48%, rgba(0, 35, 28, 0.45) 100%),
    url("public/images/today-carousel/today-carousel-12-overlook.png") center / cover no-repeat !important;
  box-shadow:
    0 26px 56px rgba(0, 34, 27, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body[data-view="calling"] .calling-compass-panel::before,
body[data-view="calling"] .calling-compass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body[data-view="calling"] .calling-compass-panel::before {
  background:
    radial-gradient(circle at 50% 52%, rgba(190, 255, 160, 0.13), transparent 13rem),
    radial-gradient(circle at 92% 20%, rgba(255, 217, 105, 0.2), transparent 9rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 25, 19, 0.72));
}

body[data-view="calling"] .calling-compass-panel::after {
  inset: 0.05rem;
  border: 1px solid rgba(126, 255, 185, 0.13);
  border-radius: inherit;
  box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.28);
}

body[data-view="calling"] .calling-compass-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
}

body[data-view="calling"] .calling-compass-head-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.05rem;
  height: 3.05rem;
  border: 1px solid rgba(255, 223, 118, 0.7);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 206, 0.26), transparent 28%),
    linear-gradient(145deg, rgba(13, 127, 88, 0.64), rgba(0, 24, 18, 0.86));
  box-shadow:
    0 0 0 0.34rem rgba(185, 243, 106, 0.08),
    0 14px 28px rgba(0, 27, 20, 0.28);
}

body[data-view="calling"] .calling-compass-head-icon::before,
body[data-view="calling"] .compass-button-icon::before {
  content: "";
  width: 1.35rem;
  height: 1.35rem;
  background: linear-gradient(180deg, #fff4b5, #f0bf49);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 4 6-4 14-4-14 4-6Z'/%3E%3Cpath d='m12 2 2 9-8 3 6-12Z'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 4 6-4 14-4-14 4-6Z'/%3E%3Cpath d='m12 2 2 9-8 3 6-12Z'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="calling"] .calling-compass-head h4 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  line-height: 1.05;
}

body[data-view="calling"] .calling-compass-head h4 span {
  color: #b9f36a;
}

body[data-view="calling"] .calling-compass-head p {
  max-width: 23rem;
  margin: 0.3rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}

body[data-view="calling"] .calling-radar {
  position: relative !important;
  z-index: 2;
  display: block !important;
  height: clamp(24rem, 38vw, 28rem);
  min-height: 24rem !important;
  margin: -0.1rem 0 0;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.16), transparent 16rem),
    linear-gradient(180deg, rgba(0, 70, 52, 0.05), rgba(0, 20, 16, 0.08)) !important;
}

body[data-view="calling"] .calling-radar::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(19rem, 75%);
  height: min(19rem, 75%);
  border: 1px solid rgba(255, 222, 118, 0.26) !important;
  border-radius: 999px !important;
  background:
    repeating-radial-gradient(circle, transparent 0 17%, rgba(255, 222, 118, 0.16) 17.4% 17.8%, transparent 18.2% 34%),
    conic-gradient(from 0deg, transparent, rgba(255, 222, 118, 0.2), transparent, rgba(126, 255, 185, 0.15), transparent) !important;
  box-shadow:
    inset 0 0 42px rgba(126, 255, 185, 0.08),
    0 0 38px rgba(255, 222, 118, 0.14);
  transform: translate(-50%, -50%);
  animation: calling-compass-spin 44s linear infinite;
}

body[data-view="calling"] .calling-radar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(19.5rem, 78%);
  height: min(19.5rem, 78%);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 2%, rgba(255, 222, 118, 0.42) 49.4%, rgba(255, 244, 180, 0.74) 50%, rgba(255, 222, 118, 0.42) 50.6%, transparent 98%),
    linear-gradient(0deg, transparent 2%, rgba(255, 222, 118, 0.38) 49.4%, rgba(255, 244, 180, 0.7) 50%, rgba(255, 222, 118, 0.38) 50.6%, transparent 98%),
    linear-gradient(45deg, transparent 9%, rgba(255, 222, 118, 0.3) 49.6%, rgba(255, 244, 180, 0.55) 50%, rgba(255, 222, 118, 0.3) 50.4%, transparent 91%),
    linear-gradient(-45deg, transparent 9%, rgba(255, 222, 118, 0.3) 49.6%, rgba(255, 244, 180, 0.55) 50%, rgba(255, 222, 118, 0.3) 50.4%, transparent 91%);
  opacity: 0.56;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body[data-view="calling"] .calling-radar .compass-center {
  position: absolute !important;
  left: 50%;
  top: 51%;
  z-index: 3;
  display: grid !important;
  place-items: center;
  width: 8.1rem !important;
  height: 8.1rem !important;
  padding: 1rem;
  border: 1px solid rgba(255, 222, 118, 0.54);
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 238, 155, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(0, 79, 57, 0.98), rgba(0, 22, 17, 0.98)) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 1.1rem rgba(126, 255, 185, 0.07),
    0 0 34px rgba(255, 222, 118, 0.2),
    inset 0 0 32px rgba(0, 0, 0, 0.24);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: calling-center-breathe 4.8s ease-in-out infinite;
}

body[data-view="calling"] .calling-radar .compass-center::before {
  content: "";
  position: absolute;
  inset: -0.75rem;
  border: 1px dashed rgba(255, 222, 118, 0.34);
  border-radius: inherit;
  animation: calling-compass-spin 32s linear infinite reverse;
}

body[data-view="calling"] .calling-radar .compass-center i,
body[data-view="calling"] .calling-radar .compass-center span,
body[data-view="calling"] .calling-radar .compass-center small {
  position: static !important;
  z-index: 1;
  display: block;
}

body[data-view="calling"] .calling-radar .compass-center i {
  width: 2rem;
  height: 1.65rem;
  margin-bottom: 0.25rem;
  background: linear-gradient(180deg, #fff6bd, #dba63a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6c-3.2-3-6.5-3.5-10-2v15c3.5-1.5 6.8-1 10 2V6Z'/%3E%3Cpath d='M14 6c3.2-3 6.5-3.5 10-2v15c-3.5-1.5-6.8-1-10 2V6Z'/%3E%3Cpath d='M14 3v18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6c-3.2-3-6.5-3.5-10-2v15c3.5-1.5 6.8-1 10 2V6Z'/%3E%3Cpath d='M14 6c3.2-3 6.5-3.5 10-2v15c-3.5-1.5-6.8-1-10 2V6Z'/%3E%3Cpath d='M14 3v18'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 9px rgba(255, 222, 118, 0.55));
}

body[data-view="calling"] .calling-radar .compass-center span {
  color: #fff !important;
  font-size: 1.52rem;
  font-weight: 950;
  line-height: 1.05;
}

body[data-view="calling"] .calling-radar .compass-center small {
  max-width: 6.2rem;
  margin-top: 0.34rem;
  color: #c8ff85;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.25;
}

body[data-view="calling"] .calling-radar .compass-node {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4;
  display: grid !important;
  justify-items: center;
  width: 7.1rem;
  color: rgba(255, 255, 255, 0.9) !important;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, filter 180ms ease;
}

body[data-view="calling"] .calling-radar .compass-node:hover,
body[data-view="calling"] .calling-radar .compass-node:focus-visible {
  filter: drop-shadow(0 0 15px rgba(255, 222, 118, 0.34));
  outline: none;
  transform: translate(-50%, -50%) scale(1.035);
}

body[data-view="calling"] .calling-radar .compass-node::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  left: 50%;
  top: calc(100% + 0.35rem);
  z-index: 20;
  width: max-content;
  max-width: 11rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(255, 222, 118, 0.32);
  border-radius: 10px;
  background: rgba(0, 32, 24, 0.92);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.26);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
  opacity: 0;
  transform: translate(-50%, -0.25rem);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

body[data-view="calling"] .calling-radar .compass-node:hover::after,
body[data-view="calling"] .calling-radar .compass-node:focus-visible::after {
  display: block;
  opacity: 1;
  transform: translate(-50%, 0);
}

body[data-view="calling"] .compass-node i {
  position: relative !important;
  display: grid !important;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 0.38rem;
  border: 1px solid rgba(255, 222, 118, 0.72);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 244, 180, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(0, 75, 55, 0.92), rgba(0, 22, 17, 0.94));
  box-shadow:
    0 10px 20px rgba(0, 17, 12, 0.32),
    0 0 16px rgba(255, 222, 118, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
}

body[data-view="calling"] .compass-node i::before {
  content: "";
  width: 1.55rem;
  height: 1.55rem;
  background: linear-gradient(180deg, #fff4b5, #f0bf49);
  -webkit-mask: var(--compass-node-icon) center / contain no-repeat;
  mask: var(--compass-node-icon) center / contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(255, 222, 118, 0.48));
}

body[data-view="calling"] .compass-node em,
body[data-view="calling"] .compass-node small {
  position: static !important;
  display: block;
}

body[data-view="calling"] .compass-node em {
  color: #fff !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
}

body[data-view="calling"] .compass-node small {
  margin-top: 0.18rem;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.28;
}

body[data-view="calling"] .compass-node small::after {
  content: "";
  display: block;
  width: 1.35rem;
  height: 2px;
  margin: 0.38rem auto 0;
  border-radius: 999px;
  background: #f0bf49;
  box-shadow: 0 0 10px rgba(240, 191, 73, 0.42);
}

body[data-view="calling"] .compass-node.purpose {
  left: 50%;
  top: 8%;
  --compass-node-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='m16.5 7.5 3-3M18 4.5h1.5V6'/%3E%3Cpath d='M12 12 19 5'/%3E%3C/svg%3E");
}

body[data-view="calling"] .compass-node.identity {
  left: 83.5%;
  top: 28%;
  --compass-node-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 21a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
}

body[data-view="calling"] .compass-node.giftings {
  left: 83%;
  top: 68%;
  --compass-node-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='9' width='16' height='11' rx='1.5'/%3E%3Cpath d='M12 9v11M4 13h16M8.5 9C6 7 7.4 4.5 10 6.2L12 9l2-2.8c2.6-1.7 4 0.8 1.5 2.8'/%3E%3C/svg%3E");
}

body[data-view="calling"] .compass-node.service {
  left: 21%;
  top: 68%;
  --compass-node-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 12v8M17 12v8M12 9v11'/%3E%3Cpath d='M4 11c2 1 4 3 4 6M20 11c-2 1-4 3-4 6'/%3E%3Cpath d='M12 9c-2-1-3-3-3-5 2 .5 3 2 3 5Zm0 0c2-1 3-3 3-5-2 .5-3 2-3 5Z'/%3E%3C/svg%3E");
}

body[data-view="calling"] .compass-node.prayer {
  left: 50%;
  top: 86%;
  --compass-node-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 3c2 3 3.5 7 3.5 13v5M15.5 3c-2 3-3.5 7-3.5 13'/%3E%3Cpath d='M7 10 4 16c-.6 1.2.3 2.7 1.7 2.7H12M17 10l3 6c.6 1.2-.3 2.7-1.7 2.7H12'/%3E%3C/svg%3E");
}

body[data-view="calling"] .compass-node.leadership {
  left: 16.5%;
  top: 50%;
  --compass-node-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Ccircle cx='5.5' cy='10' r='2.2'/%3E%3Ccircle cx='18.5' cy='10' r='2.2'/%3E%3Cpath d='M4 20c.5-4 4-6 8-6s7.5 2 8 6M2 20c.3-2.2 1.8-3.8 4-4.5M22 20c-.3-2.2-1.8-3.8-4-4.5'/%3E%3C/svg%3E");
}

body[data-view="calling"] .compass-node.wisdom {
  left: 21%;
  top: 29%;
  --compass-node-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18h6M10 22h4M8 14c-2-1.6-3-3.7-3-6a7 7 0 1 1 14 0c0 2.3-1 4.4-3 6-.8.6-1 1.2-1 2H9c0-.8-.2-1.4-1-2Z'/%3E%3C/svg%3E");
}

body[data-view="calling"] .calling-compass-panel .secondary {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.1rem !important;
  padding: 0.78rem 1rem;
  border: 1px solid rgba(255, 222, 118, 0.32) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 222, 118, 0.17), transparent 7rem),
    linear-gradient(135deg, rgba(0, 104, 75, 0.98), rgba(0, 47, 36, 0.98)) !important;
  color: #fff !important;
  box-shadow:
    0 16px 30px rgba(0, 20, 15, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-size: 0.98rem;
  font-weight: 950;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

body[data-view="calling"] .calling-compass-panel .secondary:hover,
body[data-view="calling"] .calling-compass-panel .secondary:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 222, 118, 0.56) !important;
  box-shadow:
    0 20px 38px rgba(0, 20, 15, 0.36),
    0 0 0 1px rgba(185, 243, 106, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body[data-view="calling"] .compass-button-icon {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid rgba(255, 222, 118, 0.7);
  border-radius: 999px;
}

body[data-view="calling"] .compass-button-icon::before {
  width: 0.82rem;
  height: 0.82rem;
}

body[data-view="calling"] .compass-button-arrow {
  width: 0.74rem;
  height: 0.74rem;
  border-top: 2px solid #ffe58d;
  border-right: 2px solid #ffe58d;
  transform: rotate(45deg);
}

@keyframes calling-compass-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes calling-center-breathe {
  0%, 100% { box-shadow: 0 0 0 1.1rem rgba(126, 255, 185, 0.07), 0 0 30px rgba(255, 222, 118, 0.18), inset 0 0 32px rgba(0, 0, 0, 0.24); }
  50% { box-shadow: 0 0 0 1.35rem rgba(126, 255, 185, 0.1), 0 0 44px rgba(255, 222, 118, 0.3), inset 0 0 36px rgba(0, 0, 0, 0.2); }
}

@media (max-width: 720px) {
  body[data-view="calling"] .calling-compass-panel {
    min-height: 0;
    padding: 0.9rem !important;
  }

  body[data-view="calling"] .calling-radar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.62rem;
    height: auto;
    min-height: 0 !important;
  }

  body[data-view="calling"] .calling-radar::before,
  body[data-view="calling"] .calling-radar::after {
    display: none;
  }

  body[data-view="calling"] .calling-radar .compass-center,
  body[data-view="calling"] .calling-radar .compass-node {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    transform: none !important;
  }

  body[data-view="calling"] .calling-radar .compass-center {
    grid-column: 1 / -1;
    justify-self: center;
    width: 8rem !important;
    height: 8rem !important;
    margin: 0.3rem 0;
  }

  body[data-view="calling"] .calling-radar .compass-node {
    grid-template-columns: 2.8rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: start;
    align-items: center;
    gap: 0 0.58rem;
    padding: 0.58rem;
    border: 1px solid rgba(255, 222, 118, 0.15);
    border-radius: 12px;
    background: rgba(0, 40, 30, 0.5);
    text-align: left;
  }

  body[data-view="calling"] .compass-node i {
    grid-row: 1 / span 2;
    margin: 0;
  }

  body[data-view="calling"] .compass-node small::after {
    margin-left: 0;
    margin-right: 0;
  }

  body[data-view="calling"] .calling-radar .compass-node::after {
    display: none;
  }
}

/* Calling Compass: keep the premium compass aligned with the featured video row. */
@media (min-width: 901px) {
  body[data-view="calling"] .calling-compass-panel {
    min-height: 0 !important;
    gap: 0.58rem !important;
    padding: 0.78rem !important;
  }

  body[data-view="calling"] .calling-compass-head {
    grid-template-columns: 2.45rem minmax(0, 1fr) !important;
    gap: 0.55rem !important;
  }

  body[data-view="calling"] .calling-compass-head-icon {
    width: 2.3rem !important;
    height: 2.3rem !important;
  }

  body[data-view="calling"] .calling-compass-head h4 {
    font-size: 1rem !important;
  }

  body[data-view="calling"] .calling-compass-head p {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  body[data-view="calling"] .calling-radar {
    height: clamp(15.5rem, 21.5vw, 17.8rem) !important;
    min-height: 15.5rem !important;
    margin-top: 0 !important;
  }

  body[data-view="calling"] .calling-radar::before {
    width: min(10.7rem, 66%) !important;
    height: min(10.7rem, 66%) !important;
  }

  body[data-view="calling"] .calling-radar::after {
    width: min(11.1rem, 69%) !important;
    height: min(11.1rem, 69%) !important;
  }

  body[data-view="calling"] .calling-radar .compass-center {
    width: 4.9rem !important;
    height: 4.9rem !important;
    padding: 0.55rem !important;
  }

  body[data-view="calling"] .calling-radar .compass-center i {
    width: 1.18rem !important;
    height: 0.98rem !important;
    margin-bottom: 0.12rem !important;
  }

  body[data-view="calling"] .calling-radar .compass-center span {
    font-size: 0.9rem !important;
  }

  body[data-view="calling"] .calling-radar .compass-center small {
    max-width: 4rem !important;
    margin-top: 0.15rem !important;
    font-size: 0.52rem !important;
    line-height: 1.15 !important;
  }

  body[data-view="calling"] .calling-radar .compass-node {
    width: 5.15rem !important;
  }

  body[data-view="calling"] .compass-node i {
    width: 2rem !important;
    height: 2rem !important;
    margin-bottom: 0.16rem !important;
  }

  body[data-view="calling"] .compass-node i::before {
    width: 1rem !important;
    height: 1rem !important;
  }

  body[data-view="calling"] .compass-node em {
    font-size: 0.64rem !important;
  }

  body[data-view="calling"] .compass-node small {
    display: none !important;
  }

  body[data-view="calling"] .compass-node.purpose {
    top: 8% !important;
  }

  body[data-view="calling"] .compass-node.identity {
    left: 83% !important;
    top: 28% !important;
  }

  body[data-view="calling"] .compass-node.giftings {
    left: 83% !important;
    top: 67% !important;
  }

  body[data-view="calling"] .compass-node.service {
    left: 18% !important;
    top: 67% !important;
  }

  body[data-view="calling"] .compass-node.prayer {
    top: 85% !important;
  }

  body[data-view="calling"] .compass-node.leadership {
    left: 16.5% !important;
    top: 51% !important;
  }

  body[data-view="calling"] .compass-node.wisdom {
    left: 18% !important;
    top: 29% !important;
  }

  body[data-view="calling"] .calling-compass-panel .secondary {
    min-height: 2.28rem !important;
    padding: 0.5rem 0.78rem !important;
    border-radius: 11px !important;
    font-size: 0.8rem !important;
  }

  body[data-view="calling"] .compass-button-icon {
    width: 1.05rem !important;
    height: 1.05rem !important;
  }

  body[data-view="calling"] .compass-button-icon::before {
    width: 0.62rem !important;
    height: 0.62rem !important;
  }
}

/* Calling Compass: align compass panel base with Featured Video on desktop. */
@media (min-width: 901px) {
  body[data-view="calling"] .calling-content-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.62fr) minmax(18rem, 0.92fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "video assistant"
      "video compass" !important;
    align-items: stretch !important;
    min-height: 0 !important;
  }

  body[data-view="calling"] .calling-featured-video {
    grid-area: video !important;
    width: auto !important;
    align-self: stretch !important;
  }

  body[data-view="calling"] .calling-assistant-panel,
  body[data-view="calling"] .calling-compass-panel {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
  }

  body[data-view="calling"] .calling-assistant-panel {
    grid-area: assistant !important;
    align-self: start !important;
  }

  body[data-view="calling"] .calling-compass-panel {
    grid-area: compass !important;
    align-self: stretch !important;
    min-height: 0 !important;
  }
}

/* Premium interactive card motion layer */
@media (hover: hover) and (pointer: fine) {
  body :is(
    .module-card,
    .promise-detail-card,
    .promise-movie-card,
    .promise-search-item,
    .promise-video-panel,
    .search-result-card,
    .roadmap-kpi-card,
    .canon-card,
    .canon-kpi-card,
    .canon-project-card,
    .canon-category-card,
    .canon-recent-card,
    .canon-explore-card,
    .calling-assistant-panel,
    .calling-compass-panel,
    .calling-playlist-card,
    .calling-continue-card,
    .calling-progress-card,
    .calling-continue-row,
    .calling-progress-metric,
    .calling-recommendation-grid article,
    .calling-category-grid button,
    .book-stat-card,
    .book-journey-metric,
    .book-encouragement-card,
    .book-overview-card,
    .book-rail-card,
    .book-lantern-card,
    .book-topics-card,
    .book-actions-card,
    .lexicon-stat-card,
    .lexicon-alpha-card,
    .lexicon-item,
    .lexicon-rail-card,
    .lexicon-inspiration-card,
    .lexicon-challenge-card,
    .lexicon-tools-card,
    .testimony-media-card,
    .testimony-insights-card,
    .testimony-wall-card,
    .testimony-impact-card,
    .testimony-quick-card,
    .testimony-milestones-card,
    .guide-feature-panel,
    .guide-help-grid article,
    .embedded-stat-card,
    .ui-video-card,
    .tables-stat-card
  ) {
    transform-origin: center;
    transition:
      transform 250ms ease,
      box-shadow 250ms ease,
      border-color 250ms ease,
      filter 250ms ease !important;
    will-change: transform;
  }

  body :is(
    .module-card,
    .promise-detail-card,
    .promise-movie-card,
    .promise-search-item,
    .promise-video-panel,
    .search-result-card,
    .roadmap-kpi-card,
    .canon-card,
    .canon-kpi-card,
    .canon-project-card,
    .canon-category-card,
    .canon-recent-card,
    .canon-explore-card,
    .calling-assistant-panel,
    .calling-compass-panel,
    .calling-playlist-card,
    .calling-continue-card,
    .calling-progress-card,
    .calling-continue-row,
    .calling-progress-metric,
    .calling-recommendation-grid article,
    .calling-category-grid button,
    .book-stat-card,
    .book-journey-metric,
    .book-encouragement-card,
    .book-overview-card,
    .book-rail-card,
    .book-lantern-card,
    .book-topics-card,
    .book-actions-card,
    .lexicon-stat-card,
    .lexicon-alpha-card,
    .lexicon-item,
    .lexicon-rail-card,
    .lexicon-inspiration-card,
    .lexicon-challenge-card,
    .lexicon-tools-card,
    .testimony-media-card,
    .testimony-insights-card,
    .testimony-wall-card,
    .testimony-impact-card,
    .testimony-quick-card,
    .testimony-milestones-card,
    .guide-feature-panel,
    .guide-help-grid article,
    .embedded-stat-card,
    .ui-video-card,
    .tables-stat-card
  ):where(:hover, :focus-within) {
    position: relative;
    z-index: 8;
    cursor: pointer;
    transform: translate3d(0, -6px, 0) scale(1.04) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    box-shadow:
      0 18px 42px rgba(0, 38, 29, 0.18),
      0 0 24px rgba(16, 185, 129, 0.18) !important;
    filter: brightness(1.03) saturate(1.02);
  }

  body :is(
    .module-card,
    .promise-detail-card,
    .promise-movie-card,
    .promise-search-item,
    .promise-video-panel,
    .search-result-card,
    .roadmap-kpi-card,
    .canon-card,
    .canon-kpi-card,
    .canon-project-card,
    .canon-category-card,
    .canon-recent-card,
    .canon-explore-card,
    .calling-assistant-panel,
    .calling-compass-panel,
    .calling-playlist-card,
    .calling-continue-card,
    .calling-progress-card,
    .calling-continue-row,
    .calling-progress-metric,
    .calling-recommendation-grid article,
    .calling-category-grid button,
    .book-stat-card,
    .book-journey-metric,
    .book-encouragement-card,
    .book-overview-card,
    .book-rail-card,
    .book-lantern-card,
    .book-topics-card,
    .book-actions-card,
    .lexicon-stat-card,
    .lexicon-alpha-card,
    .lexicon-item,
    .lexicon-rail-card,
    .lexicon-inspiration-card,
    .lexicon-challenge-card,
    .lexicon-tools-card,
    .testimony-media-card,
    .testimony-insights-card,
    .testimony-wall-card,
    .testimony-impact-card,
    .testimony-quick-card,
    .testimony-milestones-card,
    .guide-feature-panel,
    .guide-help-grid article,
    .embedded-stat-card,
    .ui-video-card,
    .tables-stat-card
  ):active {
    transform: translate3d(0, -2px, 0) scale(0.99) !important;
    transition-duration: 100ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body :is(
    .module-card,
    .promise-detail-card,
    .promise-movie-card,
    .promise-search-item,
    .promise-video-panel,
    .search-result-card,
    .roadmap-kpi-card,
    .canon-card,
    .canon-kpi-card,
    .canon-project-card,
    .canon-category-card,
    .canon-recent-card,
    .canon-explore-card,
    .calling-assistant-panel,
    .calling-compass-panel,
    .calling-playlist-card,
    .calling-continue-card,
    .calling-progress-card,
    .calling-continue-row,
    .calling-progress-metric,
    .calling-recommendation-grid article,
    .calling-category-grid button,
    .book-stat-card,
    .book-journey-metric,
    .book-encouragement-card,
    .book-overview-card,
    .book-rail-card,
    .book-lantern-card,
    .book-topics-card,
    .book-actions-card,
    .lexicon-stat-card,
    .lexicon-alpha-card,
    .lexicon-item,
    .lexicon-rail-card,
    .lexicon-inspiration-card,
    .lexicon-challenge-card,
    .lexicon-tools-card,
    .testimony-media-card,
    .testimony-insights-card,
    .testimony-wall-card,
    .testimony-impact-card,
    .testimony-quick-card,
    .testimony-milestones-card,
    .guide-feature-panel,
    .guide-help-grid article,
    .embedded-stat-card,
    .ui-video-card,
    .tables-stat-card
  ) {
    transition: none !important;
    will-change: auto !important;
  }

  body :is(
    .module-card,
    .promise-detail-card,
    .promise-movie-card,
    .promise-search-item,
    .promise-video-panel,
    .search-result-card,
    .roadmap-kpi-card,
    .canon-card,
    .canon-kpi-card,
    .canon-project-card,
    .canon-category-card,
    .canon-recent-card,
    .canon-explore-card,
    .calling-assistant-panel,
    .calling-compass-panel,
    .calling-playlist-card,
    .calling-continue-card,
    .calling-progress-card,
    .calling-continue-row,
    .calling-progress-metric,
    .calling-recommendation-grid article,
    .calling-category-grid button,
    .book-stat-card,
    .book-journey-metric,
    .book-encouragement-card,
    .book-overview-card,
    .book-rail-card,
    .book-lantern-card,
    .book-topics-card,
    .book-actions-card,
    .lexicon-stat-card,
    .lexicon-alpha-card,
    .lexicon-item,
    .lexicon-rail-card,
    .lexicon-inspiration-card,
    .lexicon-challenge-card,
    .lexicon-tools-card,
    .testimony-media-card,
    .testimony-insights-card,
    .testimony-wall-card,
    .testimony-impact-card,
    .testimony-quick-card,
    .testimony-milestones-card,
    .guide-feature-panel,
    .guide-help-grid article,
    .embedded-stat-card,
    .ui-video-card,
    .tables-stat-card
  ):where(:hover, :focus-within, :active) {
    transform: none !important;
    filter: none !important;
  }
}

/* Roadmap Phase 04: premium project structure showcase */
body[data-view="roadmap"] .roadmap-bottom-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-view="roadmap"] .roadmap-archive {
  position: relative !important;
  isolation: isolate !important;
  grid-column: 1 / -1 !important;
  display: grid !important;
  min-height: 0 !important;
  padding: 2.65rem 2.55rem 2.05rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 215, 118, 0.42) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 227, 141, 0.28), transparent 17rem),
    linear-gradient(105deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 39%, rgba(236, 247, 239, 0.76) 68%, rgba(14, 74, 55, 0.5) 100%),
    #fbfdf9 !important;
  box-shadow:
    0 28px 70px rgba(6, 35, 27, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

body[data-view="roadmap"] .roadmap-archive::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto auto !important;
  z-index: -2 !important;
  width: min(68%, 55rem) !important;
  height: 19.5rem !important;
  opacity: 0.9 !important;
  border-radius: 0 24px 0 90px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.62) 26%, rgba(255, 255, 255, 0.2) 53%, rgba(0, 71, 54, 0.2) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 68, 51, 0.18)),
    url("public/images/search/teoyube-search-panel-bg.png") center right / cover no-repeat !important;
  filter: saturate(0.95) brightness(1.08);
  transform: none !important;
  pointer-events: none;
}

body[data-view="roadmap"] .roadmap-archive::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -4rem -5rem -4rem !important;
  z-index: -1 !important;
  height: 14rem !important;
  opacity: 0.95 !important;
  background:
    radial-gradient(circle at 58% 5%, rgba(255, 222, 129, 0.65) 0 0.18rem, transparent 0.2rem),
    radial-gradient(circle at 12% 38%, rgba(255, 245, 198, 0.64) 0 0.1rem, transparent 0.13rem),
    radial-gradient(circle at 86% 58%, rgba(255, 224, 122, 0.5) 0 0.12rem, transparent 0.14rem),
    linear-gradient(0deg, rgba(10, 76, 56, 0.16), rgba(255, 255, 255, 0));
  pointer-events: none;
}

body[data-view="roadmap"] .roadmap-archive > .eyebrow,
body[data-view="roadmap"] .roadmap-archive > h3,
body[data-view="roadmap"] .roadmap-archive > p,
body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid,
body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button {
  position: relative !important;
  z-index: 1 !important;
}

body[data-view="roadmap"] .roadmap-archive > .eyebrow {
  display: inline-flex !important;
  width: max-content !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-height: 2.35rem !important;
  margin: 0 !important;
  padding: 0.36rem 0.92rem 0.36rem 0.4rem !important;
  border: 1px solid rgba(0, 87, 68, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(230, 237, 228, 0.82) !important;
  color: #064c3d !important;
  box-shadow: 0 12px 28px rgba(0, 61, 45, 0.08) !important;
  font-size: 0.88rem !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

body[data-view="roadmap"] .roadmap-archive > .eyebrow::before {
  content: "";
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgba(255, 217, 118, 0.78);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 247, 192, 0.5), transparent 34%),
    linear-gradient(145deg, #0a7a5e, #014633);
  box-shadow:
    0 10px 22px rgba(0, 66, 49, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

body[data-view="roadmap"] .roadmap-archive > .eyebrow::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 50%;
  width: 0.78rem;
  height: 0.78rem;
  background: linear-gradient(180deg, #fff5b8, #d7a332);
  transform: translateY(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2 14.3 8.8 21 11l-6.7 2.2L12 20l-2.3-6.8L3 11l6.7-2.2L12 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2 14.3 8.8 21 11l-6.7 2.2L12 20l-2.3-6.8L3 11l6.7-2.2L12 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="roadmap"] .roadmap-archive > h3 {
  max-width: 63rem !important;
  margin: 1.28rem 0 0 !important;
  color: #073f34 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 2.55rem !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

body[data-view="roadmap"] .roadmap-archive > h3::after {
  content: "  \1F331" !important;
  color: #19865f !important;
  font-family: system-ui, sans-serif !important;
  font-size: 0.62em !important;
  vertical-align: 0.08em !important;
}

body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
  max-width: 55rem !important;
  margin: 0.9rem 0 0 !important;
  color: #4c5b63 !important;
  font-size: 1.05rem !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
}

body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow)::after {
  content: "" !important;
  display: block !important;
  width: 6.2rem !important;
  height: 0.18rem !important;
  margin: 1.35rem 0 2rem !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, #073f34 0 48%, #e7b342 48% 100%) !important;
  box-shadow: 0 0 18px rgba(231, 179, 66, 0.22) !important;
  opacity: 1 !important;
}

body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  margin: 0 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 5rem minmax(0, 1fr) 2.85rem !important;
  align-items: center !important;
  gap: 1.1rem !important;
  min-height: 8.75rem !important;
  padding: 1.25rem 1.15rem 1.25rem 1.45rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 218, 123, 0.36) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.95), rgba(249, 250, 245, 0.88)) !important;
  box-shadow:
    0 18px 40px rgba(7, 43, 33, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
  animation: phase4CardRise 520ms ease both;
  transition:
    transform 250ms ease,
    box-shadow 250ms ease,
    border-color 250ms ease,
    filter 250ms ease !important;
  will-change: transform;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.14rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 232, 149, 0), #e7b342, rgba(255, 232, 149, 0));
  box-shadow: 0 0 16px rgba(231, 179, 66, 0.4);
}

body[data-view="roadmap"] .roadmap-project-widget-grid article:hover,
body[data-view="roadmap"] .roadmap-project-widget-grid article:focus-within {
  z-index: 2;
  border-color: rgba(231, 179, 66, 0.72) !important;
  filter: brightness(1.03);
  transform: translate3d(0, -6px, 0) scale(1.03) !important;
  box-shadow:
    0 26px 58px rgba(7, 43, 33, 0.16),
    0 0 28px rgba(231, 179, 66, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article:nth-child(2) { animation-delay: 40ms; }
body[data-view="roadmap"] .roadmap-project-widget-grid article:nth-child(3) { animation-delay: 80ms; }
body[data-view="roadmap"] .roadmap-project-widget-grid article:nth-child(4) { animation-delay: 120ms; }
body[data-view="roadmap"] .roadmap-project-widget-grid article:nth-child(5) { animation-delay: 160ms; }
body[data-view="roadmap"] .roadmap-project-widget-grid article:nth-child(6) { animation-delay: 200ms; }
body[data-view="roadmap"] .roadmap-project-widget-grid article:nth-child(7) { animation-delay: 240ms; }
body[data-view="roadmap"] .roadmap-project-widget-grid article:nth-child(8) { animation-delay: 280ms; }
body[data-view="roadmap"] .roadmap-project-widget-grid article:nth-child(9) { animation-delay: 320ms; }

body[data-view="roadmap"] .roadmap-project-widget-grid article > span {
  position: relative !important;
  display: grid !important;
  width: 4.15rem !important;
  height: 4.15rem !important;
  place-items: center !important;
  border: 1px solid rgba(255, 220, 127, 0.58) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 248, 190, 0.3), transparent 34%),
    linear-gradient(145deg, #0b785e, #013f31) !important;
  color: transparent !important;
  box-shadow:
    0 15px 30px rgba(0, 63, 47, 0.18),
    0 12px 0 -7px rgba(231, 179, 66, 0.76),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  font-size: 0 !important;
}

body[data-view="roadmap"] .phase4-widget-icon::before {
  content: "" !important;
  display: block !important;
  width: 1.85rem !important;
  height: 1.85rem !important;
  background: linear-gradient(180deg, #fff3b4, #d9a43a) !important;
  -webkit-mask: var(--phase4-mask) center / contain no-repeat !important;
  mask: var(--phase4-mask) center / contain no-repeat !important;
  filter: drop-shadow(0 0 8px rgba(255, 222, 128, 0.36));
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="structure"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5h7l2 2H21v8.5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7.5Z'/%3E%3Cpath d='M3 7.5V6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v1.5'/%3E%3C/svg%3E") !important;
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="pages"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v10h13V10'/%3E%3Cpath d='M9.5 20v-6h5v6'/%3E%3C/svg%3E") !important;
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="components"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='1.3'/%3E%3Ccircle cx='12' cy='6' r='1.3'/%3E%3Ccircle cx='18' cy='6' r='1.3'/%3E%3Ccircle cx='6' cy='12' r='1.3'/%3E%3Ccircle cx='12' cy='12' r='1.3'/%3E%3Ccircle cx='18' cy='12' r='1.3'/%3E%3Ccircle cx='6' cy='18' r='1.3'/%3E%3Ccircle cx='12' cy='18' r='1.3'/%3E%3Ccircle cx='18' cy='18' r='1.3'/%3E%3C/svg%3E") !important;
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="brand"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 5 6v5.5c0 4.4 2.8 7.6 7 9.5 4.2-1.9 7-5.1 7-9.5V6l-7-3Z'/%3E%3Cpath d='m12 8 1.1 2.3 2.5.35-1.8 1.75.42 2.5L12 13.72 9.78 14.9l.42-2.5-1.8-1.75 2.5-.35L12 8Z'/%3E%3C/svg%3E") !important;
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="database"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5.5' rx='7' ry='3.2'/%3E%3Cpath d='M5 5.5v6c0 1.8 3.1 3.2 7 3.2s7-1.4 7-3.2v-6'/%3E%3Cpath d='M5 11.5v6c0 1.8 3.1 3.2 7 3.2s7-1.4 7-3.2v-6'/%3E%3C/svg%3E") !important;
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="prompts"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.5 14 8l5.5 2-5.5 2-2 5.5-2-5.5-5.5-2 5.5-2 2-5.5Z'/%3E%3Cpath d='m18.5 15 .9 2.4 2.1.8-2.1.8-.9 2.5-.9-2.5-2.1-.8 2.1-.8.9-2.4Z'/%3E%3C/svg%3E") !important;
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="launch"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='m16.5 7.5 3-3M18 4.5h1.5V6'/%3E%3Cpath d='M12 12 19 5'/%3E%3Cpath d='M9 12a3 3 0 0 0 3 3'/%3E%3C/svg%3E") !important;
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="deploy"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3c3.2 2.3 5.2 5.5 5.2 8.8 0 2.5-1.1 4.6-3.2 6.4L12 21l-2-2.8c-2.1-1.8-3.2-3.9-3.2-6.4C6.8 8.5 8.8 5.3 12 3Z'/%3E%3Ccircle cx='12' cy='10.5' r='2.1'/%3E%3Cpath d='M7.6 17.4 4.5 20M16.4 17.4l3.1 2.6'/%3E%3C/svg%3E") !important;
}

body[data-view="roadmap"] .phase4-widget-icon[data-icon="docs"] {
  --phase4-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h9l3 3v13H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M15 4v4h4'/%3E%3Cpath d='M8.5 12h7M8.5 15.5H14'/%3E%3C/svg%3E") !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > div {
  min-width: 0 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid strong {
  display: block !important;
  margin: 0 0 0.32rem !important;
  color: #073f34 !important;
  font-size: 1.02rem !important;
  font-weight: 1000 !important;
  line-height: 1.15 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid small {
  display: block !important;
  margin: 0 0 0.42rem !important;
  color: #0b7a5f !important;
  font-size: 0.87rem !important;
  font-weight: 1000 !important;
  line-height: 1.15 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid p {
  display: block !important;
  margin: 0 !important;
  color: #46565d !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > button {
  position: relative !important;
  display: grid !important;
  width: 2.65rem !important;
  height: 2.65rem !important;
  min-height: 2.65rem !important;
  place-items: center !important;
  border: 1px solid rgba(0, 65, 50, 0.13) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 242, 236, 0.92)) !important;
  color: transparent !important;
  box-shadow:
    0 10px 22px rgba(5, 38, 30, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  font-size: 0 !important;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > button::before {
  content: "" !important;
  width: 0.7rem !important;
  height: 0.7rem !important;
  border-top: 3px solid #064c3d !important;
  border-right: 3px solid #064c3d !important;
  transform: rotate(45deg) !important;
  transition: transform 220ms ease !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article:hover > button,
body[data-view="roadmap"] .roadmap-project-widget-grid article:focus-within > button {
  border-color: rgba(231, 179, 66, 0.65) !important;
  box-shadow:
    0 16px 30px rgba(5, 38, 30, 0.16),
    0 0 18px rgba(231, 179, 66, 0.18) !important;
  transform: translateX(0.1rem) !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article:hover > button::before,
body[data-view="roadmap"] .roadmap-project-widget-grid article:focus-within > button::before {
  transform: rotate(45deg) translate(0.08rem, -0.08rem) !important;
}

body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  justify-self: center !important;
  display: inline-grid !important;
  grid-template-columns: auto auto auto !important;
  width: min(31rem, 100%) !important;
  max-width: 100% !important;
  height: 3.9rem !important;
  min-height: 3.9rem !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.95rem !important;
  margin: 1.55rem auto 0 !important;
  padding: 0 1.6rem !important;
  border: 1px solid rgba(255, 217, 118, 0.52) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 225, 133, 0.22), transparent 7rem),
    linear-gradient(135deg, #07775d, #004d3d) !important;
  color: #ffffff !important;
  box-shadow:
    0 18px 38px rgba(0, 67, 52, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  font-size: 1.18rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  transform: none !important;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease !important;
}

body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button::before {
  content: "";
  display: block;
  width: 1.28rem;
  height: 1.28rem;
  background: linear-gradient(180deg, #fff5ba, #dba63a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3c3.2 2.3 5.2 5.5 5.2 8.8 0 2.5-1.1 4.6-3.2 6.4L12 21l-2-2.8c-2.1-1.8-3.2-3.9-3.2-6.4C6.8 8.5 8.8 5.3 12 3Z'/%3E%3Ccircle cx='12' cy='10.5' r='2.1'/%3E%3Cpath d='M7.6 17.4 4.5 20M16.4 17.4l3.1 2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3c3.2 2.3 5.2 5.5 5.2 8.8 0 2.5-1.1 4.6-3.2 6.4L12 21l-2-2.8c-2.1-1.8-3.2-3.9-3.2-6.4C6.8 8.5 8.8 5.3 12 3Z'/%3E%3Ccircle cx='12' cy='10.5' r='2.1'/%3E%3Cpath d='M7.6 17.4 4.5 20M16.4 17.4l3.1 2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button::after {
  content: "" !important;
  width: 0.78rem !important;
  height: 0.78rem !important;
  border-top: 3px solid #ffffff !important;
  border-right: 3px solid #ffffff !important;
  transform: rotate(45deg) !important;
}

body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button:hover,
body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button:focus-visible {
  border-color: rgba(255, 225, 133, 0.84) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    0 24px 46px rgba(0, 67, 52, 0.32),
    0 0 26px rgba(231, 179, 66, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body[data-view="roadmap"] .roadmap-archive .roadmap-subphase {
  display: none !important;
}

@keyframes phase4CardRise {
  from {
    opacity: 0;
    transform: translate3d(0, 0.7rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 1180px) {
  body[data-view="roadmap"] .roadmap-archive {
    padding: 2rem 1.5rem 1.55rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive::before {
    width: 100% !important;
    height: 15rem !important;
    opacity: 0.45 !important;
  }

  body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body[data-view="roadmap"] .roadmap-archive {
    padding: 1.35rem 1rem 1.1rem !important;
    border-radius: 18px !important;
  }

  body[data-view="roadmap"] .roadmap-archive > h3 {
    font-size: 1.75rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
    font-size: 0.94rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article {
    grid-template-columns: 4rem minmax(0, 1fr) 2.45rem !important;
    min-height: 7.4rem !important;
    padding: 1rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > span {
    width: 3.35rem !important;
    height: 3.35rem !important;
  }

  body[data-view="roadmap"] .phase4-widget-icon::before {
    width: 1.45rem !important;
    height: 1.45rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid p {
    font-size: 0.82rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button {
    height: 3.35rem !important;
    min-height: 3.35rem !important;
    font-size: 1rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="roadmap"] .roadmap-project-widget-grid article {
    animation: none !important;
    transition: none !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article:hover,
  body[data-view="roadmap"] .roadmap-project-widget-grid article:focus-within,
  body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button:hover,
  body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button:focus-visible {
    transform: none !important;
  }
}

/* Promise Table: uploaded Calling Compass reference recreation */
body[data-view="table"] #table .promise-table-grid .promise-calling-compass-card,
#table .promise-table-grid .promise-calling-compass-card {
  position: relative !important;
  isolation: isolate !important;
  grid-column: 1 / -1 !important;
  display: grid !important;
  min-height: clamp(27rem, 43vw, 34rem) !important;
  padding: clamp(1.45rem, 2.6vw, 2.15rem) !important;
  overflow: hidden !important;
  align-content: start !important;
  gap: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 54% 44%, rgba(231, 248, 204, 0.68), transparent 18rem),
    linear-gradient(90deg, rgba(249, 253, 243, 0.78) 0%, rgba(248, 252, 238, 0.55) 44%, rgba(244, 247, 225, 0.44) 100%),
    url("public/images/table/calling-compass-panel-bg.png") center center / cover no-repeat !important;
  box-shadow:
    0 28px 70px rgba(20, 54, 43, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body[data-view="table"] #table .promise-table-grid .promise-calling-compass-card::before,
#table .promise-table-grid .promise-calling-compass-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.64), transparent 12rem),
    radial-gradient(circle at 82% 22%, rgba(255, 241, 176, 0.36), transparent 13rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.18) 38%, rgba(0, 94, 68, 0.06) 100%);
  pointer-events: none;
}

body[data-view="table"] #table .promise-table-grid .promise-calling-compass-card::after,
#table .promise-table-grid .promise-calling-compass-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0.05rem !important;
  z-index: -1 !important;
  border: 1px solid rgba(255, 255, 255, 0.46) !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 55% 52%, rgba(255, 255, 255, 0.24) 0 0.12rem, transparent 0.14rem),
    radial-gradient(circle at 66% 36%, rgba(255, 229, 141, 0.3) 0 0.11rem, transparent 0.13rem),
    radial-gradient(circle at 38% 56%, rgba(255, 255, 255, 0.24) 0 0.08rem, transparent 0.1rem);
  pointer-events: none;
}

body[data-view="table"] #table .promise-compass-heading,
#table .promise-compass-heading {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: 3.25rem minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0.95rem !important;
  max-width: 35rem !important;
}

body[data-view="table"] #table .promise-compass-heading-icon,
#table .promise-compass-heading-icon {
  position: relative !important;
  display: grid !important;
  width: 3rem !important;
  height: 3rem !important;
  place-items: center !important;
  border: 1px solid rgba(255, 224, 132, 0.84) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 209, 0.34), transparent 34%),
    linear-gradient(145deg, #0c765d, #023f31) !important;
  box-shadow:
    0 14px 28px rgba(0, 63, 47, 0.16),
    0 0 0 0.35rem rgba(255, 255, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

body[data-view="table"] #table .promise-compass-heading-icon::before,
#table .promise-compass-heading-icon::before {
  content: "";
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  background: linear-gradient(180deg, #fff7bf, #d9a33a);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 4 6-4 14-4-14 4-6Z'/%3E%3Cpath d='m12 2 2 9-8 3 6-12Z'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 4 6-4 14-4-14 4-6Z'/%3E%3Cpath d='m12 2 2 9-8 3 6-12Z'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="table"] #table .promise-compass-heading .eyebrow,
#table .promise-compass-heading .eyebrow {
  margin: 0 !important;
  color: #005a47 !important;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem) !important;
  font-weight: 1000 !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 16px rgba(255, 255, 255, 0.78) !important;
}

body[data-view="table"] #table .promise-compass-heading p:not(.eyebrow),
#table .promise-compass-heading p:not(.eyebrow) {
  margin: 0.22rem 0 0 !important;
  color: #0a5444 !important;
  font-size: clamp(0.86rem, 1.1vw, 1.08rem) !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  text-shadow: 0 1px 15px rgba(255, 255, 255, 0.74) !important;
}

body[data-view="table"] #table .promise-calling-compass,
#table .promise-calling-compass {
  position: absolute !important;
  left: 50% !important;
  top: 51% !important;
  z-index: 2 !important;
  display: block !important;
  width: min(38rem, 56vw) !important;
  height: min(26rem, 62%) !important;
  min-height: 20rem !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: translate(-50%, -45%) !important;
}

body[data-view="table"] #table .promise-calling-compass::before,
#table .promise-calling-compass::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(24rem, 76%) !important;
  height: min(24rem, 95%) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(232, 244, 207, 0.74) 0 34%, rgba(221, 237, 190, 0.4) 35% 54%, rgba(255, 255, 255, 0.18) 55% 100%),
    conic-gradient(from 45deg, rgba(7, 95, 71, 0.18), rgba(255, 226, 142, 0.22), rgba(7, 95, 71, 0.14), rgba(255, 255, 255, 0.1), rgba(7, 95, 71, 0.18)) !important;
  box-shadow:
    0 22px 48px rgba(17, 65, 49, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
  transform: translate(-50%, -50%) !important;
}

body[data-view="table"] #table .promise-calling-compass::after,
#table .promise-calling-compass::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(19rem, 60%) !important;
  height: min(19rem, 74%) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, transparent 4%, rgba(7, 95, 71, 0.2) 49.5%, rgba(255, 237, 161, 0.74) 50%, rgba(7, 95, 71, 0.2) 50.5%, transparent 96%),
    linear-gradient(0deg, transparent 4%, rgba(7, 95, 71, 0.2) 49.5%, rgba(255, 237, 161, 0.74) 50%, rgba(7, 95, 71, 0.2) 50.5%, transparent 96%),
    conic-gradient(from 0deg, transparent 0 11%, rgba(7, 95, 71, 0.18) 12% 14%, transparent 15% 36%, rgba(7, 95, 71, 0.18) 37% 39%, transparent 40% 61%, rgba(7, 95, 71, 0.18) 62% 64%, transparent 65% 86%, rgba(7, 95, 71, 0.18) 87% 89%, transparent 90% 100%) !important;
  opacity: 0.72 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

body[data-view="table"] #table .promise-compass-lines,
#table .promise-compass-lines {
  position: absolute !important;
  inset: 4% 6% 0 !important;
  z-index: 2 !important;
  width: 88% !important;
  height: 92% !important;
  margin: auto !important;
  overflow: visible !important;
}

body[data-view="table"] #table .promise-compass-ring,
#table .promise-compass-ring {
  fill: none !important;
  stroke: rgba(255, 255, 255, 0.76) !important;
  stroke-width: 0.42 !important;
  stroke-dasharray: 1.2 1.8 !important;
}

body[data-view="table"] #table .promise-compass-axis,
#table .promise-compass-axis {
  fill: none !important;
  stroke: rgba(7, 95, 71, 0.22) !important;
  stroke-width: 0.72 !important;
  filter: drop-shadow(0 0 5px rgba(255, 229, 143, 0.44)) !important;
}

body[data-view="table"] #table .promise-compass-spark,
#table .promise-compass-spark {
  fill: #ffe48e !important;
  filter: drop-shadow(0 0 5px rgba(255, 216, 102, 0.72)) !important;
}

body[data-view="table"] #table .promise-compass-core,
#table .promise-compass-core {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 5 !important;
  display: grid !important;
  width: clamp(8.8rem, 15vw, 12rem) !important;
  height: clamp(8.8rem, 15vw, 12rem) !important;
  place-items: center !important;
  padding: 1.15rem !important;
  border: 1px solid rgba(255, 227, 142, 0.62) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 242, 176, 0.23), transparent 35%),
    linear-gradient(145deg, #00664f, #012e25) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1.25rem rgba(198, 228, 174, 0.42),
    0 24px 48px rgba(0, 65, 50, 0.2),
    0 0 34px rgba(255, 224, 139, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  text-align: center !important;
  transform: translate(-50%, -50%) !important;
  animation: promiseCompassBreathe 5s ease-in-out infinite;
}

body[data-view="table"] #table .promise-compass-core i,
#table .promise-compass-core i {
  display: block !important;
  width: 2.35rem !important;
  height: 2rem !important;
  margin-bottom: 0.45rem !important;
  background: linear-gradient(180deg, #fff6bf, #dba43b) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6c-3.2-3-6.5-3.5-10-2v15c3.5-1.5 6.8-1 10 2V6Z'/%3E%3Cpath d='M14 6c3.2-3 6.5-3.5 10-2v15c-3.5-1.5-6.8-1-10 2V6Z'/%3E%3Cpath d='M14 3v18'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6c-3.2-3-6.5-3.5-10-2v15c3.5-1.5 6.8-1 10 2V6Z'/%3E%3Cpath d='M14 6c3.2-3 6.5-3.5 10-2v15c-3.5-1.5-6.8-1-10 2V6Z'/%3E%3Cpath d='M14 3v18'/%3E%3C/svg%3E") center / contain no-repeat !important;
  filter: drop-shadow(0 0 10px rgba(255, 226, 142, 0.5)) !important;
}

body[data-view="table"] #table .promise-compass-core span,
#table .promise-compass-core span {
  position: static !important;
  display: block !important;
  max-width: 8.1rem !important;
  color: #ffffff !important;
  font-size: clamp(1rem, 1.65vw, 1.45rem) !important;
  font-weight: 1000 !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

body[data-view="table"] #table .promise-compass-node,
#table .promise-compass-node {
  position: absolute !important;
  z-index: 6 !important;
  display: grid !important;
  min-width: 9.5rem !important;
  max-width: 12.5rem !important;
  align-items: center !important;
  gap: 0.16rem 0.7rem !important;
  color: #064c3d !important;
  font-size: 1rem !important;
  text-align: left !important;
  transition:
    transform 220ms ease,
    filter 220ms ease !important;
}

body[data-view="table"] #table .promise-compass-node:hover,
body[data-view="table"] #table .promise-compass-node:focus-visible,
#table .promise-compass-node:hover,
#table .promise-compass-node:focus-visible {
  outline: none !important;
  filter: drop-shadow(0 0 16px rgba(255, 216, 111, 0.42)) !important;
}

body[data-view="table"] #table .promise-compass-node i,
#table .promise-compass-node i {
  display: grid !important;
  width: 3.6rem !important;
  height: 3.6rem !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 250, 216, 0.64), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(232, 240, 225, 0.72)) !important;
  box-shadow:
    0 13px 28px rgba(17, 65, 49, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

body[data-view="table"] #table .promise-compass-node i::before,
#table .promise-compass-node i::before {
  content: "";
  width: 1.42rem;
  height: 1.42rem;
  background: #064c3d;
  -webkit-mask: var(--promise-compass-icon) center / contain no-repeat;
  mask: var(--promise-compass-icon) center / contain no-repeat;
}

body[data-view="table"] #table .promise-compass-node em,
body[data-view="table"] #table .promise-compass-node small,
#table .promise-compass-node em,
#table .promise-compass-node small {
  position: static !important;
  display: block !important;
  max-width: none !important;
  text-align: inherit !important;
}

body[data-view="table"] #table .promise-compass-node em,
#table .promise-compass-node em {
  color: #005341 !important;
  font-size: 1rem !important;
  font-style: normal !important;
  font-weight: 1000 !important;
  line-height: 1.1 !important;
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.76) !important;
}

body[data-view="table"] #table .promise-compass-node small,
#table .promise-compass-node small {
  margin-top: 0.22rem !important;
  color: #174f43 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1.26 !important;
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.76) !important;
}

body[data-view="table"] #table .promise-compass-node.primary-node,
#table .promise-compass-node.primary-node {
  left: 50% !important;
  top: 7% !important;
  grid-template-columns: 3.6rem minmax(0, 1fr) !important;
  transform: translateX(0.3rem) !important;
  --promise-compass-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 17 1.4-9 4.1 4L12 5l1.5 7 4.1-4L19 17H5Z'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") !important;
}

body[data-view="table"] #table .promise-compass-node.burdens-node,
#table .promise-compass-node.burdens-node {
  right: 78% !important;
  top: 50% !important;
  grid-template-columns: minmax(0, 1fr) 3.6rem !important;
  text-align: right !important;
  transform: translateY(-50%) !important;
  --promise-compass-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.8 5.8c-1.8-2.1-5-2-6.8.1L12 8.2 10 5.9C8.2 3.8 5 3.7 3.2 5.8c-1.7 2-1.5 5 .4 6.8L12 20l8.4-7.4c1.9-1.8 2.1-4.8.4-6.8Z'/%3E%3C/svg%3E") !important;
}

body[data-view="table"] #table .promise-compass-node.burdens-node i,
#table .promise-compass-node.burdens-node i {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
}

body[data-view="table"] #table .promise-compass-node.burdens-node em,
body[data-view="table"] #table .promise-compass-node.burdens-node small,
#table .promise-compass-node.burdens-node em,
#table .promise-compass-node.burdens-node small {
  grid-column: 1 !important;
}

body[data-view="table"] #table .promise-compass-node.gifts-node,
#table .promise-compass-node.gifts-node {
  left: 78% !important;
  top: 50% !important;
  grid-template-columns: 3.6rem minmax(0, 1fr) !important;
  transform: translateY(-50%) !important;
  --promise-compass-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='9' width='16' height='11' rx='1.5'/%3E%3Cpath d='M12 9v11M4 13h16M8.5 9C6 7 7.4 4.5 10 6.2L12 9l2-2.8c2.6-1.7 4 0.8 1.5 2.8'/%3E%3C/svg%3E") !important;
}

body[data-view="table"] #table .promise-compass-node.growth-node,
#table .promise-compass-node.growth-node {
  left: 50% !important;
  bottom: 1% !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
  --promise-compass-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20V10'/%3E%3Cpath d='M12 10c-4.5 0-6.5-2.2-7-6 4.6.2 7 2.5 7 6Z'/%3E%3Cpath d='M12 10c4.5 0 6.5-2.2 7-6-4.6.2-7 2.5-7 6Z'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") !important;
}

body[data-view="table"] #table .promise-compass-node.primary-node:hover,
body[data-view="table"] #table .promise-compass-node.primary-node:focus-visible,
#table .promise-compass-node.primary-node:hover,
#table .promise-compass-node.primary-node:focus-visible {
  transform: translateX(0.3rem) scale(1.04) !important;
}

body[data-view="table"] #table .promise-compass-node.burdens-node:hover,
body[data-view="table"] #table .promise-compass-node.burdens-node:focus-visible,
body[data-view="table"] #table .promise-compass-node.gifts-node:hover,
body[data-view="table"] #table .promise-compass-node.gifts-node:focus-visible,
#table .promise-compass-node.burdens-node:hover,
#table .promise-compass-node.burdens-node:focus-visible,
#table .promise-compass-node.gifts-node:hover,
#table .promise-compass-node.gifts-node:focus-visible {
  transform: translateY(-50%) scale(1.04) !important;
}

body[data-view="table"] #table .promise-compass-node.growth-node:hover,
body[data-view="table"] #table .promise-compass-node.growth-node:focus-visible,
#table .promise-compass-node.growth-node:hover,
#table .promise-compass-node.growth-node:focus-visible {
  transform: translateX(-50%) scale(1.04) !important;
}

@keyframes promiseCompassBreathe {
  0%, 100% {
    box-shadow:
      0 0 0 1.25rem rgba(198, 228, 174, 0.42),
      0 24px 48px rgba(0, 65, 50, 0.2),
      0 0 30px rgba(255, 224, 139, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 1.45rem rgba(198, 228, 174, 0.52),
      0 26px 54px rgba(0, 65, 50, 0.22),
      0 0 42px rgba(255, 224, 139, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
}

@media (max-width: 1100px) {
  body[data-view="table"] #table .promise-calling-compass-card,
  #table .promise-calling-compass-card {
    min-height: 30rem !important;
  }

  body[data-view="table"] #table .promise-calling-compass,
  #table .promise-calling-compass {
    width: min(34rem, 86vw) !important;
    height: 22rem !important;
    transform: translate(-50%, -39%) !important;
  }

  body[data-view="table"] #table .promise-compass-node.primary-node,
  #table .promise-compass-node.primary-node {
    top: 8% !important;
  }
}

@media (max-width: 760px) {
  body[data-view="table"] #table .promise-calling-compass-card,
  #table .promise-calling-compass-card {
    min-height: 0 !important;
    padding: 1rem !important;
  }

  body[data-view="table"] #table .promise-compass-heading,
  #table .promise-compass-heading {
    grid-template-columns: 2.7rem minmax(0, 1fr) !important;
  }

  body[data-view="table"] #table .promise-compass-heading-icon,
  #table .promise-compass-heading-icon {
    width: 2.45rem !important;
    height: 2.45rem !important;
  }

  body[data-view="table"] #table .promise-calling-compass,
  #table .promise-calling-compass {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 1rem !important;
    transform: none !important;
  }

  body[data-view="table"] #table .promise-calling-compass::before,
  body[data-view="table"] #table .promise-calling-compass::after,
  body[data-view="table"] #table .promise-compass-lines,
  #table .promise-calling-compass::before,
  #table .promise-calling-compass::after,
  #table .promise-compass-lines {
    display: none !important;
  }

  body[data-view="table"] #table .promise-compass-core,
  #table .promise-compass-core {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: 8.6rem !important;
    height: 8.6rem !important;
    transform: none !important;
  }

  body[data-view="table"] #table .promise-compass-node,
  #table .promise-compass-node {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 3rem minmax(0, 1fr) !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0.65rem !important;
    border: 1px solid rgba(255, 255, 255, 0.54) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.68) !important;
    text-align: left !important;
    transform: none !important;
  }

  body[data-view="table"] #table .promise-compass-node i,
  #table .promise-compass-node i {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 3rem !important;
    height: 3rem !important;
  }

  body[data-view="table"] #table .promise-compass-node em,
  body[data-view="table"] #table .promise-compass-node small,
  #table .promise-compass-node em,
  #table .promise-compass-node small {
    grid-column: 2 !important;
    text-align: left !important;
  }

  body[data-view="table"] #table .promise-compass-node:hover,
  body[data-view="table"] #table .promise-compass-node:focus-visible,
  #table .promise-compass-node:hover,
  #table .promise-compass-node:focus-visible {
    transform: translateY(-2px) !important;
  }
}

@media (max-width: 520px) {
  body[data-view="table"] #table .promise-calling-compass,
  #table .promise-calling-compass {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="table"] #table .promise-compass-core,
  #table .promise-compass-core {
    animation: none !important;
  }

  body[data-view="table"] #table .promise-compass-node,
  #table .promise-compass-node {
    transition: none !important;
  }
}

/* Promise Table: keep Calling Compass beside Promise Scrolls and prevent label overlap */
body[data-view="table"] #table .promise-table-grid .promise-calling-compass-card,
#table .promise-table-grid .promise-calling-compass-card {
  grid-column: span 3 !important;
  min-height: clamp(22rem, 30vw, 26rem) !important;
  padding: clamp(1rem, 1.8vw, 1.35rem) !important;
  background:
    radial-gradient(circle at 52% 52%, rgba(231, 248, 204, 0.58), transparent 12rem),
    linear-gradient(90deg, rgba(249, 253, 243, 0.78) 0%, rgba(248, 252, 238, 0.5) 46%, rgba(244, 247, 225, 0.38) 100%),
    url("public/images/table/calling-compass-panel-bg.png") center center / cover no-repeat !important;
}

body[data-view="table"] #table .promise-table-grid .module-card.promise-scrolls-panel,
#table .promise-table-grid .module-card.promise-scrolls-panel {
  grid-column: span 3 !important;
}

body[data-view="table"] #table .promise-compass-heading,
#table .promise-compass-heading {
  grid-template-columns: 2.75rem minmax(0, 1fr) !important;
  gap: 0.72rem !important;
  max-width: 22rem !important;
}

body[data-view="table"] #table .promise-compass-heading-icon,
#table .promise-compass-heading-icon {
  width: 2.5rem !important;
  height: 2.5rem !important;
}

body[data-view="table"] #table .promise-compass-heading-icon::before,
#table .promise-compass-heading-icon::before {
  width: 1.08rem !important;
  height: 1.08rem !important;
}

body[data-view="table"] #table .promise-compass-heading .eyebrow,
#table .promise-compass-heading .eyebrow {
  font-size: clamp(1.12rem, 1.65vw, 1.48rem) !important;
}

body[data-view="table"] #table .promise-compass-heading p:not(.eyebrow),
#table .promise-compass-heading p:not(.eyebrow) {
  font-size: clamp(0.74rem, 0.9vw, 0.88rem) !important;
}

body[data-view="table"] #table .promise-calling-compass,
#table .promise-calling-compass {
  left: 50% !important;
  top: 60% !important;
  width: min(30rem, 94%) !important;
  height: clamp(16.75rem, 22vw, 19.6rem) !important;
  min-height: 16.75rem !important;
  transform: translate(-50%, -48%) !important;
}

body[data-view="table"] #table .promise-calling-compass::before,
#table .promise-calling-compass::before {
  width: min(15.5rem, 58%) !important;
  height: min(15.5rem, 84%) !important;
}

body[data-view="table"] #table .promise-calling-compass::after,
#table .promise-calling-compass::after {
  width: min(12.4rem, 47%) !important;
  height: min(12.4rem, 67%) !important;
}

body[data-view="table"] #table .promise-compass-lines,
#table .promise-compass-lines {
  inset: 7% 12% 6% !important;
  width: 76% !important;
  height: 86% !important;
}

body[data-view="table"] #table .promise-compass-core,
#table .promise-compass-core {
  width: clamp(6.35rem, 10.2vw, 7.6rem) !important;
  height: clamp(6.35rem, 10.2vw, 7.6rem) !important;
  padding: 0.78rem !important;
  box-shadow:
    0 0 0 0.72rem rgba(198, 228, 174, 0.42),
    0 18px 36px rgba(0, 65, 50, 0.18),
    0 0 28px rgba(255, 224, 139, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

body[data-view="table"] #table .promise-compass-core i,
#table .promise-compass-core i {
  width: 1.55rem !important;
  height: 1.25rem !important;
  margin-bottom: 0.28rem !important;
}

body[data-view="table"] #table .promise-compass-core span,
#table .promise-compass-core span {
  max-width: 5.7rem !important;
  font-size: clamp(0.76rem, 1.1vw, 1rem) !important;
  line-height: 1.08 !important;
}

body[data-view="table"] #table .promise-compass-node,
#table .promise-compass-node {
  min-width: 0 !important;
  max-width: 8.4rem !important;
  gap: 0.1rem 0.48rem !important;
}

body[data-view="table"] #table .promise-compass-node i,
#table .promise-compass-node i {
  width: 2.58rem !important;
  height: 2.58rem !important;
}

body[data-view="table"] #table .promise-compass-node i::before,
#table .promise-compass-node i::before {
  width: 1.02rem !important;
  height: 1.02rem !important;
}

body[data-view="table"] #table .promise-compass-node em,
#table .promise-compass-node em {
  font-size: 0.76rem !important;
  line-height: 1.05 !important;
}

body[data-view="table"] #table .promise-compass-node small,
#table .promise-compass-node small {
  margin-top: 0.1rem !important;
  font-size: 0.58rem !important;
  line-height: 1.18 !important;
}

body[data-view="table"] #table .promise-compass-node.primary-node,
#table .promise-compass-node.primary-node {
  left: 53% !important;
  top: 2% !important;
  grid-template-columns: 2.58rem minmax(0, 6.6rem) !important;
  transform: translateX(0) !important;
}

body[data-view="table"] #table .promise-compass-node.burdens-node,
#table .promise-compass-node.burdens-node {
  right: 69% !important;
  top: 50% !important;
  grid-template-columns: minmax(0, 6.3rem) 2.58rem !important;
  transform: translateY(-50%) !important;
}

body[data-view="table"] #table .promise-compass-node.gifts-node,
#table .promise-compass-node.gifts-node {
  left: 69% !important;
  top: 50% !important;
  grid-template-columns: 2.58rem minmax(0, 6.3rem) !important;
  transform: translateY(-50%) !important;
}

body[data-view="table"] #table .promise-compass-node.growth-node,
#table .promise-compass-node.growth-node {
  left: 50% !important;
  bottom: -4% !important;
  max-width: 9.2rem !important;
  transform: translateX(-50%) !important;
}

body[data-view="table"] #table .promise-compass-node.primary-node:hover,
body[data-view="table"] #table .promise-compass-node.primary-node:focus-visible,
#table .promise-compass-node.primary-node:hover,
#table .promise-compass-node.primary-node:focus-visible {
  transform: scale(1.04) !important;
}

@media (max-width: 1180px) {
  body[data-view="table"] #table .promise-calling-compass-card,
  #table .promise-calling-compass-card {
    min-height: 25rem !important;
  }

  body[data-view="table"] #table .promise-calling-compass,
  #table .promise-calling-compass {
    top: 62% !important;
    width: min(28rem, 96%) !important;
  }
}

@media (max-width: 990px) {
  body[data-view="table"] #table .promise-table-grid .module-card.promise-scrolls-panel,
  body[data-view="table"] #table .promise-table-grid .promise-calling-compass-card,
  #table .promise-table-grid .module-card.promise-scrolls-panel,
  #table .promise-table-grid .promise-calling-compass-card {
    grid-column: 1 / -1 !important;
  }

  body[data-view="table"] #table .promise-calling-compass-card,
  #table .promise-calling-compass-card {
    min-height: 28rem !important;
  }

  body[data-view="table"] #table .promise-calling-compass,
  #table .promise-calling-compass {
    top: 58% !important;
    width: min(34rem, 92vw) !important;
    height: 21rem !important;
    transform: translate(-50%, -45%) !important;
  }

  body[data-view="table"] #table .promise-compass-core,
  #table .promise-compass-core {
    width: 8.1rem !important;
    height: 8.1rem !important;
  }
}

@media (max-width: 760px) {
  body[data-view="table"] #table .promise-calling-compass-card,
  #table .promise-calling-compass-card {
    min-height: 0 !important;
  }

  body[data-view="table"] #table .promise-calling-compass,
  #table .promise-calling-compass {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
  }

  body[data-view="table"] #table .promise-compass-core,
  #table .promise-compass-core {
    width: 8.6rem !important;
    height: 8.6rem !important;
  }
}

/* Promise Table repair: restore Promise Scrolls art/content and compact top-row height */
body[data-view="table"] #table .promise-table-grid .module-card.promise-scrolls-panel,
#table .promise-table-grid .module-card.promise-scrolls-panel {
  grid-column: span 3 !important;
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  min-height: clamp(14rem, 20vw, 16.5rem) !important;
  padding: 1.12rem !important;
  overflow: hidden !important;
  align-content: end !important;
  gap: 0.55rem !important;
  border-color: rgba(255, 217, 112, 0.34) !important;
  background:
    linear-gradient(90deg, rgba(0, 30, 24, 0.84) 0%, rgba(0, 64, 48, 0.54) 48%, rgba(0, 64, 48, 0.08) 100%),
    url("public/images/promise/promise-scrolls-bg.png") center right / cover no-repeat !important;
  color: #ffffff !important;
  box-shadow: 0 20px 44px rgba(0, 68, 50, 0.17) !important;
}

body[data-view="table"] #table .promise-table-grid .module-card.promise-scrolls-panel::before,
#table .promise-table-grid .module-card.promise-scrolls-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: url("public/images/promise/promise-scrolls-bg.png") center right / cover no-repeat !important;
  opacity: 0.98 !important;
  transform: none !important;
}

body[data-view="table"] #table .promise-table-grid .module-card.promise-scrolls-panel::after,
#table .promise-table-grid .module-card.promise-scrolls-panel::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(90deg, rgba(0, 30, 24, 0.86) 0%, rgba(0, 64, 49, 0.46) 54%, rgba(255, 245, 199, 0.08) 100%),
    radial-gradient(circle at 82% 18%, rgba(255, 231, 160, 0.2), transparent 12rem) !important;
  pointer-events: none !important;
}

body[data-view="table"] #table .promise-table-grid .module-card.promise-scrolls-panel > *,
#table .promise-table-grid .module-card.promise-scrolls-panel > * {
  position: relative !important;
  z-index: 1 !important;
}

body[data-view="table"] #table .promise-scrolls-panel .eyebrow,
#table .promise-scrolls-panel .eyebrow {
  color: #ffd873 !important;
}

body[data-view="table"] #table .promise-scrolls-panel h3,
#table .promise-scrolls-panel h3 {
  max-width: 24rem !important;
  margin: 0 !important;
  color: #fff8df !important;
  font-size: clamp(1.45rem, 2.6vw, 2.55rem) !important;
  line-height: 0.98 !important;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.38) !important;
}

body[data-view="table"] #table .promise-scrolls-panel p:not(.eyebrow),
#table .promise-scrolls-panel p:not(.eyebrow) {
  max-width: 26rem !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.82rem !important;
  text-shadow: 0 2px 16px rgba(0, 24, 18, 0.45) !important;
}

body[data-view="table"] #table .promise-scrolls-panel .status-rail,
#table .promise-scrolls-panel .status-rail {
  display: flex !important;
  gap: 0.38rem !important;
  margin-top: 0.25rem !important;
}

body[data-view="table"] #table .promise-scrolls-panel .status-pill,
#table .promise-scrolls-panel .status-pill {
  min-height: 1.65rem !important;
  padding: 0.33rem 0.58rem !important;
  border-color: rgba(255, 219, 112, 0.28) !important;
  background: rgba(0, 82, 61, 0.62) !important;
  color: #fff7d4 !important;
  font-size: 0.68rem !important;
}

body[data-view="table"] #table .promise-scrolls-panel .status-pill.active,
#table .promise-scrolls-panel .status-pill.active {
  background: linear-gradient(135deg, #0a7a58, #00583f) !important;
  color: #ffffff !important;
}

body[data-view="table"] #table .promise-table-grid .promise-calling-compass-card,
#table .promise-table-grid .promise-calling-compass-card {
  grid-column: span 3 !important;
  min-height: clamp(14rem, 20vw, 16.5rem) !important;
  padding: 0.9rem !important;
}

body[data-view="table"] #table .promise-compass-heading,
#table .promise-compass-heading {
  grid-template-columns: 2.25rem minmax(0, 1fr) !important;
  gap: 0.55rem !important;
}

body[data-view="table"] #table .promise-compass-heading-icon,
#table .promise-compass-heading-icon {
  width: 2rem !important;
  height: 2rem !important;
}

body[data-view="table"] #table .promise-compass-heading-icon::before,
#table .promise-compass-heading-icon::before {
  width: 0.9rem !important;
  height: 0.9rem !important;
}

body[data-view="table"] #table .promise-compass-heading .eyebrow,
#table .promise-compass-heading .eyebrow {
  font-size: clamp(0.95rem, 1.3vw, 1.18rem) !important;
}

body[data-view="table"] #table .promise-compass-heading p:not(.eyebrow),
#table .promise-compass-heading p:not(.eyebrow) {
  font-size: 0.68rem !important;
  line-height: 1.2 !important;
}

body[data-view="table"] #table .promise-calling-compass,
#table .promise-calling-compass {
  top: 57% !important;
  width: min(23.5rem, 94%) !important;
  height: clamp(10.8rem, 15vw, 12.3rem) !important;
  min-height: 10.8rem !important;
  transform: translate(-50%, -50%) !important;
}

body[data-view="table"] #table .promise-calling-compass::before,
#table .promise-calling-compass::before {
  width: min(10.8rem, 48%) !important;
  height: min(10.8rem, 88%) !important;
}

body[data-view="table"] #table .promise-calling-compass::after,
#table .promise-calling-compass::after {
  width: min(8.6rem, 38%) !important;
  height: min(8.6rem, 70%) !important;
}

body[data-view="table"] #table .promise-compass-lines,
#table .promise-compass-lines {
  inset: 8% 18% 6% !important;
  width: 64% !important;
  height: 86% !important;
}

body[data-view="table"] #table .promise-compass-core,
#table .promise-compass-core {
  width: clamp(4.7rem, 7.4vw, 5.65rem) !important;
  height: clamp(4.7rem, 7.4vw, 5.65rem) !important;
  padding: 0.55rem !important;
  box-shadow:
    0 0 0 0.45rem rgba(198, 228, 174, 0.42),
    0 14px 28px rgba(0, 65, 50, 0.16),
    0 0 24px rgba(255, 224, 139, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

body[data-view="table"] #table .promise-compass-core i,
#table .promise-compass-core i {
  width: 1.05rem !important;
  height: 0.9rem !important;
  margin-bottom: 0.16rem !important;
}

body[data-view="table"] #table .promise-compass-core span,
#table .promise-compass-core span {
  max-width: 4.2rem !important;
  font-size: clamp(0.54rem, 0.78vw, 0.72rem) !important;
  line-height: 1.05 !important;
}

body[data-view="table"] #table .promise-compass-node,
#table .promise-compass-node {
  max-width: 6.5rem !important;
  gap: 0.06rem 0.35rem !important;
}

body[data-view="table"] #table .promise-compass-node i,
#table .promise-compass-node i {
  width: 2rem !important;
  height: 2rem !important;
}

body[data-view="table"] #table .promise-compass-node i::before,
#table .promise-compass-node i::before {
  width: 0.78rem !important;
  height: 0.78rem !important;
}

body[data-view="table"] #table .promise-compass-node em,
#table .promise-compass-node em {
  font-size: 0.61rem !important;
}

body[data-view="table"] #table .promise-compass-node small,
#table .promise-compass-node small {
  font-size: 0.47rem !important;
  line-height: 1.12 !important;
}

body[data-view="table"] #table .promise-compass-node.primary-node,
#table .promise-compass-node.primary-node {
  left: 54% !important;
  top: 1% !important;
  grid-template-columns: 2rem minmax(0, 5.1rem) !important;
}

body[data-view="table"] #table .promise-compass-node.burdens-node,
#table .promise-compass-node.burdens-node {
  right: 66% !important;
  top: 50% !important;
  grid-template-columns: minmax(0, 4.8rem) 2rem !important;
}

body[data-view="table"] #table .promise-compass-node.gifts-node,
#table .promise-compass-node.gifts-node {
  left: 66% !important;
  top: 50% !important;
  grid-template-columns: 2rem minmax(0, 4.8rem) !important;
}

body[data-view="table"] #table .promise-compass-node.growth-node,
#table .promise-compass-node.growth-node {
  bottom: -8% !important;
  max-width: 7rem !important;
}

@media (max-width: 990px) {
  body[data-view="table"] #table .promise-table-grid .module-card.promise-scrolls-panel,
  body[data-view="table"] #table .promise-table-grid .promise-calling-compass-card,
  #table .promise-table-grid .module-card.promise-scrolls-panel,
  #table .promise-table-grid .promise-calling-compass-card {
    grid-column: 1 / -1 !important;
    min-height: 16rem !important;
  }
}

@media (max-width: 760px) {
  body[data-view="table"] #table .promise-calling-compass-card,
  #table .promise-calling-compass-card {
    min-height: 0 !important;
  }

  body[data-view="table"] #table .promise-calling-compass,
  #table .promise-calling-compass {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
  }

  body[data-view="table"] #table .promise-compass-core,
  #table .promise-compass-core {
    width: 8.2rem !important;
    height: 8.2rem !important;
  }
}

/* Roadmap repair: keep Phase 03 and Phase 04 side by side on desktop */
body[data-view="roadmap"] .roadmap-bottom-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 1rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel,
body[data-view="roadmap"] .roadmap-archive {
  grid-column: auto !important;
  align-self: stretch !important;
  min-width: 0 !important;
  min-height: 23rem !important;
  height: auto !important;
  max-height: none !important;
}

body[data-view="roadmap"] .roadmap-tech-panel {
  position: relative !important;
  padding: 1rem 1rem 3.25rem !important;
}

body[data-view="roadmap"],
body[data-view="roadmap"] .roadmap-dashboard,
body[data-view="roadmap"] .roadmap-journey-phase,
body[data-view="roadmap"] .ad-carousel-viewport {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body[data-view="roadmap"] .roadmap-archive {
  position: relative !important;
  padding: 1rem 1rem 3.25rem !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

body[data-view="roadmap"] .roadmap-archive::before {
  right: 0.7rem !important;
  top: 0.75rem !important;
  width: 8rem !important;
  height: 5.1rem !important;
  opacity: 0.42 !important;
  transform: scale(0.7) !important;
  transform-origin: top right !important;
}

body[data-view="roadmap"] .roadmap-archive::after {
  height: 3.2rem !important;
  opacity: 0.5 !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > .eyebrow,
body[data-view="roadmap"] .roadmap-archive > .eyebrow {
  margin: 0 0 0.25rem !important;
  font-size: 0.62rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > h3,
body[data-view="roadmap"] .roadmap-archive > h3 {
  max-width: 80% !important;
  margin: 0 0 0.32rem !important;
  font-family: inherit !important;
  font-size: 1.05rem !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

body[data-view="roadmap"] .roadmap-archive > h3::after {
  font-size: 0.8em !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow),
body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
  max-width: 74% !important;
  margin: 0 0 0.58rem !important;
  font-size: 0.66rem !important;
  line-height: 1.25 !important;
}

body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow)::after {
  display: none !important;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid,
body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
  gap: 0.5rem !important;
  margin-top: 0.55rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid,
body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-view="roadmap"] .roadmap-tech-card {
  min-height: 4.6rem !important;
  padding: 0.55rem 0.58rem 0.55rem 3.05rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article {
  grid-template-columns: 2rem minmax(0, 1fr) 1.45rem !important;
  gap: 0.5rem !important;
  min-height: 4.6rem !important;
  padding: 0.55rem !important;
  border-radius: 10px !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > span {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 8px !important;
}

body[data-view="roadmap"] .phase4-widget-icon::before {
  width: 1rem !important;
  height: 1rem !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid strong {
  margin-bottom: 0.18rem !important;
  font-size: 0.7rem !important;
  line-height: 1.08 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid small {
  margin-bottom: 0.2rem !important;
  font-size: 0.58rem !important;
  line-height: 1.1 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid p {
  font-size: 0.54rem !important;
  line-height: 1.22 !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > button {
  width: 1.45rem !important;
  height: 1.45rem !important;
  min-height: 1.45rem !important;
  border-width: 1px !important;
}

body[data-view="roadmap"] .roadmap-project-widget-grid article > button::before {
  font-size: 0.78rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button,
body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button {
  position: absolute !important;
  left: 50% !important;
  bottom: 0.9rem !important;
  z-index: 2 !important;
  display: inline-flex !important;
  width: 15rem !important;
  max-width: calc(100% - 2rem) !important;
  height: 2.15rem !important;
  min-height: 2.15rem !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  margin: 0 !important;
  padding: 0.35rem 0.85rem !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #006f54, #00513f) !important;
  color: #ffffff !important;
  font-size: 0.78rem !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 14px 30px rgba(0, 93, 76, 0.24) !important;
}

@media (max-width: 980px) {
  body[data-view="roadmap"] .roadmap-bottom-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel,
  body[data-view="roadmap"] .roadmap-archive {
    min-height: 0 !important;
  }
}

/* Final Roadmap Phase 03/04 compact repair */
body[data-view="roadmap"] .roadmap-bottom-grid {
  align-items: start !important;
}

body[data-view="roadmap"] .roadmap-tech-panel,
body[data-view="roadmap"] .roadmap-archive {
  align-content: start !important;
  align-items: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

@media (min-width: 981px) {
  body[data-view="roadmap"] .roadmap-tech-panel,
  body[data-view="roadmap"] .roadmap-archive {
    gap: 0.72rem !important;
    padding: 1rem 1rem 3.35rem !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel::before {
    right: 0 !important;
    top: 0 !important;
    width: min(32rem, 54%) !important;
    height: 11.4rem !important;
    opacity: 0.78 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel::after {
    background:
      radial-gradient(circle at 4.2rem 15.1rem, rgba(219, 180, 78, 0.4) 0 0.13rem, transparent 0.16rem),
      linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 42%, rgba(255, 255, 255, 0.55) 63%, rgba(255, 255, 255, 0) 92%) !important;
  }

  body[data-view="roadmap"] .roadmap-archive::before {
    right: 0 !important;
    top: 0 !important;
    width: min(31rem, 52%) !important;
    height: 11.2rem !important;
    opacity: 0.66 !important;
    transform: none !important;
  }

  body[data-view="roadmap"] .roadmap-archive::after {
    right: 0 !important;
    bottom: 0 !important;
    height: 5rem !important;
    opacity: 0.6 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > .eyebrow,
  body[data-view="roadmap"] .roadmap-archive > .eyebrow {
    width: max-content !important;
    min-height: 1.9rem !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.34rem 0.8rem !important;
    align-self: start !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-view="roadmap"] .roadmap-archive > .eyebrow::before {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive > .eyebrow::after {
    left: 0.64rem !important;
    width: 0.58rem !important;
    height: 0.58rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > h3,
  body[data-view="roadmap"] .roadmap-archive > h3 {
    max-width: calc(100% - 3.2rem) !important;
    height: auto !important;
    margin: 0 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.28rem, 1.75vw, 1.74rem) !important;
    line-height: 1.05 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow),
  body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
    max-width: min(82%, 39rem) !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    line-height: 1.36 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow)::after {
    width: 5.2rem !important;
    margin-top: 0.58rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow)::after {
    display: none !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid,
  body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
    width: 100% !important;
    gap: 0.55rem !important;
    margin-top: 0.2rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card {
    min-height: 7.4rem !important;
    padding: 0.68rem 0.62rem 0.62rem 3.15rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card > .roadmap-card-icon:first-child,
  body[data-view="roadmap"] .phase03-card-icon {
    left: 0.66rem !important;
    top: 0.66rem !important;
    width: 2.12rem !important;
    height: 2.12rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .eyebrow {
    margin-bottom: 0.25rem !important;
    font-size: 0.54rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card h3 {
    margin-bottom: 0.35rem !important;
    font-size: 0.82rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card p {
    font-size: 0.58rem !important;
    line-height: 1.25 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-icon-chip,
  body[data-view="roadmap"] .roadmap-route-chip,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .scripture-pill,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .status-pill {
    min-height: 1.08rem !important;
    padding: 0.14rem 0.3rem !important;
    font-size: 0.43rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-icon-chip i,
  body[data-view="roadmap"] .roadmap-route-chip i {
    width: 0.75rem !important;
    height: 0.75rem !important;
    font-size: 0.3rem !important;
  }

  body[data-view="roadmap"] .phase03-route-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-view="roadmap"] .phase03-profile-chips {
    padding-top: 0.36rem !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row span,
  body[data-view="roadmap"] .phase03-avatar-row strong {
    width: 1.55rem !important;
    height: 1.55rem !important;
    font-size: 0.5rem !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row strong {
    width: 2.45rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article {
    min-height: 4.05rem !important;
    padding: 0.48rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* Final compact sizing for paired Phase 03 / Phase 04 panels */
@media (min-width: 981px) {
  body[data-view="roadmap"] .roadmap-bottom-grid {
    align-items: stretch !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel,
  body[data-view="roadmap"] .roadmap-archive {
    align-self: stretch !important;
    min-height: 31rem !important;
    height: 31rem !important;
    max-height: 31rem !important;
    padding: 0.95rem 0.95rem 2.9rem !important;
    gap: 0.54rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > h3,
  body[data-view="roadmap"] .roadmap-archive > h3 {
    max-width: calc(100% - 2.8rem) !important;
    font-size: clamp(1.12rem, 1.5vw, 1.48rem) !important;
    line-height: 1.03 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow),
  body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
    max-width: 84% !important;
    font-size: 0.66rem !important;
    line-height: 1.25 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow)::after {
    margin-top: 0.42rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    margin-top: 0 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card {
    min-height: 5.25rem !important;
    max-height: 6.15rem !important;
    padding: 0.46rem 0.44rem 0.44rem 2.55rem !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card > .roadmap-card-icon:first-child,
  body[data-view="roadmap"] .phase03-card-icon {
    left: 0.48rem !important;
    top: 0.48rem !important;
    width: 1.72rem !important;
    height: 1.72rem !important;
    font-size: 0.5rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .roadmap-inline-icon {
    width: 0.9rem !important;
    height: 0.9rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .eyebrow {
    margin-bottom: 0.14rem !important;
    font-size: 0.45rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card h3 {
    margin-bottom: 0.24rem !important;
    font-size: 0.68rem !important;
    line-height: 1.05 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card p {
    font-size: 0.48rem !important;
    line-height: 1.18 !important;
  }

  body[data-view="roadmap"] .phase03-chip-list,
  body[data-view="roadmap"] .phase03-profile-chips,
  body[data-view="roadmap"] .phase03-route-list {
    gap: 0.14rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-icon-chip,
  body[data-view="roadmap"] .roadmap-route-chip,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .scripture-pill,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .status-pill {
    min-height: 0.9rem !important;
    padding: 0.1rem 0.2rem !important;
    gap: 0.14rem !important;
    font-size: 0.35rem !important;
    line-height: 1 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-icon-chip i,
  body[data-view="roadmap"] .roadmap-route-chip i {
    width: 0.62rem !important;
    height: 0.62rem !important;
    font-size: 0.24rem !important;
  }

  body[data-view="roadmap"] .phase03-route-list {
    grid-template-columns: 1fr !important;
  }

  body[data-view="roadmap"] .phase03-profile-chips {
    padding-top: 0.2rem !important;
  }

  body[data-view="roadmap"] .phase03-profile-chip::before,
  body[data-view="roadmap"] .phase03-screen-chip::before,
  body[data-view="roadmap"] .phase03-module-chip::before {
    width: 0.32rem !important;
    height: 0.32rem !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row span,
  body[data-view="roadmap"] .phase03-avatar-row strong {
    width: 1.18rem !important;
    height: 1.18rem !important;
    font-size: 0.4rem !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row strong {
    width: 2rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive {
    grid-template-rows: auto auto auto 1fr auto !important;
  }

  body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
    align-self: end !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
    margin-top: auto !important;
    margin-bottom: 0.15rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article {
    grid-template-columns: 2.15rem minmax(0, 1fr) 1.48rem !important;
    min-height: 4.55rem !important;
    padding: 0.56rem !important;
    gap: 0.5rem !important;
    border-radius: 12px !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > span {
    width: 2.15rem !important;
    height: 2.15rem !important;
    border-radius: 999px !important;
  }

  body[data-view="roadmap"] .phase4-widget-icon::before {
    width: 1.05rem !important;
    height: 1.05rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid strong {
    font-size: 0.72rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid small {
    font-size: 0.6rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid p {
    font-size: 0.54rem !important;
    line-height: 1.18 !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > button {
    width: 1.48rem !important;
    height: 1.48rem !important;
    min-height: 1.48rem !important;
  }
}

/* Phase 04 bottom-aligned widget correction */
body[data-view="roadmap"] .roadmap-bottom-grid {
  align-items: stretch !important;
}

body[data-view="roadmap"] .roadmap-tech-panel,
body[data-view="roadmap"] .roadmap-archive {
  align-self: stretch !important;
}

@media (min-width: 981px) {
  body[data-view="roadmap"] .roadmap-archive {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    row-gap: 0.58rem !important;
    min-height: 100% !important;
    padding-bottom: 3.25rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive > .eyebrow,
  body[data-view="roadmap"] .roadmap-archive > h3,
  body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
    align-self: start !important;
  }

  body[data-view="roadmap"] .roadmap-archive > h3 {
    max-width: min(100%, 34rem) !important;
    font-size: clamp(1.3rem, 1.8vw, 1.82rem) !important;
  }

  body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
    max-width: min(82%, 32rem) !important;
  }

  body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
    align-self: end !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.68rem !important;
    margin-top: auto !important;
    margin-bottom: 0.2rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article {
    grid-template-columns: 2.35rem minmax(0, 1fr) 1.72rem !important;
    gap: 0.56rem !important;
    min-height: 5.15rem !important;
    padding: 0.68rem !important;
    border-radius: 13px !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > span {
    width: 2.35rem !important;
    height: 2.35rem !important;
    border-radius: 10px !important;
  }

  body[data-view="roadmap"] .phase4-widget-icon::before {
    width: 1.18rem !important;
    height: 1.18rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid strong {
    font-size: 0.78rem !important;
    line-height: 1.08 !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid small {
    font-size: 0.66rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid p {
    font-size: 0.6rem !important;
    line-height: 1.22 !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > button {
    width: 1.72rem !important;
    height: 1.72rem !important;
    min-height: 1.72rem !important;
  }
}

/* Roadmap Phase 03/04 compact panel repair */
body[data-view="roadmap"] .roadmap-bottom-grid {
  align-items: start !important;
}

body[data-view="roadmap"] .roadmap-tech-panel,
body[data-view="roadmap"] .roadmap-archive {
  align-content: start !important;
  align-items: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

@media (min-width: 981px) {
  body[data-view="roadmap"] .roadmap-tech-panel,
  body[data-view="roadmap"] .roadmap-archive {
    gap: 0.72rem !important;
    padding: 1rem 1rem 3.35rem !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel::before {
    right: 0 !important;
    top: 0 !important;
    width: min(32rem, 54%) !important;
    height: 11.4rem !important;
    opacity: 0.78 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel::after {
    background:
      radial-gradient(circle at 4.2rem 15.1rem, rgba(219, 180, 78, 0.4) 0 0.13rem, transparent 0.16rem),
      linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 42%, rgba(255, 255, 255, 0.55) 63%, rgba(255, 255, 255, 0) 92%) !important;
  }

  body[data-view="roadmap"] .roadmap-archive::before {
    right: 0 !important;
    top: 0 !important;
    width: min(31rem, 52%) !important;
    height: 11.2rem !important;
    opacity: 0.66 !important;
    transform: none !important;
  }

  body[data-view="roadmap"] .roadmap-archive::after {
    right: 0 !important;
    bottom: 0 !important;
    height: 5rem !important;
    opacity: 0.6 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > .eyebrow,
  body[data-view="roadmap"] .roadmap-archive > .eyebrow {
    width: max-content !important;
    min-height: 1.9rem !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0.34rem 0.8rem !important;
    align-self: start !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-view="roadmap"] .roadmap-archive > .eyebrow::before {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive > .eyebrow::after {
    left: 0.64rem !important;
    width: 0.58rem !important;
    height: 0.58rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > h3,
  body[data-view="roadmap"] .roadmap-archive > h3 {
    max-width: calc(100% - 3.2rem) !important;
    height: auto !important;
    margin: 0 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.28rem, 1.75vw, 1.74rem) !important;
    line-height: 1.05 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow),
  body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
    max-width: min(82%, 39rem) !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    line-height: 1.36 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow)::after {
    width: 5.2rem !important;
    margin-top: 0.58rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow)::after {
    display: none !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid,
  body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
    width: 100% !important;
    gap: 0.55rem !important;
    margin-top: 0.2rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card {
    min-height: 7.4rem !important;
    padding: 0.68rem 0.62rem 0.62rem 3.15rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card > .roadmap-card-icon:first-child,
  body[data-view="roadmap"] .phase03-card-icon {
    left: 0.66rem !important;
    top: 0.66rem !important;
    width: 2.12rem !important;
    height: 2.12rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .eyebrow {
    margin-bottom: 0.25rem !important;
    font-size: 0.54rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card h3 {
    margin-bottom: 0.35rem !important;
    font-size: 0.82rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card p {
    font-size: 0.58rem !important;
    line-height: 1.25 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-icon-chip,
  body[data-view="roadmap"] .roadmap-route-chip,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .scripture-pill,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .status-pill {
    min-height: 1.08rem !important;
    padding: 0.14rem 0.3rem !important;
    font-size: 0.43rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-icon-chip i,
  body[data-view="roadmap"] .roadmap-route-chip i {
    width: 0.75rem !important;
    height: 0.75rem !important;
    font-size: 0.3rem !important;
  }

  body[data-view="roadmap"] .phase03-route-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-view="roadmap"] .phase03-profile-chips {
    padding-top: 0.36rem !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row span,
  body[data-view="roadmap"] .phase03-avatar-row strong {
    width: 1.55rem !important;
    height: 1.55rem !important;
    font-size: 0.5rem !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row strong {
    width: 2.45rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article {
    min-height: 4.05rem !important;
    padding: 0.48rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* Canon Overview premium radar panel */
body[data-view="canon"] .canon-overview-premium {
  position: relative !important;
  min-height: 40rem !important;
  padding: 1.15rem !important;
  overflow: hidden !important;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 100% 13%, rgba(255, 222, 134, 0.32), transparent 24%),
    radial-gradient(circle at 0% 92%, rgba(11, 121, 91, 0.16), transparent 26%),
    linear-gradient(135deg, rgba(255, 253, 241, 0.96), rgba(242, 249, 238, 0.88) 56%, rgba(231, 244, 234, 0.92)) !important;
  box-shadow:
    0 26px 62px rgba(0, 58, 43, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

body[data-view="canon"] .canon-overview-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.88) 0 44%, rgba(255, 255, 255, 0.26) 72%, rgba(2, 77, 58, 0.08)),
    radial-gradient(ellipse at 96% 28%, rgba(230, 211, 154, 0.3), transparent 26%),
    radial-gradient(ellipse at 90% 36%, rgba(92, 126, 98, 0.12), transparent 22%);
  pointer-events: none;
}

body[data-view="canon"] .canon-overview-premium::after {
  content: "";
  position: absolute;
  right: -1.5rem;
  top: 5rem;
  z-index: -1;
  width: 10rem;
  height: 15rem;
  opacity: 0.24;
  background:
    linear-gradient(140deg, transparent 0 34%, rgba(138, 119, 66, 0.3) 35% 36%, transparent 37%),
    repeating-linear-gradient(168deg, rgba(99, 119, 82, 0.12) 0 1px, transparent 1px 12px);
  clip-path: ellipse(48% 44% at 58% 42%);
  transform: rotate(-10deg);
  pointer-events: none;
}

body[data-view="canon"] .canon-overview-header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: start;
  margin-bottom: 0.6rem;
}

body[data-view="canon"] .canon-overview-header h4 {
  margin: 0 !important;
  color: #073f33 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 4.6vw, 2.35rem);
  font-weight: 900;
  line-height: 1.02;
}

body[data-view="canon"] .canon-overview-header p {
  margin: 0.28rem 0 0;
  color: rgba(31, 55, 52, 0.72);
  font-size: 0.95rem;
  line-height: 1.32;
}

body[data-view="canon"] .canon-overview-title-icon,
body[data-view="canon"] .canon-overview-info,
body[data-view="canon"] .canon-overview-dimension > span,
body[data-view="canon"] .canon-maturity-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 236, 156, 0.82), transparent 31%),
    linear-gradient(145deg, #006a51, #003b31);
  color: #f5d772;
  box-shadow:
    0 13px 24px rgba(0, 63, 45, 0.2),
    inset 0 0 0 1px rgba(255, 216, 118, 0.55),
    inset 0 0 0 5px rgba(0, 38, 29, 0.12);
}

body[data-view="canon"] .canon-overview-title-icon {
  width: 3.05rem;
  height: 3.05rem;
  margin-top: 0.05rem;
}

body[data-view="canon"] .canon-overview-title-icon::before,
body[data-view="canon"] .canon-overview-dimension > span::before,
body[data-view="canon"] .canon-maturity-icon::before,
body[data-view="canon"] .canon-overview-core i::before {
  content: "";
  width: 55%;
  height: 55%;
  background: currentColor;
  -webkit-mask: var(--canon-icon) center / contain no-repeat;
  mask: var(--canon-icon) center / contain no-repeat;
}

body[data-view="canon"] [data-icon="scroll"] {
  --canon-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h12a2 2 0 0 1 2 2v11a5 5 0 0 1-5 5H7a4 4 0 0 1-4-4V6a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v11a1.8 1.8 0 0 0 1.8 2H16a3 3 0 0 0 3-3V5H7Zm2 4h7v2H9V9Zm0 4h6v2H9v-2Z'/%3E%3C/svg%3E");
}

body[data-view="canon"] [data-icon="compass"],
body[data-view="canon"] .canon-overview-core i {
  --canon-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 9.9 6.7 5 8.1l4.3 2.6L8.9 16l3.1-4.2 3.1 4.2-.4-5.3L19 8.1l-4.9-1.4L12 2Zm0 5.5 1.1 2.8 2.8 1.1-2.8 1.1L12 15.3l-1.1-2.8-2.8-1.1 2.8-1.1L12 7.5ZM12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z'/%3E%3C/svg%3E");
}

body[data-view="canon"] [data-icon="target"] {
  --canon-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21a9 9 0 1 1 8.8-10.9h-2.1A7 7 0 1 0 13.9 19v-2.1A5 5 0 1 1 16.9 14h-2.3A3 3 0 1 0 12 15v6Zm6-9h-5.2l3-3H18V6.8l3-3V9h-3v3Z'/%3E%3C/svg%3E");
}

body[data-view="canon"] [data-icon="book"] {
  --canon-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4.5A3.5 3.5 0 0 1 7.5 1H11a2 2 0 0 1 2 2v17a2 2 0 0 0-2-2H7.5A3.5 3.5 0 0 0 4 21.5v-17Zm13.5-3H14a2 2 0 0 0-2 2v17a2 2 0 0 1 2-2h3.5a3.5 3.5 0 0 1 3.5 3.5V4.5A3.5 3.5 0 0 0 17.5 1.5ZM6 4.5A1.5 1.5 0 0 1 7.5 3H11v13H7.5A5.5 5.5 0 0 0 6 16.2V4.5Zm12 11.7a5.5 5.5 0 0 0-1.5-.2H14V3h2.5A1.5 1.5 0 0 1 18 4.5v11.7Z'/%3E%3C/svg%3E");
}

body[data-view="canon"] [data-icon="crown"] {
  --canon-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 7 5 4 4-7 4 7 5-4-2 11H5L3 7Zm4 13h10v2H7v-2Zm.6-4h8.8l.8-4.3-2.1 1.7-3.1-5.5-3.1 5.5-2.1-1.7.8 4.3Z'/%3E%3C/svg%3E");
}

body[data-view="canon"] [data-icon="shield"] {
  --canon-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C7.1 20.1 4 15.7 4 10.4V4l8-2 8 2v6.4c0 5.3-3.1 9.7-8 11.6Zm0-2.2c3.7-1.7 6-5.2 6-9.4V5.6l-6-1.5-6 1.5v4.8c0 4.2 2.3 7.7 6 9.4Zm-1.1-5-3-3 1.4-1.4 1.6 1.6 3.8-4 1.4 1.4-5.2 5.4Z'/%3E%3C/svg%3E");
}

body[data-view="canon"] [data-icon="trend"] {
  --canon-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19h16v2H2V3h2v16Zm2-3 4.4-5.2 3.4 3.1L19 7.2V11h2V4h-7v2h3.6l-4 5.2-3.4-3.1L4.5 15 6 16Z'/%3E%3C/svg%3E");
}

body[data-view="canon"] .canon-overview-info {
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid rgba(0, 82, 61, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: #5c8172;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 900;
  box-shadow:
    0 12px 22px rgba(0, 54, 40, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

body[data-view="canon"] .canon-overview-diagram {
  position: relative;
  z-index: 2;
  height: 24.5rem;
  margin: 0.4rem 0 1rem;
}

body[data-view="canon"] .canon-overview-radar-svg {
  position: absolute;
  top: 52%;
  left: 50%;
  width: min(20rem, 88%);
  max-width: 100%;
  height: auto;
  overflow: visible;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 22px 34px rgba(0, 87, 61, 0.09));
}

body[data-view="canon"] .canon-overview-ring {
  fill: none;
  stroke: rgba(0, 91, 68, 0.18);
  stroke-width: 1;
}

body[data-view="canon"] .canon-overview-ring.ring-outer {
  stroke-dasharray: 3 5;
  stroke: rgba(0, 91, 68, 0.22);
}

body[data-view="canon"] .canon-overview-ring.ring-mid,
body[data-view="canon"] .canon-overview-ring.ring-core {
  stroke: rgba(221, 189, 92, 0.34);
}

body[data-view="canon"] .canon-overview-axis {
  stroke: rgba(0, 94, 70, 0.18);
  stroke-width: 1;
}

body[data-view="canon"] .canon-overview-radar-max {
  fill: url(#canonRadarGlow);
  stroke: rgba(216, 183, 84, 0.36);
  stroke-width: 1.2;
}

body[data-view="canon"] .canon-overview-radar-value {
  fill: url(#canonRadarFill);
  stroke: rgba(0, 132, 93, 0.66);
  stroke-width: 2;
  stroke-linejoin: round;
}

body[data-view="canon"] .canon-overview-node {
  fill: #fffbe8;
  stroke: #e5bd54;
  stroke-width: 2;
  filter: url(#canonRadarNodeGlow);
  transform-box: fill-box;
  transform-origin: center;
  animation: canonOverviewNodePulse 2.8s ease-in-out infinite;
}

body[data-view="canon"] .canon-overview-core {
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 7.15rem;
  height: 7.15rem;
  place-items: center;
  border: 2px solid rgba(229, 190, 86, 0.74);
  border-radius: 999px;
  background:
    radial-gradient(circle at 38% 18%, rgba(255, 241, 167, 0.24), transparent 30%),
    linear-gradient(145deg, #007352, #00392f);
  color: #fff8df;
  transform: translate(-50%, -50%);
  box-shadow:
    0 20px 42px rgba(0, 58, 43, 0.24),
    0 0 0 1rem rgba(0, 105, 75, 0.08),
    0 0 0 2.1rem rgba(0, 105, 75, 0.045),
    inset 0 -18px 38px rgba(0, 18, 13, 0.18);
  animation: canonOverviewBreathe 4.8s ease-in-out infinite;
}

body[data-view="canon"] .canon-overview-core i {
  display: grid;
  width: 2.05rem;
  height: 2.05rem;
  place-items: center;
  margin-bottom: -1.25rem;
  color: #f2d16d;
}

body[data-view="canon"] .canon-overview-core strong {
  margin-top: 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.05rem;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 2px 10px rgba(0, 28, 20, 0.18);
}

body[data-view="canon"] .canon-overview-dimension {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 6.65rem;
  min-height: 5.05rem;
  justify-items: center;
  align-content: center;
  padding: 1.35rem 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.74);
  color: #0a3e33;
  text-align: center;
  box-shadow:
    0 17px 34px rgba(0, 53, 40, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(15px);
  transition:
    transform 250ms ease,
    box-shadow 250ms ease,
    border-color 250ms ease,
    filter 250ms ease;
  will-change: transform;
}

body[data-view="canon"] .canon-overview-dimension::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 2.25rem;
  background: linear-gradient(180deg, rgba(0, 105, 76, 0.25), transparent);
  transform: translateX(-50%);
}

body[data-view="canon"] .canon-overview-dimension > span {
  position: absolute;
  top: -1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  color: #f6d46b;
}

body[data-view="canon"] .canon-overview-dimension strong {
  color: #193932;
  font-size: 1rem;
  font-weight: 1000;
  line-height: 1.05;
}

body[data-view="canon"] .canon-overview-dimension b {
  margin-top: 0.25rem;
  color: #00815b;
  font-size: 1.55rem;
  font-weight: 1000;
  line-height: 1;
}

body[data-view="canon"] .canon-overview-dimension:hover,
body[data-view="canon"] .canon-overview-dimension:focus-visible {
  border-color: rgba(7, 129, 93, 0.32);
  filter: brightness(1.03);
  box-shadow:
    0 22px 42px rgba(0, 66, 50, 0.16),
    0 0 24px rgba(16, 185, 129, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body[data-view="canon"] .canon-dim-calling {
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
}

body[data-view="canon"] .canon-dim-calling:hover,
body[data-view="canon"] .canon-dim-calling:focus-visible {
  transform: translateX(-50%) translateY(-6px) scale(1.04);
}

body[data-view="canon"] .canon-dim-purpose {
  top: 34%;
  right: 0.1rem;
}

body[data-view="canon"] .canon-dim-purpose:hover,
body[data-view="canon"] .canon-dim-purpose:focus-visible,
body[data-view="canon"] .canon-dim-wisdom:hover,
body[data-view="canon"] .canon-dim-wisdom:focus-visible,
body[data-view="canon"] .canon-dim-dominion:hover,
body[data-view="canon"] .canon-dim-dominion:focus-visible,
body[data-view="canon"] .canon-dim-legacy:hover,
body[data-view="canon"] .canon-dim-legacy:focus-visible {
  transform: translateY(-6px) scale(1.04);
}

body[data-view="canon"] .canon-dim-wisdom {
  right: 0.65rem;
  bottom: 1.05rem;
}

body[data-view="canon"] .canon-dim-dominion {
  bottom: 1.05rem;
  left: 0.65rem;
}

body[data-view="canon"] .canon-dim-legacy {
  top: 34%;
  left: 0.1rem;
}

body[data-view="canon"] .canon-dim-wisdom::after,
body[data-view="canon"] .canon-dim-dominion::after {
  top: auto;
  bottom: 100%;
  background: linear-gradient(0deg, rgba(0, 105, 76, 0.25), transparent);
}

body[data-view="canon"] .canon-overview-maturity {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  min-height: 7rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    0 18px 38px rgba(0, 53, 40, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
}

body[data-view="canon"] .canon-maturity-icon {
  width: 3.2rem;
  height: 3.2rem;
  color: #f5d16b;
}

body[data-view="canon"] .canon-maturity-copy {
  min-width: 0;
}

body[data-view="canon"] .canon-maturity-copy strong {
  display: block;
  color: #0b3f33;
  font-size: 1.08rem;
  font-weight: 1000;
}

body[data-view="canon"] .canon-maturity-copy span {
  display: block;
  margin-top: 0.16rem;
  color: rgba(42, 63, 59, 0.72);
  font-size: 0.82rem;
}

body[data-view="canon"] .canon-maturity-bar {
  position: relative;
  height: 0.55rem;
  margin-top: 0.85rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 91, 67, 0.12);
}

body[data-view="canon"] .canon-maturity-bar i {
  display: block;
  width: var(--canon-maturity);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #006c50, #10a778);
  box-shadow: 0 0 18px rgba(16, 167, 120, 0.2);
}

body[data-view="canon"] .canon-maturity-ring {
  position: relative;
  display: grid;
  width: 4.65rem;
  height: 4.65rem;
  place-items: center;
  border-radius: 999px;
  background: conic-gradient(#0b936b var(--canon-maturity-deg), rgba(0, 94, 70, 0.14) 0deg);
  box-shadow: inset 0 0 0 1px rgba(0, 83, 62, 0.06);
}

body[data-view="canon"] .canon-maturity-ring::before {
  content: "";
  position: absolute;
  inset: 0.65rem;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body[data-view="canon"] .canon-maturity-ring strong {
  position: relative;
  z-index: 1;
  color: #083d32;
  font-size: 1.25rem;
  font-weight: 1000;
}

body[data-view="canon"] .canon-overview-native-progress {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes canonOverviewBreathe {
  0%,
  100% {
    box-shadow:
      0 20px 42px rgba(0, 58, 43, 0.24),
      0 0 0 1rem rgba(0, 105, 75, 0.08),
      0 0 0 2.1rem rgba(0, 105, 75, 0.045),
      inset 0 -18px 38px rgba(0, 18, 13, 0.18);
  }

  50% {
    box-shadow:
      0 24px 48px rgba(0, 58, 43, 0.28),
      0 0 0 1.18rem rgba(0, 105, 75, 0.1),
      0 0 0 2.35rem rgba(0, 105, 75, 0.055),
      inset 0 -18px 38px rgba(0, 18, 13, 0.16);
  }
}

@keyframes canonOverviewNodePulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.18);
  }
}

@media (max-width: 1180px) {
  body[data-view="canon"] .canon-overview-premium {
    min-height: 38rem !important;
  }

  body[data-view="canon"] .canon-overview-diagram {
    height: 23rem;
  }
}

@media (max-width: 760px) {
  body[data-view="canon"] .canon-overview-premium {
    min-height: 0 !important;
  }

  body[data-view="canon"] .canon-overview-header {
    grid-template-columns: auto 1fr;
  }

  body[data-view="canon"] .canon-overview-info {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -0.4rem;
  }

  body[data-view="canon"] .canon-overview-diagram {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
    height: auto;
    padding-top: 17.25rem;
  }

  body[data-view="canon"] .canon-overview-radar-svg {
    top: 8.3rem;
    width: min(17rem, 88%);
  }

  body[data-view="canon"] .canon-overview-core {
    top: 8.3rem;
    width: 6.15rem;
    height: 6.15rem;
  }

  body[data-view="canon"] .canon-overview-core strong {
    font-size: 1.72rem;
  }

  body[data-view="canon"] .canon-overview-dimension,
  body[data-view="canon"] .canon-dim-calling,
  body[data-view="canon"] .canon-dim-purpose,
  body[data-view="canon"] .canon-dim-wisdom,
  body[data-view="canon"] .canon-dim-dominion,
  body[data-view="canon"] .canon-dim-legacy {
    position: relative;
    inset: auto;
    width: auto;
    transform: none;
  }

  body[data-view="canon"] .canon-dim-calling {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(11rem, 100%);
  }

  body[data-view="canon"] .canon-overview-dimension::after {
    display: none;
  }

  body[data-view="canon"] .canon-overview-dimension:hover,
  body[data-view="canon"] .canon-overview-dimension:focus-visible,
  body[data-view="canon"] .canon-dim-calling:hover,
  body[data-view="canon"] .canon-dim-calling:focus-visible,
  body[data-view="canon"] .canon-dim-purpose:hover,
  body[data-view="canon"] .canon-dim-purpose:focus-visible,
  body[data-view="canon"] .canon-dim-wisdom:hover,
  body[data-view="canon"] .canon-dim-wisdom:focus-visible,
  body[data-view="canon"] .canon-dim-dominion:hover,
  body[data-view="canon"] .canon-dim-dominion:focus-visible,
  body[data-view="canon"] .canon-dim-legacy:hover,
  body[data-view="canon"] .canon-dim-legacy:focus-visible {
    transform: translateY(-5px) scale(1.02);
  }

  body[data-view="canon"] .canon-overview-maturity {
    grid-template-columns: auto 1fr;
  }

  body[data-view="canon"] .canon-maturity-ring {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="canon"] .canon-overview-core,
  body[data-view="canon"] .canon-overview-node,
  body[data-view="canon"] .canon-overview-dimension {
    animation: none !important;
    transition: none !important;
  }
}

/* Lexicon overview premium panel and repaired alphabet navigation. */
body[data-view="lexicon"] .lexicon-overview-card {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 20px !important;
  background: transparent !important;
}

body[data-view="lexicon"] .lexicon-overview-premium {
  position: relative;
  display: grid;
  gap: 1rem;
  min-height: 31rem;
  padding: 1.05rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 26%, rgba(226, 207, 139, 0.24), transparent 26%),
    radial-gradient(circle at 4% 92%, rgba(0, 104, 78, 0.16), transparent 28%),
    linear-gradient(145deg, rgba(255, 253, 241, 0.96), rgba(239, 248, 239, 0.9) 58%, rgba(224, 241, 229, 0.92));
  box-shadow:
    0 25px 58px rgba(0, 58, 43, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-view="lexicon"] .lexicon-overview-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.9) 0 45%, rgba(255, 255, 255, 0.38) 69%, rgba(0, 85, 63, 0.13)),
    radial-gradient(circle at 7% 6%, rgba(255, 230, 145, 0.42), transparent 21%),
    radial-gradient(circle at 82% 76%, rgba(5, 80, 62, 0.13), transparent 28%);
  pointer-events: none;
}

body[data-view="lexicon"] .lexicon-overview-premium::after {
  content: "";
  position: absolute;
  right: -1rem;
  top: 5.3rem;
  z-index: -1;
  width: 10.4rem;
  height: 15rem;
  opacity: 0.28;
  background:
    linear-gradient(130deg, transparent 0 38%, rgba(129, 101, 54, 0.22) 39% 40%, transparent 41%),
    repeating-linear-gradient(172deg, rgba(75, 91, 73, 0.12) 0 1px, transparent 1px 11px);
  clip-path: ellipse(48% 42% at 58% 46%);
  transform: rotate(-8deg);
  pointer-events: none;
}

body[data-view="lexicon"] .lexicon-overview-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: center;
}

body[data-view="lexicon"] .lexicon-overview-head h4 {
  margin: 0 !important;
  color: #073f33 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 900;
  line-height: 1.02;
}

body[data-view="lexicon"] .lexicon-overview-head p {
  margin: 0.24rem 0 0;
  color: rgba(34, 55, 53, 0.72);
  font-size: 0.88rem;
  line-height: 1.35;
}

body[data-view="lexicon"] .lexicon-overview-icon,
body[data-view="lexicon"] .lexicon-overview-stats article > span {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 239, 171, 0.86), transparent 31%),
    linear-gradient(145deg, #007254, #003d31);
  color: #f2d371;
  box-shadow:
    0 14px 28px rgba(0, 63, 45, 0.21),
    inset 0 0 0 1px rgba(255, 216, 118, 0.68),
    inset 0 0 0 5px rgba(0, 38, 29, 0.12);
}

body[data-view="lexicon"] .lexicon-overview-icon {
  width: 3.6rem;
  height: 3.6rem;
}

body[data-view="lexicon"] .lexicon-overview-icon::before,
body[data-view="lexicon"] .lexicon-overview-stats article > span::before,
body[data-view="lexicon"] .lexicon-overview-ring div span::before {
  content: "";
  width: 56%;
  height: 56%;
  background: currentColor;
  -webkit-mask: var(--lexicon-panel-icon) center / contain no-repeat;
  mask: var(--lexicon-panel-icon) center / contain no-repeat;
}

body[data-view="lexicon"] [data-lexicon-icon="book"],
body[data-view="lexicon"] [data-lexicon-icon="open-book"] {
  --lexicon-panel-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4.5A3.5 3.5 0 0 1 7.5 1H11a2 2 0 0 1 2 2v17a2 2 0 0 0-2-2H7.5A3.5 3.5 0 0 0 4 21.5v-17Zm13.5-3H14a2 2 0 0 0-2 2v17a2 2 0 0 1 2-2h3.5a3.5 3.5 0 0 1 3.5 3.5V4.5A3.5 3.5 0 0 0 17.5 1.5ZM6 4.5A1.5 1.5 0 0 1 7.5 3H11v13H7.5A5.5 5.5 0 0 0 6 16.2V4.5Zm12 11.7a5.5 5.5 0 0 0-1.5-.2H14V3h2.5A1.5 1.5 0 0 1 18 4.5v11.7Z'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] [data-lexicon-icon="sprout"],
body[data-view="lexicon"] .lexicon-overview-ring div span {
  --lexicon-panel-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 21h-2v-6.2C7.1 14.3 4 11 4 7V5h2c3.1 0 5.8 1.8 7 4.4C14.2 6.8 16.9 5 20 5h2v2c0 4-3.1 7.3-7 7.8V21Zm-2.2-8.3C10.2 9.6 8.3 7.7 6 7.1 6.1 9.9 8.1 12.1 10.8 12.7Zm2.4 0c2.7-.6 4.7-2.8 4.8-5.6-2.3.6-4.2 2.5-4.8 5.6Z'/%3E%3C/svg%3E");
}

body[data-view="lexicon"] .lexicon-overview-progress {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0.4rem 0 0.1rem;
}

body[data-view="lexicon"] .lexicon-overview-ring {
  position: relative;
  display: grid;
  width: min(15.5rem, 100%);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 45%, rgba(255, 255, 255, 0) 46%),
    conic-gradient(from -90deg, #006a50 var(--lexicon-progress-deg), rgba(222, 236, 227, 0.84) 0);
  box-shadow:
    0 0 0 1px rgba(232, 197, 102, 0.45),
    0 18px 36px rgba(0, 80, 59, 0.14),
    0 0 34px rgba(235, 203, 103, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  animation: lexiconOverviewPulse 4.5s ease-in-out infinite;
}

body[data-view="lexicon"] .lexicon-overview-ring::before {
  content: "";
  position: absolute;
  inset: 1.55rem;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.94), rgba(255, 255, 247, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -16px 34px rgba(0, 80, 59, 0.05);
}

body[data-view="lexicon"] .lexicon-overview-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

body[data-view="lexicon"] .lexicon-overview-track,
body[data-view="lexicon"] .lexicon-overview-fill {
  fill: none;
  stroke-width: 16;
}

body[data-view="lexicon"] .lexicon-overview-track {
  stroke: rgba(0, 83, 61, 0.08);
}

body[data-view="lexicon"] .lexicon-overview-fill {
  stroke: url(#lexiconOverviewStroke);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: var(--lexicon-progress-offset);
  filter: drop-shadow(0 0 12px rgba(222, 184, 75, 0.28));
  transition: stroke-dashoffset 350ms ease;
}

body[data-view="lexicon"] .lexicon-overview-ring div {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
}

body[data-view="lexicon"] .lexicon-overview-ring strong {
  color: #064033;
  font-size: clamp(2.7rem, 10vw, 4.1rem);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 16px rgba(0, 65, 47, 0.08);
}

body[data-view="lexicon"] .lexicon-overview-ring div span {
  position: relative;
  display: grid;
  width: 4.9rem;
  height: 1.3rem;
  place-items: center;
  margin: 0.65rem 0 0.36rem;
  color: #d1a950;
}

body[data-view="lexicon"] .lexicon-overview-ring div span::before {
  width: 1rem;
  height: 1rem;
}

body[data-view="lexicon"] .lexicon-overview-ring div span::after {
  content: "";
  position: absolute;
  width: 4.8rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 168, 76, 0.7), transparent);
}

body[data-view="lexicon"] .lexicon-overview-ring b {
  color: #006044;
  font-size: 1.15rem;
  font-weight: 1000;
}

body[data-view="lexicon"] .lexicon-overview-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 18px 34px rgba(0, 62, 45, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
}

body[data-view="lexicon"] .lexicon-overview-stats article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.72rem;
  align-items: center;
  min-width: 0;
  padding: 0.9rem 0.75rem;
}

body[data-view="lexicon"] .lexicon-overview-stats article + article {
  border-left: 1px solid rgba(217, 178, 80, 0.28);
}

body[data-view="lexicon"] .lexicon-overview-stats article > span {
  width: 2.95rem;
  height: 2.95rem;
}

body[data-view="lexicon"] .lexicon-overview-stats strong {
  display: block;
  color: #074032;
  font-size: 1.75rem;
  font-weight: 1000;
  line-height: 1;
}

body[data-view="lexicon"] .lexicon-overview-stats b,
body[data-view="lexicon"] .lexicon-overview-stats small {
  display: block;
}

body[data-view="lexicon"] .lexicon-overview-stats b {
  margin-top: 0.25rem;
  color: #37413f;
  font-size: 0.8rem;
  font-weight: 1000;
}

body[data-view="lexicon"] .lexicon-overview-stats small {
  margin-top: 0.16rem;
  color: rgba(58, 70, 68, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

body[data-view="lexicon"] .lexicon-overview-footer {
  position: relative;
  z-index: 2;
  margin: 0.15rem auto 0;
  max-width: 18rem;
  color: #006044;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.45;
  text-align: center;
}

body[data-view="lexicon"] .lexicon-overview-footer::after {
  content: "";
  display: block;
  width: 5rem;
  height: 1px;
  margin: 0.62rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(210, 168, 76, 0.78), transparent);
}

body[data-view="lexicon"] .lexicon-alpha-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.85rem !important;
  align-items: center !important;
  overflow: visible;
  border-color: rgba(0, 98, 73, 0.1) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(244, 250, 246, 0.92)) !important;
}

body[data-view="lexicon"] .lexicon-alpha-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.32rem;
  align-items: center;
  min-width: 0;
}

body[data-view="lexicon"] .lexicon-alpha-tabs button {
  min-width: 2.05rem;
  min-height: 2.05rem;
  padding: 0 0.62rem;
  border: 1px solid rgba(0, 82, 61, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 250, 247, 0.92));
  color: #0b3d32;
  font-size: 0.74rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 50, 38, 0.06);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    color 220ms ease,
    filter 220ms ease;
  will-change: transform;
}

body[data-view="lexicon"] .lexicon-alpha-tabs button:hover,
body[data-view="lexicon"] .lexicon-alpha-tabs button:focus-visible {
  border-color: rgba(215, 171, 72, 0.65);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 226, 134, 0.36), transparent 56%),
    linear-gradient(145deg, #ffffff, #f8fbf4);
  filter: brightness(1.03);
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 12px 24px rgba(0, 59, 45, 0.12),
    0 0 18px rgba(215, 171, 72, 0.18);
}

body[data-view="lexicon"] .lexicon-alpha-tabs button.active,
body[data-view="lexicon"] .lexicon-alpha-tabs button[aria-selected="true"] {
  border-color: rgba(230, 190, 85, 0.78);
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 232, 150, 0.28), transparent 42%),
    linear-gradient(145deg, #008464, #00513f);
  color: #ffffff;
  box-shadow:
    0 13px 25px rgba(0, 85, 64, 0.2),
    0 0 20px rgba(16, 185, 129, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body[data-view="lexicon"] .lexicon-alpha-tabs button.active:hover,
body[data-view="lexicon"] .lexicon-alpha-tabs button.active:focus-visible {
  transform: translateY(-3px) scale(1.04);
}

body[data-view="lexicon"] .lexicon-view-toggle {
  flex-shrink: 0;
}

@keyframes lexiconOverviewPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(232, 197, 102, 0.45),
      0 18px 36px rgba(0, 80, 59, 0.14),
      0 0 34px rgba(235, 203, 103, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(232, 197, 102, 0.68),
      0 22px 42px rgba(0, 80, 59, 0.18),
      0 0 44px rgba(235, 203, 103, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);
  }
}

@media (max-width: 1200px) {
  body[data-view="lexicon"] .lexicon-overview-premium {
    min-height: 29rem;
  }

  body[data-view="lexicon"] .lexicon-overview-ring {
    width: min(13rem, 100%);
  }

  body[data-view="lexicon"] .lexicon-overview-stats {
    grid-template-columns: 1fr;
  }

  body[data-view="lexicon"] .lexicon-overview-stats article + article {
    border-top: 1px solid rgba(217, 178, 80, 0.28);
    border-left: 0;
  }
}

@media (max-width: 980px) {
  body[data-view="lexicon"] .lexicon-overview-premium {
    min-height: 0;
  }

  body[data-view="lexicon"] .lexicon-overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="lexicon"] .lexicon-overview-stats article + article {
    border-top: 0;
    border-left: 1px solid rgba(217, 178, 80, 0.28);
  }
}

@media (max-width: 620px) {
  body[data-view="lexicon"] .lexicon-alpha-card {
    grid-template-columns: 1fr !important;
  }

  body[data-view="lexicon"] .lexicon-view-toggle {
    justify-self: end;
  }

  body[data-view="lexicon"] .lexicon-overview-head {
    align-items: start;
  }

  body[data-view="lexicon"] .lexicon-overview-icon {
    width: 3rem;
    height: 3rem;
  }

  body[data-view="lexicon"] .lexicon-overview-stats {
    grid-template-columns: 1fr;
  }

  body[data-view="lexicon"] .lexicon-overview-stats article + article {
    border-top: 1px solid rgba(217, 178, 80, 0.28);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="lexicon"] .lexicon-overview-ring,
  body[data-view="lexicon"] .lexicon-alpha-tabs button {
    animation: none !important;
    transition: none !important;
  }
}

/* Phase 03 Roadmap technical architecture redesign */
body[data-view="roadmap"] .roadmap-tech-panel {
  position: relative !important;
  isolation: isolate !important;
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 1.45rem !important;
  min-height: 0 !important;
  padding: clamp(1.45rem, 2.4vw, 2.65rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(5, 94, 72, 0.12) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 42%, rgba(255, 255, 255, 0.66) 65%, rgba(255, 255, 255, 0.22) 100%),
    radial-gradient(circle at 77% 12%, rgba(255, 225, 133, 0.74), transparent 10rem),
    radial-gradient(circle at 91% 7%, rgba(255, 255, 245, 0.95), transparent 5rem),
    linear-gradient(155deg, #fbfdf9 0%, #f7fbf6 54%, #e7f1e5 100%) !important;
  box-shadow:
    0 30px 80px rgba(16, 33, 31, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

body[data-view="roadmap"] .roadmap-tech-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto auto !important;
  z-index: -2 !important;
  width: min(52rem, 58%) !important;
  height: 20rem !important;
  background:
    radial-gradient(circle at 73% 19%, rgba(255, 250, 213, 0.95) 0 2.2rem, rgba(245, 190, 77, 0.44) 2.3rem 5.4rem, transparent 5.5rem),
    radial-gradient(ellipse at 71% 40%, rgba(255, 221, 139, 0.58), transparent 12rem),
    linear-gradient(145deg, transparent 0 41%, rgba(38, 87, 55, 0.38) 41% 47%, transparent 47%),
    linear-gradient(160deg, transparent 0 48%, rgba(79, 123, 67, 0.44) 48% 54%, transparent 54%),
    linear-gradient(20deg, transparent 0 59%, rgba(18, 93, 65, 0.68) 59% 73%, transparent 73%),
    radial-gradient(ellipse at 82% 83%, rgba(0, 85, 60, 0.52), transparent 15rem),
    linear-gradient(180deg, #f6edca 0%, #b8d2a0 48%, #547b54 100%) !important;
  clip-path: polygon(19% 0, 100% 0, 100% 100%, 0 100%, 0 44%) !important;
  opacity: 0.72 !important;
  filter: saturate(1.12) contrast(1.03) !important;
  animation: phase03Atmosphere 18s ease-in-out infinite alternate !important;
}

body[data-view="roadmap"] .roadmap-tech-panel::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 4.2rem 15.1rem, rgba(219, 180, 78, 0.55) 0 0.13rem, transparent 0.16rem),
    radial-gradient(circle at 13rem 2.9rem, rgba(255, 225, 134, 0.42) 0 0.11rem, transparent 0.15rem),
    linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.96) 40%, rgba(255, 255, 255, 0.76) 62%, rgba(255, 255, 255, 0) 86%) !important;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-panel-menu {
  position: absolute !important;
  top: clamp(1.15rem, 2vw, 2rem) !important;
  right: clamp(1.15rem, 2vw, 2rem) !important;
  display: grid !important;
  width: 3.35rem !important;
  height: 3.35rem !important;
  place-items: center !important;
  border: 1px solid rgba(224, 177, 64, 0.6) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: transparent !important;
  box-shadow: 0 16px 38px rgba(6, 75, 58, 0.16), 0 0 0 5px rgba(255, 255, 255, 0.32) !important;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-panel-menu::before {
  content: "\2699" !important;
  color: #006f54 !important;
  font-size: 1.45rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > .eyebrow {
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-height: 2.25rem !important;
  margin: 0 !important;
  padding: 0.42rem 1rem !important;
  border: 1px solid rgba(219, 176, 66, 0.48) !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #007957, #004c43) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0, 83, 62, 0.25), 0 0 18px rgba(219, 176, 66, 0.22) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.05em !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > .eyebrow::before {
  content: "\2726" !important;
  color: #ffe19a !important;
  font-size: 0.98rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > h3 {
  max-width: 45rem !important;
  margin: 0 !important;
  color: #0a3228 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2rem, 4.2vw, 3.85rem) !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > h3::after {
  content: " \1F331" !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
  font-size: 0.64em !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow) {
  max-width: 43rem !important;
  margin: -0.45rem 0 0 !important;
  color: #334641 !important;
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  line-height: 1.72 !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow)::after {
  content: "" !important;
  display: block !important;
  width: 7.8rem !important;
  height: 0.16rem !important;
  margin-top: 1.35rem !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #005d4c 0 42%, #e2b84e 42% 48%, rgba(226, 184, 78, 0.24) 48% 100%) !important;
  box-shadow: 0 0 20px rgba(226, 184, 78, 0.26) !important;
}

body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  margin: 0 !important;
}

body[data-view="roadmap"] .roadmap-tech-card.phase03-card {
  position: relative !important;
  display: grid !important;
  align-content: start !important;
  min-height: 14.7rem !important;
  padding: 1.55rem 1.45rem 1.35rem 6.15rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(7, 91, 70, 0.12) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68)),
    radial-gradient(circle at 100% 0%, rgba(226, 184, 78, 0.16), transparent 9rem) !important;
  box-shadow: 0 18px 46px rgba(16, 33, 31, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(15px) !important;
  animation: phase03CardIn 560ms ease both !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

body[data-view="roadmap"] .roadmap-tech-card.phase03-card:hover,
body[data-view="roadmap"] .roadmap-tech-card.phase03-card:focus-within {
  transform: translateY(-4px) scale(1.018) !important;
  border-color: rgba(222, 178, 65, 0.48) !important;
  box-shadow: 0 24px 58px rgba(16, 33, 31, 0.15), 0 0 28px rgba(222, 178, 65, 0.18) !important;
}

body[data-view="roadmap"] .phase03-card:nth-child(2) { animation-delay: 60ms !important; }
body[data-view="roadmap"] .phase03-card:nth-child(3) { animation-delay: 120ms !important; }
body[data-view="roadmap"] .phase03-card:nth-child(4) { animation-delay: 180ms !important; }
body[data-view="roadmap"] .phase03-card:nth-child(5) { animation-delay: 240ms !important; }
body[data-view="roadmap"] .phase03-card:nth-child(6) { animation-delay: 300ms !important; }

body[data-view="roadmap"] .roadmap-tech-card.phase03-card > .roadmap-card-icon:first-child,
body[data-view="roadmap"] .phase03-card-icon {
  position: absolute !important;
  left: 1.35rem !important;
  top: 1.35rem !important;
  display: grid !important;
  width: 4.15rem !important;
  height: 4.15rem !important;
  place-items: center !important;
  border: 1px solid rgba(222, 178, 65, 0.9) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 36% 28%, #0b8b62, #004a41 72%) !important;
  color: #f8d66d !important;
  font-size: 0.96rem !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 14px 24px rgba(0, 78, 58, 0.24), 0 0 20px rgba(225, 181, 63, 0.2) !important;
}

body[data-view="roadmap"] .phase03-modules-card > .roadmap-card-icon:not(.phase03-card-icon) {
  display: none !important;
}

body[data-view="roadmap"] .phase03-card > .roadmap-card-icon:not(.roadmap-stack-icon):not(.roadmap-routes-icon) {
  color: transparent !important;
  font-size: 0 !important;
}

body[data-view="roadmap"] .phase03-card > .roadmap-card-icon:not(.roadmap-stack-icon):not(.roadmap-routes-icon)::before {
  content: attr(data-icon) !important;
  display: block !important;
  color: #f8d66d !important;
  font-size: 0.96rem !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body[data-view="roadmap"] .roadmap-tech-card.phase03-card .roadmap-inline-icon {
  width: 1.8rem !important;
  height: 1.8rem !important;
  stroke: #f8d66d !important;
  stroke-width: 1.7 !important;
}

body[data-view="roadmap"] .roadmap-tech-card.phase03-card .eyebrow {
  margin: 0 0 0.56rem !important;
  color: #08704f !important;
  font-size: 0.76rem !important;
  line-height: 1.15 !important;
  letter-spacing: 0.03em !important;
}

body[data-view="roadmap"] .roadmap-tech-card.phase03-card h3 {
  margin: 0 0 1rem !important;
  color: #091d19 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.15rem, 1.7vw, 1.46rem) !important;
  line-height: 1.15 !important;
}

body[data-view="roadmap"] .roadmap-tech-card.phase03-card p {
  color: #354843 !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
}

body[data-view="roadmap"] .phase03-chip-list,
body[data-view="roadmap"] .phase03-profile-chips,
body[data-view="roadmap"] .phase03-route-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.62rem !important;
  align-items: center !important;
}

body[data-view="roadmap"] .roadmap-tech-icon-chip,
body[data-view="roadmap"] .roadmap-route-chip,
body[data-view="roadmap"] .roadmap-tech-card.phase03-card .scripture-pill,
body[data-view="roadmap"] .roadmap-tech-card.phase03-card .status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  min-height: 2.2rem !important;
  max-width: 100% !important;
  padding: 0.44rem 0.76rem !important;
  border: 1px solid rgba(4, 93, 75, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(231, 242, 235, 0.78) !important;
  color: #043f33 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  white-space: normal !important;
}

body[data-view="roadmap"] .roadmap-tech-icon-chip i,
body[data-view="roadmap"] .roadmap-route-chip i {
  display: grid !important;
  flex: 0 0 auto !important;
  width: 1.26rem !important;
  height: 1.26rem !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #006f54 !important;
  color: #ffffff !important;
  font-size: 0.58rem !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

body[data-view="roadmap"] .phase03-route-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.45rem !important;
}

body[data-view="roadmap"] .phase03-route-list .roadmap-route-chip {
  justify-content: start !important;
  padding-right: 0.54rem !important;
  text-transform: capitalize !important;
}

body[data-view="roadmap"] .phase03-profile-chips {
  margin-top: auto !important;
  padding-top: 1.5rem !important;
  justify-content: center !important;
}

body[data-view="roadmap"] .phase03-profile-chip::before,
body[data-view="roadmap"] .phase03-screen-chip::before,
body[data-view="roadmap"] .phase03-module-chip::before {
  content: "" !important;
  display: inline-block !important;
  width: 0.78rem !important;
  height: 0.78rem !important;
  border-radius: 0.2rem !important;
  background: #006f54 !important;
  box-shadow: inset 0 -0.28rem 0 rgba(255, 255, 255, 0.22) !important;
}

body[data-view="roadmap"] .phase03-profile-chip::before {
  border-radius: 999px !important;
}

body[data-view="roadmap"] .phase03-community {
  display: grid !important;
  gap: 0.55rem !important;
  margin: 0.35rem 0 0.85rem !important;
}

body[data-view="roadmap"] .phase03-community small {
  color: #1d332d !important;
  font-size: 0.76rem !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
}

body[data-view="roadmap"] .phase03-avatar-row {
  display: flex !important;
  align-items: center !important;
  margin-top: 0.45rem !important;
}

body[data-view="roadmap"] .phase03-avatar-row span,
body[data-view="roadmap"] .phase03-avatar-row strong {
  display: grid !important;
  width: 2.55rem !important;
  height: 2.55rem !important;
  place-items: center !important;
  margin-right: -0.42rem !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #0a7254, #d2a84c) !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 950 !important;
  box-shadow: 0 8px 18px rgba(16, 33, 31, 0.15) !important;
}

body[data-view="roadmap"] .phase03-avatar-row strong {
  width: 3.8rem !important;
  margin-left: 0.65rem !important;
  margin-right: 0 !important;
  background: rgba(231, 242, 235, 0.9) !important;
  color: #005d4c !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button {
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  min-width: min(100%, 30rem) !important;
  min-height: 3.45rem !important;
  margin-top: -0.45rem !important;
  padding: 0.85rem 2.4rem !important;
  border: 1px solid rgba(226, 184, 78, 0.62) !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #087b58, #004b43) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(0, 78, 58, 0.26), 0 0 24px rgba(226, 184, 78, 0.24) !important;
  font-size: 1.1rem !important;
  font-weight: 950 !important;
  text-decoration: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button::before {
  content: "\1F680" !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button::after {
  content: "\2192  \2192" !important;
  font-size: 1.2rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button:hover,
body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button:focus-visible {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 48px rgba(0, 78, 58, 0.32), 0 0 34px rgba(226, 184, 78, 0.33) !important;
  outline: 3px solid rgba(226, 184, 78, 0.34) !important;
  outline-offset: 3px !important;
}

@keyframes phase03Atmosphere {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(0.9rem, -0.25rem, 0) scale(1.025);
  }
}

@keyframes phase03CardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1450px) {
  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  body[data-view="roadmap"] .roadmap-tech-panel {
    padding: 1rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel::before {
    width: 100% !important;
    height: 13rem !important;
    opacity: 0.34 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid,
  body[data-view="roadmap"] .phase03-route-list {
    grid-template-columns: 1fr !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card {
    min-height: 0 !important;
    padding: 5.9rem 1rem 1rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-panel-menu {
    width: 2.8rem !important;
    height: 2.8rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="roadmap"] .roadmap-tech-panel::before,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card {
    animation: none !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card,
  body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button {
    transition: none !important;
  }
}

/* Keep Phase 03 and Phase 04 paired in the Roadmap bottom row. */
body[data-view="roadmap"] .roadmap-bottom-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 1rem !important;
}

body[data-view="roadmap"] .roadmap-tech-panel,
body[data-view="roadmap"] .roadmap-archive {
  grid-column: auto !important;
  min-width: 0 !important;
}

@media (min-width: 981px) {
  body[data-view="roadmap"] .roadmap-tech-panel {
    gap: 0.82rem !important;
    min-height: 44rem !important;
    padding: 1rem 1rem 3.25rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel::before {
    width: min(30rem, 66%) !important;
    height: 12rem !important;
    opacity: 0.5 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-panel-menu {
    top: 0.9rem !important;
    right: 0.9rem !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > .eyebrow {
    min-height: 1.9rem !important;
    padding: 0.34rem 0.8rem !important;
    font-size: 0.68rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > h3 {
    max-width: calc(100% - 3.25rem) !important;
    font-size: clamp(1.55rem, 2.35vw, 2.28rem) !important;
    line-height: 1.03 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow) {
    max-width: 82% !important;
    margin: 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow)::after {
    width: 5.9rem !important;
    margin-top: 0.72rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card {
    min-height: 8.85rem !important;
    padding: 0.78rem 0.7rem 0.72rem 3.55rem !important;
    border-radius: 14px !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card > .roadmap-card-icon:first-child,
  body[data-view="roadmap"] .phase03-card-icon {
    left: 0.72rem !important;
    top: 0.72rem !important;
    width: 2.45rem !important;
    height: 2.45rem !important;
    font-size: 0.62rem !important;
  }

  body[data-view="roadmap"] .phase03-card > .roadmap-card-icon:not(.roadmap-stack-icon):not(.roadmap-routes-icon)::before {
    font-size: 0.62rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .roadmap-inline-icon {
    width: 1.12rem !important;
    height: 1.12rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .eyebrow {
    margin-bottom: 0.32rem !important;
    font-size: 0.58rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card h3 {
    margin-bottom: 0.5rem !important;
    font-size: 0.92rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card p {
    font-size: 0.64rem !important;
    line-height: 1.28 !important;
  }

  body[data-view="roadmap"] .phase03-chip-list,
  body[data-view="roadmap"] .phase03-profile-chips,
  body[data-view="roadmap"] .phase03-route-list {
    gap: 0.28rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-icon-chip,
  body[data-view="roadmap"] .roadmap-route-chip,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .scripture-pill,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .status-pill {
    min-height: 1.24rem !important;
    padding: 0.18rem 0.38rem !important;
    gap: 0.24rem !important;
    font-size: 0.5rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-icon-chip i,
  body[data-view="roadmap"] .roadmap-route-chip i {
    width: 0.88rem !important;
    height: 0.88rem !important;
    font-size: 0.34rem !important;
  }

  body[data-view="roadmap"] .phase03-route-list {
    grid-template-columns: 1fr !important;
  }

  body[data-view="roadmap"] .phase03-profile-chips {
    justify-content: start !important;
    padding-top: 0.55rem !important;
  }

  body[data-view="roadmap"] .phase03-profile-chip::before,
  body[data-view="roadmap"] .phase03-screen-chip::before,
  body[data-view="roadmap"] .phase03-module-chip::before {
    width: 0.48rem !important;
    height: 0.48rem !important;
  }

  body[data-view="roadmap"] .phase03-community {
    gap: 0.28rem !important;
    margin: 0.08rem 0 0.45rem !important;
  }

  body[data-view="roadmap"] .phase03-community small {
    font-size: 0.54rem !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row span,
  body[data-view="roadmap"] .phase03-avatar-row strong {
    width: 1.85rem !important;
    height: 1.85rem !important;
    font-size: 0.58rem !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row strong {
    width: 2.85rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button {
    position: absolute !important;
    left: 50% !important;
    bottom: 0.9rem !important;
    min-width: 0 !important;
    width: 15rem !important;
    max-width: calc(100% - 2rem) !important;
    min-height: 2.15rem !important;
    height: 2.15rem !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 9px !important;
    font-size: 0.78rem !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 980px) {
  body[data-view="roadmap"] .roadmap-bottom-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel,
  body[data-view="roadmap"] .roadmap-archive {
    min-height: 0 !important;
  }
}

/* True final Roadmap Phase 03/04 layout repair */
body[data-view="roadmap"] .roadmap-bottom-grid {
  align-items: stretch !important;
}

body[data-view="roadmap"] .roadmap-tech-panel,
body[data-view="roadmap"] .roadmap-archive {
  align-content: start !important;
  align-items: start !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

@media (min-width: 981px) {
  body[data-view="roadmap"] .roadmap-tech-panel,
  body[data-view="roadmap"] .roadmap-archive {
    gap: 0.48rem !important;
    height: 28rem !important;
    max-height: 28rem !important;
    min-height: 28rem !important;
    padding: 0.9rem 0.95rem 2.45rem !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  body[data-view="roadmap"] .roadmap-archive {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    row-gap: 0.5rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel::before {
    right: 0 !important;
    top: 0 !important;
    width: min(32rem, 54%) !important;
    height: 11.25rem !important;
    opacity: 0.78 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel::after {
    background:
      radial-gradient(circle at 4.2rem 15.1rem, rgba(219, 180, 78, 0.4) 0 0.13rem, transparent 0.16rem),
      linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 42%, rgba(255, 255, 255, 0.55) 63%, rgba(255, 255, 255, 0) 92%) !important;
  }

  body[data-view="roadmap"] .roadmap-archive::before {
    right: 0 !important;
    top: 0 !important;
    width: min(31rem, 52%) !important;
    height: 11rem !important;
    opacity: 0.68 !important;
    transform: none !important;
  }

  body[data-view="roadmap"] .roadmap-archive::after {
    right: 0 !important;
    bottom: 0 !important;
    height: 5rem !important;
    opacity: 0.58 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > .eyebrow,
  body[data-view="roadmap"] .roadmap-archive > .eyebrow {
    width: max-content !important;
    height: auto !important;
    min-height: 1.9rem !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0.34rem 0.8rem !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-view="roadmap"] .roadmap-archive > .eyebrow::before {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive > .eyebrow::after {
    left: 0.64rem !important;
    width: 0.58rem !important;
    height: 0.58rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > h3,
  body[data-view="roadmap"] .roadmap-archive > h3 {
    max-width: calc(100% - 2.8rem) !important;
    height: auto !important;
    margin: 0 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.12rem, 1.5vw, 1.48rem) !important;
    line-height: 1.03 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow),
  body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
    max-width: 84% !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 0.66rem !important;
    line-height: 1.25 !important;
  }

  body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow)::after {
    display: none !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid,
  body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
    width: 100% !important;
    gap: 0.55rem !important;
    margin-top: 0.2rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
    margin-top: 0 !important;
  }

  body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-self: end !important;
    gap: 0.68rem !important;
    margin-top: auto !important;
    margin-bottom: 0.2rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button,
  body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button {
    bottom: 0.55rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card {
    min-height: 5.25rem !important;
    max-height: 6.15rem !important;
    padding: 0.46rem 0.44rem 0.44rem 2.55rem !important;
    overflow: hidden !important;
  }

  body[data-view="roadmap"] .phase03-route-list {
    grid-template-columns: 1fr !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article {
    grid-template-columns: 2.15rem minmax(0, 1fr) 1.48rem !important;
    gap: 0.5rem !important;
    min-height: 4.65rem !important;
    padding: 0.58rem !important;
    border-radius: 12px !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > span {
    width: 2.15rem !important;
    height: 2.15rem !important;
    border-radius: 999px !important;
  }

  body[data-view="roadmap"] .phase4-widget-icon::before {
    width: 1.05rem !important;
    height: 1.05rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid strong {
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid small {
    font-size: 0.6rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid p {
    font-size: 0.54rem !important;
    line-height: 1.18 !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > button {
    width: 1.48rem !important;
    height: 1.48rem !important;
    min-height: 1.48rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
}

@media (min-width: 981px) and (max-width: 1600px) {
  body[data-view="roadmap"] .roadmap-project-widget-grid article {
    grid-template-columns: 1.9rem minmax(0, 1fr) 1.32rem !important;
    gap: 0.42rem !important;
    min-height: 4.15rem !important;
    padding: 0.46rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > span {
    width: 1.9rem !important;
    height: 1.9rem !important;
  }

  body[data-view="roadmap"] .phase4-widget-icon::before {
    width: 0.92rem !important;
    height: 0.92rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid strong {
    font-size: 0.66rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid small {
    font-size: 0.54rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid p {
    font-size: 0.5rem !important;
    line-height: 1.12 !important;
    -webkit-line-clamp: 1 !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > button {
    width: 1.32rem !important;
    height: 1.32rem !important;
    min-height: 1.32rem !important;
  }
}

/* Roadmap Phase 03 reference polish and stable CTA hover */
@media (min-width: 981px) {
  body[data-view="roadmap"] .roadmap-tech-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel::before {
    width: min(34rem, 58%) !important;
    height: 12rem !important;
    opacity: 0.82 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid {
    align-self: stretch !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    min-height: 0 !important;
    margin-top: 0.06rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card {
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    min-width: 0 !important;
    align-content: start !important;
    gap: 0.12rem !important;
    padding: 0.56rem 0.48rem 0.48rem 3.48rem !important;
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card > .roadmap-card-icon:first-child,
  body[data-view="roadmap"] .phase03-card-icon {
    left: 0.58rem !important;
    top: 0.58rem !important;
    width: 2.38rem !important;
    height: 2.38rem !important;
    font-size: 0.68rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .roadmap-inline-icon {
    width: 1.24rem !important;
    height: 1.24rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .eyebrow {
    margin: 0 0 0.08rem !important;
    font-size: 0.52rem !important;
    line-height: 1 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card h3 {
    margin: 0 0 0.16rem !important;
    font-size: 0.8rem !important;
    line-height: 1.06 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card p {
    margin: 0 !important;
    font-size: 0.55rem !important;
    line-height: 1.22 !important;
  }

  body[data-view="roadmap"] .phase03-chip-list,
  body[data-view="roadmap"] .phase03-profile-chips,
  body[data-view="roadmap"] .phase03-route-list {
    gap: 0.14rem !important;
    align-items: start !important;
  }

  body[data-view="roadmap"] .roadmap-tech-icon-chip,
  body[data-view="roadmap"] .roadmap-route-chip,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .scripture-pill,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .status-pill {
    gap: 0.16rem !important;
    min-height: 0.9rem !important;
    padding: 0.1rem 0.26rem !important;
    font-size: 0.42rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-view="roadmap"] .roadmap-tech-icon-chip i,
  body[data-view="roadmap"] .roadmap-route-chip i {
    width: 0.62rem !important;
    height: 0.62rem !important;
    font-size: 0.3rem !important;
  }

  body[data-view="roadmap"] .phase03-route-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.12rem !important;
  }

  body[data-view="roadmap"] .phase03-route-list .roadmap-route-chip {
    justify-content: start !important;
    min-width: 0 !important;
    padding: 0.1rem 0.18rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-view="roadmap"] .phase03-route-list .roadmap-route-chip i {
    display: none !important;
  }

  body[data-view="roadmap"] .phase03-profile-chips {
    justify-content: start !important;
    margin-top: 0.28rem !important;
    padding-top: 0 !important;
  }

  body[data-view="roadmap"] .phase03-community {
    gap: 0.22rem !important;
    margin: 0.16rem 0 0.25rem !important;
  }

  body[data-view="roadmap"] .phase03-community small {
    font-size: 0.52rem !important;
    line-height: 1.15 !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row {
    margin-top: 0.14rem !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row span,
  body[data-view="roadmap"] .phase03-avatar-row strong {
    width: 1.36rem !important;
    height: 1.36rem !important;
    margin-right: -0.2rem !important;
    border-width: 1px !important;
    font-size: 0.46rem !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row strong {
    width: 2.15rem !important;
    margin-left: 0.3rem !important;
  }

  body[data-view="roadmap"] .phase03-ai-card > p,
  body[data-view="roadmap"] .phase03-subscription-card > p:last-child {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button,
  body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button {
    transform: translateX(-50%) !important;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button:hover,
  body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button:focus-visible,
  body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button:hover,
  body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button:focus-visible {
    transform: translate(-50%, -3px) !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button:active,
  body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button:active {
    transform: translate(-50%, -1px) !important;
  }
}

/* Roadmap Phase 03/04 readability lift */
@media (min-width: 981px) {
  body[data-view="roadmap"] .roadmap-bottom-grid {
    gap: 1.2rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel,
  body[data-view="roadmap"] .roadmap-archive {
    gap: 0.62rem !important;
    height: 33.5rem !important;
    min-height: 33.5rem !important;
    max-height: 33.5rem !important;
    padding: 1.1rem 1.15rem 3rem !important;
    border-radius: 20px !important;
  }

  body[data-view="roadmap"] .roadmap-archive {
    row-gap: 0.62rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel::before {
    width: min(37rem, 60%) !important;
    height: 13.25rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive::before {
    width: min(34rem, 55%) !important;
    height: 12.4rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > .eyebrow,
  body[data-view="roadmap"] .roadmap-archive > .eyebrow {
    min-height: 2.08rem !important;
    padding: 0.42rem 0.95rem !important;
    font-size: 0.76rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive > .eyebrow::before {
    width: 1.42rem !important;
    height: 1.42rem !important;
  }

  body[data-view="roadmap"] .roadmap-archive > .eyebrow::after {
    left: 0.73rem !important;
    width: 0.66rem !important;
    height: 0.66rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-panel-menu {
    top: 1.05rem !important;
    right: 1.05rem !important;
    width: 3.1rem !important;
    height: 3.1rem !important;
    font-size: 1.28rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > h3,
  body[data-view="roadmap"] .roadmap-archive > h3 {
    max-width: calc(100% - 3.35rem) !important;
    font-size: clamp(1.36rem, 1.78vw, 1.76rem) !important;
    line-height: 1.06 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > p:not(.eyebrow),
  body[data-view="roadmap"] .roadmap-archive > p:not(.eyebrow) {
    max-width: 86% !important;
    font-size: 0.76rem !important;
    line-height: 1.38 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel .roadmap-module-grid {
    gap: 0.68rem !important;
    margin-top: 0.16rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card {
    gap: 0.18rem !important;
    padding: 0.74rem 0.64rem 0.66rem 4rem !important;
    border-radius: 16px !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card > .roadmap-card-icon:first-child,
  body[data-view="roadmap"] .phase03-card-icon {
    left: 0.72rem !important;
    top: 0.72rem !important;
    width: 2.82rem !important;
    height: 2.82rem !important;
    font-size: 0.78rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .roadmap-inline-icon {
    width: 1.42rem !important;
    height: 1.42rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .eyebrow {
    margin-bottom: 0.12rem !important;
    font-size: 0.61rem !important;
    letter-spacing: 0 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card h3 {
    margin-bottom: 0.24rem !important;
    font-size: 0.96rem !important;
    line-height: 1.1 !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card p {
    font-size: 0.64rem !important;
    line-height: 1.3 !important;
  }

  body[data-view="roadmap"] .phase03-chip-list,
  body[data-view="roadmap"] .phase03-profile-chips,
  body[data-view="roadmap"] .phase03-route-list {
    gap: 0.2rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-icon-chip,
  body[data-view="roadmap"] .roadmap-route-chip,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .scripture-pill,
  body[data-view="roadmap"] .roadmap-tech-card.phase03-card .status-pill {
    min-height: 1.08rem !important;
    padding: 0.14rem 0.34rem !important;
    gap: 0.2rem !important;
    font-size: 0.5rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-icon-chip i,
  body[data-view="roadmap"] .roadmap-route-chip i {
    width: 0.78rem !important;
    height: 0.78rem !important;
    font-size: 0.34rem !important;
  }

  body[data-view="roadmap"] .phase03-route-list {
    gap: 0.18rem !important;
  }

  body[data-view="roadmap"] .phase03-route-list .roadmap-route-chip {
    min-height: 1.04rem !important;
    padding: 0.13rem 0.24rem !important;
  }

  body[data-view="roadmap"] .phase03-profile-chips {
    margin-top: 0.42rem !important;
  }

  body[data-view="roadmap"] .phase03-community {
    gap: 0.24rem !important;
    margin: 0.18rem 0 0.28rem !important;
  }

  body[data-view="roadmap"] .phase03-community small {
    font-size: 0.57rem !important;
    line-height: 1.2 !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row {
    margin-top: 0.18rem !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row span,
  body[data-view="roadmap"] .phase03-avatar-row strong {
    width: 1.5rem !important;
    height: 1.5rem !important;
    margin-right: -0.16rem !important;
    font-size: 0.54rem !important;
  }

  body[data-view="roadmap"] .phase03-avatar-row strong {
    width: 2.34rem !important;
    margin-left: 0.38rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card.phase03-subscription-card h3 {
    font-size: 0.84rem !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card.phase03-modules-card .scripture-pill {
    min-height: 1.02rem !important;
    padding: 0.12rem 0.3rem !important;
    font-size: 0.48rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card.phase03-subscription-card > p:last-child {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 0.56rem !important;
    line-height: 1.2 !important;
  }

  body[data-view="roadmap"] .roadmap-archive .roadmap-project-widget-grid {
    gap: 0.82rem !important;
    margin-bottom: 0.32rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article {
    grid-template-columns: 2.35rem minmax(0, 1fr) 1.65rem !important;
    gap: 0.62rem !important;
    min-height: 5.3rem !important;
    padding: 0.7rem !important;
    border-radius: 14px !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > span {
    width: 2.35rem !important;
    height: 2.35rem !important;
  }

  body[data-view="roadmap"] .phase4-widget-icon::before {
    width: 1.14rem !important;
    height: 1.14rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid strong {
    font-size: 0.82rem !important;
    line-height: 1.12 !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid small {
    font-size: 0.66rem !important;
    line-height: 1.14 !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid p {
    font-size: 0.61rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > button {
    width: 1.65rem !important;
    height: 1.65rem !important;
    min-height: 1.65rem !important;
    font-size: 0.86rem !important;
  }

  body[data-view="roadmap"] .roadmap-tech-panel > .roadmap-link-button,
  body[data-view="roadmap"] .roadmap-archive > .roadmap-link-button {
    bottom: 0.7rem !important;
    width: 17rem !important;
    max-width: calc(100% - 2.4rem) !important;
    min-height: 2.55rem !important;
    height: 2.55rem !important;
    padding: 0.48rem 1.2rem !important;
    font-size: 0.9rem !important;
  }
}

@media (min-width: 981px) and (max-width: 1600px) {
  body[data-view="roadmap"] .roadmap-project-widget-grid article {
    grid-template-columns: 2.22rem minmax(0, 1fr) 1.54rem !important;
    gap: 0.54rem !important;
    min-height: 5.05rem !important;
    padding: 0.62rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > span {
    width: 2.22rem !important;
    height: 2.22rem !important;
  }

  body[data-view="roadmap"] .phase4-widget-icon::before {
    width: 1.08rem !important;
    height: 1.08rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid strong {
    font-size: 0.76rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid small {
    font-size: 0.61rem !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid p {
    font-size: 0.57rem !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article > button {
    width: 1.54rem !important;
    height: 1.54rem !important;
    min-height: 1.54rem !important;
  }
}

@media (max-width: 980px) {
  body[data-view="roadmap"] .roadmap-tech-panel,
  body[data-view="roadmap"] .roadmap-archive {
    padding: 1.15rem !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  body[data-view="roadmap"] .roadmap-tech-card.phase03-card {
    padding: 5.25rem 1rem 1rem !important;
    border-radius: 16px !important;
  }

  body[data-view="roadmap"] .roadmap-project-widget-grid article {
    min-height: 5.2rem !important;
    padding: 0.78rem !important;
  }
}

/* Final Today YouTube highlight mobile height lock */
@media (max-width: 900px) {
  body[data-view="today"] .teoyube-promise-panel,
  body[data-view="today"] #promiseMovieResult {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body[data-view="today"] #promiseMovieResult {
    grid-template-rows: auto auto !important;
    overflow: hidden;
  }

  body[data-view="today"] #promiseMovieResult .promise-movie-detail {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-auto-rows: auto;
  }

  body[data-view="today"] #promiseMovieResult .promise-video-copy {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Final Today Video Highlight / Feed baseline alignment */
@media (min-width: 1101px) {
  body[data-view="today"] .today-integrations {
    grid-template-columns: minmax(min(100%, 40rem), 1.08fr) minmax(0, 1.55fr) !important;
    align-items: stretch !important;
    gap: clamp(1rem, 1.4vw, 1.45rem) !important;
  }

  body[data-view="today"] .teoyube-promise-panel,
  body[data-view="today"] .clients-promise-card {
    align-self: stretch !important;
    height: clamp(27.5rem, 24vw, 30rem) !important;
    min-height: clamp(27.5rem, 24vw, 30rem) !important;
    max-height: none !important;
    box-sizing: border-box !important;
  }

  body[data-view="today"] .teoyube-promise-panel {
    display: grid !important;
    align-content: stretch !important;
  }

  body[data-view="today"] #promiseMovieResult,
  body[data-view="today"] .promise-movie-card {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body[data-view="today"] #promiseMovieResult {
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: clamp(0.8rem, 1vw, 1rem) !important;
    padding: clamp(1rem, 1.35vw, 1.45rem) !important;
  }

  body[data-view="today"] #promiseMovieResult .promise-movie-detail {
    grid-template-columns: minmax(21rem, 1.08fr) minmax(17.5rem, 0.92fr) !important;
    align-items: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: clamp(1rem, 1.35vw, 1.35rem) !important;
  }

  body[data-view="today"] #promiseMovieResult .promise-video-thumbnail.promise-youtube-frame,
  body[data-view="today"] #promiseMovieResult .promise-video-thumbnail.promise-youtube-frame iframe {
    height: 100% !important;
    min-height: clamp(18.5rem, 19vw, 23.5rem) !important;
    max-height: none !important;
  }

  body[data-view="today"] #promiseMovieResult .promise-video-copy {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(1.15rem, 1.45vw, 1.6rem) !important;
    gap: clamp(0.7rem, 0.95vw, 0.95rem) !important;
  }

  body[data-view="today"] .clients-promise-card {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    padding: clamp(1rem, 1.35vw, 1.45rem) !important;
    overflow: hidden !important;
  }

  body[data-view="today"] .clients-card-header {
    margin-bottom: clamp(0.75rem, 1vw, 1.05rem) !important;
  }

  body[data-view="today"] .clients-table-wrap {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: auto !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

@media (max-width: 1100px) {
  body[data-view="today"] .today-integrations,
  body[data-view="today"] .today-premium-shell .today-integrations {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  body[data-view="today"] .teoyube-promise-panel,
  body[data-view="today"] .clients-promise-card,
  body[data-view="today"] #promiseMovieResult {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body[data-view="today"] #promiseMovieResult .promise-movie-detail {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
  }

  body[data-view="today"] #promiseMovieResult .promise-video-thumbnail.promise-youtube-frame,
  body[data-view="today"] #promiseMovieResult .promise-video-thumbnail.promise-youtube-frame iframe {
    height: auto !important;
    min-height: clamp(17rem, 46vw, 26rem) !important;
  }

  body[data-view="today"] #promiseMovieResult .promise-video-copy {
    height: auto !important;
  }

  body[data-view="today"] .clients-table-wrap {
    max-height: min(24rem, 68vh) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

/* Final Calling Compass premium YouTube video covering */
body[data-view="calling"] .calling-featured-video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1rem, 1.4vw, 1.35rem) !important;
  border: 1px solid rgba(255, 218, 129, 0.34) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.97) 0%, rgba(238, 250, 243, 0.9) 36%, rgba(0, 72, 55, 0.22) 100%),
    url("public/images/search/teoyube-search-panel-bg.png") center right / cover no-repeat !important;
  box-shadow:
    0 28px 70px rgba(0, 51, 39, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

body[data-view="calling"] .calling-featured-video::before,
body[data-view="calling"] .calling-featured-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body[data-view="calling"] .calling-featured-video::before {
  background:
    radial-gradient(circle at 75% 9%, rgba(255, 221, 122, 0.46), transparent 12rem),
    radial-gradient(circle at 20% 90%, rgba(0, 122, 91, 0.16), transparent 14rem),
    linear-gradient(105deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.34) 45%, rgba(0, 48, 36, 0.28) 100%);
}

body[data-view="calling"] .calling-featured-video::after {
  inset: -18% -8% auto 18%;
  height: 68%;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 235, 170, 0.72) 0 0.11rem, transparent 0.13rem),
    radial-gradient(circle at 58% 42%, rgba(255, 255, 220, 0.58) 0 0.075rem, transparent 0.095rem),
    radial-gradient(circle at 76% 32%, rgba(255, 220, 128, 0.46) 0 0.095rem, transparent 0.115rem),
    linear-gradient(115deg, rgba(255, 224, 134, 0.22), rgba(255, 255, 255, 0));
  opacity: 0.86;
  animation: callingVideoLightDrift 8s ease-in-out infinite alternate;
}

body[data-view="calling"] .calling-featured-video > * {
  position: relative;
  z-index: 1;
}

body[data-view="calling"] .calling-featured-video > .eyebrow {
  width: max-content;
  margin: 0 0 0.8rem !important;
  padding: 0.48rem 0.78rem;
  border: 1px solid rgba(255, 222, 131, 0.52);
  border-radius: 999px;
  background: rgba(0, 96, 72, 0.92);
  color: #fffdf4 !important;
  box-shadow: 0 12px 26px rgba(0, 70, 52, 0.16);
}

body[data-view="calling"] .compass-video-player {
  display: grid !important;
  gap: clamp(0.82rem, 1vw, 1.05rem) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-view="calling"] .compass-player-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(0.82rem, 1vw, 1.05rem);
  border: 1px solid rgba(255, 221, 134, 0.34);
  border-radius: 24px !important;
  background:
    linear-gradient(115deg, rgba(0, 27, 21, 0.94) 0%, rgba(0, 70, 52, 0.8) 50%, rgba(255, 220, 128, 0.22) 100%),
    url("public/images/today-carousel/today-carousel-07-live-promises.png") center / cover no-repeat;
  box-shadow:
    0 28px 64px rgba(0, 35, 26, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body[data-view="calling"] .compass-player-shell::before,
body[data-view="calling"] .compass-player-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body[data-view="calling"] .compass-player-shell::before {
  z-index: -2;
  background:
    radial-gradient(circle at 58% 8%, rgba(255, 226, 137, 0.48), transparent 13rem),
    radial-gradient(circle at 0% 100%, rgba(122, 255, 190, 0.18), transparent 14rem),
    linear-gradient(180deg, rgba(0, 26, 20, 0.18), rgba(0, 21, 16, 0.62));
}

body[data-view="calling"] .compass-player-shell::after {
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 28%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 232, 153, 0.22), transparent 44%);
  opacity: 0.9;
  animation: callingVideoShimmer 9s ease-in-out infinite alternate;
}

body[data-view="calling"] .compass-player-topbar {
  position: relative;
  z-index: 2;
  align-items: center;
  margin-bottom: 0.82rem;
  padding: 0.78rem 0.92rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 54, 41, 0.7), rgba(255, 255, 255, 0.1));
  color: #fffdf4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body[data-view="calling"] .compass-player-topbar strong {
  color: #fffdf4;
  font-size: clamp(0.98rem, 1.1vw, 1.12rem);
  line-height: 1.15;
}

body[data-view="calling"] .compass-player-topbar small,
body[data-view="calling"] .compass-player-actions {
  color: rgba(255, 249, 224, 0.78) !important;
}

body[data-view="calling"] .compass-player-actions {
  white-space: nowrap;
}

body[data-view="calling"] .compass-video-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 221, 134, 0.46) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 224, 129, 0.24), transparent 42%),
    linear-gradient(135deg, #062b23, #0a5d45 52%, #102c21) !important;
  box-shadow:
    0 24px 58px rgba(0, 23, 17, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -4rem 8rem rgba(0, 31, 24, 0.22);
}

body[data-view="calling"] .compass-video-frame iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

body[data-view="calling"] .compass-video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 221, 121, 0.22), transparent 19%),
    linear-gradient(90deg, rgba(0, 29, 22, 0.28), transparent 28%, transparent 72%, rgba(0, 29, 22, 0.24)),
    linear-gradient(0deg, rgba(0, 22, 17, 0.34), transparent 34%, rgba(255, 239, 184, 0.08));
  opacity: 0.72;
  pointer-events: none;
}

body[data-view="calling"] .compass-embed-play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(5rem, 7vw, 6.4rem);
  height: clamp(5rem, 7vw, 6.4rem);
  min-height: 0 !important;
  padding: 0 !important;
  border: 2px solid rgba(255, 229, 151, 0.92) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.24), transparent 32%),
    linear-gradient(135deg, #008264, #005b46) !important;
  color: #ffffff !important;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 0.55rem rgba(255, 214, 116, 0.22),
    0 0 34px rgba(255, 220, 128, 0.5),
    0 22px 48px rgba(0, 32, 24, 0.44);
  animation: callingPlayPulse 2.6s ease-in-out infinite;
}

body[data-view="calling"] .compass-embed-play-overlay::before {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border: 1px solid rgba(255, 229, 151, 0.48);
  border-radius: inherit;
}

body[data-view="calling"] .compass-embed-play-overlay::after {
  content: "" !important;
  position: absolute;
  inset: -1.2rem;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(0, 130, 100, 0.22), transparent 67%);
}

body[data-view="calling"] .compass-embed-play-overlay span {
  width: 0;
  height: 0;
  margin-left: 0.18rem;
  border-top: 0.9rem solid transparent;
  border-bottom: 0.9rem solid transparent;
  border-left: 1.35rem solid #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 34, 26, 0.22));
}

body[data-view="calling"] .compass-embed-play-overlay:hover {
  transform: translate(-50%, -50%) scale(1.055);
  box-shadow:
    0 0 0 0.65rem rgba(255, 214, 116, 0.28),
    0 0 44px rgba(255, 220, 128, 0.6),
    0 26px 54px rgba(0, 32, 24, 0.48);
}

body[data-view="calling"] .compass-embed-play-overlay:active {
  transform: translate(-50%, -50%) scale(0.96);
}

body[data-view="calling"] .compass-player-controls {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.58rem;
  margin-top: 0.82rem;
}

body[data-view="calling"] .compass-player-controls button {
  min-height: 2.48rem;
  padding: 0.62rem 0.95rem;
  border: 1px solid rgba(255, 221, 134, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fffdf4 !important;
  box-shadow: 0 12px 26px rgba(0, 24, 18, 0.2) !important;
  font-size: 0.78rem;
  font-weight: 950;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

body[data-view="calling"] .compass-player-controls button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 229, 151, 0.58) !important;
  background: rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 16px 32px rgba(0, 24, 18, 0.28) !important;
}

body[data-view="calling"] .compass-featured-meta {
  margin-top: 0.15rem;
  padding: clamp(0.95rem, 1.25vw, 1.25rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(239, 251, 244, 0.72));
  box-shadow: 0 18px 42px rgba(0, 48, 36, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body[data-view="calling"] .compass-featured-meta h4 {
  color: #043f34 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 1.7vw, 1.9rem) !important;
  line-height: 1.12;
}

body[data-view="calling"] .compass-featured-meta p {
  color: rgba(21, 40, 37, 0.78) !important;
  font-size: clamp(0.9rem, 0.98vw, 1rem) !important;
  font-weight: 650;
  line-height: 1.52;
}

body[data-view="calling"] .compass-featured-row span {
  border: 1px solid rgba(0, 97, 74, 0.1);
  background: rgba(255, 255, 255, 0.76) !important;
  color: #006047 !important;
  box-shadow: 0 8px 18px rgba(0, 64, 48, 0.08);
}

body[data-view="calling"] .calling-player-empty {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(20rem, 32vw, 28rem);
  border: 1px solid rgba(255, 221, 134, 0.34);
  border-radius: 24px;
  background:
    linear-gradient(115deg, rgba(0, 47, 35, 0.92), rgba(0, 80, 61, 0.68), rgba(255, 255, 255, 0.12)),
    url("public/images/search/teoyube-search-panel-bg.png") center right / cover no-repeat;
  color: #fffdf4;
  box-shadow: 0 24px 58px rgba(0, 44, 33, 0.24);
}

body[data-view="calling"] .calling-player-empty h4,
body[data-view="calling"] .calling-player-empty p {
  color: inherit;
}

body[data-view="calling"] .calling-player-empty span {
  border: 2px solid rgba(255, 229, 151, 0.88);
  background: linear-gradient(135deg, #008264, #005b46);
  box-shadow: 0 0 34px rgba(255, 220, 128, 0.42);
}

@media (max-width: 900px) {
  body[data-view="calling"] .calling-featured-video {
    padding: 0.92rem !important;
    border-radius: 20px !important;
  }

  body[data-view="calling"] .compass-player-shell {
    padding: 0.78rem;
    border-radius: 20px !important;
  }

  body[data-view="calling"] .compass-player-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-view="calling"] .compass-player-actions {
    white-space: normal;
  }

  body[data-view="calling"] .compass-player-controls {
    justify-content: stretch;
  }

  body[data-view="calling"] .compass-player-controls button {
    flex: 1 1 8rem;
  }
}

@media (max-width: 620px) {
  body[data-view="calling"] .compass-video-frame {
    min-height: 13.5rem;
  }

  body[data-view="calling"] .compass-embed-play-overlay {
    width: 4.85rem;
    height: 4.85rem;
  }

  body[data-view="calling"] .compass-featured-meta h4 {
    font-size: 1.25rem !important;
  }
}

@keyframes callingPlayPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0.48rem rgba(255, 214, 116, 0.2),
      0 0 30px rgba(255, 220, 128, 0.42),
      0 20px 44px rgba(0, 32, 24, 0.38);
  }
  50% {
    box-shadow:
      0 0 0 0.78rem rgba(255, 214, 116, 0.1),
      0 0 46px rgba(255, 220, 128, 0.62),
      0 25px 56px rgba(0, 32, 24, 0.48);
  }
}

@keyframes callingVideoLightDrift {
  from {
    transform: translate3d(-0.6rem, -0.2rem, 0);
    opacity: 0.7;
  }
  to {
    transform: translate3d(0.65rem, 0.28rem, 0);
    opacity: 0.96;
  }
}

@keyframes callingVideoShimmer {
  from {
    transform: translate3d(-0.4rem, -0.1rem, 0) scale(1);
    opacity: 0.68;
  }
  to {
    transform: translate3d(0.5rem, 0.2rem, 0) scale(1.02);
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="calling"] .calling-featured-video::after,
  body[data-view="calling"] .compass-player-shell::after,
  body[data-view="calling"] .compass-embed-play-overlay,
  body[data-view="calling"] .compass-player-controls button {
    animation: none !important;
    transition: none !important;
  }
}

/* Final Promise Table premium YouTube featured video covering */
body[data-view="table"] #table {
  max-width: 100% !important;
}

body[data-view="table"] #table #promiseTableVideoPanel,
body[data-view="table"] #promiseTableVideoPanel {
  position: relative !important;
  isolation: isolate;
  contain: paint;
  box-sizing: border-box;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 218, 129, 0.34) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 250, 244, 0.88) 36%, rgba(0, 72, 55, 0.28) 100%),
    url("public/images/today-carousel/today-carousel-12-overlook.png") center right / cover no-repeat !important;
  box-shadow:
    0 30px 76px rgba(0, 51, 39, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

body[data-view="table"] #table #promiseTableVideoPanel::before,
body[data-view="table"] #table #promiseTableVideoPanel::after,
body[data-view="table"] #promiseTableVideoPanel::before,
body[data-view="table"] #promiseTableVideoPanel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body[data-view="table"] #table #promiseTableVideoPanel::before,
body[data-view="table"] #promiseTableVideoPanel::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.62) 34%, rgba(255, 255, 255, 0.12) 65%, rgba(0, 37, 28, 0.34) 100%),
    radial-gradient(circle at 66% 14%, rgba(255, 218, 116, 0.46), transparent 16rem),
    radial-gradient(circle at 14% 88%, rgba(0, 126, 94, 0.16), transparent 13rem);
}

body[data-view="table"] #table #promiseTableVideoPanel::after,
body[data-view="table"] #promiseTableVideoPanel::after {
  inset: -18% 0 auto 18%;
  height: 70%;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 235, 170, 0.72) 0 0.11rem, transparent 0.13rem),
    radial-gradient(circle at 58% 42%, rgba(255, 255, 220, 0.56) 0 0.075rem, transparent 0.095rem),
    radial-gradient(circle at 76% 32%, rgba(255, 220, 128, 0.46) 0 0.095rem, transparent 0.115rem),
    linear-gradient(115deg, rgba(255, 224, 134, 0.22), rgba(255, 255, 255, 0));
  opacity: 0.86;
  animation: promiseTableVideoLightDrift 8s ease-in-out infinite alternate;
}

body[data-view="table"] .promise-table-featured-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(18rem, 0.86fr) minmax(22rem, 1.28fr);
  grid-template-areas:
    "copy stage"
    "nav nav";
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-items: center;
  min-height: clamp(22rem, 31vw, 30rem);
  padding: clamp(1.25rem, 2vw, 2rem);
}

body[data-view="table"] .promise-table-featured-copy {
  grid-area: copy;
  display: grid;
  align-content: center;
  justify-items: start;
  max-width: 34rem;
  min-width: 0;
  gap: clamp(0.72rem, 1vw, 0.95rem);
}

body[data-view="table"] .promise-table-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  width: max-content;
  min-height: 2rem;
  padding: 0.48rem 0.78rem;
  border: 1px solid rgba(255, 222, 131, 0.52);
  border-radius: 8px;
  background: rgba(0, 96, 72, 0.94);
  color: #fffdf4;
  box-shadow: 0 12px 26px rgba(0, 70, 52, 0.16);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

body[data-view="table"] .promise-table-featured-badge::before {
  content: "";
  width: 0.86rem;
  height: 0.86rem;
  flex: 0 0 auto;
  background: #f5d36a;
  clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%);
  filter: drop-shadow(0 0 8px rgba(245, 211, 106, 0.55));
}

body[data-view="table"] #table .promise-video-panel .promise-table-featured-copy h3,
body[data-view="table"] #promiseTableVideoPanel .promise-table-featured-copy h3 {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #043f34 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3vw, 3.8rem) !important;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.02 !important;
}

body[data-view="table"] #table .promise-video-panel .promise-table-featured-meta,
body[data-view="table"] #promiseTableVideoPanel .promise-table-featured-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem 0.68rem;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: rgba(19, 50, 44, 0.74) !important;
  font-size: clamp(0.86rem, 1vw, 1.02rem) !important;
  font-weight: 800;
  line-height: 1.3 !important;
}

body[data-view="table"] .promise-table-featured-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

body[data-view="table"] .promise-table-featured-meta span:first-child::before {
  content: "";
  width: 0.82rem;
  height: 0.82rem;
  background: #006047;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8a7 7 0 0 1 14 0v1H5v-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8a7 7 0 0 1 14 0v1H5v-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-view="table"] .promise-table-featured-meta span + span::before {
  content: "";
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.52;
}

body[data-view="table"] #table .promise-video-panel .promise-table-featured-description,
body[data-view="table"] #promiseTableVideoPanel .promise-table-featured-description {
  max-width: 31rem;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: rgba(21, 40, 37, 0.86) !important;
  font-size: clamp(0.98rem, 1.12vw, 1.12rem) !important;
  font-weight: 650;
  line-height: 1.56 !important;
}

body[data-view="table"] .promise-table-featured-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.78rem;
  margin-top: 0.28rem;
}

body[data-view="table"] .promise-table-featured-actions button,
body[data-view="table"] .promise-table-featured-nav button {
  min-height: 2.8rem;
  border-radius: 10px;
  font-weight: 950;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

body[data-view="table"] .promise-table-watch-now {
  padding: 0.75rem 1.2rem;
  border: 1px solid rgba(255, 218, 129, 0.48) !important;
  background: linear-gradient(135deg, #007a58, #00533e) !important;
  color: #fff !important;
  box-shadow: 0 16px 32px rgba(0, 87, 64, 0.22) !important;
}

body[data-view="table"] .promise-table-watch-now::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.58rem;
  border-top: 0.38rem solid transparent;
  border-bottom: 0.38rem solid transparent;
  border-left: 0.58rem solid currentColor;
  vertical-align: 0.02rem;
}

body[data-view="table"] .promise-table-next-video {
  padding: 0.75rem 1.2rem;
  border: 1px solid rgba(0, 83, 62, 0.18) !important;
  background: rgba(255, 255, 255, 0.54) !important;
  color: #00533e !important;
  box-shadow: 0 14px 28px rgba(0, 64, 48, 0.08) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body[data-view="table"] .promise-table-featured-actions button:hover,
body[data-view="table"] .promise-table-featured-nav button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(0, 64, 48, 0.18) !important;
}

body[data-view="table"] .promise-table-featured-stage {
  grid-area: stage;
  position: relative;
  isolation: isolate;
  min-width: 0;
}

body[data-view="table"] .promise-table-featured-stage::before {
  content: "";
  position: absolute;
  inset: -1.6rem -1.2rem;
  z-index: -1;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 222, 128, 0.38), transparent 32%),
    radial-gradient(circle at 62% 18%, rgba(0, 171, 128, 0.24), transparent 38%);
  filter: blur(2px);
  pointer-events: none;
}

body[data-view="table"] #table .promise-table-video-frame,
body[data-view="table"] #promiseTableVideoPanel .promise-table-video-frame {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-height: none !important;
  min-height: clamp(16rem, 24vw, 27rem) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 221, 134, 0.46) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 224, 129, 0.24), transparent 42%),
    linear-gradient(135deg, #062b23, #0a5d45 52%, #102c21) !important;
  box-shadow:
    0 28px 64px rgba(0, 23, 17, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 -4rem 8rem rgba(0, 31, 24, 0.22);
}

body[data-view="table"] #table .promise-table-video-frame iframe,
body[data-view="table"] #promiseTableVideoPanel .promise-table-video-frame iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: inherit;
}

body[data-view="table"] #promiseTableVideoPanel .promise-table-video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 221, 121, 0.18), transparent 19%),
    linear-gradient(90deg, rgba(0, 29, 22, 0.26), transparent 28%, transparent 72%, rgba(0, 29, 22, 0.22)),
    linear-gradient(0deg, rgba(0, 22, 17, 0.34), transparent 34%, rgba(255, 239, 184, 0.08));
  opacity: 0.68;
  pointer-events: none;
}

body[data-view="table"] .promise-table-embed-play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(5rem, 7vw, 6.55rem);
  height: clamp(5rem, 7vw, 6.55rem);
  min-height: 0 !important;
  padding: 0 !important;
  border: 2px solid rgba(255, 229, 151, 0.92) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.24), transparent 32%),
    linear-gradient(135deg, #008264, #005b46) !important;
  color: #ffffff !important;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 0.55rem rgba(255, 214, 116, 0.22),
    0 0 34px rgba(255, 220, 128, 0.5),
    0 22px 48px rgba(0, 32, 24, 0.44);
  animation: promiseTablePlayPulse 2.6s ease-in-out infinite;
}

body[data-view="table"] .promise-table-embed-play-overlay::before {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border: 1px solid rgba(255, 229, 151, 0.48);
  border-radius: inherit;
}

body[data-view="table"] .promise-table-embed-play-overlay::after {
  content: "" !important;
  position: absolute;
  inset: -1.2rem;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(0, 130, 100, 0.22), transparent 67%);
}

body[data-view="table"] .promise-table-embed-play-overlay span {
  width: 0;
  height: 0;
  margin-left: 0.18rem;
  border-top: 0.9rem solid transparent;
  border-bottom: 0.9rem solid transparent;
  border-left: 1.35rem solid #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 34, 26, 0.22));
}

body[data-view="table"] .promise-table-embed-play-overlay:hover {
  transform: translate(-50%, -50%) scale(1.055);
  box-shadow:
    0 0 0 0.65rem rgba(255, 214, 116, 0.28),
    0 0 44px rgba(255, 220, 128, 0.6),
    0 26px 54px rgba(0, 32, 24, 0.48);
}

body[data-view="table"] .promise-table-embed-play-overlay:active {
  transform: translate(-50%, -50%) scale(0.96);
}

body[data-view="table"] .promise-table-featured-nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
  margin-top: -0.2rem;
}

body[data-view="table"] .promise-table-featured-nav > button {
  width: 3.1rem;
  height: 3.1rem;
  min-height: 3.1rem !important;
  padding: 0 !important;
  border: 1px solid rgba(0, 83, 62, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #00533e !important;
  box-shadow: 0 14px 30px rgba(0, 64, 48, 0.1) !important;
  font-size: 0 !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body[data-view="table"] .promise-table-featured-nav > button::before {
  content: "";
  width: 0.76rem;
  height: 0.76rem;
  display: inline-block;
  border-color: currentColor;
  border-style: solid;
  border-width: 0 0 0.18rem 0.18rem;
}

body[data-view="table"] .promise-table-featured-nav > button[data-promise-table-video-nav="previous"]::before {
  transform: rotate(45deg);
}

body[data-view="table"] .promise-table-featured-nav > button[data-promise-table-video-nav="next"]::before {
  transform: rotate(225deg);
}

body[data-view="table"] .promise-table-featured-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.48rem;
}

body[data-view="table"] .promise-table-featured-dots button {
  width: clamp(2.25rem, 3.2vw, 3.5rem);
  height: 0.38rem;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(0, 83, 62, 0.08);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

body[data-view="table"] .promise-table-featured-dots button.active {
  background: linear-gradient(90deg, #2cc9a3, #007a58);
  box-shadow: 0 0 18px rgba(44, 201, 163, 0.4);
}

body[data-view="table"] .promise-table-featured-dots button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.9);
}

body[data-view="table"] .promise-table-video-empty {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: clamp(18rem, 28vw, 25rem);
  padding: clamp(1.2rem, 2vw, 2rem);
  text-align: center;
}

body[data-view="table"] .promise-table-video-empty span {
  width: 4.8rem;
  height: 4.8rem;
  border: 2px solid rgba(255, 229, 151, 0.88);
  border-radius: 999px;
  background: linear-gradient(135deg, #008264, #005b46);
  box-shadow: 0 0 34px rgba(255, 220, 128, 0.42);
}

body[data-view="table"] #promiseTableVideoPanel .promise-table-video-empty h3,
body[data-view="table"] #promiseTableVideoPanel .promise-table-video-empty p {
  max-width: 34rem;
  padding: 0 !important;
  background: transparent !important;
  color: #043f34 !important;
}

@media (max-width: 980px) {
  body[data-view="table"] .promise-table-featured-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "stage"
      "nav";
    min-height: 0;
  }

  body[data-view="table"] .promise-table-featured-copy {
    max-width: 42rem;
  }

  body[data-view="table"] .promise-table-featured-nav {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

@media (max-width: 620px) {
  body[data-view="table"] #promiseTableVideoPanel {
    border-radius: 20px !important;
  }

  body[data-view="table"] .promise-table-featured-shell {
    padding: 0.95rem;
    gap: 0.95rem;
  }

  body[data-view="table"] #promiseTableVideoPanel .promise-table-featured-copy h3 {
    font-size: 1.65rem !important;
  }

  body[data-view="table"] .promise-table-featured-actions,
  body[data-view="table"] .promise-table-featured-actions button {
    width: 100%;
  }

  body[data-view="table"] #promiseTableVideoPanel .promise-table-video-frame {
    min-height: 13.5rem !important;
    border-radius: 18px !important;
  }

  body[data-view="table"] .promise-table-embed-play-overlay {
    width: 4.85rem;
    height: 4.85rem;
  }

  body[data-view="table"] .promise-table-featured-nav {
    gap: 0.5rem;
  }

  body[data-view="table"] .promise-table-featured-nav > button {
    width: 2.65rem;
    height: 2.65rem;
    min-height: 2.65rem !important;
  }
}

@keyframes promiseTablePlayPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0.48rem rgba(255, 214, 116, 0.2),
      0 0 30px rgba(255, 220, 128, 0.42),
      0 20px 44px rgba(0, 32, 24, 0.38);
  }
  50% {
    box-shadow:
      0 0 0 0.78rem rgba(255, 214, 116, 0.1),
      0 0 46px rgba(255, 220, 128, 0.62),
      0 25px 56px rgba(0, 32, 24, 0.48);
  }
}

@keyframes promiseTableVideoLightDrift {
  from {
    transform: translate3d(-0.6rem, -0.2rem, 0);
    opacity: 0.7;
  }
  to {
    transform: translate3d(0.65rem, 0.28rem, 0);
    opacity: 0.96;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="table"] #promiseTableVideoPanel::after,
  body[data-view="table"] .promise-table-embed-play-overlay,
  body[data-view="table"] .promise-table-featured-actions button,
  body[data-view="table"] .promise-table-featured-nav button,
  body[data-view="table"] .promise-table-featured-dots button {
    animation: none !important;
    transition: none !important;
  }
}

/* Promise Table featured video proportion fix */
body[data-view="table"] {
  overflow-x: hidden !important;
}

body[data-view="table"] #table #promiseTableVideoPanel,
body[data-view="table"] #promiseTableVideoPanel {
  min-height: 0 !important;
  box-shadow:
    0 18px 34px rgba(0, 51, 39, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

body[data-view="table"] .promise-table-featured-shell {
  grid-template-columns: minmax(18rem, 0.48fr) minmax(30rem, 1fr) !important;
  grid-template-areas: "copy stage" !important;
  min-height: clamp(21rem, 25vw, 28rem) !important;
  gap: clamp(1rem, 2vw, 2rem) !important;
  padding: clamp(1.15rem, 2.2vw, 2.25rem) clamp(1.25rem, 2.6vw, 2.75rem) !important;
}

body[data-view="table"] .promise-table-featured-copy {
  max-width: 31rem !important;
  gap: clamp(0.62rem, 0.9vw, 0.85rem) !important;
}

body[data-view="table"] #table .promise-video-panel .promise-table-featured-copy h3,
body[data-view="table"] #promiseTableVideoPanel .promise-table-featured-copy h3 {
  max-width: 11ch;
  font-size: clamp(2rem, 2.45vw, 3.1rem) !important;
  line-height: 1.04 !important;
}

body[data-view="table"] #table .promise-video-panel .promise-table-featured-description,
body[data-view="table"] #promiseTableVideoPanel .promise-table-featured-description {
  max-width: 28rem !important;
}

body[data-view="table"] .promise-table-featured-stage {
  align-self: center;
  display: grid;
  min-width: 0;
}

body[data-view="table"] #table .promise-table-video-frame,
body[data-view="table"] #promiseTableVideoPanel .promise-table-video-frame {
  justify-self: stretch;
  aspect-ratio: auto !important;
  height: clamp(18rem, 22vw, 25.5rem) !important;
  min-height: 0 !important;
  max-height: 25.5rem !important;
}

body[data-view="table"] .promise-table-video-artwork {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(1, 25, 20, 0.34), rgba(1, 25, 20, 0.02) 42%, rgba(1, 25, 20, 0.38)),
    radial-gradient(circle at 52% 34%, rgba(255, 221, 118, 0.48), transparent 20%),
    url("public/images/today-carousel/today-carousel-12-overlook.png") center / cover no-repeat;
  pointer-events: none;
}

body[data-view="table"] .promise-table-video-artwork::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 231, 154, 0.34), transparent 18%),
    linear-gradient(0deg, rgba(1, 22, 17, 0.38), transparent 48%),
    linear-gradient(90deg, rgba(0, 34, 26, 0.5), transparent 18%, transparent 82%, rgba(0, 34, 26, 0.5));
}

body[data-view="table"] .promise-table-video-artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 42% 42%, rgba(255, 244, 196, 0.72) 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 58% 34%, rgba(255, 220, 120, 0.54) 0 0.1rem, transparent 0.12rem),
    radial-gradient(circle at 71% 48%, rgba(255, 244, 196, 0.48) 0 0.07rem, transparent 0.09rem);
  opacity: 0.7;
}

body[data-view="table"] .promise-table-video-artwork-label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.48rem 0.82rem;
  border: 1px solid rgba(255, 222, 131, 0.4);
  border-radius: 8px;
  background: rgba(0, 118, 88, 0.9);
  color: #fffdf4;
  box-shadow: 0 12px 24px rgba(0, 32, 24, 0.24);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

body[data-view="table"] .promise-table-embed-play-overlay {
  z-index: 6;
  width: clamp(4.9rem, 5.8vw, 6rem);
  height: clamp(4.9rem, 5.8vw, 6rem);
}

body[data-view="table"] .promise-table-featured-nav {
  position: absolute !important;
  inset: clamp(0.8rem, 1.3vw, 1.25rem) clamp(0.85rem, 1.5vw, 1.4rem) clamp(0.85rem, 1.45vw, 1.35rem) !important;
  z-index: 7;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  margin: 0 !important;
  pointer-events: none;
}

body[data-view="table"] .promise-table-featured-nav > button,
body[data-view="table"] .promise-table-featured-dots button {
  pointer-events: auto;
}

body[data-view="table"] .promise-table-featured-dots {
  align-self: end;
  padding-bottom: 0.15rem;
}

body[data-view="table"] .promise-table-featured-nav > button {
  width: clamp(2.65rem, 3.3vw, 3.25rem) !important;
  height: clamp(2.65rem, 3.3vw, 3.25rem) !important;
  min-height: clamp(2.65rem, 3.3vw, 3.25rem) !important;
}

@media (max-width: 980px) {
  body[data-view="table"] .promise-table-featured-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "copy"
      "stage"
      "nav" !important;
    min-height: 0 !important;
  }

  body[data-view="table"] #table .promise-video-panel .promise-table-featured-copy h3,
  body[data-view="table"] #promiseTableVideoPanel .promise-table-featured-copy h3 {
    max-width: 16ch;
  }

  body[data-view="table"] #table .promise-table-video-frame,
  body[data-view="table"] #promiseTableVideoPanel .promise-table-video-frame {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: clamp(14rem, 48vw, 22rem) !important;
    max-height: none !important;
  }

  body[data-view="table"] .promise-table-featured-nav {
    position: static !important;
    inset: auto !important;
    pointer-events: auto;
  }
}

@media (max-width: 620px) {
  body[data-view="table"] .promise-table-video-artwork-label {
    left: 0.78rem;
    top: 0.78rem;
    min-height: 1.95rem;
    padding: 0.42rem 0.68rem;
    font-size: 0.66rem;
  }
}

/* Promise Table TeoyubeWorld feed scroll wrapper */
body[data-view="table"] #table .promise-search-feed,
#table .promise-search-feed {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "search"
    "player"
    "results" !important;
  align-items: stretch !important;
  gap: 1rem !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body[data-view="table"] #table .promise-feed-search,
#table .promise-feed-search {
  grid-area: search !important;
}

body[data-view="table"] #table #promiseTableVideoPanel,
#table #promiseTableVideoPanel {
  grid-area: player !important;
}

body[data-view="table"] .promise-search-scroll-wrapper,
#table .promise-search-scroll-wrapper {
  grid-area: results !important;
  width: 100% !important;
  max-height: min(46rem, 58vh) !important;
  min-height: min(22rem, 50vh);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  box-sizing: border-box;
  padding: 0.45rem 0.5rem 0.45rem 0.45rem;
  border: 1px solid rgba(0, 82, 61, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(242, 250, 246, 0.72)),
    radial-gradient(circle at 95% 0%, rgba(0, 121, 91, 0.1), transparent 18rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 18px 38px rgba(0, 51, 39, 0.08);
}

body[data-view="table"] .promise-search-scroll-wrapper::-webkit-scrollbar,
#table .promise-search-scroll-wrapper::-webkit-scrollbar {
  width: 0.72rem;
}

body[data-view="table"] .promise-search-scroll-wrapper::-webkit-scrollbar-track,
#table .promise-search-scroll-wrapper::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(0, 82, 61, 0.08);
}

body[data-view="table"] .promise-search-scroll-wrapper::-webkit-scrollbar-thumb,
#table .promise-search-scroll-wrapper::-webkit-scrollbar-thumb {
  border: 0.18rem solid rgba(246, 251, 248, 0.88);
  border-radius: 999px;
  background: linear-gradient(180deg, #008264, #005b46);
}

body[data-view="table"] .promise-search-scroll-wrapper #promiseTableSearchResults,
#table .promise-search-scroll-wrapper #promiseTableSearchResults {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)) !important;
  gap: 1rem !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  body[data-view="table"] .promise-search-scroll-wrapper,
  #table .promise-search-scroll-wrapper {
    max-height: min(44rem, 56vh) !important;
    min-height: min(20rem, 46vh);
    padding: 0.38rem;
    border-radius: 18px;
  }

  body[data-view="table"] .promise-search-scroll-wrapper #promiseTableSearchResults,
  #table .promise-search-scroll-wrapper #promiseTableSearchResults {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body[data-view="table"] .promise-search-scroll-wrapper,
  #table .promise-search-scroll-wrapper {
    max-height: 58vh !important;
    min-height: 18rem;
  }

  body[data-view="table"] .promise-search-scroll-wrapper #promiseTableSearchResults,
  #table .promise-search-scroll-wrapper #promiseTableSearchResults {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Keep Embed page cards locked to the reference grid on hover. */
body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card:hover,
body[data-view="ui-elements"] .ui-video-card.ui-video-feature-card:focus-within {
  transform: none !important;
  filter: none !important;
  border-color: rgba(0, 107, 87, 0.24) !important;
  box-shadow: 0 16px 38px rgba(10, 34, 32, 0.11) !important;
}

/* Premium Tables page YouTube coverings. */
@media (min-width: 1261px) {
  body[data-view="teoyube-tables"] .table-detail-content {
    grid-template-columns: minmax(12rem, 16rem) minmax(18rem, 1fr) minmax(26rem, 34rem) !important;
  }
}

body[data-view="teoyube-tables"] .table-row-video.table-row-video-premium {
  position: relative;
  isolation: isolate;
  min-height: 18rem;
  overflow: hidden;
  border: 1px solid rgba(236, 197, 110, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(4, 42, 34, 0.2), rgba(4, 42, 34, 0.64)),
    radial-gradient(circle at 50% 35%, rgba(255, 220, 128, 0.34), transparent 10rem),
    var(--table-video-thumb) center / cover no-repeat,
    #102a25;
  box-shadow:
    0 20px 48px rgba(0, 37, 30, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

body[data-view="teoyube-tables"] .table-row-video.table-row-video-premium iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
}

body[data-view="teoyube-tables"] .table-row-video-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(3, 36, 30, 0.26), rgba(3, 36, 30, 0.04) 48%, rgba(3, 36, 30, 0.38)),
    radial-gradient(circle at 50% 42%, rgba(255, 224, 148, 0.42), transparent 8rem),
    radial-gradient(circle at 70% 18%, rgba(0, 143, 111, 0.16), transparent 9rem),
    var(--table-video-thumb) center / cover no-repeat;
  pointer-events: none;
  transition: opacity 180ms ease;
}

body[data-view="teoyube-tables"] .table-row-video-cover::before,
body[data-view="teoyube-tables"] .table-row-video-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body[data-view="teoyube-tables"] .table-row-video-cover::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 26, 21, 0.42)),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.32), transparent 5.5rem),
    radial-gradient(circle at 88% 10%, rgba(236, 197, 110, 0.32), transparent 7rem);
}

body[data-view="teoyube-tables"] .table-row-video-cover::after {
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, 0.52) 0 0.06rem, transparent 0.1rem),
    radial-gradient(circle at 74% 44%, rgba(236, 197, 110, 0.46) 0 0.07rem, transparent 0.11rem),
    radial-gradient(circle at 54% 72%, rgba(255, 255, 255, 0.34) 0 0.055rem, transparent 0.095rem),
    linear-gradient(120deg, rgba(255, 255, 255, 0.24), transparent 36%, rgba(0, 104, 80, 0.14) 100%);
  opacity: 0.78;
  animation: tableVideoShimmer 7s ease-in-out infinite alternate;
}

body[data-view="teoyube-tables"] .table-row-video-label,
body[data-view="teoyube-tables"] .table-row-video-title,
body[data-view="teoyube-tables"] .table-row-video-duration,
body[data-view="teoyube-tables"] .table-row-video-nav,
body[data-view="teoyube-tables"] .table-row-embed-play-overlay {
  position: absolute;
  z-index: 5;
}

body[data-view="teoyube-tables"] .table-row-video-label {
  top: 0.8rem;
  left: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.9rem;
  padding: 0.38rem 0.7rem;
  border: 1px solid rgba(236, 197, 110, 0.3);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 132, 103, 0.96), rgba(0, 82, 65, 0.96));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 12px 26px rgba(0, 50, 40, 0.24);
  transition: opacity 180ms ease;
}

body[data-view="teoyube-tables"] .table-row-video-label::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #f1cf79;
  box-shadow: 0 0 12px rgba(241, 207, 121, 0.72);
}

body[data-view="teoyube-tables"] .table-row-video-title {
  left: 0.85rem;
  right: 4.5rem;
  bottom: 0.82rem;
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  transition: opacity 180ms ease;
}

body[data-view="teoyube-tables"] .table-row-video-duration {
  right: 0.78rem;
  bottom: 0.78rem;
  padding: 0.3rem 0.5rem;
  border-radius: 7px;
  background: rgba(2, 23, 19, 0.82);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
}

body[data-view="teoyube-tables"] .table-row-embed-play-overlay {
  left: 50%;
  top: 50%;
  z-index: 6;
  width: 5rem;
  height: 5rem;
  display: grid;
  place-items: center;
  border: 2px solid rgba(246, 216, 143, 0.9);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.24), transparent 30%),
    linear-gradient(135deg, #009171, #005744);
  color: #fff;
  box-shadow:
    0 0 0 0.48rem rgba(236, 197, 110, 0.15),
    0 0 38px rgba(0, 145, 113, 0.46),
    0 18px 42px rgba(0, 39, 31, 0.34);
  transform: translate(-50%, -50%);
  transition: transform 160ms ease, opacity 180ms ease, box-shadow 160ms ease;
  animation: tableVideoPlayPulse 2.6s ease-in-out infinite;
}

body[data-view="teoyube-tables"] .table-row-embed-play-overlay span {
  width: 0;
  height: 0;
  margin-left: 0.3rem;
  border-top: 0.68rem solid transparent;
  border-bottom: 0.68rem solid transparent;
  border-left: 1.04rem solid currentColor;
}

body[data-view="teoyube-tables"] .table-row-embed-play-overlay:hover {
  transform: translate(-50%, -50%) scale(1.055);
  box-shadow:
    0 0 0 0.66rem rgba(236, 197, 110, 0.2),
    0 0 46px rgba(0, 145, 113, 0.56),
    0 20px 48px rgba(0, 39, 31, 0.38);
}

body[data-view="teoyube-tables"] .table-row-embed-play-overlay:active {
  transform: translate(-50%, -50%) scale(0.96);
}

body[data-view="teoyube-tables"] .table-row-video-nav {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.7rem;
  pointer-events: none;
}

body[data-view="teoyube-tables"] .table-row-video-nav button {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #00624f;
  box-shadow: 0 10px 24px rgba(0, 37, 30, 0.2);
  opacity: 0;
  pointer-events: auto;
  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
}

body[data-view="teoyube-tables"] .table-row-video-nav button::before {
  content: "";
  width: 0.58rem;
  height: 0.58rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

body[data-view="teoyube-tables"] .table-row-video-nav button[data-table-video-nav="previous"]::before {
  transform: rotate(-135deg);
}

body[data-view="teoyube-tables"] .table-row-video-nav button[data-table-video-nav="next"]::before {
  transform: rotate(45deg);
}

body[data-view="teoyube-tables"] .table-row-video:hover .table-row-video-nav button,
body[data-view="teoyube-tables"] .table-row-video-nav button:focus-visible {
  opacity: 1;
}

body[data-view="teoyube-tables"] .table-row-video-nav button:hover {
  transform: translateY(-2px);
  background: #fff;
}

body[data-view="teoyube-tables"] .table-row-video.playing .table-row-video-cover,
body[data-view="teoyube-tables"] .table-row-video.playing .table-row-video-label,
body[data-view="teoyube-tables"] .table-row-video.playing .table-row-video-title,
body[data-view="teoyube-tables"] .table-row-video.playing .table-row-embed-play-overlay {
  opacity: 0;
  pointer-events: none;
}

body[data-view="teoyube-tables"] .table-row-embed-play-overlay:focus-visible,
body[data-view="teoyube-tables"] .table-row-video-nav button:focus-visible {
  outline: 3px solid rgba(236, 197, 110, 0.62);
  outline-offset: 3px;
}

@keyframes tableVideoPlayPulse {
  0%, 100% {
    box-shadow:
      0 0 0 0.42rem rgba(236, 197, 110, 0.12),
      0 0 30px rgba(0, 145, 113, 0.38),
      0 18px 42px rgba(0, 39, 31, 0.34);
  }
  50% {
    box-shadow:
      0 0 0 0.68rem rgba(236, 197, 110, 0.22),
      0 0 48px rgba(0, 145, 113, 0.52),
      0 22px 48px rgba(0, 39, 31, 0.38);
  }
}

@keyframes tableVideoShimmer {
  from {
    opacity: 0.62;
    transform: translate3d(-0.15rem, -0.08rem, 0);
  }
  to {
    opacity: 0.82;
    transform: translate3d(0.18rem, 0.08rem, 0);
  }
}

@media (max-width: 1260px) {
  body[data-view="teoyube-tables"] .table-row-video.table-row-video-premium {
    min-height: 20rem;
  }
}

@media (max-width: 720px) {
  body[data-view="teoyube-tables"] .table-row-video.table-row-video-premium {
    min-height: 14.75rem;
    border-radius: 14px;
  }

  body[data-view="teoyube-tables"] .table-row-embed-play-overlay {
    width: 4.35rem;
    height: 4.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="teoyube-tables"] .table-row-video-cover::after,
  body[data-view="teoyube-tables"] .table-row-embed-play-overlay {
    animation: none;
  }
}

/* Canon page media-card refinement: visual-only card transformation. */
body[data-view="canon"] .canon-section-block {
  min-width: 0;
}

body[data-view="canon"] .canon-project-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(0.78rem, 1.05vw, 1rem) !important;
  align-items: stretch;
}

body[data-view="canon"] .canon-project-card,
body[data-view="canon"] .canon-recent-card,
body[data-view="canon"] .canon-explore-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 82, 61, 0.11) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow:
    0 18px 38px rgba(7, 34, 30, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

body[data-view="canon"] .canon-project-card:first-child,
body[data-view="canon"] .canon-project-card:nth-child(2) {
  grid-column: span 3;
}

body[data-view="canon"] .canon-project-card:nth-child(n + 3) {
  grid-column: span 2;
}

body[data-view="canon"] .canon-project-media,
body[data-view="canon"] .canon-recent-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-position: center;
  background-size: 108%;
  transition: background-size 300ms ease, filter 300ms ease;
}

body[data-view="canon"] .canon-project-card:first-child .canon-project-media,
body[data-view="canon"] .canon-project-card:nth-child(2) .canon-project-media {
  min-height: clamp(12.25rem, 18vw, 17rem);
}

body[data-view="canon"] .canon-project-card:nth-child(n + 3) .canon-project-media {
  min-height: clamp(8.8rem, 11vw, 11rem);
}

body[data-view="canon"] .canon-project-card:hover .canon-project-media,
body[data-view="canon"] .canon-recent-card:hover .canon-recent-media {
  background-size: 114%;
  filter: saturate(1.05) contrast(1.03);
}

body[data-view="canon"] .canon-project-media::after,
body[data-view="canon"] .canon-recent-media::after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.03) 10%, rgba(0, 28, 22, 0.78) 100%),
    radial-gradient(circle at 68% 8%, rgba(255, 215, 107, 0.26), transparent 42%);
}

body[data-view="canon"] .canon-project-media::before,
body[data-view="canon"] .canon-recent-media::before,
body[data-view="canon"] .canon-category-card::after,
body[data-view="canon"] .canon-explore-card::after {
  content: "\25B6";
  position: absolute;
  z-index: 3;
  display: grid;
  width: clamp(2.55rem, 3.5vw, 3.65rem);
  height: clamp(2.55rem, 3.5vw, 3.65rem);
  place-items: center;
  border: 2px solid rgba(255, 244, 214, 0.84);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.25), transparent 30%),
    linear-gradient(145deg, rgba(0, 135, 103, 0.96), rgba(0, 68, 52, 0.96));
  color: #fffdf4;
  box-shadow:
    0 0 0 0.34rem rgba(255, 219, 120, 0.13),
    0 16px 34px rgba(0, 35, 27, 0.34);
  font-size: clamp(0.92rem, 1.2vw, 1.1rem);
  line-height: 1;
  pointer-events: none;
  text-indent: 0.12rem;
  transform: translate(-50%, -50%);
}

body[data-view="canon"] .canon-project-media::before,
body[data-view="canon"] .canon-recent-media::before {
  left: 50%;
  top: 50%;
}

body[data-view="canon"] .canon-project-card .canon-status,
body[data-view="canon"] .canon-recent-card .canon-status {
  position: absolute;
  left: 0.72rem;
  top: 0.72rem;
  z-index: 5;
  border: 1px solid rgba(255, 233, 166, 0.42);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(0, 34, 27, 0.18);
  color: #fffdf4;
  letter-spacing: 0;
}

body[data-view="canon"] .canon-project-heading button {
  z-index: 5;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #063f33;
  text-shadow: none;
}

body[data-view="canon"] .canon-project-body,
body[data-view="canon"] .canon-recent-card > div:last-child {
  gap: 0.5rem;
  padding: 0.72rem 0.78rem 0.82rem;
}

body[data-view="canon"] .canon-project-heading h4,
body[data-view="canon"] .canon-recent-card h4 {
  color: #0d1b24;
  font-size: clamp(0.86rem, 0.9vw, 1rem);
  font-weight: 950;
}

body[data-view="canon"] .canon-project-body p,
body[data-view="canon"] .canon-recent-card p {
  color: #536761;
  font-size: 0.72rem;
  line-height: 1.35;
}

body[data-view="canon"] .canon-avatar-row {
  margin-top: 0.05rem;
}

body[data-view="canon"] .canon-avatar-row::after {
  content: "+856";
  margin-left: 0.58rem;
  color: #536761;
  font-size: 0.68rem;
  font-weight: 900;
}

body[data-view="canon"] .canon-project-card:first-child .canon-avatar-row::after {
  content: "+1.2K";
}

body[data-view="canon"] .canon-project-card:nth-child(3) .canon-avatar-row::after {
  content: "+932";
}

body[data-view="canon"] .canon-project-card:nth-child(4) .canon-avatar-row::after {
  content: "+743";
}

body[data-view="canon"] .canon-project-card:nth-child(5) .canon-avatar-row::after {
  content: "+512";
}

body[data-view="canon"] .canon-project-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  color: #103a32;
  font-size: 0.7rem;
}

body[data-view="canon"] .canon-project-card progress,
body[data-view="canon"] .canon-recent-card progress {
  height: 0.34rem;
  border-radius: 999px;
  background: #edf4ef;
}

body[data-view="canon"] .canon-project-card progress::-webkit-progress-value,
body[data-view="canon"] .canon-recent-card progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #006b4b, #11a875);
}

/* Canon Featured Journeys: advanced carousel for The Chosen Calling Journey only. */
body[data-view="canon"] .canon-featured-carousel-card {
  grid-column: span 3;
  align-self: start;
  aspect-ratio: 16 / 9;
  min-height: 0;
  height: auto;
  padding: 0 !important;
  border-color: rgba(255, 222, 140, 0.32) !important;
  border-radius: 26px !important;
  background: #062a22 !important;
  color: #fffdf5;
  cursor: pointer;
  isolation: isolate;
}

body[data-view="canon"] .canon-featured-carousel-card::after {
  content: none;
  display: none;
}

body[data-view="canon"] .canon-featured-carousel-stage {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background:
    #062a22
    var(--canon-featured-image)
    var(--canon-featured-position, center) / 100% 100%
    no-repeat;
}

body[data-view="canon"] .canon-featured-carousel-stage::before,
body[data-view="canon"] .canon-featured-carousel-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body[data-view="canon"] .canon-featured-carousel-stage::before {
  content: none;
  display: none;
}

body[data-view="canon"] .canon-featured-carousel-stage::after {
  content: none;
  display: none;
}

body[data-view="canon"] .canon-featured-carousel-copy {
  position: absolute;
  left: clamp(1.05rem, 2.4vw, 2rem);
  bottom: clamp(2.9rem, 4.2vw, 4.25rem);
  z-index: 4;
  display: grid;
  width: min(79%, 31rem);
  gap: clamp(0.42rem, 0.7vw, 0.72rem);
  animation: canonFeaturedCopyIn 360ms ease both;
}

body[data-view="canon"] .canon-featured-source {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.72rem, 0.9vw, 0.9rem);
  font-weight: 950;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
}

body[data-view="canon"] .canon-featured-source > span:last-child {
  color: #ffd989;
}

body[data-view="canon"] .canon-featured-logo {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid rgba(255, 218, 128, 0.48);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(0, 121, 91, 0.9), rgba(0, 58, 45, 0.95));
  color: #ffe6a7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  font-style: italic;
  box-shadow: 0 14px 28px rgba(0, 18, 15, 0.32);
}

body[data-view="canon"] .canon-featured-badge {
  width: max-content;
  max-width: 100%;
  padding: 0.36rem 0.66rem;
  border: 1px solid rgba(255, 232, 165, 0.28);
  border-radius: 999px;
  background: rgba(237, 250, 243, 0.14);
  color: #e6fff3;
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

body[data-view="canon"] .canon-featured-carousel-copy h4 {
  margin: 0;
  max-width: 12ch;
  color: #fffdf6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: 0;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.36);
}

body[data-view="canon"] .canon-featured-carousel-copy p {
  display: block;
  max-width: 28rem;
  margin: 0;
  overflow: visible;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.8rem, 0.95vw, 0.98rem);
  font-weight: 800;
  line-height: 1.45;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  -webkit-line-clamp: unset;
}

body[data-view="canon"] .canon-featured-carousel-cta {
  justify-self: start;
  min-height: 2.45rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 238, 191, 0.46);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0, 134, 98, 0.98), rgba(0, 94, 72, 0.98));
  color: #fffdf6;
  font-size: 0.82rem;
  font-weight: 1000;
  box-shadow: 0 16px 34px rgba(0, 42, 32, 0.34);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body[data-view="canon"] .canon-featured-carousel-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(0, 151, 111, 1), rgba(0, 100, 77, 1));
  box-shadow: 0 20px 42px rgba(0, 56, 42, 0.42);
}

body[data-view="canon"] .canon-featured-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  width: clamp(2.55rem, 3.4vw, 3.1rem);
  height: clamp(2.55rem, 3.4vw, 3.1rem);
  min-height: 0;
  place-items: center;
  border: 1px solid rgba(255, 231, 158, 0.34);
  border-radius: 999px;
  background: rgba(0, 32, 25, 0.14);
  color: #ffe7a6;
  font-size: clamp(1.7rem, 2vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  box-shadow:
    0 10px 24px rgba(0, 18, 15, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  opacity: 0.72;
  transform: translateY(-50%);
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, opacity 180ms ease;
}

body[data-view="canon"] .canon-featured-carousel-arrow.prev {
  left: clamp(0.75rem, 1.4vw, 1.2rem);
}

body[data-view="canon"] .canon-featured-carousel-arrow.next {
  right: clamp(0.75rem, 1.4vw, 1.2rem);
}

body[data-view="canon"] .canon-featured-carousel-arrow:hover {
  background: rgba(0, 116, 88, 0.62);
  color: #fff7dc;
  opacity: 1;
  transform: translateY(-50%) scale(1.05);
}

body[data-view="canon"] .canon-featured-carousel-arrow:focus-visible,
body[data-view="canon"] .canon-featured-carousel-dots button:focus-visible,
body[data-view="canon"] .canon-featured-carousel-card:focus-visible,
body[data-view="canon"] .canon-featured-carousel-cta:focus-visible {
  outline: 3px solid rgba(255, 217, 122, 0.8);
  outline-offset: 3px;
}

body[data-view="canon"] .canon-featured-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(0.9rem, 1.5vw, 1.35rem);
  z-index: 5;
  display: flex;
  max-width: calc(100% - 7.25rem);
  gap: 0.42rem;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.3rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%);
}

body[data-view="canon"] .canon-featured-carousel-dots button {
  width: clamp(1.4rem, 2.2vw, 2.4rem);
  height: 0.34rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 1px 6px rgba(0, 18, 15, 0.22);
  transition: width 200ms ease, background 200ms ease, opacity 200ms ease;
}

body[data-view="canon"] .canon-featured-carousel-dots button.active {
  width: clamp(2rem, 3vw, 3.2rem);
  background: linear-gradient(90deg, #ffe39b, #11ad80);
}

body[data-view="canon"] .canon-featured-slide-count {
  position: absolute;
  right: clamp(0.9rem, 1.5vw, 1.35rem);
  bottom: clamp(0.92rem, 1.5vw, 1.38rem);
  z-index: 5;
  color: rgba(255, 248, 224, 0.82);
  font-size: 0.72rem;
  font-weight: 950;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

@keyframes canonFeaturedCopyIn {
  from {
    opacity: 0;
    transform: translateY(0.55rem);
  }

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

body[data-view="canon"] .canon-category-carousel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body[data-view="canon"] .canon-category-track {
  gap: clamp(0.75rem, 1vw, 0.95rem);
}

body[data-view="canon"] .canon-category-card {
  position: relative;
  isolation: isolate;
  min-height: 8.25rem !important;
  padding: 0.78rem !important;
  border: 1px solid rgba(255, 225, 148, 0.22);
  border-radius: 16px !important;
  box-shadow:
    0 16px 30px rgba(5, 57, 43, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}

body[data-view="canon"] .canon-category-carousel .canon-category-card {
  flex-basis: clamp(9.8rem, 13.5vw, 13.5rem);
}

body[data-view="canon"] .canon-category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 39, 31, 0.08), rgba(0, 39, 31, 0.75)),
    radial-gradient(circle at 70% 12%, rgba(255, 214, 116, 0.18), transparent 42%);
}

body[data-view="canon"] .canon-category-card::after {
  left: 50%;
  top: 48%;
  width: 2.45rem;
  height: 2.45rem;
  font-size: 0.82rem;
  opacity: 0.94;
}

/* Canon Journey Categories: keep image covers, remove only the play-button overlay. */
body[data-view="canon"] .canon-category-carousel .canon-category-card::after {
  content: none !important;
  display: none !important;
}

body[data-view="canon"] .canon-category-card span {
  z-index: 2;
  width: 1.95rem;
  height: 1.95rem;
  border: 1px solid rgba(255, 231, 162, 0.34);
  background: rgba(0, 101, 78, 0.68);
  box-shadow: 0 10px 22px rgba(0, 26, 20, 0.2);
}

body[data-view="canon"] .canon-category-card strong,
body[data-view="canon"] .canon-category-card small {
  z-index: 2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.38);
}

body[data-view="canon"] .canon-recent-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(0.72rem, 1vw, 0.95rem) !important;
}

body[data-view="canon"] .canon-recent-card {
  display: grid;
  grid-template-rows: minmax(clamp(10.75rem, 13vw, 15.5rem), 1fr) auto;
}

body[data-view="canon"] .canon-recent-media {
  min-height: clamp(8.8rem, 11.5vw, 12.5rem);
  background-size: cover;
}

body[data-view="canon"] .canon-recent-media::before {
  width: 2.65rem;
  height: 2.65rem;
  font-size: 0.86rem;
}

body[data-view="canon"] .canon-recent-merged-card {
  grid-column: span 3;
  grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: clamp(13rem, 15vw, 16rem);
}

body[data-view="canon"] .canon-recent-merged-card .canon-recent-media {
  min-height: 100%;
}

body[data-view="canon"] .canon-recent-merged-media {
  display: grid;
  align-items: start;
  padding: 0.75rem;
}

body[data-view="canon"] .canon-recent-merged-count {
  position: relative;
  z-index: 4;
  width: fit-content;
  padding: 0.32rem 0.58rem;
  border: 1px solid rgba(255, 231, 162, 0.42);
  border-radius: 999px;
  background: rgba(0, 104, 79, 0.84);
  color: #fffdf4;
  box-shadow: 0 10px 22px rgba(0, 34, 27, 0.22);
  font-size: 0.68rem;
  font-weight: 950;
}

body[data-view="canon"] .canon-watchman-video-carousel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.55rem;
  min-width: 0;
  min-height: 100%;
  padding: 0.72rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 231, 162, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(0, 96, 73, 0.95), rgba(0, 39, 31, 0.94));
}

body[data-view="canon"] .canon-watchman-video-carousel::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  background: var(--watchman-thumb, none) center / cover no-repeat;
  opacity: 0.2;
  filter: blur(7px) saturate(1.12);
  transform: scale(1.08);
}

body[data-view="canon"] .canon-watchman-video-stage {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: clamp(8.8rem, 11vw, 12rem);
  overflow: hidden;
  border: 1px solid rgba(255, 231, 162, 0.25);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(0, 32, 25, 0.04), rgba(0, 32, 25, 0.34)),
    var(--watchman-thumb, none) center / cover no-repeat,
    #052a22;
  box-shadow:
    0 18px 32px rgba(0, 24, 19, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body[data-view="canon"] .canon-watchman-video-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 224, 132, 0.12), transparent 35%),
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 32, 25, 0.08));
}

body[data-view="canon"] .canon-watchman-video-stage iframe,
body[data-view="canon"] .canon-watchman-video-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

body[data-view="canon"] .canon-watchman-video-fallback {
  display: grid;
  place-items: center;
  color: #fffdf4;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

body[data-view="canon"] .canon-watchman-video-stage .canon-recent-merged-count {
  position: absolute;
  left: 0.62rem;
  top: 0.62rem;
}

body[data-view="canon"] .canon-watchman-video-controls {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  gap: 0.45rem;
  align-items: center;
}

body[data-view="canon"] .canon-watchman-video-controls > button {
  display: grid;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  place-items: center;
  border: 1px solid rgba(255, 231, 162, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fffdf4;
  box-shadow: 0 10px 18px rgba(0, 23, 18, 0.2);
  font-size: 0.82rem;
  font-weight: 950;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

body[data-view="canon"] .canon-watchman-video-controls > button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 231, 162, 0.5);
  background: rgba(255, 255, 255, 0.24);
}

body[data-view="canon"] .canon-watchman-video-dots {
  display: flex;
  justify-content: center;
  gap: 0.34rem;
}

body[data-view="canon"] .canon-watchman-video-dots button {
  width: 1.2rem;
  height: 0.34rem;
  min-height: 0.34rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: none;
  transition: width 180ms ease, background 180ms ease;
}

body[data-view="canon"] .canon-watchman-video-dots button.active {
  width: 1.85rem;
  background: linear-gradient(90deg, #f3d27a, #fff4cf);
}

body[data-view="canon"] .canon-recent-merged-card.canon-watchman-story-card {
  grid-column: span 3;
  position: relative;
  display: block;
  aspect-ratio: 1672 / 941;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 22px !important;
  background:
    #05291f
    var(--watchman-image)
    center / 100% 100%
    no-repeat !important;
}

body[data-view="canon"] .canon-watchman-story-stage {
  position: absolute;
  inset: 0;
  isolation: isolate;
  display: block;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

body[data-view="canon"] .canon-watchman-story-stage::before {
  content: none;
}

body[data-view="canon"] .canon-watchman-story-stage::after {
  content: none;
}

body[data-view="canon"] .canon-watchman-image-frame {
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  border-radius: 18px;
  background-color: #05291f;
  background-image: var(--watchman-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 162, 0.24),
    0 18px 38px rgba(0, 29, 22, 0.18);
}

body[data-view="canon"] .canon-watchman-video-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: #000;
  transition: opacity 260ms ease;
}

body[data-view="canon"] .canon-watchman-video-frame iframe,
body[data-view="canon"] .canon-watchman-video-frame .canon-watchman-video-fallback {
  width: 100%;
  height: 100%;
  border: 0;
}

body[data-view="canon"] .canon-watchman-story-card.playing .canon-watchman-video-frame {
  opacity: 1;
  pointer-events: auto;
}

body[data-view="canon"] .canon-watchman-story-card.playing .canon-watchman-story-copy {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.5rem);
}

body[data-view="canon"] .canon-watchman-story-copy {
  display: none !important;
}

body[data-view="canon"] .canon-watchman-story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem;
}

body[data-view="canon"] .canon-watchman-story-meta span,
body[data-view="canon"] .canon-watchman-story-meta time {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.24rem 0.48rem;
  border: 1px solid rgba(0, 99, 77, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #005844;
  font-size: 0.63rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body[data-view="canon"] .canon-watchman-story-copy h4 {
  color: #033d32;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 2.1vw, 2.3rem);
  font-weight: 950;
  line-height: 0.98;
}

body[data-view="canon"] .canon-watchman-story-copy p {
  margin: 0;
  color: rgba(19, 38, 35, 0.78);
  font-size: clamp(0.82rem, 0.9vw, 0.96rem);
  font-weight: 650;
  line-height: 1.42;
}

body[data-view="canon"] .canon-watchman-story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

body[data-view="canon"] .canon-watchman-story-actions .primary,
body[data-view="canon"] .canon-watchman-story-actions .secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 2.25rem;
  padding: 0.54rem 0.82rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 930;
  text-decoration: none;
}

body[data-view="canon"] .canon-watchman-story-actions .primary {
  border: 0;
  background: linear-gradient(135deg, #006048, #008466);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(0, 80, 61, 0.22);
}

body[data-view="canon"] .canon-watchman-story-actions .secondary {
  border: 1px solid rgba(0, 95, 74, 0.15);
  background: rgba(255, 255, 255, 0.78);
  color: #005844;
}

body[data-view="canon"] .canon-watchman-story-card .canon-recent-merged-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.34rem;
  margin-top: 0;
}

body[data-view="canon"] .canon-watchman-story-card .canon-recent-merged-row {
  min-height: 2.55rem;
  padding: 0.42rem 0.48rem;
  border-color: rgba(0, 95, 74, 0.12);
  background: rgba(255, 255, 255, 0.58);
}

body[data-view="canon"] .canon-watchman-story-card .canon-recent-merged-row b,
body[data-view="canon"] .canon-watchman-story-card .canon-recent-merged-row small {
  white-space: normal;
}

body[data-view="canon"] .canon-watchman-story-card .canon-recent-merged-row b {
  font-size: 0.68rem;
  line-height: 1.16;
}

body[data-view="canon"] .canon-watchman-story-card .canon-recent-merged-row small {
  font-size: 0.6rem;
  line-height: 1.15;
}

body[data-view="canon"] .canon-watchman-story-card .canon-watchman-video-controls {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: clamp(0.5rem, 0.95vw, 0.85rem);
  z-index: 4;
  display: grid;
  justify-self: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: min(17.5rem, calc(100% - 1rem));
  gap: clamp(0.38rem, 0.7vw, 0.55rem);
  padding: clamp(0.22rem, 0.42vw, 0.32rem);
  border: 1px solid rgba(255, 231, 162, 0.18);
  border-radius: 999px;
  background: rgba(4, 46, 36, 0.82);
  box-shadow:
    0 10px 24px rgba(0, 29, 22, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateX(-50%);
}

body[data-view="canon"] .canon-watchman-story-card .canon-watchman-video-controls > button {
  width: clamp(1.85rem, 2vw, 2.25rem);
  height: clamp(1.85rem, 2vw, 2.25rem);
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: rgba(238, 246, 242, 0.92);
  color: #005844;
  box-shadow:
    0 6px 14px rgba(0, 23, 18, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
}

body[data-view="canon"] .canon-watchman-story-card .canon-watchman-video-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.24rem, 0.38vw, 0.34rem);
  min-width: 0;
}

body[data-view="canon"] .canon-watchman-story-card .canon-watchman-video-dots button {
  width: clamp(0.78rem, 1vw, 1rem);
  height: 0.28rem;
  min-height: 0.28rem;
  background: rgba(221, 232, 226, 0.72);
}

body[data-view="canon"] .canon-watchman-story-card .canon-watchman-video-dots button.active {
  width: clamp(1.65rem, 2vw, 2.05rem);
  background: linear-gradient(90deg, #f2c866, #ffe9a8);
}

/* Canon Recently Updated: keep media dominant and make card crops consistent. */
body[data-view="canon"] .canon-recent-grid > .canon-recent-card:not(.canon-watchman-story-card) {
  height: 100%;
  min-height: clamp(18rem, 22vw, 24rem);
  grid-template-rows: minmax(0, 1fr) auto;
}

body[data-view="canon"] .canon-recent-grid > .canon-recent-card:not(.canon-watchman-story-card) .canon-recent-media {
  height: 100%;
  min-height: clamp(11.5rem, 15vw, 17rem);
  background-position: center 44%;
  background-size: cover;
}

body[data-view="canon"] .canon-recent-grid > .canon-recent-card:not(.canon-watchman-story-card) > div:last-child {
  display: grid;
  grid-template-rows: auto auto minmax(0, auto) auto auto;
  min-height: 7.25rem;
  max-height: 8.35rem;
  overflow: hidden;
}

body[data-view="canon"] .canon-recent-grid > .canon-recent-card:not(.canon-watchman-story-card) h4 {
  display: -webkit-box;
  min-height: 2.05em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-view="canon"] .canon-recent-grid > .canon-recent-card:not(.canon-watchman-story-card) p {
  display: -webkit-box;
  min-height: 2.7em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-view="canon"] .canon-recent-grid > .canon-recent-card:not(.canon-watchman-story-card) .canon-project-footer {
  margin-top: 0.1rem;
}

body[data-view="canon"] .canon-watchman-story-card .canon-watchman-story-stage {
  padding-bottom: clamp(0.55rem, 1vw, 0.8rem);
}

body[data-view="canon"] .canon-watchman-story-card .canon-watchman-story-copy {
  display: none !important;
}

body[data-view="canon"] .canon-watchman-story-card .canon-recent-merged-list {
  max-height: none;
  overflow: visible;
}

body[data-view="canon"] .canon-recent-merged-body {
  align-content: start;
}

body[data-view="canon"] .canon-recent-merged-card .canon-status {
  position: static;
  box-shadow: none;
}

body[data-view="canon"] .canon-recent-merged-list {
  display: grid;
  gap: 0.46rem;
  margin-top: 0.12rem;
}

body[data-view="canon"] .canon-recent-merged-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0.2rem 0.55rem;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: 0.5rem 0.56rem;
  border: 1px solid rgba(0, 82, 61, 0.1);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(0, 112, 85, 0.06), rgba(255, 231, 162, 0.12));
  color: #10251f;
  box-shadow: none;
  text-align: left;
}

body[data-view="canon"] .canon-recent-merged-row:hover,
body[data-view="canon"] .canon-recent-merged-row.active {
  border-color: rgba(0, 113, 84, 0.3);
  background: linear-gradient(135deg, rgba(0, 112, 85, 0.13), rgba(255, 231, 162, 0.18));
}

body[data-view="canon"] .canon-recent-merged-row span {
  min-width: 0;
}

body[data-view="canon"] .canon-recent-merged-row b,
body[data-view="canon"] .canon-recent-merged-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="canon"] .canon-recent-merged-row b {
  color: #0d1b24;
  font-size: 0.75rem;
  font-weight: 950;
}

body[data-view="canon"] .canon-recent-merged-row small {
  color: #536761;
  font-size: 0.66rem;
  font-weight: 850;
}

body[data-view="canon"] .canon-recent-merged-row strong {
  color: #006b4b;
  font-size: 0.72rem;
  font-weight: 950;
}

body[data-view="canon"] .canon-recent-merged-row progress {
  grid-column: 1 / -1;
}

body[data-view="canon"] .canon-explore-grid {
  gap: clamp(0.75rem, 1vw, 0.95rem) !important;
}

body[data-view="canon"] .canon-explore-card {
  grid-template-rows: clamp(5.75rem, 7.4vw, 7.25rem) minmax(0, 1fr) auto;
  min-height: 13.2rem;
  border-radius: 16px !important;
}

body[data-view="canon"] .canon-explore-card::before {
  min-height: clamp(5.75rem, 7.4vw, 7.25rem);
  background:
    linear-gradient(180deg, rgba(0, 44, 33, 0.06), rgba(0, 44, 33, 0.7)),
    radial-gradient(circle at 72% 10%, rgba(255, 214, 116, 0.18), transparent 46%),
    var(--canon-explore-image) center / cover no-repeat;
}

body[data-view="canon"] .canon-explore-card::after {
  left: 50%;
  top: calc(clamp(5.75rem, 7.4vw, 7.25rem) / 2);
  width: 2.55rem;
  height: 2.55rem;
  font-size: 0.82rem;
}

body[data-view="canon"] .canon-explore-icon {
  z-index: 4;
  width: 2rem;
  height: 2rem;
}

body[data-view="canon"] .canon-explore-copy,
body[data-view="canon"] .canon-explore-footer {
  padding-left: 0.72rem;
  padding-right: 0.72rem;
}

body[data-view="canon"] .canon-explore-copy h4 {
  font-size: 0.86rem;
  font-weight: 950;
}

body[data-view="canon"] .canon-explore-copy p {
  font-size: 0.72rem;
}

body[data-view="canon"] .canon-explore-footer button {
  min-height: 1.9rem;
  background: linear-gradient(135deg, rgba(0, 117, 87, 0.1), rgba(255, 231, 162, 0.14));
}

/* Canon Explore More paths: keep image covers, remove only the play-button overlay. */
body[data-view="canon"] .canon-explore-section .canon-explore-card::after {
  content: none !important;
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body[data-view="canon"] .canon-project-card:hover,
  body[data-view="canon"] .canon-recent-card:hover,
  body[data-view="canon"] .canon-explore-card:hover {
    transform: translate3d(0, -4px, 0) scale(1.015) !important;
    border-color: rgba(0, 111, 83, 0.32) !important;
    box-shadow:
      0 22px 44px rgba(0, 55, 42, 0.16),
      0 0 24px rgba(255, 213, 104, 0.12) !important;
  }
}

@media (max-width: 1180px) {
  body[data-view="canon"] .canon-project-grid,
  body[data-view="canon"] .canon-recent-grid,
  body[data-view="canon"] .canon-explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-view="canon"] .canon-project-card,
  body[data-view="canon"] .canon-project-card:first-child,
  body[data-view="canon"] .canon-project-card:nth-child(2),
  body[data-view="canon"] .canon-project-card:nth-child(n + 3) {
    grid-column: auto;
  }

  body[data-view="canon"] .canon-recent-merged-card {
    grid-column: 1 / -1;
  }

  body[data-view="canon"] .canon-watchman-story-copy {
    width: min(34rem, 70%);
  }

  body[data-view="canon"] .canon-recent-grid > .canon-recent-card:not(.canon-watchman-story-card) {
    min-height: clamp(18rem, 34vw, 23rem);
  }

  body[data-view="canon"] .canon-featured-carousel-card {
    grid-column: auto;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  body[data-view="canon"] .canon-featured-carousel-copy {
    width: min(82%, 30rem);
  }
}

@media (max-width: 720px) {
  body[data-view="canon"] .canon-project-grid,
  body[data-view="canon"] .canon-recent-grid,
  body[data-view="canon"] .canon-explore-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-view="canon"] .canon-category-carousel .canon-category-card {
    flex-basis: clamp(10.5rem, 68vw, 16rem);
  }

  body[data-view="canon"] .canon-recent-merged-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="canon"] .canon-recent-merged-card.canon-watchman-story-card {
    min-height: 0;
  }

  body[data-view="canon"] .canon-watchman-story-stage {
    align-items: start;
    padding: 0;
    padding-bottom: 0;
  }

  body[data-view="canon"] .canon-watchman-story-copy {
    width: 100%;
    min-width: 0;
    padding: 0.9rem;
  }

  body[data-view="canon"] .canon-watchman-story-copy h4 {
    font-size: clamp(1.55rem, 8vw, 2.1rem);
  }

  body[data-view="canon"] .canon-watchman-story-card .canon-recent-merged-list {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="canon"] .canon-recent-grid > .canon-recent-card:not(.canon-watchman-story-card) {
    min-height: 20rem;
  }

  body[data-view="canon"] .canon-recent-grid > .canon-recent-card:not(.canon-watchman-story-card) .canon-recent-media {
    min-height: 12.5rem;
  }

  body[data-view="canon"] .canon-watchman-story-card .canon-watchman-video-controls {
    right: auto;
    left: 50%;
    bottom: 0.45rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: center;
    width: min(13rem, calc(100% - 0.7rem));
    gap: 0.28rem;
    padding: 0.18rem;
    transform: translateX(-50%);
  }

  body[data-view="canon"] .canon-watchman-story-card .canon-watchman-video-controls > button {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.72rem;
  }

  body[data-view="canon"] .canon-watchman-story-card .canon-watchman-video-dots button {
    width: 0.52rem;
    height: 0.18rem;
    min-height: 0.18rem;
  }

  body[data-view="canon"] .canon-watchman-story-card .canon-watchman-video-dots button.active {
    width: 1.1rem;
  }

  body[data-view="canon"] .canon-recent-merged-card .canon-recent-media,
  body[data-view="canon"] .canon-watchman-video-stage {
    min-height: clamp(9.5rem, 46vw, 13rem);
  }

  body[data-view="canon"] .canon-project-card:first-child .canon-project-media,
  body[data-view="canon"] .canon-project-card:nth-child(2) .canon-project-media,
  body[data-view="canon"] .canon-project-card:nth-child(n + 3) .canon-project-media {
    min-height: clamp(9.5rem, 46vw, 13rem);
  }

  body[data-view="canon"] .canon-featured-carousel-card {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  body[data-view="canon"] .canon-featured-carousel-stage {
    background:
      #062a22
      var(--canon-featured-image)
      var(--canon-featured-position, center) / 100% 100%
      no-repeat;
  }

  body[data-view="canon"] .canon-featured-carousel-copy {
    right: 1rem;
    left: 1rem;
    bottom: 4.45rem;
    width: auto;
  }

  body[data-view="canon"] .canon-featured-carousel-copy h4 {
    max-width: 11ch;
    font-size: clamp(1.65rem, 9vw, 2.45rem);
  }

  body[data-view="canon"] .canon-featured-carousel-copy p {
    font-size: 0.82rem;
  }

  body[data-view="canon"] .canon-featured-source {
    font-size: 0.72rem;
  }

  body[data-view="canon"] .canon-featured-carousel-arrow {
    top: 42%;
    width: 2.45rem;
    height: 2.45rem;
    font-size: 1.65rem;
  }

  body[data-view="canon"] .canon-featured-carousel-dots {
    bottom: 0.9rem;
    max-width: calc(100% - 2rem);
    gap: 0.34rem;
  }

  body[data-view="canon"] .canon-featured-carousel-dots button {
    width: 1.25rem;
  }

  body[data-view="canon"] .canon-featured-carousel-dots button.active {
    width: 2rem;
  }

  body[data-view="canon"] .canon-featured-slide-count {
    top: 0.92rem;
    right: 1rem;
    bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="canon"] .canon-project-media,
  body[data-view="canon"] .canon-recent-media,
  body[data-view="canon"] .canon-watchman-video-frame,
  body[data-view="canon"] .canon-watchman-story-copy,
  body[data-view="canon"] .canon-watchman-video-controls > button,
  body[data-view="canon"] .canon-watchman-video-dots button,
  body[data-view="canon"] .canon-project-card,
  body[data-view="canon"] .canon-recent-card,
  body[data-view="canon"] .canon-explore-card,
  body[data-view="canon"] .canon-featured-carousel-copy,
  body[data-view="canon"] .canon-featured-carousel-arrow,
  body[data-view="canon"] .canon-featured-carousel-dots button,
  body[data-view="canon"] .canon-featured-carousel-cta {
    transition: none !important;
    animation: none !important;
  }
}

.local-media-note {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0.45rem 0 0;
}

.local-media-disabled-copy {
  align-items: center;
  background: rgba(3, 57, 45, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.85rem;
  bottom: 1rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  left: 1rem;
  padding: 0.75rem 0.9rem;
  position: absolute;
  right: 1rem;
  text-align: center;
  z-index: 4;
}

.local-media-disabled-copy strong,
.local-media-disabled-copy small {
  color: inherit;
}

.promise-youtube-frame iframe[srcdoc],
.promise-table-video-frame iframe[srcdoc],
.ui-embed-frame iframe[srcdoc],
.table-preview-video-panel iframe[srcdoc],
.table-row-video iframe[srcdoc] {
  opacity: 0;
  pointer-events: none;
}