/* ===== 2.6 — motion, depth, pickers, calmer Главная, dark colours ===== */

/* screens are places: during a push/pop two of them overlap, so each one paints its own ground */
.screen{background:var(--ground);transform-origin:50% 35%;transition:transform 420ms cubic-bezier(.32,.72,0,1),border-radius 420ms cubic-bezier(.32,.72,0,1)}
.scr.ghost,.under-prev{pointer-events:none}
.under-prev{position:absolute;inset:0;z-index:2;background:var(--ground)}
.under-prev .scr{position:absolute;inset:0}
/* the page steps back behind a sheet: smaller, rounded, on black — it is still there, underneath */
body.sheeted #app{background:#000}
body.sheeted #app .screen{transform:scale(.94);border-radius:28px;overflow:hidden}
body.sheeted .tabbar{transform:translateY(10px) scale(.96);opacity:.5;transition:transform 420ms cubic-bezier(.32,.72,0,1),opacity 300ms}
body.sheeted #app::after{opacity:0}
@media (prefers-reduced-motion:reduce){.screen{transition:none}body.sheeted #app .screen{transform:none;border-radius:0}body.sheeted #app{background:var(--ground)}}

/* ---- Главная: one hero, quiet secondary lines, the verse as its own moment ---- */
.sun-quiet{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px;text-align:left;font-size:15px;color:var(--label-2)}
.sun-quiet span{display:inline-flex;align-items:center;gap:2px;font-weight:600;color:var(--accent-ink);white-space:nowrap}
.sun-quiet:active{opacity:.6}
.vday{background:var(--paper);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--label) 7%,transparent);padding:26px 24px 20px;margin-top:22px}
.vday p{font-size:22px;line-height:1.45;letter-spacing:-.005em;text-wrap:pretty}
.vd-eye{display:flex;align-items:center;gap:8px}
.vd-eye::before{content:"";width:18px;height:2px;border-radius:1px;background:currentColor;opacity:.6}
.sdot{width:8px;height:8px;border-radius:4px;align-self:center;margin-right:2px}
.sdot.ok{background:var(--ok,#3E8E4E)}.sdot.off{background:var(--warn,#C9A13E)}.sdot.run{background:var(--label-3);animation:sdot 1.2s ease-in-out infinite}
@keyframes sdot{50%{opacity:.3}}
/* countdown odometer */
.sun-big b.roll{display:inline-block;position:relative;overflow:visible}
.roll-old{position:absolute;left:0;top:0;font-style:normal;pointer-events:none}

/* ---- pull to refresh: the church leaf grows with the pull and sways while it syncs ---- */
.ptr.leafy{background:var(--card);overflow:hidden}
.ptr-leaf{display:block;height:24px;width:14px;transform:scaleY(var(--grow,.4));transform-origin:50% 100%;transition:transform 60ms linear;color:var(--brand)}
.ptr-leaf svg{display:block;width:100%;height:100%}
:root[data-theme="dark"] .ptr-leaf{color:var(--accent-ink)}
.ptr.leafy.ready .ptr-leaf{color:var(--accent-ink)}
.ptr.leafy.spin .ptr-leaf{transform:none;animation:sway 1s ease-in-out infinite;transform-origin:50% 100%}
.ptr.leafy.spin svg{animation:none}
@keyframes sway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}

/* ---- dark mode: ministry colours that stay colours ---- */
:root[data-theme="dark"] .scr.mscr,:root[data-theme="dark"] .mhero{--hero-d:color-mix(in oklch,var(--hero) 74%,#0c0c0c)}
:root[data-theme="dark"] .tl-ic{background:color-mix(in oklch,var(--hero,var(--brand)) 34%,var(--card));color:color-mix(in oklch,var(--hero,var(--brand)) 45%,#fff)}
:root[data-theme="dark"] .tl b{color:var(--label)}
:root[data-theme="dark"]{--card:#1D1D20}

/* ---- a new ministry: three steps ---- */
.mstart{padding:16px 16px 8px}
.ms-h{display:flex;justify-content:space-between;align-items:baseline}.ms-h b{font-size:17px}.ms-h small{color:var(--label-2);font-size:14px;font-variant-numeric:tabular-nums}
.ms-bar{height:6px;border-radius:3px;background:var(--fill);margin:10px 0 6px;overflow:hidden}.ms-bar i{display:block;height:100%;border-radius:3px;background:var(--hero,var(--brand));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.mstart ol{list-style:none;margin:0;padding:0}
.mstart li button{width:100%;display:flex;align-items:center;gap:12px;padding:10px 0;text-align:left;min-height:52px}
.mstart li+li button{border-top:1px solid var(--sep)}
.ms-n{width:30px;height:30px;border-radius:15px;flex:none;display:grid;place-items:center;font-size:14px;font-weight:700;background:var(--fill);color:var(--label-2)}
.mstart li.ok .ms-n{background:color-mix(in srgb,var(--hero,var(--brand)) 20%,var(--card));color:var(--hero,var(--brand))}
:root[data-theme="dark"] .mstart li.ok .ms-n{color:color-mix(in oklch,var(--hero,var(--brand)) 45%,#fff)}
.mstart li.next .ms-n{background:var(--hero,var(--brand));color:#fff}
.mstart li.ok b{color:var(--label-2);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--label-2) 50%,transparent)}
.mstart .tx{flex:1}.mstart .tx b{display:block;font-size:16px}.mstart .tx small{display:block;font-size:14px;color:var(--label-2)}

/* ---- our own pickers ---- */
.pkbtn{display:flex;align-items:center;width:100%;text-align:left;font:inherit;cursor:pointer}
.pkbtn .ph{color:var(--label-3)}
.tp{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;height:220px;margin-top:10px}
.tp-band{position:absolute;left:12%;right:12%;top:50%;height:44px;margin-top:-22px;border-radius:14px;background:var(--fill);pointer-events:none}
.wheel{position:relative;width:88px;height:220px;overflow-y:auto;scroll-snap-type:y mandatory;padding:88px 0;box-sizing:border-box;scrollbar-width:none;-webkit-mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.wheel::-webkit-scrollbar{display:none}
.wv{height:44px;display:grid;place-items:center;scroll-snap-align:center;font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--label-3);transition:color .15s,transform .15s}
.wv.on{color:var(--label);font-weight:700;transform:scale(1.08)}
.tp-sep{font-size:26px;position:relative;top:-2px}
.tp-q{margin-top:12px;flex-wrap:wrap}
.cal{margin-top:12px}
.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.cal-h b{font-size:17px;text-transform:capitalize}
.cal-h .ib{font-size:24px;width:44px;height:44px}
.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.cal-w{font-size:12px;font-weight:600;color:var(--label-3);padding:4px 0}.cal-w.su{color:var(--accent-ink)}
.cal-d{height:44px;border-radius:22px;font-size:16px;font-variant-numeric:tabular-nums;color:var(--label)}
.cal-d.su{font-weight:700;color:var(--accent-ink)}
.cal-d.today{box-shadow:inset 0 0 0 1.5px var(--label-3)}
.cal-d.on{background:var(--brand);color:#fff;box-shadow:none}
.cal-d:active{background:var(--fill)}

/* ===== 2.9 — after the November 2026 review: edges, touch areas, timing ===== */
:root{--field-bd:#8C8F88}
:root[data-theme="dark"]{--field-bd:#6E6E69}

/* a field has an edge you can see (3:1 against its surface); hints inside it pass contrast on every browser */
.inp{box-shadow:inset 0 0 0 1px var(--field-bd)}
.inp:focus{box-shadow:inset 0 0 0 2px var(--brand)}
.field.bad .inp{box-shadow:inset 0 0 0 2px var(--bad)}
.inp::placeholder{color:var(--label-3);opacity:1}
.sw{box-shadow:inset 0 0 0 1px var(--field-bd)}.sw.on{box-shadow:none}
:root[data-theme="dark"] .sw.on::after{background:#fff}
select.inp{appearance:none;-webkit-appearance:none;padding-right:40px;background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B7E78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}

/* small controls keep their look but answer to a 44px area */
.btn.sm,.seg button,.tbtn,.sw,button.tag{position:relative}
.btn.sm::before,.seg button::before,.tbtn::before,button.tag::before{content:"";position:absolute;inset:-4px 0}
.sw::before{content:"";position:absolute;inset:-6px}
.sec .lnk{min-height:44px}
.mh-stack{min-height:44px}
.lh-edit{width:44px;height:44px;border-radius:22px}

/* every control answers the finger */
.chip,.ib,.mh-btn,.pray{transition:transform 120ms cubic-bezier(.2,.8,.2,1),background-color 200ms}
.chip:active,.mh-btn:active,.pray:active{transform:scale(.96)}
.ib:active{transform:scale(.92)}
.lnk:active,button.tag:active,.seg button:active,.mseg button:active{opacity:.55}
.tabbar button{transition:background-color 200ms,color 200ms,transform 120ms}
.pray.on{color:#fff}

/* a redraw in place is not an arrival */
.screen.keep .mbody,.screen.keep .rg .rf{animation:none}

/* sheet, dimming and the page behind move as one */
.sheet-wrap{animation:scrimIn 240ms ease-out;padding-bottom:var(--kb,0px)}
@keyframes scrimIn{from{background-color:transparent}}
.sheet{animation:sheetUp 360ms cubic-bezier(.32,.72,0,1)}
.sheet:focus{outline:none}
.screen{transition:transform 300ms cubic-bezier(.32,.72,0,1),border-radius 300ms cubic-bezier(.32,.72,0,1)}
body.sheeted #app .screen{transition-duration:360ms}
body.sheeted .tabbar{transition:transform 360ms cubic-bezier(.32,.72,0,1),opacity 240ms}
/* a sheet under another sheet steps back too */
.sheet-wrap:has(~ .sheet-wrap) .sheet{transform:scale(.96) translateY(-8px);transition:transform 360ms cubic-bezier(.32,.72,0,1)}
/* a message is never under the sheet it talks about */
.toast{z-index:60}

/* offline: short, in the free middle of the top bar, never over the title */
.offl{top:calc(10px + var(--safe-t));height:36px;max-width:calc(100% - 128px);padding:0 4px 0 12px}
.offl span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.offl b{flex:none;height:28px;border-radius:14px}

/* «Экраны»: the next/previous bar floats on its own ground instead of lying see-through on the slides */
.stickbar{bottom:calc(96px + var(--safe-b));padding:8px;margin-left:-8px;margin-right:-8px;border-radius:34px;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--gsh),inset 0 0 0 1px var(--gbd)}
.stickbar .btn.lt{background:var(--card-2)}

/* details */
.sdot.ok{display:none}                                   /* the dot speaks only when something is wrong */
.sun-day .sd-t{font-variant-numeric:normal;text-align:right;min-width:52px}   /* tabular ones left holes: «1 0:00» */
.lyr .cs i{font-size:.9em}                               /* a musician reads the chord first */
.iosadd{background:rgba(0,0,0,.18)}
.mscr .mseg .thumb{background:var(--hero)}
.auth .btn,.auth .wbtn{flex:none}
.ckey{height:clamp(46px,8.5vh,60px)}.cboxes{margin-top:clamp(12px,3vh,28px)}
@media (prefers-reduced-transparency:reduce){.topbar{background:var(--ground)!important}.stickbar{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* a phone on its side: the bars take less of the little height there is */
@media (orientation:landscape) and (max-height:500px){.tabbar{height:48px;bottom:calc(8px + var(--safe-b))}.tabbar button{flex-direction:row;gap:6px;height:40px}.scr{padding-bottom:calc(72px + var(--safe-b))}}
/* less motion: nothing slides or bounces, but things still fade in and colours still change */
@media (prefers-reduced-motion:reduce){
 .sheet,.toast{animation:fadeIn 160ms ease-out both!important}
 .sheet-wrap{animation:scrimIn 160ms ease-out both!important}
 .sw,.chip,.seg button,.tabbar button,.btn{transition:background-color 160ms,color 160ms!important}
 .chip:active,.mh-btn:active,.pray:active,.ib:active{transform:none;opacity:.7}
}
/* a long list (songs, people): rows beyond the first screens are laid out only when scrolled to */
.list>.row:nth-child(n+30){content-visibility:auto;contain-intrinsic-size:auto 64px}
/* «Версии» */
.ver .card{padding:16px 18px}
.ver .card>b{display:block;font-size:17px}
.ver ul{margin:8px 0 0;padding-left:20px;color:var(--label-2);font-size:15px;line-height:1.45}
.ver li+li{margin-top:6px}

/* Конспекты */
.nlist{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.nrow{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:16px 18px;width:100%}
.nrow b{font-size:17px;line-height:22px}
.nr-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:13px;color:var(--label-2)}
.nr-text{color:var(--label-2);font-size:15px;line-height:21px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nr-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.nr-tags i{font-style:normal;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:10px;background:var(--fill);color:var(--label-2)}
.nr-tags i.t{color:var(--accent-ink,var(--brand))}
.ntitle{display:block;width:100%;border:0;background:none;outline:none;padding:0;margin:8px 0 2px;font:700 28px/34px var(--font);color:var(--label);letter-spacing:-.01em}
.ntitle::placeholder{color:var(--label-3);opacity:1}
.nmeta{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;color:var(--label-2)}
.nsaved{font-size:13px;color:var(--label-3);padding-right:6px}
.nbody{display:block;width:100%;min-height:180px;margin-top:6px;border:0;border-radius:20px;background:var(--card);padding:16px 18px;font:17px/26px var(--font);color:var(--label);resize:none;outline:none;box-shadow:inset 0 0 0 1px var(--field-bd)}
.nbody:focus{box-shadow:inset 0 0 0 2px var(--brand)}
.nbody::placeholder{color:var(--label-3);opacity:1}
.nverse{position:relative;margin:18px 0 0;padding:2px 0 2px 18px;border-left:3px solid var(--brand)}
.nverse cite{display:flex!important;align-items:center;justify-content:space-between}
.nverse p{margin:0;font-family:var(--serif);font-size:18px;line-height:28px}
.nverse sup{font-family:var(--font);font-size:11px;color:var(--label-3);margin:0 3px 0 2px}
.nverse cite{display:block;font-style:normal;margin-top:6px}
.nverse cite .lnk{font-weight:700;font-size:14px;color:var(--label);min-height:44px}
.nverse .nv-x{color:var(--label-3);background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nadd{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:12px 0 4px;font-size:16px;font-weight:600;color:var(--accent-ink,var(--brand))}
.nread{margin-top:14px;white-space:pre-wrap;font-size:17px;line-height:26px}

/* Иконки служений: цветная плитка, как при настройке церкви */
.rico.mk,.pmi.mk{background:var(--kw);color:var(--kc)}
:root[data-theme="dark"] .mk{background:color-mix(in srgb,var(--kc) 38%,#17171A);color:color-mix(in srgb,var(--kw) 88%,#fff);filter:none}

/* Кабинет пастора и задачи */
.pstats{margin-top:14px}
.pstat{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:6px;min-height:96px;padding:16px 18px;text-align:left}
.pstat b{font-size:34px;line-height:36px;font-weight:700;font-variant-numeric:tabular-nums}
.pstat small{font-size:14px;line-height:18px;color:var(--label-2)}
.pstat.warn b{color:var(--bad)}
.ptask{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:10px}
.ptask .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ptask .tx b{font-size:17px;line-height:22px}
.ptask .tx small{font-size:13.5px;color:var(--label-2)}
.ptask .rico,.row.task .rico{background:var(--accent-tint);color:var(--accent-ink)}
.ptask.late .tx small:last-child,.row.task.late small{color:var(--bad)}
.row.task.done b{color:var(--label-3);text-decoration:line-through}
:root[data-theme="dark"] .ptask .rico,:root[data-theme="dark"] .row.task .rico{background:var(--ok-tint);color:var(--ok)}
/* длинный список конспектов: карточки ниже первого экрана раскладываются, только когда до них долистали */
.nlist>.nrow:nth-child(n+10){content-visibility:auto;contain-intrinsic-size:auto 132px}

:root{--brand-soft:#9CC283}:root[data-theme="dark"]{--brand-soft:#3E5534}
/* у каждой шторки есть «Закрыть»: без жеста и без касания фона (экранный диктор, клавиатура) */
.sheet{position:relative}
.sheet-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:22px;display:grid;place-items:center;color:var(--label-3);z-index:2}
.sheet-x:active{background:var(--fill)}
.sheet>h2{padding-right:40px}