/* Today's Path */
.path-head{margin:6px 0 12px}
.path-head .vhead{margin:0}
.path-date{margin:2px 0 0;color:var(--muted);font-weight:600}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;padding:3px;background:var(--surface);flex:none}
.seg-b{appearance:none;border:0;background:none;color:var(--muted);font:600 14px/1 var(--sans, inherit);padding:9px 14px;border-radius:999px;min-height:36px;cursor:pointer}
.seg-b[aria-checked="true"]{background:var(--accent);color:var(--on-accent,#fff)}
.seg-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.path-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 8px}
.path-hint{margin:0 0 12px;color:var(--muted);font-style:italic}
.path-chip{font:700 11px/1 var(--cond, inherit);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--soft, rgba(0,0,0,.06));color:var(--ink)}

.scene-wrap{position:relative;overflow:hidden;border-radius:18px;background:#1b2a22;margin:0 0 10px;contain:layout paint;isolation:isolate}
.scene-svg{display:block;position:absolute;left:0;top:0}
@media (max-width:700px){ .scene-wrap{max-width:none !important;width:auto;margin-left:calc(-1 * max(14px, env(safe-area-inset-left, 0px)));margin-right:calc(-1 * max(14px, env(safe-area-inset-right, 0px)));border-radius:0} }
@media (min-width:900px){ .scene-wrap{max-width:620px;margin-left:auto;margin-right:auto;box-shadow:0 18px 50px -24px rgba(0,0,0,.45)} }

.pstops{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.pstops li{position:absolute;width:0;height:0}
.pstop{pointer-events:auto;position:absolute;top:-22px;width:max-content;max-width:none !important;display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;margin:0;color:#fff;cursor:pointer;text-align:left;font:inherit;-webkit-tap-highlight-color:transparent}
.pstop.r{left:-22px}
.pstop.l{right:-22px;flex-direction:row-reverse;text-align:right}
.pdot{flex:none;width:44px;height:44px;border-radius:50%}
.pstop:focus-visible .pdot{outline:3px solid #FFE08A;outline-offset:-4px}
.pstop:focus-visible .plabel{outline:2px solid #FFE08A}
.plabel{display:flex;flex-direction:column;gap:1px;padding:5px 9px 6px;border-radius:10px;background:rgba(14,20,17,.8);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.plabel b{font:700 13.5px/1.2 var(--sans, inherit);color:#fff;overflow-wrap:anywhere}
.plabel small{font:600 11px/1.25 var(--sans, inherit);color:rgba(255,255,255,.78);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pstop.l .plabel small{justify-content:flex-end}
.adot2{width:7px;height:7px;border-radius:50%;flex:none}
.pcheck{color:#FFE08A;font-weight:800}
.pstop.done .plabel{background:rgba(64,46,10,.62);box-shadow:0 0 0 1px rgba(255,214,120,.35),0 2px 12px rgba(255,190,80,.25)}
.pstop.here .plabel{box-shadow:0 0 0 1.5px rgba(255,236,170,.8),0 2px 10px rgba(0,0,0,.25)}
.pstop:active .plabel{transform:scale(.97)}

.path-actions{display:flex;justify-content:space-between;gap:12px;margin:4px 0 14px;flex-wrap:wrap}
.grace{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,#2B2216,#3A2A16);color:#F7EBD3;margin:0 0 18px;border:1px solid rgba(255,200,110,.25)}
.grace .cel-kicker{color:#F2B35A}
.grace h3{margin:2px 0 4px;font:800 20px/1.15 var(--cond, inherit);text-transform:uppercase;letter-spacing:.01em}
.grace p{margin:0;color:#E6D6B8}
.grace .btn{flex:none;background:#F2B35A;color:#2B2216;border-color:#F2B35A}

/* arrange */
.arr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.arr-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.arr-item.dragging{border-color:var(--accent);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.arr-grip{font-size:20px;color:var(--muted);cursor:grab;padding:8px 6px;touch-action:none;user-select:none}
.arr-name{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.arr-name small{display:block;font-weight:600;color:var(--muted)}
.arr-btns{display:flex;gap:4px}
.arr-b{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.arr-b[disabled]{opacity:.3;cursor:default}
.arr-fixed{margin:10px 0 12px;color:var(--muted);font-size:14px}

/* ambient motion */
.scene-svg .drift{animation:rvDrift var(--d) ease-in-out infinite alternate}
@keyframes rvDrift{to{transform:translateX(var(--dx))}}
.scene-svg .shimmer{animation:rvShim 3.6s ease-in-out infinite}
.scene-svg .shimmer:nth-child(2n){animation-delay:-1.4s}.scene-svg .shimmer:nth-child(3n){animation-delay:-2.3s}
@keyframes rvShim{0%,100%{opacity:.15}50%{opacity:.7}}
.scene-svg .twinkle{animation:rvTw 2.8s ease-in-out infinite}
.scene-svg .twinkle:nth-child(3n){animation-delay:-1.1s}
@keyframes rvTw{0%,100%{opacity:.25}50%{opacity:1}}
.scene-svg .fire{transform-box:fill-box;transform-origin:50% 100%;animation:rvFire .9s ease-in-out infinite alternate}
@keyframes rvFire{0%{transform:scale(1,1)}50%{transform:scale(.92,1.08) skewX(2deg)}100%{transform:scale(1.04,.95) skewX(-2deg)}}
.scene-svg .fire-glow{animation:rvGlow 1.6s ease-in-out infinite alternate}
.scene-svg .stop-glow{animation:rvGlow 3.2s ease-in-out infinite alternate}
@keyframes rvGlow{from{opacity:.8}to{opacity:1}}
.scene-svg .flame{transform-box:fill-box;transform-origin:50% 100%;animation:rvFire 1.1s ease-in-out infinite alternate}
.scene-svg .smoke{animation:rvSmoke 4s ease-in-out infinite}
@keyframes rvSmoke{0%{opacity:0;transform:translateY(0)}40%{opacity:.6}100%{opacity:0;transform:translateY(-10px)}}
.scene-svg .wx.fall{animation:rvFall var(--d) linear infinite;animation-delay:var(--del)}
@keyframes rvFall{from{transform:translate(0,0)}to{transform:translate(var(--dx),var(--dy))}}
.scene-svg .wx.spin{transform-box:fill-box}
.scene-svg .wx.float{animation:rvFloat var(--d) ease-in-out infinite alternate;animation-delay:var(--del)}
@keyframes rvFloat{to{transform:translate(var(--dx),var(--dy))}}
.scene-svg .spark-dot{animation:rvSpark 1s ease-out forwards}
@keyframes rvSpark{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.3)}}
.scene-svg .traveler{transition:opacity .5s}
@media (prefers-reduced-motion: reduce){
  .scene-svg *{animation:none !important;transition:none !important}
  .scene-svg .wx{display:none}
}

/* This week's calling */
.calling{display:flex;flex-direction:column;gap:6px}
.calling.empty{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.calhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.caltext{font:700 18px/1.25 var(--sans, inherit);color:var(--ink);overflow-wrap:anywhere}
.caldays{display:flex;gap:6px;margin:4px 0 2px}
.caldays i{flex:1;max-width:40px;height:30px;border-radius:9px;background:var(--soft, rgba(0,0,0,.06));display:flex;align-items:center;justify-content:center;font-style:normal}
.caldays i span{font:700 11px/1 var(--cond, inherit);color:var(--muted)}
.caldays i.on{background:#F2B35A}
.caldays i.on span{color:#3A2A10}
.caldays i.now{box-shadow:inset 0 0 0 2px var(--accent)}
.calnote{margin:0;color:var(--muted)}
.calling .btn{align-self:flex-start;margin-top:4px}
.calopts{display:flex;flex-direction:column;gap:8px}
.calopt{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:600 15px/1.3 var(--sans, inherit);cursor:pointer}
.calopt:hover,.calopt:focus-visible{border-color:var(--accent)}
.calq{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:var(--soft, rgba(0,0,0,.05));margin:0 0 14px}
.calq .pill{align-self:flex-start}

/* Zoomed in: the walk */
.walk-wrap{position:relative;overflow:hidden;border-radius:18px;background:#1b2a22;touch-action:pan-y;contain:layout paint;isolation:isolate;outline:none}
.walk-wrap:focus-visible{box-shadow:0 0 0 3px var(--accent)}
@media (max-width:700px){ .walk-wrap{max-width:none !important;width:auto;margin-left:calc(-1 * max(14px, env(safe-area-inset-left, 0px)));margin-right:calc(-1 * max(14px, env(safe-area-inset-right, 0px)));border-radius:0} }

.walk-svg{display:block;position:absolute;left:0;top:0}
.zoom-btn{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:6px;padding:8px 12px 8px 10px;min-height:40px;border:0;border-radius:999px;background:rgba(14,20,17,.6);color:#fff;font:700 13px/1 var(--sans, inherit);cursor:pointer;z-index:2}
.zoom-btn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.zoom-btn:focus-visible,.walk-nav:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}
.walk-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(14,20,17,.45);color:#fff;font:400 28px/1 var(--sans, inherit);cursor:pointer;z-index:2;opacity:.85}
.walk-nav.l{left:8px}.walk-nav.r{right:8px}
.walk-nav[disabled]{opacity:0;pointer-events:none}
.walk-strip{list-style:none;display:flex;align-items:center;justify-content:center;gap:0;margin:12px 0 10px;padding:0;flex-wrap:nowrap}
.walk-strip li{display:flex;align-items:center;flex:0 1 auto}
.walk-strip li + li::before{content:"";display:block;width:clamp(6px, 2.4vw, 18px);height:2px;background:var(--line)}
.wmark{width:30px;height:30px;border-radius:50%;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.wmark i{display:block;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--muted);box-sizing:border-box}
.wmark.k-stone i{border-color:var(--c, var(--muted))}
.wmark.done i{background:#F2B35A;border-color:#E09A30;box-shadow:0 0 8px rgba(242,179,90,.7)}
.wmark.here i{width:18px;height:18px;border-width:3px;border-color:var(--ink)}
.wmark.on i{outline:2px solid var(--accent);outline-offset:3px}
.wmark:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.walk-card{margin:0 0 12px;border-top:4px solid var(--wtint, var(--accent))}
.wc-kick{display:flex;justify-content:space-between;gap:10px;font:700 12px/1.2 var(--cond, inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wc-title{margin:6px 0 4px;font:800 22px/1.15 var(--cond, inherit);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.wc-sub{margin:0 0 10px;color:var(--muted)}
.walk-card .btnrow{margin-top:10px}
#pathView{transition:background-color .8s}
.walk-svg .traveler-fig.walking{transform-box:fill-box;transform-origin:50% 100%;animation:rvBob .5s ease-in-out infinite alternate}
@keyframes rvBob{to{transform:translateY(-2px)}}
@media (prefers-reduced-motion: reduce){ .walk-svg *{animation:none !important} #pathView{transition:none} }
.walk-wrap[hidden],.walk-strip[hidden],.walk-card[hidden],.scene-wrap[hidden]{display:none !important}

/* the stage: scene and card as one unit, markers on the scene's bottom edge */
.path-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 0 12px}
.path-top .path-head{margin:0}
.path-hint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 12px;color:var(--muted);font-style:italic}
.path-hint .path-chip{font-style:normal}
.walk-stage{margin:0 0 14px;position:relative}
.walk-stage .walk-wrap{border-radius:18px 18px 0 0}
.walk-stage .walk-card{margin:0;border-radius:0 0 18px 18px;border-top:4px solid var(--wtint, var(--accent))}
@media (max-width:700px){
  .walk-stage{margin-left:calc(-1 * max(14px, env(safe-area-inset-left, 0px)));margin-right:calc(-1 * max(14px, env(safe-area-inset-right, 0px)))}
  .walk-stage .walk-wrap{margin:0;border-radius:0}
  .walk-stage .walk-card{border-radius:0;border-left:0;border-right:0;padding-left:max(18px, env(safe-area-inset-left, 0px));padding-right:max(18px, env(safe-area-inset-right, 0px))}
}
@media (min-width:900px){ .walk-stage{max-width:980px;margin-left:auto;margin-right:auto} .walk-stage .walk-wrap{box-shadow:0 18px 50px -28px rgba(0,0,0,.5)} }
.walk-wrap .walk-strip{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);margin:0;padding:4px 8px;border-radius:999px;background:rgba(14,20,17,.5);z-index:2;max-width:calc(100% - 20px)}
.walk-wrap .walk-strip li + li::before{background:rgba(255,255,255,.35);width:clamp(4px, 1.6vw, 14px)}
.walk-wrap .wmark{width:28px;height:28px}
.walk-wrap .wmark i{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.75)}
.walk-wrap .wmark.k-stone i{border-color:var(--c, #fff)}
.walk-wrap .wmark.done i{background:#F2B35A;border-color:#FFD98A}
.walk-wrap .wmark.here i{border-color:#fff;background:rgba(255,255,255,.35)}
.walk-wrap .wmark.on i{outline-color:#FFE08A}
.walk-wrap .walk-nav{top:calc(50% - 22px)}

/* List view on phones: the new wrappers join 2.0's day order */
@media (max-width:899px){ #listBody{order:9} #homeCalling{order:9} #homeJourney{order:0} .home-cols #homePray{order:-1} .home-cols .reflect.evening{order:-2} }
/* desktop header: room for the logo and every tab */
@media (min-width:900px) and (max-width:1599px){ .top .sync{display:none} }

/* path levels */
.lvopts{display:grid;gap:10px}
@media (min-width:700px){ .lvopts{grid-template-columns:repeat(3,1fr)} }
.lvopt{display:flex;flex-direction:column;gap:5px;text-align:left;padding:14px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.lvopt.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent)}
.lvopt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lvopt .lvname{font:800 18px/1.1 var(--cond, inherit);text-transform:uppercase;letter-spacing:.02em}
.lvopt .lvline{font-size:14px;line-height:1.35}
.lvopt .lvverse{font-size:12.5px;color:var(--muted);font-style:italic}
.lvfocus[hidden]{display:none}
.list-arrange{margin:0 0 8px;text-align:right}
.wc-emblem{font-style:italic}
.lvnudge{border-left:4px solid #F2B35A}

/* drag and drop in Arrange my path */
.arr-item{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;position:relative;transition:box-shadow .15s}
.arr-item.dragging{cursor:grabbing;z-index:2;box-shadow:0 10px 24px rgba(0,0,0,.22);transition:none}
.arr-item.drop-before::before{content:"";position:absolute;left:8px;right:8px;top:-5px;height:3px;border-radius:2px;background:var(--accent)}
.arr-grip{background:none;border:0;font-size:22px;color:var(--muted);padding:8px 8px;cursor:grab;min-width:44px;min-height:44px;touch-action:none}
.arr-grip:focus-visible{outline:2px solid var(--accent);border-radius:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scene-svg .bypass{animation:none}

/* the flock trots along behind the shepherd */
.walk-svg .lamb.walking{transform-box:fill-box;transform-origin:50% 100%;animation:rvBob .38s ease-in-out infinite alternate}
.walk-svg .lamb2.walking{animation-delay:-.15s}.walk-svg .lamb3.walking{animation-delay:-.27s}

/* dragging on the timeline and the map */
.walk-strip .wmark{touch-action:none}
.walk-strip li{transition:transform .12s}
.walk-strip li.wdrag{transition:none;z-index:3;position:relative}
.walk-strip li.wdrag .wmark i{transform:scale(1.35);box-shadow:0 0 0 3px #FFE08A}
.walk-strip li.wdrop .wmark i{box-shadow:0 0 0 3px rgba(255,224,138,.7)}
.pstops li.pdrag{z-index:5}
.pstops li.pdrag .plabel{box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 0 2px #FFE08A;transform:scale(1.04)}
.pstop.pdrop .plabel{box-shadow:0 0 0 2px #FFE08A,0 0 18px rgba(255,214,120,.6)}
@media (hover:hover){ .pstop{cursor:grab} }

/* level switch on Path and List */
.lvswitch{display:flex;gap:4px;padding:4px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);margin:6px 0 4px;max-width:520px}
.lvs-b{flex:1;appearance:none;border:0;background:none;border-radius:999px;padding:9px 8px;min-height:40px;font:700 13px/1.1 var(--sans, inherit);color:var(--muted);cursor:pointer;white-space:nowrap}
.lvs-b.on{background:var(--accent);color:var(--on-accent,#fff)}
.lvs-b:focus-visible,.lvs-info:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lvs-info{flex:none;width:36px;height:36px;margin:2px;border-radius:50%;border:1.5px solid var(--line);background:none;color:var(--muted);font-weight:800;cursor:pointer}
/* emblem details */
.emtip{position:absolute;z-index:60;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:#1E2A24;color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.35);max-width:240px;font-size:14px}
.emtip b{font-size:14.5px}
.emtip a{color:#FFE08A;font-weight:700}
.em-hit{position:absolute;width:80px;height:80px;border:0;background:none;border-radius:50%;cursor:help;z-index:2}
.em-hit:focus-visible{outline:3px solid #FFE08A}
.em-link{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb, currentColor 40%, transparent)}

/* List view buckets */
.buckets{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto 18px}
.bucket{border:1.5px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.bucket[hidden]{display:none}
.bhead{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:0;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.bhead:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bhead .bt{flex:1;display:flex;flex-direction:column;gap:2px}
.bhead .bt b{font:800 18px/1.1 var(--cond, inherit);text-transform:uppercase;letter-spacing:.03em}
.bhead .bt small{color:var(--muted);font-size:13px}
.bstat{font:700 13px/1 var(--sans, inherit);color:var(--muted);white-space:nowrap}
.bucket.done .bstat{color:var(--accent)}
.bucket.done{border-color:color-mix(in srgb, var(--accent) 35%, var(--line))}
.bhead .achev{transition:transform .15s}
.bhead[aria-expanded="false"] .achev{transform:rotate(-90deg)}
.bbody{padding:0 16px 16px}
.bbody[hidden]{display:none}
.bbody .card{margin-bottom:0;border-radius:12px}
.bbody #tally,.bbody #meter{display:none}
.bbody #groups > h2.sech:first-child{display:none}
.brow1{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0}
.bbody #homeCalling .card,.bbody #homeJourney .card{margin-bottom:10px}
.bbody .reflect h2{display:none}

/* zoomed in: everything on one screen */
body.walk-in #v-today .path-top{margin:2px 0 8px}
body.walk-in #v-today .vhead{font-size:clamp(28px, 7vw, 46px);line-height:1}
body.walk-in #v-today .path-hint{display:none}
.path-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.path-controls #dateSlot{flex:1 1 320px;min-width:0}
.path-controls #dateSlot .datebar{margin:0}
.path-controls #lvSwitchSlot{flex:0 1 auto}
.path-controls .lvswitch{margin:0}
@media (max-width:560px){ .path-controls #lvSwitchSlot{flex:1 1 100%} .lvswitch{max-width:none} .lvs-b{font-size:12.5px;padding:8px 4px} }
/* the action panel sits on the scene, above the markers */
.walk-stage .walk-card{position:absolute;left:12px;right:12px;bottom:64px;z-index:3;margin:0 auto;max-width:640px;padding:12px 14px;border:0;border-radius:16px;
  background:rgba(14,20,17,.86);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.3);border-top:3px solid var(--wtint, var(--accent))}
.walk-stage .walk-card .wc-kick{color:rgba(255,255,255,.72);font-size:11.5px}
.walk-stage .walk-card .wc-title{font-size:clamp(18px, 4.6vw, 24px);margin:4px 0 2px;color:#fff}
.walk-stage .walk-card .wc-sub{color:rgba(255,255,255,.8);margin:0 0 6px;font-size:14px}
.walk-stage .walk-card .wc-sub a{color:#FFE08A}
.walk-stage .walk-card .btnrow{margin-top:8px;gap:8px;flex-wrap:wrap}
.walk-stage .walk-card .btn{min-height:40px;padding:8px 14px;font-size:14px}
.walk-stage .walk-card .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
.walk-stage .walk-card .linkbtn{color:#fff}
.walk-stage .walk-wrap{border-radius:18px}
@media (max-width:700px){ .walk-stage .walk-wrap{border-radius:0} .walk-stage .walk-card{left:10px;right:10px} }
/* the season and hint as a small caption on the scene */
.walk-cap{position:absolute;left:12px;top:12px;right:150px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:4px;color:#fff;font-style:italic;font-size:13px;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.walk-cap .path-chip{font-style:normal;background:rgba(14,20,17,.55);color:#fff}
.walk-cap span:last-child{max-width:340px}
@media (max-width:420px){ .walk-cap span:last-child{display:none} }

/* header: Index, Quick add and Help next to the logo; no tab bar */
.top .tabs{display:none}
.top .brand{cursor:pointer}
.idxbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.idxbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.idxbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
header.top{display:flex!important;align-items:center;gap:10px;flex-wrap:nowrap;padding-top:max(8px, env(safe-area-inset-top, 0px));padding-bottom:8px}
header.top .wrap{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;padding-top:0!important;padding-bottom:0!important;margin:0;max-width:none}
.topbtns{flex:none;display:flex;align-items:center;gap:8px;padding-right:max(14px, env(safe-area-inset-right, 0px))}
.topbtns .fab,.topbtns .helpbtn{position:static!important;margin:0!important;transform:none!important;width:44px;height:44px}
@media (min-width:900px){ header.top{padding-left:max(24px, env(safe-area-inset-left, 0px))} }
@media (max-width:400px){ .top .brand .word{font-size:17px} }
/* the Index */
.pidx{display:flex;flex-direction:column;gap:6px}
.pidx-i{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.pidx-i svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pidx-i span{display:flex;flex-direction:column;gap:2px}
.pidx-i b{font:800 17px/1.1 var(--cond, inherit);text-transform:uppercase;letter-spacing:.03em}
.pidx-i small{color:var(--muted);font-size:13px}
.pidx-i.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--surface))}
.pidx-i:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* back to the Path from any other page */
.backpath{display:inline-block;margin:4px 0 8px;padding:6px 0;border:0;background:none;color:var(--accent);font:700 15px/1.2 var(--sans, inherit);cursor:pointer}
.backpath:focus-visible{outline:2px solid var(--accent);border-radius:6px}
header.top .wrap{flex-wrap:nowrap!important}
header.top .wrap > .brand{order:1;flex:0 1 auto;min-width:0}
header.top .wrap > .sync{order:2;flex:0 1 auto;min-width:0}
header.top .wrap > .topbtns{order:3;margin-left:auto;padding-right:0}
header.top .wrap{padding-left:max(14px, env(safe-area-inset-left, 0px))!important;padding-right:max(14px, env(safe-area-inset-right, 0px))!important}
@media (max-width:899px){ header.top .wrap > .sync{display:none} }
.wc-emblem{font-size:13.5px}
.wc-emblem .em-pre{font-style:normal;opacity:.7;margin-right:2px}

/* the large milestone card (More) */
#sheet.lg{max-height:92vh;max-height:92dvh}
@media (min-width:760px){ #sheet.lg{max-width:760px} }
.mcmore{margin-top:16px;border-top:1.5px solid var(--line);padding-top:6px}
.mcsec{border-bottom:1px solid var(--line)}
.mcsec > summary{list-style:none;cursor:pointer;padding:14px 2px;font:800 15px/1.2 var(--cond, inherit);text-transform:uppercase;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:center}
.mcsec > summary::-webkit-details-marker{display:none}
.mcsec > summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s;margin-right:4px}
.mcsec[open] > summary::after{transform:rotate(-135deg)}
.mcsec > summary:focus-visible{outline:2px solid var(--accent);border-radius:6px}
.mcbody{padding:0 2px 16px}
.mcbody textarea{width:100%;margin:6px 0 10px}
.mcrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.mcrow:last-child{border-bottom:0}
.mcrow > span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.mcgoal{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px}
.mcgoal > span:last-child{display:flex;flex-direction:column}
.mcfull{margin:14px 0 2px;text-align:right}

.mcfirst{margin:0 0 10px;font-style:italic;color:var(--muted)}
.mcwhy{margin:0;font-size:14px;color:var(--muted)}
.mctimer{display:flex;align-items:center;gap:14px}
.mctime{font:800 26px/1 var(--cond, inherit);font-variant-numeric:tabular-nums}
.mcsaved{margin:2px 0 0;min-height:1.2em;font-size:12.5px}
.lnotes{font-style:italic}
/* while a card is open, the panel on the scene steps aside */
body.sheet-on .walk-stage .walk-card{opacity:0;pointer-events:none;transition:opacity .15s}
/* an area's last 14 days in the habit card: tap a day for what you did */

/* close button on every card (sheets and celebration cards) */
.sheet-x{position:sticky;top:0;float:right;z-index:4;width:40px;height:40px;margin:-6px -6px 0 10px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sheet-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.sheet-x:hover{background:color-mix(in srgb, var(--ink) 8%, var(--surface))}
.sheet-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cel-card{position:relative}
.cel-x{position:absolute;top:12px;right:12px;float:none;margin:0}
@keyframes rvFlicker{0%{transform:scale(1,1)}50%{transform:scale(.94,1.05)}100%{transform:scale(1.03,.97)}}

.donestat{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font:800 16px/1 var(--cond, inherit);text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}
.mcwhyrow{display:flex;align-items:flex-start;gap:14px}
.mcemblem{flex:none;width:72px;height:66px;overflow:visible}
/* the biblical place you're passing through, named on the scene */
.walk-place{position:absolute;left:12px;top:44px;z-index:2;max-width:calc(100% - 24px);padding:4px 10px;border-radius:999px;background:rgba(14,20,17,.55);color:#FFE7A3;font:700 13px/1.3 var(--sans, inherit);letter-spacing:.01em;text-shadow:none}
.walk-place[hidden]{display:none}
#walk:has(.walk-place:not([hidden])) .walk-cap span:last-child{display:none}
/* the water moves gently */
/* the water moves: distinct swells drift one way and the light the other, glints shimmer. Each layer
   reads the scene's shared clock (--wt), so a wave rebuilt mid-motion continues instead of restarting. */
@media (prefers-reduced-motion: no-preference){
  .walk-svg .wvA{animation:rvSwellA 5.5s ease-in-out infinite alternate;animation-delay:calc(var(--wt, 0) * -1s)}
  .walk-svg .wvB{animation:rvSwellB 4.2s ease-in-out infinite alternate;animation-delay:calc(var(--wt, 0) * -1s)}
  .walk-svg .wv{animation:rvGlint 2.6s ease-in-out infinite alternate;animation-delay:calc(var(--wt, 0) * -1s)}
  .walk-svg .wvS{animation:rvShine 1.8s ease-in-out infinite alternate;animation-delay:calc(var(--wt, 0) * -1s)}
}
.walk-svg .wvA,.walk-svg .wvB{stroke-width:1.6}
@keyframes rvSwellA{from{transform:translate(-18px, 0)}to{transform:translate(18px, 2.5px)}}
@keyframes rvSwellB{from{transform:translate(14px, 1.5px)}to{transform:translate(-14px, -1.5px)}}
@keyframes rvGlint{from{opacity:.4;transform:translateX(-5px)}to{opacity:1;transform:translateX(5px)}}
@keyframes rvShine{from{opacity:.35}to{opacity:1}}
.wc-passage{font-size:13.5px;margin:2px 0 4px}
.walk-stage .walk-card .wc-passage a{color:#FFE08A}
.ref-link{white-space:nowrap}
/* the shepherd at rest: breathing, lifting the lantern now and then; the lambs graze and look around */
@media (prefers-reduced-motion: no-preference){
  .walk-svg .traveler-fig.idle{transform-box:fill-box;transform-origin:50% 100%;animation:rvBreath 3.6s ease-in-out infinite}
  .walk-svg .traveler-fig.idle .lantern{animation:rvLift 9s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
  .walk-svg .lhead{transform-box:fill-box;transform-origin:50% 50%}
  .walk-svg .lamb:not(.walking) .lh0{animation:rvGraze 7s ease-in-out infinite}
  .walk-svg .lamb:not(.walking) .lh1{animation:rvLook 6s ease-in-out infinite 1.2s}
  .walk-svg .lamb:not(.walking) .lh2{animation:rvGraze 8s ease-in-out infinite 3s}
  .walk-svg .lamb.asleep{transform-box:fill-box;transform-origin:50% 100%;animation:rvBreath 4.4s ease-in-out infinite}
}
@keyframes rvBreath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.018)}}
@keyframes rvLift{0%,80%,100%{transform:translateY(0)}86%,94%{transform:translateY(-3px)}}
@keyframes rvGraze{0%,55%,100%{transform:translate(0,0)}62%,90%{transform:translate(.6px,2.4px)}}
@keyframes rvLook{0%,60%,100%{transform:translateX(0)}66%,74%{transform:translateX(-1.4px)}80%,88%{transform:translateX(1.4px)}}
/* room for a host's badge at the bottom of the screen (none: --badge-lift is 0) */
body.badge-on main{padding-bottom:calc(var(--badge-lift, 0px) + 16px)}
body.badge-on #sheet{padding-bottom:calc(var(--badge-lift, 0px) + 18px)}
body.badge-on .walk-stage{margin-bottom:var(--badge-lift, 0px)}
body.badge-on .toast{bottom:calc(var(--badge-lift, 0px) + 16px) !important}
body.badge-on #celebrate .cel-card{margin-bottom:var(--badge-lift, 0px)}
/* a phone on its side: the header becomes a rail on the left, and the Path scene fills the screen */
@media (orientation: landscape) and (max-height: 520px){
  header.top{position:fixed!important;left:0;top:0;bottom:0;width:66px;height:auto;flex-direction:column;padding:max(8px, env(safe-area-inset-top, 0px)) 0 8px max(6px, env(safe-area-inset-left, 0px))!important;border-bottom:0;border-right:1px solid var(--line);z-index:30}
  header.top .wrap{flex-direction:column!important;height:100%;padding:0!important;gap:10px;align-items:center}
  header.top .wrap > .brand .word, header.top .wrap > .sync{display:none!important}
  header.top .wrap > .topbtns{flex-direction:column;margin:auto 0 0!important;gap:10px}
  main, #app > main{margin-left:66px}
  body{padding-left:0}
  .walk-stage .walk-card{left:auto!important;right:12px!important;width:min(46%, 440px);bottom:calc(52px + var(--badge-lift, 0px))!important;padding:10px 12px}
  .walk-stage .walk-card .wc-title{font-size:18px}
  .walk-stage .walk-strip{left:12px;right:auto;transform:none;max-width:calc(54% - 24px)}
  #sheet{left:66px!important;width:auto!important;max-width:none}
}
/* Temple: food points */
.fp-score{display:flex;align-items:center;gap:16px;margin:4px 0 14px}
.fp-big{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:92px;padding:10px 12px;border-radius:16px;background:color-mix(in srgb, var(--accent) 12%, var(--surface));border:1.5px solid var(--line)}
.fp-big b{font:800 34px/1 var(--cond, inherit)}
.fp-big span{font-size:12px;color:var(--muted);margin-top:2px}
.fp-big.well b{color:var(--accent)}.fp-big.tough b{color:var(--danger, #C0504A)}
.fp-sum{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.fp-sum span{color:var(--muted);font-size:14px}
.fp-h{margin:16px 0 8px;font:800 15px/1.2 var(--cond, inherit);text-transform:uppercase;letter-spacing:.04em}
.fp-h small{display:block;margin-top:2px;font:400 13px/1.3 var(--sans, inherit);text-transform:none;letter-spacing:0;color:var(--muted)}
.fp-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:8px}
.fp-tile{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface)}
.fp-tile.on.good{border-color:color-mix(in srgb, var(--accent) 55%, var(--line))}
.fp-tile.on.bad{border-color:color-mix(in srgb, #C0504A 55%, var(--line))}
.fp-name{display:flex;flex-direction:column;min-width:0}
.fp-name small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.fp-pts{font:800 15px/1 var(--cond, inherit);padding:4px 8px;border-radius:999px}
.fp-tile.good .fp-pts{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent)}
.fp-tile.bad .fp-pts{background:color-mix(in srgb, #C0504A 16%, transparent);color:#D0605A}
.fp-ctl{display:flex;align-items:center;gap:6px}
.fp-b{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:700 20px/1 var(--sans, inherit);cursor:pointer}
.fp-b:disabled{opacity:.35;cursor:default}
.fp-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fp-n{min-width:18px;text-align:center;font-weight:700}
.fp-bars{display:grid;grid-template-columns:repeat(7, 1fr);gap:6px;align-items:end;height:96px}
.fp-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.fp-bar i{display:block;width:60%;min-height:3px;border-radius:4px;background:var(--line)}
.fp-bar i.well{background:var(--accent)}.fp-bar i.tough{background:#C0504A}
.fp-bar .fp-v{font-size:11.5px;color:var(--muted)}
.fp-bar small{font-size:11px;color:var(--muted)}
.fp-habits{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.fp-habits summary{cursor:pointer;font:800 15px/1.2 var(--cond, inherit);text-transform:uppercase;letter-spacing:.04em;padding:6px 0}
@media (max-width:420px){ .fp-grid{grid-template-columns:1fr} }
.fp-sum .bar{display:block;height:7px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:2px}
.fp-sum .bar i{display:block;height:100%;border-radius:4px;background:var(--accent)}
@media (orientation: landscape) and (max-height: 520px){
  header.top .wrap > .brand{font-size:0!important;gap:0!important;width:44px;justify-content:center}
  header.top .wrap > .brand > :not(svg){display:none!important}
  header.top .wrap > .brand svg{width:34px;height:34px}
  .walk-stage .walk-strip{left:22px!important}
}
@media (orientation: landscape) and (max-height: 520px){ .walk-stage .walk-strip{max-width:none!important} }
/* a phone on its side, final layout: content starts right of the rail; the scene fills the height
   (a host badge may overlap scenery); a compact panel top right; markers bottom left */
@media (orientation: landscape) and (max-height: 520px){
  body{padding-left:calc(66px + env(safe-area-inset-left, 0px))!important}
  main, #app > main{margin-left:0!important}
  main .wrap{padding-left:10px!important;padding-right:max(10px, env(safe-area-inset-right, 0px))!important}
  body.badge-on .walk-stage{margin-bottom:0!important}
  .walk-stage{max-width:none!important;margin-left:0!important;margin-right:0!important}
  .walk-cap span:last-child{display:none}
  .walk-stage .walk-card{top:58px!important;bottom:auto!important;right:12px!important;left:auto!important;width:min(38%, 340px)!important;padding:8px 11px!important;border-radius:14px}
  .walk-stage .walk-card .wc-kick{font-size:10.5px}
  .walk-stage .walk-card .wc-title{font-size:16px!important;margin:2px 0 1px}
  .walk-stage .walk-card .wc-sub{font-size:12.5px;margin:0 0 4px}
  .walk-stage .walk-card .btnrow{margin-top:6px;gap:6px}
  .walk-stage .walk-card .btn{min-height:34px;padding:6px 11px;font-size:13px}
  .walk-stage .walk-strip{left:14px!important;bottom:10px!important}
}
@media (orientation: landscape) and (max-height: 520px){ main.wrap{padding-left:8px!important;padding-right:max(8px, env(safe-area-inset-right, 0px))!important;max-width:none!important} }
/* sideways: the milestone card is a slim column on the left, between the season label and the timeline */
@media (orientation: landscape) and (max-height: 520px){
  .walk-stage .walk-card{top:46px!important;bottom:auto!important;left:12px!important;right:auto!important;width:min(28%, 220px)!important;max-height:calc(100% - 110px);overflow-y:auto;padding:9px 10px!important;display:flex;flex-direction:column}
  .walk-stage .walk-card .wc-top{flex-wrap:wrap;gap:2px 8px}
  .walk-stage .walk-card .wc-title{font-size:15px!important;line-height:1.15}
  .walk-stage .walk-card .btnrow{flex-direction:column;align-items:stretch}
  .walk-stage .walk-card .btnrow .btn{width:100%;justify-content:center}
  .walk-stage .walk-card .linkbtn{align-self:flex-start}
  .walk-stage .walk-nav.l{left:calc(min(28%, 220px) + 20px)!important}
}
/* Temple: logging what you ate */
.fp-in{margin:4px 0 10px}
.fp-in .logrow{display:flex;gap:8px}
.fp-in input{flex:1;min-width:0}
.fp-again{margin:4px 0 8px;gap:6px}
.fp-ask{padding:10px 12px;margin:0 0 10px}
.fp-pick{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.fp-pick .pill b{margin-left:4px}
.fp-pick .pill.good b{color:var(--accent)}.fp-pick .pill.bad b{color:#D0605A}
.fp-list .rows{display:flex;flex-direction:column;gap:6px}
.fp-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.fp-food{overflow-wrap:anywhere;font-weight:600}
.fp-food small{font-weight:400;color:var(--muted)}
.fp-cat{border:1.5px solid var(--line);background:none;color:var(--ink);border-radius:999px;padding:5px 10px;font:600 13px/1.2 var(--sans, inherit);cursor:pointer;white-space:nowrap}
.fp-cat b{margin-left:4px}
.fp-cat.good{border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}.fp-cat.good b{color:var(--accent)}
.fp-cat.bad{border-color:color-mix(in srgb, #C0504A 45%, var(--line))}.fp-cat.bad b{color:#D0605A}
.fp-x{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line);background:none;color:var(--ink);font:700 18px/1 var(--sans, inherit);cursor:pointer}
.fp-cat:focus-visible,.fp-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fp-key{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.fp-key summary{cursor:pointer;font:800 15px/1.2 var(--cond, inherit);text-transform:uppercase;letter-spacing:.04em;padding:6px 0}
.fp-keyrows{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.fp-krow{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center}
.fp-krow span:last-child{display:flex;flex-direction:column}
.fp-krow small{color:var(--muted);font-size:12.5px}
.fp-kpts{font:800 15px/1 var(--cond, inherit);text-align:center;padding:5px 0;border-radius:999px;background:color-mix(in srgb, var(--ink) 8%, transparent)}
.fp-kpts.good{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent)}
.fp-kpts.bad{background:color-mix(in srgb, #C0504A 16%, transparent);color:#D0605A}
@media (max-width:420px){ .fp-row{grid-template-columns:minmax(0,1fr) auto} .fp-row .fp-cat{grid-column:1;grid-row:2;justify-self:start} .fp-row .fp-x{grid-column:2;grid-row:1 / span 2} }
.jtag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent)}
/* phones held upright: slimmer controls above the scene, and a smaller panel and markers on it,
   so the scene gets the room */
@media (max-width:700px) and (orientation: portrait), (max-width:560px){
  body.walk-in #v-today .path-top{margin:0 0 6px}
  body.walk-in #v-today .vhead{font-size:24px!important;line-height:1.05}
  #v-today .path-date{font-size:13px;margin-top:1px}
  #v-today .pv-toggle{padding:3px}
  #v-today .pv-toggle .seg-b{min-height:32px;padding:4px 12px;font-size:13px}
  .path-controls{gap:6px;margin:0 0 8px}
  .lvswitch{padding:3px}
  .lvs-b{min-height:32px;padding:4px 4px!important;font-size:12.5px!important}
  .lvswitch .lvs-info{width:32px;height:32px;min-width:32px;font-size:14px}
  .path-controls .datebar button{min-height:36px}
  .path-controls .datebar #dLabel,.path-controls .datebar .dlabel{font-size:15px}
  .walk-stage .walk-card{bottom:46px;padding:8px 11px;border-radius:14px}
  .walk-stage .walk-card .wc-kick{font-size:10.5px}
  .walk-stage .walk-card .wc-title{font-size:16.5px!important;margin:3px 0 1px;line-height:1.15}
  .walk-stage .walk-card .wc-sub{font-size:12.5px;margin:0 0 4px}
  .walk-stage .walk-card .btnrow{margin-top:6px;gap:6px}
  .walk-stage .walk-card .btn{min-height:34px;padding:5px 11px;font-size:13px}
  .walk-wrap .walk-strip{bottom:7px;padding:3px 7px}
  .walk-wrap .walk-strip .wmark{width:24px;height:24px}
}
/* Scripture: look back at what you've read */
.lookback{margin:10px 0 4px;border:1.5px solid var(--line);border-radius:14px;padding:4px 12px;background:var(--surface)}
.lb-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;min-height:44px;border:0;background:none;color:var(--ink);font:800 15px/1.2 var(--cond, inherit);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;padding:0}
.lb-toggle:focus-visible,.lb-bh:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.lb-seg{margin:4px 0 10px}
.lb-month{margin:12px 0 4px;font:700 13px/1.2 var(--sans, inherit);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.lb-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.lb-d{color:var(--muted);font-size:13px;padding-top:1px}
.lb-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.lb-refs{overflow-wrap:anywhere}
.lb-main small{color:var(--muted);font-size:12.5px}
.lb-note{font-style:italic}
.lb-book{border-top:1px solid var(--line)}
.lb-bh{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 90px;align-items:center;gap:10px;padding:8px 0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.lb-bh span:first-child{display:flex;flex-direction:column}
.lb-bh small{color:var(--muted);font-size:12.5px}
.lb-bh .bar{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.lb-bh .bar i{display:block;height:100%;background:var(--spiritual, var(--accent))}
.lb-bl{padding:0 0 6px 8px}
.map-hint{margin:8px 2px 0;text-align:center;font-size:13px}
/* Setup: group labels and sub-headings */
.setgroup{margin:22px 0 2px;font:700 12.5px/1.2 var(--sans, inherit);color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
#v-setup .setgroup:first-of-type{margin-top:10px}
.setsub{margin:14px 0 6px;font:800 15px/1.2 var(--cond, inherit);text-transform:uppercase;letter-spacing:.04em}
/* the shepherd's bag and the seasons */
#v-today .path-controls #lvSwitchSlot{display:none}   /* set once, in Setup → My path */
.walk-cap .season-chip{border:0;cursor:pointer;font:inherit;font-style:normal;font-weight:700;background:rgba(46,120,80,.75);color:#fff;pointer-events:auto}
.walk-cap{pointer-events:none}
.season-chip:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bag-list{display:flex;flex-direction:column;gap:7px}
.bag-i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.bag-i.season{border-color:color-mix(in srgb, #3FAE6A 60%, var(--line));background:color-mix(in srgb, #3FAE6A 9%, var(--surface))}
.bag-i.season small{color:#3FAE6A}
.bag-i.done{grid-template-columns:1fr;opacity:.75}
.bag-ck{width:34px;height:34px;border-radius:10px;border:2px solid var(--muted);background:none;cursor:pointer}
.bag-ck:hover{border-color:var(--accent)}
.bag-ck:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bag-t{display:flex;flex-direction:column;min-width:0}.bag-t b{overflow-wrap:anywhere}.bag-t small{color:var(--muted);font-size:12.5px}
.bag-done{margin-top:10px}.bag-done summary{cursor:pointer;font-weight:700;padding:6px 0}
.season-list{display:flex;flex-direction:column;gap:6px}
.season-i{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:9px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.season-i small{color:var(--muted);font-size:12.5px}.season-i.on{border-color:#3FAE6A;background:color-mix(in srgb, #3FAE6A 10%, var(--surface))}
.season-done{font-size:11.5px;color:#3FAE6A;font-weight:700}
.wmark.k-bag::before,.wmark.k-bag{--c:#9A7650}
.wmark.k-season{--c:#3FAE6A}
.bag-invite{display:flex;flex-direction:column;gap:8px;padding:11px 12px;margin:0 0 10px;border-radius:12px;border:1.5px dashed color-mix(in srgb, #3FAE6A 60%, var(--line));background:color-mix(in srgb, #3FAE6A 7%, var(--surface))}
.bag-invite span:first-child{display:flex;flex-direction:column;gap:2px}.bag-invite small{color:var(--muted);font-size:12.5px}
/* smoke from last night's fire, with a few embers still glowing */
.walk-svg .smoke .wisp{opacity:.5;transform-box:fill-box;transform-origin:50% 100%}
.walk-svg .ember{opacity:.55}
@media (prefers-reduced-motion: no-preference){
  .walk-svg .smoke .wisp{opacity:0;animation:rvSmoke 6s ease-out infinite}
  .walk-svg .smoke .w2{animation-delay:2s}
  .walk-svg .smoke .w3{animation-delay:4s}
  .walk-svg .ember{animation:rvEmber 2.4s ease-in-out infinite}
  .walk-svg .ember.e2{animation-delay:.8s}.walk-svg .ember.e3{animation-delay:1.6s}
}
@keyframes rvSmoke{
  0%{opacity:0;transform:translate(0,6px) scale(.6,.5)}
  15%{opacity:.9}
  55%{opacity:.6;transform:translate(3px,-10px) scale(1.1,1.05)}
  100%{opacity:0;transform:translate(-2px,-24px) scale(1.6,1.3)}
}
@keyframes rvEmber{0%,100%{opacity:.25}50%{opacity:.8}}
/* loading the bag: distance and pace */
.load-opts{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.load-opts.dim{opacity:.55}
.load-opt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:9px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.load-opt small{color:var(--muted);font-size:12.5px}
.load-opt.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--surface))}
.load-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.load-sum{margin:2px 0 12px;padding:9px 12px;border-radius:10px;background:color-mix(in srgb, var(--ink) 6%, transparent);font-size:14px}
.walk-cap{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.walk-cap .bag-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(232,211,168,.55);cursor:pointer;font:inherit;font-weight:700;background:rgba(60,42,26,.78);color:#F3E6CC;pointer-events:auto}
.walk-cap .bag-chip:focus-visible{outline:2px solid #fff;outline-offset:2px}
.walk-cap .bag-chip span{display:inline!important}   /* the chip's label always shows */
.walk-cap .bag-chip{white-space:nowrap;font-size:12px;padding:4px 10px 4px 7px;letter-spacing:.03em}
.lens-k{font:700 11.5px/1.2 var(--sans, inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:2px 0 4px}
.lens-q{font-size:15px;line-height:1.45}
/* bag rows: tap anywhere to open, the box to mark done */
.bag-row{grid-template-columns:auto minmax(0,1fr)!important;padding:0 0 0 10px!important}
.bag-open{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 12px 8px 0;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer;width:100%}
.bag-open .bag-t{flex:1}
.bag-chev{font-size:24px;line-height:1;color:var(--muted)}
.bag-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:10px}
.bag-end{display:block;margin:12px 0 0}
/* the shepherd kneels to open the bag; a finished step's stone is set down */
@media (prefers-reduced-motion: no-preference){
  .walk-svg .traveler-fig.kneel{transform-box:fill-box;transform-origin:50% 100%;animation:rvKneel .6s ease-out forwards}
  .walk-svg .set-stone{transform-box:fill-box;transform-origin:50% 100%;animation:rvSetStone 1.1s cubic-bezier(.3,1.4,.5,1) both}
}
@keyframes rvKneel{to{scale:1 .78;translate:0 2px}}
@keyframes rvSetStone{
  0%{opacity:0;translate:0 -18px;scale:.7}
  55%{opacity:1;translate:0 0;scale:1.08}
  70%{filter:drop-shadow(0 0 6px rgba(255,214,120,.9))}
  100%{translate:0 0;scale:1;filter:none}
}
@media (prefers-reduced-motion: no-preference){
  body.rv-kneel #walk .traveler-fig{transform-box:fill-box;transform-origin:50% 100%;scale:1 .88;translate:0 2.5px}
  body.rv-kneel #walk .traveler-fig .carry-bag{translate:-3px 3px}
}

/* the camera eases toward the kneeling shepherd */
@media (prefers-reduced-motion: no-preference){
  #walk > svg{transition:transform .55s cubic-bezier(.3,.7,.3,1)}
  html.rv-zoom #walk > svg{transform:scale(1.4)}
}
#walk{overflow:hidden}

/* the welcome title takes focus for screen readers; show the outline only to keyboard users */
#obTitle:focus{outline:none}   /* a heading, not a control: screen readers still announce it */
.ob-back{position:absolute;top:14px;left:16px;font-size:14px;z-index:1}
#obCard{position:relative}

/* "Where are you with Jesus?": two equal choices */
#obCard.ob-even [data-ob]{flex:1 1 0;min-width:0}
#obCard.ob-even .load-opt{cursor:pointer}
#obCard.ob-even .load-opt:hover{border-color:var(--muted)}
#obCard.ob-even .load-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Sunday recap */
.recap{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.recap div{display:flex;flex-direction:column;align-items:center;padding:10px 6px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.recap b{font:800 26px/1 var(--cond, inherit);color:var(--accent)}
.recap small{color:var(--muted);font-size:12.5px;text-align:center;margin-top:4px}
/* arriving from a path card: the section it was about glows a moment */
.rv-flash{border-radius:12px;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent);transition:box-shadow .6s ease}
@media (prefers-reduced-motion: no-preference){ .rv-flash{animation:rvFlash 2.4s ease-out} }
@keyframes rvFlash{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent)}15%{box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 75%, transparent)}100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 0%, transparent)}}


/* ---------- the evening fire and the night ---------- */
/* the shepherd lights the fire: it catches from a spark and grows */
@media (prefers-reduced-motion: no-preference){
  #walk .kneel-light .spark{opacity:0;animation:rvSpark .7s ease-out var(--sd, 0s) infinite}
  @keyframes rvSpark{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(3px,-6px)}}
  body.rv-kindle #walk .fire{transform-box:fill-box;transform-origin:50% 100%;animation:rvKindle 1.3s ease-out both}
  @keyframes rvKindle{0%{transform:scale(.08);opacity:.3}55%{transform:scale(1.18);opacity:1}100%{transform:none;opacity:1}}
  /* lying down after the reflection, and rising the next morning */
  #walk .rest-laydown .was{animation:rvGone 1.1s .15s ease-in forwards}
  #walk .rest-laydown .now{transform-box:fill-box;transform-origin:50% 100%;animation:rvLieDown 1.6s .25s ease-out both}
  #walk .rest-rise .was{animation:rvGone .9s .5s ease-in forwards}
  #walk .rest-rise .now{transform-box:fill-box;transform-origin:50% 100%;animation:rvRise 1.7s .35s ease-out both}
  @keyframes rvGone{to{opacity:0}}
  @keyframes rvLieDown{0%{opacity:0;transform:scaleX(.55) translateY(-3px)}100%{opacity:1;transform:none}}
  @keyframes rvRise{0%{opacity:0;transform:scaleY(.3) translateY(3px)}35%{opacity:1}100%{opacity:1;transform:none}}
  /* the stars twinkle while the shepherd sleeps */
  body.rv-asleep #walk .wstar{animation:rvTwinkle var(--td, 3s) ease-in-out var(--tw, 0s) infinite alternate}
  /* the brightest stars sparkle gently on any night */
  #walk .wstar.bright{animation:rvSparkle var(--td, 4s) ease-in-out var(--tw, 0s) infinite alternate}
  @keyframes rvSparkle{from{opacity:.65}to{opacity:1}}
  @keyframes rvTwinkle{from{opacity:.2}to{opacity:1}}
  #walk .lantern.dim rect{opacity:.75}
}
/* with reduced motion the change simply happens: only the end of each pose shows */
@media (prefers-reduced-motion: reduce){ #walk .rest-laydown .was, #walk .rest-rise .was{display:none} }

/* landscape: the full-screen button sits top center, over the sky, clear of the step card */
.full-btn{right:auto;left:50%;transform:translateX(-50%)}

/* ---------- weather ---------- */
.walk-wx{position:absolute;top:58px;right:12px;padding:4px 10px;border-radius:999px;background:rgba(14,20,17,.8);color:#fff;font-size:12.5px;line-height:1.4;letter-spacing:.01em;pointer-events:auto;}
.walk-wx:empty{display:none}
#walk .wweather{pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  #walk .wrain{animation:rvRain .55s linear infinite}
  @keyframes rvRain{from{transform:translate(0,0)}to{transform:translate(-6px,52px)}}
  #walk .wflash{animation:rvFlash 9s ease-out infinite}
  #walk .wflash-soft{opacity:0;animation:rvFlashSoft 13s ease-out 3s infinite}
  @keyframes rvFlashSoft{0%,94%,100%{opacity:0}95%{opacity:.5}96%{opacity:.1}97%{opacity:.38}}
  @keyframes rvFlash{0%,93%,100%{opacity:0}94%{opacity:.16}95%{opacity:.04}96%{opacity:.12}}
  #walk .wwind{animation:rvWind 6s ease-in-out var(--wd, 0s) infinite}
  @keyframes rvWind{0%{transform:translateX(-40px);opacity:0}30%{opacity:.5}100%{transform:translateX(120px);opacity:0}}
  #walk .wcloud{animation:rvDrift 40s linear infinite alternate}
  @keyframes rvDrift{to{transform:translateX(30px)}}
  @keyframes rvFog{to{transform:translateX(30px)}}
  /* older phones: slower rain, no lightning, no drifting */
  html.rv-lite #walk .wrain{animation-duration:1.2s}
  html.rv-lite #walk .wflash:not(.wflash-soft), html.rv-lite #walk .wcloud, html.rv-lite #walk .wfog{animation:none}   /* the soft rain lightning stays: one cheap flash now and then */
}
@media (prefers-reduced-motion: reduce){ #walk .wflash{display:none} #walk .wrain{opacity:.25} }
#walk .wflash-soft{opacity:0}   /* never shown unless animating */

/* ---------- First Steps on the Scripture page ---------- */
.fs-t{margin:4px 0 2px;font-size:1.25rem}
.fs-road{list-style:none;margin:6px 0 0;padding:0}
.fs-road .fs-month{padding:10px 12px;border-left:3px solid var(--line, #3a3f44);margin:0 0 6px;opacity:.75}
.fs-road .fs-month.now{border-left-color:var(--spiritual);opacity:1;background:rgba(127,127,127,.06);border-radius:0 8px 8px 0}
.fs-road .fs-month.past{opacity:.6}
.fs-weeks{margin:6px 0 0;padding-left:18px}
.fs-weeks li{margin:2px 0}
.fs-weeks li.now{font-weight:700}
.fs-weeks li.past{opacity:.65}
.fs-ahead{margin-top:14px;padding-top:12px;border-top:1px solid rgba(127,127,127,.25)}

/* ---------- shuffle in the bag ---------- */
.bag-row.has-swap{grid-template-columns:auto minmax(0,1fr) auto!important}
.bag-swap{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-right:6px;border:1px solid rgba(127,127,127,.35);border-radius:10px;background:transparent;color:inherit;cursor:pointer}
.bag-swap svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bag-swap:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}
.bag-shuffle{width:100%;margin:10px 0 2px}
/* shuffle a single habit in the list view */
.row-swap{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(127,127,127,.35);border-radius:10px;background:transparent;color:inherit;cursor:pointer}
.row-swap svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.row-swap:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}
.shuffle.btn{width:100%;margin-top:10px}
/* ---------- a reading: scene, passage, Jesus, question ---------- */
.rscene p,.rjesus p{margin:2px 0 12px;line-height:1.55}
.rscene{margin:2px 0 4px}
.rjesus{margin:10px 0 2px;padding:10px 12px;border-left:3px solid var(--spiritual);background:rgba(127,127,127,.07);border-radius:0 8px 8px 0}
.rjesus p{margin:2px 0 0}
.rask{margin:12px 0 0}
.rask textarea{width:100%;margin-top:6px}

/* ---------- the lamp: three ways into Scripture ---------- */
.lamp-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:8px 0 12px;padding:3px;border-radius:12px;background:rgba(127,127,127,.12)}
.lamp-tab{min-width:0;min-height:44px;padding:6px 6px;line-height:1.2;white-space:normal;border:0;border-radius:9px;background:transparent;color:inherit;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
.lamp-tab[aria-selected="true"]{background:var(--card, #fff);box-shadow:0 1px 3px rgba(0,0,0,.18);color:var(--spiritual)}
.lamp-tab:focus-visible{outline:3px solid #FFE08A;outline-offset:1px}
.ltg{margin:14px 0 0}
.ltheme{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:48px;margin:6px 0 0;padding:10px 12px;border:1.5px solid var(--line, rgba(127,127,127,.35));border-radius:10px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ltheme small{opacity:.75;white-space:nowrap}
.bkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;margin:6px 0 0}
.bkbtn{display:flex;flex-direction:column;align-items:flex-start;min-height:48px;padding:7px 9px;border:1.5px solid var(--line, rgba(127,127,127,.35));border-radius:9px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.bkbtn b{font-size:.88rem;line-height:1.2}
.bkbtn small{opacity:.7;font-size:.75rem}
.bkbtn.some{border-color:color-mix(in srgb, var(--spiritual) 55%, transparent)}
.bkbtn.full{border-color:var(--spiritual);background:color-mix(in srgb, var(--spiritual) 14%, transparent)}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px}
.chbtn{min-height:44px;border:1.5px solid var(--line, rgba(127,127,127,.35));border-radius:9px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}
.chbtn.read{background:color-mix(in srgb, var(--spiritual) 22%, transparent);border-color:var(--spiritual)}
.bkbtn:focus-visible,.chbtn:focus-visible,.ltheme:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}

/* ---------- Scripture page: the three ways, the year ahead, Your Bible ---------- */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:12px 0 14px}
.waycard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:72px;padding:12px 14px;border:2px solid var(--line, rgba(127,127,127,.35));border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.waycard b{font-size:1.02rem}
.waycard small{opacity:.78;line-height:1.4}
.waycard.on{border-color:var(--spiritual);background:color-mix(in srgb, var(--spiritual) 12%, transparent)}
.waycard:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}
.yr{list-style:none;margin:0;padding:0}
.yrb details{border-left:3px solid var(--line, rgba(127,127,127,.35));margin:0 0 4px;padding:6px 0 6px 12px}
.yrb.now details{border-left-color:var(--spiritual);background:rgba(127,127,127,.06);border-radius:0 8px 8px 0}
.yrb.done summary b{opacity:.7}
.yrb summary{display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:40px;cursor:pointer;list-style:none}
.yrb summary::-webkit-details-marker{display:none}
.yrb summary small{opacity:.75;white-space:nowrap}
.yrr{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.yrbtn{min-height:40px;padding:6px 10px;border:1.5px solid var(--line, rgba(127,127,127,.35));border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:.88rem;cursor:pointer}
.yrbtn.read{background:color-mix(in srgb, var(--spiritual) 18%, transparent);border-color:var(--spiritual)}
.yrbtn.cur{outline:2px solid var(--spiritual);outline-offset:1px;font-weight:700}
.ybgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px;margin:4px 0 0}
.ybk{display:flex;flex-direction:column;padding:6px 8px;border-radius:8px;font-size:.8rem;line-height:1.25;background:linear-gradient(90deg, color-mix(in srgb, var(--spiritual) 34%, transparent) var(--p), rgba(127,127,127,.1) var(--p))}
.ybk small{opacity:.75;font-size:.72rem}
.sfavrow{margin:10px 0 2px}
.sfav[aria-pressed="true"]{border-color:var(--spiritual)}

/* ---------- the great cloud of witnesses ---------- */
.wit-art{width:56px;height:52px;flex:none}
.witgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.witcard{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 10px;border:1.5px solid var(--line, rgba(127,127,127,.35));border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:center;cursor:pointer}
.witcard b{font-size:.9rem;line-height:1.2}
.witcard small{opacity:.75;font-size:.75rem}
.witcard.full{border-color:var(--spiritual);background:color-mix(in srgb, var(--spiritual) 10%, transparent)}
.witcard:focus-visible,.wit-road:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}
.wit-head{display:flex;align-items:center;gap:12px}
.wit-head .wit-art{width:72px;height:66px}
.wit-moment{text-align:center}
.wit-moment .wit-art{width:96px;height:88px;margin:4px auto 6px;display:block}
.wit-moment .btnrow{justify-content:center}
.wit-note{margin:2px 0 6px;padding:8px 10px;border-left:3px solid var(--spiritual);background:rgba(127,127,127,.07);border-radius:0 8px 8px 0;line-height:1.5;white-space:pre-wrap}
.wit-story{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.wit-book{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:.9rem}
.wit-book b{margin-right:4px}
.wit-ch{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 4px;border-radius:7px;border:1px solid var(--line, rgba(127,127,127,.35));font-size:.8rem}
.wit-ch.read{background:color-mix(in srgb, var(--spiritual) 24%, transparent);border-color:var(--spiritual)}
.wit-road{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 12px;padding:6px 10px;border:1.5px solid color-mix(in srgb, var(--spiritual) 50%, transparent);border-radius:12px;background:color-mix(in srgb, var(--spiritual) 7%, transparent);color:inherit;font:inherit;text-align:left;cursor:pointer}
.wit-road span{display:flex;flex-direction:column;gap:2px}
.wit-road small{opacity:.8}

/* Scripture page: groups that open on demand */
.sgrp{margin:10px 0 0}
.sgrp > summary{display:flex;align-items:center;justify-content:space-between;min-height:40px;cursor:pointer;list-style:none}
.sgrp > summary::-webkit-details-marker{display:none}
.sgrp > summary::after{content:"\203A";font-size:1.2rem;transform:rotate(90deg);transition:transform .15s}
.sgrp[open] > summary::after{transform:rotate(-90deg)}
.sgrp > summary:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}
.yr-h{cursor:pointer}

/* ---------- a phone held upright: Today's Path fills the screen, no page scroll ---------- */
@media (max-width: 760px) and (orientation: portrait){
  html:has(body.on-home.path-fit), body.on-home.path-fit{overflow:hidden;overscroll-behavior:none}
  body.on-home.path-fit{height:100dvh}
  body.on-home.path-fit #installSlot, body.on-home.path-fit #bkNote, body.on-home.path-fit .bk-quiet{display:none}   /* still in the List view and Setup */
}
/* ---------- a phone on its side: the same full screen, no page scroll; the stop's card sits compact on the right ---------- */
@media (orientation: landscape) and (max-height: 520px){
  html:has(body.on-home.path-fit), body.on-home.path-fit{overflow:hidden;overscroll-behavior:none}
  body.on-home.path-fit{height:100dvh}
  body.on-home.path-fit #installSlot, body.on-home.path-fit #bkNote, body.on-home.path-fit .bk-quiet{display:none}
  /* the date, in the side rail: the label over its two arrows, each a compact button */
  body.path-side #dateSlot{width:58px;flex:none;margin:2px auto;height:auto;min-height:0}
  body.path-side #dateSlot .datebar{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:58px;margin:0;padding:0}
  body.path-side #dateSlot .datebar > *{min-width:0;width:auto;height:30px;min-height:30px;padding:0;margin:0;font-size:.7rem;justify-content:center}
  body.path-side #dateSlot .datebar > #dLabel{grid-column:1 / -1;order:-1}
  body.path-side #dateSlot .datebar > #dToday{grid-column:1 / -1}
  body.path-side #dateSlot .datebar input[type="date"]{position:absolute;width:1px;height:1px;opacity:0}
}

/* the meeting moment: Continue today's journey first, the other two beneath */
.wit-acts{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.wit-acts .btn{width:100%}

/* opening the app: the shepherd and the lambs are still until the person does something */
body.rv-still #walk .wtrav, body.rv-still #walk .wtrav *{animation:none!important;transition:none!important}

/* ---------- the empty tomb ---------- */
.tomb-moment{text-align:center}
.tomb-art{display:block;width:100%;max-width:420px;height:auto;margin:0 auto 12px;border-radius:14px}
.tomb-h{margin:4px 0 0;font-size:1.6rem;line-height:1.2}
.tomb-ref{margin:2px 0 12px;opacity:.75;font-size:.9rem}
.tomb-moment > p{line-height:1.6;margin:0 auto 12px;max-width:34em}
.tomb-q{margin:4px auto 16px;padding:10px 14px;max-width:32em;border-left:3px solid #E8A27A;background:rgba(232,162,122,.1);border-radius:0 10px 10px 0;text-align:left;font-style:italic;line-height:1.55}
.tomb-q span{display:block;margin-top:6px;font-style:normal;font-size:.85rem;opacity:.8}

/* ---------- listening and watching ---------- */
.listen-link{display:inline-flex;align-items:center;gap:4px;margin-left:10px;padding:4px 10px;min-height:32px;border-radius:999px;border:1.5px solid currentColor;font-size:.85rem;font-weight:600;text-decoration:none;opacity:.9;white-space:nowrap}
.listen-link:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}
.rpass + .listen-link{margin:6px 0 0}
.bp-card{display:flex;align-items:center;gap:10px;margin:10px 0;padding:10px 12px;border-radius:12px;border:1.5px solid rgba(127,127,127,.35);background:rgba(127,127,127,.07);color:inherit;text-decoration:none}
.bp-card b{display:block;line-height:1.25}
.bp-card small{display:block;opacity:.75;margin-top:2px;line-height:1.35}
.bp-play{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#2A6FDB;color:#fff;font-size:.9rem}
.bp-card:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}

/* ---------- Learning to pray ---------- */
.pc-card{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:12px 14px;border-radius:14px;border:1.5px solid color-mix(in srgb, var(--spiritual) 50%, transparent);background:color-mix(in srgb, var(--spiritual) 8%, transparent);color:inherit;font:inherit;text-align:left;cursor:pointer}
.pc-card.compact{margin:14px 0 0}
.pc-card b{display:block}
.pc-card small{display:block;opacity:.8;margin-top:2px;line-height:1.4}
.pc-icon{font-size:1.5rem;flex:none}
.pc-bar{display:block;height:5px;margin-top:6px;border-radius:3px;background:rgba(127,127,127,.25);overflow:hidden}
.pc-bar i{display:block;height:100%;background:var(--spiritual)}
.pc-card:focus-visible,.pc-row:focus-visible{outline:3px solid #FFE08A;outline-offset:2px}
.pc-list{list-style:none;margin:14px 0 0;padding:0}
.pc-row{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:0 0 6px;padding:8px 10px;border:1.5px solid rgba(127,127,127,.3);border-radius:10px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pc-row.done{border-color:var(--spiritual)}
.pc-n{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:rgba(127,127,127,.18);font-size:.8rem;font-weight:700}
.pc-row.done .pc-n{background:var(--spiritual);color:#fff}
.pc-try,.pc-pray{margin:10px 0;padding:10px 12px;border-radius:10px;background:rgba(127,127,127,.08)}
.pc-try p,.pc-pray p{margin:4px 0 0;line-height:1.55}
.pc-pray p{font-style:italic}

.pc-vids{margin:12px 0 0}
.pc-vrow{margin:6px 0 0}
.pc-vlesson{display:block;font-size:.75rem;opacity:.7;margin:6px 0 -4px}
.pc-video .bp-play{background:var(--spiritual)}

.pc-invite{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb, var(--spiritual) 7%, transparent);border:1.5px solid color-mix(in srgb, var(--spiritual) 35%, transparent)}
.pc-invite .pc-card.compact{margin:0 0 6px}

/* the torch's flame flickers gently (still for reduced motion) */
@media (prefers-reduced-motion: no-preference){ html:not(.rv-lite) #walk .torch .tflame{animation:rvFlick .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%} }
@keyframes rvFlick{from{transform:scale(1,1)}to{transform:scale(.9,1.12)}}

.bag-focus{margin:-4px 0 10px;font-size:.92rem;opacity:.9}

/* Temple, Mind, Heart: three colors; each sub-area wears its group's */
:root{--temple:var(--health);--mind:var(--routines);--heart:var(--spiritual)}
.c-temple,.c-health,.c-fitness{--c:var(--temple)}
.c-mind,.c-routines,.c-career,.c-mindset{--c:var(--mind)}
.c-heart,.c-spiritual,.c-relationships{--c:var(--heart)}
.subchips{margin:0 0 10px}

/* workout types keep their own colors (not the habit groups'): lifting, cardio, recovery */
.c-lift{--c:var(--fitness)}.c-cardio{--c:var(--health)}

.load-pace{margin:6px 0 10px;font-size:.95rem}
.load-pace .linkbtn{padding:0 2px}

/* swap a step: search as you type */
.sw-q{width:100%;margin:0 0 8px}
.sw-res{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.sw-hit{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line, rgba(127,127,127,.3));background:transparent;color:inherit;font:inherit;cursor:pointer;min-height:44px}
.sw-hit small{opacity:.75}
.sw-hit.own{border-style:dashed}

/* nothing over the moving scene blurs what's behind it: a phone would re-blur it on every frame of a walk */

/* the weather and the bright stars' twinkle: their own layer over the scene, so animating them never repaints it */
#walk{position:relative}
#walk > .walk-weather{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;will-change:transform}
/* the small stars hold still (twinkling them made the whole scene repaint); the bright ones twinkle on the weather layer */
body.rv-asleep #walk .walk-svg .wstar{animation:none}
/* a slower phone: the small loops in the scenery (sheep, water glints, smoke) rest, so the scene isn't repainted between taps */
html.rv-calm #walk .walk-svg .witems *:not(.flame):not(.spark):not(.coal){animation:none !important}   /* (the fire keeps burning) */

/* the sky: its own layer behind the scene, painted once rather than with every frame of a walk */
#walk{isolation:isolate}
#walk > .walk-sky{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;will-change:transform}
/* the rain: a sheet slid by the graphics hardware (no repainting) */
#walk > .walk-rain{position:absolute;left:-60px;top:-104px;right:-60px;bottom:0;pointer-events:none;will-change:transform;background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='52'%3E%3Cpath d='M5 0l-3 11M18 18l-3 11M11 35l-3 11' stroke='%23D5E0EA' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion: no-preference){ #walk > .walk-rain{animation:rvRainSheet .55s linear infinite} html.rv-lite #walk > .walk-rain{animation-duration:1.2s} }
@keyframes rvRainSheet{from{transform:translate(0,0)}to{transform:translate(-6px,52px)}}
@media (prefers-reduced-motion: reduce){ #walk > .walk-rain{opacity:.25 !important} }
/* lightning on phones and tablets: a flash on its own layer */
#walk > .walk-flash{position:absolute;left:0;top:0;width:100%;height:60%;background:#fff;opacity:0;pointer-events:none;will-change:opacity;display:none}
@keyframes rvFlashSheet{0%,93%,100%{opacity:0}94%{opacity:.16}95%{opacity:.04}96%{opacity:.12}}
/* phones and tablets: nothing animates inside the weather layer (each frame of it would repaint the layer) */
@media (pointer: coarse){
  #walk .walk-weather, #walk .walk-weather *{animation:none !important}
  #walk .walk-weather .wflash{display:none}
  #walk > .walk-flash{display:block}
}
@media (pointer: coarse) and (prefers-reduced-motion: no-preference){ #walk > .walk-flash{animation:rvFlashSheet 9s ease-out infinite} }

/* while walking on a high-density touch screen, shapes are drawn without edge smoothing: at two to three device pixels
   per point it can't be seen in motion, and it is a large part of a phone's painting; edges are smooth again at rest */
@media (pointer: coarse) and (min-resolution: 2dppx){ #walk.rv-walking svg.walk-svg{shape-rendering:optimizeSpeed} }

/* the stop's card waits while the shepherd walks: actions appear once they stop */
#walkCard{transition:opacity .25s ease, transform .25s ease}
body.rv-walking #walkCard{opacity:0;transform:translateY(10px);pointer-events:none}
@media (prefers-reduced-motion: reduce){ #walkCard{transition:none} }
/* Fellow Travelers: a discreet note at the top, never covering the road */
.wit-banner{position:fixed;left:50%;top:calc(env(safe-area-inset-top, 0px) + 74px);transform:translate(-50%,-14px);opacity:0;z-index:70;display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:6px 6px 6px 8px;border-radius:14px;background:rgba(14,20,17,.9);color:#fff;box-shadow:0 6px 22px rgba(0,0,0,.35);transition:opacity .3s ease, transform .3s ease}
.wit-banner.show{opacity:1;transform:translate(-50%,0)}
.wit-bart{width:34px;height:30px;flex:none}
.wit-bgo{display:flex;flex-direction:column;align-items:flex-start;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:4px 6px;min-height:44px;justify-content:center}
.wit-bgo span{font-size:.85rem;opacity:.85;text-decoration:underline}
.wit-bx{background:none;border:0;color:inherit;font-size:1.3rem;line-height:1;width:36px;height:44px;cursor:pointer;opacity:.8}
@media (prefers-reduced-motion: reduce){ .wit-banner{transition:none} }

/* ---------- the full-screen path on a phone (portrait): one slim strip above the scene ---------- */
body.path-fit header.top .wrap{padding-top:6px;padding-bottom:6px;gap:8px;align-items:center}
body.path-fit header.top .brand{flex:none;order:0}
body.path-fit header.top .brand > span{display:none}
body.path-fit header.top #dateSlot{order:1;flex:1;min-width:0;margin:0}
body.path-fit header.top .topbtns{order:2;gap:6px}
body.path-fit header.top .topbtns button{width:40px;height:40px;min-width:40px}
body.path-fit header.top .topbtns button svg{width:20px;height:20px}
body.path-fit header.top .datebar{margin:0;height:40px;gap:4px}
body.path-fit header.top .datebar button{min-height:40px;height:40px;padding:0 8px;font-size:.88rem}
body.path-fit header.top .datebar #dToday{padding:0 8px}
.dlabel .dl-short{display:none}
body.path-fit header.top .dlabel .dl-long{display:none}
body.path-fit header.top .dlabel .dl-short{display:inline}
body.path-fit header.top .datebar.is-today .dlabel{color:var(--accent)}
/* the title, its line and the date row give their room to the path; Path / List sits in the scene's corner */
body.path-fit #v-today .path-head, body.path-fit #v-today .path-controls{display:none}
body.path-fit #v-today .path-top{position:relative;height:0;margin:0;padding:0;overflow:visible;z-index:40}
body.path-fit #v-today .pv-toggle{position:absolute;top:12px;right:12px;margin:0;background:rgba(14,20,17,.86);border-color:transparent}
body.path-fit #v-today .pv-toggle .seg-b{min-height:34px;padding:0 12px;color:#fff}
body.path-fit #walk .walk-wx{top:58px}
/* the step count rides with the progress dots (phones); elsewhere the title line says it */
.walk-strip .wcount{display:none}
body.path-fit .walk-strip .wcount{display:flex;align-items:center;padding:0 6px 0 2px;color:#fff;font-weight:600;font-size:.8rem;white-space:nowrap}
/* levels: a row per group (Temple, Mind, Heart) with its two parts */
.lvgroups{display:flex;flex-direction:column;gap:8px}
.lvgroup{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lvgroup .atag{min-width:70px;text-align:center}
.lvsubs{display:flex;gap:14px;flex-wrap:wrap;font-size:.92rem}
.lvsub{display:inline-flex;align-items:center;gap:5px}
/* writing boxes grow as you write */
#sheet textarea{overflow-y:auto;resize:none}

/* the date belongs to the path: on other pages the strip shows no date */
body:not(.path-fit) header.top #dateSlot{display:none}

/* the date in the slim strip is never cut off: on another day, "Today" is a small icon */
#dToday .dt-icon{display:none;width:18px;height:18px}
body.path-fit header.top #dToday{padding:0 9px;min-width:40px}
body.path-fit header.top #dToday .dt-long{display:none}
body.path-fit header.top #dToday .dt-icon{display:block}
body.path-fit header.top .dlabel{min-width:62px;flex:1}
/* Progress: what you did this week; every number and card opens what it counts */
.wkdone{display:flex;flex-direction:column;gap:6px}
.wkrow{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:10px;border:1px solid var(--line, rgba(127,127,127,.25));background:transparent;color:inherit;font:inherit;cursor:pointer;min-height:44px;border-left:4px solid var(--c, currentColor)}
.wkname{flex:1;min-width:0}
.wkdays{display:flex;gap:3px;flex:none}
.wkdays i{font-style:normal;font-size:.72rem;width:18px;height:18px;display:grid;place-items:center;border-radius:5px;opacity:.35}
.wkdays i.on{opacity:1;background:var(--c, #888);color:#fff}
#v-progress [data-pd]{cursor:pointer}
#v-progress [data-pd]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pd-rows{display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow:auto}
.pd-row{display:flex;flex-direction:column;gap:2px;padding:9px 2px;border-bottom:1px solid var(--line, rgba(127,127,127,.2))}
.pd-row span{font-size:.9rem;opacity:.8}

/* the hidden date picker takes no room in the strip; slimmer arrows there */
body.path-fit header.top #dPick{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
body.path-fit header.top #dPrev, body.path-fit header.top #dNext{min-width:38px;width:38px;padding:0}

/* Places on the Scripture page */
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pl-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line, rgba(127,127,127,.25));background:transparent;color:inherit;font:inherit;cursor:pointer;min-height:44px}
.pl-item small{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.pl-item span{font-size:.82rem;opacity:.75}
.pl-pin{font-size:1.4rem;width:30px;text-align:center;flex:none}

/* Progress: insights in buckets you open and close */
.pbucket{border-bottom:1px solid var(--line, rgba(127,127,127,.25))}
.pbucket > summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 2px;cursor:pointer;list-style:none;min-height:44px}
.pbucket > summary::-webkit-details-marker{display:none}
.pbucket > summary .pb-t{font-weight:700;font-size:1.02rem}
.pbucket > summary .pb-s{font-size:.86rem;opacity:.75;text-align:right}
.pbucket > summary::after{content:"\203A";font-size:1.3rem;transform:rotate(90deg);transition:transform .2s;opacity:.7}
.pbucket[open] > summary::after{transform:rotate(-90deg)}
.pbucket > div{padding:0 0 14px}

/* a real fire: each tongue flickers on its own rhythm; sparks rise and fade; the coals pulse */
.scene-svg .fire .flame{transform-box:fill-box;transform-origin:50% 100%}
.scene-svg .fire .spark, .scene-svg .fire .coal{transform-box:fill-box;transform-origin:50% 50%}
@media (prefers-reduced-motion: no-preference){
  .scene-svg .fire .f1{animation:rvFl1 .9s ease-in-out infinite alternate}
  .scene-svg .fire .f2{animation:rvFl2 .7s ease-in-out infinite alternate}
  .scene-svg .fire .f3{animation:rvFl3 .8s ease-in-out infinite alternate}
  .scene-svg .fire .f4{animation:rvFl2 .55s ease-in-out infinite alternate-reverse}
  .scene-svg .fire .f5{animation:rvFl1 .45s ease-in-out infinite alternate}
  .scene-svg .fire .f6{animation:rvFl3 .35s ease-in-out infinite alternate}
  .scene-svg .fire .coal{animation:rvCoal 1.6s ease-in-out infinite alternate}
  .scene-svg .fire .sp0{animation:rvSpark 1.6s ease-out infinite}
  .scene-svg .fire .sp1{animation:rvSpark 2.1s ease-out .5s infinite}
  .scene-svg .fire .sp2{animation:rvSpark 1.8s ease-out 1s infinite}
  .scene-svg .fire .sp3{animation:rvSpark 2.4s ease-out 1.4s infinite}
}
@keyframes rvFl1{0%{transform:scale(1,1) skewX(0)}50%{transform:scale(.94,1.08) skewX(-3deg)}100%{transform:scale(1.04,.93) skewX(2deg)}}
@keyframes rvFl2{0%{transform:scale(1,.92) skewX(3deg)}100%{transform:scale(.92,1.1) skewX(-5deg)}}
@keyframes rvFl3{0%{transform:scale(.95,1.06) skewX(-2deg)}100%{transform:scale(1.05,.9) skewX(4deg)}}
@keyframes rvCoal{from{opacity:.75}to{opacity:1}}
@keyframes rvSpark{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(4px,-26px);opacity:0}}

/* This week at a glance */
.wkstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wkday{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0 6px;border-radius:12px;border:1px solid var(--line, rgba(127,127,127,.25));background:transparent;color:inherit;font:inherit;cursor:pointer;min-height:96px}
.wkday:disabled{cursor:default}
.wkday.fut{opacity:.4}
.wkday.now{border-color:var(--accent)}
.wkd-n{font-weight:700;font-size:1.05rem;min-height:1.3em}
.wkd-bar{display:flex;flex-direction:column-reverse;width:12px;height:40px;border-radius:4px;overflow:hidden;background:rgba(127,127,127,.15)}
.wkd-bar i{display:block;width:100%;background:var(--c)}
.wkd-l{font-size:.78rem;opacity:.75}
.wkgroups{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.wkg{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line, rgba(127,127,127,.25));background:transparent;color:inherit;font:inherit;cursor:pointer;min-height:40px}
.wkg .dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.wkg:disabled{opacity:.45;cursor:default}

/* Progress, as you arrive: encouragement, the week, growth in one row, two numbers */
.penc{margin:2px 0 14px;font-size:1.02rem;line-height:1.45}
.penc b{color:var(--accent-ink, var(--accent))}
#pWeek .card{margin:0}
.pshare{display:block;margin:8px 0 16px;background:none;border:0;padding:4px 0;color:var(--accent-ink, var(--accent));font:inherit;font-size:.9rem;text-decoration:underline;cursor:pointer;min-height:36px}
#pGrowth .growth{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
#pGrowth .gcell{flex-direction:column;align-items:flex-start;padding:10px;gap:4px;min-height:0}
#pGrowth .gcell svg{width:24px;height:24px}
#pGrowth .gcell .gnext{display:none}
#pGrowth .gcell .gtx b{font-size:1.05rem}
#pGrowth .gcell .gtx{width:100%}
.glance.two{grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 6px}
.glance.two .gl{padding:10px 6px;min-height:0}
.glance.two .gl b{font-size:1.6rem}
.glance.two .gl span{font-size:.82rem}

/* Temple on Progress */
.tmgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (max-width:360px){ .tmgrid{grid-template-columns:1fr} }
.tmpanel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line, rgba(127,127,127,.25));border-left:4px solid var(--c-temple, #4E8F5E);background:transparent;color:inherit;font:inherit;cursor:pointer;min-height:44px}
.tmk{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75;font-weight:700}
.tmrow{display:flex;align-items:flex-end;gap:6px;width:100%}
.tmrow b{font-size:1.5rem;line-height:1}
.tmrow small{font-size:.76rem;opacity:.75;flex:1;line-height:1.2}
.tmbars{display:flex;align-items:flex-end;gap:2px;height:24px;width:30px;flex:none}
.tmbars i{flex:1;background:var(--c-temple, #4E8F5E);opacity:.45;border-radius:2px 2px 0 0}
.tmbars i.now{opacity:1}
.tml{font-size:.8rem;line-height:1.35;opacity:.9}
.tml b{font-weight:700}

/* Insights: one window, compact rows in the group colours, one open at a time */
.insscope{display:flex;gap:6px;margin:4px 0 10px}
.insscope button{flex:1;font:inherit;font-weight:600;font-size:.88rem;padding:8px 6px;border-radius:999px;border:1px solid var(--line, rgba(127,127,127,.25));background:transparent;color:inherit;min-height:38px;cursor:pointer}
.insscope button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.insb{border:1px solid var(--line, rgba(127,127,127,.25));border-left:4px solid var(--c, #888);border-radius:12px;margin:0 0 8px;overflow:hidden}
.insb.c-work{--c:var(--accent)}
.insb > summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none;min-height:56px}
.insb > summary::-webkit-details-marker{display:none}
.insb > summary::after{content:"\203A";font-size:1.3rem;transform:rotate(90deg);transition:transform .2s;opacity:.6}
.insb[open] > summary::after{transform:rotate(-90deg)}
.insb-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.insb-t b{font-size:1rem}
.insb-t small{font-size:.84rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insb .tmbars{width:44px;height:26px}
.insb .tmbars i{background:var(--c, #888)}
.insb-body{padding:0 12px 12px}
.insline{margin:0 0 8px;font-size:.9rem;line-height:1.45}
.insay{opacity:.9;font-style:italic}
.insk{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7;font-weight:700;margin:6px 0 4px}
.insrow{display:flex;align-items:center;gap:10px;width:100%;padding:8px 2px;background:none;border:0;border-top:1px solid var(--line, rgba(127,127,127,.18));color:inherit;font:inherit;font-size:.88rem;text-align:left;cursor:pointer;min-height:40px}
.insrow span:first-child{flex:1;min-width:0}
.insrow:disabled{opacity:.5;cursor:default}
.insbar{flex:0 0 38%;height:8px;border-radius:4px;background:rgba(127,127,127,.18);overflow:hidden}
.insbar i{display:block;height:100%;background:var(--accent)}
.insstats{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:0 0 8px}
.insstat{display:flex;flex-direction:column;align-items:flex-start;padding:8px 10px;border-radius:10px;border:1px solid var(--line, rgba(127,127,127,.2));background:transparent;color:inherit;font:inherit;text-align:left}
button.insstat{cursor:pointer}
.insstat b{font-size:1.3rem;line-height:1.1}
.insstat span{font-size:.78rem;opacity:.8}

/* courses */
.crs-list{display:grid;gap:8px}
.crs-item, .crs-now{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:12px;border-radius:12px;border:1px solid var(--line, rgba(127,127,127,.25));background:transparent;color:inherit;font:inherit;cursor:pointer}
.crs-item.on, .crs-now{border-color:var(--accent)}
.crs-now{margin:0 0 10px}
.crs-item small, .crs-now small{font-size:.74rem;letter-spacing:.04em;opacity:.75}
.crs-item b, .crs-now b{font-size:1.02rem}
.crs-item span{font-size:.86rem;opacity:.85;line-height:1.4}
.crs-bar{display:block;width:100%;height:6px;border-radius:3px;background:rgba(127,127,127,.2);overflow:hidden;margin-top:4px}
.crs-bar i{display:block;height:100%;background:var(--accent)}
.crs-teach{margin:0 0 6px}
.crs-teach summary{cursor:pointer;font-weight:700;padding:6px 0}
.crs-teach p{margin:0 0 10px;line-height:1.55}
.crs-q{margin:4px 0 12px;padding:6px 12px;border-left:3px solid var(--accent);font-style:italic}
.crs-q cite{display:block;margin-top:4px;font-style:normal;font-size:.82rem;opacity:.75}
.crs-weeks{margin:0 0 4px;padding-left:20px}
.crs-weeks li{margin:0 0 6px}
.crs-weeks li.now b{color:var(--accent-ink, var(--accent))}
.crs-weeks li.past{opacity:.75}
.crs-j{display:block;font-style:italic;font-size:.86rem;opacity:.85}
.crs-line{margin:10px 0 0}

/* Mind: courses at a glance */
.mrec{border:1px solid var(--accent);border-radius:14px;padding:12px 14px;margin:0 0 14px}
.mrec b{display:block;font-size:1.1rem;margin:2px 0 4px}
.mrec p{margin:0 0 8px;line-height:1.45}
.mlens{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.mlens button{font:inherit;font-weight:600;font-size:.86rem;padding:7px 12px;border-radius:999px;border:1px solid var(--line, rgba(127,127,127,.25));background:transparent;color:inherit;min-height:36px;cursor:pointer}
.mlens button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.mcat{margin:16px 0 8px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.mtiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mtile{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:6px;text-align:left;min-height:76px;padding:10px 12px;border-radius:12px;border:1px solid var(--line, rgba(127,127,127,.25));border-left:4px solid var(--c, #888);background:transparent;color:inherit;font:inherit;cursor:pointer}
.mtile b{font-size:.95rem;line-height:1.25}
.mtile small{font-size:.76rem;opacity:.75}
.mtile.on{border-color:var(--accent);border-left-color:var(--c, #888)}
.crs-slim{margin:0 0 12px}
.crs-entry{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:12px;border-radius:12px;border:1px solid var(--line, rgba(127,127,127,.25));background:transparent;color:inherit;font:inherit;cursor:pointer;margin:0 0 12px}
.crs-entry small{font-size:.74rem;opacity:.75}
.crs-entry span{font-size:.86rem;color:var(--accent-ink, var(--accent))}

/* The cross: every section and bucket that opens and closes shows a cross instead of an arrow. Closed, a quiet outline;
   open, the cross fills with the accent and a soft glow, like the logo's cross catching light. */
h2.sech.collapsible::after, .mcsec > summary::after, .sgrp > summary::after, .pbucket > summary::after, .insb > summary::after, .crs-teach > summary::after, .yrb > summary::after{content:"" !important;display:inline-block;flex:none;width:18px !important;height:18px !important;border:0 !important;margin:0 0 0 8px !important;transform:none !important;font-size:0 !important;
  background:var(--muted, currentColor) !important;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center/contain no-repeat;transition:background-color .25s, filter .25s, transform .25s !important;opacity:.85}
h2.sech.collapsible[aria-expanded="true"]::after, h2.sech.collapsible:not([aria-expanded])::after, .mcsec[open] > summary::after, .sgrp[open] > summary::after, .pbucket[open] > summary::after, .insb[open] > summary::after, .crs-teach[open] > summary::after, .yrb[open] > summary::after{background:var(--accent) !important;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>") center/contain no-repeat;filter:drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent));transform:scale(1.08) !important;opacity:1}
.crs-teach > summary{display:flex;align-items:center;justify-content:space-between;list-style:none}
.crs-teach > summary::-webkit-details-marker{display:none}
/* course weeks marked with a small cross; the current week's is lit */
.crs-weeks{list-style:none;padding-left:0}
.crs-weeks li{position:relative;padding-left:22px}
.crs-weeks li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;background:var(--muted, currentColor);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.crs-weeks li.past::before{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>")}
.crs-weeks li.now::before{background:var(--accent);-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>");filter:drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent))}
/* your course: a small lit cross */
.crs-now{position:relative;padding-right:34px}
.crs-now::after{content:"";position:absolute;right:12px;top:12px;width:16px;height:16px;background:var(--accent);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>") center/contain no-repeat}
/* free videos and printables */
.crs-r{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line, rgba(127,127,127,.18));color:inherit;text-decoration:none}
.crs-r b{display:block;font-size:.92rem}
.crs-r small{display:block;font-size:.8rem;opacity:.8;line-height:1.35}
.crs-rk{flex:none;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 7px;border-radius:6px;border:1px solid var(--accent);color:var(--accent-ink, var(--accent));margin-top:2px}

/* the cross on every other open/close control: Setup's library and Quick add (.achev), and Temple's cards ("Open") */
.achev, .hcard-head .hcard-go{display:inline-block !important;flex:none;width:18px !important;height:18px !important;border:0 !important;transform:none !important;font-size:0 !important;color:transparent !important;padding:0 !important;
  background:var(--muted, currentColor) !important;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center/contain no-repeat !important;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center/contain no-repeat !important;opacity:.85;transition:background-color .25s, filter .25s, transform .25s}
.achev::before, .achev::after, .hcard-go::before, .hcard-go::after{display:none !important}
[aria-expanded="true"] > .achev, [aria-expanded="true"] .hcard-go{background:var(--accent) !important;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>") center/contain no-repeat !important;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>") center/contain no-repeat !important;filter:drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent));transform:scale(1.08) !important;opacity:1}

/* wildlife: grazers stand in varied poses (heads down or up), at no cost while walking */
.scene-svg .fauna .fh{transform-box:fill-box;transform-origin:15% 90%}
.scene-svg .fauna.down .fh{transform:rotate(30deg)}
/* birds: a small flock crossing the sky, on its own layer */
#walk > .walk-birds{position:absolute;left:0;right:0;top:0;height:42%;pointer-events:none;overflow:hidden}
.walk-birds .flock{position:absolute;left:0;width:90px;height:40px;transform:translateX(-140px);will-change:transform}
.walk-birds .bird{position:absolute;transform-origin:50% 60%}
@media (prefers-reduced-motion: no-preference){
  .walk-birds .flock{animation:rvFly linear infinite}
  .walk-birds .flock.rev{animation-name:rvFlyRev}
  .walk-birds .bird{animation:rvFlap .45s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion: reduce){ #walk > .walk-birds{display:none} }
@keyframes rvFly{from{transform:translate(-140px,0)}50%{transform:translate(50vw,-10px)}to{transform:translate(calc(100vw + 40px),0)}}
@keyframes rvFlyRev{from{transform:translate(calc(100vw + 40px),0) scaleX(-1)}50%{transform:translate(50vw,-8px) scaleX(-1)}to{transform:translate(-140px,0) scaleX(-1)}}
@keyframes rvFlap{from{transform:scaleY(1)}to{transform:scaleY(.35)}}

.walk-birds .bird.glide{animation:none !important}   /* the eagle glides */

/* food categories in their four groups */
.fp-pick{display:flex;flex-direction:column;gap:8px}
.fp-pg{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fp-pgh{width:100%;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7;font-weight:700}
.fp-kg{margin:0 0 10px}
.fp-kgh{margin:10px 0 4px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75}

/* the shepherd eating or drinking: three times to the mouth, then the bread or cup is put away */
.scene-svg .meal-arm{transform-box:fill-box;transform-origin:0% 100%}
@media (prefers-reduced-motion: no-preference){ .scene-svg .meal-arm{animation:rvMeal 5s ease-in-out forwards} }
@media (prefers-reduced-motion: reduce){ .scene-svg .meal-arm{animation:rvMealFade 3s linear forwards} }
@keyframes rvMeal{0%{transform:rotate(55deg);opacity:0}8%{opacity:1}15%,25%{transform:rotate(0)}35%{transform:rotate(45deg)}45%,55%{transform:rotate(0)}65%{transform:rotate(45deg)}75%,80%{transform:rotate(0)}92%{transform:rotate(55deg);opacity:1}100%{transform:rotate(60deg);opacity:0}}
@keyframes rvMealFade{0%,80%{opacity:1}100%{opacity:0}}

/* the catalog of past workouts */
.wcat-f{display:flex;gap:6px;flex-wrap:wrap}
.wcat-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:10px 4px;background:none;border:0;border-top:1px solid var(--line, rgba(127,127,127,.2));color:inherit;font:inherit;cursor:pointer;min-height:44px}
.wcat-row small{font-size:.74rem;opacity:.75}
.wcat-row b{font-size:.98rem}
.wcat-row span{font-size:.84rem;opacity:.85}
.wcat-ex{font-style:italic}

/* course search */
.mindq{width:100%;margin:4px 0 8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line, rgba(127,127,127,.3));background:transparent;color:inherit;font:inherit;min-height:44px}
.mres{display:grid;gap:8px}
.mres-row{min-height:0}
.mbest{font-style:normal;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:6px;border:1px solid var(--accent);color:var(--accent-ink, var(--accent));margin-left:6px;vertical-align:middle}
.mwhy{font-size:.82rem;opacity:.85;line-height:1.35}

/* What's working: a few findings, each a sentence with its evidence */
.wk-cards{display:grid;gap:8px}
.wk-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line, rgba(127,127,127,.22));background:transparent;color:inherit;font:inherit}
button.wk-card{cursor:pointer}
.wk-card b{font-size:.98rem;line-height:1.3}
.wk-card span{font-size:.84rem;opacity:.82;line-height:1.4}

/* ---------- extras: hints, What's new, explore, search, the season, the star, contrast ---------- */
.rv-tip{position:fixed;left:50%;width:max-content;bottom:calc(86px + env(safe-area-inset-bottom, 0px));transform:translate(-50%, 16px);opacity:0;transition:opacity .3s, transform .3s;z-index:60;display:flex;align-items:center;gap:10px;max-width:min(92vw, 460px);padding:10px 12px 10px 14px;border-radius:14px;background:rgba(20,17,15,.94);color:#F2EDE6;font-size:.9rem;line-height:1.35;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.rv-tip.show{opacity:1;transform:translate(-50%, 0)}
.rv-tip button{flex:none;font:inherit;font-weight:700;font-size:.82rem;padding:6px 10px;min-height:36px;border-radius:999px;border:1px solid rgba(242,237,230,.5);background:transparent;color:inherit;cursor:pointer}
.newsl{margin:0 0 4px;padding-left:20px;line-height:1.5}
.expl{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:10px 12px;margin:0 0 6px;border-radius:12px;border:1px solid var(--line, rgba(127,127,127,.25));background:transparent;color:inherit;font:inherit;cursor:pointer;min-height:44px}
.expl small{font-size:.82rem;opacity:.8;line-height:1.35}
.pidx-search{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 10px;padding:10px 12px;min-height:44px;border-radius:12px;border:1px solid var(--line, rgba(127,127,127,.3));background:transparent;color:inherit;font:inherit;cursor:pointer;opacity:.9}
.pidx-search svg{width:20px;height:20px;flex:none}
.gs-h{margin:12px 0 4px;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;opacity:.7;font-weight:700}
.gs-r{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:9px 4px;background:none;border:0;border-top:1px solid var(--line, rgba(127,127,127,.18));color:inherit;font:inherit;cursor:pointer;min-height:44px}
.gs-r small{font-size:.82rem;opacity:.78}
.mseason{border-left:4px solid var(--accent);padding:6px 0 6px 12px;margin:0 0 14px}
.mseason p{margin:2px 0 8px;line-height:1.45}
.pshare-row{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0 16px}
.pshare-row .pshare{margin:0}
/* the star, on Advent and Christmas nights */
#walk > .walk-star{position:absolute;right:22%;top:9%;width:0;height:0;pointer-events:none}
.walk-star i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#FFF8DC;box-shadow:0 0 10px 4px rgba(255,244,200,.8), 0 0 28px 10px rgba(255,236,170,.35)}
.walk-star::before, .walk-star::after{content:"";position:absolute;background:linear-gradient(rgba(255,248,220,0), rgba(255,248,220,.95), rgba(255,248,220,0));left:-1px;top:-34px;width:2px;height:68px}
.walk-star::after{transform:rotate(90deg);height:44px;top:-22px}
/* high contrast: quieter text made full strength, lines firmer */
html.hc .hint, html.hc small, html.hc .vsub, html.hc .flabel, html.hc .cel-kicker{opacity:1 !important}
html.hc{--line:currentColor}
html.hc .card, html.hc .pill, html.hc .mtile, html.hc .insb, html.hc .pbucket{border-color:currentColor}

/* Help's questions open and close with the cross too */
.helplist details > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.helplist details > summary::-webkit-details-marker{display:none}
.helplist details > summary::after{content:"";flex:none;width:16px;height:16px;background:var(--muted, currentColor);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center/contain no-repeat;opacity:.85}
.helplist details[open] > summary::after{background:var(--accent);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>") center/contain no-repeat;opacity:1}

/* the Bible in search */
.bi-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;border-top:1px solid var(--line, rgba(127,127,127,.18))}
.bk-chs{display:flex;flex-wrap:wrap;gap:6px}
.bk-chs .pill{min-width:44px;justify-content:center}

/* the whole picture */
.whole{border:1px solid var(--line, rgba(127,127,127,.25));border-radius:14px;padding:12px 14px;margin:0 0 12px}
.wh-h{margin:8px 0 4px;font-size:1rem}
.wh-ack{margin:0 0 4px;padding-left:20px;line-height:1.5;font-size:.93rem}
.wh-ack li{margin:0 0 3px}
.wh-opp{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 0 4px;font-size:.93rem;line-height:1.45}
.wh-verse{margin:10px 0 2px;padding-top:10px;border-top:1px solid var(--line, rgba(127,127,127,.2));font-style:italic;font-size:.93rem;line-height:1.5}
.wh-verse b{font-style:normal;font-size:.82rem;white-space:nowrap}

/* Favorites, developed */
.fvready{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 12px}
.fvtile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:10px 12px;min-height:64px;border-radius:12px;border:1px solid var(--accent);background:transparent;color:inherit;font:inherit;cursor:pointer}
.fvtile small{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink, var(--accent));font-weight:700}
.fvtile b{font-size:.92rem;line-height:1.25}
.fvn{opacity:.7;font-weight:500;margin-left:2px}
.fvuse{display:block;font-size:.78rem;opacity:.75;margin-top:2px}
#fvChips{margin:0 0 6px}
#v-favorites .frow .fname{flex-wrap:wrap}
#v-favorites .fvuse{flex-basis:100%}

/* gestures: a bag row shows what letting go will do */
.bag-row{touch-action:pan-y}
.bag-row.sw-done{box-shadow:inset 5px 0 0 #3E8E5A;background:rgba(62,142,90,.12)}
.bag-row.sw-swap{box-shadow:inset -5px 0 0 var(--accent);background:rgba(127,127,127,.12)}
#dateBar{touch-action:pan-y}
/* a celebration that is leaving doesn't swallow taps on the date and buttons beneath it */
.mini-cel:not(.on){pointer-events:none}

/* a course, day by day */
.crs-look{margin:10px 0 2px;padding:9px 12px;border-left:3px solid #D9A441;background:rgba(217,164,65,.10);border-radius:0 10px 10px 0;line-height:1.5}
.crs-look b{color:#C68F2A;letter-spacing:.04em;text-transform:uppercase;font-size:.76rem;margin-right:4px}
.crs-q{margin:0 0 8px;font-weight:700;line-height:1.4}
.crs-fire textarea{width:100%}
.crs-ck{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:4px}
.crs-ck li{display:flex;gap:8px;align-items:baseline;opacity:.8}
.crs-ck li.on{opacity:1}
.crs-ck li.on span{color:#3E8E5A;font-weight:700}
.crs-jd{opacity:.85;font-size:.9em}
.crs-stay{align-self:center}
/* the course's step in the bag: gold, and it stays */
.bag-row.course-step{border:1px solid #D9A441;box-shadow:inset 4px 0 0 #D9A441;background:rgba(217,164,65,.10)}
.bag-row.course-step .bag-t small{color:#C68F2A;font-weight:700}

/* Mind: the course in progress, featured on the page; the other courses folded under their headings */
.mcourse{border:1px solid var(--accent);border-radius:16px;padding:14px 16px;margin:0 0 16px}
.mc-t{margin:4px 0 8px;font-size:1.45rem;line-height:1.15}
.mc-bar{height:6px;border-radius:99px;background:rgba(127,127,127,.25);overflow:hidden;margin:0 0 12px}
.mc-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.mc-w{margin:0 0 6px;font-size:1.05rem}
.mc-block{padding:10px 0;border-top:1px solid var(--line, rgba(127,127,127,.2))}
.mc-k{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;opacity:.75;margin:0 0 4px}
.mc-ref{margin:0 0 6px;font-weight:700;font-size:1.05rem}
.mc-ok{color:#3E8E5A;font-weight:700;font-size:.85rem}
.mc-pr{margin:0;padding:8px 10px;border-radius:10px;border:1px solid #D9A441;box-shadow:inset 4px 0 0 #D9A441;background:rgba(217,164,65,.10);font-weight:600;line-height:1.35}
.mcourse .btn{margin-top:8px}
.mothers{margin:18px 0 8px;font-size:1.05rem}
.mcatd{margin:0 0 6px;border-top:1px solid var(--line, rgba(127,127,127,.2))}
.mcatd > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;margin:0;padding:12px 2px;min-height:44px}
.mcatd > summary::-webkit-details-marker{display:none}
.mcatd > summary::after{content:"";flex:none;width:16px;height:16px;background:var(--muted, currentColor);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center/contain no-repeat;opacity:.85}
.mcatd[open] > summary::after{background:var(--accent);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.4 2.6h3.2v5.2h5.2v3.2h-5.2v10.4h-3.2V11H5.2V7.8h5.2z' fill='black'/></svg>") center/contain no-repeat;opacity:1}
.mcatd[open] > .mtiles{margin-bottom:12px}

.crs-opt{margin:0 0 8px;font-size:.82rem;line-height:1.4}
.crs-rk.k-podcast{border-color:#7A5AA8;color:#7A5AA8}

/* the course's step in the strip of stops: a gold dot */
.wmark.course{border-color:#D9A441;box-shadow:0 0 0 2px rgba(217,164,65,.45)}
.wmark.course.done{background:#D9A441}

/* Digging deeper, folded at the lamp: sits below the reading */
.crs-dig{margin-top:14px}
.crs-dig > summary .crs-dign{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:.78rem;font-weight:700;background:rgba(127,127,127,.18);color:var(--muted, inherit);vertical-align:middle}
.crs-dig .crs-opt{margin:8px 0 8px}

/* this week's teaching: the one required Digging deeper item */
.crs-core{margin:14px 0 4px;padding:12px 14px;border:1px solid rgba(217,164,65,.55);border-left:4px solid #D9A441;border-radius:12px;background:rgba(217,164,65,.08)}
.crs-core .crs-r{border-top:0;padding-top:0}
.crs-core.done{border-color:rgba(127,127,127,.3);border-left-color:#7a9a6a;background:transparent}
.crs-core-note{margin:8px 0 0;font-size:.95rem}

/* today's reading: always one tap away on the path */
.walk-lamp{position:absolute;top:92px;right:12px;z-index:3;padding:5px 11px;border:1px solid rgba(255,231,163,.55);border-radius:999px;background:rgba(14,20,17,.82);color:#FFE7A3;font:700 12.5px/1.4 var(--sans, inherit);letter-spacing:.01em;cursor:pointer;pointer-events:auto}
.walk-lamp[hidden]{display:none}
.walk-lamp:focus-visible{outline:2px solid #FFE7A3;outline-offset:2px}

/* Mind: the course in folding buckets, status at the right of each heading */
.mcourse .mc-bk{margin:0;border-top:1px solid rgba(127,127,127,.22)}
.mcourse .mc-bk > summary{display:flex;align-items:baseline;gap:10px;padding:14px 34px 14px 0}
.mcourse .mc-bk > summary .mc-bkt{font-weight:700}
.mcourse .mc-bk > summary .mc-bks{margin-left:auto;font-size:.88rem;color:var(--muted, #9a948a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.mcourse .mc-bk[open] > summary{padding-bottom:6px}
.mcourse .mc-bk > :not(summary){margin-bottom:12px}

/* Scripture: today's reading on top; the three ways as tabs under "Read more on your own" */
.s-today{margin:14px 0 16px;padding:16px;border:1px solid var(--accent, #E07B2E);border-radius:16px;background:rgba(224,123,46,.06)}
.s-today .s-from{margin:2px 0 6px;font-size:.92rem;color:var(--muted, #9a948a)}
.s-today .s-ref{margin:0;font-size:1.5rem;line-height:1.25}
.s-today .crs-look{margin-top:10px}
.s-more{margin:6px 0 10px}
.s-more > summary{font-weight:700;font-size:1.05rem}
.s-more .ways{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.s-more .waycard{flex:0 0 auto;min-height:0;padding:8px 14px;border-radius:999px}
.s-more .waycard small{display:none}
.s-more .waycard b{font-size:.95rem}

/* the lamp note, and your day in review */
.lamp-note textarea{width:100%}
.lamp-back{margin:0 0 12px;padding:10px 12px;border-left:3px solid #D9A441;border-radius:8px;background:rgba(217,164,65,.08)}
.lamp-back .crs-j{margin:4px 0 6px}
.dr-g{margin:12px 0 0}
.dr-list{list-style:none;margin:6px 0 0;padding:0}
.dr-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(127,127,127,.18)}
.dr-list li > span{flex:1}
.dr-list small{display:block;font-size:.84rem;color:var(--muted, #9a948a)}
.dr-list small.dr-course{display:inline;color:#B8862E;font-weight:700}
.dr-list .dr-note{font-style:italic}
.dr-star{flex:0 0 auto;min-width:40px;min-height:40px;border:1px solid rgba(127,127,127,.35);border-radius:10px;background:none;color:inherit;font-size:1.2rem;cursor:pointer}
.dr-star.on{color:#D9A441;border-color:#D9A441}

/* fog: soft clouds rolling across, each its own layer slid by the graphics hardware (no repainting the scene) */
#walk > .walk-fog{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
#walk > .walk-fog .fogcloud{position:absolute;left:0;height:17%;opacity:var(--fo, .5);transform:translate3d(-110%,0,0);will-change:transform;animation:rvFogRoll var(--fd, 60s) linear var(--fdl, 0s) infinite}
#walk > .walk-fog .fogcloud svg{display:block;width:100%;height:100%}
@keyframes rvFogRoll{from{transform:translate3d(-110%,0,0)}to{transform:translate3d(170%,0,0)}}
@media (prefers-reduced-motion: reduce){ #walk > .walk-fog .fogcloud{animation:none;transform:translate3d(10%,0,0)} }

/* a star beside each teaching */
.crs-rrow{display:flex;align-items:center;gap:8px}
.crs-rrow > .crs-r{flex:1;min-width:0}
.crs-rfav{flex:0 0 auto;min-width:40px;min-height:40px;border:1px solid rgba(127,127,127,.35);border-radius:10px;background:none;color:inherit;font-size:1.15rem;cursor:pointer}
.crs-rfav.on{color:#D9A441;border-color:#D9A441}
.sfavrow{margin:8px 0 0}
.bi-row .sfav{margin-left:6px}

/* your day in review: a celebration around the cross */
.dr-wrap{text-align:center}
.dr-art{display:block;width:min(240px,70%);margin:0 auto 10px;overflow:visible}
.dr-rays{transform-origin:110px 92px;animation:rvDrRays 40s linear infinite}
.dr-sparks circle{animation:rvDrSpark 2.6s ease-in-out var(--sd, 0s) infinite}
.dr-orb circle{fill:rgba(127,127,127,.18);stroke:rgba(127,127,127,.4);stroke-width:1.5}
.dr-orb text{font:800 13px/1 var(--sans, inherit);fill:#fff}
.dr-orb.on circle{fill:var(--gc);stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 6px var(--gc))}
@keyframes rvDrRays{to{transform:rotate(360deg)}}
@keyframes rvDrSpark{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .dr-rays, .dr-sparks circle{animation:none} }
.dr-kick{margin-top:6px}
.dr-h{margin:4px 0 6px;font-size:1.7rem;line-height:1.15}
.dr-v{margin:0 auto 14px;max-width:34em;font-style:italic;color:var(--muted, #9a948a);line-height:1.5}
.dr-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 6px}
.dr-tile{padding:10px 6px;border-radius:14px;border:1px solid rgba(127,127,127,.25);background:rgba(127,127,127,.06)}
.dr-tile b{display:block;font-size:1.6rem;line-height:1.1}
.dr-tile small{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem}
.dr-tile .dr-ti{display:block;font-size:1.1rem;opacity:.5}
.dr-tile.on{border-color:var(--gc);background:color-mix(in srgb, var(--gc) 16%, transparent)}
.dr-tile.on .dr-ti, .dr-tile.on b{color:var(--gc);opacity:1}
.dr-g{text-align:left;margin:14px 0 0}
.dr-gh{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--gc)}
.dr-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.dr-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb, var(--gc) 45%, transparent);border-left:5px solid var(--gc);background:color-mix(in srgb, var(--gc) 9%, transparent)}
.dr-card .dr-tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--gc);color:#fff;font-weight:800;font-size:.85rem}
.dr-card .dr-txt{flex:1;min-width:0}
.dr-card .dr-txt b{display:block;font-weight:700;line-height:1.3}
.dr-card .dr-txt small{display:block;margin-top:2px;font-size:.86rem;color:var(--muted, #9a948a);line-height:1.4}
.dr-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.dr-chips span{padding:2px 8px;border-radius:999px;background:color-mix(in srgb, var(--gc) 18%, transparent);font-size:.8rem}
.dr-star{flex:0 0 auto;min-width:40px;min-height:40px;border:1px solid rgba(127,127,127,.35);border-radius:10px;background:none;color:inherit;font-size:1.2rem;cursor:pointer}
.dr-star.on{color:#D9A441;border-color:#D9A441}
.dr-hint{margin:14px 0 0}
.dr-go{width:100%;margin-top:14px}