@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-400i.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-500.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-600.woff2") format("woff2");
}

:root {
  --bg: #1c1216;
  --bg-elev: #26181e;
  --bg-card: #2c1c22;
  --fg: #f2efe6;
  --muted: #a39e92;
  --faint: #6f6a60;
  --line: rgba(242, 239, 230, 0.08);
  --accent: #e8c547;
  --accent-dim: rgba(232, 197, 71, 0.15);
  --radius: 14px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

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

html {
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-size, 16px);
  line-height: 1.55;
  scroll-behavior: auto;
}
html[data-size="sm"] { --text-size: 15px; }
html[data-size="md"] { --text-size: 16px; }
html[data-size="lg"] { --text-size: 19px; }

body {
  min-height: 100dvh;
  background: var(--bg);
}

#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

:is(button,a:where(.tfc-route)) {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a { color: var(--accent); text-decoration: none; }

/* ---------- Onboarding ---------- */
.onboard {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(16px + var(--safe-top)) 24px calc(32px + var(--safe-bottom));
  max-width: 480px;
  margin: 0 auto;
}

.onboard h1 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.onboard .lead {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 28px;
}

.onboard .block {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.onboard .block h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: 10px;
}

.onboard ul {
  list-style: none;
  color: var(--muted);
  font-size: 0.95rem;
}

.onboard ul li {
  padding: 4px 0;
  padding-left: 1.1em;
  position: relative;
}

.onboard ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--faint);
}

.onboard .note {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 18px 0 28px;
  line-height: 1.5;
}

.onboard .start-btn {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #0a0b10;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
}

.onboard .start-btn:active { opacity: 0.9; }

/* ---------- Home ---------- */
.home {
  padding: calc(20px + var(--safe-top)) 20px calc(40px + var(--safe-bottom));
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}

 .home-header {
  margin-bottom: 28px;
  padding-top: 36px;
}

.home-header h1 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.home-header p {
  color: var(--muted);
  margin-top: 6px;
  font-size: 0.95rem;
}

.sermon-door {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px 13px;
  margin: 0 0 22px;
  color: var(--fg);
}
.sermon-door span {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}
.sermon-door strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}
.sermon-door em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  color: var(--muted);
  font-size: 0.92rem;
}
.sermon-door-inline { margin: 0 0 16px; }

.sermon-page {
  padding: calc(16px + var(--safe-top)) 20px calc(88px + var(--safe-bottom));
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}
.sermon-head { margin: 8px 0 18px; }
.sermon-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.sermon-page h1 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sermon-ref, .sermon-frame {
  color: var(--muted);
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.sermon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.sermon-chapter {
  margin-bottom: 28px;
}
.sermon-ch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 12px;
}
.sermon-chapter h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0;
  color: var(--fg);
}
.sermon-listen {
  font-size: 0.85rem;
}
.sermon-page .beat p {
  color: var(--fg);
  white-space: normal;
  margin-bottom: 10px;
}
.sermon-page .beat p:last-child { margin-bottom: 0; }
.sermon-block-ref {
  color: var(--faint) !important;
  font-size: 0.82rem !important;
  margin: -4px 0 10px !important;
}
.sermon-chapter p {
  color: var(--fg);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 12px;
}
.sermon-chapter p sup {
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 600;
  margin-right: 6px;
  letter-spacing: 0.02em;
}
.sermon-chapter.sermon-chapter-on h2 {
  color: var(--accent);
}
.sermon-beat.active-beat {
  background: var(--accent-dim);
  border-radius: 8px;
  padding: 8px 10px;
  margin-left: -10px;
  margin-right: -10px;
}
.sermon-close {
  color: var(--faint);
  font-size: 0.88rem;
  margin-top: 8px;
}

.room-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

.room-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: left;
  transition: border-color 0.15s;
}

.room-card:active { border-color: rgba(232, 197, 71, 0.35); }

.room-card h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.room-card p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.room-card .progress {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--faint);
}

/* Share section */
.share-block {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.share-block h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.share-block .sub {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.share-row label {
  display: block;
  width: 100%;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
  margin-bottom: 4px;
}

.share-btn {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--fg);
}

.share-btn:active { background: var(--bg-elev); }

.share-btn.primary {
  background: var(--accent-dim);
  border-color: rgba(232, 197, 71, 0.3);
  color: var(--accent);
}

.footer-links {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 8px;
}

.footer-links :is(button,a:where(.tfc-route)) {
  color: var(--faint);
  font-size: 0.85rem;
}

/* ---------- Section landing ---------- */
.section {
  padding: calc(16px + var(--safe-top)) 20px calc(40px + var(--safe-bottom));
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.topbar .back { flex: 1; min-width: 0; }
.read-tools {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.read-tools :is(button,a:where(.tfc-route)) {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 8px;
  min-width: 36px;
}
.read-tools :is(button,a:where(.tfc-route)):active { color: var(--fg); }
.home { position: relative; }
.home .read-tools {
  position: absolute;
  top: calc(10px + var(--safe-top));
  right: 16px;
}
.footer-links {
  text-align: center;
  padding: 28px 0 12px;
}
.footer-links :is(button,a:where(.tfc-route)) {
  color: var(--faint);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.topbar .back {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 6px 0;
}

.topbar h1 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
}

.section h1 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin: 0 0 16px; }
.bridge {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.card-item.done .title { color: var(--muted); }

.card-item .title {
  font-size: 0.98rem;
  font-weight: 500;
}

.card-item /* TFC_WEB_QA_FIXES_V1 */
.check {
  color: var(--accent);
  font-size: 0.85rem;
}
.card-item .check { display: none; }
.card-item.done .check { display: inline; }

/* ---------- Card reader ---------- */
.reader {
  padding: calc(12px + var(--safe-top)) 20px calc(32px + var(--safe-bottom));
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  touch-action: pan-y;
}
.reader.slide-out-left {
  transform: translateX(-22%);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.reader.slide-out-right {
  transform: translateX(22%);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.reader.slide-in-from-right { animation: tfcInRight .22s ease; }
.reader.slide-in-from-left { animation: tfcInLeft .22s ease; }
@keyframes tfcInRight {
  from { transform: translateX(22%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes tfcInLeft {
  from { transform: translateX(-22%); opacity: 0; }
  to { transform: none; opacity: 1; }
}


.reader .topbar {
  margin-bottom: 12px;
}

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

.action-btn {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 0.88rem;
  color: var(--muted);
}

.action-btn.active {
  background: var(--accent-dim);
  border-color: rgba(232, 197, 71, 0.35);
  color: var(--accent);
}

.action-btn.playing {
  color: var(--accent);
}

.reader h1 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.reader .ref {
  color: var(--faint);
  font-size: 0.85rem;
  margin-bottom: 22px;
}

.reader .hook {
  font-size: 1.05rem;
  color: var(--fg);
  margin-bottom: 8px;
  font-weight: 500;
}

.reader .line {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--accent);
  margin-bottom: 24px;
  line-height: 1.4;
}

.reader .section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint);
  margin: 22px 0 8px;
}

.reader .body {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 8px;
}

.reader .body p {
  margin-bottom: 14px;
}

.reader .sit {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  color: var(--fg);
  font-size: 0.98rem;
  line-height: 1.5;
}

.reader {
  max-width: 100%;
  overflow-x: hidden;
}

.reader-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  max-width: 100%;
}

.reader-nav .mark-bottom {
  width: 100%;
}

.nav-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}

.reader-nav :is(button,a:where(.tfc-route)) {
  min-width: 0;
  max-width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 10px;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
}

.reader-nav :is(button,a:where(.tfc-route)) span,
.reader-nav :is(button,a:where(.tfc-route)) strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-nav :is(button,a:where(.tfc-route)) span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 3px;
}

.reader-nav :is(button,a:where(.tfc-route)).primary {
  background: var(--accent);
  color: #0a0b10;
  border-color: transparent;
}

.reader-nav :is(button,a:where(.tfc-route)).primary span {
  color: rgba(10, 11, 16, 0.62);
}

.beat.selected {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--room-accent, var(--accent)) 70%, transparent);
  background: color-mix(in srgb, var(--room-accent, var(--accent)) 7%, var(--bg-card));
}
.beat { cursor: pointer; }

/* End of section */
.end-screen {
  text-align: center;
  padding: 40px 20px;
}

.end-screen :is(h1,h2) {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: 24px;
}

.end-screen :is(button,a:where(.tfc-route)) {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto 12px;
  padding: 14px;
  border-radius: 12px;
  font-weight: 500;
}

.end-screen .primary {
  background: var(--accent);
  color: #0a0b10;
}

.end-screen .secondary {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--muted);
}

/* Privacy */
.page {
  padding: calc(16px + var(--safe-top)) 20px calc(40px + var(--safe-bottom));
  max-width: 560px;
  margin: 0 auto;
}

.page h1 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.page .updated {
  color: var(--faint);
  font-size: 0.85rem;
  margin-bottom: 24px;
}

.page h2 {
  font-size: 1.05rem;
  margin: 24px 0 8px;
  color: var(--fg);
}

.page p, .page li {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

.page ul {
  padding-left: 1.2em;
  margin-bottom: 12px;
}

/* Audio bar */
.audio-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + var(--safe-bottom));
  display: none;
  align-items: center;
  gap: 12px;
  z-index: 50;
}

.audio-bar.visible { display: flex; }
.audio-progress {
  flex: 1 0 100%;
  height: 18px;
  cursor: pointer;
  touch-action: none;
  background: transparent;
  display: flex;
  align-items: center;
}
.audio-progress span {
  display: block;
  height: 4px;
  width: 0;
  background: var(--room-accent, var(--accent));
  border-radius: 99px;
  pointer-events: none;
  box-shadow: 0 0 0 8px rgba(242, 239, 230, 0.08);
}

.audio-bar .info {
  flex: 1;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-bar :is(button,a:where(.tfc-route)) {
  margin-left: 4px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 0.88rem;
  color: var(--fg);
  min-height: 40px;
}
.audio-bar :is(button,a:where(.tfc-route))#audio-stop {
  color: var(--fg);
}


.home-header .brand-mark {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 12px;
  object-fit: cover;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}
/* TFC_WEB_BRAND_MARK_V1 */


/* Structured card blocks */
.beat {
  margin: 0 0 12px;
  padding: 14px 14px 14px 16px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}

.beat :is(h2,h3) {
  margin: 0 0 8px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--faint);
}

.beat p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.beat.sit {
  border-left-color: var(--accent);
  background: var(--bg-elev);
}

.beat.sit p {
  color: var(--fg);
}

.reader .hook-line {
  font-size: 1.05rem;
  color: var(--fg);
  margin: 0 0 14px;
  font-weight: 500;
  line-height: 1.45;
}

.reader .line-quote {
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: var(--room-accent, var(--accent));
  margin: 0 0 8px;
  line-height: 1.35;
  font-style: italic;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--room-accent, var(--accent)) 28%, transparent);
}

.reader .ref-line {
  color: var(--faint);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 0;
}


/* Room accent colours */
.room-card[data-accent] {
  border-left: 3px solid var(--room-accent, var(--accent));
}
.section[data-accent] .section h1 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin: 0 0 16px; }
.bridge {
  border-left: 3px solid var(--room-accent, var(--accent));
}
.section[data-accent] .beat {
  border-left-color: var(--room-accent, var(--accent));
}
.section[data-accent] .line-quote {
  color: var(--room-accent, var(--accent));
}
.reader[data-accent] .beat {
  border-left-color: var(--room-accent, var(--accent));
}
.reader[data-accent] .line-quote {
  color: var(--room-accent, var(--accent));
}
.reader[data-accent] .action-btn.active {
  border-color: color-mix(in srgb, var(--room-accent, var(--accent)) 40%, transparent);
  color: var(--room-accent, var(--accent));
  background: color-mix(in srgb, var(--room-accent, var(--accent)) 12%, transparent);
}
.reader[data-accent] .reader-nav :is(button,a:where(.tfc-route)).primary {
  background: var(--room-accent, var(--accent));
  color: #0a0b10;
}

/* Bottom nav with card names */
.reader-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.reader-nav .nav-row {
  display: flex;
  gap: 10px;
}
.reader-nav .nav-row :is(button,a:where(.tfc-route)) {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
  text-align: left;
}
.reader-nav .nav-row :is(button,a:where(.tfc-route)).primary {
  background: var(--accent);
  color: #0a0b10;
  border-color: transparent;
  text-align: right;
}
.reader-nav .nav-row :is(button,a:where(.tfc-route)) span {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: 2px;
}
.reader-nav .nav-row :is(button,a:where(.tfc-route)).primary span {
  color: rgba(10,11,16,0.55);
}
.reader-nav .nav-row :is(button,a:where(.tfc-route)) strong {
  display: block;
  font-weight: 500;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-nav .mark-bottom {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
}
.reader-nav .mark-bottom.active {
  color: var(--room-accent, var(--accent));
  border-color: color-mix(in srgb, var(--room-accent, var(--accent)) 35%, transparent);
  background: color-mix(in srgb, var(--room-accent, var(--accent)) 10%, transparent);
}


/* Follow-along highlight while audio plays */
.beat.active-beat {
  border-left-width: 4px;
  background: color-mix(in srgb, var(--room-accent, var(--accent)) 14%, var(--bg-card));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--room-accent, var(--accent)) 25%, transparent);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.beat {
  transition: background 0.35s ease, box-shadow 0.35s ease, border-left-width 0.2s ease;
}


.support-block .share-btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
.beat.opening {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--room-accent, var(--accent)) 10%, var(--bg-elev)) 0%, var(--bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--room-accent, var(--accent)) 28%, var(--line));
  border-left: 3px solid var(--room-accent, var(--accent));
  padding: 20px 18px 18px;
  margin-bottom: 18px;
}
.beat.opening.active-beat {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--room-accent, var(--accent)) 18%, var(--bg-elev)) 0%, var(--bg-card) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--room-accent, var(--accent)) 30%, transparent);
}
.beat.opening .card-kicker {
  margin: 0 0 8px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--room-accent, var(--accent)) 80%, var(--faint));
}
.beat.opening .card-title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--fg);
}

.prayer-block {
  margin: 16px 0 18px;
  padding: 18px 18px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--room-accent, var(--accent)) 8%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--room-accent, var(--accent)) 22%, var(--line));
}
.prayer-block p {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--fg);
  margin: 0 0 6px;
  font-style: italic;
}
.prayer-block p:last-child { margin-bottom: 0; font-style: normal; font-weight: 600; }

.compare-wrap { margin: 14px 0 16px; overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.compare-table th,
.compare-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  width: 50%;
}
.compare-table th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--room-accent, var(--accent)) 85%, var(--fg));
  background: color-mix(in srgb, var(--room-accent, var(--accent)) 10%, var(--bg-elev));
}
.compare-table td { color: var(--fg); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tbody tr:nth-child(odd) td {
  background: rgba(242,239,230,0.02);
}

.reader-nav :is(button,a:where(.tfc-route)).counting {
  box-shadow: inset 0 0 0 1px rgba(10, 11, 16, 0.25);
}

.reader-nav :is(button,a:where(.tfc-route)) .cancel-hint {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 500;
  margin-top: 4px;
  opacity: 0.7;
}

.verse-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--room-accent, #c4a574) 70%, transparent);
}
.verse-link:hover { text-decoration-thickness: 2px; }

.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 8px 0 18px;
  padding: 16px;
  background: #f4efe4;
  border-radius: 16px;
  color: #0a0b10;
}
.qr-card img {
  width: 220px;
  height: 220px;
  border-radius: 8px;
}
.qr-card p {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3a3a3a;
}
.qr-card .share-btn {
  background: #0a0b10;
  color: #f4efe4;
}

body.audio-on .reader-nav {
  padding-bottom: calc(56px + var(--safe-bottom));
}
body.audio-on .sermon-page {
  padding-bottom: calc(140px + var(--safe-bottom));
}
.help-page h2 {
  margin-top: 22px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.help-page p { margin-bottom: 12px; }
.footer-links {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.onboard {
  position: relative;
}
.onboard-tools {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 22px;
}
.onboard-help-hint {
  margin: 0 auto 0 0;
  color: var(--fg);
  font-size: 0.92rem;
  text-align: left;
  max-width: none;
  line-height: 1.3;
}
.onboard #help-btn {
  box-shadow: 0 0 0 2px var(--fg);
  font-weight: 600;
}

.help-shot {
  display: block;
  width: 100%;
  max-width: 320px;
  border-radius: 12px;
  border: 1px solid var(--line);
  margin: 8px 0 16px;
}
.help-shot.wide { max-width: 360px; }



.path-block { margin: 6px 0 28px; }
.path-block h3 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9aa0a6; margin: 0 0 6px; }
.path-note { color: var(--muted); font-size: 0.9rem; margin: 0 0 14px; line-height: 1.4; }
.path-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.path-card {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 148px;
  padding: 16px 14px 14px;
  border-radius: 18px;
  border: 1px solid #5b6578;
  background: #2a2d36;
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, var(--room-accent) 42%, #2a2d36) 0%,
      color-mix(in srgb, var(--room-accent) 16%, #12141a) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
  transform: none;
  filter: none;
}
.path-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -12deg,
    transparent 0 2px,
    rgba(255,255,255,0.015) 2px 3px
  );
  opacity: 0.7;
}
.path-card h2 {
  position: relative;
  z-index: 1;
  font-size: 1.08rem;
  margin: 0 0 6px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.path-card p {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  line-height: 1.35;
  margin: 0;
  color: rgba(255,255,255,0.88);
  flex: 1;
}
.path-card .progress {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 12px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.72);
}
.path-go {
  float: right;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,0.28);
  border-radius: 999px;
  padding: 3px 8px;
}
.path-card:hover {
  filter: none;
}
.path-card:active {
  transform: none;
}
.path-featured {
  grid-column: 1 / -1;
  min-height: 0;
  padding: 20px 18px 16px;
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--room-accent) 55%, #3a3418) 0%,
      color-mix(in srgb, var(--room-accent) 18%, #12141a) 100%);
}
.path-featured h2 { font-size: 1.5rem; }
.path-featured p { font-size: 0.94rem; max-width: 36em; }
.path-kicker {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--room-accent);
  margin-bottom: 6px;
}
.path-list-end { margin-top: 18px; grid-template-columns: 1fr; }
.path-list-end .path-card {
  min-height: 0;
  background:
    linear-gradient(180deg, #2a303c 0%, #171a22 100%);
  border-color: #5b6578;
}
.home-header .home-sub {
  margin: 6px 0 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--muted);
}

.resume-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--fg);
}
.resume-card span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}
.resume-card strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}
.resume-card em {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 2px;
}
.home-foot {
  margin-top: 28px;
  padding-top: 8px;
  position: relative;
  z-index: 2;
  isolation: isolate;
  transform: none;
  filter: none;
}
.tfc-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 11, 16, 0.55);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 20px 16px calc(20px + var(--safe-bottom));
}
.tfc-sheet.open { display: flex; }
.tfc-sheet[hidden] { display: none !important; }
.tfc-sheet-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 18px 16px;
}
.tfc-sheet-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 10px;
  color: var(--fg);
}
.tfc-sheet-body {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 14px;
}
.tfc-sheet-body p { margin: 0 0 10px; }
.tfc-sheet-body .share-btn { margin-top: 4px; }

/* v49 home polish — share / report / tools match path doors */
.from-me {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 18px;
}
.share-block {
  background: #171a22;
  background-image:
    linear-gradient(180deg,
      #2a271c 0%,
      #12141a 100%);
  border: 1px solid #3a3628;
  border-radius: 18px;
  padding: 18px 16px 16px;
  margin-bottom: 20px;
  box-shadow: none;
  transform: none;
  filter: none;
}
.share-block.support-block {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #7dd3c0 12%, #1a1d26) 0%,
      #12141a 100%);
  border-color: color-mix(in srgb, #7dd3c0 28%, #fff 8%);
}
.share-block h3,
.path-block h3 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin: 0 0 10px;
}
.share-block .sub {
  font-family: "DM Sans", system-ui, sans-serif;
  color: rgba(255,255,255,0.78);
  font-size: 0.88rem;
}
.share-btn {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  background: color-mix(in srgb, #fff 8%, #1c1f28);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 0.88rem;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.share-btn.primary {
  background: color-mix(in srgb, #e8c547 38%, #1c1f28);
  border-color: color-mix(in srgb, #e8c547 55%, #fff 10%);
  color: #fff;
}
.share-btn:active {
  transform: none;
  filter: none;
  opacity: 0.92;
}
.read-tools :is(button,a:where(.tfc-route)) {
  font-family: "DM Sans", system-ui, sans-serif;
  background: color-mix(in srgb, #fff 8%, #1c1f28);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.footer-links :is(button,a:where(.tfc-route)) {
  font-family: "DM Sans", system-ui, sans-serif;
  color: rgba(255,255,255,0.62);
}
.page .path-card {
  width: 100%;
}

.card-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  cursor: pointer;
}
.card-link:active { opacity: 0.8; }

html[data-theme="light"] {
  color-scheme: light;
  --bg: #e4d9c6;
  --bg-elev: #d9cebb;
  --bg-card: #eee4d3;
  --fg: #1d1914;
  --muted: #5a5348;
  --faint: #746c60;
  --line: rgba(29, 25, 20, 0.14);
  --accent: #2c3632;
  --accent-dim: rgba(44, 54, 50, 0.12);
}

.search-block {
  margin: 0 0 22px;
}
.search-block label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}
.search-block input {
  width: 100%;
  font: inherit;
  color: var(--fg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}
.search-block input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 1px;
}
.search-results {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-hit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--fg);
}
.search-hit span {
  font-size: 0.78rem;
  color: var(--muted);
}
.search-empty {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 8px 2px;
}

.read-tools {
  flex-wrap: wrap;
}

html[data-theme="light"] body,
html[data-theme="light"] #app {
  background: var(--bg);
  color: var(--fg);
}
html[data-theme="light"] .home-header h1,
html[data-theme="light"] .onboard h1,
html[data-theme="light"] .page h1,
html[data-theme="light"] .page h2,
html[data-theme="light"] .section h1,
html[data-theme="light"] .reader,
html[data-theme="light"] .card-title,
html[data-theme="light"] .hook-line,
html[data-theme="light"] .beat.sit p,
html[data-theme="light"] .prayer-block p,
html[data-theme="light"] .compare-table td,
html[data-theme="light"] .end-screen :is(h1,h2),
html[data-theme="light"] .resume-card,
html[data-theme="light"] .resume-card strong,
html[data-theme="light"] .from-me,
html[data-theme="light"] .search-hit,
html[data-theme="light"] .action-btn {
  color: var(--fg);
}
html[data-theme="light"] .home-header p,
html[data-theme="light"] .home-sub,
html[data-theme="light"] .page p,
html[data-theme="light"] .page li,
html[data-theme="light"] .help-page,
html[data-theme="light"] .onboard,
html[data-theme="light"] .onboard p,
html[data-theme="light"] .onboard li,
html[data-theme="light"] .onboard .note,
html[data-theme="light"] .bridge,
html[data-theme="light"] .beat,
html[data-theme="light"] .beat p,
html[data-theme="light"] .ref-line,
html[data-theme="light"] .card-kicker,
html[data-theme="light"] .beat :is(h2,h3),
html[data-theme="light"] .topbar .back,
html[data-theme="light"] .search-block label,
html[data-theme="light"] .search-hit span,
html[data-theme="light"] .search-empty,
html[data-theme="light"] .resume-card em,
html[data-theme="light"] .resume-card span,
html[data-theme="light"] .audio-bar .info,
html[data-theme="light"] .reader-nav :is(button,a:where(.tfc-route)) span,
html[data-theme="light"] .updated {
  color: var(--muted);
}
html[data-theme="light"] .share-block,
html[data-theme="light"] .share-block.support-block,
html[data-theme="light"] .from-me,
html[data-theme="light"] .audio-bar {
  background: var(--bg-card);
  border-color: var(--line);
  box-shadow: none;
}
html[data-theme="light"] .share-block h3,
html[data-theme="light"] .path-block h3,
html[data-theme="light"] .share-row label,
html[data-theme="light"] .help-page h2 {
  color: var(--faint);
}
html[data-theme="light"] .share-block .sub {
  color: var(--muted);
}
html[data-theme="light"] .footer-links :is(button,a:where(.tfc-route)) {
  color: var(--faint);
}
html[data-theme="light"] .read-tools :is(button,a:where(.tfc-route)),
html[data-theme="light"] .share-btn:not(.primary),
html[data-theme="light"] .action-btn,
html[data-theme="light"] .reader-nav :is(button,a:where(.tfc-route)):not(.primary),
html[data-theme="light"] .reader-nav .mark-bottom,
html[data-theme="light"] .audio-bar :is(button,a:where(.tfc-route)) {
  background: #f7f0e2;
  color: var(--fg);
  border: 1px solid rgba(29, 25, 20, 0.2);
  box-shadow: none;
}
html[data-theme="light"] .share-btn.primary,
html[data-theme="light"] .reader-nav :is(button,a:where(.tfc-route)).primary,
html[data-theme="light"] .onboard .start-btn {
  background: var(--accent);
  border-color: transparent;
  color: #f7f0e2;
}
html[data-theme="light"] .reader-nav :is(button,a:where(.tfc-route)).primary span {
  color: rgba(247, 240, 226, 0.7);
}
html[data-theme="light"] .audio-bar :is(button,a:where(.tfc-route))#audio-stop {
  color: var(--fg);
  background: #f7f0e2;
}
html[data-theme="light"] .qr-card {
  background: #f7f0e2;
  color: var(--fg);
}
html[data-theme="light"] .qr-card p {
  color: var(--muted);
}
html[data-theme="light"] .qr-card .share-btn {
  background: var(--fg);
  color: #f7f0e2;
}
html[data-theme="light"] .path-card,
html[data-theme="light"] .path-card h2,
html[data-theme="light"] .path-card p,
html[data-theme="light"] .path-card .progress,
html[data-theme="light"] .path-go {
  color: #fff;
}
html[data-theme="light"] .line-quote,
html[data-theme="light"] .reader[data-accent] .line-quote,
html[data-theme="light"] .section[data-accent] .line-quote,
html[data-theme="light"] a,
html[data-theme="light"] .card-link,
html[data-theme="light"] .verse-link {
  color: var(--accent);
}
html[data-theme="light"] .verse-link {
  text-decoration-color: rgba(44, 54, 50, 0.45);
}
html[data-theme="light"] .beat,
html[data-theme="light"] .reader[data-accent] .beat,
html[data-theme="light"] .bridge,
html[data-theme="light"] .beat.sit {
  border-left-color: var(--accent);
}
html[data-theme="light"] .reader[data-accent] .reader-nav :is(button,a:where(.tfc-route)).primary {
  background: var(--accent);
  color: #f3ece0;
  border-color: transparent;
}
html[data-theme="light"] .reader[data-accent] .reader-nav :is(button,a:where(.tfc-route)).primary span {
  color: rgba(243, 236, 224, 0.72);
}
html[data-theme="light"] .action-btn.active,
html[data-theme="light"] .action-btn.playing,
html[data-theme="light"] .reader-nav .mark-bottom.active,
html[data-theme="light"] .reader[data-accent] .action-btn.active,
html[data-theme="light"] .reader[data-accent] .action-btn.playing {
  color: var(--accent);
  border-color: rgba(44, 54, 50, 0.35);
  background: var(--accent-dim);
}
html[data-theme="light"] .tfc-sheet-card,
html[data-theme="light"] .tfc-sheet-card h3 {
  background: var(--bg-card);
  color: var(--fg);
}
html[data-theme="light"] .tfc-sheet-body {
  color: var(--muted);
}


/* tfc-tablet-2026: lists stay a readable column; open cards can run wider */
@media (min-width: 700px) {
  .home,
  .section,
  .onboard,
  .help-page,
  .sermon-page {
    max-width: 720px;
  }
  .reader {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
  }
  .room-list { gap: 16px; }
  .room-card {
    padding: 22px 24px;
    min-height: 76px;
  }
  .path-list { gap: 16px; }
  .path-card { min-height: 176px; padding: 20px 18px 16px; }
  .path-card h2 { font-size: 1.18rem; }
  .path-card p { font-size: 0.88rem; }
  .sermon-door { padding: 18px 20px; }
}

/* web home stack — paper rooms, no 2-col grid */
.home-web .home-header { text-align: center; }
.home-web .home-header h1 { margin-left: auto; margin-right: auto; }
.home-web .path-list {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 10px !important;
}
.home-web .room-door {
  width: 100%;
  text-align: center;
  cursor: pointer;
  background: #f3ead9;
  color: #301d0f;
  border: 1px solid rgba(48,29,15,.10);
  border-radius: 11px;
  padding: 16px 16px 14px;
  box-shadow: none;
}
.home-web .room-door h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0;
  font-weight: 600;
  color: #301d0f;
}
.home-web .room-door .room-dash {
  display: block;
  width: 100%;
  height: 1px;
  margin: 10px 0;
  background: var(--room-accent, #8b5a2b);
  border-radius: 0;
}
.home-web .room-door p {
  margin: 0;
  color: #5a4636;
  font-size: .92rem;
  line-height: 1.3;
}
.home-web .path-list-end .path-card {
  min-height: 0 !important;
  background: #f3ead9 !important;
  background-image: none !important;
  color: #301d0f !important;
  border: 1px solid rgba(48,29,15,.10) !important;
  text-align: center;
}
.home-web .path-list-end .path-card h2,
.home-web .path-list-end .path-card p,
.home-web .path-list-end .path-card .progress {
  color: #301d0f !important;
}
.home-web .path-list-end .path-card p,
.home-web .path-list-end .path-card .progress { color: #5a4636 !important; }
.home-foot[data-web="share-off"] .share-block:not(.open) { display: none !important; }
html[data-theme="dark"] .home-web .room-door,
html[data-theme="dark"] .home-web .path-list-end .path-card {
  background: #2a1b22 !important;
  color: #efe4d4 !important;
  border-color: rgba(236,214,186,.12) !important;
}
html[data-theme="dark"] .home-web .room-door h2,
html[data-theme="dark"] .home-web .path-list-end .path-card h2 { color: #efe4d4 !important; }
html[data-theme="dark"] .home-web .room-door p,
html[data-theme="dark"] .home-web .path-list-end .path-card p { color: #cbbba8 !important; }

/* web: kill leftover accent kickers */
.bridge,
.section .bridge,
.section[data-accent] .bridge {
  border-left: 1px solid var(--line, rgba(48,29,15,.10)) !important;
}
.beat,
.beat.opening,
.reader[data-accent] .beat,
.section[data-accent] .beat,
.beat.opening {
  border-left-color: var(--line, rgba(48,29,15,.10)) !important;
  border-left-width: 1px !important;
}
.card-item,
.section .card-item {
  border-left: 1px solid var(--line, rgba(48,29,15,.10)) !important;
}

/* TFC_WEB_PLAY_BADGE_CSS_V1 */
.tfc-play-wrap {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 0 0 8px;
}
.tfc-play-badge {
  display: block;
  width: 180px;
  max-width: min(180px, 72vw);
  height: auto;
  object-fit: contain;
}

/* TFC_WEB_ONBOARD_PLAY_V1 */
.onboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
}
.onboard-top .back {
  font-size: 0.92rem;
  color: var(--muted);
}
.onboard-mark {
  width: 40px;
  height: 40px;
  margin: 4px 0 16px;
  background: url("../icons/icon-192.png") center / contain no-repeat;
}
.onboard-line {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 10px;
  line-height: 1.45;
}
.onboard-note {
  color: var(--faint);
  font-size: 0.92rem;
  margin: 14px 0 0;
  line-height: 1.45;
}
.onboard .start-btn {
  margin-top: 28px;
}
.onboard-help-hint { display: none; }

/* TFC_WEB_HELP_PLAY_V1 */
.help-kicker {
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  margin: 0 0 12px;
}
.help-page .share-btn { margin: 4px 4px 4px 0; }
.help-link { margin: 10px 0; }

/* TFC_WEB_NIGHT_ACTIVE_V1 */
html[data-theme="dark"] .action-btn.active,
html[data-theme="dark"] .action-btn.playing,
html[data-theme="dark"] .reader[data-accent] .action-btn.active,
html[data-theme="dark"] .reader[data-accent] .action-btn.playing,
html[data-theme="dark"] .reader-nav .mark-bottom.active {
  color: #f3e2a8;
  background: #3a3220;
  border-color: #c4a24a;
}


/* TFC_WEB_NIGHT_CONTRAST_20260925 */
html[data-theme="dark"] .reader .hook,
html[data-theme="dark"] .hook-line,
html[data-theme="dark"] .card-title {
  color: #f3eadc !important;
}
html[data-theme="dark"] .reader .body,
html[data-theme="dark"] .ref-line,
html[data-theme="dark"] .card-kicker,
html[data-theme="dark"] .section-label,
html[data-theme="dark"] .beat.opening .card-kicker {
  color: #d2c6b4 !important;
}

/* TFC_WEB_WINE_NIGHT_20260925 */
html[data-theme="dark"] {
  --bg: #1c1216;
  --bg-elev: #26181e;
  --bg-card: #2c1c22;
}
html[data-theme="dark"] body,
html[data-theme="dark"] #app {
  background: #1c1216;
  color: #efe4d4;
}
html[data-theme="dark"] .home-hebrews,
html[data-theme="dark"] .home-hebrews-ref {
  color: #cbbba8;
}
html[data-theme="dark"] .home-sub,
html[data-theme="dark"] .home-header p {
  color: #cbbba8;
}

/* TFC_WEB_HOOK_CONTRAST_20260925 */
html[data-theme="dark"] .hook-line,
html[data-theme="dark"] .reader .hook-line,
html[data-theme="dark"] .section .hook,
html[data-theme="dark"] .section .hook-line,
html[data-theme="dark"] .section-card p,
html[data-theme="dark"] .card-list .hook,
html[data-theme="dark"] .list-card p {
  color: #e8d8c8 !important;
}

/* TFC_WEB_BRIDGE_NIGHT_20260925 */
html[data-theme="dark"] .section .bridge,
html[data-theme="dark"] .bridge {
  color: #e8d8c8 !important;
}

/* TFC_WEB_ONBOARD_NOTE_SIZE */
.onboard .note,
.onboard p.note,
.onboard-note {
  font-size: inherit;
  line-height: inherit;
  opacity: 1;
}

/* TFC_WEB_LABEL_CONTRAST_20260925 */
html[data-theme="dark"] .section .bridge,
html[data-theme="dark"] .bridge,
html[data-theme="dark"] .beat :is(h2,h3),
html[data-theme="dark"] .card-kicker,
html[data-theme="dark"] .beat.opening .card-kicker,
html[data-theme="dark"] .reader h3,
html[data-theme="dark"] .sermon-block h3,
html[data-theme="dark"] .sermon-kicker {
  color: #f2e6d6 !important;
}

/* TFC_WEB_RECORD_ACCENT_NIGHT */
html[data-theme="dark"] .section[style*="5e6a75"],
html[data-theme="dark"] .section[style*="5E6A75"] {
  --room-accent: #9aa7b4;
}
html[data-theme="dark"] .section[style*="5e6a75"] .bridge,
html[data-theme="dark"] .section[style*="5e6a75"] h1,
html[data-theme="dark"] .home-web .room-door[style*="5e6a75"] p,
html[data-theme="dark"] .home-web .room-door[style*="5e6a75"] .room-dash {
  color: #9aa7b4 !important;
}

/* TFC_WEB_RECORD_READER_NIGHT */
html[data-theme="dark"] .reader[style*="5e6a75"],
html[data-theme="dark"] .reader[style*="5E6A75"] {
  --room-accent: #9aa7b4;
}
html[data-theme="dark"] .reader[style*="5e6a75"] .hook-line,
html[data-theme="dark"] .reader[style*="5e6a75"] .line-quote,
html[data-theme="dark"] .reader[style*="5e6a75"] .card-kicker {
  color: #9aa7b4 !important;
}

/* TFC_WEB_END_PAPER_20260925 */
html[data-theme="light"] .end-screen :is(h1,h2) {
  color: #301d0f;
}
html[data-theme="light"] .end-screen .primary,
html[data-theme="light"] .end-screen :is(button,a:where(.tfc-route)).primary {
  background: #e8c547 !important;
  color: #301d0f !important;
  border: none !important;
}
html[data-theme="light"] .end-screen .secondary,
html[data-theme="light"] .end-screen :is(button,a:where(.tfc-route)).secondary {
  background: #eee4d3 !important;
  color: #301d0f !important;
  border: 1px solid #c9bba8 !important;
}

/* TFC_AND_VERSE_CITES_CSS_V1 */
.tfc-verse-cite {
  display: inline;
  margin-left: 0.38em;
  color: color-mix(in srgb, var(--room-accent, var(--accent)) 45%, var(--faint));
  font-size: 0.74rem;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: auto;
}
.tfc-verse-cite .verse-link {
  color: inherit !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 2px;
  margin: -5px -2px;
}
.ref-line .verse-link,
.ref-line > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 7px 3px;
  margin: -7px 0;
}
/* TFC_WEB_SHARE_OPEN_CONTRAST_20261003 */
html[data-theme="light"] .home-web .path-go {
  background: #301d0f !important;
  color: #f3ead9 !important;
}


/* TFC_WEB_FINAL_FIXES_20261004 */
.audio-progress {
  position: relative;
}
.audio-progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--fg) 20%, transparent);
  pointer-events: none;
}
.audio-progress span {
  position: relative;
  z-index: 1;
}
.audio-bar .audio-skip {
  padding-left: 10px;
  padding-right: 10px;
}
.audio-bar #audio-return {
  flex: 1 0 100%;
  margin: 0;
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
}
.tfc-sheet-body .share-btn {
  margin: 4px 8px 4px 0;
}
html[data-theme="dark"] .home-web .path-list-end .path-card .progress,
html[data-theme="dark"] .onboard-note,
html[data-theme="dark"] .onboard .note {
  color: #cbbba8 !important;
}
html[data-theme="light"] .card-kicker,
html[data-theme="light"] .reader .section-label,
html[data-theme="light"] .share-row label,
html[data-theme="light"] .tfc-verse-cite,
html[data-theme="light"] .tfc-verse-cite .verse-link,
html[data-theme="light"] .ref-line .verse-link,
html[data-theme="light"] .ref-line > a {
  color: #5a4636 !important;
}


/* TFC_WEB_FINAL_POLISH_20261004 */
html[data-theme="dark"] .sermon-door span,
html[data-theme="dark"] .search-block label,
html[data-theme="dark"] .sermon-block-ref,
html[data-theme="dark"] .sermon-block-ref .verse-link,
html[data-theme="dark"] .sermon-chapter p sup {
  color: var(--muted) !important;
}
html[data-theme="light"] .share-block h3,
html[data-theme="light"] .path-block h3,
html[data-theme="light"] .share-row label,
html[data-theme="light"] .help-page h2,
html[data-theme="light"] .footer-links :is(button,a:where(.tfc-route)),
html[data-theme="light"] .topbar .back {
  color: var(--muted) !important;
}
html[data-theme="light"] .read-tools :is(button,a:where(.tfc-route)) {
  color: var(--fg) !important;
}

/* TFC_WEB_WARMTH_FEEDBACK_V1: simple accessible contact panel */
.tfc-feedback { margin: 32px 0 24px; padding-top: 8px; scroll-margin-top: 22px; }
.tfc-feedback form { display: flex; flex-direction: column; align-items: stretch; gap: 9px; margin: 20px 0 10px; }
.tfc-feedback label { font-weight: 600; margin-top: 8px; }
.tfc-feedback input, .tfc-feedback select, .tfc-feedback textarea {
  display: block; box-sizing: border-box; width: 100%; min-width: 0;
  font: inherit; line-height: 1.45; color: var(--fg); background: var(--bg-elev, var(--bg));
  border: 1px solid var(--border, rgba(127,127,127,.5)); border-radius: 10px; padding: 12px;
}
.tfc-feedback textarea { resize: vertical; min-height: 110px; }
.tfc-feedback form .share-btn { align-self: flex-start; margin: 13px 0 0; }
.tfc-feedback-note { font-size: .9rem; opacity: .85; }


/* TFC_WEB_PARITY_V100: mobile and browser-zoom responsive reading UI */
.home-header h1 { font-size: min(1.7rem, 12vw); overflow-wrap: normal; word-break: normal; }
.reader .beat.opening .card-title, .reader .card-title {
  font-size: min(1.85rem, 11vw); overflow-wrap: normal; word-break: normal; hyphens: none;
}
.reader .line-quote { overflow-wrap: break-word; }
.reader, .reader .beat, .reader .topbar { min-width: 0; }
.topbar, .onboard .topbar, .help-page .topbar {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px;
}
.topbar .back { flex: 1 1 9rem; min-width: min(100%, 9rem); white-space: normal; overflow-wrap: normal; word-break: normal; }
html .read-tools { display: flex; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
html .read-tools :is(button,a:where(.tfc-route)) {
  font-size: clamp(12px, .78rem, 17px) !important; line-height: 1.2 !important;
  white-space: nowrap; min-height: 44px; height: auto;
  padding: 8px 10px;
}
.home .read-tools { max-width: calc(100% - 24px); }
.home-header { padding-top: max(36px, 2.25rem); }
.reader-nav .nav-row { flex-wrap: wrap; }
.reader-nav .nav-row > :is(button,a:where(.tfc-route)) { min-width: min(100%, 8rem); }
@media (max-width: 390px) {
  .reader .beat.opening { padding-left: 14px; padding-right: 14px; }
}
/* The reading tiles are touch targets, not text-selection surfaces. */
.reader .beat, .reader .beat *, .sermon-beat, .sermon-beat *, .sermon-block, .sermon-block * {
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Preserve scrolling and two-finger pinch-zoom; horizontal gestures remain in JS. */
.reader { touch-action: pan-y pinch-zoom; }
/* Night contrast: make small references readable without erasing room identity. */
html[data-theme="dark"] .tfc-verse-cite,
html[data-theme="dark"] .tfc-verse-cite .verse-link,
html[data-theme="dark"] .reader .ref-line .verse-link,
html[data-theme="dark"] .reader .ref-line > a,
html[data-theme="dark"] .sermon-block-ref .verse-link {
  color: color-mix(in srgb, var(--room-accent, var(--accent)) 30%, #efe4d4) !important;
}
html[data-theme="dark"] .reader[data-accent] .reader-nav :is(button,a:where(.tfc-route)).primary {
  background: color-mix(in srgb, var(--room-accent, var(--accent)) 30%, #efe4d4) !important;
  color: #1c1216 !important;
}
html[data-theme="dark"] .reader[data-accent] .reader-nav :is(button,a:where(.tfc-route)).primary span,
html[data-theme="dark"] .reader[data-accent] .reader-nav :is(button,a:where(.tfc-route)).primary strong {
  color: #1c1216 !important;
}
.tfc-feedback-confirm[hidden] { display: none !important; }
.tfc-feedback-confirm { margin: 1rem 0; padding: 1rem; border: 1px solid var(--border, var(--line)); border-radius: 12px; }
.tfc-feedback-confirm .share-btn { margin: 8px 8px 0 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* /TFC_WEB_PARITY_V100 */


/* TFC_WEB_V100_AUDIT_FIX_V1: accessibility and narrow layout */
/* Two normal home controls are absolute; Paths needs a real toolbar because it has a Back :is(button,a:where(.tfc-route)). */
.home.paths-home .read-tools {
  position: static;
  top: auto;
  right: auto;
  margin-left: auto;
  max-width: 100%;
}
.home.paths-home .topbar { flex-wrap: wrap; align-items: flex-start; }
.home.paths-home .topbar .back { flex: 1 1 8rem; min-width: min(100%, 8rem); }
/* Preserve whole words in the only title too long at 320px with A+. */
@media (max-width: 340px) {
  .reader .beat.opening .card-title, .reader .card-title {
    font-size: min(1.85rem, 9.5vw);
  }
}
/* WCAG AA readability for text designated 'faint'; keep it below the main muted shade. */
:root { --faint: #989085; }
html[data-theme="light"] { --faint: #625a50; }
html[data-theme="light"] .tfc-feedback-note { opacity: 1; color: #625a50; }
html[data-theme="dark"] .tfc-feedback-note { opacity: 1; color: #a39e92; }
/* The 'Skip' control should not cover an entire desktop toolbar. */
.onboard .onboard-top .back { flex: 0 0 auto; }
/* /TFC_WEB_V100_AUDIT_FIX_V1 */

/* TFC_WEB_V104: quiet home, mobile audio dock, Follow, Sermon and sharing */
.topbar .back { flex:0 1 auto; min-width:0; width:auto; text-align:left; margin-right:auto; }
.onboard .onboard-top .back, .home.paths-home .topbar .back {flex:0 1 auto; min-width:0;}
.reader-nav .nav-row {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px;}
.reader-nav .nav-row > :is(button,a:where(.tfc-route)) {min-width:0; width:100%;}
.reader-nav .nav-row > :is(button,a:where(.tfc-route)):only-child {grid-column:2;}
.reader-nav .nav-row > .nav-empty {visibility:hidden; min-width:0;}
.reader-actions #mark-btn, .reader-nav #mark-btn-bottom {min-width:7.9rem;}
html[data-theme="light"] .home-web .path-list-end .path-card h2,
html[data-theme="light"] .home-web .path-list-end .path-card strong {text-shadow:none;}
.home-web .home-header {margin-bottom:16px;}
.home-web .home-header .home-hebrews {max-width:38ch; margin-inline:auto;}
/* TFC_WEB_V106_CONTINUE_TEAL: compact Continue uses the room-door typographic language. */
.home-web .resume-card {
  --resume-accent:#46746c;
  display:block; width:100%; min-height:61px;
  margin:0 0 13px; padding:6px 13px;
  text-align:center; background:#f3ead9; border:1px solid rgba(48,29,15,.10);
  border-radius:11px; box-shadow:none; color:#301d0f; cursor:pointer;
}
.home-web .resume-card .resume-copy {
  display:flex; flex-direction:column; align-items:stretch; min-width:0; gap:0;
  width:100%; margin:0; text-align:center;
  text-transform:none; letter-spacing:normal;
}
.home-web .resume-card .resume-kicker {
  display:block; margin:0; font:600 .63rem/1.25 var(--font-body);
  letter-spacing:.105em; text-transform:uppercase; color:#765f4c;
}
.home-web .resume-card .resume-title {
  display:block; margin:0; min-width:0; font:600 1rem/1.22 var(--font-body);
  letter-spacing:0; text-transform:none; color:#301d0f;
  overflow-wrap:break-word;
}
.home-web .resume-card .resume-title::after {
  content:""; display:block; width:100%; height:1px;
  margin:5px 0 4px; background:var(--resume-accent);
}
.home-web .resume-card .resume-room {
  display:block; margin:0; font:400 .69rem/1.3 var(--font-body);
  text-transform:none; letter-spacing:normal; color:#5a4636;
}
.home-web .resume-card .resume-arrow { display:none; }
.home-web .resume-card:focus-visible {
  outline:3px solid var(--resume-accent); outline-offset:3px;
}
html[data-theme="dark"] .home-web .resume-card {
  --resume-accent:#8fb7ad;
  background:#2a1b22; border-color:rgba(236,214,186,.12); color:#efe4d4;
}
html[data-theme="dark"] .home-web .resume-card .resume-title { color:#efe4d4; }
html[data-theme="dark"] .home-web .resume-card .resume-kicker,
html[data-theme="dark"] .home-web .resume-card .resume-room { color:#cbbba8; }
.audio-bar.visible {display:grid; grid-template-columns:minmax(0,1fr) repeat(5,minmax(0,auto));
 gap:6px; padding:8px 10px calc(9px + var(--safe-bottom)); align-items:center;}
.audio-bar .audio-progress {grid-column:1 / -1; flex:none; min-width:0;}
.audio-bar .info {grid-column:1; min-width:0; flex:none; font-size:.79rem; }
.audio-bar :is(button,a:where(.tfc-route)) {margin:0; min-width:0; padding:7px 9px; min-height:40px; font-size:.79rem;}
.audio-bar #audio-return {grid-column:1 / -1; justify-self:stretch;}
@media(max-width:390px){
 .audio-bar.visible {grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; padding-inline:8px;}
 .audio-bar .info {grid-column:1 / -1; text-align:center; font-size:.78rem; max-width:100%;}
 .audio-bar :is(button,a:where(.tfc-route)) {padding:7px 3px; font-size:.78rem; white-space:nowrap;}
 .audio-bar #audio-return {grid-column:1 / -1;}
}
.sermon-verse.active-verse {background:var(--accent-dim); border-radius:8px; padding:5px 8px; margin-left:-8px; margin-right:-8px;}
.sermon-prayer-lines {display:block; margin:12px 0 8px; padding:12px 14px; border-left:2px solid var(--accent); line-height:1.7;}
.sermon-prayer-lines span {display:block;}
.sermon-page .sermon-prayer-lines span {margin:0;}
.search-count {font-size:.82rem; color:var(--muted); padding:8px 12px;}
.search-more {width:100%; border:1px solid var(--line); border-radius:10px;
 padding:10px; background:var(--bg-card); color:var(--fg); font:inherit;}
.share-minimal {display:flex; align-items:center; flex-wrap:wrap; column-gap:10px; row-gap:8px;}
.share-minimal h3, .share-minimal p {width:100%;}
.not-found {max-width:560px; margin:auto; padding:50px 22px;}
.not-found h1 {font-family:var(--font-display); margin-bottom:12px;}
.not-found p {margin-bottom:18px;}

/* TFC_WEB_V104B: Reserve the dock's measured height on EVERY view, including return row. */
body.audio-on #app { padding-bottom: calc(var(--tfc-audio-dock-height, 120px) + 24px + var(--safe-bottom)); }
body.audio-on .reader-nav { padding-bottom: calc(18px + var(--safe-bottom)); }

/* TFC_WEB_R98_DOCK_VISUAL_CANDIDATE — display only; preserve web playback wiring */
#audio-bar.audio-bar.visible {
  --tfc-dock-surface: #ead9c4;
  --tfc-dock-ink: #1c1814;
  --tfc-dock-track: rgba(28,24,20,.20);
  --tfc-dock-gold: #c4a056;
  --tfc-pad-bg: #dfccb5;
  --tfc-pad-ink: #533c2e;
  --tfc-pad-border: rgba(70,53,42,.10);
  --tfc-primary-bg: #533c2e;
  --tfc-primary-ink: #f1e4cc;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 10px max(12px, env(safe-area-inset-left, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px));
  background: var(--tfc-dock-surface);
  color: var(--tfc-dock-ink);
  border: 0;
  border-top: 1px solid rgba(28,24,20,.12);
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
}
html[data-theme="dark"] #audio-bar.audio-bar.visible {
  --tfc-dock-surface: #2a181c;
  --tfc-dock-ink: #efe4d4;
  --tfc-dock-track: rgba(236,214,186,.28);
  --tfc-pad-bg: #49343d;
  --tfc-pad-ink: #b7a092;
  --tfc-pad-border: rgba(234,219,203,.07);
  --tfc-primary-bg: #b7a092;
  --tfc-primary-ink: #301e25;
}
#audio-bar.audio-bar.visible .audio-progress {
  position: relative;
  width: 100%; height: 28px; flex: none;
  min-width: 0; margin: 0; padding: 0;
  background: transparent;
  display: block;
  touch-action: none;
}
#audio-bar.audio-bar.visible .audio-progress::before {
  content: ""; position: absolute; left: 0; right: 0; top: 13px;
  height: 3px; background: var(--tfc-dock-track); border-radius: 99px; pointer-events: none;
}
#audio-bar.audio-bar.visible #audio-progress-fill {
  position: absolute; left: 0; top: 13px; height: 3px;
  background: var(--tfc-dock-gold); border-radius: 99px; box-shadow: none;
}
#audio-bar.audio-bar.visible #audio-progress-fill::after {
  content: ""; position: absolute; right: -6px; top: -4.5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--tfc-dock-gold);
  box-shadow: 0 0 0 3px var(--tfc-dock-surface);
}
#audio-bar .tfc-dock-heading {
  text-align: center; font-size: 15px; font-weight: 650;
  line-height: 1.35; padding: 0 4px 2px; color: var(--tfc-dock-ink);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#audio-bar .tfc-dock-status {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#audio-bar .tfc-dock-row {
  display: flex; justify-content: space-evenly; align-items: center;
  width: min(100%, 410px); max-width: 100%; margin-inline: auto; gap: clamp(3px,1.2vw,10px);
}
#audio-bar .tfc-dock-row :is(button,a:where(.tfc-route)).tfc-pad {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; flex: 0 1 44px;
  width: 44px; min-width: 40px; max-width: 44px;
  height: 44px; min-height: 44px; padding: 0; margin: 0;
  border: 1px solid var(--tfc-pad-border); border-radius: 50%;
  background: var(--tfc-pad-bg); color: var(--tfc-pad-ink);
  box-shadow: none; font: 650 11px/1 system-ui,sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#audio-bar .tfc-dock-row :is(button,a:where(.tfc-route)).tfc-primary {
  flex: 0 0 58px; width: 58px; min-width: 58px; max-width: 58px;
  height: 58px; min-height: 58px; background: var(--tfc-primary-bg);
  color: var(--tfc-primary-ink);
}
#audio-bar .tfc-dock-row :is(button,a:where(.tfc-route)).tfc-pad svg {
  display: block; width: 23px; height: 23px; fill: currentColor; color: inherit;
}
#audio-bar .tfc-dock-row :is(button,a:where(.tfc-route)).tfc-primary svg { width: 27px; height: 27px; }
#audio-bar .tfc-dock-row .tfc-skip-icon {
  display: block; flex: 0 0 29px; width: 29px; height: 29px;
  background: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
#audio-bar .tfc-dock-row .tfc-skip-back {
  -webkit-mask-image: url("../icons/tfc-seek-back15.png");
  mask-image: url("../icons/tfc-seek-back15.png");
}
#audio-bar .tfc-dock-row .tfc-skip-forward {
  -webkit-mask-image: url("../icons/tfc-seek-forward15.png");
  mask-image: url("../icons/tfc-seek-forward15.png");
}
#audio-bar .tfc-dock-row :is(button,a:where(.tfc-route)).tfc-pad:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
#audio-bar .tfc-dock-row :is(button,a:where(.tfc-route)).tfc-pad:active { transform: scale(.96); }
#audio-bar #audio-return {
  align-self: center; border: 0; background: transparent;
  color: var(--tfc-dock-ink); font-size: 11px; padding: 4px 10px;
  min-height: 0; margin: 0; text-align: center;
}
/* End dock visual candidate */

/* TFC_WEB_VISUAL_PARITY_CANDIDATE_V1
   Web-only, alignment-only parity with Android's centred reading composition.
   Preserve the web's flexible widths, padding, controls and locked V106 tile geometry.
   Do not apply to Android-only widget Scripture text. */
.reader .beat,
.reader .beat :is(h2,h3),
.reader .beat p,
.reader .beat .card-kicker,
.reader .beat .card-title,
.reader .beat .hook-line,
.reader .beat .line-quote,
.reader .beat .ref-line,
.reader .body,
.reader .body p,
.reader .sit,
.reader .sit p {
  text-align: center;
}

/* The homepage uses a narrower alignment scope than Android's broad overrides. */
.home-web .sermon-door,
.home-web .sermon-door span,
.home-web .sermon-door strong,
.home-web .sermon-door em,
.home-web .search-block,
.home-web .search-block label,
.home-web .search-block input {
  text-align: center;
}

/* Locked V106: reinforce alignment only; preserve its size, type and divider. */
.home-web .resume-card .resume-kicker,
.home-web .resume-card .resume-title,
.home-web .resume-card .resume-room {
  text-align: center;
}

/* TFC_WEB_R98_DOCK_REFINEMENT_V1 — scoped visual corrections only.
   Stop matches the remaining secondary pads. Do not affect transport wiring. */
#audio-bar.audio-bar.visible .tfc-dock-row #audio-stop.tfc-pad {
  background: var(--tfc-pad-bg);
  background-color: var(--tfc-pad-bg);
  color: var(--tfc-pad-ink);
  border-color: var(--tfc-pad-border);
}
/* Darker gold improves the distinction of the thin Paper progress indicator.
   Night retains the Android-inspired warm highlight. */
#audio-bar.audio-bar.visible {
  --tfc-dock-gold: #80601e;
  --tfc-dock-track: rgba(28,24,20,.48);
  --tfc-pad-border: rgba(70,53,42,.27);
}
html[data-theme="dark"] #audio-bar.audio-bar.visible {
  --tfc-dock-gold: #c4a056;
  border-top-color: rgba(239,228,212,.26);
}
/* Preserve the five-:is(button,a:where(.tfc-route)) arrangement at all widths. */

/* TFC_WEB_ANDROID_PARITY_FINAL_V2 — visual scope only.
   Android R98 comparisons: HOME_CENTER, HOME_PATHS, ROOM_TILE_CENTER,
   SECTION_LIST, bottom Mark as read. No page-width/padding transplant.
   The standalone Sermon reading, paragraph margins and audio remain unchanged. */
.home-web .home-header > p,
.home-web .home-sub,
.home-web .path-block > h3,
.home-web .path-note,
.home-web .home-foot,
.home-web .home-foot h3,
.home-web .home-foot p,
.home.paths-home .home-header > p,
.home.paths-home .home-sub {
  text-align: center;
}
.home-web .path-list-end .path-card,
.home-web .path-list-end .path-card h2,
.home-web .path-list-end .path-card p,
.home-web .path-list-end .path-card .progress,
.home-web .path-list-end .path-card .path-go,
.home.paths-home .path-list .path-card,
.home.paths-home .path-list .path-card h2,
.home.paths-home .path-list .path-card p,
.home.paths-home .path-list .path-card .progress,
.home.paths-home .path-list .path-card .path-go {
  text-align: center;
}
.home-web .path-list-end .path-card .progress,
.home.paths-home .path-list .path-card .progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* The room list and card rows match Android alignment without changing
   web-specific dimensions, card ordering, completion badges or click targets. */
.section > h1,
.section > h2,
.section > p,
.section .room-card,
.section .room-card h2,
.section .room-card p,
.section .card-item,
.section .card-item .title {
  text-align: center;
}
.section .card-item {
  position: relative;
  display: block;
  padding-inline: 40px;
  box-sizing: border-box;
}
.section .card-item .title {
  display: block;
  width: 100%;
}
.section .card-item .check {
  position: absolute;
  right: 14px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
}
/* Maintain centred results while keeping their links and excerpts intact. */
.home-web .search-hit {
  text-align: center;
  align-items: center;
}
.reader-nav #mark-btn-bottom {
  text-align: center;
}
/* Keep reference links as intact wrap units. Balancing reduces, but does not
   guarantee elimination of orphan literal separators in existing HTML. */
.reader .ref-line {
  text-wrap: balance;
}
.reader .ref-line a {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
}
/* End TFC_WEB_ANDROID_PARITY_FINAL_V2 */

/* TFC_WEB_PARITY_RECHECK_V3 — source-link wrapping and responsive alignment.
   Preserve authored paragraph spacing, Sit accent edge and Sermon text layout. */
.reader .ref-line .tfc-ref-unit {
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
}
/* Paths remains centred at both mobile and desktop breakpoints. */
.home.paths-home .home-header h1,
.home.paths-home .home-header p,
.home.paths-home .path-block > h3,
.home.paths-home .path-list .path-card,
.home.paths-home .path-list .path-card h2,
.home.paths-home .path-list .path-card p,
.home.paths-home .path-list .path-card .progress,
.home.paths-home .path-list .path-card .path-go,
.home-web .path-list-end .path-card,
.home-web .path-list-end .path-card h2,
.home-web .path-list-end .path-card p {
  text-align: center !important;
}
.home.paths-home .path-list .path-card,
.home-web .path-list-end .path-card {
  align-items: center;
}
.home.paths-home .path-list .path-card p,
.home-web .path-list-end .path-card p {
  width: 100%;
  min-width: 0;
}
/* At enlarged browser text sizes, allow toolbars to stack rather than overflow.
   Applies only where space is constrained; no font shrinking. */
@media (max-width: 430px) {
  .help-page .topbar,
  .page .topbar,
  .home.paths-home .topbar {
    min-width: 0;
    flex-wrap: wrap;
  }
  .help-page .topbar .back,
  .page .topbar .back,
  .home.paths-home .topbar .back {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .help-page .read-tools,
  .page .read-tools,
  .home.paths-home .read-tools {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .home.paths-home .path-list,
  .home.paths-home .path-list .path-card,
  .home.paths-home .path-list .path-card > * {
    min-width: 0;
  }
  .home.paths-home .path-list .path-card h2,
  .home.paths-home .path-list .path-card p {
    overflow-wrap: anywhere;
  }
  .reader-nav .nav-row :is(button,a:where(.tfc-route)) span,
  .reader-nav .nav-row :is(button,a:where(.tfc-route)) strong {
    min-width: 0;
    max-width: 100%;
  }
}
/* End TFC_WEB_PARITY_RECHECK_V3 */


/* TFC_WEB_PARITY_RECHECK_V4 — isolated final targeted correction.
   Preserve source labels, audio markup, reader prose and locked Continue styling. */

/* Treat a bullet and its following link as one wrapping flex unit.
   The link may wrap within the unit if too long for the available line. */
.reader .ref-line .tfc-ref-unit {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  white-space: nowrap;
  vertical-align: baseline;
}
.reader .ref-line .tfc-ref-unit a {
  display: inline-block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Extremely enlarged browser text: permit one generous path column. */
@media (max-width: 430px) {
  .home.paths-home .path-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14ch), 1fr));
  }
}
/* Avoid shrink-to-fit and mid-word splitting within card descriptions. */
.home.paths-home .path-list .path-card h2,
.home.paths-home .path-list .path-card p {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* Reinstate the deliberate 3px accent edge, retaining square left corners. */
.reader .sit,
.reader .beat.sit,
.reader[data-accent] .beat.sit {
  border-left: 3px solid var(--accent) !important;
}

/* Keep navigation labels intact at severe text zoom; retain title ellipses. */
@media (max-width: 430px) {
  .reader-nav .nav-row :is(button,a:where(.tfc-route)) span {
    font-size: clamp(10px, 0.72rem, 12px);
    letter-spacing: 0.02em;
    text-overflow: clip;
  }
}
/* End TFC_WEB_PARITY_RECHECK_V4 */


/* TFC_WEB_HELP_REFRESH_V5 — help wording parity, screenshot refresh, and mailto wrapping. */
.help-shot {
  margin: 8px auto 16px;
}
.help-shot.wide {
  max-width: 420px;
}
.page a[href^="mailto:"],
.help-link a,
.tfc-feedback-note a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* TFC_WEB_HELP_REFRESH_V5B: equal-width Help illustrations. */
.help-page .help-shot { max-width: 420px; }

/* Bounded share-sheet scrolling; close remains outside the scrollable body. */
.tfc-sheet { box-sizing: border-box; max-height: 100dvh; overscroll-behavior: contain; }
.tfc-sheet-card { box-sizing: border-box; max-height: 100%; display: flex; flex-direction: column; min-height: 0; }
.tfc-sheet-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.tfc-sheet-card > h3, .tfc-sheet-card > :is(button,a:where(.tfc-route)) { flex-shrink: 0; }
body:has(.tfc-sheet.open) { overflow: hidden; }
.reader .ref-line .tfc-ref-unit a { display: inline; }
.tfc-update-notice { position: relative; display: block; margin: 12px auto; max-width: calc(100vw - 24px); padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); color: var(--fg); font: inherit; }

/* Keep reader tools on the same horizontal rail as Home without widening content. */
.reader .topbar .read-tools { margin-right: -4px; }
@media (min-width: 720px) { .reader .topbar .read-tools { margin-right: calc((100vw - 720px) / 2 - 4px); } }
@media (min-width: 840px) { .reader .topbar .read-tools { margin-right: 56px; } }

/* Real navigation retains the existing control appearance. */
a.tfc-route { text-decoration:none; cursor:pointer; box-sizing:border-box; }
a.tfc-route:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.home-web .path-block > h3 a {color:inherit;text-decoration:none;}