/* DEVOTIONS page (devotions/devotions.js). Uses the site's color tokens from index.html. */
:root { --dv: #7B4B61; --dv-2: #B7794F; --dv-soft: rgba(123, 75, 97, 0.12); }
body.site-dark { --dv: #D7A2B8; --dv-2: #E0B27F; --dv-soft: rgba(215, 162, 184, 0.14); }

/* Home tile and nav */
.devotions-banner { background: linear-gradient(135deg, #5E3A4C 0%, #8C5A5A 55%, #B7794F 100%); color: #FFF7EE; box-shadow: 0 10px 28px rgba(70, 40, 50, 0.28); }
.devotions-banner::before { background: radial-gradient(circle, rgba(255, 214, 150, 0.35) 0%, rgba(255, 214, 150, 0) 70%); }
.devotions-banner .wit-banner-eyebrow { color: #FFD9A8; opacity: 1; }
@media (hover: hover) { .devotions-banner:hover { box-shadow: 0 14px 32px rgba(70, 40, 50, 0.36); } }
.dv-tile-marks { display: inline-flex; gap: 5px; }
.dv-tile-marks i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; font-family: var(--sans); background: rgba(255, 247, 238, 0.2); color: #FFF7EE; }

/* Page */
#devotions .wit-title { margin-bottom: 8px; }
.dv-biblefirst { max-width: 520px; margin: 0 auto 16px; padding: 12px 16px; border-left: 3px solid var(--dv); border-radius: 0 12px 12px 0; background: var(--dv-soft); font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.5; color: var(--ink); }
.dv-card { position: relative; margin: 0 0 14px; padding: 16px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); box-shadow: 0 10px 24px -20px rgba(34, 30, 25, 0.45); }
.dv-kicker { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dv); }
.dv-h { margin: 4px 0 8px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 23px; line-height: 1.2; color: var(--ink); }
.dv-h3 { margin: 18px 0 8px; font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dv-p { margin: 0 0 10px; font-family: var(--sans); font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.dv-note { margin: 10px 0 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dv-note a, .dv-p a { color: var(--dv); }
.dv-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 4px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; color: var(--ink); }
.dv-sec span { font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.dv-sub { margin: 0 2px 12px; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.dv-tabs .bb-tab.is-on { border-color: var(--dv); background: var(--dv); color: #FFF7EE; }
body.site-dark .dv-tabs .bb-tab.is-on { color: #221E19; }
.dv-panelbody { animation: finder-in 0.25s ease; }

/* Who's worshiping? */
.dv-aud { margin: 0 0 12px; }
.dv-aud-h { margin: 0 2px 6px; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dv-aud-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dv-aud-opt { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 11px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.2s, background 0.2s; }
.dv-aud-opt b { font-family: var(--sans); font-size: 14px; }
.dv-aud-opt small { font-family: var(--sans); font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.dv-aud-opt.is-on { border-color: var(--dv); background: var(--dv-soft); }
.dv-aud-opt.is-on b { color: var(--dv); }
@media (max-width: 420px) { .dv-aud-opt small { display: none; } .dv-aud-opt { align-items: center; text-align: center; } }
.dv-who { display: flex; gap: 6px; margin-top: 8px; }
.dv-who .finder-opt { padding: 6px 14px; font-size: 13px; }
.dv-who .finder-opt.is-on, .dv-agebar .finder-opt.is-on { background: var(--dv); border-color: var(--dv); color: #FFF7EE; }

/* Worship together bar */
.dv-roombar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--dv) 45%, var(--rule)); border-radius: 16px; background: var(--bg-raised); }
.dv-roombar.is-live { border-style: solid; border-color: var(--dv); background: var(--dv-soft); }
.dv-roombar-t { flex: 1; min-width: 0; font-family: var(--sans); }
.dv-roombar-t b { display: block; font-size: 14px; color: var(--ink); }
.dv-roombar-t span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.dv-roombar-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.dv-code { letter-spacing: 0.12em; color: var(--dv); }
#devotions .fd-btn.gold, .dv-sheet .fd-btn.gold, .dv-panel .fd-btn.gold { background: var(--dv); color: #FFF7EE; }
#devotions .fd-btn.soft, .dv-panel .fd-btn.soft { background: var(--dv-soft); color: var(--dv); }
body.site-dark #devotions .fd-btn.gold, body.site-dark .dv-panel .fd-btn.gold { color: #221E19; }

/* Daily Bible */
.dv-daily-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dv-daily-date { text-align: center; font-family: var(--sans); }
.dv-daily-date span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dv); }
.dv-daily-date b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; color: var(--ink); }
.dv-daynav { width: 38px; height: 38px; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.dv-daily-body { display: flex; align-items: center; gap: 14px; }
.dv-daily-ring, .dv-people-ring { position: relative; flex: none; }
.dv-daily-ring span, .dv-people-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--sans); font-size: 14px; font-weight: 800; color: var(--ink); }
.dv-people-ring span { font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.1; }
.dv-people-ring span b { display: block; font-size: 20px; color: var(--ink); }
.dv-ring circle { fill: none; stroke-width: 7; }
.dv-ring .bg { stroke: var(--rule); }
.dv-ring .fg { stroke: var(--dv); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.5s ease; }
.dv-readings { flex: 1; min-width: 0; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dv-reading { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; font-family: var(--sans); }
.dv-reading small { grid-column: 2; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dv-reading b { grid-column: 2; font-size: 14.5px; }
.dv-check { grid-row: 1 / span 2; width: 20px; height: 20px; border: 2px solid var(--rule); border-radius: 50%; }
.dv-reading.is-done .dv-check { border-color: var(--dv); background: var(--dv) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.dv-reading.is-done b { color: var(--muted); }
.dv-daily-acts { display: flex; gap: 8px; margin-top: 12px; }

/* Worship at home */
.dv-parts { display: flex; gap: 4px; margin: 6px 0 10px; }
.dv-parts span { display: flex; flex-direction: column; min-width: 0; padding: 8px 8px 7px; border-radius: 10px; background: var(--dv-soft); font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.dv-parts span b { font-size: 13px; color: var(--dv); }
.dv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-chip { padding: 7px 12px; border: 1.5px solid var(--dv); border-radius: 999px; background: var(--bg-raised); color: var(--dv); font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; }
.dv-chip.soft { border-color: var(--rule); color: var(--ink); font-weight: 600; }
@media (hover: hover) { .dv-chip:hover { background: var(--dv-soft); } }
.dv-grid { display: grid; gap: 8px; }
@media (min-width: 600px) { .dv-grid { grid-template-columns: 1fr 1fr; } }
.dv-tile { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; }
.dv-tile-n { grid-row: 1 / span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--dv-soft); color: var(--dv); font-family: var(--sans); font-weight: 800; font-size: 13px; }
.dv-tile.is-done .dv-tile-n { background: var(--dv); color: #FFF7EE; }
.dv-tile b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.25; }
.dv-tile small { font-family: var(--sans); font-size: 12.5px; line-height: 1.4; color: var(--muted); }
@media (hover: hover) { .dv-tile:hover { border-color: var(--dv); } }
.dv-guide summary { display: flex; flex-direction: column; cursor: pointer; list-style: none; font-family: var(--sans); }
.dv-guide summary::-webkit-details-marker { display: none; }
.dv-guide summary b { font-size: 15px; color: var(--ink); }
.dv-guide summary small { font-size: 12.5px; color: var(--muted); }
.dv-recs a { display: flex; flex-direction: column; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--ink); text-decoration: none; font-family: var(--sans); }
.dv-recs a b { font-size: 14px; color: var(--dv); }
.dv-recs a small { font-size: 12.5px; color: var(--muted); }

/* Bible questions */
.dv-intro-vid { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px; padding: 8px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; font-family: var(--sans); }
.dv-intro-vid img { width: 110px; border-radius: 10px; }
.dv-intro-vid b { display: block; font-size: 15px; color: var(--dv); }
.dv-intro-vid small { font-size: 12.5px; color: var(--muted); }
.dv-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 700px) { .dv-vgrid { grid-template-columns: 1fr 1fr 1fr; } }
.dv-vid { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; }
.dv-vid-img { position: relative; display: block; aspect-ratio: 16 / 9; background: #222; }
.dv-vid-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-vid-play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); }
.dv-vid-play::after { content: ''; position: absolute; left: 16px; top: 12px; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.dv-vid-min { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.65); color: #fff; font-family: var(--sans); font-size: 11px; font-weight: 700; }
.dv-vid-t { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 11px; font-family: var(--sans); }
.dv-vid-t small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dv-vid-t b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 17px; line-height: 1.2; }
.dv-vid-t em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--dv-2); }
.dv-vid-t em.ok { color: var(--dv); }

/* People of the Bible */
.dv-people-intro { display: flex; gap: 14px; align-items: center; }
.dv-path { position: relative; margin: 6px 0 0; padding-left: 4px; }
.dv-path::before { content: ''; position: absolute; left: 21px; top: 20px; bottom: 20px; width: 3px; border-radius: 2px; background: linear-gradient(#8C6A3F, #A6773A, #5F8570, #6E6F72, #46596B, #7F63A8, #C39A4B, #9A6340); opacity: 0.45; }
.dv-stop { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 10px; margin-bottom: 10px; }
.dv-stop-dot { position: relative; z-index: 1; width: 36px; height: 36px; margin-top: 12px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 3px solid var(--era); color: var(--era); font-family: var(--sans); font-weight: 800; font-size: 14px; }
.dv-stop.is-done .dv-stop-dot { background: var(--era); color: #fff; }
.dv-stop-card { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--rule); border-left: 4px solid var(--era); border-radius: 16px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; font-family: var(--sans); }
.dv-stop-card small { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--era); }
.dv-stop-card > b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; }
.dv-stop-faces { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dv-stop-names { font-size: 12px; line-height: 1.4; color: var(--muted); }
@media (hover: hover) { .dv-stop-card:hover { box-shadow: 0 10px 22px -16px rgba(34, 30, 25, 0.5); } }
.dv-face { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--era, var(--dv)) 16%, transparent); color: var(--era, var(--dv)); font-family: var(--sans); font-size: 11px; font-weight: 800; }
.dv-face.is-met { background: var(--era, var(--dv)); color: #fff; }
.dv-face.big { flex: none; width: 64px; height: 64px; font-size: 22px; background: var(--era); color: #fff; }
.dv-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dv-book { display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-decoration: none; font-family: var(--sans); }
.dv-book img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: 8px; border-radius: 6px; background: #fff; }
.dv-book b { font-size: 13.5px; line-height: 1.3; }
.dv-book small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.dv-book em { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
@media (hover: hover) { .dv-book:hover { border-color: var(--dv); } }

/* Kids & youth */
.dv-agebar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.dv-talks { display: grid; gap: 8px; }
.dv-talk { padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); }
.dv-talk.is-featured { border-color: var(--dv); background: var(--dv-soft); }
.dv-talk-t { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-family: var(--sans); }
.dv-talk-t b { font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.dv-talk-t small { font-size: 12.5px; color: var(--muted); }
.dv-talk audio, .dv-step audio { width: 100%; height: 40px; }
.dv-badge { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--dv); color: #FFF7EE; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

/* The session sheet */
.dv-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 16, 12, 0.5); opacity: 0; transition: opacity 0.25s ease; }
.dv-sheet.open { opacity: 1; }
.dv-sheet[hidden] { display: none; }
.dv-sheet-box { --fm-dot: rgba(46, 43, 39, 0.08); position: relative; display: flex; flex-direction: column; width: min(760px, 100%); height: min(860px, 100%); border-radius: 22px; overflow: hidden; border: 1px solid var(--rule); background: radial-gradient(circle, var(--fm-dot) 1px, transparent 1.6px) 0 0 / 22px 22px, var(--bg); box-shadow: 0 40px 80px -30px rgba(20, 16, 12, 0.55); transform: translateY(20px); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
body.site-dark .dv-sheet-box { --fm-dot: rgba(239, 233, 220, 0.06); }
.dv-sheet.open .dv-sheet-box { transform: none; }
@media (max-width: 560px) { .dv-sheet { padding: 0; } .dv-sheet-box { border-radius: 0; height: 100%; border: none; } }
.dv-sheet-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 6px; }
.dv-amen { display: contents; } .dv-amen .vote-btn { margin-top: 5px; } /* (the sheet's Amen, in the header's row beside Share) */
.dv-sheet-titles { flex: 1; min-width: 0; }
/* (on a phone the buttons leave the title too little room, a word to a line: it goes under them, the whole width) */
@media (max-width: 560px) {
  .dv-sheet-head { flex-wrap: wrap; row-gap: 8px; }
  .dv-sheet-head::before { content: ''; flex: 1; }
  .dv-sheet-titles { order: 1; flex-basis: 100%; }
  /* (with a group's chip there too: Prepare as its icon, so the buttons stay on one line) */
  .dv-sheet-head:has(.dv-room-chip:not([hidden])) { column-gap: 7px; }
  .dv-sheet-head:has(.dv-room-chip:not([hidden])) [data-dv-prep] { width: 34px; padding: 0; justify-content: center; }
  .dv-sheet-head:has(.dv-room-chip:not([hidden])) [data-dv-prep] span { display: none; }
}
.dv-sheet-title { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.15; color: var(--ink); }
.dv-x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.dv-room-chip button, .dv-room-chip span { display: inline-block; padding: 6px 10px; border: none; border-radius: 999px; background: var(--dv); color: #FFF7EE; font-family: var(--sans); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
body.site-dark .dv-room-chip button, body.site-dark .dv-room-chip span { color: #221E19; }
.dv-dots { display: flex; gap: 4px; padding: 4px 18px 8px; }
.dv-dot { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); transition: background 0.3s; }
.dv-dot.is-done { background: color-mix(in srgb, var(--dv) 45%, var(--rule)); }
.dv-dot.is-on { background: var(--dv); }
.dv-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 18px 18px; }
.dv-step { max-width: 620px; margin: 0 auto; animation: finder-in 0.3s ease; }
.dv-foot { display: flex; align-items: center; gap: 10px; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--bg-raised); }
.dv-count { flex: 1; text-align: center; font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--muted); }
.dv-nav { min-width: 96px; padding: 11px 16px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; }
.dv-nav:disabled { opacity: 0.35; cursor: default; }
.dv-next { border-color: var(--dv); background: var(--dv); color: #FFF7EE; }
body.site-dark .dv-next { color: #221E19; }
.dv-sheet.is-follower .dv-nav { min-width: 44px; padding: 10px 14px; border-color: var(--rule); background: var(--bg-raised); color: var(--muted); font-size: 18px; line-height: 1; } /* (following: look back or ahead on your own, as House Church's "Look back" and "Look ahead") */
.dv-count b, .dv-count small { display: block; }
.dv-count small { font-weight: 600; }
.dv-foot .dv-count small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-ref { margin-bottom: 8px; }
.dv-ref-k { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dv); }
.dv-lsb { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: #fff; }
body.site-dark .dv-lsb { background: #1b1b1b; }
.dv-lsb iframe { display: block; width: 100%; height: 360px; border: 0; }
.dv-lsb.is-big iframe { height: min(62vh, 620px); }
.dv-lsb-foot { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }
.dv-lsb-foot a { color: var(--dv); }
.dv-points { margin: 0; padding-left: 20px; }
.dv-points li { margin: 0 0 12px; font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--ink); }
.dv-points.small li { font-size: 13.5px; margin-bottom: 6px; }
.dv-qs { margin: 0; padding-left: 22px; }
.dv-qs li { margin: 0 0 14px; padding-left: 4px; font-family: var(--serif); font-size: 20px; line-height: 1.4; color: var(--ink); }
.dv-focus { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--dv-soft); font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--ink); }
.dv-prayer { margin: 0; padding: 0; list-style: none; counter-reset: pr; }
.dv-prayer li { counter-increment: pr; position: relative; margin: 0 0 10px; padding: 10px 12px 10px 44px; border-radius: 12px; background: var(--bg-raised); border: 1px solid var(--rule); font-family: var(--sans); }
.dv-prayer li::before { content: counter(pr); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--dv); color: #FFF7EE; font-size: 12px; font-weight: 800; }
.dv-prayer b { display: block; font-size: 14.5px; color: var(--ink); }
.dv-prayer span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.dv-plan { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.dv-plan li { display: grid; grid-template-columns: 1fr auto; padding: 10px 12px; border-radius: 12px; background: var(--bg-raised); border: 1px solid var(--rule); font-family: var(--sans); }
.dv-plan b { font-size: 15px; color: var(--ink); }
.dv-plan span { font-weight: 800; color: var(--dv); }
.dv-plan small { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.dv-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.dv-video iframe, .dv-video > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dv-flips { display: grid; gap: 8px; }
@media (min-width: 600px) { .dv-flips { grid-template-columns: 1fr 1fr; } }
.dv-flip { position: relative; min-height: 96px; padding: 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; font-family: var(--sans); }
.dv-flip-q { font-family: var(--serif); font-style: italic; font-size: 17px; }
.dv-flip-a { display: none; font-size: 14px; line-height: 1.5; }
.dv-flip.is-flipped { border-color: var(--dv); background: var(--dv-soft); animation: finder-in 0.25s ease; }
.dv-flip.is-flipped .dv-flip-q { display: none; }
.dv-flip.is-flipped .dv-flip-a { display: block; }
.dv-era-hero { padding: 22px 18px; border-radius: 18px; background: linear-gradient(135deg, var(--era), color-mix(in srgb, var(--era) 60%, #000)); color: #fff; }
.dv-era-hero span { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.dv-era-hero h2 { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; }
/* the era's scene from the Bible Scroll (story/art.js), moving, with its story under it */
.dv-era-scene { position: relative; overflow: hidden; border-radius: 18px; box-shadow: 0 16px 30px -22px rgba(0, 0, 0, 0.7); }
.dv-era-art { border-radius: 18px; }
.dv-era-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(180deg, transparent, rgba(12, 10, 8, 0.72)); color: #fff; }
.dv-era-cap span { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.dv-era-cap h2 { margin: 2px 0 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.1; }
.dv-scroll { margin: 12px 0 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--era) 30%, var(--rule)); background: color-mix(in srgb, var(--era) 7%, var(--bg-raised)); }
.dv-scroll-k { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--era); }
body.site-dark .dv-scroll-k { color: color-mix(in srgb, var(--era) 60%, #fff); }
.dv-scroll h3 { margin: 4px 0 6px; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--ink); }
.dv-scroll h3 small { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.dv-scroll p { margin: 0 0 10px; font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink); }
.dv-scroll-go { padding: 0; border: none; background: none; color: var(--era); font: 800 13.5px var(--sans); cursor: pointer; }
body.site-dark .dv-scroll-go { color: color-mix(in srgb, var(--era) 60%, #fff); }
.dv-stop-scene { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--era); }
.dv-stop-scene i { width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
html.sb-open .dv-back-pill { display: none; }
.dv-thread { margin: 14px 0; padding: 12px 14px; border-left: 3px solid var(--era, var(--dv)); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--era, var(--dv)) 10%, transparent); font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink); }
.dv-faces { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-person { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.dv-person .dv-h { margin: 0; font-size: 30px; }
.dv-person.is-center .dv-face.big { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--era); }
.dv-who { margin: 2px 0 0; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.dv-story { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--ink); }
.dv-readit { margin-top: 10px; }
.dv-treechip { margin-top: 12px; }
.dv-readit summary { cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--dv); margin-bottom: 8px; }
.dv-quiz { display: grid; gap: 12px; }
.dv-qz { padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); }
.dv-qz p { margin: 0 0 8px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.4; color: var(--ink); }
.dv-qz-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-qz .finder-opt.is-right { background: #3E7A4C; border-color: #3E7A4C; color: #fff; }
.dv-qz .finder-opt.is-wrong { background: #C06A38; border-color: #C06A38; color: #fff; }

/* Invite / join panel */
.dv-panel-scrim { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 16, 12, 0.5); }
.dv-panel-scrim[hidden] { display: none; }
.dv-panel { position: relative; width: min(420px, 100%); max-height: 100%; overflow-y: auto; padding: 22px 20px 20px; border-radius: 22px; background: var(--bg-raised); border: 1px solid var(--rule); box-shadow: 0 30px 60px -24px rgba(20, 16, 12, 0.6); text-align: center; animation: finder-in 0.25s ease; }
.dv-panel .dv-x { position: absolute; right: 14px; top: 14px; }
.dv-bigcode { margin: 6px 0 12px; font-family: var(--sans); font-size: 44px; font-weight: 800; letter-spacing: 0.18em; color: var(--dv); }
.dv-qr { display: flex; justify-content: center; margin: 0 auto 12px; padding: 10px; width: max-content; border-radius: 14px; background: #FFFDF7; }
.dv-tv-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dv-howtv { margin-top: 12px; text-align: left; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink); }
.dv-howtv summary { cursor: pointer; font-weight: 700; color: var(--dv); text-align: center; }
.dv-howtv ul { padding-left: 18px; }
.dv-howtv li { margin-bottom: 6px; }
.dv-joinform { display: flex; gap: 8px; justify-content: center; }
.dv-joinform input { width: 150px; padding: 10px 12px; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 22px; font-weight: 800; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; }

/* "Back to your devotion" */
.dv-back-pill { position: fixed; z-index: 95; left: 50%; bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom) + 14px); transform: translateX(-50%); padding: 11px 18px; border: none; border-radius: 999px; background: var(--dv); color: #FFF7EE; font-family: var(--sans); font-size: 14px; font-weight: 800; box-shadow: 0 12px 28px -10px rgba(40, 20, 30, 0.6); cursor: pointer; animation: finder-in 0.3s ease; }
body.site-dark .dv-back-pill { color: #221E19; }
.dv-back-pill[hidden] { display: none; }
.dv-toast { position: fixed; z-index: 90; left: 50%; bottom: calc(var(--bnav-h) + 70px); transform: translate(-50%, 20px); max-width: min(420px, 90vw); padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font-family: var(--sans); font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.dv-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* The TV: big type, nothing to tap */
html.dv-tv .dv-sheet { padding: 0; }
html.dv-tv .dv-sheet-box { width: 100%; height: 100%; border-radius: 0; border: none; }
html.dv-tv .dv-sheet-title { font-size: 44px; }
html.dv-tv .dv-kicker { font-size: 16px; }
html.dv-tv .dv-step { max-width: 1100px; }
html.dv-tv .dv-h { font-size: 46px; }
html.dv-tv .dv-points li, html.dv-tv .dv-p { font-size: 28px; }
html.dv-tv .dv-qs li { font-size: 38px; }
html.dv-tv .dv-story { font-size: 32px; }
html.dv-tv .dv-who, html.dv-tv .dv-note, html.dv-tv .dv-readit summary { font-size: 22px; }
html.dv-tv .dv-person .dv-h { font-size: 52px; } html.dv-tv .dv-face.big { width: 96px; height: 96px; font-size: 32px; }
html.dv-tv .dv-thread, html.dv-tv .dv-focus { font-size: 26px; }
html.dv-tv .dv-prayer b { font-size: 26px; } html.dv-tv .dv-prayer span { font-size: 22px; }
html.dv-tv .dv-lsb.is-big iframe { height: 70vh; }
html.dv-tv .dv-foot { display: none; }
html.dv-tv .dv-x { display: none; }
@media (prefers-reduced-motion: reduce) { .dv-step, .dv-panelbody, .dv-back-pill { animation: none; } }

/* ================================================================
   Who's holding a joined device: their colors, and kid mode
   ================================================================ */
html.dv-m { --dv: #35597E; --dv-2: #5E8FB8; --dv-soft: rgba(53, 89, 126, 0.12); }
html.dv-f { --dv: #A0406A; --dv-2: #D98AA8; --dv-soft: rgba(160, 64, 106, 0.12); }
html.dv-kid { --dv: #E0892F; --dv-2: #F2B84B; --dv-soft: rgba(224, 137, 47, 0.15); }
html.dv-kid.dv-m { --dv: #2C7BD6; --dv-2: #3DBE8B; --dv-soft: rgba(44, 123, 214, 0.14); }
html.dv-kid.dv-f { --dv: #D6457F; --dv-2: #9B5BD6; --dv-soft: rgba(214, 69, 127, 0.14); }
html.dv-m body.site-dark { --dv: #8FB4DA; --dv-2: #A9C6E2; --dv-soft: rgba(143, 180, 218, 0.15); }
html.dv-f body.site-dark { --dv: #E59BBB; --dv-2: #F0BCD0; --dv-soft: rgba(229, 155, 187, 0.15); }
html.dv-kid body.site-dark { --dv: #F2A65A; --dv-2: #F5C977; --dv-soft: rgba(242, 166, 90, 0.16); }
html.dv-kid.dv-m body.site-dark { --dv: #6FB0F5; --dv-2: #6FD9AE; --dv-soft: rgba(111, 176, 245, 0.16); }
html.dv-kid.dv-f body.site-dark { --dv: #F58CB5; --dv-2: #C79BF2; --dv-soft: rgba(245, 140, 181, 0.16); }

/* Kid mode: bright, round, big, and bouncy */
html.dv-kid .dv-sheet-box { background: radial-gradient(circle, color-mix(in srgb, var(--dv) 22%, transparent) 2px, transparent 2.8px) 0 0 / 30px 30px, linear-gradient(180deg, color-mix(in srgb, var(--dv) 10%, var(--bg)), var(--bg) 60%, color-mix(in srgb, var(--dv-2) 12%, var(--bg))); }
@media (min-width: 561px) { html.dv-kid .dv-sheet-box { border-radius: 30px; border: 3px solid var(--dv); } }
html.dv-kid .dv-sheet-title { font-family: var(--sans); font-style: normal; font-weight: 800; color: var(--dv); }
html.dv-kid .dv-h { font-family: var(--sans); font-style: normal; font-weight: 800; font-size: 27px; color: var(--dv); }
html.dv-kid .dv-p, html.dv-kid .dv-thread { font-size: 17px; }
html.dv-kid .dv-story { font-family: var(--sans); font-size: 19px; line-height: 1.6; }
html.dv-kid .dv-step { animation: dv-pop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes dv-pop { from { opacity: 0; transform: scale(0.94) translateY(10px); } }
html.dv-kid .dv-dots { gap: 6px; }
html.dv-kid .dv-dot { height: 10px; border-radius: 5px; }
html.dv-kid .dv-dot.is-on { background: linear-gradient(90deg, var(--dv), var(--dv-2)); }
html.dv-kid .dv-nav { padding: 13px 20px; font-size: 16px; font-weight: 800; border-width: 2.5px; }
html.dv-kid .dv-next { background: linear-gradient(135deg, var(--dv), var(--dv-2)); border-color: transparent; }
html.dv-kid .dv-era-hero { border-radius: 26px; }
html.dv-kid .dv-era-hero h2, html.dv-kid .dv-kid-name { font-family: var(--sans); font-style: normal; font-weight: 800; }
html.dv-kid .dv-chip { border-width: 2.5px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { html.dv-kid .dv-step { animation: none; } }

/* Handing a part to someone */
.dv-sheet.has-turn .dv-foot { box-shadow: inset 0 3px 0 var(--dv); }
.dv-sheet.has-turn .dv-count::before { content: 'Your turn · '; color: var(--dv); }
.dv-turn { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--dv-soft); color: var(--dv); font-family: var(--sans); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dv-turn.is-mine { background: var(--dv); color: #fff; animation: dv-glow 1.6s ease-in-out infinite; }
@keyframes dv-glow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--dv) 25%, transparent); } }
.dv-chip-turn { color: inherit; }
.dv-handoff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.dv-handoff small { margin-right: 2px; font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--muted); }
.dv-hand, .dv-prow { --pc: #8A8580; }
.dv-hand.sex-m, .dv-prow.sex-m { --pc: #35597E; } .dv-hand.sex-f, .dv-prow.sex-f { --pc: #A0406A; }
.dv-hand.is-kid.sex-m, .dv-prow.is-kid.sex-m { --pc: #2C7BD6; } .dv-hand.is-kid.sex-f, .dv-prow.is-kid.sex-f { --pc: #D6457F; }
.dv-hand { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 12.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dv-handoff .dv-hand::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }
.dv-hand.is-on { background: var(--dv); border-color: var(--dv); color: #fff; }
.dv-hand.is-back { border-style: dashed; color: var(--muted); }
.dv-hand.is-back::before { display: none; }
.dv-people { display: grid; gap: 8px; margin-bottom: 4px; }
.dv-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--rule); border-left: 4px solid var(--pc); border-radius: 14px; background: var(--bg); }
.dv-pdot { width: 12px; height: 12px; border-radius: 50%; background: var(--pc); }
.dv-prow.is-kid .dv-pdot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 25%, transparent); }
.dv-pname { flex: 1; min-width: 90px; display: flex; flex-direction: column; font-family: var(--sans); }
.dv-pname b { font-size: 15px; color: var(--ink); }
.dv-pname small { font-size: 12px; color: var(--pc); font-weight: 700; }
.dv-pbtns { display: flex; flex-wrap: wrap; gap: 5px; }
.dv-me-link { padding: 0; border: none; background: none; color: var(--dv); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Who's joining? */
.dv-whogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.dv-whogrid > small { text-align: center; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dv-whocard { --pc: #35597E; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 12px; border: 2px solid var(--rule); border-radius: 20px; background: var(--bg); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.2s, background 0.2s, transform 0.15s; }
.dv-whocard.who-0f { --pc: #A0406A; } .dv-whocard.who-1m { --pc: #2C7BD6; } .dv-whocard.who-1f { --pc: #D6457F; }
.dv-whocard:active { transform: scale(0.97); }
.dv-whocard-pic { display: block; width: 78px; }
.dv-whocard-pic svg { display: block; width: 100%; height: auto; }
.dv-whocard-pic.is-portrait { width: 72px; margin: 6px 0 6px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 30%, transparent); } /* (a grown-up: the site's portrait, round, as a person's picture is) */
.dv-whocard b { font-family: var(--sans); font-size: 15px; font-weight: 800; }
.dv-whocard.is-on { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, var(--bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 22%, transparent); }
.dv-whocard.is-on b { color: var(--pc); }
.dv-whoname { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink); }
.dv-whoname i { font-style: normal; font-weight: 500; color: var(--muted); }
.dv-whoname input { padding: 11px 14px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; }
.dv-who-go { width: 100%; justify-content: center; padding: 12px 16px; font-size: 15px; }
.dv-who-go:disabled { opacity: 0.45; cursor: default; }

/* Pictures of the people (from the family tree) */
.dv-face.pic { position: relative; overflow: hidden; padding: 0; }
.dv-face.pic img, .dv-face.pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-face.pic .tr-mono { font-size: 12px; }
.dv-face.pic .dv-mono { font-family: var(--sans); font-weight: 800; }
.dv-face.is-met.pic { box-shadow: 0 0 0 2px var(--era, var(--dv)); }
.dv-face-w { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.dv-faces .dv-face.pic { width: 46px; height: 46px; }
.dv-faces.is-kid { gap: 10px; }
.dv-faces.is-kid .dv-face.pic { width: 72px; height: 80px; border-radius: 18px; background: color-mix(in srgb, var(--era) 16%, #FFF8EC); }
.dv-face-w small { font-family: var(--sans); font-size: 12px; font-weight: 800; color: var(--ink); }
.dv-portraits { display: flex; gap: 6px; flex: none; }
.dv-person .dv-face.big.pic { width: 76px; height: 90px; border-radius: 16px; background: color-mix(in srgb, var(--era) 14%, var(--bg)); }
.dv-person.is-center .dv-face.big.pic { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--era); }
.dv-mono { display: grid; place-items: center; width: 100%; height: 100%; font-size: 22px; color: var(--era, var(--dv)); }

/* Kid mode: the person as a cartoon who waves and talks */
.dv-toon-stage { position: relative; display: flex; flex-direction: column; align-items: center; margin: 2px 0 10px; padding: 16px 12px 12px; border-radius: 28px; background: radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--era) 30%, #FFF8EC), color-mix(in srgb, var(--era) 10%, var(--bg-raised)) 75%); overflow: hidden; }
body.site-dark .dv-toon-stage { background: radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--era) 40%, #2E2820), color-mix(in srgb, var(--era) 16%, var(--bg-raised)) 75%); }
.dv-toons { display: flex; justify-content: center; gap: 4px; padding: 0; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dv-toon { display: block; width: min(48vw, 200px); }
.dv-toons:has(.dv-toon + .dv-toon) .dv-toon { width: min(38vw, 160px); }
.dv-toon svg { display: block; width: 100%; height: auto; }
.dv-bubble { position: relative; max-width: min(92%, 380px); max-height: 0; margin-top: 0; padding: 0 16px; border-radius: 20px; background: #FFFDF7; color: #2E2B27; font-family: var(--sans); font-size: 17px; font-weight: 700; line-height: 1.4; text-align: center; overflow: hidden; opacity: 0; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35); transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease; }
.dv-bubble.show { max-height: 200px; margin-top: 10px; padding: 12px 16px; opacity: 1; overflow: visible; }
.dv-bubble.show::before { content: ''; position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; margin-left: -8px; background: inherit; transform: rotate(45deg); border-radius: 3px; }
.dv-toon-hint { margin-top: 6px; font-family: var(--sans); font-size: 13px; font-weight: 800; color: color-mix(in srgb, var(--era) 70%, var(--ink)); }
.dv-bubble.show + .dv-toon-hint { display: none; }
.dv-kid-name { text-align: center; font-size: 34px !important; }
html.dv-kid .dv-step-person > .dv-who { text-align: center; font-size: 16px; }

/* Meet the family */
.dv-fam { margin: 16px 0 6px; padding: 14px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); }
.dv-fam-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dv-fam-head > b { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dv); }
.dv-fam-row { margin: 4px 0; }
.dv-fam-lbl { display: block; margin: 0 2px 4px; font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dv-fam-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; }
.dv-fam-strip::-webkit-scrollbar { display: none; }
.dv-fam-mini { flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--rule); border-left: 4px solid var(--era); border-radius: 14px; background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dv-fam-mini:active { transform: scale(0.97); }
.dv-fam-mini > span:last-child { display: flex; flex-direction: column; }
.dv-fam-mini b { font-family: var(--sans); font-size: 13.5px; white-space: nowrap; }
.dv-fam-mini small { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--era); }
body.site-dark .dv-fam-mini small { color: color-mix(in srgb, var(--era) 55%, #fff); }
.dv-fam-pic { position: relative; display: block; flex: none; width: 40px; height: 46px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--era, var(--dv)) 14%, var(--bg)); }
.dv-fam-pic img, .dv-fam-pic svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.dv-fam-pic .tr-mono { font-size: 16px; }
.dv-fam-focus { display: flex; align-items: center; gap: 12px; margin: 6px 0; padding: 10px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--era) 45%, var(--rule)); background: color-mix(in srgb, var(--era) 9%, var(--bg)); animation: finder-in 0.3s ease; }
.dv-fam-me { flex: none; padding: 0; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dv-fam-me .dv-fam-pic { width: 72px; height: 84px; border-radius: 14px; }
.dv-fam-me-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-family: var(--sans); }
.dv-fam-me-t > b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--ink); }
.dv-fam-me-t small { font-size: 12px; color: var(--muted); }
.dv-fam-me-t .dv-fam-line { font-weight: 700; color: var(--era); }
.dv-fam-wed { margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.dv-fam-chip { margin: 2px 2px 0 0; padding: 3px 9px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font-family: var(--sans); font-size: 12px; font-weight: 700; cursor: pointer; }
.dv-fam-sum { margin: 8px 2px 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.dv-fam-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dv-fam-focus.is-kid .dv-fam-pic { width: 100px; height: 112px; border-radius: 20px; background: color-mix(in srgb, var(--era) 18%, #FFF8EC); }
.dv-fam-focus.is-kid .dv-fam-me-t > b { font-family: var(--sans); font-weight: 800; font-size: 24px; }
html.dv-kid .dv-fam { border-radius: 24px; border: 2px solid color-mix(in srgb, var(--dv) 35%, var(--rule)); }
html.dv-kid .dv-fam-mini { border-radius: 18px; }
html.dv-kid .dv-fam-mini .dv-fam-pic { width: 48px; height: 56px; background: color-mix(in srgb, var(--era) 16%, #FFF8EC); }

/* The quiz, answered together */
.dv-qz { position: relative; }
.dv-qz.got-it { border-color: #3E7A4C; }
.dv-qz .finder-opt.is-wrong { animation: dv-shake 0.4s ease; }
@keyframes dv-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.dv-quiz.is-kid .dv-qz { padding: 14px; border-radius: 22px; border-width: 2px; }
.dv-quiz.is-kid .dv-qz p { font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 17px; }
.dv-quiz.is-kid .dv-qz-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dv-quiz.is-kid .finder-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 10px; border-radius: 18px; border-width: 2px; font-size: 14px; font-weight: 800; }
.dv-qz-toon { display: block; width: min(20vw, 76px); }
.dv-qz-toon svg { display: block; width: 100%; height: auto; }
.dv-stars { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.dv-stars i { position: absolute; width: 18px; height: 18px; background: #F2B84B; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 0; animation: dv-star 1s ease-out forwards; }
.dv-stars i:nth-child(1) { --x: -90px; --y: -50px; } .dv-stars i:nth-child(2) { --x: 80px; --y: -60px; animation-delay: 0.05s; } .dv-stars i:nth-child(3) { --x: -60px; --y: 40px; animation-delay: 0.1s; } .dv-stars i:nth-child(4) { --x: 100px; --y: 30px; animation-delay: 0.12s; } .dv-stars i:nth-child(5) { --x: 0; --y: -80px; animation-delay: 0.08s; }
@keyframes dv-star { 0% { opacity: 1; transform: translate(0, 0) scale(0.4); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.4) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .dv-stars, .dv-turn.is-mine { animation: none; } .dv-stars i { display: none; } }

/* People of the Bible: the family tree */
.dv-treecard { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; border-color: color-mix(in srgb, var(--dv) 35%, var(--rule)); }
.dv-treecard-faces { display: flex; flex: none; }
.dv-treecard-faces > span { position: relative; width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; overflow: hidden; border: 2px solid var(--bg-raised); background: var(--dv-soft); }
.dv-treecard-faces > span:first-child { margin-left: 0; }
.dv-treecard-faces img, .dv-treecard-faces svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-treecard-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); }
.dv-treecard-t b { font-size: 15.5px; color: var(--ink); }
.dv-treecard-t small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.dv-treecard-go { flex: none; font-size: 20px; color: var(--dv); }
.dv-stop-faces .dv-face.pic { background: color-mix(in srgb, var(--era) 14%, var(--bg)); }
.dv-room-chip { min-width: 0; max-width: 58%; }
.dv-room-chip span.is-turn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(135deg, var(--dv), var(--dv-2)); animation: dv-glow 1.6s ease-in-out infinite; }
.dv-people { text-align: left; }
@media (max-width: 420px) { html.dv-kid .dv-sheet-title { font-size: 21px; } }

/* =====================================================================================
   The page, redesigned: a colored header for who's worshiping, five tabs, and each tab's
   parts in their own clearly marked section cards.
   Colors follow who's worshiping (like the family tree's men and women): blue for a man,
   rose for a woman, a bright fun orange for a child, a blend of blue and rose for a husband
   and wife, and blue, rose, and orange together for a family.
   ===================================================================================== */
:root { --dv-grad: linear-gradient(135deg, #5E3A4C 0%, #8C5A5A 55%, #B7794F 100%); --dv-on: #FFFFFF; }
html.dv-m { --dv-grad: linear-gradient(135deg, #274A70 0%, #3F6E9E 60%, #5E8FB8 100%); }
html.dv-f { --dv-grad: linear-gradient(135deg, #86305A 0%, #A8487A 60%, #D07CA0 100%); }
html.dv-kid { --dv-grad: linear-gradient(135deg, #DD5E12 0%, #EC8418 55%, #F2A42A 100%); }
html.dv-kid.dv-m { --dv-grad: linear-gradient(135deg, #2C7BD6 0%, #3DBE8B 100%); }
html.dv-kid.dv-f { --dv-grad: linear-gradient(135deg, #D6457F 0%, #9B5BD6 100%); }
html.dv-couple { --dv: #6A4C74; --dv-2: #A0406A; --dv-soft: rgba(106, 76, 116, 0.12); --dv-grad: linear-gradient(120deg, #35597E 0%, #6A4C74 50%, #A0406A 100%); }
html.dv-family { --dv: #A24E62; --dv-2: #E0892F; --dv-soft: rgba(162, 78, 98, 0.12); --dv-grad: linear-gradient(120deg, #35597E 0%, #A0406A 55%, #E0892F 100%); }
html.dv-couple body.site-dark { --dv: #C7A6DA; --dv-2: #E59BBB; --dv-soft: rgba(199, 166, 218, 0.15); }
html.dv-family body.site-dark { --dv: #F0A48C; --dv-2: #F2B26A; --dv-soft: rgba(240, 164, 140, 0.15); }
body.site-dark { --dv-on: #1F1B17; }

.dv-page { max-width: 760px; margin: 0 auto; }
.dv-biblefirst { max-width: 560px; margin: 0 auto 18px; padding: 0 8px; border: none; border-radius: 0; background: none; font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-align: center; }

/* who's worshiping */
.dv-hero { position: relative; overflow: hidden; margin: 0 0 14px; padding: 16px; border-radius: 24px; background: var(--dv-grad); color: #fff; box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--dv) 90%, #000); isolation: isolate; }
.dv-hero::before { content: ''; position: absolute; right: -60px; top: -80px; z-index: -1; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%); }
html.dv-kid .dv-hero { background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 2px, transparent 2.8px) 0 0 / 22px 22px, var(--dv-grad); }
.dv-hero-top { display: flex; align-items: center; gap: 12px; font-family: var(--sans); }
.dv-hero-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.dv-hero-ic svg { width: 26px; height: 26px; }
.dv-hero-top small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.dv-hero-top b { display: block; margin-top: 1px; font-size: 18px; line-height: 1.25; }
.dv-whoseg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
.dv-whoopt { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0; padding: 9px 3px 8px; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 15px; background: rgba(255, 255, 255, 0.1); color: #fff; font-family: var(--sans); font-size: 11.5px; font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s, transform 0.12s; }
.dv-whoopt svg { width: 22px; height: 22px; }
.dv-whoopt:active { transform: scale(0.96); }
@media (hover: hover) { .dv-whoopt:hover { background: rgba(255, 255, 255, 0.2); } }
.dv-whoopt.is-on { border-color: #fff; background: #fff; color: var(--dv); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.5); }
body.site-dark .dv-whoopt.is-on { color: #2A241C; }
@media (min-width: 560px) { .dv-whoopt { flex-direction: row; justify-content: center; gap: 7px; padding: 10px 6px; font-size: 13px; } }

/* Worship together, inside the header */
.dv-hero .dv-roombar { margin: 14px 0 0; padding: 12px 0 0; border: none; border-top: 1px solid rgba(255, 255, 255, 0.28); border-radius: 0; background: none; }
.dv-hero .dv-roombar.is-live { margin-top: 14px; padding: 10px 12px; border: none; border-radius: 16px; background: rgba(255, 255, 255, 0.16); }
.dv-hero .dv-roombar-t b { color: #fff; }
.dv-hero .dv-roombar-t span { color: rgba(255, 255, 255, 0.88); }
.dv-hero .dv-code { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); }
.dv-hero .dv-me-link { color: #fff; }
#devotions .dv-hero .fd-btn.gold { background: #fff; color: var(--dv); }
#devotions .dv-hero .fd-btn.soft { background: rgba(255, 255, 255, 0.2); color: #fff; }
body.site-dark #devotions .dv-hero .fd-btn.gold { color: #2A241C; }

/* the five tabs */
.dv-tabbar { position: sticky; top: 8px; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin: 0 0 16px; padding: 4px; border: 1px solid var(--rule); border-radius: 20px; background: color-mix(in srgb, var(--bg-raised) 90%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 10px 24px -18px rgba(34, 30, 25, 0.5); }
/* in the Devotions window, it sticks right under the header (the scrolling area's own top padding
   is 16px, 12px on phones) */
.dv-app-body .dv-tabbar { top: -16px; }
@media (max-width: 560px) { .dv-app-body .dv-tabbar { top: -12px; } }
.dv-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 8px 1px 7px; border: none; border-radius: 15px; background: none; color: var(--muted); font-family: var(--sans); font-size: 11px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.15s, background 0.15s; }
.dv-tab svg { width: 22px; height: 22px; }
.dv-tab-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
@media (max-width: 400px) { .dv-tab { font-size: 10.5px; } }
.dv-hero { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
@media (hover: hover) { .dv-tab:not(.is-on):hover { color: var(--dv); background: var(--dv-soft); } }
.dv-tab.is-on { background: var(--dv-grad); color: #fff; box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--dv) 80%, #000); }
@media (min-width: 560px) { .dv-tab { flex-direction: row; justify-content: center; gap: 7px; padding: 10px 6px; font-size: 13.5px; } .dv-tab svg { width: 20px; height: 20px; } }

/* sections */
.dv-s { margin: 0 0 16px; border: 1px solid var(--rule); border-radius: 22px; background: var(--bg-raised); box-shadow: 0 16px 32px -28px rgba(34, 30, 25, 0.6); overflow: hidden; animation: finder-in 0.25s ease; }
.dv-s-h { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--rule); background: linear-gradient(180deg, var(--dv-soft), transparent 90%); list-style: none; }
.dv-s-h::-webkit-details-marker { display: none; }
.dv-s-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--dv-grad); color: #fff; box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--dv) 80%, #000); }
.dv-s-ic svg { width: 23px; height: 23px; }
.dv-s-t { flex: 1; min-width: 0; font-family: var(--sans); }
.dv-s-title { display: block; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.dv-s-sub { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.dv-s-aside { flex: none; align-self: center; }
.dv-s-b { padding: 16px; }
.dv-s-f { padding: 12px 16px 14px; border-top: 1px dashed var(--rule); font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.dv-s-f a, .dv-s-sub a { color: var(--dv); }
.dv-s-f b { color: var(--ink); }
details.dv-s > summary { cursor: pointer; -webkit-tap-highlight-color: transparent; }
details.dv-s:not([open]) > summary { border-bottom: none; }
.dv-s-chev { flex: none; align-self: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dv-soft); position: relative; transition: transform 0.2s; }
.dv-s-chev::after { content: ''; position: absolute; left: 10px; top: 8px; width: 8px; height: 8px; border-right: 2.4px solid var(--dv); border-bottom: 2.4px solid var(--dv); transform: rotate(45deg); }
details.dv-s[open] .dv-s-chev { transform: rotate(180deg); }
.dv-ringbadge { position: relative; display: block; width: 54px; height: 54px; }
.dv-ringbadge .dv-ring circle { stroke-width: 6; }
.dv-ringbadge > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--sans); line-height: 1; }
.dv-ringbadge b { font-size: 16px; color: var(--ink); }
.dv-ringbadge small { margin-top: 1px; font-size: 9.5px; font-weight: 700; color: var(--muted); }
.dv-count { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--dv-soft); color: var(--dv); font-family: var(--sans); font-size: 14px; font-weight: 800; }
.dv-group { margin-top: 16px; }
.dv-group-h { margin: 0 0 8px; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dv); }
.dv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#devotions .dv-cta { flex: 1 1 200px; min-height: 48px; border-radius: 999px; font-size: 16px; background: var(--dv-grad); }

/* Daily Bible */
.dv-daily .dv-daily-head { margin: 0 0 12px; padding: 6px; border-radius: 18px; background: var(--dv-soft); }
.dv-daily .dv-daynav { background: var(--bg-raised); }
.dv-daily .dv-reading { grid-template-columns: 22px 1fr auto; padding: 11px 12px; border-radius: 14px; }
.dv-reading-go { grid-column: 3; grid-row: 1 / span 2; font-size: 22px; color: var(--muted); }
.dv-daily .dv-readings { gap: 8px; }

/* Worship */
.dv-tonight .dv-parts { margin: 0; }
.dv-prayer { margin-top: 0; }
.dv-recs .dv-s-b a { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg); }
.dv-recs .dv-s-b a:last-child { margin-bottom: 0; }
.dv-recs .dv-s-b a > span { display: flex; flex-direction: column; gap: 2px; }
.dv-recs .dv-s-b a svg { flex: none; width: 18px; height: 18px; color: var(--dv); }

/* People */
.dv-s .dv-treecard { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--dv) 35%, var(--rule)); border-radius: 16px; background: var(--dv-soft); color: var(--ink); font: inherit; }
.dv-s .dv-path { margin-top: 0; }
.dv-s .dv-stop:last-child { margin-bottom: 0; }

/* Kids & youth */
.dv-s .dv-agebar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; }
.dv-ageopt { padding: 10px 2px; white-space: nowrap; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 12.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dv-ageopt.is-on { border-color: transparent; background: var(--dv-grad); color: #fff; }
.dv-ageguide { margin-top: 14px; padding: 14px 14px 4px; border-radius: 16px; background: var(--dv-soft); }
.dv-ageguide .dv-points li { font-size: 15px; }

/* a child: rounder and bolder */
html.dv-kid .dv-s { border-radius: 26px; border-width: 2px; border-color: color-mix(in srgb, var(--dv) 30%, var(--rule)); }
html.dv-kid .dv-s-title { font-size: 19px; }
html.dv-kid .dv-s-ic { border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .dv-s { animation: none; } }
.dv-s .dv-books { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.dv-s .dv-book { background: var(--bg); }
.dv-s .dv-treecard { flex-wrap: wrap; row-gap: 10px; }
.dv-s .dv-treecard-go { order: 2; margin-left: auto; }
.dv-s .dv-treecard-t { order: 3; flex-basis: 100%; }
@media (min-width: 560px) { .dv-s .dv-treecard { flex-wrap: nowrap; } .dv-s .dv-treecard-t { order: 0; flex-basis: auto; } }
#devotions .dv-cta { justify-content: center; text-align: center; }

/* "Think about it": a thought and a question for the chapter just read (devotions/thoughts.json) */
.dv-think { margin: 14px 0 0; padding: 14px 16px 12px; border: 1px solid color-mix(in srgb, var(--dv) 30%, var(--rule)); border-left: 4px solid var(--dv); border-radius: 16px; background: var(--dv-soft); font-family: var(--sans); }
.dv-think-h { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dv); }
.dv-think-i + .dv-think-i { margin-top: 12px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--dv) 30%, var(--rule)); }
.dv-think-i small { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 800; color: var(--ink); }
.dv-think-i p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.dv-think-i .dv-think-q { margin-top: 6px; font-weight: 700; color: var(--dv); }
.dv-think-f { margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.dv-think-f a { color: var(--dv); }
html.dv-kid .dv-think-i p { font-size: 17px; }
html.dv-tv .dv-think-i p { font-size: 26px; } html.dv-tv .dv-think-h { font-size: 16px; } html.dv-tv .dv-think-f { display: none; }

/* "What is this page?": why we use it, and a short guide to using it */
.dv-about { max-width: 600px; margin: 4px auto 18px; font-family: var(--sans); text-align: left; }
.dv-about-k { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dv); }
.dv-about-why { margin: 0 0 14px; padding: 14px 16px; border-left: 3px solid var(--dv); border-radius: 0 14px 14px 0; background: var(--dv-soft); }
.dv-about-why p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--ink); }
.dv-about-how { padding: 14px 16px 6px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); }
.dv-about-steps { margin: 0; padding: 0; list-style: none; counter-reset: dvstep; }
.dv-about-steps li { position: relative; margin: 0 0 12px; padding-left: 38px; font-size: 14px; line-height: 1.5; color: var(--muted); counter-increment: dvstep; }
.dv-about-steps li::before { content: counter(dvstep); position: absolute; left: 0; top: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--dv-grad, var(--dv)); color: #fff; font-size: 13px; font-weight: 800; }
.dv-about-steps b { display: block; font-size: 15px; color: var(--ink); }

/* ---- Bible questions: the topic-of-the-day wheel, shaped like a game show's big wheel ----
   A drum of slots that turns toward you (3D), dark bands between the slots, chrome rails with
   bulbs on either side, and a red pointer on the right that clacks over each slot. */
.dv-bw { --roll: 0px; position: relative; display: flex; align-items: stretch; width: min(340px, 100%); margin: 10px auto 22px; padding: 12px 10px; border-radius: 22px;
  /* brushed stainless steel */
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0.035) 1px 2px, rgba(255, 255, 255, 0) 2px 4px), linear-gradient(180deg, #F3F4F6 0%, #C9CDD2 18%, #E4E7EA 48%, #B4B9BF 82%, #D9DCE0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 3px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.25), 0 26px 40px -22px rgba(30, 25, 20, 0.6); }
.dv-bw::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -18px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse, rgba(30, 25, 20, 0.28), transparent 70%); pointer-events: none; }
/* the chrome rims at each end of the drum, with rivets that roll as it turns */
.dv-bw-rail { position: relative; flex: none; width: 24px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; margin: 0 5px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #5E646B 0 2px, transparent 2.6px) 0 var(--roll) / 100% 22px repeat-y, linear-gradient(90deg, #4A4F55, #C8CDD2 22%, #FFFFFF 38%, #9EA4AA 58%, #E6E9EC 74%, #5A6066);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 10px 12px -6px rgba(0, 0, 0, 0.55), inset 0 -10px 12px -6px rgba(0, 0, 0, 0.55); }
/* marquee bulbs, warm and glowing */
.dv-bw-rail i { position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #FFFFFF 0 18%, #FFF1C2 35%, #F6C453 70%, #B7862A 100%); box-shadow: 0 0 0 1.5px rgba(60, 50, 30, 0.45), 0 0 8px 2px rgba(255, 214, 110, 0.55); }
.dv-bw.is-spinning .dv-bw-rail i { animation: dv-bulb 0.42s steps(1) infinite; animation-delay: calc(var(--i) * -0.06s); }
.dv-bw.is-landed .dv-bw-rail i { animation: dv-bulb 0.2s steps(1) 6; }
@keyframes dv-bulb { 0% { filter: brightness(1.25); box-shadow: 0 0 0 1.5px rgba(60, 50, 30, 0.45), 0 0 14px 4px rgba(255, 220, 120, 0.95); } 50% { filter: brightness(0.62) saturate(0.7); box-shadow: 0 0 0 1.5px rgba(60, 50, 30, 0.45); } }
/* the window onto the drum */
.dv-bw-view { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 6px; perspective: 900px; background: #4A4E54; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.6); }
.dv-bw-drum { position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; transform-style: preserve-3d; }
/* each slot: a lacquered panel, beveled, with chrome pegs at its edge and a dark gap between */
.dv-bw-slot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-top: 1.5px solid #2E3136; border-bottom: 1.5px solid #2E3136;
  background:
    radial-gradient(circle at 7px 1px, #FFFFFF 0 1.2px, #C9CED3 2.2px, #6B7178 3.4px, rgba(0, 0, 0, 0.5) 3.9px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 7px) 1px, #FFFFFF 0 1.2px, #C9CED3 2.2px, #6B7178 3.4px, rgba(0, 0, 0, 0.5) 3.9px, transparent 4.6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0, rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.18) 100%), linear-gradient(180deg, color-mix(in srgb, var(--c) 86%, #fff), var(--c) 40%, color-mix(in srgb, var(--c) 82%, #000));
  /* (the chrome pegs are painted in, since anything sticking out of a slot sorts wrongly in 3D) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.35); }
.dv-bw-slot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); font-size: 12.5px; font-weight: 900; font-stretch: 85%; letter-spacing: 0.05em; text-transform: uppercase; color: #FFFFFF; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.4); }
.dv-bw-slot.is-light span { color: #3A2A06; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
/* the light on a curved drum: falling off toward the top and bottom, a gloss band across the middle */
.dv-bw-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(20, 22, 26, 0.5) 0%, rgba(20, 22, 26, 0.2) 14%, rgba(20, 22, 26, 0) 28%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 55%, rgba(20, 22, 26, 0) 72%, rgba(20, 22, 26, 0.2) 86%, rgba(20, 22, 26, 0.5) 100%),
  linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.12)); }
.dv-bw.is-landed .dv-bw-shade { animation: dv-bw-win 0.3s ease 4; }
@keyframes dv-bw-win { 50% { box-shadow: inset 0 0 0 2px rgba(255, 214, 110, 0.95), inset 0 0 24px rgba(255, 214, 110, 0.35); } }
/* the flapper: a red rubber tongue on a chrome mount, that the pegs knock as they pass */
.dv-bw-pointer { position: absolute; right: -20px; top: 50%; width: 40px; height: 30px; margin-top: -15px; transform-origin: 88% 50%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.45)); }
.dv-bw-pointer::before { content: ''; position: absolute; left: 0; top: 7px; width: 32px; height: 16px; background: linear-gradient(180deg, #E0463A, #B3261E 55%, #7E160F); clip-path: polygon(0 50%, 30% 0, 100% 8%, 100% 92%, 30% 100%); }
.dv-bw-pointer::after { content: ''; position: absolute; right: 0; top: 4px; width: 14px; height: 22px; border-radius: 4px; background: linear-gradient(90deg, #6B7178, #F1F3F5 40%, #A9AFB5 70%, #5E646A); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.dv-bw-pointer.is-hit { animation: dv-flap 0.11s ease-out; }
@keyframes dv-flap { 45% { transform: rotate(-16deg); } }
.dv-spin { display: flex; width: min(330px, 100%); margin: 0 auto; }
.dv-spin[disabled] { opacity: 0.6; }
.dv-topic-hint { margin: 12px 0 0; font-family: var(--sans); font-size: 13.5px; color: var(--muted); text-align: center; }
.dv-topic-res { margin-top: 16px; text-align: center; }
#dv-topic.is-new .dv-topic-res { animation: dv-topic-in 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes dv-topic-in { from { transform: scale(0.9); opacity: 0; } }
.dv-topic-k { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dv); }
.dv-topic-name { margin: 2px 0 12px; font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--ink); }
.dv-vid.is-big { width: min(360px, 100%); margin: 0 auto; text-align: left; }
.dv-link-btn { margin-top: 10px; padding: 8px 12px; border: none; background: none; color: var(--dv); font-family: var(--sans); font-size: 14px; font-weight: 800; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .dv-bw-pointer.is-hit, .dv-bw * , #dv-topic.is-new .dv-topic-res { animation: none !important; } }

/* ---- the searchable library ---- */
.dv-lib-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-lib-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--muted); }
.dv-lib-search svg { flex: none; width: 18px; height: 18px; }
.dv-lib-search input { flex: 1; min-width: 0; height: 42px; border: none; background: none; color: var(--ink); font-family: var(--sans); font-size: 16px; outline: none; }
.dv-lib-search:focus-within { border-color: var(--dv); }
#dv-vcat { flex: 1 1 160px; height: 45px; padding: 0 12px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 600; }
.dv-lib-src { display: flex; gap: 6px; margin: 10px 0 4px; overflow-x: auto; scrollbar-width: none; }
.dv-lib-srcopt { flex: none; padding: 7px 13px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; }
.dv-lib-srcopt.is-on { border-color: transparent; background: var(--dv-grad); color: #fff; }
.dv-lib-count { margin: 10px 2px 10px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.dv-lib .dv-vid-t b { font-family: var(--sans); font-style: normal; font-size: 14px; font-weight: 700; line-height: 1.3; }
.dv-vid-src { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.62); color: #fff; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; }
.dv-vid-src.is-gty { background: rgba(123, 42, 42, 0.85); }
.dv-vid-src.is-apj { background: rgba(28, 64, 92, 0.85); }
.dv-lib-more { display: flex; margin: 14px auto 0; }

/* ------------------------------------------------------------------ Explore while you watch */
.dv-vlinks { margin: 14px 0 4px; }
.dv-vlinks-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; font-family: var(--sans); }
.dv-vlinks-h b { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dv, var(--gold)); }
.dv-vlinks-h span { font-size: 12.5px; color: var(--muted); }
.dv-vlinks-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.dv-vl { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 8px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s, transform 0.12s; }
.dv-vl:active { transform: scale(0.98); }
@media (hover: hover) { .dv-vl:hover { border-color: var(--dv, var(--gold)); } }
.dv-vl > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dv-vl small { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dv-vl b { font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-vl-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, #5F8570 16%, transparent); color: #3E5A4B; }
.dv-vl.k-x .dv-vl-ic { background: color-mix(in srgb, #9A6340 16%, transparent); color: #7A4A2C; }
body.site-dark .dv-vl-ic { color: #BFD8C8; } body.site-dark .dv-vl.k-x .dv-vl-ic { color: #E6C0A4; }
.dv-vl-ic svg { width: 20px; height: 20px; }
.dv-vl-thumb.sb-scene { flex: none; width: 64px; height: 40px; aspect-ratio: auto; border-radius: 8px; }
.dv-vl-thumb * { animation: none !important; }
.dv-vl-pic { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--bg); }
.dv-vl-pic img, .dv-vl-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the panel over the video (the video keeps playing under it) */
.dv-peek-scrim.over-reader { z-index: 2147483050; } /* opened from the Bible reader, over it */
/* (over the reader in dark mode: the reader's own gold, not the devotions' color) */
body.site-dark .dv-peek-scrim.over-reader { --dv: var(--coral); --dv-2: var(--gold); --dv-soft: var(--coral-soft); }
body.site-dark .dv-peek-scrim.over-reader .dv-peek-back { color: var(--on-gold); }
.dv-peek-scrim { position: fixed; inset: 0; z-index: 78; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 16, 12, 0.35); animation: finder-in 0.2s ease; }
.dv-peek-scrim[hidden] { display: none; }
.dv-peek { display: flex; flex-direction: column; width: min(640px, 100%); max-height: 78vh; max-height: 78dvh; border-radius: 22px 22px 0 0; background: var(--bg); box-shadow: 0 -20px 40px -20px rgba(20, 16, 12, 0.5); animation: dv-peek-up 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dv-peek-up { from { transform: translateY(40px); opacity: 0.4; } }
@media (min-width: 700px) { .dv-peek-scrim { align-items: center; padding: 24px; } .dv-peek { border-radius: 22px; max-height: min(760px, 88vh); } }
.dv-peek-grip { flex: none; display: grid; place-items: center; height: 22px; margin-bottom: -6px; cursor: ns-resize; touch-action: none; -webkit-tap-highlight-color: transparent; }
.dv-peek-grip span { width: 44px; height: 5px; border-radius: 3px; background: var(--rule); transition: background 0.15s ease, width 0.15s ease; }
.dv-peek-grip:hover span, .dv-peek-grip:focus-visible span, .dv-peek-grip.is-drag span { width: 56px; background: var(--muted); }
.dv-peek-grip:focus { outline: none; }
/* once sized: a bottom sheet (on wide screens too), a lighter dim, and the video above it can be used */
.dv-peek-scrim.is-sized { align-items: flex-end; padding: 0; background: rgba(20, 16, 12, 0.12); pointer-events: none; }
.dv-peek-scrim.is-sized .dv-peek { pointer-events: auto; border-radius: 22px 22px 0 0; animation: none; }
.dv-peek-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.dv-peek-back { flex: none; padding: 9px 15px; border: none; border-radius: 999px; background: var(--dv, var(--gold)); color: #FFF7EE; font: 800 13.5px var(--sans); cursor: pointer; }
.dv-peek-t { min-width: 0; margin-left: auto; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-peek-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.dv-peek-card .fm-title { margin-top: 10px; }
.dv-peek-art { border-radius: 14px; margin-bottom: 12px; }
.dv-peek-scene .dv-scroll-k { margin-bottom: 2px; }
.dv-peek-scene .dv-h { margin-top: 0; }
.dv-peek-people, .dv-peek-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.dv-peek-name { padding: 6px 11px; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.dv-peek-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.dv-peek-top .dv-h { margin: 0; }
.dv-peek-pic { position: relative; flex: none; width: 84px; height: 84px; border-radius: 18px; overflow: hidden; background: var(--bg-raised); border: 1px solid var(--rule); }
.dv-peek-pic img, .dv-peek-pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-peek-ref { margin-top: 4px; padding: 0; border: none; background: none; color: var(--dv, var(--gold)); font: 700 13.5px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dv-peek-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.dv-peek-rel small { min-width: 78px; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* the Bible Scroll opened from the panel goes over it (and over the devotion) */
html.dv-peeking .sb { z-index: 79; }
html.dv-peeking .tr-sheet { z-index: 80; }

/* Daily Bible reading: reset the check marks */
.dv-reset { float: right; display: inline-flex; align-items: center; gap: 5px; margin: -2px 0 6px 10px; padding: 4px 10px 4px 8px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--muted); font: 700 11.5px var(--sans); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.dv-reset svg { width: 13px; height: 13px; }
@media (hover: hover) { .dv-reset:hover { color: var(--ink); border-color: var(--muted); } }
.dv-reset.is-asking { float: none; display: flex; margin: 0 0 8px; background: #B8402E; border-color: #B8402E; color: #fff; }

/* ------------------------------------------------------------------ Study notes under a passage */
.dv-notes { margin: 14px 0 6px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); overflow: hidden; overflow: clip; } /* (clip, so the source bar can stick) */
.dv-notes > summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.dv-notes > summary::-webkit-details-marker { display: none; }
.dv-notes > summary > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; font-family: var(--sans); }
.dv-notes > summary b { font-size: 15px; color: var(--ink); }
.dv-notes > summary small { font-size: 12.5px; color: var(--muted); }
.dv-notes-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--dv, var(--gold)) 14%, transparent); color: var(--dv, var(--gold)); }
.dv-notes-ic svg { width: 19px; height: 19px; }
.dv-notes[open] > summary .dv-s-chev { transform: rotate(180deg); }
/* The source buttons and Close: while you read the notes, they stick to the top of the step (the
   notes scroll with the page, as one, rather than in a box of their own) */
.dv-notes-bar { position: sticky; top: -8px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-raised); }
.dv-notes-seg { flex: 1; min-width: 0; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.dv-notes-x { flex: none; padding: 8px 11px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); color: var(--ink); font: 700 12.5px var(--sans); cursor: pointer; white-space: nowrap; }
.dv-notes-end { display: block; margin: 6px auto 2px; padding: 9px 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.dv-notes-seg::-webkit-scrollbar { display: none; }
.dv-notes-src { flex: 1 0 auto; padding: 8px 12px; border: none; border-radius: 10px; background: transparent; color: var(--muted); font: 700 12.5px var(--sans); white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s; }
.dv-notes-src.is-on { background: var(--dv, var(--gold)); color: #fff; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.5); }
.dv-notes-src[hidden] { display: none; }
.dv-notes-body { padding: 12px 16px 16px; }
.dv-notes-by { margin-bottom: 8px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.dv-notes-text { padding-right: 4px; font-family: var(--serif); font-size: 16px; line-height: 1.65; color: var(--ink); }
.dv-notes-text p { margin: 0 0 10px; }
.dv-notes-text .dv-notes-ch { margin: 14px 0 6px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.dv-notes-text .dv-notes-ch:first-child { margin-top: 0; }
.dv-notes-text p.more { font-family: var(--sans); font-size: 12.5px; font-style: italic; color: var(--muted); }
html.dv-tv .dv-notes-text { font-size: 26px; max-height: none; }
.dv-study small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------------ Walk through the Bible: 40 stops */
.dv-walkpaths { display: flex; gap: 6px; margin: 0 0 16px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.dv-walkpaths::-webkit-scrollbar { display: none; }
.dv-walkpath { flex: none; padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--muted); font: 600 13px var(--sans); white-space: nowrap; cursor: pointer; }
.dv-walkpath:hover { color: var(--ink); border-color: var(--muted); }
.dv-walkpath.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.dv-walk-era { position: relative; margin: 0 0 18px; }
.dv-walk-era:last-child { margin-bottom: 0; }
.dv-walk-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-family: var(--sans); }
.dv-walk-h i { align-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--era); box-shadow: 0 0 0 3px color-mix(in srgb, var(--era) 22%, transparent); }
.dv-walk-h b { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--era); }
body.site-dark .dv-walk-h b { color: color-mix(in srgb, var(--era) 60%, #fff); }
.dv-walk-h small { font-size: 12px; color: var(--muted); }
.dv-walk-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--era) 35%, transparent); margin-left: 4px; }
.dv-walk-stop { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 12px 6px 6px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.12s; -webkit-tap-highlight-color: transparent; }
.dv-walk-stop:active { transform: scale(0.99); }
@media (hover: hover) { .dv-walk-stop:hover { border-color: var(--era); } }
.dv-walk-pic { position: relative; flex: none; width: 92px; }
.dv-walk-art.sb-scene { position: relative; display: block; width: 92px; aspect-ratio: 16 / 10; border-radius: 11px; overflow: hidden; background: color-mix(in srgb, var(--era) 35%, #1A1614); }
.dv-walk-art * { animation-play-state: paused !important; }
.dv-walk-n { position: absolute !important; left: 5px; top: 5px; z-index: 2; min-width: 22px; height: 22px; padding: 0 5px; display: grid !important; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #2E2B27; font: 800 11.5px var(--sans); }
.dv-walk-stop.is-done .dv-walk-n { background: var(--era); color: #fff; }
.dv-walk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dv-walk-t > b { font-family: var(--serif); font-weight: 400; font-size: 16.5px; line-height: 1.2; }
.dv-walk-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dv-walk-who .dv-stop-faces { flex: none; margin: 0; }
.dv-walk-who .dv-face { width: 24px; height: 24px; font-size: 9px; }
.dv-walk-who small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.dv-scroll > p:only-child { margin: 0; }

/* ------------------------------------------------------------------ prayer from the heart */
.dv-heart { display: flex; gap: 10px; margin: 0 0 14px; padding: 2px 2px 0; font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.55; color: var(--muted); }
.dv-heart > span:first-child { flex: none; margin-top: 3px; color: var(--dv); }
.dv-heart svg, .dv-heartbox-h svg { width: 17px; height: 17px; display: block; }
.dv-ref-link { padding: 0; border: none; background: none; color: var(--dv); font: inherit; font-style: normal; font-family: var(--sans); font-size: 0.86em; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.dv-heartbox { margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: var(--dv-soft); }
.dv-heartbox-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--dv); font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.dv-heartbox p { margin: 0 0 8px; font-family: var(--serif); font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.dv-heartbox ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.dv-heartbox li { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
html.dv-tv .dv-heart { font-size: 26px; }

/* A Walk through the Bible stop, as a page of the Bible Scroll's book (story/story.css): the scene's
   picture keeps the devotion's own caption and sits on the top of the page like a plate; the story
   below is on warm paper, in a book face, with a drop cap, the fold along its edge, and its page
   number. (.is-plain: the same page, without the plate, in the Scroll peek.) */
.dv-leaf { --paper: #FBF6EA; --paper-edge: #E4D8BE; --book: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; position: relative; margin: -30px 0 18px; padding: 46px 24px 14px 30px; border-radius: 4px 4px 14px 14px; background: linear-gradient(90deg, rgba(60, 40, 20, 0.15), rgba(60, 40, 20, 0.05) 14px, transparent 44px), var(--paper); border: 1px solid color-mix(in srgb, var(--paper-edge) 85%, #8A6A40); box-shadow: 0 2px 0 -1px var(--paper), 0 3px 0 -1px var(--paper-edge), 0 5px 0 -2px var(--paper), 0 6px 0 -2px var(--paper-edge), 0 22px 36px -22px rgba(40, 26, 10, 0.55); } /* (its edge, and the leaves stacked under it) */
body.site-dark .dv-leaf { --paper: #211D18; --paper-edge: #3A3229; }
.dv-era-scene { z-index: 1; margin: 0 14px; } /* (the plate, over the top of the page) */
.dv-leaf.is-plain { margin: 12px 0 14px; padding: 18px 20px 6px 26px; border-radius: 4px 14px 14px 4px; }
.dv-leaf-gist { margin: 0 0 16px; font-family: var(--book); font-size: 18px; line-height: 1.7; color: var(--ink); text-wrap: pretty; }
.dv-leaf-gist::first-letter { float: left; margin: 6px 8px 0 0; font-size: 3.35em; line-height: 0.8; color: var(--era); }
body.site-dark .dv-leaf-gist::first-letter { color: color-mix(in srgb, var(--era) 60%, #fff); }
.dv-leaf .dv-thread { margin: 0 0 6px; background: color-mix(in srgb, var(--era) 8%, transparent); font-family: var(--book); font-size: 16px; line-height: 1.6; }
.dv-leaf-folio { margin: 14px 0 0; font-family: var(--book); font-style: italic; font-size: 14px; letter-spacing: 0.08em; color: var(--muted); text-align: center; }
.dv-leaf-folio::before, .dv-leaf-folio::after { content: '·'; margin: 0 10px; opacity: 0.6; }
@media (max-width: 560px) { .dv-era-scene { margin: 0 8px; } .dv-leaf { padding: 42px 16px 12px 22px; } .dv-leaf-gist { font-size: 17px; } }
html.dv-kid .dv-leaf-gist { font-size: 19px; }
html.dv-tv .dv-leaf-gist { font-size: 28px; }

/* The parts of a devotion, and their timer (devotions.js, "the parts, and their timer"):
   Default or your own on "Before you begin", each part's name and minutes to change, the timer's
   switch; and the timer's bar under the dots while it counts down */
.dv-planpick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 14px 0 0; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--dv) 8%, var(--bg-raised)); border: 1px solid var(--rule); }
.dv-planpick button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border: none; border-radius: 10px; background: none; color: var(--muted); font-family: var(--sans); cursor: pointer; }
.dv-planpick button b { font-size: 14.5px; color: inherit; }
.dv-planpick button small { min-height: 1em; font-size: 11.5px; font-weight: 700; opacity: 0.85; }
.dv-planpick button.is-on { background: var(--dv); color: #fff; box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--dv) 80%, #000); }
.dv-planpick button:disabled { cursor: default; }
.dv-plan li.dv-plan-ed { grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.dv-plan-name { min-width: 0; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg); color: var(--ink); font: 700 15px var(--sans); }
.dv-plan-name:focus { outline: 2px solid var(--dv); outline-offset: 1px; }
.dv-plan-mins { display: inline-flex; align-items: center; gap: 6px; }
.dv-plan-mins button { width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--ink); font: 700 17px/1 var(--sans); cursor: pointer; }
.dv-plan-mins b { min-width: 52px; text-align: center; font-size: 14px; color: var(--dv); }
.dv-plan-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.dv-timer-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); font-family: var(--sans); text-align: left; cursor: pointer; }
.dv-timer-sw span { display: flex; flex-direction: column; gap: 2px; }
.dv-timer-sw b { font-size: 15px; }
.dv-timer-sw small { font-size: 12.5px; color: var(--muted); }
.dv-timer-sw:disabled { cursor: default; opacity: 0.85; }
.dv-sw { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background 0.2s; }
.dv-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.dv-timer-sw.is-on .dv-sw { background: var(--dv); }
.dv-timer-sw.is-on .dv-sw::after { transform: translateX(18px); }
.dv-timer { flex: none; padding: 0 14px 8px; font-family: var(--sans); }
.dv-timer[hidden] { display: none; }
.dv-tbar { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--dv) 10%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--dv) 30%, var(--rule)); }
.dv-tname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dv); }
.dv-tleft { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.dv-tbtn { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); cursor: pointer; }
.dv-tbtn svg { width: 15px; height: 15px; }
.dv-tbtn.is-text { padding: 0 12px; font: 800 12.5px var(--sans); }
.dv-twait { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.dv-timer.is-soon .dv-tbar { border-color: var(--dv); animation: dv-tpulse 1s ease-in-out infinite; }
.dv-timer.is-up .dv-tleft { color: var(--dv); }
.dv-timer.is-up .dv-tbar { background: color-mix(in srgb, var(--dv) 20%, var(--bg-raised)); }
@keyframes dv-tpulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dv) 22%, transparent); } }
.dv-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--bg-raised); border: 1.5px solid var(--dv); font-size: 13.5px; color: var(--ink); }
.dv-ask span { flex: 1 1 160px; }
html.dv-tv .dv-tleft { font-size: 30px; } html.dv-tv .dv-tname { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .dv-timer.is-soon .dv-tbar { animation: none; } }

/* Today's devotion: three steps (choose, what you'll do, begin) */
.dv-build { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.dv-build > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; position: relative; }
.dv-build > li > div { min-width: 0; }
@media (max-width: 560px) { .dv-build > li { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; } .dv-build-n { width: 26px; height: 26px; font-size: 13px; } .dv-build > li:not(:last-child)::before { left: 12px; top: 30px; } }
.dv-build > li:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 34px; bottom: -18px; width: 2px; background: var(--rule); }
.dv-build-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dv); color: #fff; font: 800 14px var(--sans); }
.dv-build h4 { margin: 4px 0 10px; font: 800 16px var(--sans); color: var(--ink); }
.dv-bopts { display: grid; gap: 8px; }
.dv-bopt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); font-family: var(--sans); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s, background 0.15s; }
.dv-bopt > i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rule); color: transparent; }
.dv-bopt > i svg { width: 14px; height: 14px; }
.dv-bopt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dv-bopt b { font-size: 15px; }
.dv-bopt small { font-size: 13px; color: var(--muted); }
.dv-bopt.is-on { border-color: var(--dv); background: color-mix(in srgb, var(--dv) 7%, var(--bg-raised)); }
.dv-bopt.is-on > i { border-color: var(--dv); background: var(--dv); color: #fff; }
@media (hover: hover) { .dv-bopt:hover { border-color: color-mix(in srgb, var(--dv) 55%, var(--rule)); } }
.dv-bmore { margin-top: 10px; }
.dv-bmore > summary { display: inline-block; list-style: none; padding: 4px 0; font: 700 13.5px var(--sans); color: var(--dv); cursor: pointer; }
.dv-bmore > summary::-webkit-details-marker { display: none; }
.dv-bmore > summary::after { content: ' ▾'; }
.dv-bmore[open] > summary::after { content: ' ▴'; }
.dv-bmore > .dv-bopts { margin-top: 8px; }
.dv-build-how { margin: 0 0 8px; font: 500 14.5px/1.5 var(--sans); color: var(--ink); }
/* (what you'll do: plain text, nothing to press) */
.dv-build-parts { margin: 0; padding: 0 0 0 18px; font: 400 14px/1.6 var(--sans); color: var(--muted); }
.dv-build-parts b { color: var(--ink); }
.dv-build-parts span { font-weight: 700; color: var(--dv); }
.dv-build-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 18px; border: none; border-radius: 16px; background: var(--dv); color: #fff; font-family: var(--sans); text-align: left; cursor: pointer; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--dv) 85%, #000); }
.dv-build-go span { display: flex; flex-direction: column; min-width: 0; }
.dv-build-go small { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.dv-build-go b { font-size: 17px; line-height: 1.3; }
.dv-build-go em { flex: none; text-align: right; font-style: normal; font-size: 13px; font-weight: 700; opacity: 0.9; }
@media (hover: hover) { .dv-build-go:hover { filter: brightness(1.07); } }

/* Simple (hub/simplemode.js): no "Devotions together" bar */
html.simple-on .dv-roombar { display: none; }

/* ---- Preparing to lead (devotions.js, "preparing to lead"): the leader's own notes on each part, like a page
   of a legal pad, only on their screen; the sheet ringed in gold while preparing, and in their color while leading */
.dv-prep-btn { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 12.5px var(--sans); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dv-prep-btn svg { width: 16px; height: 16px; color: var(--dv, var(--gold)); }
.dv-prep-btn[aria-pressed="true"] { border-color: #D9A62E; background: #F2C14E; color: #2E2B27; }
.dv-prep-btn[aria-pressed="true"] svg { color: #2E2B27; }
.dv-prep-btn[hidden] { display: none; }
@media (max-width: 420px) { .dv-prep-btn { padding: 0 10px; } .dv-prep-btn span { font-size: 12px; } }
.dv-prep-banner { margin: 6px 0 12px; padding: 10px 14px; border-radius: 14px; background: #FFF4CF; color: #4A3A12; font: 13px/1.45 var(--sans); }
.dv-prep-banner b { display: block; font-size: 14px; }
.dv-prep { position: relative; margin: 18px 0 6px; padding: 12px 14px 8px; border: 1px solid #E8D48F; border-radius: 16px; background: #FFFBEA; color: #3B2F12; box-shadow: 0 10px 22px -16px rgba(80, 60, 10, 0.6); }
.dv-prep-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--sans); }
.dv-prep-h b { font-size: 13.5px; }
.dv-prep-h small { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9A7B25; }
.dv-prep-ask { margin: 6px 0 8px; font: italic 15px/1.45 var(--serif); color: #5C4A1A; }
.dv-prep-in { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 6px 10px; border: 1px solid #E2CC7C; border-radius: 10px; background: repeating-linear-gradient(180deg, transparent 0 23px, #EFE0A8 23px 24px) 0 5px / 100% 24px, #FFFDF4; color: #2E2B27; font: 16px/24px var(--sans); resize: vertical; }
.dv-prep-in:focus { outline: 2px solid #E0B53A; outline-offset: 1px; }
.dv-prep-saved { display: block; min-height: 1em; margin-top: 3px; font: 600 11.5px var(--sans); color: #9A7B25; text-align: right; }
.dv-prep.is-live { background: #FFF8DD; }
.dv-sheet.is-prep .dv-sheet-box { box-shadow: 0 0 0 3px #F2C14E, 0 30px 60px -20px rgba(0, 0, 0, 0.5); }
.dv-sheet.is-leading .dv-sheet-box { box-shadow: 0 0 0 3px var(--dv, var(--gold)), 0 30px 60px -20px rgba(0, 0, 0, 0.5); }
.dv-sheet.is-leading .dv-count::before { content: 'You’re leading · '; color: var(--dv, var(--gold)); font-weight: 800; }
/* (the Devotions page: how to prepare, and the devotions prepared, to open and lead) */
.dv-roombar { flex-wrap: wrap; }
.dv-roombar-prep { flex-basis: 100%; margin: 0; font: 12.5px/1.45 var(--sans); color: var(--muted); }
.dv-prepped { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dv-prepped small { flex-basis: 100%; font: 800 10.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dv-prepped button { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 100%; padding: 7px 12px; border: 1px solid #E8D48F; border-radius: 12px; background: #FFFBEA; color: #3B2F12; text-align: left; cursor: pointer; }
.dv-prepped button b { font: 700 13px var(--sans); }
.dv-prepped button span { font: 600 11px var(--sans); color: #8A7020; }
/* (leading: the part's notes at its top, folded to a line when there are none yet) */
.dv-prep.is-live { margin: 4px 0 14px; padding: 10px 14px 8px; }
.dv-prep.is-live > summary { list-style: none; cursor: pointer; }
.dv-prep.is-live > summary::-webkit-details-marker { display: none; }
.dv-prep.is-live > summary b::before { content: '▸ '; color: #9A7B25; }
.dv-prep.is-live[open] > summary b::before { content: '▾ '; }
.dv-prep.is-live:not([open]) { padding-bottom: 10px; }

/* ---- Devotions in 3D (critique mode only): each model's devotions under its picture; in a devotion, the model's
   picture, what to look at, and a button into the model at that part */
.dv-m3-set + .dv-m3-set { margin-top: 18px; }
.dv-m3-h { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.dv-m3-h img { flex: none; width: 76px; height: 57px; object-fit: cover; border-radius: 10px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5); }
.dv-m3-h span { display: flex; flex-direction: column; min-width: 0; font-family: var(--sans); }
.dv-m3-h b { font-size: 15px; color: var(--ink); }
.dv-m3-h small { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.dv-m3 { margin: 6px 0 14px; }
.dv-m3 img { display: block; width: 100%; max-height: 46vh; object-fit: cover; border-radius: 16px; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6); }
.dv-m3 figcaption { margin-top: 10px; font: 16px/1.55 var(--serif); color: var(--ink); }
.dv-m3-go { display: inline-flex; align-items: center; gap: 8px; }
.dv-m3-go svg { width: 18px; height: 18px; }
/* (on the blue card at the top: light, so they can be read) */
.dv-hero .dv-roombar-prep { color: rgba(255, 255, 255, 0.86); }
.dv-hero .dv-roombar-prep b { color: #fff; }
.dv-hero .dv-prepped small { color: rgba(255, 255, 255, 0.8); }
/* (leading: your notes stay at the top of the part as it scrolls, right at the top (the part's 8px of room above
   them: -8px), never more than part of the screen) */
.dv-prep.is-live { position: sticky; top: -8px; z-index: 3; max-height: 42vh; max-height: 42dvh; overflow-y: auto; overscroll-behavior: contain; }

/* ---- your notes for a part (preparing, and leading): a clean card, a gold edge, a plain place to write */
.dv-prep { padding: 12px 14px 10px 16px; border: 1px solid color-mix(in srgb, #D9A62E 30%, var(--rule)); border-radius: 18px; background: color-mix(in srgb, var(--bg-raised) 94%, #F2C14E); color: var(--ink); box-shadow: 0 12px 28px -20px rgba(40, 30, 5, 0.55); overflow: hidden; }
.dv-prep::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(#F2C14E, #D9A62E); }
.dv-prep-h { align-items: center; }
.dv-prep-h b { display: inline-flex; align-items: center; gap: 6px; font: 700 14px var(--sans); color: var(--ink); }
.dv-prep-h small { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, #F2C14E 22%, transparent); color: #8A6A12; font-size: 10px; letter-spacing: 0.06em; }
.dv-prep-ask { font: 14.5px/1.5 var(--sans); color: var(--muted); }
.dv-prep-in { margin-top: 10px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, var(--bg-raised)); color: var(--ink); font: 16px/1.5 var(--sans); transition: border-color 0.15s, background 0.15s; }
.dv-prep-in::placeholder { color: var(--muted); }
.dv-prep-in:focus { outline: none; border-color: #D9A62E; background: var(--bg-raised); box-shadow: 0 0 0 3px color-mix(in srgb, #F2C14E 28%, transparent); }
.dv-prep-saved { color: var(--muted); }
.dv-prep.is-live { background: color-mix(in srgb, var(--bg-raised) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.dv-prep.is-live > summary b::before { content: ''; width: 7px; height: 7px; border-right: 2px solid #B8891E; border-bottom: 2px solid #B8891E; transform: rotate(-45deg); transition: transform 0.18s; margin-right: 2px; }
.dv-prep.is-live[open] > summary b::before { content: ''; transform: rotate(45deg); }

/* (leading: Hide and Show, plain to see; the bar under them, to drag; their height is the note's: --prep-h) */
.dv-prep.is-live { max-height: none; overflow: visible; padding-bottom: 0; }
.dv-prep.is-live .dv-prep-h { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dv-prep.is-live .dv-prep-h b { flex: 1; min-width: 0; }
.dv-prep.is-live .dv-prep-h b::before { display: none; }
.dv-prep-fold { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 14px; border: none; border-radius: 999px; background: #F2C14E; color: #2E2B27; font: 800 13px var(--sans); cursor: pointer; }
.dv-prep-fold i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(2px) rotate(-135deg); transition: transform 0.18s; }
.dv-prep.is-folded .dv-prep-fold i { transform: translateY(-2px) rotate(45deg); }
.dv-prep.is-live .dv-prep-in { height: var(--prep-h, 96px); max-height: 60vh; resize: none; overflow-y: auto; }
.dv-prep.is-folded .dv-prep-body, .dv-prep.is-folded small { display: none; }
.dv-prep.is-folded { padding-bottom: 0; }
.dv-prep-grip { display: grid; place-items: center; height: 22px; margin: 2px -14px 0 -16px; cursor: ns-resize; touch-action: none; }
.dv-prep-grip span { width: 44px; height: 5px; border-radius: 3px; background: color-mix(in srgb, #B8891E 55%, var(--rule)); transition: width 0.15s, background 0.15s; }
.dv-prep-grip:hover span, .dv-prep-grip.is-drag span { width: 64px; background: #D9A62E; }
/* (leading: a thin header and bar, so the notes and the part get the room) */
.dv-prep.is-live { padding: 5px 10px 0 14px; }
.dv-prep.is-live .dv-prep-h b { font-size: 12.5px; }
.dv-prep.is-live .dv-prep-h small { padding: 2px 6px; font-size: 9px; }
.dv-prep.is-live .dv-prep-fold { height: 24px; padding: 0 9px 0 11px; font-size: 12px; }
.dv-prep.is-live .dv-prep-in { margin-top: 5px; padding: 7px 10px; }
.dv-prep.is-live .dv-prep-saved { display: none; }
.dv-prep-grip { height: 12px; margin: 0 -10px 0 -14px; }
.dv-prep-grip span { height: 4px; }
.dv-prep.is-folded { padding-bottom: 0; }
@media (max-width: 380px) { .dv-prep.is-live .dv-prep-h small { display: none; } }

/* ---- changing a devotion, and your own (devotions.js editDevotion, mineHtml) */
.dv-edit-btn { width: 34px; padding: 0; justify-content: center; }
.dv-edit-btn[hidden] { display: none; }
.dv-ed { position: fixed; inset: 0; z-index: 85; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--ink); transform: translateY(16px); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; }
.dv-ed.open { transform: none; opacity: 1; }
.dv-ed[hidden] { display: none; }
.dv-ed-in { max-width: 720px; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom)); }
.dv-ed-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0 -16px 10px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--rule); }
.dv-ed-bar b { flex: 1; min-width: 0; text-align: center; font: 700 15px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-ed-x, .dv-ed-go { flex: none; padding: 8px 16px; border-radius: 999px; font: 700 14px var(--sans); cursor: pointer; }
.dv-ed-x { border: 1px solid var(--rule); background: var(--bg-raised); color: var(--ink); }
.dv-ed-go { border: none; background: var(--ink); color: var(--bg); }
.dv-ed-sub { margin: 4px 0 12px; font: 13.5px/1.5 var(--sans); color: var(--muted); }
.dv-ed-link { padding: 0; border: none; background: none; color: var(--dv, var(--gold)); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.dv-ed-f { display: flex; flex-direction: column; gap: 5px; margin: 0 0 10px; font: 700 12.5px var(--sans); color: var(--muted); }
.dv-ed-f input, .dv-ed-f textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg-raised); color: var(--ink); font: 16px/1.45 var(--sans); }
.dv-ed-f textarea { resize: vertical; }
.dv-ed-f input:focus, .dv-ed-f textarea:focus { outline: none; border-color: var(--dv, var(--gold)); }
.dv-ed-steps { display: grid; gap: 10px; margin: 6px 0 12px; padding: 0; list-style: none; }
.dv-ed-step { padding: 10px 12px 2px; border: 1px solid var(--rule); border-radius: 16px; background: color-mix(in srgb, var(--bg-raised) 70%, var(--bg)); }
.dv-ed-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.dv-ed-sh b { display: inline-flex; align-items: center; gap: 8px; font: 800 14px var(--sans); }
.dv-ed-sh b i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--dv, var(--gold)); color: #fff; font: 800 11.5px var(--sans); font-style: normal; }
.dv-ed-sh span { display: flex; gap: 4px; }
.dv-ed-sh button { width: 32px; height: 32px; padding: 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg-raised); color: var(--ink); font: 700 15px var(--sans); cursor: pointer; }
.dv-ed-sh button:disabled { opacity: 0.35; cursor: default; }
.dv-ed-sh button.is-x { color: #C8463C; }
.dv-ed-fixed { margin: 0 0 10px; font: 600 14px/1.4 var(--sans); }
.dv-ed-fixed small { display: block; margin-top: 2px; font-weight: 500; font-size: 12px; color: var(--muted); }
.dv-ed-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 18px; }
.dv-ed-add span { font: 600 12.5px var(--sans); color: var(--muted); }
.dv-ed-add button { padding: 8px 13px; border: 1px dashed color-mix(in srgb, var(--dv, var(--gold)) 60%, var(--rule)); border-radius: 999px; background: none; color: var(--ink); font: 700 13px var(--sans); cursor: pointer; }
.dv-ed-del { display: block; margin: 8px 0 0; padding: 10px 16px; border: 1px solid color-mix(in srgb, #C8463C 40%, var(--rule)); border-radius: 999px; background: none; color: #C8463C; font: 700 14px var(--sans); cursor: pointer; }
.dv-mine-add { border-style: dashed !important; }
.dv-mine-add .dv-tile-n { background: none; }
.dv-mine-edit { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 12.5px var(--sans); cursor: pointer; }
.dv-mine-edit svg, .dv-mine-new svg { width: 16px; height: 16px; flex: none; }
.dv-mine-new { margin: 0 0 14px; }
.dv-mine-new button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1.5px dashed color-mix(in srgb, var(--dv, var(--gold)) 55%, var(--rule)); border-radius: 18px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.dv-mine-new button > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dv-mine-new b { font: 700 15px var(--sans); }
.dv-mine-new small { font: 13px/1.4 var(--sans); color: var(--muted); }
.dv-mine-new em { font: 800 22px var(--sans); font-style: normal; color: var(--dv, var(--gold)); }
.dv-swipehint { margin: 8px 0 0; font: 600 12.5px var(--sans); color: var(--muted); text-align: center; }
/* (swiped: what letting go will do, in the room the devotion leaves) */
#devotions [data-dv-open] { touch-action: pan-y; }
#devotions .dv-fam-strip [data-dv-open], #devotions .dv-lib-src [data-dv-open], #devotions .dv-walkpaths [data-dv-open] { touch-action: auto; }
.dv-swiping { position: relative; z-index: 2; }
.dv-sw-bg { position: fixed; z-index: 58; display: flex; align-items: center; overflow: hidden; border-radius: 16px; color: #fff; font: 800 13.5px var(--sans); white-space: nowrap; pointer-events: none; }
.dv-sw-bg span { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; }
.dv-sw-bg svg { width: 16px; height: 16px; }
.dv-sw-bg.is-done { justify-content: flex-start; background: color-mix(in srgb, #3DAA5C 70%, var(--bg)); }
.dv-sw-bg.is-done.is-past { background: #3DAA5C; }
.dv-sw-bg.is-edit { justify-content: flex-end; background: color-mix(in srgb, #3F7FAE 70%, var(--bg)); }
.dv-sw-bg.is-edit.is-past { background: #3F7FAE; }
@media (prefers-reduced-motion: reduce) { .dv-ed { transition: none; } }
/* (prepared: each with ✕ to take it off; a part's note, Clear; preparing, start over) */
.dv-prepped-i { display: inline-flex; align-items: stretch; max-width: 100%; }
.dv-prepped-i > button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dv-prepped-x { flex: none; width: 34px; padding: 0; border: 1px solid #E8D48F; border-left: none; border-radius: 0 12px 12px 0; background: #FFF4CF; color: #6B5310; font: 700 17px var(--sans); cursor: pointer; }
.dv-prep-wipe { flex: none; height: 24px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--muted); font: 700 11.5px var(--sans); cursor: pointer; }
.dv-prep:not(.is-live) .dv-prep-wipe { margin-left: auto; }
.dv-prep-over { display: block; margin-top: 8px; padding: 7px 12px; border: 1px solid #E2CC7C; border-radius: 999px; background: #FFFBEA; color: #6B5310; font: 700 12.5px var(--sans); cursor: pointer; }
/* (a devotion changed from its default: marked, in the lists and in its head) */
.dv-changed { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #3F7FAE 16%, transparent); color: #2F6C99; font: 800 9.5px/1.5 var(--sans); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }
[data-dv-open].is-changed { position: relative; }
[data-dv-open] > .dv-changed { position: absolute; top: 6px; right: 6px; margin: 0; }
.dv-changed-dot { display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: #3F7FAE; vertical-align: middle; }
/* a Foundations card opened from a verse in the Bible: where it cites that verse, marked (the window's 'c' page) */
.dv-cite-go { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 12px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--coral) 40%, var(--rule)); border-radius: 999px; background: color-mix(in srgb, var(--coral) 10%, var(--bg-raised)); color: var(--ink); font: 600 12.5px var(--sans); cursor: pointer; }
.dv-cite-go b { font-weight: 800; }
.dv-cited { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--coral) 28%, transparent); color: inherit; font-weight: 700; }
.dv-cited-in { margin-left: -12px !important; padding-left: 9px !important; border-left: 3px solid var(--coral); border-radius: 2px; background: color-mix(in srgb, var(--coral) 7%, transparent); }

/* Walk: devotions on the Walk cards of the Foundations map (devotions/walk.js) */
.dv-np { display: none; }
[data-stage-is] .dv-np { display: inline-flex; } /* (the badge, only while the section isn't live) */
.dv-walk-set + .dv-walk-set { margin-top: 18px; }
.dv-walk-h { display: flex; flex-direction: column; margin: 0 0 10px; font-family: var(--sans); }
.dv-walk-h b { font-size: 15px; color: var(--ink); }
.dv-walk-h small { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
/* (a week on each Walk card: the week, then its days, to go on with or pick) */
.dv-weeks { display: grid; gap: 10px; }
@media (min-width: 600px) { .dv-weeks { grid-template-columns: 1fr 1fr; } }
.dv-week { --wk: #4F6D96; display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); transition: border-color 0.2s ease; }
body.site-dark .dv-week { --wk: #9BB4D6; }
.dv-week.is-going { border-color: color-mix(in srgb, var(--wk) 50%, var(--rule)); }
@media (hover: hover) { .dv-week:hover { border-color: var(--wk); } }
.dv-week-go { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 10px; border: 0; border-radius: 16px 16px 0 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.dv-week-k { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wk); }
.dv-week-go b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.25; }
.dv-week-go small { font-family: var(--sans); font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.dv-week.is-done .dv-week-go small { color: var(--wk); font-weight: 700; }
.dv-week-days { display: flex; gap: 6px; padding: 0 14px 12px; }
.dv-wday { flex: 1; min-width: 0; max-width: 42px; height: 30px; padding: 0; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--muted); font: 700 12px var(--sans); cursor: pointer; }
.dv-wday.is-done { background: var(--wk); border-color: var(--wk); color: var(--bg-raised); }
.dv-wday.is-next { border-color: var(--wk); color: var(--wk); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wk) 22%, transparent); }
@media (hover: hover) { .dv-wday:not(.is-done):hover { border-color: var(--wk); color: var(--wk); } }
.dv-wday:focus-visible, .dv-week-go:focus-visible { outline: 2px solid var(--wk); outline-offset: 2px; }
.dv-week-now { margin: 0 0 20px; }
.dv-week-now .dv-week { border-color: var(--wk); box-shadow: 0 14px 30px -20px rgba(34, 30, 25, 0.5); }
.dv-upnext { display: flex; gap: 8px; align-items: baseline; margin: 16px 0 0; padding: 10px 13px; border-radius: 12px; background: color-mix(in srgb, #4F6D96 9%, var(--bg-raised)); font: 600 13.5px/1.45 var(--sans); color: var(--ink); }
.dv-upnext span { color: #4F6D96; }
body.site-dark .dv-upnext span { color: #9BB4D6; }
.dv-walk-sum { margin: 0 0 14px; font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink); }
.dv-walk-sum:empty { display: none; }
.dv-walk-rests { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; }
.dv-walk-rests:empty { display: none; }
.dv-walk-rests small { width: 100%; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dv-walk-chip { --dv: #5F8570; }
.dv-walk-chip.l1 { --dv: #A7832F; } .dv-walk-chip.l3 { --dv: #9A6340; } .dv-walk-chip.l4 { --dv: #4F6D96; }
.dv-walk-go { margin: 0 0 8px; }
.dv-do { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px; padding: 16px 18px; border-radius: 16px; background: color-mix(in srgb, #4F6D96 11%, var(--bg-raised)); border: 1px solid color-mix(in srgb, #4F6D96 30%, var(--rule)); }
.dv-do-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #4F6D96; color: #fff; }
.dv-do-ic svg { width: 22px; height: 22px; }
.dv-do p { margin: 0; font-family: var(--sans); font-size: 16.5px; font-weight: 600; line-height: 1.5; color: var(--ink); }
/* Leading, live (live/draw.js): the leader's pen and its tools, at the right edge of the screen, and the
   drawing, over everything, on every screen in the room */
.lv-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147483505; pointer-events: none; }
.lv-canvas[hidden] { display: none; }
.lv-canvas.is-drawing { pointer-events: auto; touch-action: none; cursor: crosshair; }
.lv { position: fixed; right: max(8px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); z-index: 2147483506; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--sans); }
.lv[hidden], .lv-tools[hidden] { display: none; }
.lv-pen { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--ink); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5); cursor: pointer; }
.lv-pen svg { width: 21px; height: 21px; }
.lv-pen[aria-pressed="true"] { border-color: #D9A62E; background: #F2C14E; color: #2E2B27; }
.lv-tools { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 6px; border-radius: 999px; background: rgba(28, 24, 20, 0.84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6); }
.lv-c { width: 26px; height: 26px; padding: 0; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: var(--c); cursor: pointer; }
.lv-c.is-on { border-color: #FFFFFF; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); }
.lv-t { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%; background: none; color: #FFFFFF; cursor: pointer; }
.lv-t svg { width: 18px; height: 18px; }
.lv-t.is-on { background: #F2C14E; color: #1c1a17; } /* (the eraser, on) */
.lv-canvas.is-erasing { cursor: cell; }
/* the glass over the pen (live/draw.js, on reader/hold.js's): over the ink, and over the pen's own tools */
.br-loupe.lv-loupe { z-index: 2147483507; border-radius: 24px; }
.lv-loupe > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the pen pressed and held, being moved (Kit.movable): lifted */
.lv.is-moving .lv-pen { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 70%, transparent), 0 14px 28px -10px rgba(0, 0, 0, 0.5); transform: scale(1.06); }
.lv-pen { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none; }
/* the pen's ?: what each tool does, and Show me (live/draw.js), the thought flow diagram's list (study/guide.css's tf-help) in a card */
.lv-help { position: fixed; z-index: 2147483508; max-height: calc(100% - 20px); overflow-y: auto; box-sizing: border-box; padding: 10px 14px 14px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); color: var(--ink); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.45); font-family: var(--sans); }
.lv-help[hidden] { display: none; }
.lv-help-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.lv-help-h b { font: italic 600 19px var(--serif); }
.lv-help .tf-help div { grid-template-columns: 1fr; gap: 4px; margin-bottom: 6px; }
.lv-help .tf-help dt b { display: inline-flex; align-items: center; gap: 6px; }
.lv-help .tf-help dt svg { width: 16px; height: 16px; color: var(--gold); }
/* connecting marks: what to do, and Done, at the top */
.lv-conn { position: fixed; z-index: 2147483508; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.45); font: 600 14px var(--sans); white-space: nowrap; }
.lv-conn[hidden] { display: none; }
@media (hover: hover) { .lv-t:hover { background: rgba(255, 255, 255, 0.14); } }


/* a side trip from a devotion's step (the Walk card, the 3D model): a quiet pill, the devotion's color only on its
   icon and arrow; the solid buttons are kept for the devotion's own next step */
#devotions .fd-btn.gold.dv-walk-go, #devotions .fd-btn.gold.dv-m3-go, .dv-sheet .fd-btn.gold.dv-walk-go, .dv-sheet .fd-btn.gold.dv-m3-go, .dv-panel .fd-btn.gold.dv-walk-go, .dv-panel .fd-btn.gold.dv-m3-go,
body.site-dark #devotions .fd-btn.gold.dv-walk-go, body.site-dark #devotions .fd-btn.gold.dv-m3-go, body.site-dark .dv-panel .fd-btn.gold.dv-walk-go, body.site-dark .dv-panel .fd-btn.gold.dv-m3-go {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--bg-raised); color: var(--ink); font: 700 14.5px var(--sans); box-shadow: none; }
.dv-walk-go span, .dv-m3-go svg { color: var(--dv, var(--gold)); }
@media (hover: hover) { .dv-walk-go:hover, .dv-m3-go:hover { border-color: color-mix(in srgb, var(--dv, var(--gold)) 55%, var(--rule)); } }

/* between Back and Next: the step's name, and under it where it comes (1 of 5); a long name ends in … rather than wrapping */
.dv-foot .dv-count { flex: 1; min-width: 0; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; border-radius: 0; background: none; color: var(--muted); text-align: center; }
.dv-foot .dv-count b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13.5px/1.25 var(--sans); color: var(--ink); }
.dv-foot .dv-count small { font: 600 11.5px/1.2 var(--sans); color: var(--muted); }
.dv-foot .dv-count::before { font: 800 10px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.dv-sheet.has-turn .dv-foot .dv-count::before { content: 'Your turn'; }
.dv-sheet.is-leading .dv-foot .dv-count::before { content: 'You’re leading'; }

/* ---- Devotions together, the same as House Church's gatherings (live/live.css), in Devotions' colors: the raised hands
   under the devotion's head, a question put up on every screen, what's put to everyone over the devotion and the page,
   the leader's tools in the head and the room's bar, activities made ready while preparing, and your own notes */
.dv-sheet, .dv-panel-scrim, #devotions { --lt-accent: var(--dv); --lt-honey: var(--dv-2); --lt-peach: var(--dv-soft); }
.dv-app { position: relative; }
.dv-sheet-head, .dv-foot, #devotions .dv-app-head { position: relative; z-index: 4; }
.dv-sheet .lt-hands { padding: 0 18px 6px; }
.dv-sheet-head > .lt-tool { width: 34px; height: 34px; border: 1px solid var(--rule); background: var(--bg-raised); }
.dv-sheet-head > .lt-tool svg { width: 18px; height: 18px; color: var(--dv, var(--gold)); }
.dv-sheet-head > .lt-tool.is-up { border-color: var(--gold); background: var(--gold); }
.dv-sheet-head > .lt-tool.is-up svg { color: #fff; }
.dv-roombar-acts .lt-tool { width: 36px; height: 36px; background: var(--bg-raised); border: 1px solid var(--rule); }
.dv-roombar-acts .lt-tool svg { width: 18px; height: 18px; color: var(--dv); }
.dv-roombar .lt-hands { flex-basis: 100%; justify-content: flex-start; padding: 8px 0 0; }
.dv-roombar { flex-wrap: wrap; }
.dv-qs li > span { display: inline; }
.dv-qs li.is-up > span { box-shadow: inset 0 -0.45em 0 color-mix(in srgb, var(--dv-2) 35%, transparent); }
.dv-qup { display: inline-flex; vertical-align: middle; margin: 0 0 0 8px; padding: 5px 11px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--ink); font: 700 12px var(--sans); cursor: pointer; }
.dv-qs li.is-up .dv-qup { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, var(--bg-raised)); }
.dv-qs .lt-qnote { display: inline-grid; vertical-align: middle; margin-left: 8px; width: 30px; height: 30px; }
.dv-qs .lt-mine { font-size: 16px; }
.dv-step + .lt-lready, .dv-step + .lt-field, .dv-step ~ .lt-prays { margin-top: 18px; }
.dv-prep-acts { margin: 10px 0 4px; }
.dv-prep-acts ul { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.dv-prep-acts li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.6); font: 14px/1.35 var(--sans); }
.dv-prep-acts li > span { flex: 1; min-width: 0; }
.dv-prep-acts li b { margin-right: 4px; }
.dv-prep-acts li small { display: block; font-size: 12px; opacity: 0.75; }
.dv-prep-acts .fd-btn { min-height: 34px; font-size: 13px; }
.dv-toast-act { pointer-events: auto; margin-left: 14px; padding: 0; border: none; background: none; color: var(--gold); font: 800 14px var(--sans); cursor: pointer; }
html.dv-tv .lt-card, html.dv-tv .lt-spot-card { width: min(960px, 100%); max-width: 960px; }
html.dv-tv .lt-q, html.dv-tv .lt-spot-card p { font-size: clamp(34px, 3.4vw, 52px); }
.dv-toast { z-index: 2147483500; } /* (over its window, however high the window's been lifted: nav/layers.js; as House Church's) */
.dv-foot-tools { flex: none; display: flex; gap: 8px; }
.dv-foot-tools .lt-tool { width: 40px; height: 40px; border: 1px solid var(--rule); background: var(--bg-raised); }
.dv-foot-tools .lt-tool svg { color: var(--dv); }
.dv-foot-tools .lt-tool.is-up { border-color: var(--gold); background: var(--gold); }
.dv-foot-tools .lt-tool.is-up svg { color: #fff; }
.dv-roombar.is-live .dv-roombar-t { flex: 1 1 230px; } /* (the words first; on a phone, the buttons under them, not the words squeezed to a word a line) */
.dv-roombar.is-live .dv-roombar-acts { flex: 1 1 auto; justify-content: flex-start; }
.dv-roombar .lt-hint { flex-basis: 100%; }

/* ---- history devotions (devotions/history.js): choosing how, which, and how often; then the next one, and the rest */
.dv-hist-set, .dv-hist-now { display: flex; flex-direction: column; gap: 10px; }
.dv-hist-set .ui-label { margin: 6px 0 0; }
.dv-hist-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-hist-pick { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; text-align: left; }
.dv-hist-pick b { font: 700 13.5px/1.25 var(--sans); }
.dv-hist-pick small { font: 600 11.5px var(--sans); color: var(--muted); }
.dv-hist-days { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-hist-days .ui-filter { min-width: 46px; justify-content: center; }
.dv-hist-sum { margin: 2px 0 0; color: var(--muted); }
.dv-hist-go { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dv-hist-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dv-hist-plan > span { display: flex; flex-direction: column; min-width: 0; }
.dv-hist-plan b { font: italic 600 18px/1.25 var(--serif); }
.dv-hist-plan small { font: 600 12.5px var(--sans); color: var(--muted); }
.dv-hist-next { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--bg-raised); }
.dv-hist-next b { font: 700 16px/1.3 var(--sans); }
.dv-hist-next small { font: 13px/1.4 var(--sans); color: var(--muted); }
.dv-hist-next .dv-hist-when { font: 800 11px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.dv-hist-next .ui-btn { margin-top: 8px; }
.dv-story-img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 50%; margin: 0 0 10px; }
.dv-story-k { font: 800 11.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.dv-story-q { padding: 10px 12px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); border-radius: 0 10px 10px 0; }
.dv-story-h { font: 700 15px var(--sans); margin: 16px 0 6px; }