/* Prayer Flint
   Layout: a lapis masthead holds the name, session line and tabs; below it the session is a rota of
   equal-size watch cards (one prayer at a time on a recessed tray), with the whole-team prayers and
   anything that needs a watch set above them. Scripture is always gold; the team's own words are ink. */
:root {
  --bg: #F3F4F7; --surface: #FFFFFF; --raised: #FAFBFD; --sunk: #EEF0F5;
  --ink: #121829; --ink-2: #2A3147; --muted: #4D556B; --line: #E3E6EE; --line-strong: #CCD2DF;
  --accent: #26408F; --accent-2: #3553B5; --accent-ink: #FFFFFF; --accent-soft: #E9EDF9;
  --gold: #9C6C0C; --gold-2: #C9963A; --gold-soft: #F7EFDD;
  --danger: #B3261E; --danger-soft: #FBE8E6;
  --c1: #2E7D6B; --c2: #A0472E; --c3: #6A4BB0; --c4: #B07A12; --c5: #2F6FB0; --c6: #A03A78;
  --mast: linear-gradient(135deg, #10172F 0%, #1A2758 55%, #26408F 100%);
  --mast-ink: #F5F0E4; --mast-muted: rgba(245, 240, 228, .72); --mast-line: rgba(245, 240, 228, .16); --mast-fill: rgba(255, 255, 255, .07);
  --shadow-sm: 0 1px 2px rgba(18, 24, 41, .05);
  --shadow: 0 1px 2px rgba(18, 24, 41, .04), 0 10px 28px -12px rgba(18, 24, 41, .16);
  --shadow-lg: 0 24px 60px -20px rgba(10, 16, 40, .35);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235E667D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chev-mast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23F5F0E4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --r: 16px; --r-md: 12px; --r-sm: 9px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0A0E1A; --surface: #121929; --raised: #161E31; --sunk: #0D1322;
  --ink: #ECEFF6; --ink-2: #C9CFDD; --muted: #A6AEC2; --line: #212A40; --line-strong: #2E3954;
  --accent: #A6B8F5; --accent-2: #C3D0F9; --accent-ink: #0A0E1A; --accent-soft: #1B2546;
  --gold: #E3BB66; --gold-2: #F0D08F; --gold-soft: #2A2316;
  --danger: #F2867E; --danger-soft: #3A1E1E;
  --c1: #5CC3A8; --c2: #E58C70; --c3: #AE95F0; --c4: #E6BA5A; --c5: #79AEEA; --c6: #E583BD;
  --mast: linear-gradient(135deg, #0B1026 0%, #142050 55%, #1E3374 100%);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -14px rgba(0, 0, 0, .6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .7);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238E97AD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0A0E1A; --surface: #121929; --raised: #161E31; --sunk: #0D1322;
  --ink: #ECEFF6; --ink-2: #C9CFDD; --muted: #A6AEC2; --line: #212A40; --line-strong: #2E3954;
  --accent: #A6B8F5; --accent-2: #C3D0F9; --accent-ink: #0A0E1A; --accent-soft: #1B2546;
  --gold: #E3BB66; --gold-2: #F0D08F; --gold-soft: #2A2316;
  --danger: #F2867E; --danger-soft: #3A1E1E;
  --c1: #5CC3A8; --c2: #E58C70; --c3: #AE95F0; --c4: #E6BA5A; --c5: #79AEEA; --c6: #E583BD;
  --mast: linear-gradient(135deg, #0B1026 0%, #142050 55%, #1E3374 100%);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -14px rgba(0, 0, 0, .6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .7);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238E97AD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: dark }

/* ---------- base ---------- */
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg); color: var(--ink); font: 1rem/1.55 var(--f-ui); -webkit-font-smoothing: antialiased }
[hidden] { display: none !important }
img { max-width: 100% }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
h1, h2, h3 { text-wrap: balance }
.app { max-width: 1400px; margin: 0 auto; padding-inline: 16px; padding-block: 16px 72px; display: grid; gap: 20px }
.label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums }

/* ---------- controls ---------- */
select, input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=search], textarea {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 12px; min-width: 0;
  transition: border-color .15s, box-shadow .15s }
select:hover, input:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)) }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) }
textarea { width: 100%; resize: vertical; min-height: 84px; line-height: 1.5 }
select { -webkit-appearance: none; appearance: none; background-image: var(--chev); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 12px; padding-right: 40px }

.btn { border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-sm); padding: 8px 14px; font-weight: 600; font-size: .93rem; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow-sm); transition: border-color .15s, background .15s, transform .1s }
.btn:hover { border-color: var(--accent) }
.btn:active { transform: translateY(1px) }
.btn.primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent) }
.btn.primary:hover { filter: brightness(1.06) }
.btn.gold { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--gold); box-shadow: none }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); box-shadow: none }
.btn.ghost:hover { color: var(--ink); background: var(--sunk) }
.btn.danger { color: var(--danger) }
.btn.sm { padding: 4px 10px; font-size: .8rem; border-radius: 7px }
.btn[data-armed] { background: var(--danger-soft); color: var(--danger); border-color: var(--danger) }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none }
.iconbtn { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 8px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: var(--muted); flex: none }
.iconbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent) }
.iconbtn:disabled { opacity: .4 }

/* ---------- masthead ---------- */
.mast { background: var(--mast); color: var(--mast-ink); border-radius: calc(var(--r) + 4px); box-shadow: var(--shadow-lg); padding: 22px 24px 14px;
  display: grid; gap: 18px; position: relative; overflow: hidden }
.mast::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 220px at 88% -40%, rgba(227, 187, 102, .22), transparent 70%), radial-gradient(500px 200px at 0% 120%, rgba(166, 184, 245, .14), transparent 70%) }
.mast > * { position: relative; z-index: 1 }
.mastTop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0 }
.emblem { width: 46px; height: 46px; flex: none; color: var(--mast-ink); padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid var(--mast-line) }
.emblem .core { fill: #E3BB66 }
.eyebrow { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #E3BB66 }
.brand h1 { font: 600 clamp(1.7rem, 3vw, 2.25rem)/1.05 var(--f-display); margin: 2px 0 0; letter-spacing: -.015em }
.brand p#sessionLine { margin: 6px 0 0; color: var(--mast-muted); font-size: .94rem; font-variant-numeric: tabular-nums }
.as { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9rem; color: var(--mast-muted) }
.as label { white-space: nowrap }
.mast select { background-color: var(--mast-fill); background-image: var(--chev-mast); border-color: var(--mast-line); color: var(--mast-ink) }
.mast select option { color: #121829; background: #fff }
.mast select:hover { border-color: rgba(245, 240, 228, .4) }
.mast .btn { background: var(--mast-fill); border-color: var(--mast-line); color: var(--mast-ink); box-shadow: none }
.mast .btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(245, 240, 228, .35); color: var(--mast-ink) }
.mast .btn.ghost { background: none; border-color: transparent; color: var(--mast-muted) }
.mast .btn.ghost:hover { color: var(--mast-ink); background: rgba(255, 255, 255, .08) }
#themeBtn { gap: 6px; white-space: nowrap }
#themeBtn .ti { font-size: 1rem; line-height: 1 }
#installBtn { white-space: nowrap }

.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin-inline: -4px; border-top: 1px solid var(--mast-line); padding-top: 12px }
.tabs::-webkit-scrollbar { display: none }
.tabs button { background: none; border: 0; padding: 8px 16px; border-radius: 999px; color: var(--mast-muted); font-weight: 600; font-size: .94rem; white-space: nowrap; transition: background .15s, color .15s }
.tabs button:hover { color: var(--mast-ink); background: rgba(255, 255, 255, .07) }
.tabs button[aria-selected=true] { background: var(--mast-ink); color: #121829; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .5) }
.tabs .n { font: 500 .8rem var(--f-mono); opacity: .75; margin-left: 4px }
.tabs .newn:not(:empty) { opacity: 1; color: #fff; background: #C2412F; border-radius: 999px; padding: 1px 7px; font: 700 .75rem var(--f-ui); letter-spacing: .03em }

.banner { background: var(--accent-soft); color: var(--ink); border-radius: var(--r-md); padding: 12px 16px; font-size: .94rem }
.banner.offline { background: var(--gold-soft) }

/* ---------- session ---------- */
.bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-sm) }
.field { display: grid; gap: 6px }
.field input[type=number] { width: 88px }
.bar .spacer { flex: 1 }
.barActions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }

.news { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; box-shadow: var(--shadow-sm) }
.news > .label { color: #C2412F; display: inline-flex; align-items: center; gap: 8px }
.news > .label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C2412F; box-shadow: 0 0 0 4px color-mix(in srgb, #C2412F 18%, transparent) }
.newsList { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 }
.alertAsk { font-size: .92rem; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap }
.newpill { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--danger-soft); color: var(--danger); font: 700 .75rem/1.6 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle }

.unassigned { display: grid; gap: 10px }
.ua-list { display: flex; flex-wrap: wrap; gap: 8px }
.ua { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 6px 6px 6px 14px; max-width: 100%; min-width: 0 }
.ua button.link { background: none; border: 0; padding: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px }
.ua button.link:hover { color: var(--accent) }
.ua select { padding: 5px 30px 5px 10px; font-size: .86rem; background-position: right 10px center }
.uanote { font-size: .8rem; color: var(--muted); white-space: nowrap }

.whole { background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden }
.whole > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 18px;
  background: linear-gradient(90deg, var(--gold-soft), color-mix(in srgb, var(--gold-soft) 40%, var(--surface))); border-bottom: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line)) }
.whole > header .label { color: var(--gold) }
.whole .wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px; padding: 8px }

.awayrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.awayrow .chip { padding: 3px 4px 3px 12px; color: var(--muted) }

.watches { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: stretch }
.watch { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: box-shadow .2s, transform .2s }
.watch:hover { box-shadow: 0 1px 2px rgba(18, 24, 41, .05), 0 16px 36px -14px rgba(18, 24, 41, .22) }
.watch.me { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), var(--shadow) }
.watch > header { padding: 16px 16px 12px; display: grid; gap: 3px }
.wtop { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.wtop .label { color: var(--gold) }
.wtime { font: 500 .8rem var(--f-mono); color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; white-space: nowrap }
.whead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px }
.whead h3 { min-width: 0; font: 600 1.35rem/1.15 var(--f-display); margin: 0; letter-spacing: -.01em }
.whead .btn.sm { flex: none; opacity: .75 }
.whead .btn.sm:hover { opacity: 1 }
.you { font: 700 .75rem/1.7 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; background: var(--gold-soft); color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 999px; padding: 0 7px; vertical-align: 3px; margin-left: 8px }
.wload { font-size: .86rem; color: var(--muted) }
.wsecs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px }

/* the tray: one prayer at a time, same height on every card */
.assigned { margin: 0 12px; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-md); display: grid; grid-template-rows: auto 1fr; height: 228px; min-height: 0; overflow: hidden }
.ahead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 8px 6px 14px; border-bottom: 1px solid var(--line) }
.pager { display: inline-flex; align-items: center; gap: 2px }
.pg { width: 28px; height: 28px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 50%; color: var(--ink); font-size: 1.05rem; line-height: 1; padding: 0 0 2px; cursor: pointer; box-shadow: var(--shadow-sm) }
.pg:hover { border-color: var(--accent); color: var(--accent) }
.pgpos { font: 500 .8rem var(--f-mono); color: var(--muted); min-width: 54px; text-align: center; font-variant-numeric: tabular-nums }
.slides { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; counter-reset: pt; min-height: 0 }
.slides::-webkit-scrollbar { display: none }
.slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; overflow: hidden }
.slide .pt { height: 100%; align-content: start; padding: 12px 10px 12px 12px; border-radius: 0 }
.slide .pt:hover { background: color-mix(in srgb, var(--surface) 55%, transparent) }
.slide .pt .txt { -webkit-line-clamp: 4 }
.watch .wempty { margin: 0 12px; min-height: 228px; display: grid; place-content: center; text-align: center; padding: 16px; color: var(--muted); font-size: .92rem;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--raised) }
.wadd { display: grid; gap: 8px; padding: 12px; margin-top: auto }
.wadd select { width: 100%; font-size: .9rem; padding-block: 9px; padding-left: 14px; background-color: var(--raised) }

/* a prayer line, used on watches, the whole-team card and the tray */
.points { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; counter-reset: pt }
.ptrow { display: grid; grid-template-columns: 1fr auto; align-items: start }
.pt { width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-sm); padding: 10px; display: grid; grid-template-columns: 22px 1fr; gap: 3px 8px; counter-increment: pt; transition: background .15s }
.pt:hover { background: var(--sunk) }
.pt::before { content: counter(pt, decimal-leading-zero); grid-row: span 3; font: 500 .75rem var(--f-mono); color: var(--muted); padding-top: 4px }
.pt .subj { font-weight: 650; font-size: 1rem; display: flex; align-items: center; gap: 7px; min-width: 0 }
.pt .txt { font-size: .92rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.txt.pp { color: var(--ink-2) }
.txt.pp b { display: inline-block; margin-right: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); vertical-align: 1px }
.txt.nopp { font-style: italic }
.ref { font: italic 400 .96rem var(--f-display); color: var(--gold) }
.pt .ph { font: 400 .8rem var(--f-ui); color: var(--muted); font-style: normal }
.rm, .chip .x { border: 0; background: none; color: var(--muted); border-radius: 50%; line-height: 1; cursor: pointer }
.rm { width: 28px; height: 28px; margin: 8px 6px 0 0; font-size: 1.1rem }
.rm:hover, .chip .x:hover { background: var(--danger-soft); color: var(--danger) }
@media (hover: hover) { .ptrow .rm { opacity: 0; transition: opacity .15s } .ptrow:hover .rm, .ptrow .rm:focus-visible { opacity: 1 } }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted) }
.c1 { --cat: var(--c1) } .c2 { --cat: var(--c2) } .c3 { --cat: var(--c3) } .c4 { --cat: var(--c4) } .c5 { --cat: var(--c5) } .c6 { --cat: var(--c6) }
.dot[class*=" c"] { background: var(--cat); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 16%, transparent) }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--surface); white-space: nowrap; transition: border-color .15s, background .15s }
button.chip:hover { border-color: var(--accent) }
.chip[aria-pressed=true] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.chip.sm { font-size: .8rem; padding: 2px 4px 2px 9px; gap: 5px; background: var(--raised) }
.chip.sm .mono { color: var(--muted); font-size: .75rem }
.chip .x { width: 20px; height: 20px; font-size: .99rem; padding: 0 }
.pill { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px }
.pill.active { background: var(--accent-soft); color: var(--accent) }
.pill.answered { background: var(--gold-soft); color: var(--gold) }

/* ---------- inventory ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.toolbar input[type=search] { flex: 1 1 240px; padding-block: 10px }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--surface); padding: 3px; gap: 2px }
.seg button { border: 0; background: none; padding: 6px 14px; font-size: .9rem; font-weight: 600; color: var(--muted); border-radius: 999px }
.seg button[aria-pressed=true] { background: var(--accent-soft); color: var(--accent) }
.chips { display: flex; gap: 6px; flex-wrap: wrap }
.group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm) }
.group > h3 { margin: 0; padding: 12px 18px; display: flex; align-items: center; gap: 10px; font: 600 1.12rem var(--f-display); background: var(--raised); border-bottom: 1px solid var(--line) }
.group > h3 .mono { font-size: .8rem; color: var(--muted); font-weight: 500; margin-left: auto }
.row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) minmax(120px, 1fr) 140px; gap: 16px; align-items: start; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 12px 18px; transition: background .15s }
.group .row:first-of-type { border-top: 0 }
.row:hover { background: var(--sunk) }
.row > * { min-width: 0 }
.row .subj { font-weight: 650 }
.row .kind { display: block; font-size: .8rem; color: var(--muted); font-weight: 500; margin-top: 2px }
.row .txt { font-size: .94rem; color: var(--ink-2) }
.row .who { font-size: .86rem; color: var(--muted); text-align: right }
.row .who b { color: var(--ink); font-weight: 600 }
@media (max-width: 760px) {
  .row { grid-template-columns: 1fr auto; gap: 6px 12px }
  .row .txt, .row .ref { grid-column: 1 / -1 }
  .row .who { grid-row: 1; grid-column: 2 }
}

/* ---------- answered ---------- */
.praise { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; text-align: left; display: grid; gap: 8px; min-width: 0; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .2s }
.pcard:hover { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); box-shadow: var(--shadow) }
.pcard h3 { margin: 0; font: 600 1.25rem var(--f-display) }
.pcard .note { background: var(--gold-soft); border-radius: var(--r-sm); padding: 10px 12px; font: italic 400 1rem/1.45 var(--f-display) }
.pcard .meta { font-size: .8rem; color: var(--muted) }

/* ---------- team & categories ---------- */
.setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: grid; gap: 14px; min-width: 0; box-shadow: var(--shadow-sm) }
.panel h2 { margin: 0; font: 600 1.45rem var(--f-display) }
.panel p.help { margin: 0; color: var(--muted); font-size: .94rem }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.list li input { flex: 1 1 140px }
.list .idx { font: 500 .8rem var(--f-mono); color: var(--muted); width: 58px; flex: none }
.addrow { display: flex; gap: 8px }
.addrow input { flex: 1 }

.empty { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 32px 24px; display: grid; gap: 12px; justify-items: start }
.empty h2 { margin: 0; font: 600 1.55rem var(--f-display) }
.empty p { margin: 0; color: var(--muted); max-width: 60ch }
.steps { margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 4px }

/* ---------- detail drawer ---------- */
#drawer { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: flex-end }
#drawer .scrim { position: absolute; inset: 0; background: rgba(8, 12, 26, .5); backdrop-filter: blur(2px) }
#drawer .sheet { position: relative; width: min(var(--sheetW, 680px), 100%); height: 100%; background: var(--surface); overflow-y: auto;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 24px calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 18px; align-content: start; box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .45) }
.dtop { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.sheet h2 { margin: 0; font: 600 1.9rem/1.12 var(--f-display); letter-spacing: -.01em }
.sheet .kind { color: var(--muted); font-size: .91rem; margin-top: 4px }
.block { display: grid; gap: 8px }
.block p { margin: 0 }
.ppoint { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 10px }
.ppoint .label { color: var(--accent) }
.ppoint textarea { background: var(--surface) }
.pptext { margin: 0; font: 600 1.12rem/1.45 var(--f-ui); white-space: pre-wrap }
.scripture { margin: 0; border-left: 2px solid var(--gold-2); padding: 6px 0 6px 16px; display: grid; gap: 6px }
.scripture .ref { font-size: 1.05rem; font-style: normal; font-weight: 600; letter-spacing: .01em }
.scripture q { font: italic 400 1.08rem/1.55 var(--f-display); quotes: none; white-space: pre-wrap; color: var(--ink-2) }
.phases { margin: 0; padding-left: 22px; display: grid; gap: 8px }
.phases li::marker { font: 500 .8rem var(--f-mono); color: var(--muted) }
.phases .ref { font-size: .94rem }
.actions { display: flex; flex-wrap: wrap; gap: 8px }
.inline { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; display: grid; gap: 10px }
.compose .seg { justify-self: start }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.notes li { display: grid; gap: 3px; padding-left: 14px; border-left: 2px solid var(--line-strong) }
.notes li.update { border-color: var(--accent) }
.notes li.answered { border-color: var(--gold-2) }
.notes .nh { font-size: .8rem; color: var(--muted) }
.notes .nh b { color: var(--ink) }
.notes .nt { white-space: pre-wrap; font-size: .97rem }
.notes li.prayer .nt { font: italic 400 1.04rem/1.5 var(--f-display) }
.form { display: grid; gap: 14px }
.form .field input, .form .field select { width: 100% }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
@media (max-width: 480px) { .two { grid-template-columns: 1fr } }
.radios { display: flex; gap: 8px }
.radios label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 14px; background: var(--surface); font-weight: 600; font-size: .94rem; cursor: pointer }
.radios label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent) }

#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-size: .94rem; font-weight: 500; z-index: 30; max-width: calc(100% - 32px); box-shadow: var(--shadow-lg) }
#toast.err { background: var(--danger); color: #fff }

/* ---------- sign-in ---------- */
#login { position: fixed; inset: 0; z-index: 40; background: var(--mast); display: grid; place-items: center; padding-inline: 16px }
.loginCard { width: min(400px, 100%); background: var(--surface); border-radius: calc(var(--r) + 4px); box-shadow: var(--shadow-lg); padding: 30px 28px; display: grid; gap: 12px }
.loginCard .emblem { color: var(--accent); background: var(--accent-soft); border-color: transparent }
.loginCard h2 { margin: 4px 0 0; font: 600 2rem var(--f-display); letter-spacing: -.01em }
.loginCard p { margin: 0; color: var(--muted) }
.loginCard input { width: 100%; padding-block: 11px }
.loginCard .btn.primary { justify-content: center; padding-block: 11px; margin-top: 4px }
.loginCard .loginErr { color: var(--danger); font-size: .94rem }

/* ---------- offline: most things save to the phone; deleting and team/category changes wait ---------- */
.is-offline [data-act="del"], .is-offline [data-act="delAns"], .is-offline [data-act="trem"], .is-offline [data-act="crem"],
.is-offline [data-act="csugg"], .is-offline [data-act="tup"], .is-offline [data-act="tdown"], .is-offline .addrow { display: none !important }
.is-offline .panel input { pointer-events: none; opacity: .6 }
.waitpill { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--gold-soft); color: var(--gold);
  border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent); font: 700 .75rem/1.6 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; white-space: nowrap }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .app { padding-block: 10px 64px; gap: 16px }
  .mast { padding: 18px 16px 10px; border-radius: var(--r) }
  .emblem { width: 40px; height: 40px; padding: 7px }
  .bar { padding: 14px }
  .bar .spacer { display: none }
  .barActions { width: 100% }
  .barActions .btn.primary { flex: 1; justify-content: center }
  #drawer .sheet { padding-inline: 18px }
}
@media (prefers-reduced-motion: no-preference) { #drawer .sheet { animation: slide .22s cubic-bezier(.2, .8, .2, 1) } @keyframes slide { from { transform: translateX(28px); opacity: .5 } } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

/* ---------- answered: celebration ---------- */
.answeredView { display: grid; gap: 18px }
.celebrate { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: stretch;
  background: radial-gradient(520px 240px at 12% 0%, color-mix(in srgb, var(--gold-2) 28%, transparent), transparent 70%), linear-gradient(135deg, var(--gold-soft), var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); border-radius: calc(var(--r) + 4px); padding: 26px 28px; box-shadow: var(--shadow) }
.bignum { display: grid; align-content: center; gap: 2px }
.bignum .num { font: 600 clamp(4rem, 11vw, 6.5rem)/.9 var(--f-display); color: var(--gold); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums }
.bignum .numlabel { font: 600 1.5rem/1.2 var(--f-display); color: var(--ink) }
.bignum .numsub { font-size: .94rem; color: var(--muted); margin-top: 4px }
.stats { margin: 0; display: grid; gap: 10px; align-content: center }
.stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 16px; background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--line); border-radius: var(--r-md) }
.stats dt { font-size: .9rem; color: var(--muted); font-weight: 600 }
.stats dd { margin: 0; font: 600 1.7rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums }
.answeredView .toolbar .spacer { flex: 1 }
.pcard { padding: 0; overflow: hidden; display: flex; flex-direction: column }
.pcardOpen { text-align: left; background: none; border: 0; padding: 18px 18px 12px; display: grid; gap: 8px; width: 100%; flex: 1; align-content: start }
.pcardOpen:hover h3 { color: var(--accent) }
.pcpoint { font-size: .94rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.pcard footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px 10px 18px; border-top: 1px solid var(--line); background: var(--raised) }
@media (max-width: 640px) { .celebrate { grid-template-columns: 1fr; padding: 22px 20px } }

/* watch card fit-and-finish */
.wmeta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px }
.wmeta .btn.sm { margin-right: -6px; opacity: .8 }
.wmeta .btn.sm:hover { opacity: 1 }
.assigned, .watch .wempty { height: 246px; min-height: 246px }
.ahead .label { white-space: nowrap; font-size: .75rem; letter-spacing: .09em }
.pgpos { min-width: 44px }
.slide .pt .txt { -webkit-line-clamp: 3 }
.slide .pt .ref { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }

/* keep wide rows from stretching the page on phones */
.app > *, #main, #main > div, .unassigned, .ua-list, .watches > *, .news, .newsList { min-width: 0 }
.ua { flex-wrap: wrap; row-gap: 6px }
.ua button.link { max-width: 100% }
.ua select { max-width: 100% }
@media (max-width: 640px) { .ua { width: 100% } .ua select { flex: 1 } }
.newsList { flex: 1 1 220px }
.newsList .chip, .awayrow .chip { max-width: 100%; white-space: normal; text-align: left }

/* ---------- watch card: compact "Prayers assigned" box ---------- */
button.assigned { font: inherit; color: inherit; text-align: left; cursor: pointer; width: auto; margin: 0 12px; padding: 14px 16px 12px; height: 246px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .15s, background .15s, box-shadow .15s }
button.assigned:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--sunk)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent) }
button.assigned .ahead { display: flex; justify-content: space-between; align-items: baseline; padding: 0; border: 0 }
.acount { font: 600 2rem/1 var(--f-display); color: var(--accent); font-variant-numeric: tabular-nums }
.alist { display: grid; gap: 7px; align-content: start; min-width: 0 }
.aitem { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: .94rem }
.aname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.amore { font-size: .88rem; color: var(--muted); padding-left: 16px }
.ago { font-size: .86rem; font-weight: 700; color: var(--accent); letter-spacing: .01em }

/* ---------- prayer panel: slide through a watch ---------- */
.pnav { position: sticky; top: calc(-18px - env(safe-area-inset-top, 0px)); z-index: 2; margin: -18px -24px 0; padding: 14px 24px 10px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); display: grid; gap: 10px }
.pnavTop { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.pnavTop .label { color: var(--gold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ptabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 2px; margin-inline: -2px }
.ptabs::-webkit-scrollbar { display: none }
.ptab { flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 7px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 5px 12px 5px 6px; font-size: .86rem; font-weight: 600; color: var(--muted) }
.ptab .mono { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--sunk); font-size: .75rem; color: var(--muted) }
.ptab:hover { border-color: var(--accent); color: var(--ink) }
.ptab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.ptab[aria-selected="true"] .mono { background: color-mix(in srgb, var(--accent-ink) 22%, transparent); color: var(--accent-ink) }
@media (max-width: 640px) { .pnav { margin-inline: -18px; padding-inline: 18px } }
@media (prefers-reduced-motion: no-preference) {
  #dHead.from-right { animation: inRight .22s cubic-bezier(.2, .8, .2, 1) }
  #dHead.from-left { animation: inLeft .22s cubic-bezier(.2, .8, .2, 1) }
  @keyframes inRight { from { transform: translateX(26px); opacity: 0 } }
  @keyframes inLeft { from { transform: translateX(-26px); opacity: 0 } }
}

/* ---------- watch card: every prayer one tap away, card size fixed ---------- */
div.assigned { margin: 0 12px; height: 246px; display: grid; grid-template-rows: auto 1fr; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; padding: 0 }
div.assigned .ahead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 6px 8px 14px; border-bottom: 1px solid var(--line) }
div.assigned .ahead .btn.sm { color: var(--accent); font-weight: 700 }
.alist { list-style: none; margin: 0; padding: 6px; overflow-y: auto; min-height: 0; display: grid; gap: 2px; align-content: start; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent }
.alist li { min-width: 0 }
button.aitem { width: 100%; font: inherit; color: inherit; background: none; border: 0; border-radius: var(--r-sm); padding: 7px 8px; display: flex; align-items: center; gap: 8px;
  text-align: left; cursor: pointer; font-weight: 600; font-size: .94rem; min-width: 0 }
button.aitem:hover { background: var(--surface) }
.anum { font: 500 .75rem var(--f-mono); color: var(--muted); min-width: 18px; text-align: right; font-variant-numeric: tabular-nums }

/* heading sits above the list box, not inside it */
.atitle { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; padding: 0 12px 8px 16px; min-height: 34px }
.atitle .btn.sm { color: var(--accent); font-weight: 700; margin-right: -4px }
div.assigned { height: 212px; grid-template-rows: 1fr }
.watch .wempty { height: 254px; min-height: 254px }

/* ---------- watch card: arrows on their own row, one prayer in the box ---------- */
.apager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 8px }
.apager .pg { width: 34px; height: 34px; font-size: 1.2rem }
.apager .pg:disabled { opacity: .35; cursor: default }
.apager .pgpos { flex: 1; text-align: center; font-size: .8rem }
div.assigned { height: 172px; display: block; padding: 0 }
div.assigned .slides { height: 100% }
div.assigned .slide .pt { padding: 12px 12px 12px 10px }
div.assigned .slide .pt .txt { -webkit-line-clamp: 3 }

/* room between the arrows and the "5 of 10" count */
.pager { gap: 10px }
.pager .pgpos { min-width: 68px; padding-inline: 4px }
.pnav .pager .pg { width: 32px; height: 32px; flex: none }

/* answering from the main writing box */
.compose.answering { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 35%, var(--line)) }
.compose.answering textarea { border-color: color-mix(in srgb, var(--gold) 45%, var(--line-strong)) }
.kindHelp { margin: 0; font-size: .9rem; color: var(--gold); font-weight: 600 }
#kindSeg button[data-kind="answered"][aria-pressed="true"] { background: var(--gold-soft); color: var(--gold) }
.compose.answering #kindSeg button[data-kind="answered"][aria-pressed="true"] { background: var(--surface) }

/* space between "Intercessory Prayer · RWCMINC" and the title */
.eyebrow { line-height: 1.2; margin-bottom: 8px }
.brand h1 { margin-top: 0 }
.brand p#sessionLine { margin-top: 8px }

/* text boxes grow with their text; long text scrolls inside instead of hiding */
textarea { overflow-y: auto; transition: height .12s ease-out }
@media (hover: none) { textarea { resize: none } }
.eyebrow { margin-bottom: 10px }
/* empty session sections take no space */
#news:empty, #ua:empty, #whole:empty, #awayRow:empty { display: none }

/* phone portrait: nothing in the prayer panel may be wider than the screen */
#drawer .sheet { grid-template-columns: minmax(0, 1fr); overflow-x: hidden }
#drawer .sheet > *, .pnav > *, #dHead > div > * { min-width: 0 }
.pnav { grid-template-columns: minmax(0, 1fr) }
.pnavTop { min-width: 0 }
.pnavTop .label { flex: 1 1 auto }
.pnavTop .pager { flex: none }
.sheet h2, .pptext, .block p, .scripture q, .notes .nt { overflow-wrap: anywhere }
@media (max-width: 640px) {
  #drawer .sheet { width: 100%; padding-inline: 16px }
  .pnav { margin-inline: -16px; padding-inline: 16px }
  .pnavTop .label { font-size: .75rem; letter-spacing: .07em }
  .ptab { max-width: 70vw }
}

/* iPhone/iPad: 16px text in boxes stops Safari from zooming in when you tap to type */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1rem) }
}

/* ---------- watches per row ---------- */
.colsRow { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: -6px }
.colsSeg button { padding: 4px 12px; font-size: .8rem; min-width: 34px }
/* Auto: as many as fit on wide screens, two on an upright iPad, one on a phone */
.watches[data-cols="auto"] { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
@media (max-width: 900px) { .watches[data-cols="auto"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .watches[data-cols="auto"] { grid-template-columns: minmax(0, 1fr) } }
/* Chosen counts */
.watches[data-cols="1"] { grid-template-columns: minmax(0, 1fr) }
.watches[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.watches[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.watches[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) }
/* Keep cards readable: no more than 2 on an upright iPad, 1 on a phone, whatever is chosen */
@media (max-width: 900px) {
  .watches[data-cols="3"], .watches[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .colsSeg button[data-cols="3"], .colsSeg button[data-cols="4"] { display: none }
}
@media (max-width: 560px) {
  .watches[data-cols] { grid-template-columns: minmax(0, 1fr) }
  .colsRow { display: none }
}

/* ---------- header: logo in the top corner, ministry name beside the title ---------- */
.brand { align-items: flex-start }
.emblem { margin-top: -4px }
.titleRow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px }
.titleRow h1 { margin: 0 }
.titleRow .eyebrow { margin: 0; padding-left: 14px; border-left: 1px solid var(--mast-line); line-height: 1.4 }
.brand p#sessionLine { margin-top: 10px }
@media (max-width: 640px) {
  .titleRow { flex-direction: column; align-items: flex-start }
  .titleRow .eyebrow { padding-left: 0; border-left: 0 }
  .brand p#sessionLine { margin-top: 6px }
}

/* ---------- beacon: a new request's dot pulses until it is opened ---------- */
.dot.beacon { position: relative; background: var(--cat, #C2412F) }
.dot.beacon::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--cat, #C2412F); opacity: 0 }
@media (prefers-reduced-motion: no-preference) {
  .dot.beacon::after { animation: beacon 1.6s ease-out infinite }
  @keyframes beacon { 0% { transform: scale(.6); opacity: .9 } 80%, 100% { transform: scale(1.9); opacity: 0 } }
}
@media (prefers-reduced-motion: reduce) { .dot.beacon::after { opacity: .7 } }

/* ---------- this device: notifications & install ---------- */
.dev { display: grid; gap: 8px; justify-items: start; padding-top: 12px; border-top: 1px solid var(--line) }
.pstate { margin: 0; font-size: .94rem; color: var(--ink-2) }
.pstate.on { color: var(--ink) }
.pstate.on::before { content: "●"; color: #2E9E6B; margin-right: 6px; font-size: .8em; vertical-align: 1px }
.installSteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px }
.installSteps li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; line-height: 1.5 }
.stepn { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .91rem }
.ico { width: 18px; height: 18px; vertical-align: -3px; color: var(--accent) }

/* ---------- scripture references and their pop-up ---------- */
.sref { color: var(--gold); cursor: pointer; text-decoration: underline dotted color-mix(in srgb, var(--gold) 60%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  border-radius: 4px; -webkit-tap-highlight-color: transparent; outline-offset: 2px }
.sref:hover, .sref.open { background: var(--gold-soft); text-decoration-style: solid }
.ref .sref { color: inherit }
#refPop { position: fixed; z-index: 60; background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain; padding: 0 }
.rpHead { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px; background: var(--gold-soft); border-bottom: 1px solid var(--line) }
.rpHead b { font: 600 1rem var(--f-display); color: var(--gold) }
.rpHead span { font: 700 .75rem var(--f-ui); letter-spacing: .1em; color: var(--muted) }
.rpBody { padding: 10px 14px 12px; display: grid; gap: 6px; font: 400 1.02rem/1.55 var(--f-display) }
.rpBody p { margin: 0 }
.rpBody sup { font: 600 .75rem var(--f-mono); color: var(--gold); margin-right: 4px; vertical-align: .45em }
.rpWait { color: var(--muted); font: italic .94rem var(--f-ui) }

/* ---------- prayer requests tab ---------- */
.prgroup .row .subj .dot { display: inline-block; margin-right: 8px; vertical-align: 2px }
.tabs .n.pulsing::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #E0604A; vertical-align: 1px; box-shadow: 0 0 0 0 rgba(224, 96, 74, .7) }
@media (prefers-reduced-motion: no-preference) { .tabs .n.pulsing::after { animation: tabPulse 1.6s ease-out infinite } @keyframes tabPulse { 70% { box-shadow: 0 0 0 7px rgba(224, 96, 74, 0) } 100% { box-shadow: 0 0 0 0 rgba(224, 96, 74, 0) } } }

/* Reduce Motion on: a gentle glow instead of a moving ring, so new requests still stand out */
@media (prefers-reduced-motion: reduce) {
  .dot.beacon::after { opacity: 1; transform: scale(1.5); animation: beaconGlow 2.4s ease-in-out infinite !important }
  .tabs .n.pulsing::after { animation: beaconGlow 2.4s ease-in-out infinite !important }
  @keyframes beaconGlow { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
}

/* ---------- pinned posts and requests ---------- */
#pins:empty, #prPins:empty { display: none }
.pins { display: grid; gap: 10px }
.pin { background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-radius: var(--r); padding: 14px 18px; display: grid; gap: 6px; box-shadow: var(--shadow-sm) }
.pin.session { background: linear-gradient(135deg, var(--gold-soft), var(--surface) 65%) }
.pinTop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.pinTop .label { color: var(--gold); display: inline-flex; align-items: center; gap: 6px }
.pinIco { width: 14px; height: 14px; flex: none; color: var(--gold); vertical-align: -2px; margin-right: 4px }
.pinMeta { font-size: .8rem; color: var(--muted) }
.pin h3 { margin: 0; font: 600 1.25rem/1.25 var(--f-display) }
.pinBody { margin: 0; white-space: pre-wrap; font-size: .97rem; color: var(--ink-2); line-height: 1.55 }
.pinActs { display: flex; gap: 6px; justify-content: flex-end }
.pinReq { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.pinReq b { font: 600 1.1rem var(--f-display) }
.pinReq span:not(.dot) { color: var(--ink-2); font-size: .96rem }
.pinReq .dot { display: inline-block }
.pinReq:hover b { color: var(--accent) }
.sched { background: var(--raised); border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 10px 14px }
.sched summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap }
.schedRow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line) }
.leaderBtn.on { color: var(--gold); font-weight: 700 }
.leaderTag { font-size: .8rem; color: var(--gold); font-weight: 700; white-space: nowrap }
.checkRow { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .94rem; margin-bottom: 6px }
.prgroup .row .subj .pinIco { display: inline-block }

/* ---------- recently deleted, undo, take off watch ---------- */
.trash { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 10px 14px }
.trash summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap }
.trashRow { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line) }
.trashRow .dot { display: inline-block; margin-right: 8px }
.trashActs { display: flex; gap: 6px }
#toast.withAction { display: flex; align-items: center; gap: 14px; padding-right: 8px }
#toast[hidden] { display: none !important }
.toastBtn { border: 0; background: color-mix(in srgb, var(--bg) 18%, transparent); color: var(--bg); font-weight: 700; border-radius: 999px; padding: 5px 12px; cursor: pointer }
.assignRow { display: flex; gap: 8px; flex-wrap: wrap }
.assignRow select { flex: 1 1 200px }
.assignHelp { margin: 4px 0 0; font-size: .86rem; color: var(--muted) }

/* "Mark as notified" strip inside a new request */
.ackBar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--danger-soft); border-radius: var(--r-md); padding: 10px 12px; font-size: .94rem; font-weight: 600 }
.ackBar .dot { display: inline-block; flex: none }
.ackBar span:not(.dot) { flex: 1 1 200px }

/* ---------- watch cards fill with more detail when there's room ---------- */
.watch { container-type: inline-size; container-name: watch }
.slideMore { display: none }
.slide { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin }
@container watch (min-width: 420px) {
  div.assigned { height: 300px }
  .watch .wempty { height: 382px; min-height: 382px }
  div.assigned .slide .pt .txt { -webkit-line-clamp: 5 }
  .slideMore { display: grid; gap: 8px; grid-column: 2; margin-top: 6px }
  .smPrayer { font-size: .92rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
  .smPhases { display: grid; gap: 4px; padding-top: 8px; border-top: 1px dashed var(--line) }
  .smPhase { display: flex; gap: 8px; font-size: .9rem; color: var(--ink-2); line-height: 1.4 }
  .smPhase i { font: italic 400 .92rem var(--f-display); color: var(--gold) }
  .smN { font: 500 .75rem var(--f-mono); color: var(--muted); min-width: 14px; padding-top: 2px }
}
@container watch (min-width: 640px) {
  div.assigned { height: 360px }
  .watch .wempty { height: 442px; min-height: 442px }
  .smPrayer { -webkit-line-clamp: 5 }
  .smPhases { grid-template-columns: 1fr 1fr; column-gap: 18px }
}
/* one card per row: the box fits its content (tallest prayer on that watch), no empty space */
@container watch (min-width: 900px) {
  div.assigned { height: auto; max-height: 480px }
  .watch .wempty { height: auto; min-height: 140px }
  .smPhases { grid-template-columns: 1fr 1fr 1fr }
}

/* beacon: keep the expanding ring clear of the text beside it */
.dot.beacon { margin-inline: 4px 6px; flex: none }
.dot.beacon::after { inset: -3px }
@media (prefers-reduced-motion: no-preference) {
  @keyframes beacon { 0% { transform: scale(.7); opacity: .9 } 80%, 100% { transform: scale(1.55); opacity: 0 } }
}
@media (prefers-reduced-motion: reduce) { .dot.beacon::after { transform: scale(1.3) } }
.tabs .n.pulsing::after { margin-left: 10px }
@media (prefers-reduced-motion: no-preference) {
  @keyframes tabPulse { 70% { box-shadow: 0 0 0 5px rgba(224, 96, 74, 0) } 100% { box-shadow: 0 0 0 0 rgba(224, 96, 74, 0) } }
}
/* the same clearance everywhere, including list rows that set their own dot spacing */
#main .dot.beacon, #sheet .dot.beacon, #pins .dot.beacon, .dot.beacon { margin-left: 5px; margin-right: 12px }
.newsList .chip .dot.beacon, #catChips .dot.beacon { margin-right: 6px }

/* ---------- wide watch cards: a structured prayer, not a run of text ---------- */
@container watch (min-width: 420px) {
  div.assigned .slide .pt { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 18px 18px; align-content: start }
  div.assigned .slide .pt::before { display: none }
  div.assigned .slide .pt > .subj { font: 600 1.18rem/1.25 var(--f-display); gap: 8px }
  /* prayer point (or the prayer) in its own panel */
  div.assigned .slide .pt > .txt { -webkit-line-clamp: unset; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; font-size: .96rem; line-height: 1.5; color: var(--ink-2) }
  div.assigned .slide .pt > .txt.pp b { display: block; margin: 0 0 4px }
  /* scripture: its own labeled line */
  div.assigned .slide .pt > .ref { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 1rem; -webkit-line-clamp: unset }
  div.assigned .slide .pt > .ref::before { content: "Scripture"; font: 700 .75rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-style: normal }
  div.assigned .slide .pt > .ref:empty { display: none }
  div.assigned .slide .pt > .ref .ph { display: none }
  .slideMore { display: grid; gap: 14px; grid-column: 1; margin: 0 }
  .smBlock { display: grid; gap: 8px }
  .smLabel { font: 700 .75rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
  .smPrayer { display: block; -webkit-line-clamp: unset; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; font-size: .94rem; line-height: 1.55; color: var(--ink-2) }
  /* phases: a grid of matching cards */
  .smPhases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; padding: 0; border: 0 }
  .smPhase { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 3px; align-items: start;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font-size: .92rem; line-height: 1.4; color: var(--ink) }
  .smN { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 .75rem var(--f-mono); padding: 0; min-width: 0 }
  .smText { min-width: 0 }
  .smRef { grid-column: 2; font: italic 400 .92rem/1.3 var(--f-display); color: var(--gold) }
}
@container watch (min-width: 640px) {
  div.assigned .slide .pt { padding: 18px 22px 22px; gap: 14px }
  .smPhases { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) }
}
@container watch (min-width: 900px) {
  .smPhases { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) }
}
/* sections keep their natural height; the card scrolls inside when a prayer is long */
@container watch (min-width: 420px) {
  div.assigned .slide .pt { height: auto; min-height: 100% }
  div.assigned .slide .pt > * { min-height: min-content }
  div.assigned .slide .pt > .txt, .smPrayer { overflow: visible }
}
/* more room in wide cards so the phases are visible without scrolling */
@container watch (min-width: 420px) { div.assigned { height: 400px } .watch .wempty { height: 482px; min-height: 482px } }
@container watch (min-width: 640px) { div.assigned { height: 440px } .watch .wempty { height: 522px; min-height: 522px } }
@container watch (min-width: 900px) { div.assigned { height: auto; max-height: 560px } .watch .wempty { height: auto; min-height: 140px } }

/* scripture: each reference once, with its verse beneath */
.scripture.verses { gap: 14px; padding-block: 4px }
.verse { display: grid; gap: 3px }
.vref { font: 600 1rem/1.3 var(--f-display); color: var(--gold); letter-spacing: .01em }
.vref .sref { text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent) }
.verse q { font: italic 400 1.05rem/1.55 var(--f-display); quotes: none; color: var(--ink-2) }

/* ---------- phases in the open prayer: the same cards as the wide watch cards ---------- */
.phaseCards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px }
.phaseCard { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 10px; row-gap: 4px; align-items: start;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; font-size: .94rem; line-height: 1.45; color: var(--ink) }
.pcN { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 .75rem var(--f-mono) }
.pcText { min-width: 0 }
.pcRef { grid-column: 2; align-self: end; font: italic 400 .94rem/1.3 var(--f-display); color: var(--gold) }
.pcRef .sref, .pcText .sref { color: var(--gold) }
@media (max-width: 480px) { .phaseCards { grid-template-columns: minmax(0, 1fr) } }

/* ---------- forms: choices and checkboxes keep their natural size (iPad/phone fix) ---------- */
.form .field input[type=checkbox], .form .field input[type=radio], .form input[type=checkbox], .form input[type=radio] { width: auto; flex: none; margin: 0 }
.radios { flex-wrap: wrap }
.radios label { white-space: nowrap }
.checkRow { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; justify-self: start; white-space: normal }
.checkRow input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent) }
.form .field select#pUnpin { margin-top: 2px }
.form input[type=datetime-local] { width: 100%; margin-top: 8px }

/* ---------- Post or schedule: a sectioned, premium form ---------- */
input[type=datetime-local] { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 12px; min-width: 0; width: 100%; color: var(--ink) }
.sheetEyebrow { margin: 0 0 2px; font: 700 .75rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold) }
.postForm { gap: 14px }
.typePick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.typeCard { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s }
.typeCard input { position: absolute; opacity: 0; pointer-events: none }
.typeCard:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent) }
.typeCard:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px }
.tcIcon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sunk); color: var(--muted) }
.tcIcon svg { width: 22px; height: 22px }
.typeCard:has(input:checked) .tcIcon { background: var(--accent); color: var(--accent-ink) }
.tcText { display: grid; gap: 2px; min-width: 0 }
.tcText b { font-size: .99rem }
.tcText small { font-size: .8rem; color: var(--muted); line-height: 1.35 }
.formCard { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px 16px; display: grid; gap: 12px }
.formCard[hidden] { display: none !important }
.fcTitle { margin: 0; font: 600 1.05rem var(--f-display); color: var(--ink) }
.fcHelp { margin: -4px 0 0; font-size: .9rem; color: var(--muted) }
.fcGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.pillSwitch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; background: var(--sunk); border: 1px solid var(--line); border-radius: 999px }
.pillSwitch label { position: relative; cursor: pointer }
.pillSwitch input { position: absolute; opacity: 0; pointer-events: none }
.pillSwitch span { display: block; text-align: center; padding: 9px 12px; border-radius: 999px; font-weight: 700; font-size: .94rem; color: var(--muted); transition: background .15s, color .15s, box-shadow .15s }
.pillSwitch input:checked + span { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(18, 24, 41, .08), 0 4px 10px -4px rgba(18, 24, 41, .2) }
.pillSwitch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px }
.switchRow { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer }
.srText { display: grid; gap: 2px }
.srText b { font-size: .99rem }
.srText small { font-size: .86rem; color: var(--muted) }
input.switch { -webkit-appearance: none; appearance: none; flex: none; width: 48px !important; height: 28px !important; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; transition: background .2s; border: 0; padding: 0; margin: 0 }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s }
input.switch:checked { background: var(--accent) }
input.switch:checked::after { transform: translateX(20px) }
input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.formFoot { display: grid; gap: 12px; padding-top: 4px }
.ffNote { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted) }
.ffNote svg { width: 18px; height: 18px; flex: none; color: var(--gold) }
.ffActions { display: flex; justify-content: flex-end; gap: 8px }
.ffActions .btn.primary { padding-inline: 22px }
@media (max-width: 560px) {
  .typePick { grid-template-columns: 1fr }
  .fcGrid { grid-template-columns: 1fr 1fr }
  .ffActions { flex-direction: column-reverse }
  .ffActions .btn { width: 100%; justify-content: center; padding-block: 12px }
}
@media (max-width: 360px) { .fcGrid { grid-template-columns: 1fr } }

/* iOS draws date/time boxes at its own minimum width; keep them inside their panel and aligned like other fields */
input[type=date], input[type=time], input[type=datetime-local] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 42px; margin: 0; text-align: left; line-height: 1.3
}
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value, input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; margin: 0 }
.form input[type=datetime-local] { margin-top: 0 }
.formCard .field, .fcGrid > .field { min-width: 0 }
.bar input[type=date], .bar input[type=time] { width: auto }

/* ---------- pinned posts: the same warm gold feel as the Answered celebration ---------- */
.pin, .pin.session {
  background: radial-gradient(520px 200px at 0% 0%, color-mix(in srgb, var(--gold-2) 26%, transparent), transparent 70%), linear-gradient(135deg, var(--gold-soft), var(--surface) 72%);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line)); border-radius: calc(var(--r) + 2px); padding: 16px 20px 14px; box-shadow: var(--shadow)
}
.pin h3 { font-size: 1.4rem; letter-spacing: -.01em }
.pinBody { color: var(--ink-2); font-size: 1rem }
.pinActs { border-top: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line)); padding-top: 8px; margin-top: 4px }
.pin.request .pinReq b { font-size: 1.2rem }

/* ---------- prayer requests list: the same warm gold feel ---------- */
.prgroup {
  background: radial-gradient(620px 220px at 0% 0%, color-mix(in srgb, var(--gold-2) 22%, transparent), transparent 70%), linear-gradient(135deg, var(--gold-soft), var(--surface) 70%);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); border-radius: calc(var(--r) + 2px); box-shadow: var(--shadow)
}
.prgroup .row { border-top-color: color-mix(in srgb, var(--gold) 16%, var(--line)); background: transparent }
.prgroup .row:hover { background: color-mix(in srgb, var(--surface) 70%, transparent) }
.prgroup .row .subj { font-family: var(--f-display); font-size: 1.08rem }
.leaderBtn { white-space: nowrap }

/* ---------- leader PIN ---------- */
.pinRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-sm); background: var(--raised); border: 1px dashed var(--line-strong); font-size: .92rem; color: var(--ink-2) }
.pinRow span { flex: 1 1 220px }
.pinRow.on { border-style: solid; border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); background: var(--gold-soft) }
.lockIco { width: 20px; height: 20px; flex: none; color: var(--gold) }
.pinInput { font: 600 1.3rem var(--f-mono) !important; letter-spacing: .4em; text-align: center; padding-block: 10px !important }
.pinErr { margin: 0; color: var(--danger); font-size: .94rem; font-weight: 600 }

/* ---------- pinned items side by side: 3 across on wide screens, 2 on an upright iPad, 1 on a phone ---------- */
.pins { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch }
.pins > .sched { grid-column: 1 / -1 }
.pin { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.pin h3 { font-size: 1.22rem; line-height: 1.25; text-wrap: balance }
.pinBy { display: block; margin-top: -2px }
.pinBody { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px }
.pin.expanded .pinBody { -webkit-line-clamp: unset; display: block }
.pinMore { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--accent); font: 700 .86rem var(--f-ui); cursor: pointer }
.pinMore:hover { text-decoration: underline }
.pinActs { margin-top: auto }
.pin.request .pinReq { flex-direction: column; align-items: flex-start; gap: 4px }
.pin.request .pinReq b { display: inline-flex; align-items: center }
@media (max-width: 1100px) { .pins { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) { .pins { grid-template-columns: minmax(0, 1fr) } }
/* pinned request: dot beside the name, prayer point underneath */
.pin.request .pinReq { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2px; row-gap: 4px; align-items: center }
.pin.request .pinReq > .dot { grid-row: 1 }
.pin.request .pinReq > span:not(.dot) { grid-column: 2 }

/* earlier (unpinned) posts */
.pins > .past { grid-column: 1 / -1 }
.pastRow { align-items: flex-start }
.pastText { flex: 1 1 260px; min-width: 0 }
.pastBody { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: .92rem; color: var(--ink-2); white-space: pre-wrap }

/* ---------- watch cards: each watch has its own color ---------- */
:root { --h1: #3553B5; --h2: #1E8A78; --h3: #7A4FC2; --h4: #C24D6E; --h5: #C2861A }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --h1: #8EA6F5; --h2: #5CC9B3; --h3: #B596F2; --h4: #EF8DA8; --h5: #EBBE63 } }
:root[data-theme="dark"] { --h1: #8EA6F5; --h2: #5CC9B3; --h3: #B596F2; --h4: #EF8DA8; --h5: #EBBE63 }
.watch.wh1 { --w: var(--h1) } .watch.wh2 { --w: var(--h2) } .watch.wh3 { --w: var(--h3) } .watch.wh4 { --w: var(--h4) } .watch.wh5 { --w: var(--h5) }
/* a thin border in the watch's color, all the way around */
.watch { --w: var(--accent); position: relative; border: 1.5px solid color-mix(in srgb, var(--w) 38%, var(--line)) }
.watch > header { background: linear-gradient(180deg, color-mix(in srgb, var(--w) 9%, var(--surface)) 0%, var(--surface) 100%) }
.watch:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(18, 24, 41, .05), 0 18px 40px -16px color-mix(in srgb, var(--w) 45%, transparent) }
/* your own watch: one solid, thicker line in its color (no second ring) */
.watch.me { border: 3px solid var(--w); box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--w) 50%, transparent) }
.wtop .label { color: var(--w) }
.wtime { color: var(--w); background: color-mix(in srgb, var(--w) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--w) 22%, transparent) }
.whead { align-items: center; justify-content: flex-start; gap: 10px; margin-top: 8px }
.wav { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 600 1.05rem/1 var(--f-display); color: #fff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--w) 80%, #fff), var(--w) 55%, color-mix(in srgb, var(--w) 70%, #000));
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px color-mix(in srgb, var(--w) 35%, transparent), 0 6px 14px -6px var(--w) }
.watch .wmeta { margin-top: 4px }
.watch .assigned { border-color: color-mix(in srgb, var(--w) 18%, var(--line)); background: color-mix(in srgb, var(--w) 4%, var(--sunk)) }
.watch .pg:hover { border-color: var(--w); color: var(--w) }

/* nothing assigned yet: a soft glow and a flame, not an empty box */
.watch .wempty { gap: 8px; justify-items: center; color: var(--muted); border: 1px dashed color-mix(in srgb, var(--w) 32%, var(--line));
  background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--w) 12%, transparent) 0%, transparent 62%), color-mix(in srgb, var(--w) 3%, var(--raised)) }
.watch .wempty b { font: 600 1.15rem var(--f-display); color: var(--ink) }
.watch .wempty > span:last-child { max-width: 30ch }
.wflame { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--w);
  background: color-mix(in srgb, var(--w) 13%, var(--surface)); box-shadow: 0 0 0 8px color-mix(in srgb, var(--w) 6%, transparent); animation: flicker 3.2s ease-in-out infinite }
.wflame svg { width: 28px; height: 28px; transform-origin: 50% 90%; animation: sway 3.2s ease-in-out infinite }
@keyframes flicker { 0%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--w) 6%, transparent) } 50% { box-shadow: 0 0 0 13px color-mix(in srgb, var(--w) 3%, transparent), 0 0 26px color-mix(in srgb, var(--w) 25%, transparent) } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg) scale(1) } 50% { transform: rotate(3deg) scale(1.06) } }

/* the watch happening right now */
.wlive { margin-left: auto; margin-right: 6px; display: inline-flex; align-items: center; gap: 6px; font: 700 .75rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--w) }
.wlive i { width: 8px; height: 8px; border-radius: 50%; background: var(--w); box-shadow: 0 0 0 0 color-mix(in srgb, var(--w) 60%, transparent); animation: livePulse 1.8s ease-out infinite }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--w) 55%, transparent) } 100% { box-shadow: 0 0 0 9px transparent } }
.watch.live { border-color: var(--w); box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--w) 55%, transparent) }
@media (prefers-reduced-motion: reduce) { .wflame, .wflame svg, .wlive i { animation: none } .watch:hover { transform: none } }
.listSeg { display: flex; width: 100%; max-width: 380px }
.listSeg button { flex: 1; padding-block: 8px }
.row .toInv { display: inline-block; margin-top: 8px; font: 600 .8rem var(--f-ui); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); background: var(--surface); border-radius: 999px; padding: 4px 10px; cursor: pointer; white-space: nowrap }
.row .toInv:hover, .row .toInv:focus-visible { background: var(--accent-soft); border-color: var(--accent) }
.trashBar { display: flex; justify-content: flex-end; padding: 4px 14px 2px }
.trash .trashMore { margin: 6px 14px 10px }

/* ---------- scripture: Find button, auto-fill note and the Find window ---------- */
.refRow { display: flex; gap: 8px; align-items: stretch }
.refRow input { flex: 1; min-width: 0 }
.refRow .btn { flex: none; display: inline-flex; align-items: center; gap: 6px }
.bookIco { width: 16px; height: 16px; flex: none; vertical-align: -3px }
.refNote { margin: 0; font-size: .86rem }
.refNote .link { font-size: inherit }
.pkWrap { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px }
.pkWrap[hidden] { display: none }
.pkScrim { position: absolute; inset: 0; background: rgba(8, 12, 26, .55); backdrop-filter: blur(2px) }
.pk { position: relative; width: min(680px, 100%); max-height: min(86vh, 820px); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--line) }
.pkTop { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 16px 18px 8px }
.pkTop h3 { margin: 0; font: 600 1.3rem var(--f-display); display: flex; align-items: center; gap: 8px }
.pkTop h3 .bookIco { width: 20px; height: 20px; color: var(--gold) }
.pkTabs { margin: 4px 18px 10px; display: flex; width: auto }
.pkTabs button { flex: 1 }
.pkBody { overflow-y: auto; padding: 4px 18px 14px; border-top: 1px solid var(--line); overscroll-behavior: contain }
.pkSearch { display: flex; gap: 8px; position: sticky; top: 0; padding: 12px 0 10px; background: var(--surface); z-index: 1 }
.pkSearch input { flex: 1; min-width: 0 }
.pkMsg { color: var(--muted); font-size: .94rem; margin: 10px 0 }
.pkMsg.err { color: var(--danger) }
.pkHead { font: 700 .75rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 14px 0 8px }
.pkGrid { display: grid; gap: 6px }
.pkGrid.books { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) }
.pkGrid.chs { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)) }
.pkBook, .pkCh { border: 1px solid var(--line); background: var(--raised); border-radius: var(--r-sm); padding: 9px 10px; font-size: .92rem; color: var(--ink); text-align: left; cursor: pointer }
.pkCh { text-align: center; font: 500 .94rem var(--f-mono); padding: 9px 0 }
.pkBook:hover, .pkCh:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft) }
.pkCrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0 4px; font-size: .94rem; color: var(--muted) }
.pkCrumb .link { font-size: inherit }
.pkStep { margin-left: auto; display: inline-flex; gap: 6px }
.pkList { display: grid; gap: 4px }
.pkVerse { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--r-sm); padding: 9px 10px; cursor: pointer; color: var(--ink-2); font: 400 1rem/1.5 var(--f-display) }
.pkVerse:hover { background: var(--sunk) }
.pkVerse.on { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 35%, transparent); color: var(--ink) }
.pkTick { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font: 700 .86rem var(--f-ui); color: #fff; margin-top: 2px }
.pkVerse.on .pkTick { background: var(--gold); border-color: var(--gold) }
.pkRef { display: block; font: 700 .8rem var(--f-ui); color: var(--gold); margin-bottom: 2px; letter-spacing: .02em }
.pkNum { font: 600 .8rem var(--f-mono); color: var(--gold); margin-right: 6px; vertical-align: 1px }
.pkFoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--raised) }
.pkSum { font-size: .92rem; color: var(--muted); min-width: 0 }
.pkSum b { color: var(--ink) }
.pkActs { display: flex; gap: 8px; margin-left: auto }
@media (max-width: 560px) {
  .pkWrap { padding: 0; place-items: end stretch }
  .pk { width: 100%; max-height: 92vh; border-radius: var(--r) var(--r) 0 0 }
  .pkTop, .pkFoot { padding-inline: 16px } .pkTabs { margin-inline: 16px } .pkBody { padding-inline: 16px }
  .pkFoot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) }
  .pkActs { width: 100% } .pkActs .btn.primary { flex: 1 }
}

/* ---------- color pad on a watch card ---------- */
.wcolor { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); background: var(--w); box-shadow: 0 0 0 1px color-mix(in srgb, var(--w) 50%, var(--line)); cursor: pointer; margin-left: auto; margin-right: 8px; flex: none; padding: 0 }
.wlive + .wcolor { margin-left: 0 }
.wcolor:hover { transform: scale(1.12) }
.cpad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface) }
.cpSw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); background: var(--c); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0 }
.cpSw.on { box-shadow: 0 0 0 2px var(--ink) }
.cpSw:hover { transform: scale(1.1) }
.cpCustom { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--muted); cursor: pointer; padding: 2px 8px 2px 2px; border: 1px solid var(--line); border-radius: 999px }
.verSel { flex: none; width: auto !important; max-width: 96px; font-size: .88rem; padding-block: 7px; padding-left: 10px }
.verSel option { font-size: .94rem }
.pkTopR { display: flex; align-items: center; gap: 8px }
.pkTopR .verSel { max-width: 230px }
.pkNotice { margin: 16px 0 2px; font-size: .75rem; line-height: 1.45; color: var(--muted) }
@media (max-width: 560px) { .refRow { flex-wrap: wrap } .refRow input { flex-basis: 100% } .refRow .verSel { flex: 1; max-width: none } }
@media (max-width: 560px) { .pkTop { flex-wrap: wrap } .pkTopR { width: 100% } .pkTopR .verSel { flex: 1; max-width: none } }
.noteEditBtn { margin-left: 8px; font-size: .8rem; font-weight: 600 }
.edited { font-style: italic }
.noteEditForm { display: grid; gap: 8px; margin-top: 6px }
.noteEditForm textarea { width: 100%; min-height: 80px }
.noteEditForm .actions { display: flex; gap: 8px }
.noteDelBtn { margin-left: 8px; font-size: .8rem; font-weight: 600; color: var(--danger) }
/* the opening words of a prayer bullet, so the prayer's movement (ask → declare) reads at a glance */
.pcText .lead, .smText .lead { font-weight: 700; color: var(--accent); letter-spacing: .005em }
.pcText .lead::after, .smText .lead::after { content: "" }
/* the built-in custom color picker (same in every browser) */
.cpCustom { background: var(--surface); padding: 3px 10px 3px 3px }
.cpCustom.on { border-color: var(--ink); color: var(--ink) }
.cpCustomSw { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12) }
.cpk { flex-basis: 100%; display: grid; gap: 12px; margin-top: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); max-width: 320px }
.cpkSV { position: relative; height: 150px; border-radius: 10px; cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue)) }
.cpkDot { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 4px rgba(0, 0, 0, .35); transform: translate(-50%, -50%); pointer-events: none }
.cpkRow { display: flex; align-items: center; gap: 10px }
.cpkEye { flex: none; width: 30px; height: 30px; border: 0; background: none; color: var(--ink-2); cursor: pointer; padding: 3px; border-radius: 8px }
.cpkEye:hover { background: var(--sunk) }
.cpkEye svg { width: 100%; height: 100% }
.cpkNow { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15) }
.cpkHue { position: relative; flex: 1; height: 14px; border-radius: 999px; cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) }
.cpkKnob { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 4px rgba(0, 0, 0, .35); transform: translate(-50%, -50%); pointer-events: none }
.cpkNums { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 6px }
.cpkNums label { display: grid; gap: 3px; text-align: center; font: 600 .75rem var(--f-ui); color: var(--muted) }
.cpkNums input { width: 100%; min-width: 0; text-align: center; padding: 6px 4px; font: 500 .91rem var(--f-mono); -moz-appearance: textfield }
.cpkNums input::-webkit-outer-spin-button, .cpkNums input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.cpkActs { display: flex; justify-content: flex-end; gap: 8px }
@media (hover: none) and (pointer: coarse) { .cpkNums input { font-size: 16px } }
/* the scripture reference gets its own full row; version and Find sit together underneath */
.refRow { flex-wrap: wrap }
.refRow input { flex: 1 1 100% }
.refRow .verSel { flex: 1 1 auto; max-width: none }
.refRow .btn { flex: 0 0 auto }
.form .two { align-items: start }

/* ---------- prayers from the manual: Original / Edited labels, compare and restore ---------- */
.origpill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font: 700 .75rem/1.7 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px;
  color: var(--gold); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent) }
.origpill.edited { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent) }
.origBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); font-size: .9rem; color: var(--ink-2) }
.origBar .bookIco { color: var(--danger); margin-right: 6px }
.origActs { display: flex; gap: 8px }
.diffRow { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line) }
.diffOld, .diffNew { white-space: pre-wrap; font-size: .94rem; line-height: 1.5; padding: 8px 10px; border-radius: var(--r-sm) }
.diffOld { background: var(--sunk); color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 50%, transparent) }
.diffNew { background: var(--gold-soft); color: var(--ink) }
.diffTag { display: inline-block; margin-right: 8px; font: 700 .75rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none }
.diffOrig, .diffCur { white-space: pre-wrap; font-size: .94rem; line-height: 1.5; padding: 8px 10px; border-radius: var(--r-sm) }
.diffOrig { background: var(--gold-soft); color: var(--ink) }
.diffCur { background: var(--sunk); color: var(--ink-2) }

/* ---------- countdown to the next session, in the session bar ---------- */
.countdown { flex: 1 1 280px; display: flex; justify-content: center; min-width: 0 }
.cdInner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 10px 16px; border-radius: var(--r-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), color-mix(in srgb, var(--gold) 9%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5) }
.cdHead { display: grid; gap: 2px }
.cdHead .label { color: var(--gold) }
.cdWhen { font: 600 .99rem var(--f-display); color: var(--ink) }
.cdSegs { display: flex; align-items: center; gap: 6px }
.cdSegs i { font: 600 1rem var(--f-mono); color: var(--muted); font-style: normal; margin-top: -14px }
.cdSeg { display: grid; justify-items: center; min-width: 50px; padding: 6px 6px 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm) }
.cdSeg b { font: 600 1.35rem/1.1 var(--f-mono); color: var(--accent); font-variant-numeric: tabular-nums }
.cdSeg small { font: 700 .75rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.cdInner.idle, .cdInner.live { flex-direction: column; gap: 2px; text-align: center }
.cdNote { font-size: .9rem; color: var(--muted) }
.cdLive { font: 600 1.05rem var(--f-display); color: var(--ink) }
.cdInner.live { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface))) }
.cdInner.live .label { display: inline-flex; align-items: center; gap: 6px; color: var(--gold) }
.cdPulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: livePulse 1.8s ease-out infinite; --w: var(--gold) }
@media (max-width: 700px) { .countdown { flex-basis: 100%; order: 5 } .cdSeg { min-width: 44px } }
@media (prefers-reduced-motion: reduce) { .cdPulse { animation: none } }
/* countdown: title and date on the left, the count to their right */
.cdInner:not(.idle):not(.live) { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 18px }
.cdHead { display: grid; gap: 2px; text-align: left }
@media (max-width: 520px) { .cdInner:not(.idle):not(.live) { flex-wrap: wrap } }
/* keep the day and time on one line; if the bar is too narrow, the count moves below instead */
.cdWhen { white-space: nowrap }
.cdHead { flex: none }
.cdInner:not(.idle):not(.live) { flex-wrap: wrap }
.colsRow .colsSpacer { flex: 1 }
.colsRow .clearBtn { color: var(--muted) }
.colsRow .clearBtn:hover { color: var(--danger) }
.ppAdd { margin: -4px 0 0 }
/* prayer updates on the home screen, and the prompt on the prayer itself */
.news[hidden] { display: none }
.news.updates { border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface) 70%) }
.news.updates > .label { color: var(--accent) }
.news.updates > .label::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); animation: livePulse 1.8s ease-out infinite; --w: var(--accent) }
.news.updates .chip b { font-weight: 650 }
.news.updates .upBy { color: var(--muted); font-weight: 500; margin-left: 4px }
.updBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: var(--r-md); font-size: .92rem; color: var(--ink-2);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)) }
@media (prefers-reduced-motion: reduce) { .news.updates > .label::before { animation: none } }
.news.updates .newsList { display: grid; gap: 6px }
.news.updates .chip { display: flex; align-items: flex-start; gap: 8px; border-radius: var(--r-md); padding: 8px 12px; text-align: left; white-space: normal }
.news.updates .chip .dot { margin-top: 6px; flex: none }
.upMain { display: grid; gap: 2px; min-width: 0 }
.upMain b { font-weight: 650 }
.upText { color: var(--ink-2); font-weight: 500 }
.news.updates .upBy { margin: 0; font-size: .8rem }
/* Prayer updates and New prayer requests: two separate cards with the page's usual space between */
#news { display: grid; gap: 16px }
#news:empty { display: none }

/* ---------- easier reading: the words you pray from are a full 16px ---------- */
.pt .txt, .row .txt, .notes .nt, .pcText, .smText, .smPrayer, .upText, .pinBody, .pinReq span:not(.dot), .pastBody { font-size: 1rem; line-height: 1.5 }
.pt .subj, .row .subj { font-size: 1.04rem }
.label { letter-spacing: .08em }

/* ---------- Text size: each person picks Standard, Large or Larger on their own device ---------- */
html[data-text="large"] { font-size: 112.5% }
html[data-text="larger"] { font-size: 125% }
#textBtn { font-weight: 700; letter-spacing: -.01em }
#textBtn .tsSmall { font-size: .8em; margin-right: 1px }
@media (max-width: 560px) { #textBtn .tsName { display: none } }

/* ---------- drag the panel's left edge to make it wider (computers and iPads) ---------- */
.sheetGrip { position: absolute; top: 0; bottom: 0; z-index: 2; width: 16px; right: calc(min(var(--sheetW, 680px), 100%) - 8px);
  cursor: ew-resize; touch-action: none; display: grid; place-items: center }
.sheetGrip span { width: 5px; height: 56px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, var(--line-strong));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: height .15s, background .15s }
.sheetGrip:hover span, .sheetGrip:focus-visible span, .sheetGrip.dragging span { height: 88px; background: var(--accent) }
.sheetGrip:focus-visible { outline: none }
#drawer.resizing, #drawer.resizing * { cursor: ew-resize !important; user-select: none }
@media (max-width: 820px) { .sheetGrip { display: none } }

/* ---------- the prayer view: one structure for every prayer ---------- */
.dview { display: grid; gap: 14px }
.dtags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0 }
.dtitle { display: grid; gap: 4px; padding-bottom: 2px }
.dtitle h2 { margin: 0 }
.dnotices { display: grid; gap: 8px }
.dsec { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 10px; min-width: 0 }
.dsecHead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 18px }
.dsecHead .label label { cursor: default }
.dsecAct { font-size: .86rem; font-weight: 600; white-space: nowrap }
.dsec .scripture { margin: 0 }
.dprayer { margin: 0; white-space: pre-wrap; font-size: 1rem; line-height: 1.6 }
.dsec.praise { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 30%, var(--line)) }
.dsec .assignHelp { margin: 0 }
.ppoint { border-radius: var(--r-md); padding: 14px 16px }
.dactions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line) }
.dactions .daSpacer { flex: 1 }
#drawer .sheet > .dsec, #drawer .sheet > .compose { margin-top: 0 }
#drawer .sheet:has(#dHead) { gap: 14px }
.compose { padding: 14px 16px }
.dactions .daSpacer { display: none } .dactions [data-act="del"] { margin-left: auto }

/* ---------- countdown fills its box at every text size and screen width ---------- */
.countdown { container-type: inline-size; container-name: cd }
.countdown .cdInner { width: 100% }
.cdInner:not(.idle):not(.live) { justify-content: space-between }
.cdSegs { flex: 1 1 240px; display: flex; align-items: center; gap: 6px; min-width: 0 }
.cdSeg { flex: 1 1 0; min-width: 0; padding: 6px 4px 4px }
.cdSegs i { flex: none }
.cdSeg b { font-size: clamp(1.25rem, 7cqi, 2.6rem) }
.cdSeg small { font-size: clamp(.68rem, 2.2cqi, .9rem) }
/* when the title sits above the count, the count uses the full width */
@container cd (max-width: 520px) { .cdInner:not(.idle):not(.live) { flex-direction: column; align-items: stretch; gap: 10px } .cdSegs { flex-basis: auto } }
/* when space is tight (bigger text, or a narrower screen) the countdown takes its own full-width row in the bar */
html[data-text] .bar .countdown { flex: 1 1 100%; order: 10 }
@media (max-width: 1199px) { .bar .countdown { flex: 1 1 100%; order: 10 } }
/* slide arrows sit with the count in the middle: ‹ 1 of 24 › */
.apager { justify-content: center; gap: 18px }
.apager .pgpos { flex: none; min-width: 72px }

/* ---------- who's active in Prayer Flint right now ---------- */
#onNow { margin: 4px 0 0; font-size: .86rem; color: var(--mast-muted); display: flex; align-items: center; gap: 8px }
#onNow[hidden] { display: none }
.onDot { width: 8px; height: 8px; border-radius: 50%; background: #3FBF7F; box-shadow: 0 0 0 3px rgba(63, 191, 127, .25); flex: none }
.wav { position: relative }
.watch.online .wav::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #3FBF7F; border: 2px solid var(--surface) }
.wonline { display: none; margin-left: 8px; padding: 0 7px; border-radius: 999px; font: 700 .7rem/1.7 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; vertical-align: 3px;
  color: #23855A; background: rgba(63, 191, 127, .14); border: 1px solid rgba(63, 191, 127, .35) }
.watch.online .wonline { display: inline-block }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wonline { color: #6FD8A4 } }
:root[data-theme="dark"] .wonline { color: #6FD8A4 }

/* ---------- God's Promises ---------- */
.promIco { width: 1.05em; height: 1.05em; vertical-align: -2px; margin-right: 6px; flex: none }
.promView { display: grid; gap: 22px; padding-bottom: 90px }
.promHero { position: relative; overflow: hidden; border-radius: var(--r); padding: 30px 32px; color: var(--mast-ink); background: var(--mast); box-shadow: var(--shadow) }
.promHero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 187, 102, .32), transparent 65%); pointer-events: none }
.promHeroText { position: relative; max-width: 62ch; display: grid; gap: 8px }
.promHero .label { color: var(--gold-2); display: inline-flex; align-items: center }
.promHero h2 { margin: 0; font: 600 clamp(1.7rem, 3.4vw, 2.3rem)/1.15 var(--f-display); letter-spacing: -.01em }
.promHero p { margin: 0; color: var(--mast-muted); font-size: 1rem; line-height: 1.6 }
.promHero p b { color: var(--mast-ink) }
.promChips { gap: 8px }
.promGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: 24px; align-items: start }
.promCat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; display: grid }
.promCatHead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 20px 22px 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, var(--surface)), var(--surface) 70%); border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line)) }
.promNum { font: 600 1.7rem/1 var(--f-display); color: var(--gold); min-width: 2ch }
.promCatHead .label { color: var(--gold) }
.promCatHead h3 { margin: 2px 0 0; font: 600 1.35rem/1.2 var(--f-display); letter-spacing: -.005em }
.promCatHead h3::first-letter { text-transform: uppercase }
.promCount { font-size: .8rem; color: var(--muted); white-space: nowrap }
.promItems { list-style: none; margin: 0; padding: 6px 10px 10px; display: grid }
.promItem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 12px; border-radius: var(--r-md); transition: background .15s }
.promItem + .promItem { border-top: 1px solid var(--line) }
.promItem:hover { background: var(--raised) }
.promItem.on { background: var(--gold-soft) }
.promItem.on + .promItem, .promItem.on { border-top-color: transparent }
.piMain { display: grid; gap: 4px; min-width: 0 }
.piTop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.piRef { font: 600 1.02rem var(--f-display); color: var(--gold) }
.piWill { font-size: 1rem; line-height: 1.5; color: var(--ink) }
.piCond { font-size: .86rem; color: var(--muted); font-style: italic; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--gold) 35%, var(--line)) }
.piKind { font: 700 .66rem/1.8 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; padding: 0 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft) }
.piKind.kCovenant { color: #7A4FC2; background: color-mix(in srgb, #7A4FC2 12%, var(--surface)) }
.piKind.kDeclaration { color: var(--gold); background: var(--gold-soft) }
.piKind.kAssurance { color: #1E8A78; background: color-mix(in srgb, #1E8A78 12%, var(--surface)) }
.piKind.kProphecy { color: #C24D6E; background: color-mix(in srgb, #C24D6E 12%, var(--surface)) }
.piEdit { justify-self: start; font-size: .8rem }
.piAdd { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--gold) 55%, var(--line)); background: var(--surface); color: var(--gold);
  font: 600 1.35rem/1 var(--f-ui); cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; transition: transform .12s, background .15s }
.piAdd:hover { transform: scale(1.06); background: var(--gold-soft) }
.piAdd[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #fff; font-size: 1.05rem; padding: 0 }
.promCatFoot { display: flex; gap: 8px; padding: 0 20px 16px }
.basket { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 15; width: min(760px, calc(100% - 32px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px 12px 20px; border-radius: 999px;
  background: var(--mast); color: var(--mast-ink); box-shadow: 0 18px 40px -12px rgba(10, 16, 40, .55) }
.bkText { display: grid; min-width: 0 }
.bkText b { font-weight: 700 }
.bkRefs { font-size: .82rem; color: var(--mast-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bkActs { display: flex; gap: 8px; align-items: center }
.basket .btn.ghost { color: var(--mast-ink) }
@media (max-width: 560px) { .promHero { padding: 22px 20px } .basket { border-radius: var(--r); padding: 12px 14px } .bkActs { width: 100% } .bkActs .btn.primary { flex: 1 } .promCatHead { padding: 16px } }
/* the builder */
.bList { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.bList li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: .95rem }
.bList .piRef { margin-right: 6px }
.builder { display: grid; gap: 18px }
.builder .dsec textarea { width: 100% }
.sheetEyebrow .promIco { color: var(--gold) }

/* the prayer view: a little more room between sections */
.dview { gap: 18px }
#drawer .sheet:has(#dHead) { gap: 18px }
.dsec { padding: 16px 18px }

/* ---------- watch card: "Add to this watch" ---------- */
.wadd { gap: 10px; padding: 16px; margin: 14px 12px 12px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--w, var(--accent)) 22%, var(--line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--w, var(--accent)) 7%, var(--surface)), var(--surface) 75%) }
.waddHead { color: var(--w, var(--accent)) }
.waddRow { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px }
.waddIco { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--w, var(--accent));
  background: color-mix(in srgb, var(--w, var(--accent)) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--w, var(--accent)) 25%, transparent) }
.waddIco svg { width: 19px; height: 19px }
.wadd select { padding-block: 10px; border-radius: 11px; background-color: var(--surface); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--w, var(--accent)) 18%, var(--line-strong)) }
.wadd select:hover { border-color: var(--w, var(--accent)) }

/* ---------- kind of prayer ---------- */
.ptypeTag { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font: 700 .66rem/1.7 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent) }
.dtags .ptypeTag { margin-left: 0 }
.ptChips { display: flex; flex-wrap: wrap; gap: 8px }
.ptChips .chip[aria-pressed="true"] { background: var(--mast); color: var(--mast-ink); border-color: transparent }
.ptGuide { padding: 14px 16px; border-radius: var(--r-md); background: linear-gradient(150deg, var(--gold-soft), var(--surface) 80%); border: 1px solid color-mix(in srgb, var(--gold) 25%, var(--line)) }
.ptAbout { margin: 0 0 8px; font: italic 400 1.02rem/1.5 var(--f-display); color: var(--ink) }
.ptSteps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .95rem; color: var(--ink-2) }
.ptSteps li::marker { color: var(--gold); font-weight: 700 }

/* ---------- the builder: premium, roomy sections ---------- */
.builder { gap: 22px }
.builder .dsec { padding: 18px 20px; gap: 12px; background: var(--surface); box-shadow: var(--shadow-sm) }
.builder .dsecHead .label { color: var(--gold) }

/* text-style buttons ("Remove", "Edit", "See all"…) */
button.link { background: none; border: 0; padding: 2px 0; margin: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px }
button.link:hover { text-decoration-color: currentColor }
button.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px }
.bList button.link, .piEdit { font-size: .84rem }

/* countdown digits: the heading font, with even-width numbers so they don't shift as they tick */
.cdSeg b { font-family: var(--f-display); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; line-height: 1.05 }
.cdSegs i { font-family: var(--f-display); font-size: 1.3em; margin-top: -10px }

/* God's Promises: cards in a row share one height; their footer lines up along the bottom */
.promGrid { align-items: stretch }
.promCat { display: flex; flex-direction: column }
.promItems { flex: 1; align-content: start }
.promCatFoot { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); padding: 12px 20px 16px }
.piEdit { color: var(--muted); font-weight: 600; text-decoration: none }
.piEdit:hover { color: var(--accent); text-decoration: underline }

/* God's Promises: how many categories per row (Auto fits the screen) */
.promGrid[data-cols="1"] { grid-template-columns: minmax(0, 1fr) }
.promGrid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.promGrid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.promGrid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.promGrid[data-cols="3"], .promGrid[data-cols="4"] { gap: 18px }
.promGrid[data-cols="4"] .promCatHead { grid-template-columns: auto minmax(0, 1fr); padding: 16px }
.promGrid[data-cols="4"] .promCount { grid-column: 1 / -1 }
@media (max-width: 1100px) { .promGrid[data-cols="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 900px) { .promGrid[data-cols="3"], .promGrid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) { .promGrid[data-cols] { grid-template-columns: minmax(0, 1fr) } }
/* builder: room between each field, and between each heading and its box */
.builder .bInv, .builder .bCover { display: grid; gap: 18px; margin-top: 4px }
.builder .bInv[hidden], .builder .bCover[hidden] { display: none }
.builder .field { gap: 8px }
/* panel headers: room between the gold eyebrow and the title, and before the first section */
.sheetEyebrow { margin: 0 0 8px; display: flex; align-items: center; gap: 2px }
.dtop:has(.sheetEyebrow) { padding-bottom: 6px; align-items: flex-start }
.dtop:has(.sheetEyebrow) h2 { margin: 0; line-height: 1.15 }
/* Add a scripture: the verse preview under the reference */
.pmPreview:empty { display: none }
.pmPreview .scripture { margin: 4px 0 0 }
.pmVer { font: 700 .66rem var(--f-ui); letter-spacing: .08em; color: var(--muted); margin-left: 4px }

/* ---------- notices and bars: one tidy layout, comfortable padding, on every device ---------- */
/* the "promises in your prayer" bar */
.basket { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 18px;
  padding: 14px 14px 14px 26px; border-radius: 22px; min-height: 64px }
.bkText { display: grid; gap: 3px; min-width: 0 }
.bkTitle { font-size: 1rem; line-height: 1.3 }
.bkTitle b { font-weight: 700 }
.bkRefs { font-size: .84rem; line-height: 1.3 }
.bkActs { gap: 6px }
.basket .btn.primary { padding-inline: 18px }
@media (max-width: 560px) {
  .basket { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 14px; border-radius: 20px; gap: 12px; width: calc(100% - 24px) }
  .bkActs { display: grid; grid-template-columns: auto 1fr }
}

/* the short messages at the bottom ("Changes saved"…): rounded box, room around the words, wraps neatly */
#toast { padding: 12px 22px; border-radius: 16px; line-height: 1.45; text-align: center; max-width: min(560px, calc(100% - 32px)); box-sizing: border-box;
  box-shadow: 0 14px 34px -12px rgba(10, 16, 40, .5) }
#toast.withAction { text-align: left; padding: 10px 10px 10px 20px; gap: 16px }

/* notices inside a prayer and on the home screen: text on the left, actions on the right, same padding everywhere */
.ackBar, .updBar, .origBar { padding: 12px 16px; gap: 10px 14px; line-height: 1.45; border-radius: var(--r-md) }
.ackBar > span:not(.dot), .updBar > span, .origBar > span:first-child { flex: 1 1 240px; min-width: 0 }
.news { padding: 14px 18px; gap: 12px 16px; border-radius: var(--r-md); line-height: 1.4 }
@media (max-width: 560px) {
  .ackBar, .updBar, .origBar, .news { padding: 12px 14px }
  .ackBar .btn, .updBar .btn { flex: 1 1 100%; justify-content: center }
  .origActs { width: 100% } .origActs .btn { flex: 1; justify-content: center }
  .news > .btn { width: 100%; justify-content: center }
  #toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)) }
}
#toast { width: max-content }
/* tap-to-choose chips (Add a scripture's Category and Kind), styled like "Kind of prayer" */
.choiceChips { display: flex; flex-wrap: wrap; gap: 8px }
.choiceChips .chip[aria-pressed="true"], .ptChips .chip[aria-pressed="true"] { background: var(--mast); color: var(--mast-ink); border-color: transparent; box-shadow: var(--shadow-sm) }

/* God's Promises: the 11 kinds as categories, with a short description; topics as tags and a filter */
.promAbout { margin: 4px 0 0; font-size: .9rem; line-height: 1.45; color: var(--muted) }
.promCatHead { align-items: start }
.promCatHead .promNum { padding-top: 2px }
.promChips { align-items: center }
.topicPick { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 6px }
.topicPick select { width: auto; min-width: 190px; padding-block: 7px; font-size: .9rem }
@media (max-width: 640px) { .topicPick { margin-left: 0; width: 100%; padding: 6px 0 0 } .topicPick select { flex: 1 } }
.piKind { color: var(--gold); background: var(--gold-soft); text-transform: none; letter-spacing: .01em; font-size: .74rem; font-weight: 600 }
.promCatHead, .promGrid[data-cols="4"] .promCatHead { grid-template-columns: auto minmax(0, 1fr) } .promCount, .promGrid[data-cols="4"] .promCount { grid-column: 2; margin-top: 2px }
/* the colored kind tags (as before), and the subject as a quieter second tag */
.piKind { font: 700 .66rem/1.8 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; padding: 0 8px; border-radius: 999px; color: var(--accent); background: var(--accent-soft) }
.piKind.kCovenant { color: #7A4FC2; background: color-mix(in srgb, #7A4FC2 14%, var(--surface)) }
.piKind.kPromise { color: var(--accent); background: var(--accent-soft) }
.piKind.kProphecy { color: #C24D6E; background: color-mix(in srgb, #C24D6E 14%, var(--surface)) }
.piKind.kDeclaration { color: var(--gold); background: var(--gold-soft) }
.piKind.kDecree { color: #B45309; background: color-mix(in srgb, #B45309 14%, var(--surface)) }
.piKind.kCondition { color: #0E7490; background: color-mix(in srgb, #0E7490 14%, var(--surface)) }
.piKind.kWarning { color: #B91C1C; background: color-mix(in srgb, #B91C1C 12%, var(--surface)) }
.piKind.kAssurance { color: #1E8A78; background: color-mix(in srgb, #1E8A78 14%, var(--surface)) }
.piKind.kTransformation { color: #2E7D32; background: color-mix(in srgb, #2E7D32 14%, var(--surface)) }
.piKind.kReward { color: #A16207; background: color-mix(in srgb, #CA8A04 16%, var(--surface)) }
.piKind.kPurpose { color: #475569; background: color-mix(in srgb, #475569 14%, var(--surface)) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .piKind { filter: brightness(1.45) saturate(1.1) } }
:root[data-theme="dark"] .piKind { filter: brightness(1.45) saturate(1.1) }
.piTopic { font-size: .78rem; font-weight: 600; color: var(--muted) }
.piTopic::before { content: "· "; }
/* the kind filter chips carry their kind's color */
.kchip { --kc: var(--accent); border-color: color-mix(in srgb, var(--kc) 40%, var(--line)); display: inline-flex; align-items: center; gap: 7px }
.kchip .kdot { width: 8px; height: 8px; border-radius: 50%; background: var(--kc); flex: none }
.kchip:hover { border-color: var(--kc); background: color-mix(in srgb, var(--kc) 10%, var(--surface)) }
.kchip[aria-pressed="true"] { background: var(--kc); border-color: var(--kc); color: #fff }
.kchip[aria-pressed="true"] .kdot { background: #fff }
.kCovenant { --kc: #7A4FC2 } .kPromise { --kc: #3553B5 } .kProphecy { --kc: #C24D6E } .kDeclaration { --kc: #B07A12 }
.kDecree { --kc: #B45309 } .kCondition { --kc: #0E7490 } .kWarning { --kc: #B91C1C } .kAssurance { --kc: #1E8A78 }
.kTransformation { --kc: #2E7D32 } .kReward { --kc: #A16207 } .kPurpose { --kc: #475569 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kchip:not([aria-pressed="true"]) .kdot { filter: brightness(1.5) } }
:root[data-theme="dark"] .kchip:not([aria-pressed="true"]) .kdot { filter: brightness(1.5) }
/* the subject keeps its golden pill, beside the colored kind tag */
.piTopic { display: inline-block; font: 600 .74rem/1.8 var(--f-ui); letter-spacing: .01em; padding: 0 9px; border-radius: 999px;
  color: var(--gold); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent) }
.piTopic::before { content: none }

/* ---------- Add a scripture: premium sections ---------- */
.pmPair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start }
@media (max-width: 760px) { .pmPair { grid-template-columns: minmax(0, 1fr) } }
.pmSub { color: var(--muted) }
.pmForm .kchip { font-size: .86rem }
.topicPills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px }
.topicPills .piTopic { cursor: pointer; font-size: .78rem }
.topicPills .piTopic:hover { border-color: var(--gold) }
.topicPills .piTopic.on { background: var(--gold); color: #fff; border-color: var(--gold) }
.pmWillRow { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); overflow: hidden }
.pmWillRow:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) }
.pmHe { flex: none; padding: 0 14px; display: grid; place-items: center; font: 600 1rem var(--f-display); color: var(--gold); background: var(--gold-soft); border-right: 1px solid var(--line) }
.pmWillRow input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent; outline: none }
.pmReads { display: grid; gap: 4px; font-size: .9rem; color: var(--ink-2); padding: 10px 12px; border-radius: var(--r-sm); background: var(--raised); border: 1px dashed var(--line-strong) }
.pmReads b { color: var(--gold); font-weight: 700 }
.pmOpt { font-size: .78rem; color: var(--muted) }
.pmForm .dsec > input[type=text] { width: 100% }
.choiceChips .kchip[aria-pressed="true"] { background: var(--kc); border-color: var(--kc); color: #fff }
.pmForm #pmTopicSel { width: 100% } .pmForm #pmTopicNew { width: 100%; margin-top: 8px }
.promEmpty { grid-column: 1 / -1; display: grid; justify-items: start; gap: 10px; padding: 22px; border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--muted) } .promEmpty p { margin: 0 }
/* countdown: slightly smaller digits with room above and below */
.cdSeg { padding: 12px 6px 10px; gap: 4px; border-radius: 12px }
.cdSeg b { font-size: clamp(1.2rem, 5.2cqi, 2.15rem); line-height: 1 }
.cdSeg small { line-height: 1.2 }
.cdSegs i { margin-top: -12px }
/* builder: each chosen promise with its kind and subject; tags on a prayer sit side by side */
.bList li { align-items: center }
.bItem { display: grid; gap: 4px; min-width: 0 }
.bList .piTop { gap: 6px }
.dtags .piKind, .subj .piKind { margin-left: 6px; vertical-align: 2px }
.dtags .piKind { margin-left: 0 }

/* ---------- list rows: the title and its tags wrap together neatly ---------- */
.row .subj { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px }
.row .subj .newpill, .row .subj .origpill, .row .subj .ptypeTag, .row .subj .piKind { margin-left: 0 }
.row .subj .kind { flex-basis: 100% }
/* phones: one column, so the title isn't squeezed by "Unassigned"; who prays it moves to the bottom */
@media (max-width: 640px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 16px }
  .row .who { text-align: left; order: 10; padding-top: 6px; border-top: 1px dashed var(--line); font-size: .82rem }
  .row .who br { display: none }
  .row .who br + * , .row .who { line-height: 1.5 }
}
@media (max-width: 640px) { .row .who { grid-row: auto; grid-column: 1 / -1 } }
/* Team & categories: changes to the manual */
.mcList { display: grid; gap: 0 }
.mcRow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 14px 0; border-top: 1px solid var(--line) }
.mcText { display: grid; gap: 3px; min-width: 0; flex: 1 1 260px }
.mcText b { font: 600 1.05rem var(--f-display) }
.mcState { justify-self: start; font: 700 .68rem/1.8 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; padding: 0 8px; border-radius: 999px }
.mcState.on { color: var(--danger); background: var(--danger-soft) }
.mcState.hid { color: var(--muted); background: var(--sunk) }
.mcActs { display: flex; flex-wrap: wrap; gap: 6px }
.setupCol { display: grid; gap: 18px; align-content: start; min-width: 0 }
/* Changes to the manual: a collapsible panel */
.mcPanel > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none }
.mcPanel > summary::-webkit-details-marker { display: none }
.mcPanel > summary h2 { margin: 0 }
.mcPanel > summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s }
.mcPanel[open] > summary::after { transform: rotate(-135deg) }
.mcPanel[open] > summary { margin-bottom: 10px }
.mcCount { font: 700 .78rem/1.8 var(--f-ui); padding: 0 9px; border-radius: 999px; color: var(--gold); background: var(--gold-soft) }
.mcMore { margin-top: 10px }
/* Team: the actions under each name sit in their own outlined buttons, not floating text */
#teamPanel [data-act="leader"], #teamPanel [data-act="away"], #teamPanel [data-act="trem"] {
  border: 1px solid var(--line-strong); background: var(--raised); border-radius: 999px; padding: 5px 12px; font-size: .8rem; font-weight: 600; line-height: 1.2 }
#teamPanel [data-act="leader"]:hover, #teamPanel [data-act="away"]:hover { border-color: var(--accent); color: var(--accent) }
#teamPanel [data-act="leader"].on { color: var(--gold); background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 40%, transparent) }
#teamPanel [data-act="trem"] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-soft) }
#teamPanel [data-act="trem"]:hover { border-color: var(--danger) }
#catPanel [data-act="crem"] { color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-soft); border-radius: 999px; padding: 5px 12px; font-size: .8rem; font-weight: 600; line-height: 1.2 } #catPanel [data-act="crem"]:hover { border-color: var(--danger) }

/* the root behind a prayer */
.rootField[hidden] { display: none }
.rootBar { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-radius: var(--r-md);
  background: color-mix(in srgb, #7A1F1F 8%, var(--surface)); border: 1px solid color-mix(in srgb, #B91C1C 25%, var(--line)); border-left: 4px solid #B91C1C }
.rootBar .label { color: #B91C1C; flex: none }
.rootText { font: 600 1.05rem var(--f-display); color: var(--ink) }
.rootTag { display: inline-block; font: 600 .72rem/1.8 var(--f-ui); padding: 0 9px; border-radius: 999px; color: #B91C1C;
  background: color-mix(in srgb, #B91C1C 10%, var(--surface)); border: 1px solid color-mix(in srgb, #B91C1C 28%, transparent) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rootBar .label, :root:not([data-theme="light"]) .rootTag { color: #F49595 } }
:root[data-theme="dark"] .rootBar .label, :root[data-theme="dark"] .rootTag { color: #F49595 }
.notes li.testimony { border-color: var(--gold-2) } .notes li.testimony .nt { font: italic 400 1.04rem/1.55 var(--f-display) }

/* ---------- posts on a prayer: Edit and Delete as spaced, tidy actions ---------- */
.notes .nh { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; line-height: 1.5 }
.notes .nh .noteEditBtn, .notes .nh .noteDelBtn { margin: 0 0 0 10px; padding: 1px 0; font-size: .8rem; text-decoration: none }
.notes .nh .noteEditBtn { margin-left: auto }
.notes .nh .noteEditBtn:hover, .notes .nh .noteDelBtn:hover { text-decoration: underline }
.notes li { padding: 4px 0 4px 14px }
.notes .nt { margin-top: 2px }

/* ---------- the side panel on phones: room at the edges, no scroll getting stuck ---------- */
#drawer .sheet { height: 100dvh; max-height: 100dvh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch }
html.drawerOpen, html.drawerOpen body { overflow: hidden }
@media (max-width: 640px) {
  #drawer .sheet { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(32px + env(safe-area-inset-bottom, 0px)); gap: 16px }
  .dsec, .builder .dsec { padding: 14px 14px }
  .dview { gap: 16px }
  .dtop { gap: 10px }
  .dtags { gap: 6px }
  .compose { padding: 14px }
  .compose .seg { width: 100%; display: flex } .compose .seg button { flex: 1; padding-inline: 6px }
  .form .field { gap: 6px }
  .formFoot { position: sticky; bottom: calc(-32px - env(safe-area-inset-bottom, 0px)); background: var(--surface); padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); margin-bottom: calc(-32px - env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); z-index: 2 }
  .phaseCards { grid-template-columns: minmax(0, 1fr) }
}
.chips { gap: 8px }

/* Testimonies on This session: a gold, celebratory card */
.news.testis-home { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); background: linear-gradient(135deg, var(--gold-soft), var(--surface) 75%) }
.news.testis-home > .label { color: var(--gold) }
.news.testis-home > .label::before { display: none }
.news.testis-home .newsList { display: grid; gap: 8px }
.testiItem { display: flex; align-items: center; gap: 10px }
.testiItem .chip { flex: 1; display: flex; text-align: left; white-space: normal; border-radius: var(--r-md); padding: 10px 14px; border-color: color-mix(in srgb, var(--gold) 30%, var(--line)) }
.testiItem .upText { font-family: var(--f-display); font-style: italic; font-size: 1.02rem }
.testiItem > .btn { flex: none }
/* the promises bar: Clear and Build a prayer a little further apart */
.bkActs { gap: 10px }
/* Answered tab: testimonies */
.testis { margin-top: 26px; display: grid; gap: 14px }
.testisHead { margin: 0; font: 600 1.35rem var(--f-display) }
.pcard.testimony { border-color: color-mix(in srgb, var(--gold) 35%, var(--line)) }
.pcard.testimony .label { color: var(--gold) }
.testiItem > .btn { border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); background: var(--surface); border-radius: 999px; padding: 6px 14px; color: var(--gold); font-weight: 600 } .testiItem > .btn:hover { border-color: var(--gold) }

/* My prayers */
.mineIntro h2 { margin: 0 0 4px; font: 600 1.6rem var(--f-display) }
.mineIntro p { margin: 0; color: var(--muted); max-width: 62ch }
.mineTag { display: inline-block; font: 700 .66rem/1.8 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; padding: 0 9px; border-radius: 999px;
  color: #1E8A78; background: color-mix(in srgb, #1E8A78 12%, var(--surface)); border: 1px solid color-mix(in srgb, #1E8A78 30%, transparent) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mineTag { color: #5CC9B3 } }
:root[data-theme="dark"] .mineTag { color: #5CC9B3 }
.listSeg { max-width: 520px }

/* ---------- who's praying: personal sign-in ---------- */
#who { position: fixed; inset: 0; z-index: 41; background: var(--mast); display: grid; place-items: center; padding: 16px; overflow-y: auto }
.whoCard { width: min(460px, 100%) }
.whoList { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: min(52vh, 440px); overflow-y: auto; padding: 2px }
.whoName { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2, var(--surface)); color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; min-height: 48px }
.whoName:hover, .whoName:focus-visible { border-color: var(--accent); background: var(--accent-soft) }
.whoDot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--mc, var(--accent)) }
.whoName > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.whoNew { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 3px 7px; border-radius: 999px }
.whoFoot, .whoHint { margin: 0; color: var(--muted); font-size: .88rem }
.whoForm { display: grid; gap: 10px }
.whoForm .pinInput { width: 100%; padding-block: 11px; font-size: 1.2rem; letter-spacing: .3em; text-align: center }
.whoForm .btn.primary { justify-content: center; padding-block: 11px; margin-top: 4px }
.whoLinks { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 4px }
.meLbl { white-space: nowrap }
.meChip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 999px; border: 2px solid var(--mc, var(--accent)); background: transparent; color: inherit; font: inherit; cursor: pointer; max-width: 100% }
.meChip b { color: var(--mast-ink, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.meSw { font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); white-space: nowrap }
.meChip:hover .meSw, .meChip:focus-visible .meSw { background: rgba(255,255,255,.22) }
.noPin { font-size: .78rem; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 3px 9px; white-space: nowrap }

.promEmptyActs { display: flex; flex-wrap: wrap; gap: 10px }

/* ---------- shared with me ---------- */
.mineTag.shared { background: var(--accent-soft); color: var(--accent) }
.segN { font: 500 .78rem var(--f-mono); opacity: .75; margin-left: 2px }
.shareBar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface) }
.shareNames { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0 }
.shareName { font-size: .86rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent) }
.shareList { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px }
.shareOpt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 48px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; font-weight: 600 }
.shareOpt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft) }
.shareOpt input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none }
.topicClear { white-space: nowrap }

/* Team: each person in their own card, with room between them */
#teamPanel .list { gap: 12px }
#teamPanel .list li { padding: 12px 14px; row-gap: 10px; border: 1px solid var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--accent) 3%, var(--surface)) }
#teamPanel .list li input { flex: 1 1 100px; min-width: 0 }

/* ---------- prayer requests: day count and check-in nudge ---------- */
.dayTag { display: inline-flex; align-items: center; font: 600 .72rem var(--f-mono); letter-spacing: .02em; padding: 2px 8px; margin-left: 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); vertical-align: 2px; white-space: nowrap }
.dayTag.due { color: var(--gold); background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 40%, transparent) }
.checkLine { display: block; margin-top: 4px; color: var(--gold); font-weight: 600; font-size: .84rem }
.checkBar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: var(--r); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent) }
.checkMsg { flex: 1 1 260px; min-width: 0; line-height: 1.45 }
.checkMsg b { color: var(--gold) }
.checkActs { display: flex; flex-wrap: wrap; gap: 8px }

/* ---------- Prayer Builder: even cards side by side ---------- */
.promItems { align-content: start }
.promMore { display: none; justify-self: center; margin: 2px 0 12px; padding: 7px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); background: var(--gold-soft); color: var(--gold); font: 600 .84rem var(--f-body, inherit); cursor: pointer }
.promMore:hover { border-color: var(--gold) }
.promGrid[data-multi="1"] .promMore { display: inline-flex }
.promGrid[data-multi="1"] .promCat.foldable:not(.open) .promItem:nth-child(n+5) { display: none }
/* opened: the whole row, scriptures in columns */
.promGrid[data-multi="1"] .promCat.open { grid-column: 1 / -1 }
.promGrid[data-multi="1"] .promCat.open .promItems { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: 18px }
.promGrid[data-multi="1"] .promCat.open .promItem + .promItem { border-top: 0 }
.promGrid[data-multi="1"] .promCat.open .promItem { border-bottom: 1px solid var(--line) }
.promGrid[data-multi="1"] .promMore { width: max-content; max-width: calc(100% - 32px); justify-self: center; align-self: end }
.promGrid[data-multi="1"] .promCat.open .promItem { align-content: start }
.promGrid[data-multi="1"] .promMore { margin: 4px auto 14px; align-self: center }

/* ---------- your watch card: Watch | Personal ---------- */
.cardTabs { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--w, var(--accent)) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--w, var(--accent)) 28%, var(--line)); flex: none; align-self: center }
.cardTabs button { border: 0; background: transparent; color: var(--muted); font: 600 .8rem var(--f-ui, inherit); padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap }
.cardTabs button:hover { color: var(--ink) }
.cardTabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12) }
.cardTabs button[data-cardtab="personal"][aria-selected="true"] { color: var(--gold) }
.whead:has(.cardTabs) { flex-wrap: wrap; row-gap: 8px }

/* ---------- 🙏 I prayed ---------- */
.prayedBar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface) }
.prayedTxt { flex: 1 1 220px; min-width: 0; color: var(--muted); font-size: .92rem; line-height: 1.45 }
.prayedTxt b { color: var(--ink); font-weight: 600 }
.amenBtn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--surface); color: var(--ink); font: 600 .95rem var(--f-ui, inherit); cursor: pointer; transition: background .15s, transform .15s }
.amenBtn:hover { background: var(--gold-soft) }
.amenBtn.on, .slideAmen.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold) }
.amenIco { font-size: 1.1em; line-height: 1 }
.amenN { font: 600 .8rem var(--f-mono); padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold) }
/* on the watch card: its own row under the prayer window, for whichever prayer is showing */
.amenRow { display: flex; justify-content: center; padding: 0 12px 10px; min-height: 48px }
.slideAmen { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--surface); color: var(--ink); font: 600 .92rem var(--f-ui, inherit); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12) }
.slideAmen:hover { background: var(--gold-soft) }
.prayedLine { display: block; margin-top: 4px; color: var(--gold); font-size: .84rem; font-weight: 600 }
.amenFloat { position: fixed; z-index: 70; pointer-events: none; font-size: 1.6rem; transform: translate(-50%, -50%); opacity: 0 }
@media (prefers-reduced-motion: no-preference) {
  .amenBtn.pop, .slideAmen.pop { animation: amenPop .6s ease } @keyframes amenPop { 30% { transform: scale(1.18) } 60% { transform: scale(.96) } }
  .amenFloat { animation: amenRise 1.1s ease-out forwards } @keyframes amenRise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6) } 25% { opacity: 1; transform: translate(-50%, -90%) scale(1.15) } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1) } }
}

/* ---------- answered: home card and the celebration ---------- */
.answered-home { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: linear-gradient(135deg, var(--gold-soft), var(--surface) 70%) }
.answered-home .label { color: var(--gold) }
.celebrateFx { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, #000 35%, transparent); transition: opacity .5s }
.celebrateFx.out { opacity: 0 }
.celCard { position: relative; display: grid; justify-items: center; gap: 8px; width: min(380px, 100%); padding: 30px 26px; border-radius: calc(var(--r) + 6px); background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line)); box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 6px var(--gold-soft); text-align: center; overflow: hidden }
.celCard b { font: 600 1.7rem var(--f-display); color: var(--gold) }
.celCard span { font-size: 1rem; line-height: 1.45 }
.celCard small { color: var(--muted) }
.celIco { font-size: 2.6rem; line-height: 1 }
.celBurst { position: absolute; inset: 0; pointer-events: none }
.celBurst i { position: absolute; left: 50%; top: 34%; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); opacity: 0 }
.celBurst i:nth-child(3n) { background: var(--accent) } .celBurst i:nth-child(4n) { background: #E0604A; border-radius: 50% }
@media (prefers-reduced-motion: no-preference) {
  .celCard { animation: celIn .45s cubic-bezier(.2, 1.4, .4, 1) }
  @keyframes celIn { from { transform: scale(.8); opacity: 0 } }
  .celBurst i { animation: burst 1.3s ease-out forwards }
  .celBurst i:nth-child(1) { --x: 120px; --y: 0px; animation-delay: 0ms }
  .celBurst i:nth-child(2) { --x: 135px; --y: 46px; animation-delay: 40ms }
  .celBurst i:nth-child(3) { --x: 112px; --y: 99px; animation-delay: 80ms }
  .celBurst i:nth-child(4) { --x: 27px; --y: 82px; animation-delay: 120ms }
  .celBurst i:nth-child(5) { --x: -33px; --y: 102px; animation-delay: 0ms }
  .celBurst i:nth-child(6) { --x: -112px; --y: 99px; animation-delay: 40ms }
  .celBurst i:nth-child(7) { --x: -108px; --y: 36px; animation-delay: 80ms }
  .celBurst i:nth-child(8) { --x: -150px; --y: 0px; animation-delay: 120ms }
  .celBurst i:nth-child(9) { --x: -162px; --y: -55px; animation-delay: 0ms }
  .celBurst i:nth-child(10) { --x: -75px; --y: -66px; animation-delay: 40ms }
  .celBurst i:nth-child(11) { --x: -33px; --y: -102px; animation-delay: 80ms }
  .celBurst i:nth-child(12) { --x: 40px; --y: -123px; animation-delay: 120ms }
  .celBurst i:nth-child(13) { --x: 75px; --y: -66px; animation-delay: 0ms }
  .celBurst i:nth-child(14) { --x: 135px; --y: -46px; animation-delay: 40ms }
  @keyframes burst { 10% { opacity: 1 } to { transform: translate(var(--x), var(--y)) rotate(200deg); opacity: 0 } }
}

/* ---------- an empty watch: the last prayer that watchman prayed ---------- */
.wempty.wlast { justify-content: center; gap: 12px; padding: 18px }
.wlastHead { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap }
.wlastHead .label { color: var(--w, var(--accent)) }
.wlastWhen { font-size: .82rem; color: var(--muted) }
.wlastCard { width: 100%; display: grid; gap: 6px; text-align: left; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer }
.wlastCard:hover { border-color: var(--w, var(--accent)) }
.wlastCard .subj { display: flex; align-items: center; gap: 8px; font: 600 1.08rem var(--f-display) }
.wlastPoint { color: var(--muted); font-size: .92rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.wlastCard .ref { font-family: var(--f-display); font-style: italic; color: var(--gold); font-size: .9rem }
.wlastHint { font-size: .84rem; color: var(--muted); text-align: center; max-width: 34ch }
.watch .wempty.wlast { height: auto; min-height: 246px; justify-content: flex-start; overflow: visible }
.celCard .celIco { font-size: 2.6rem; line-height: 1 }

/* Layout "Mine": just your card, centered */
.watches[data-cols="me"] { grid-template-columns: minmax(0, 1120px); justify-content: center }

.wempty.wlast { position: relative }
.wlastClose { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer }
.wlastClose:hover { color: var(--ink); border-color: var(--w, var(--accent)) }
.wlastShow { margin-top: 6px }
.watch .wempty.wlast { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center }
.watch .wempty.wlast .wlastCard { width: 100%; max-width: 560px; text-align: left }
.watch .wempty.wlast .wlastHead { width: 100%; max-width: 560px }
.watches[data-cols="me"] { margin-top: 18px }

/* ---------- 🙏 Praying now ---------- */
#prayNow { margin-top: 10px }
.prayNow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 8px 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--mast-ink, #fff); max-width: max-content }
.prayNow.on { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 14%, transparent) }
.pnLabel { display: inline-flex; align-items: center; gap: 8px; font: 700 .76rem var(--f-ui, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--gold) }
.pnGlow { font-size: 1.1rem; letter-spacing: 0 }
.pnPeople { display: flex; flex-wrap: wrap; gap: 6px }
.pnPerson { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: .86rem; font-weight: 600 }
.pnAv { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--w); color: #fff; font: 700 .78rem var(--f-display); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent) }
.pnQuiet { font-size: .88rem; color: var(--mast-muted, rgba(255,255,255,.7)) }
.pnBtn { border-radius: 999px }
.pnBtn.done { background: var(--gold-soft); color: var(--gold); border-color: var(--gold) }
.wpraying { display: none; margin-left: 6px; font: 700 .7rem var(--f-ui, inherit); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); vertical-align: 3px }
.watch.praying .wpraying { display: inline-flex }
.watch.praying { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent), var(--shadow) }
@media (prefers-reduced-motion: no-preference) {
  .prayNow.on .pnGlow { animation: pnGlow 2.4s ease-in-out infinite } @keyframes pnGlow { 50% { filter: drop-shadow(0 0 8px var(--gold)); transform: scale(1.12) } }
  .pnAv { animation: pnRing 2.4s ease-in-out infinite } @keyframes pnRing { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 35%, transparent) } }
}
@media (max-width: 560px) { .prayNow { max-width: 100%; border-radius: 18px } }

/* ---------- 💬 comments on the watch card ---------- */
.amenRow { gap: 10px; flex-wrap: wrap }
.slideCmt { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .92rem var(--f-ui, inherit); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12) }
.slideCmt:hover, .slideCmt[aria-expanded="true"] { border-color: var(--w, var(--accent)); background: color-mix(in srgb, var(--w, var(--accent)) 10%, var(--surface)) }
.cardCmt { margin: 0 12px 12px; padding: 12px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--w, var(--accent)) 35%, var(--line)); background: var(--surface); display: grid; gap: 10px }
.ccList { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 210px; overflow-y: auto }
.ccList li { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--sunk) }
.ccWho { font-size: .8rem; color: var(--muted) } .ccWho b { color: var(--ink) }
.ccText { font-size: .92rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere }
.ccNone { color: var(--muted); font-size: .9rem; background: none !important; padding: 2px 0 !important }
.ccForm { display: flex; gap: 8px; align-items: flex-end }
.ccForm textarea { flex: 1; min-width: 0; resize: vertical; min-height: 44px; font-size: .95rem }
.ccOpen { justify-self: start; font-size: .86rem }
li.comment .nh b { color: var(--accent) }

/* ---------- emoji reactions on posts ---------- */
.reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px }
.react, .reactAdd, .reactOpt { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .84rem var(--f-ui, inherit); cursor: pointer; line-height: 1 }
.react span { font-family: var(--f-mono); font-size: .78rem; color: var(--muted) }
.react.on { border-color: var(--gold); background: var(--gold-soft) } .react.on span { color: var(--gold) }
.react:hover, .reactAdd:hover, .reactOpt:hover { border-color: var(--accent) }
.reactAdd { color: var(--muted); font-size: .95rem } .reactAdd span { font-size: .75rem; margin-left: -2px }
.reactPick { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised) }
.reactOpt { border: 0; background: transparent; font-size: 1.1rem; padding: 3px 7px; min-height: 32px }
.reactOpt:hover { background: var(--gold-soft) }
.reactOpt.x { font-size: .95rem; color: var(--muted) }
@media (prefers-reduced-motion: no-preference) { .reactPick { animation: pickIn .16s ease-out } @keyframes pickIn { from { transform: scale(.9); opacity: 0 } } }

/* ---------- the conversation window (opens on top; the card never moves) ---------- */
#cmtModal { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 16px }
#cmtModal[hidden] { display: none }
html.cmtOpen, html.cmtOpen body { overflow: hidden }
.cmScrim { position: absolute; inset: 0; background: color-mix(in srgb, #000 45%, transparent) }
.cmCard { position: relative; width: min(560px, 100%); max-height: min(80vh, 720px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 18px; padding: 24px 26px; border-radius: calc(var(--r) + 4px); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0,0,0,.4) }
.cmHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px }
.cmHead h3 { margin: 4px 0 0; font: 600 1.3rem/1.2 var(--f-display) }
.cmClose { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 1.2rem; cursor: pointer }
.cmClose:hover { color: var(--ink); border-color: var(--accent) }
.cmCard .ccList { max-height: none; overflow-y: auto; padding-right: 4px; gap: 12px }
.cmCard .ccList li { padding: 14px 16px; gap: 6px; border-radius: var(--r-md); border: 1px solid var(--line) }
.cmCard .ccWho { font-size: .82rem; letter-spacing: .01em }
.cmCard .ccText { font-size: .98rem; line-height: 1.55 }
.cmCard .reacts { margin-top: 10px; gap: 8px }
.cmCard .ccList li.comment .ccWho b { color: var(--accent) }
.cmCard .ccForm { gap: 12px; align-items: stretch; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 16px }
.cmCard .ccForm textarea { min-height: 56px; padding: 12px 14px; border-radius: var(--r-md) }
.cmCard .ccForm .btn { align-self: flex-end; padding: 10px 20px }
.cmCard .ccOpen { margin-top: 2px }
@media (prefers-reduced-motion: no-preference) { .cmCard { animation: cmIn .2s ease-out } @keyframes cmIn { from { transform: translateY(10px) scale(.98); opacity: 0 } } }
@media (max-width: 560px) { #cmtModal { place-items: end center; padding: 0 } .cmCard { width: 100%; max-height: 88dvh; border-radius: 20px 20px 0 0 } }
/* the beacon: new comments you haven't opened */
.slideCmt { position: relative }
.slideCmt.new { border-color: color-mix(in srgb, #E0604A 60%, var(--line)) }
.slideCmt.new::after { content: ""; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: #E0604A; box-shadow: 0 0 0 0 rgba(224, 96, 74, .7) }
@media (prefers-reduced-motion: no-preference) { .slideCmt.new::after { animation: tabPulse 1.6s ease-out infinite } }

/* ---------- @mentions ---------- */
.mention { font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 0 4px; border-radius: 4px }
.mention.me { color: var(--gold); background: var(--gold-soft) }
#mentionPop { position: fixed; z-index: 80; width: 260px; display: grid; gap: 2px; padding: 6px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); box-shadow: 0 14px 40px rgba(0,0,0,.3) }
#mentionPop[hidden] { display: none }
#mentionPop button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 42px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: 600 .92rem var(--f-ui, inherit); text-align: left; cursor: pointer }
#mentionPop button:hover, #mentionPop button:focus-visible { background: var(--raised) }
#mentionPop .pnAv { box-shadow: none }
.amenRow { padding: 4px 12px 18px; gap: 12px }
.apager { margin-bottom: 4px }

/* 🙏 at the top of each prayer and 💬 at its foot: they travel with the slide */
.watch .slide { display: flex; flex-direction: column }
.watch .slide .pt { height: auto; flex: 1 0 auto }
.slideTop { display: flex; justify-content: flex-end; padding: 12px 14px 0 }
.slideFoot { display: flex; justify-content: flex-start; padding: 6px 14px 16px }
.slideTop .slideAmen, .slideFoot .slideCmt { padding: 7px 14px; font-size: .86rem; box-shadow: none }
.slideTop { position: relative; z-index: 1; height: 0; padding: 0; overflow: visible }
.slideTop .slideAmen { position: absolute; top: 10px; right: 14px }
.watch .slide .pt > .subj { padding-right: 150px }
@media (max-width: 420px) { .watch .slide .pt > .subj { padding-right: 0; padding-top: 40px } }

/* the window doesn't lock or shift the page; scrolling inside it stays inside it */
#cmtModal, .cmCard .ccList { overscroll-behavior: contain }

/* ---------- 🙏 Prayed today (home) ---------- */
.prayed-home { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface) 65%) }
.prayed-home .label { color: var(--gold) }
.ptList { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; width: 100% }
.ptRow { display: grid; gap: 8px; text-align: left; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; min-width: 0 }
.ptRow:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)) }
.ptSubj { display: flex; align-items: center; gap: 8px; min-width: 0 }
.ptSubj b { font: 600 1rem var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.ptWho { display: flex; align-items: center; gap: 10px; min-width: 0 }
.ptAvs { display: flex; flex: none }
.ptAvs .pnAv { width: 26px; height: 26px; margin-left: -6px; border: 2px solid var(--surface); box-shadow: none; animation: none }
.ptAvs .pnAv:first-child { margin-left: 0 }
.ptNames { font-size: .86rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.ptEmpty { color: var(--muted); font-size: .92rem }
.ptMore { justify-self: start; font-size: .88rem }
.prayed-home .label::before, .prayed-home .label::after { display: none }
.watch .slide .pt { flex: 0 0 auto }
.watch .slide .pt { min-height: 0 }
.watch div.assigned .slide .pt { min-height: 0; height: auto; flex: 0 0 auto }

/* ---------- Strategy Builder ---------- */
.stView { display: grid; gap: 18px; max-width: 1180px; margin: 0 auto; width: 100% }
.stStep { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) + 2px); box-shadow: var(--shadow); padding: 24px 26px; display: grid; gap: 16px }
.stStep > header { display: flex; align-items: flex-start; gap: 14px }
.stStep > header h3 { margin: 0; font: 600 1.3rem/1.2 var(--f-display) }
.stStep > header p { margin: 4px 0 0; color: var(--muted); font-size: .94rem }
.stN { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font: 600 1rem var(--f-display); color: var(--gold); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent) }
.stRow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
.stRow input { flex: 1 1 280px; min-width: 0 }
.stStep textarea, .stStep > input { width: 100%; padding: 12px 14px; border-radius: var(--r-md) }
.stStep textarea { min-height: 84px }
.stChips { display: flex; flex-wrap: wrap; gap: 8px }
.stChip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .92rem var(--f-ui, inherit); cursor: pointer; transition: border-color .15s, background .15s }
.stChip.sm { min-height: 34px; padding: 6px 13px; font-size: .86rem; font-weight: 500 }
.stChip:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)) }
.stChip[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--gold) }
.stChip.gentle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent) }
.stTargetSet { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--sunk); border: 1px solid var(--line); margin-top: 4px }
.stTargetSet + .stTargetSet { margin-top: 10px }
.stTargetSet .label { color: var(--gold) }
.stShelf { display: grid; gap: 12px }
.stShelf + .stShelf { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line) }
.stShelfHead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.stShelfHead .label { color: var(--gold) }
.stShelfAbout { color: var(--muted); font-size: .88rem }
.stWeapons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px }
.stWeapon { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; align-items: center; text-align: left; padding: 14px 44px 14px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, background .15s, transform .15s }
.stWeapon:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); transform: translateY(-1px) }
.stWeapon.on { border-color: var(--gold); background: linear-gradient(135deg, var(--gold-soft), var(--surface) 75%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent) }
.stWIco { grid-row: 1 / 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--sunk); font-size: 1.3rem }
.stWName { font-weight: 700; font-size: .95rem; line-height: 1.25 }
.stWRef { font-family: var(--f-display); font-style: italic; color: var(--gold); font-size: .82rem; line-height: 1.3 }
.stWAdd { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line)); color: var(--gold); font-weight: 700; font-size: .9rem }
.stWeapon.on .stWAdd { background: var(--gold); color: var(--surface); border-color: var(--gold) }
.stHint { color: var(--muted); font-size: .9rem; margin: 0 }
.stPreview { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)) }
.stPrayer { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--r-md); background: var(--sunk); border: 1px solid var(--line) }
.stPrayer .dprayer { margin: 0; line-height: 1.7 }
.stRefs { margin: 0; font-family: var(--f-display); font-style: italic; color: var(--gold) }
.stRefs .label { font-style: normal; font-family: var(--f-ui, inherit); color: var(--muted); margin-right: 6px }
.stBulletsLabel { color: var(--muted) }
.stPreview .phaseCard { position: relative; padding-right: 40px }
.stRemove { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; line-height: 1 }
.stRemove:hover { color: var(--danger); border-color: var(--danger) }
.stSend { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; padding-top: 18px; border-top: 1px solid var(--line) }
.stWatch { display: grid; gap: 6px; flex: 1 1 220px }
.stWatch select { width: 100% }
.stGo { display: flex; gap: 10px; margin-left: auto }
@media (max-width: 640px) { .stStep { padding: 18px 16px } .stGo { width: 100%; margin-left: 0 } .stGo .btn { flex: 1; justify-content: center } }

/* ---------- Strategy Builder: leaders keep the closet ---------- */
.stStep > header .stLead { margin-left: auto; flex: none }
.stShelfHead .stLeadBtn { margin-left: auto }
.stRestore:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 16px; border-top: 1px dashed var(--line) }
.stEdList { display: grid; gap: 8px; margin: 4px 0 16px }
.stEdRow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface) }
.stEdRow .stWIco { width: 36px; height: 36px; flex: none }
.stEdMain { display: grid; gap: 2px; flex: 1; min-width: 0 }
.stEdMain b { font-size: .95rem }
.stEdFoot { display: flex; justify-content: flex-end }
.stEdGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px }
.stEdGrid .field:first-child:has(#seIcon) { max-width: 120px }
form[data-stform="item"] .stEdGrid { grid-template-columns: 110px minmax(0, 1fr) }
.stEdGrid textarea { min-height: 150px }
.stCheck { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; line-height: 1.45 }
.stCheck input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent) }
@media (max-width: 560px) { .stEdGrid, form[data-stform="item"] .stEdGrid { grid-template-columns: 1fr } }
/* scripture references: each its own pill, with room */
.scripture .refList { display: flex; flex-wrap: wrap; gap: 10px 10px; line-height: 1.3 }
.scripture .refItem { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent) }
.scripture .refList + q { margin-top: 14px; display: block }

/* ---------- scripture pills, everywhere ---------- */
.refList { display: flex; flex-wrap: wrap; gap: 10px; line-height: 1.3; font-style: normal }
.refItem { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); font-family: var(--f-display); font-style: italic; color: var(--gold); white-space: nowrap }
.refList.sm { gap: 6px }
.refList.sm .refItem { padding: 3px 9px; font-size: .84rem }
.refItem .sref { color: inherit }
.ref .refList, .pcRef .refList, .piRef .refList, .stWRef .refList { margin-top: 2px }
.stRefs { display: grid; gap: 8px }
.stRefs .refList { margin-top: 0 }
/* weapon tiles: name with its scriptures neatly under it, all aligned to the top */
.stWeapon { align-items: start; align-content: start; row-gap: 10px; padding: 16px 48px 16px 16px }
.stWeapon .stWIco { grid-row: 1 / 3; align-self: start }
.stWeapon .stWName { align-self: center; min-height: 40px; display: flex; align-items: center }
.stWeapon .stWRef { grid-column: 2 }
.stWeapon .refList.sm { gap: 6px 6px }
.stWeapon .stWAdd { top: 18px; transform: none }
.stWeapons { gap: 12px }
.stWeapon { padding: 16px }
.stWeapon .stWName { padding-right: 38px }
.stWeapon .stWAdd { right: 14px; top: 22px }

/* ---------- my prayer watch ---------- */
.mwCard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; padding: 22px 24px; border-radius: calc(var(--r) + 2px); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, var(--surface)), var(--surface) 70%); box-shadow: var(--shadow) }
.mwCard.empty { grid-template-columns: minmax(0, 1fr) auto }
.mwCard .label { color: var(--gold) }
.mwCard h3 { margin: 6px 0 4px; font: 600 1.45rem/1.2 var(--f-display) }
.mwCard p { margin: 0; color: var(--muted); max-width: 60ch }
.mwMain { display: grid; gap: 4px }
.mwCount { font: 600 .95rem var(--f-mono); color: var(--gold) }
.mwCard.live { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent), var(--shadow) }
.mwCard.live .mwCount::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 8px; vertical-align: 1px }
.mwNote { font-size: .88rem; color: var(--muted) }
.mwTimes { grid-column: 1 / -1; list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px }
.mwTimes li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: .92rem }
.mwTimes b { font: 600 1rem var(--f-mono) }
.mwTimes span { color: var(--muted) }
.mwActs { grid-column: 2; grid-row: 1; display: flex; gap: 8px; align-self: start }
#mwRows { display: grid; gap: 14px }
.mwRow { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface) }
.mwRowTop { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.mwRowTop .mwTime { width: 140px; font: 600 1.05rem var(--f-mono) }
.mwRowTop .mwLabel { flex: 1 1 180px; min-width: 0 }
.mwDays { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.mwDay { min-width: 48px; min-height: 38px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .86rem var(--f-ui, inherit); cursor: pointer }
.mwDay[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--gold) }
.mwQuick { display: inline-flex; gap: 12px; margin-left: 8px; font-size: .86rem }
.mwRowBottom { display: flex; flex-wrap: wrap; gap: 14px }
.mwRowBottom label { display: grid; gap: 6px; flex: 1 1 160px }
@media (max-width: 640px) { .mwCard { grid-template-columns: 1fr } .mwActs { grid-column: 1; grid-row: auto } }
/* Prayed today: Hide / Clear */
.ptHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100% }
.ptActs { display: flex; gap: 6px }
.prayed-home.folded { padding-block: 10px }
.mwRowTop .mwTime { width: 180px }
#myWatchCard:not(:empty) { margin-bottom: 8px }
/* lists: more room for the scripture pills on wide screens (three across) */
@media (min-width: 1000px) { .row { grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1.7fr) minmax(200px, 1.4fr) 110px } }
.refList.sm { gap: 8px 8px }
.refList.sm .refItem { padding: 4px 11px }
.row .ref .refList { margin-top: 0 }
/* Root tag: room to breathe, and a softer shape when it wraps */
.rootTag { line-height: 1.45; padding: 5px 12px; border-radius: 12px; margin: 6px 0 4px }
/* iPhone/iPad: Safari sometimes leaves dropdowns undrawn (still tappable) inside scrolling panels and cards.
   Their own drawing layer and spelled-out colours make them paint every time. Touch Safari only. */
@supports (-webkit-touch-callout: none) {
  select { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; opacity: 1; visibility: visible;
    background-color: var(--surface); color: var(--ink); -webkit-text-fill-color: var(--ink); border: 1px solid var(--line-strong) }
  .wadd select { background-color: var(--raised) }
  .mast select { background-color: var(--mast-fill); color: var(--mast-ink); -webkit-text-fill-color: var(--mast-ink) }
}

/* WATCHMEN: the box fits phones, and the tag on each card's WATCHMEN prayers */
.whole > header { flex-wrap: wrap; align-items: center; row-gap: 4px }
.whole > header .label { min-width: 0; line-height: 1.35 }
.whole > header .wload { white-space: nowrap }
.whole .wlist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) }
.whole .pt { min-width: 0 }
.wholeTag { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font: 700 .66rem var(--f-ui, inherit); letter-spacing: .08em; color: var(--gold); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); vertical-align: 3px }
.devActs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
/* phones and iPads (no hover): each WATCHMEN prayer sits in its own visible card */
@media (hover: none), (max-width: 900px) {
  .whole .wlist { gap: 10px; padding: 12px }
  .whole .wlist .ptrow { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); padding: 2px }
  .whole .wlist .ptrow .pt { padding: 12px 40px 12px 12px }
  .whole .wlist .ptrow .rm { position: absolute; top: 10px; right: 10px }
}
/* narrow watch cards: I prayed sits on its own line above the name, so the name keeps its width */
@container watch (max-width: 440px) {
  .slideTop { height: auto; display: flex; justify-content: flex-end; padding: 10px 12px 0 }
  .slideTop .slideAmen { position: static }
  .watch .slide .pt > .subj { padding-right: 0; padding-top: 0 }
}
/* an open window: the page behind is pinned (iPad would scroll it instead), and the window scrolls on its own */
html.drawerOpen body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden }
#drawer .sheet { overscroll-behavior: contain; touch-action: manipulation }
#drawer .scrim { touch-action: none }

/* every tag and label: one shape, text centred with room on every side */
:is(.pill, .newpill, .waitpill, .origpill, .mineTag, .dayTag, .wholeTag, .piKind, .piTopic, .ptypeTag, .leaderTag, .noPin, .pillSwitch, .you) {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 10px; line-height: 1.25; min-height: 22px;
  box-sizing: border-box; vertical-align: middle; white-space: nowrap; text-align: center }
.wonline, .wpraying { padding: 3px 9px; line-height: 1.25; vertical-align: middle; align-items: center }
.watch.online .wonline { display: inline-flex }
.watch.praying .wpraying { display: inline-flex }
.wtime { display: inline-flex; align-items: center; padding: 4px 10px; line-height: 1.2 }
.rootTag { display: inline-flex; align-items: center }
/* a prayer name and its tags: the name keeps its width; tags drop to the next line when there is no room */
.pt > .subj { display: block; line-height: 1.5 }
.pt > .subj > .dot { display: inline-block; vertical-align: middle; margin: 0 8px 0 0 }
.pt > .subj > :is(.newpill, .waitpill, .dayTag, .wholeTag, .piKind, .ptypeTag, .origpill, .mineTag) { margin: 3px 0 3px 8px; vertical-align: middle }
/* WATCHMEN list on computers: room inside each prayer, so the hover highlight never runs up to the words */
@media (hover: hover) and (min-width: 901px) { .whole .wlist { gap: 8px; padding: 10px } .whole .wlist .ptrow .pt { padding: 14px 18px; border-radius: var(--r-md) } }
/* breathing room inside a prayer card: name, words, and scriptures each get their space */
.whole .pt, .watch .slide .pt { row-gap: 8px }
.whole .pt > .ref, .watch .slide .pt > .ref { margin-top: 6px }
.whole .pt > .txt, .watch .slide .pt > .txt { margin-top: 2px }
/* WATCHMEN: the warm gold of the pins, and every prayer in its own card on every device (no hover needed) */
.whole { background: radial-gradient(520px 200px at 0% 0%, color-mix(in srgb, var(--gold-2) 22%, transparent), transparent 70%), linear-gradient(135deg, var(--gold-soft), var(--surface) 72%); border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line)); border-radius: calc(var(--r) + 2px) }
.whole > header { background: transparent; padding: 16px 20px 12px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent) }
.whole .wlist, .whole .wlist[class] { gap: 12px; padding: 16px }
.whole .wlist .ptrow { position: relative; border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 92%, var(--gold)); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); padding: 0; transition: border-color .15s, box-shadow .15s }
.whole .wlist .ptrow:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); box-shadow: 0 4px 16px rgba(0, 0, 0, .18) }
.whole .wlist .ptrow .pt, .whole .wlist .ptrow .pt:hover { background: transparent; padding: 16px 44px 16px 16px; border-radius: var(--r-md) }
.whole .wlist .ptrow .rm { position: absolute; top: 12px; right: 12px }
/* lists on wide screens: the prayer spreads across one wide column, its scriptures run under it, so rows are shorter */
@media (min-width: 1000px) {
  .row { grid-template-columns: minmax(190px, 1fr) minmax(0, 3.4fr) 140px; column-gap: 32px; row-gap: 12px }
  .row > .subj { grid-column: 1; grid-row: 1 / span 2 }
  .row > .txt { grid-column: 2; grid-row: 1; max-width: 100ch }
  .row > .ref { grid-column: 2; grid-row: 2 }
  .row > .ref:empty { display: none }
  .row > .who { grid-column: 3; grid-row: 1 / span 2; text-align: right }
}
.newpill.upd { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent) }

/* ---------- my prayer journal ---------- */
.mwAsk { grid-column: 1 / -1; display: grid; gap: 12px; padding: 18px 20px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); background: var(--surface) }
.mwAsk .label { color: var(--gold) }
.mwAskQ { font: 600 1.1rem var(--f-display) }
.mwAsk textarea { width: 100%; min-height: 110px; padding: 12px 14px; border-radius: var(--r-md) }
.mwKept { display: flex; flex-wrap: wrap; gap: 10px }
.mwKept .stChip.on, .mwKept .stChip[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--gold) }
.mwAskGo { display: flex; justify-content: flex-end }
.mwAsk.done { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; color: var(--muted) }
.jIntro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 4px 2px }
.jIntro h3 { margin: 0; font: 600 1.35rem var(--f-display) }
.jIntro p { margin: 4px 0 0; color: var(--muted); max-width: 62ch }
.jList { display: grid; gap: 14px; margin-top: 14px }
.jEntry { display: grid; gap: 12px; padding: 20px 22px; border-radius: calc(var(--r) + 2px); border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line)); background: var(--surface); box-shadow: var(--shadow) }
.jEntry header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px }
.jDate { font: 600 1.08rem var(--f-display) }
.jWatch { font-size: .88rem; color: var(--muted) }
.jKept { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font: 600 .78rem var(--f-ui, inherit); line-height: 1.25 }
.jKept.yes { background: var(--gold-soft); color: var(--gold) }
.jKept.no { background: var(--sunk); color: var(--muted); border: 1px solid var(--line) }
.jText { margin: 0; white-space: pre-wrap; line-height: 1.65; font-size: 1rem }
.jText.empty { color: var(--muted); font-style: italic }
.jEntry footer { display: flex; gap: 8px; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--line) }

/* the after-the-watch box: always closable */
.mwAsk { position: relative }
.mwAskX { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer }
.mwAskX:hover { color: var(--ink); border-color: var(--gold) }
.mwAsk > .label { padding-right: 44px }
.mwAsk.done, .mwAsk.folded { padding-right: 56px; min-height: 52px }
.mwAsk.done .mwAskX, .mwAsk.folded .mwAskX { top: 50%; transform: translateY(-50%) }

/* on the wall: kept and missed */
.mwWall { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent) }
.mwWallMain { display: grid; gap: 8px; min-width: 0 }
.mwWall .label { color: var(--gold) }
.mwWallNums { display: flex; flex-wrap: wrap; gap: 10px }
.mwWallN { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .92rem; border: 1px solid var(--line); line-height: 1.25 }
.mwWallN b { font: 700 1.05rem var(--f-mono) }
.mwWallN.kept { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold) }
.mwWallN.missed { color: var(--muted) }
.mwWallWord { font-family: var(--f-display); font-style: italic; color: var(--muted); font-size: .95rem }
.mwWallRef { font-style: normal; font-size: .82rem; margin-left: 6px; color: var(--gold) }

/* on the wall, in the Answered tab's style */
.mwCard .mwWall { grid-column: 1 / -1; margin: 0 }
.mwWall .bignum .label { color: var(--gold); margin-bottom: 6px }
.mwWall .bignum .num { font-size: clamp(3.4rem, 8vw, 5rem) }
.mwWall .numsub { font-family: var(--f-display); font-style: italic; font-size: 1rem; margin-top: 8px }
.mwWallRef { font-style: normal; font-family: var(--f-ui, inherit); font-size: .82rem; margin-left: 6px; color: var(--gold) }
.mwWallSide { display: grid; gap: 12px; align-content: center }
.mwWallSide .btn { justify-self: end }
.mwWall .stats dd.mwSince { font-size: 1.15rem }
.mwCard .mwWall.celebrate { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 24px; align-items: stretch; padding: 24px 26px;
  background: radial-gradient(520px 240px at 12% 0%, color-mix(in srgb, var(--gold-2) 28%, transparent), transparent 70%), linear-gradient(135deg, var(--gold-soft), var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); border-radius: calc(var(--r) + 2px) }
@media (max-width: 640px) { .mwCard .mwWall.celebrate { grid-template-columns: 1fr; padding: 20px } }
.mwWallRef { white-space: nowrap }

/* ---------- a goal for prayer watches ---------- */
.goalSet { justify-self: start; margin-top: 10px }
.goal { display: grid; gap: 8px; margin-top: 12px; max-width: 420px }
.goalTop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px }
.goalText { font-size: .95rem; color: var(--ink) }
.goalText b { font-family: var(--f-mono); color: var(--gold) }
.goalBar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 14%, var(--sunk)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent) }
.goalBar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-2, var(--gold))); transition: width .6s ease }
.goal.reached .goalBar span { box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 60%, transparent) }
.goalForm { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: end }
.goalForm input { width: 100%; font: 600 1.2rem var(--f-mono) }
@media (max-width: 520px) { .goalForm { grid-template-columns: 1fr } }
/* encouragement pop-up */
.encourage .celCard { gap: 10px; padding: 32px 28px }
.encWord { font-family: var(--f-display); font-style: italic; color: var(--muted); font-size: 1rem !important; line-height: 1.5 }
.encWord .mwWallRef { font-size: .8rem }

/* encouragement inside the My prayer watch card, top right */
.mwSide { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 14px; align-content: start; justify-items: end; max-width: 440px }
.mwSide .mwActs { grid-column: auto; grid-row: auto }
.mwEnc { position: relative; display: grid; gap: 6px; justify-items: start; text-align: left; width: 100%; padding: 16px 48px 16px 18px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: linear-gradient(135deg, var(--gold-soft), var(--surface) 80%); box-shadow: 0 6px 22px rgba(0, 0, 0, .18) }
.mwEnc b { font: 600 1.15rem var(--f-display); color: var(--gold) }
.mwEncBody { font-size: .95rem; line-height: 1.45 }
.mwEnc .encWord { font-size: .92rem !important }
.mwEncIco { font-size: 1.5rem; line-height: 1 }
.mwEnc .mwAskX { top: 10px; right: 10px }
@media (prefers-reduced-motion: no-preference) {
  .mwEnc { animation: encIn .35s cubic-bezier(.2, 1.3, .4, 1) } @keyframes encIn { from { transform: translateY(-6px) scale(.97); opacity: 0 } }
  .mwEnc.burst { animation: encIn .35s cubic-bezier(.2, 1.3, .4, 1), encGlow 2.2s ease-in-out 3 } @keyframes encGlow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 35%, transparent), 0 6px 22px rgba(0, 0, 0, .18) } }
}
@media (max-width: 640px) { .mwSide { grid-column: 1; grid-row: auto; justify-items: stretch; max-width: none } .mwSide .mwActs { justify-self: start } }
/* phones: the card reads top to bottom: when, then Edit / Turn off and any encouragement, then the rest */
@media (max-width: 640px) {
  .mwCard > * { order: 3 }
  .mwCard > .mwMain, .mwCard > .mwText { order: 1 }
  .mwCard > .mwSide { order: 2 }
  .mwSide .mwActs { justify-content: flex-start }
  .mwCard { padding: 20px 18px; gap: 14px }
}
/* iPads and narrower: stack the card (time, then actions and encouragement, then the rest) so nothing is squeezed */
@media (max-width: 900px) {
  .mwCard { grid-template-columns: minmax(0, 1fr) }
  .mwCard > * { order: 3 }
  .mwCard > .mwMain, .mwCard > .mwText { order: 1 }
  .mwCard > .mwSide { order: 2; grid-column: 1; grid-row: auto; justify-items: stretch; max-width: none }
  .mwSide .mwActs { justify-self: start; justify-content: flex-start }
  .mwCard.empty > .btn { justify-self: start }
}
/* My prayers tabs: each on one line; on narrow phones the row scrolls sideways */
#mineSeg { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap }
#mineSeg::-webkit-scrollbar { display: none }
#mineSeg button { white-space: nowrap; flex: none }

/* journal: the prayers prayed that day, as small gold cards like the pins */
.jPrayers { display: grid; gap: 10px }
.jPrayers .label { color: var(--gold) }
.jPrayList { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px }
.jPray { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border-radius: var(--r-md); color: var(--ink); font: 600 .95rem var(--f-display); cursor: pointer;
  background: radial-gradient(260px 120px at 0% 0%, color-mix(in srgb, var(--gold-2) 22%, transparent), transparent 70%), linear-gradient(135deg, var(--gold-soft), var(--surface) 75%);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--line)); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); transition: border-color .15s, transform .15s }
.jPray:hover { border-color: var(--gold); transform: translateY(-1px) }
.jPray span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.jPray .dot { flex: none }

/* ---------- the prayers chosen for a watch ---------- */
.mwPrayers { display: grid; gap: 10px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line) }
.mwPrayersHead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px }
.mwPrayersHead .label { color: var(--gold) }
.mwChosen { display: flex; flex-wrap: wrap; gap: 8px }
.mwChip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; font: 600 .9rem var(--f-display); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent) }
.mwChip button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--muted); cursor: pointer; line-height: 1 }
.mwChip button:hover { color: var(--danger) }
.mwPicker { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sunk) }
.mwSrc { justify-self: start; max-width: 100%; overflow-x: auto; flex-wrap: nowrap } .mwSrc button { white-space: nowrap; flex: none }
.mwPickQ { width: 100%; padding: 10px 14px; border-radius: var(--r-md) }
.mwPickList { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain }
.mwPickOpt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 46px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); cursor: pointer }
.mwPickOpt:has(input:checked) { border-color: var(--gold); background: var(--gold-soft) }
.mwPickOpt input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--gold) }
.mwPickName { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mwPickOpt small { color: var(--muted); font-size: .8rem; white-space: nowrap }
.mwPickFoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px }
.mwFor { grid-column: 1 / -1; display: grid; gap: 10px }
.mwFor .label { color: var(--gold) }
.mwRow .mwPrayers { padding: 14px 0 0; margin: 4px 0 0; border-bottom: 0; border-top: 1px solid var(--line) }

/* the watch page: "Order of prayer" above the cards */
.colsRow { flex-wrap: wrap; row-gap: 10px }
.orderHead { display: grid; gap: 2px; margin-right: auto }
.orderHead .label { color: var(--gold) }
.orderWhen { font: 600 1.05rem var(--f-display); color: var(--ink) }
.colsRow .colsSpacer { display: none }
.goalText b { margin: 0 6px 0 4px }
/* Order of prayer: room between its lines, above it and before the cards */
.colsRow { margin: 10px 0 12px; align-items: flex-end }
.orderHead { gap: 7px; padding-left: 2px }
.orderWhen { line-height: 1.35 }
/* page columns never grow wider than the screen; wide rows (like the tabs) scroll inside instead */
#main > div { min-width: 0; grid-template-columns: minmax(0, 1fr) }
.toolbar { min-width: 0; flex-wrap: wrap }
.toolbar > .seg { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none }
.toolbar > .seg::-webkit-scrollbar { display: none }
/* every size: Edit / Turn off sit in the card's top-right corner, level with its label */
.mwCard { position: relative }
.mwCard .mwSide .mwActs { position: absolute; top: 16px; right: 18px; gap: 6px; margin: 0 }
.mwCard > .mwSide { align-self: start; padding-top: 34px }
.mwCard > .mwSide:not(:has(.mwEnc)) { padding: 0; min-height: 0 }
@media (max-width: 900px) {
  .mwCard .mwSide .mwActs { top: 14px; right: 12px; gap: 4px }
  .mwCard > .mwSide:not(:has(.mwEnc)) { margin-top: -14px }
  .mwCard > .mwMain .label { padding-right: 150px }
}
.goalSet { border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, transparent); padding: 7px 14px }

/* on the wall: more room around the count */
.mwCard .mwWall.celebrate { padding: 30px 30px 26px }
.mwWall .bignum { gap: 4px }
.mwWall .bignum .label { margin-bottom: 14px; letter-spacing: .12em }
.mwWall .bignum .num { line-height: 1; margin-bottom: 6px }
@media (max-width: 640px) { .mwCard .mwWall.celebrate { padding: 26px 22px 22px } }

/* missed: its own reset; the history of resets */
.mwMissed dt { display: flex; align-items: center; gap: 10px }
.mwMissReset { font-size: .78rem; color: var(--gold); padding: 2px 0 }
.mwWallActs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px }
.mwWallActs .btn { margin-left: auto }
.mwHist { font-size: .88rem; min-width: 0 }
.mwHist summary { cursor: pointer; color: var(--muted); padding: 6px 0; list-style-position: inside }
.mwHist[open] { flex-basis: 100% }
.mwHist ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px }
.mwHist li { display: grid; gap: 3px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent) }
.mwHist li span { color: var(--muted); font-size: .82rem }
.mwHist li b { font: 600 .98rem var(--f-display) }
.mwHist li small { color: var(--muted); font-size: .78rem }

/* My prayer watch: the countdown, and room between its lines */
.mwCard > .mwMain { gap: 12px }
.mwCard > .mwMain h3 { margin: 2px 0 0; line-height: 1.25 }
.mwCount { font: 600 .95rem var(--f-mono); color: var(--gold); margin: 4px 0 2px }
.mwSegs { justify-content: flex-start; flex: none; max-width: 340px }
.mwSegs .cdSeg { flex: 1 1 0; min-width: 0; padding: 8px 4px 6px }
.mwSegs .cdSeg b { color: var(--gold) }
.mwSegs i { flex: none }
.mwNote { line-height: 1.5 }

/* phones: the top section in clear rows: brand, then a status card, then the account bar */
@media (max-width: 640px) {
  .mastTop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: stretch }
  .brand { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center }
  .brand > div { display: contents }
  .brand .titleRow { grid-column: 2; gap: 6px }
  .brand p#sessionLine, .brand #onNow, .brand #prayNow { grid-column: 1 / -1 }
  .brand p#sessionLine { margin: 18px 0 0; padding: 14px 16px 4px; line-height: 1.45; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-bottom: 0; border-radius: 16px 16px 0 0 }
  .brand #onNow { margin: 0; padding: 4px 16px 12px; background: rgba(255,255,255,.05); border-left: 1px solid rgba(255,255,255,.12); border-right: 1px solid rgba(255,255,255,.12) }
  .brand #prayNow { padding: 0 10px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-top: 0; border-radius: 0 0 16px 16px }
  .brand #prayNow { margin-top: 0; padding-top: 4px }
  .brand #prayNow .prayNow { max-width: none; justify-content: space-between; border-radius: 12px; padding: 10px 10px 10px 14px; background: rgba(0,0,0,.16); border-color: transparent }
  .as { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; padding-top: 16px; border-top: 1px solid var(--mast-line, rgba(255,255,255,.12)) }
  .as .meLbl { grid-column: 1 / -1; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase }
  .as .meChip { grid-column: 1 / -1; width: 100%; justify-content: space-between; padding: 8px 8px 8px 16px }
  .as #installBtn { grid-column: 1 / -1 }
  .as #themeBtn, .as #textBtn, .as #signOut { justify-content: center; gap: 6px; min-height: 44px; padding: 8px 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); white-space: nowrap }
}
@media (max-width: 640px) {
  .brand:not(:has(.prayNow)) #prayNow { display: none }
  .brand:not(:has(.prayNow)) #onNow { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 0 0 16px 16px }
  .brand:not(:has(.prayNow)):has(#onNow[hidden]) p#sessionLine { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 16px }
}

/* Prayer Manual: breathing room between the chips, the sections and each prayer */
#catChips { gap: 10px; margin: 6px 0 22px }
#catChips .chip { padding: 7px 14px }
#ledger { gap: 24px !important }
#ledger .group > h3 { padding: 16px 24px }
#ledger .row { padding: 22px 24px; column-gap: 28px; row-gap: 12px }
#ledger .row .subj { gap: 8px }
#ledger .row .subj .kind { margin-top: 4px; line-height: 1.5 }
#ledger .row .txt { line-height: 1.65 }
#ledger .row .ref .refList { margin-top: 6px; gap: 10px }
#ledger .row .who { line-height: 1.6 }
@media (max-width: 640px) { #ledger .row { padding: 18px 18px } #ledger .group > h3 { padding: 14px 18px } }
/* room between the tabs and the page below */
header.mast { margin-bottom: 12px }
@media (max-width: 640px) { header.mast { margin-bottom: 6px } }
/* rows: room between a prayer's name and its labels, and the labels and the details line */
.row .subj { row-gap: 10px }
#ledger .row .subj { row-gap: 10px }
.row .subj .kind { margin-top: 2px }
/* on the wall: framed in gold, with room inside */
.mwCard .mwWall.celebrate { border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 18%, transparent), 0 6px 22px rgba(0, 0, 0, .16) }

/* worship music on My Prayer Watch */
.mwMusic { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); background: color-mix(in srgb, var(--gold) 6%, transparent) }
.mwMusic .label { color: var(--gold) }
.mwMusic.empty { border-style: dashed; background: transparent }
.mwMusicActs { display: flex; flex-wrap: wrap; gap: 10px }
.mwMusicActs .btn { text-decoration: none }
.mwPlayBtn { border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: var(--gold-soft); color: var(--gold) }
#mwPlayer:empty { display: none }
#mwPlayer { display: grid; gap: 10px; margin-top: 16px }
.mwPlayerFrame { border-radius: var(--r-md); overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); background: var(--sunk); box-shadow: var(--shadow-sm) }
.mwPlayerFrame iframe { display: block; width: 100%; border: 0 }
.mwPlayerFrame.video iframe { aspect-ratio: 16 / 9; height: auto }
.mwPlayerTip { margin: 0 4px; font-size: .84rem; line-height: 1.5 }
.mwMusicField .help { margin-top: 6px; line-height: 1.5 }
.mwMusicField input { width: 100% }
@media (max-width: 640px) { .mwMusic { padding: 14px } .mwMusicActs { width: 100% } .mwMusicActs .btn { flex: 1 1 auto; justify-content: center } }

/* the worship strip under My Prayer Watch */
#mwPlayer { gap: 12px; margin-top: 14px }
#mwPlayerBox { display: grid; gap: 10px }
#mwPlayerBox:empty { display: none }
#mwMusicBar .mwMusic { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface) 75%) }
#mwMusicBar .mwMusic.empty { background: transparent }
#mwPlayer:not(:empty) { margin-bottom: 22px }

/* someone else's card: a quiet note that they prayed (not a button) */
.slideAmen.theirs { cursor: default; box-shadow: none; background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold) }
.slideAmen.theirs:hover { background: var(--gold-soft) }

/* a WATCHMEN prayer: take it off just your own card */
.myCardRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sunk); font-size: .92rem; line-height: 1.5; color: var(--muted) }

/* the pattern Jesus taught: six parts of a built prayer, each with a faint label */
.lpField { gap: 12px }
.lpSwitch { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); background: color-mix(in srgb, var(--gold) 7%, transparent); cursor: pointer; font-weight: 600; line-height: 1.4 }
.lpSwitch input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--gold) }
.lpSwitch small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; margin-top: 2px }
.lpParts { display: grid; gap: 14px }
.lpParts[hidden], #lpPlain[hidden] { display: none }
.lpPart { display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sunk) }
.lpPart.off { opacity: .72; border-style: dashed; background: transparent }
.lpHead { display: flex; align-items: center; gap: 12px }
.lpN { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 700 .8rem var(--f-mono); color: var(--gold); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent) }
.lpLabel { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.35 }
.lpLabel b { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold) }
.lpLabel i { font-family: var(--f-display); font-size: .92rem; color: var(--muted) }
.lpActs { display: flex; align-items: center; gap: 12px; flex: none }
.lpNew { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1rem; cursor: pointer; line-height: 1 }
.lpNew:hover { border-color: var(--gold); color: var(--gold) }
.lpText { width: 100%; min-height: 96px; line-height: 1.65; resize: vertical }
.lpOff { margin: 0; font-size: .88rem; color: var(--muted) }

/* watch cards: when a card's prayer reaches its end, the page carries on scrolling (no dead stop between card and page) */
.slide { overscroll-behavior-y: auto }
@media (max-width: 640px) { .lpPart { padding: 12px 12px 14px } .lpText { min-height: 120px } }
/* builder: pray it as "I" or "we" */
.voiceRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line) }
.voiceRow .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none }
.voiceRow .seg button { white-space: nowrap }

/* several people on one prayer */
.groupTag { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent) }
.severalBox { display: grid; gap: 12px; margin-top: 12px; padding: 16px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--sunk) }
.severalList { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px }
.severalOpt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 46px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600 }
.severalOpt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft) }
.severalOpt input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent) }
.severalOpt small { color: var(--muted); font-weight: 500; margin-left: 4px }
.severalFoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px }
.severalFoot .help { margin: 0; line-height: 1.5 }
.severalActs { display: flex; gap: 8px; margin-left: auto }
/* the card's bottom row: watch times on the left, worship music in the bottom-right corner */
.mwCard .mwFoot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 16px; border-top: 1px solid var(--line) }
.mwCard .mwFoot .mwTimes { padding: 0; border-top: 0; flex: 1 1 260px; min-width: 0 }
.mwCard .mwFoot .mwMusic { grid-column: auto; flex: 0 1 auto; margin-left: auto; padding: 0; border: 0; background: none; gap: 10px 14px }
.mwCard .mwFoot .mwMusic.empty .link { font-size: .9rem }
@media (max-width: 640px) {
  .mwCard .mwFoot { align-items: stretch }
  .mwCard .mwFoot .mwMusic { flex: 1 1 100%; margin-left: 0; justify-content: space-between }
  .mwCard .mwFoot .mwMusicActs { width: auto }
}
/* phones: the card's bottom row as two tidy tiles, like the stats above */
@media (max-width: 640px) {
  .mwCard .mwFoot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 16px }
  .mwCard .mwFoot .mwTimes, .mwCard .mwFoot .mwMusic { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); margin: 0 }
  .mwCard .mwFoot .mwTimes::before { content: "Your watch times"; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold) }
  .mwCard .mwFoot .mwTimes li { display: grid; gap: 4px; line-height: 1.45 }
  .mwCard .mwFoot .mwTimes li + li { padding-top: 10px; border-top: 1px dashed var(--line) }
  .mwCard .mwFoot .mwMusic { border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface) 80%) }
  .mwCard .mwFoot .mwMusicActs { width: 100% }
  .mwCard .mwFoot .mwMusicActs .btn { flex: 1 1 100%; justify-content: center; min-height: 44px; font-size: .95rem }
  .mwCard .mwFoot .mwMusic.empty { border-style: dashed; background: transparent }
}
@media (max-width: 640px) {
  .mwCard .mwFoot .mwMusicActs { display: flex }
  .mwCard .mwFoot .mwMusicActs .btn { width: 100% }
  #myWatchCard { margin-bottom: 22px }
}
@media (max-width: 640px) {
  .mwCard .mwFoot .mwMusic { justify-content: stretch }
  body #main #myWatchCard { margin-bottom: 22px }
}

/* inside a prayer: "Pray and post" choices as a tidy grid on narrow screens (no words broken across lines) */
@media (max-width: 640px) {
  #compose { gap: 14px }
  #compose #kindSeg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; border-radius: var(--r-md); width: 100%; max-width: none; overflow: visible }
  #compose #kindSeg button { white-space: nowrap; min-height: 44px; padding: 10px 12px; border-radius: 12px; font-size: .92rem; justify-content: center; text-align: center }
  #compose #kindSeg button:last-child:nth-child(odd) { grid-column: 1 / -1 }
  #compose textarea { min-height: 120px; line-height: 1.55; padding: 12px 14px }
  #compose .actions { display: flex }
  #compose .actions .btn { flex: 1 1 100%; justify-content: center; min-height: 46px }
  #compose .kindHelp { margin: 0; line-height: 1.5 }
}
@media (max-width: 640px) {
  #compose #kindSeg button { border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent) }
  #compose #kindSeg button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft) }
}
/* iPads and other touch screens wider than a phone: the same outlined "Pray and post" buttons, in a row that wraps neatly */
@media (hover: none) and (min-width: 641px) {
  #compose { gap: 14px }
  #compose #kindSeg { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; padding: 8px; border-radius: var(--r-md); width: 100%; max-width: none; overflow: visible }
  #compose #kindSeg button { padding: 10px 8px; font-size: .9rem }
  #compose #kindSeg button { white-space: nowrap; min-height: 44px; padding: 10px 12px; border-radius: 12px; justify-content: center; text-align: center; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent) }
  #compose #kindSeg button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft) }
  #compose textarea { min-height: 120px; line-height: 1.55; padding: 12px 14px }
  #compose .actions { display: flex }
  #compose .actions .btn { flex: 1 1 100%; justify-content: center; min-height: 46px }
}
@media (hover: none) and (min-width: 641px) {
  #compose #kindSeg { display: flex; flex-wrap: wrap }
  #compose #kindSeg button { flex: 1 1 auto; padding: 10px 14px }
}

/* My Prayers: the heading with its main button beside it, then the filters on their own row */
.mineHead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px }
.mineHead .mineIntro { flex: 1 1 360px; min-width: 0 }
.mineHead .mineNew { flex: none; min-height: 44px; padding-inline: 20px }
.mineBar { margin-top: 2px }
@media (max-width: 640px) {
  .mineHead { display: grid; gap: 14px }
  .mineHead .mineNew { width: 100%; justify-content: center; min-height: 46px }
}
/* phones and touch screens: the filters as outlined buttons in a grid, like "Pray and post" */
@media (max-width: 640px), (hover: none) {
  .mineBar #mineSeg { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; padding: 8px; width: 100%; max-width: none; overflow: visible; border-radius: var(--r-md) }
  .mineBar #mineSeg button { min-height: 44px; padding: 10px 12px; border-radius: 12px; justify-content: center; text-align: center; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent) }
  .mineBar #mineSeg button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft) }
}
@media (max-width: 640px) {
  .mineBar #mineSeg { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .mineBar #mineSeg button[data-mine="shared"] { grid-column: span 2 }
}
/* lists: a long prayer shows its first few lines; the whole prayer is there when you open it */
.prgroup .row .txt, #ledger .row .txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden }
/* labels under a prayer's name never poke out of their column */
.row .subj > span:not(.kind) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left }

/* the header's top-left corner: a larger square tile for the flame, like an app icon */
.mast .brand { gap: 20px; align-items: flex-start }
.mast .brand > .emblem { width: 96px; height: 96px; padding: 20px; margin-top: 0; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 120% at 30% 20%, rgba(227, 187, 102, .30), rgba(227, 187, 102, .06) 55%, rgba(255, 255, 255, .03));
  border: 1px solid rgba(227, 187, 102, .45); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08) }
@media (max-width: 900px) and (min-width: 641px) { .mast .brand > .emblem { width: 84px; height: 84px; padding: 17px; border-radius: 22px } }
/* phones: a medium tile, centred beside the name and the tagline */
@media (max-width: 640px) {
  .mast .brand { column-gap: 16px; row-gap: 0 }
  .mast .brand > .emblem { width: 64px; height: 64px; padding: 13px; border-radius: 18px; align-self: center; grid-row: 1 }
}
/* laptop and iPad: a bigger logo tile, and room between the lines beside it */
@media (min-width: 641px) {
  .mast .brand { gap: 26px }
  .mast .brand > .emblem { width: 118px; height: 118px; padding: 25px; border-radius: 28px }
  .mast .brand p#sessionLine { margin-top: 14px; line-height: 1.5 }
  .mast .brand #onNow { margin-top: 8px }
  .mast .brand #prayNow { margin-top: 16px }
  .mast .titleRow { row-gap: 8px }
}
@media (max-width: 900px) and (min-width: 641px) { .mast .brand > .emblem { width: 100px; height: 100px; padding: 21px; border-radius: 24px } }
/* laptop browsers: a larger logo tile */
@media (min-width: 901px) { .mast .brand > .emblem { width: 140px; height: 140px; padding: 30px; border-radius: 32px } }
/* the comment window: roomier than the card it opens from */
@media (min-width: 561px) {
  .cmCard { width: min(780px, 100%); min-height: min(62vh, 560px); max-height: min(86vh, 860px); padding: 30px 32px; gap: 20px }
  .cmCard .ccForm textarea { min-height: 96px; font-size: 1rem; line-height: 1.55 }
  .cmCard .ccText { font-size: 1.02rem; line-height: 1.6 }
  .cmCard .ccList li { padding: 16px 18px }
}
/* no comments yet: the invitation sits in the middle of the window, not stranded at the top */
.cmCard .ccList:has(> .ccNone:only-child) { display: grid; place-items: center }
.cmCard .ccList > .ccNone:only-child { border: 1px dashed var(--line); background: transparent; padding: 28px 24px; text-align: center; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 420px }
/* the "no comments yet" box always has room inside it */
.cmCard .ccList > li.ccNone { padding: 16px 18px !important; line-height: 1.55 }
.cmCard .ccList > li.ccNone:only-child { padding: 28px 24px !important }
/* mouse and trackpad: a card's scroll never spills onto the page (touch keeps flowing naturally) */
@media (hover: hover) { .slide { overscroll-behavior-y: contain } }
/* watch cards: the New / Updated tags sit evenly between the prayer's heading and the box below */
#watches .slide .pt .subj > span:not(.dot) { margin-top: 7px }
#watches .slide .pt .subj + * { margin-top: -1px }

/* the prayer window: writing boxes don't catch the thumb while scrolling past them (they grow to fit, so nothing is hidden) */
#sheet textarea:not(:focus) { overflow-y: hidden; overscroll-behavior: auto }
.ppEmpty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px }

/* wide screens: the open prayer sits beside the page; the page stays usable and makes room for it */
html.drawerSide #drawer { pointer-events: none }
html.drawerSide #drawer .scrim { display: none }
@media (prefers-reduced-motion: no-preference) { html.drawerSide body { transition: padding-right .22s ease } }
/* the side panel's width: your dragged width (or about 42% of the screen), always leaving the page at least 640px */
html.drawerSide { --sideW: clamp(400px, var(--sheetW, 42vw), max(400px, calc(100vw - 640px))) }
html.drawerSide #drawer .sheet { pointer-events: auto; width: var(--sideW); border-left: 1px solid var(--line) }
html.drawerSide body { padding-right: var(--sideW) }
html.drawerSide .sheetGrip { pointer-events: auto; right: calc(var(--sideW) - 8px) }
html.sheetResizing body { transition: none !important }
/* the page beside the panel: the logo scales with the room the page has, so the header keeps its proportions */
html.drawerSide .mast .brand > .emblem { width: clamp(76px, calc((100vw - var(--sideW)) * .12), 140px); height: clamp(76px, calc((100vw - var(--sideW)) * .12), 140px); padding: clamp(15px, calc((100vw - var(--sideW)) * .021), 30px); border-radius: clamp(18px, calc((100vw - var(--sideW)) * .023), 32px) }

/* the tab row slides when it doesn't fit: soft fades at the edges and small arrows show there's more */
.tabsWrap { position: relative }
.tabsWrap.canL .tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px); mask-image: linear-gradient(90deg, transparent 0, #000 56px) }
.tabsWrap.canR .tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%) }
.tabsWrap.canL.canR .tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%) }
.tabArrow { position: absolute; top: calc(50% + 4px); transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; padding: 0 0 2px; font-size: 1.3rem; line-height: 1; cursor: pointer;
  color: var(--mast-ink, #fff); background: rgba(18, 24, 41, .85); border: 1px solid var(--mast-line, rgba(255, 255, 255, .15)); box-shadow: 0 4px 12px rgba(0, 0, 0, .35) }
.tabArrow:hover { background: rgba(255, 255, 255, .14) }
.tabArrow.l { left: -6px }
.tabArrow.r { right: -6px }
.tabArrow[hidden] { display: none }
@media (hover: none) { .tabArrow { width: 30px; height: 30px } }
/* the header never grows wider than the page (so the tab row slides instead of being cut off) */
.app { grid-template-columns: minmax(0, 1fr) }
header.mast, .tabsWrap, .tabs { min-width: 0; max-width: 100% }
/* side by side: the panel's frame covers only the right side, so nothing at all sits over the page
   (an iPad can swallow swipes under an invisible full-screen layer even when it lets taps through) */
html.drawerSide #drawer { left: auto; right: 0; width: var(--sideW); pointer-events: auto; overflow: visible }
html.drawerSide #drawer .sheet { width: 100% }
html.drawerSide .sheetGrip { right: auto; left: -8px }

/* Team & Categories: every person's row lines up (the name boxes are all the same width) */
.teamList > li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 34px 34px 158px 104px 112px 92px; align-items: center; gap: 10px }
.teamList > li > input { width: 100%; min-width: 0 }
.teamList .tSlot { display: flex; justify-content: center; min-width: 0 }
.teamList .tSlot > *, .teamList > li > .btn { width: 100%; justify-content: center; text-align: center; white-space: nowrap }
.teamList .tSlot .noPin { width: auto }
@media (max-width: 900px) {
  .teamList > li { grid-template-columns: 56px minmax(0, 1fr) 34px 34px; row-gap: 10px }
  .teamList .tSlot, .teamList > li > .btn { grid-column: span 2 }
  .teamList .tSlot:empty { display: none }
}

/* ---------- Glossary ---------- */
.glView { display: grid; gap: 28px }
.glBar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px }
.glBar input[type=search] { flex: 1 1 300px; min-width: 0; padding: 12px 16px; border-radius: var(--r-md) }
.glSeg { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap }
.glSeg::-webkit-scrollbar { display: none }
.glSeg button { white-space: nowrap; flex: none }
#glBody { display: grid; gap: 40px }
.glSection { display: grid; gap: 22px }
.glHead { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line) }
.glNum { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font: 700 1.05rem var(--f-display); color: var(--gold); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent) }
.glHead h3 { margin: 0 0 6px; font: 600 1.5rem/1.2 var(--f-display) }
.glHead p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 70ch }
.glGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; align-items: start }
.glCard { display: grid; gap: 18px; padding: 26px 26px 24px; border-radius: calc(var(--r) + 2px); border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 5%, var(--surface)), var(--surface) 60%); box-shadow: var(--shadow-sm); scroll-margin: 24px }
.glCard h4 { margin: 0; font: 600 1.6rem/1.15 var(--f-display); letter-spacing: -.01em }
.glCard .label { display: block; margin-bottom: 8px; color: var(--gold); font-size: .72rem; letter-spacing: .14em }
.glMeaning { margin: 0; font-size: 1.08rem; line-height: 1.55 }
.glParts ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: gl }
.glParts li { counter-increment: gl; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunk); border: 1px solid var(--line) }
.glParts li::before { content: counter(gl); grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 700 .78rem var(--f-mono); color: var(--gold); background: var(--gold-soft) }
.glParts li b { font-weight: 650; line-height: 1.35 }
.glParts li span { color: var(--muted); line-height: 1.5; font-size: .95rem }
.glNote { margin: 0; padding: 12px 14px; border-left: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .94rem; line-height: 1.55; color: var(--ink-2) }
.glPrayer, .glPrinciple { padding: 16px 18px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); background: var(--gold-soft) }
.glPrinciple { background: transparent; border-style: dashed }
.glPrayer p, .glPrinciple p { margin: 0; line-height: 1.6 }
.glRefs .refList { margin: 0 }
.glQuote { margin: 0; padding: 18px 20px; border-radius: var(--r-md); background: var(--sunk); font: italic 1.15rem/1.5 var(--f-display); display: grid; gap: 10px }
.glQuote cite { font-style: normal }
.glGroup { display: grid; gap: 14px }
.glGroup h5 { margin: 0; font: 700 .8rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px }
.glGroup h5 small { font: 500 .9rem var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--muted) }
.glWords { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px }
.glWord { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); text-align: left; color: var(--ink); font: inherit }
.glWord b { font: 600 1.12rem var(--f-display) }
.glWord span { color: var(--muted); line-height: 1.55; font-size: .95rem }
.glWord.seeAbove { cursor: pointer; border-style: dashed; background: transparent }
.glWord.seeAbove span { color: var(--gold) }
.glWord.seeAbove:hover { border-color: var(--gold) }
.glCaution { margin: 4px 0 0; padding: 14px 18px; border-radius: var(--r-md); border: 1px dashed var(--line); color: var(--muted); font-size: .92rem; line-height: 1.55 }
.glCard.glFlash { animation: glFlash 1.6s ease }
@keyframes glFlash { 25% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 45%, transparent) } }
@media (max-width: 640px) {
  .glView { gap: 22px }
  .glCard { padding: 20px 18px; gap: 16px }
  .glCard h4 { font-size: 1.4rem }
  .glHead h3 { font-size: 1.3rem }
  .glSeg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; width: 100%; overflow: visible; border-radius: var(--r-md) }
  .glSeg button { min-height: 44px; border-radius: 12px; justify-content: center; border: 1px solid var(--line) }
  .glSeg button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft) }
}
.glGrid:has(> .glLaw) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)) }
@media (max-width: 640px) { .glSeg button { white-space: normal; line-height: 1.3; padding: 8px 10px; text-align: center } }

/* Categories: every name box the same width (the prayer count has its own fixed column) */
.catList > li { display: grid; grid-template-columns: 12px minmax(0, 1fr) 44px 92px; align-items: center; gap: 12px }
.catList > li > input { width: 100%; min-width: 0 }
.catList .catCount { font-size: .8rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums }
.catList > li > .btn { width: 100%; justify-content: center }

/* Prayer Builder: the kinds sit in an even grid, with "What God will do" on its own row */
#promChips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; align-items: stretch }
#promChips > .chip { justify-content: center; min-height: 40px; padding: 8px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#promChips > .topicPick { grid-column: 1 / -1; justify-self: end; margin-top: 4px }
#promChips > .promNewKind { border-style: dashed; color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: transparent }
#promChips > .promNewKind:hover { background: var(--gold-soft) }
@media (max-width: 640px) {
  #promChips { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  #promChips > .chip { white-space: normal; line-height: 1.3; text-align: center }
  #promChips > .topicPick { justify-self: stretch }
}
/* Glossary: cards in a row are all the same height, with "In prayer" lined up along the bottom */
.glGrid { align-items: stretch }
.glCard { display: flex; flex-direction: column; gap: 18px }
.glCard > .glPrayer { margin-top: auto }
.glCard > .glPrayer + .glRefs, .glCard > .glPrinciple + .glPrayer { margin-top: 0 }
.glCard.glLaw > .glPrinciple { margin-top: auto }
.glWords { align-items: stretch }
/* Glossary "See it in full above" cards look like every other card (the gold line says they link up) */
.glWord.seeAbove { border-style: solid; border-color: var(--line); background: var(--surface) }
.glWord.seeAbove:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)) }
/* Glossary: every card, big or small, has the same warm tint */
.glWord, .glWord.seeAbove { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 5%, var(--surface)), var(--surface) 60%); box-shadow: var(--shadow-sm) }
/* Glossary, merged words section */
.glGroup { gap: 18px }
.glGroup + .glGroup { margin-top: 18px; padding-top: 26px; border-top: 1px solid var(--line) }
.glGroup h5 { font-size: .86rem }
.glDepth { align-self: flex-start; font: 700 .68rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 4px 10px; border-radius: 999px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); margin-bottom: -6px }
.glWord { padding: 20px 20px 18px; gap: 12px }
.glWord .label { display: block; margin-bottom: 6px; color: var(--gold); font-size: .68rem; letter-spacing: .14em }
.glMeaning.sm { font-size: .98rem; line-height: 1.55; margin: 0 }
.glWordRefs { margin-top: auto; padding-top: 4px }
/* Glossary: leaders' add and edit buttons */
.glHead > div { flex: 1 1 auto; min-width: 0 }
.glAdd { flex: none; align-self: center; border: 1px dashed color-mix(in srgb, var(--gold) 50%, var(--line)); background: transparent; color: var(--gold); white-space: nowrap }
.glAdd:hover { background: var(--gold-soft) }
.glCardTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px }
.glCard > .glCardTop { margin-bottom: -6px }
.glWord .glCardTop b { font: 600 1.12rem var(--f-display) }
.glEdit { flex: none; margin-left: auto; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 .78rem var(--f-ui); cursor: pointer; opacity: .8 }
.glEdit:hover { opacity: 1; color: var(--ink); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)) }
@media (max-width: 640px) { .glHead { flex-wrap: wrap } .glAdd { width: 100%; justify-content: center; min-height: 44px } }
/* Glossary: "In prayer" and "Pray it" */
.glPrayer { display: grid; gap: 6px }
.glPrayer .label { margin-bottom: 0 }
.glPrayer .glPrayItLabel { margin-top: 10px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--gold) 25%, transparent) }
.glPrayIt { margin: 0; font: italic 1.05rem/1.6 var(--f-display); color: var(--ink) }
.glPrayer.sm { margin-top: auto; padding: 14px 16px }
.glPrayer.sm p { font-size: .94rem; line-height: 1.55 }
.glPrayer.sm .glPrayIt { font-size: 1rem }
.glWord .glWordRefs { margin-top: 0 }
.glHero q { font-family: var(--f-display); font-style: italic; font-size: 1.08rem }
.glPrayIt { white-space: pre-line }

/* prayer tabs at the top of a prayer: a long name ends with "…" inside the button, never at its edge */
.ptab { padding-right: 16px; text-overflow: clip }
.ptab .ptabT { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ---------- Prayer Builder: build mode ---------- */
.pbWrap { display: grid; gap: 22px }
.pbModeBar { display: flex; justify-content: center }
.pbModeSeg button { padding: 10px 20px; font-weight: 600 }
.pbView { display: grid; gap: 22px }
.pbTypes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px }
.pbType { text-align: left; align-items: flex-start; display: grid; gap: 6px; padding: 14px 16px }
.pbTypeAbout { font-size: .86rem; line-height: 1.45; color: var(--muted); font-weight: 400 }
.pbType.on .pbTypeAbout { color: inherit; opacity: .85 }
.pbGuide { margin-top: 14px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); background: color-mix(in srgb, var(--gold) 6%, transparent); display: grid; gap: 10px }
.pbGuide .label { color: var(--gold) }
.pbGuide .ptSteps { margin: 0 }
.pbRoot { display: grid; gap: 6px }
.pbChosen { display: grid; gap: 10px; margin-bottom: 14px }
.pbChosen .label { color: var(--gold) }
.pbChosenList { display: flex; flex-wrap: wrap; gap: 10px }
.pbChip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border-radius: 14px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); max-width: 100% }
.pbChipWill { font-size: .88rem; line-height: 1.35; min-width: 0 }
.pbChip button { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--muted); cursor: pointer }
.pbChip .refList { margin: 0 }
.pbPickBar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 12px }
.pbPickBar input[type=search] { flex: 1 1 260px; min-width: 0; padding: 11px 14px; border-radius: var(--r-md) }
.pbTopic { display: grid; gap: 6px; min-width: 220px }
.pbCats { margin-bottom: 14px }
.pbPromises { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) }
.pbProm { text-align: left; display: grid; gap: 8px; align-content: start; padding: 14px 16px }
.pbPromTop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px }
.pbPromTop .refList { margin: 0 }
.pbPromKind { font: 700 .66rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.pbPromTopic { font-size: .8rem; color: var(--muted) }
.pbPromAdd { font: 600 .8rem var(--f-ui); color: var(--gold); margin-top: 2px }
.pbMore { justify-self: center; margin-top: 12px }
.pbParts { display: grid; gap: 14px; margin-top: 14px }
.pbPart { display: grid; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sunk) }
.pbPart.off { opacity: .7; border-style: dashed; background: transparent }
.pbToggle { flex: none; padding: 5px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--gold-soft); color: var(--gold); font: 700 .78rem var(--f-ui); cursor: pointer }
.pbToggle[aria-pressed="false"] { background: transparent; color: var(--muted); border-color: var(--line) }
.pbOpts { gap: 8px }
.pbOpts .stChip { max-width: 100%; white-space: normal; text-align: left; line-height: 1.35 }
.pbPartText { margin: 0; line-height: 1.65; white-space: pre-line }
.pbOwn { width: 100%; min-height: 110px; line-height: 1.6 }
.pbPartActs { display: flex; flex-wrap: wrap; gap: 8px 18px }
.pbBulletMaker { display: grid; gap: 12px; margin-bottom: 18px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sunk) }
.pbBulletMaker > .label, .pbExtraLbl { color: var(--gold) }
.pbOpeners { gap: 8px }
.pbNewOpener { border-style: dashed; color: var(--gold) }
.pbNewOpenerBox { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px }
.pbNewOpenerBox input { width: 200px; padding: 8px 12px }
.pbDraft { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 10px; align-items: center }
.pbDraft input { width: 100%; min-width: 0; padding: 11px 14px }
.pbMyBullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.pbMyBullets li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line) }
.pbMyBullets .pcN { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-soft); color: var(--gold); font: 700 .75rem var(--f-mono) }
.pbMyBullets .pcRef .refList { margin: 0 }
.pbDel { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer }
.pbDel:hover { color: var(--danger); border-color: var(--danger) }
.pbExtraLbl { display: block; margin-bottom: 8px }
.pbView #pbExtra { width: 100%; min-height: 110px }
.pbPointLbl { display: grid; gap: 6px; margin-top: 14px }
.pbSendRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px }
.pbSendRow .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none }
.pbSendRow .seg button { white-space: nowrap }
.pbField { display: grid; gap: 6px; margin-bottom: 14px }
.pbFields2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px }
@media (max-width: 640px) {
  .pbDraft { grid-template-columns: minmax(0, 1fr) }
  .pbDraft .btn { justify-content: center; min-height: 44px }
  .pbMyBullets li { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .pbMyBullets .pcRef { grid-column: 2 / -1 }
  .pbModeSeg { width: 100% } .pbModeSeg button { flex: 1 1 0 }
  .pbSendRow .seg { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 6px; padding: 6px; border-radius: var(--r-md) }
  .pbSendRow .seg button { white-space: normal; justify-content: center; min-height: 42px }
}
/* Prayer Builder: life areas and what's happening */
.pbAreaChips { gap: 10px; margin-bottom: 4px }
.pbIssues { display: grid; gap: 12px; margin-top: 14px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); background: color-mix(in srgb, var(--gold) 5%, transparent) }
.pbIssues > .label { color: var(--gold) }
.pbOwnIssue { display: inline-flex; align-items: center; gap: 6px }
.pbOwnIssue button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px }
.pbOwnIssueRow { display: flex; gap: 10px; flex-wrap: wrap }
.pbOwnIssueRow input { flex: 1 1 240px; min-width: 0; padding: 10px 14px }
.pbIssueNotes { display: grid; gap: 8px }
.pbIssueNote { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); font-size: .92rem; line-height: 1.45 }
.pbIssueNote span { color: var(--muted) }
.pbIssueNote .refList { margin: 0 }
@media (max-width: 640px) { .pbIssueNote { grid-template-columns: minmax(0, 1fr) } }
/* kind-of-prayer tiles: the name above its description */
.pbTypes .pbType { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: 6px; align-content: start; text-align: left; min-height: 0 }
.pbTypes .pbType > * { grid-column: 1; min-width: 0; text-align: left }
.pbRoot { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--gold) 25%, transparent) }
.pbRoot input { padding: 10px 14px }
.pbPromises .pbProm { grid-template-columns: minmax(0, 1fr); grid-template-rows: none } .pbPromises .pbProm > * { grid-column: 1; min-width: 0 }
/* Prayer Builder polish: word choices as a tidy list, the chosen words in a framed quote, placeholders in a soft box */
.pbOpts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px }
.pbOpts::before { content: "Choose the words"; font: 700 .7rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px }
.pbOpts .stChip { width: 100%; justify-content: flex-start; text-align: left; border-radius: 12px; padding: 10px 14px; font-size: .9rem }
.pbOpts .stChip[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--gold) }
.pbPartText { padding: 14px 16px 14px 18px; border-radius: var(--r-sm); background: var(--surface); border-left: 3px solid color-mix(in srgb, var(--gold) 60%, transparent); font-size: 1rem }
.pbView .stStep > .stHint, .pbView #pbChosen > .stHint { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--r-md); border: 1px dashed var(--line); color: var(--muted) }
.pbTypes .pbType { gap: 6px; row-gap: 6px }
/* Prayer Builder: write it yourself, with suggestions */
.pbHow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line) }
.pbHow .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none }
.pbHow .seg button { white-space: nowrap }
.pbWriteLbl { display: grid; gap: 8px; margin-top: 16px }
.pbWriteLbl .label { color: var(--gold) }
#pbWritten { width: 100%; min-height: 260px; line-height: 1.7; font-size: 1.02rem; padding: 16px 18px }
.pbSuggest { display: grid; gap: 12px; margin-top: 16px; padding: 18px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface) 70%) }
.pbSuggest > .label { color: var(--gold) }
.pbSugRow { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: start; gap: 8px 14px }
.pbSugLbl { font: 700 .72rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 9px }
.pbSugAll { border-style: dashed; color: var(--gold) }
.pbSugProm { max-width: 100%; white-space: normal; text-align: left }
@media (max-width: 640px) { .pbSugRow { grid-template-columns: minmax(0, 1fr) } .pbSugLbl { padding-top: 0 } .pbHow .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100% } .pbHow .seg button { white-space: normal } }
/* areas: more areas open in a grid; your own area */
.pbMoreAreas, .pbOwnArea { border-style: dashed; color: var(--gold) }
.pbAreaMore { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sunk) }
.pbNameArea { margin-top: 12px }
.pbCustomHint { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5 }
/* Prayer Builder preview: labelled parts */
.pbPrev { display: grid; gap: 22px; margin-bottom: 22px }
.pbPrevBlock { display: grid; gap: 10px }
.pbPrevBlock > .label { color: var(--gold) }
.pbPrevEmpty { padding: 16px 18px; border-radius: var(--r-md); border: 1px dashed var(--line); color: var(--muted); line-height: 1.55; font-size: .95rem }
.pbPrevRefs .refList { margin: 0 }
#pbSend { padding-top: 20px; border-top: 1px solid var(--line) }
.pbFieldHelp { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.5 }
/* the library: each scripture card is tappable */
#pbLib #promList li { cursor: pointer; transition: border-color .15s, background .15s }
#pbLib #promList li:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)) }
/* step 4: a way into the full library */
.pbLibLink { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; padding: 12px 16px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); background: color-mix(in srgb, var(--gold) 6%, transparent); color: var(--muted); font-size: .92rem; line-height: 1.5 }
.pbLibLink .btn { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)) }
/* library: build a prayer from a scripture */
.piBuild { justify-self: start; margin-top: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--gold-soft); color: var(--gold); font: 600 .8rem var(--f-ui); cursor: pointer }
.piBuild:hover { background: color-mix(in srgb, var(--gold) 22%, transparent) }

/* messages sit above the bottom bar while it's showing */
body:has(#basketBar .basket) #toast { bottom: calc(118px + env(safe-area-inset-bottom, 0px)) }
@media (max-width: 560px) { body:has(#basketBar .basket) #toast { bottom: calc(150px + env(safe-area-inset-bottom, 0px)) } }
.pbNewKind { border-style: dashed; color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)) }
/* God's Oracles heading over the row of oracles */
.pbOraclesLbl { display: block; margin: 4px 0 10px; color: var(--gold); line-height: 1.5 }
.pbOraclesLbl i { font: italic 500 .86rem var(--f-display); letter-spacing: 0; text-transform: none; color: var(--muted) }
/* phones: the builder's choices as an outlined two-column grid (structured, easy to tap) */
@media (max-width: 640px) {
  .pbView .pbAreaChips, .pbView .pbAreaMore, .pbView .pbIssues > .stChips, .pbView .pbCats, .pbView .pbOpeners, .pbView .pbRoot > .stChips {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .pbView .pbAreaChips .stChip, .pbView .pbAreaMore .stChip, .pbView .pbIssues .stChip, .pbView .pbCats .stChip, .pbView .pbOpeners .stChip, .pbView .pbRoot .stChip {
    width: 100%; min-height: 42px; justify-content: center; text-align: center; white-space: normal; line-height: 1.3; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 60%, transparent) }
  .pbView .stChip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: var(--gold-soft); color: var(--gold) }
  .pbView .pbAreaMore { padding: 10px }
  .pbView .pbOwnIssueRow .btn { min-height: 42px }
}

/* phones: each team member in three tidy lines, every row the same shape */
@media (max-width: 640px) {
  .teamList > li { grid-template-columns: 44px 44px minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; row-gap: 10px; column-gap: 8px; padding: 14px }
  .teamList > li > .idx { grid-column: 1; grid-row: 1 }
  .teamList > li > input { grid-column: 2 / -1; grid-row: 1 }
  .teamList > li > [data-act="tup"] { grid-column: 1; grid-row: 2; justify-self: stretch; width: 100% }
  .teamList > li > [data-act="tdown"] { grid-column: 2; grid-row: 2; justify-self: stretch; width: 100% }
  .teamList > li > .tLead { grid-column: 3 / -1; grid-row: 2 }
  .teamList > li > .tPin { grid-column: 1 / 3; grid-row: 3; display: flex !important; justify-content: center; align-items: center }
  .teamList > li > [data-act="away"] { grid-column: 3; grid-row: 3 }
  .teamList > li > [data-act="trem"] { grid-column: 4; grid-row: 3 }
  .teamList .tSlot, .teamList > li > .btn { grid-column: auto }
}
/* the builder's save area: stacked and roomy, the buttons on their own line */
.pbView #pbSend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start }
.pbView #pbSend > * { min-width: 0; margin: 0 }
.pbView #pbSend .pbField { display: grid; gap: 8px; max-width: 640px }
.pbView #pbSend .pbField input, .pbView #pbSend .pbField select { width: 100%; padding: 12px 14px }
.pbView #pbSend .pbFields2 { max-width: 760px }
.pbView #pbSend .lpSwitch { justify-self: start; max-width: 520px }
.pbView #pbSend .stGo { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line) }
.pbView #pbSend .stGo .btn.primary { min-height: 44px; padding-inline: 22px }
@media (max-width: 640px) { .pbView #pbSend .stGo { justify-content: stretch } .pbView #pbSend .stGo .btn { flex: 1 1 auto; justify-content: center; min-height: 46px } }

/* the session bar: date, time and minutes always sit in the top-left corner; the layout follows the room the bar has */
div:has(> .bar #sDate) { container: sess / inline-size }
#main .bar:has(#sDate) { display: grid; align-items: start; justify-items: start; gap: 14px 18px;
  grid-template-columns: repeat(3, max-content) minmax(0, 1fr);
  grid-template-areas: "date start min ." "cd cd cd cd" "acts acts acts acts" }
#main .bar:has(#sDate) > .field:has(#sDate) { grid-area: date }
#main .bar:has(#sDate) > .field:has(#sStart) { grid-area: start }
#main .bar:has(#sDate) > .field:has(#sMin) { grid-area: min }
#main .bar:has(#sDate) > .countdown { grid-area: cd; order: 0; width: 100%; justify-self: stretch; flex: none }
#main .bar:has(#sDate) > .barActions { grid-area: acts; order: 0 }
#main .bar:has(#sDate) > .field { margin: 0 }
@container sess (min-width: 860px) {
  #main .bar:has(#sDate) { grid-template-columns: repeat(3, max-content) minmax(0, 1fr) minmax(320px, 440px); grid-template-areas: "date start min . cd" "acts acts acts . cd" }
  #main .bar:has(#sDate) > .countdown { width: 100%; justify-self: stretch; min-width: 0 }
}
@container sess (max-width: 520px) {
  #main .bar:has(#sDate) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "date date" "start min" "cd cd" "acts acts"; justify-items: stretch }
  #main .bar:has(#sDate) > .field input { width: 100% }
}

/* order of prayer row: the order on the left, the controls together on the right; stacked when there's no room */
#colsRow { display: block; container: cols / inline-size }
#colsRow .colsGrid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px }
#colsRow .orderHead { margin: 0; min-width: 0 }
#colsRow .colsTools { display: flex; align-items: center; gap: 16px }
#colsRow .colsLayout { display: flex; align-items: center; gap: 10px }
#colsRow .colsLayout .label { margin: 0 }
#colsRow .clearBtn { white-space: nowrap }
@container cols (max-width: 760px) {
  #colsRow .colsGrid { grid-template-columns: minmax(0, 1fr); align-items: start }
  #colsRow .colsTools { justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line) }
  #colsRow .colsLayout { order: 1 }
  #colsRow .clearBtn { order: 2; margin-left: auto }
}
@container cols (max-width: 420px) {
  #colsRow .colsTools { flex-wrap: wrap; row-gap: 10px }
  #colsRow .colsLayout { width: 100% }
  #colsRow .colsLayout .seg { flex: 1; overflow-x: auto; scrollbar-width: none }
}
/* order row controls: their words rest on one line (baselines aligned), at their own sizes */
#colsRow .colsTools, #colsRow .colsLayout { align-items: baseline }
#colsRow .colsLayout .label { line-height: 1.2 }
#colsRow .clearBtn { line-height: 1.2; padding-block: 0 }

/* glossary: every card, in depth or short, sits on one shared set of columns so the rows line up */
.glGrid, .glWords, .glGrid:has(> .glLaw) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px }

/* glossary word cards: each part lines up across a row (title, meaning, scripture, In prayer, Pray it) */
@supports (grid-template-rows: subgrid) {
  .glWords { grid-auto-rows: auto; row-gap: 20px }
  .glWord { grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 12px; align-content: stretch }
  .glWord > .glCardTop { grid-row: 1 }
  .glWord > .glMeaning { grid-row: 2 }
  .glWord > .glWordRefs { grid-row: 3 }
  .glWord > .glPrayer.sm { grid-row: 4 / span 4; display: grid; grid-template-rows: subgrid; row-gap: 6px; margin-top: 0; align-content: start }
}

/* glossary in-depth cards: every section lines up across the row, so the space is shared evenly instead of pooling above "In prayer" */
@supports (grid-template-rows: subgrid) {
  .glGrid { grid-auto-rows: auto; row-gap: 20px }
  .glCard { display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: stretch }
  .glCard > * { margin: 0 }
  .glCard > * + * { margin-top: 18px }
  .glCard > .glCardTop { grid-row: 1 }
  .glCard > h4 { grid-row: 2; margin-top: 12px }
  .glCard > .glMeaning { grid-row: 3 }
  .glCard > .glParts { grid-row: 4 }
  /* words: note, scripture, then In prayer and Pray it (rows 7 to 10) */
  .glCard:not(.glLaw) { grid-row: span 10 }
  .glCard:not(.glLaw) > .glNote { grid-row: 5 }
  .glCard:not(.glLaw) > .glRefs { grid-row: 6 }
  .glCard:not(.glLaw) > .glPrayer { grid-row: 7 / span 4 }
  /* laws: quote, scripture, the principle, then In prayer and Pray it (rows 8 to 11) */
  .glCard.glLaw { grid-row: span 11 }
  .glCard.glLaw > .glQuote { grid-row: 5 }
  .glCard.glLaw > .glRefs { grid-row: 6 }
  .glCard.glLaw > .glPrinciple { grid-row: 7; align-self: stretch }
  .glCard.glLaw > .glPrayer { grid-row: 8 / span 4 }
  /* the In prayer box: its labels line up across the row, and it fills its rows so the boxes end level */
  .glCard > .glPrayer { display: grid; grid-template-rows: subgrid; row-gap: 6px; align-content: start }
  /* the breakdown fills its row, so the lists end level too */
  .glCard > .glParts { display: flex; flex-direction: column }
  .glCard > .glParts ol { flex: 1; display: grid; grid-auto-rows: 1fr }
}

/* glossary illustrations: a gold line drawing heads each card studied in depth */
.glArt { display: grid; place-items: center; height: 128px; margin: -6px -6px 0; border-radius: var(--r-md); color: var(--gold);
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%), color-mix(in srgb, var(--gold) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line)) }
.glArt svg { width: min(100%, 300px); height: 112px; overflow: visible }
.glArt .soft { opacity: .6 }
.glArt .faint { opacity: .35 }
.glArt .dot { fill: currentColor; stroke: none }
.glArt .seal { fill: var(--gold-soft) }
@supports (grid-template-rows: subgrid) {
  .glCard > .glArt { grid-row: 1; margin-top: -6px }
  .glCard > .glCardTop { grid-row: 2 }
  .glCard > h4 { grid-row: 3 }
  .glCard > .glMeaning { grid-row: 4 }
  .glCard > .glParts { grid-row: 5 }
  .glCard:not(.glLaw) { grid-row: span 11 }
  .glCard:not(.glLaw) > .glNote { grid-row: 6 }
  .glCard:not(.glLaw) > .glRefs { grid-row: 7 }
  .glCard:not(.glLaw) > .glPrayer { grid-row: 8 / span 4 }
  .glCard.glLaw { grid-row: span 12 }
  .glCard.glLaw > .glQuote { grid-row: 6 }
  .glCard.glLaw > .glRefs { grid-row: 7 }
  .glCard.glLaw > .glPrinciple { grid-row: 8 }
  .glCard.glLaw > .glPrayer { grid-row: 9 / span 4 }
}
@media (max-width: 640px) { .glArt { height: 108px } .glArt svg { height: 96px } }

/* glossary: the smaller cards open with a smaller drawing; their parts still line up across the row */
.glArt.sm { height: 88px; margin: -4px -4px 4px }
.glArt.sm svg { height: 76px; width: min(100%, 220px) }
@supports (grid-template-rows: subgrid) {
  .glWord { grid-row: span 8 }
  .glWord > .glArt { grid-row: 1 }
  .glWord > .glCardTop { grid-row: 2 }
  .glWord > .glMeaning { grid-row: 3 }
  .glWord > .glWordRefs { grid-row: 4 }
  .glWord > .glPrayer.sm { grid-row: 5 / span 4 }
}
.pbEmpty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border-radius: var(--r-md); border: 1px dashed var(--line); background: var(--sunk) } .pbEmpty .stHint { margin: 0 }

/* glossary spacing: label sits right above its text everywhere; extra height falls to the bottom, never between label and text */
.glParts li { align-content: start }
@supports (grid-template-rows: subgrid) {
  .glCard > .glPrayer, .glCard.glLaw > .glPrinciple { margin-top: 18px }
  .glCard > .glPrayer, .glWord > .glPrayer.sm { display: flex; flex-direction: column; gap: 6px; justify-content: flex-start }
  .glPrayer > p { margin: 0 }
}

/* builder step 4: two clear ways to find scriptures, A the kind of word, B what God will do */
.pbFindHow { margin: 4px 0 14px; color: var(--ink-2); line-height: 1.6; font-size: .96rem }
.pbFindHow b { color: var(--ink); font-weight: 600 }
.pbFind { display: grid; gap: 18px; padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sunk); margin-bottom: 18px }
.pbFindRow { display: grid; gap: 10px; min-width: 0 }
.pbFindRow + .pbFindRow { padding-top: 18px; border-top: 1px solid var(--line) }
.pbFind .pbOraclesLbl { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px }
.pbFindN { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font: 700 .72rem var(--f-ui); letter-spacing: 0; align-self: center }
.pbFind .pbPickBar { margin: 0; align-items: stretch }
.pbFind .pbTopic { flex: 0 1 300px; min-width: 220px }
.pbFind .pbTopic select { width: 100%; height: 100% }
@media (max-width: 640px) { .pbFind { padding: 16px 14px } .pbFind .pbTopic { flex: 1 1 100% } }

/* pattern parts: choices as tiles, and a labelled preview of what will be prayed (beside them when there is room) */
.pbPart { container: pbpart / inline-size; padding: 18px 20px; gap: 14px }
.pbPartBody { display: grid; gap: 16px; min-width: 0 }
@container pbpart (min-width: 820px) { .pbPartBody:has(.pbChoose) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 20px } }
.pbChoose { display: grid; gap: 10px; min-width: 0 }
.pbMini { font: 700 .7rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.pbMini.gold { color: var(--gold) }
.pbOpts::before { content: none }
.pbOpts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px }
.pbOpt { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 64px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 500 .9rem/1.45 var(--f-ui); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s }
.pbOpt:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: var(--shadow-sm) }
.pbOpt[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--surface)); color: var(--ink); box-shadow: 0 0 0 1px var(--gold) inset }
.pbOptMark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--line); font: 700 .72rem var(--f-ui); color: var(--muted); background: var(--sunk) }
.pbOpt[aria-pressed="true"] .pbOptMark { background: var(--gold); border-color: var(--gold); color: #fff }
.pbPreviewBox { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); min-width: 0 }
.pbPreviewBox .pbPartText { padding: 0; border: 0; background: none; border-radius: 0; font: italic 1.08rem/1.65 var(--f-display); color: var(--ink) }
.pbPreviewBox .pbOwn { width: 100%; min-height: 120px }
.pbPreviewBox .pbPartActs { padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent) }
@media (max-width: 640px) { .pbPart { padding: 16px 14px } .pbOpts { grid-template-columns: minmax(0, 1fr) } .pbOpt { min-height: 0 } }

/* builder preview: the prayer gets generous room inside its container */
.pbPrevBlock .stPrayer { padding: 30px 36px }
.pbPrevBlock .stPrayer .dprayer { margin: 0 }
@media (max-width: 640px) { .pbPrevBlock .stPrayer { padding: 20px 20px } }
.pbPrevBlock .phaseCard { padding: 30px 36px }
@media (max-width: 640px) { .pbPrevBlock .phaseCard { padding: 20px 20px } }
.pbPrevBlock .phaseCards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px }

/* library: when one oracle is shown, it uses the whole width, its scriptures in rows (Layout sets how many across) */
#promList[data-single="1"] { grid-template-columns: minmax(0, 1fr) }
#promList[data-single="1"] .promItems { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; padding: 16px }
#promList[data-single="1"][data-cols="2"] .promItems { grid-template-columns: repeat(2, minmax(0, 1fr)) }
#promList[data-single="1"][data-cols="3"] .promItems { grid-template-columns: repeat(3, minmax(0, 1fr)) }
#promList[data-single="1"][data-cols="4"] .promItems { grid-template-columns: repeat(4, minmax(0, 1fr)) }
#promList[data-single="1"][data-cols="1"] .promItems { grid-template-columns: minmax(0, 1fr) }
#promList[data-single="1"] .promItem { align-items: start; border: 1px solid var(--line); padding: 16px 16px 14px; background: var(--surface) }
#promList[data-single="1"] .promItem + .promItem { border-top: 1px solid var(--line) }
#promList[data-single="1"] .promItem.on { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)) }
#promList[data-single="1"] .promItem:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)) }
@media (max-width: 1100px) { #promList[data-single="1"][data-cols="4"] .promItems { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) } }
@media (max-width: 900px) { #promList[data-single="1"][data-cols="3"] .promItems { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) } }
@media (max-width: 640px) { #promList[data-single="1"] .promItems { grid-template-columns: minmax(0, 1fr) !important; padding: 10px } }

/* library scriptures: room to breathe — reference row, the promise, the quote, then the actions on their own row */
.promItem { padding: 20px 18px; gap: 18px }
.piMain { gap: 12px }
.piTop { gap: 8px 10px }
.piWill { font: 500 1.08rem/1.5 var(--f-ui) }
.piCond { padding: 2px 0 2px 12px; line-height: 1.55 }
.piActs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-top: 4px }
.piActs .piBuild { margin: 0 }
.promItem + .promItem { margin-top: 2px }
@media (max-width: 640px) { .promItem { padding: 16px 12px; gap: 12px } }

/* builder step 4: the scriptures that fit this prayer come first; browsing everything is a choice */
.pbFits { display: grid; gap: 12px; margin-bottom: 16px }
.pbFits.empty { padding: 18px 20px; border-radius: var(--r-md); border: 1px dashed color-mix(in srgb, var(--gold) 40%, var(--line)); background: color-mix(in srgb, var(--gold) 5%, var(--surface)); justify-items: start }
.pbFits.empty p { margin: 0; color: var(--ink-2); line-height: 1.6 }
.pbBrowseBar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--sunk); border: 1px solid var(--line) }
.pbBrowseBar > span { color: var(--muted); font-size: .92rem; margin-right: auto }
.pbBrowseBar.back { padding: 0; background: none; border: 0; margin-bottom: 12px }
@media (max-width: 640px) { .pbBrowseBar > span { flex: 1 1 100% } .pbBrowseBar .btn { flex: 1 1 100%; justify-content: center } }

/* own bullets: the chosen opening stands highlighted inside the box; you type only the rest */
.pbDraftField { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 0 0 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); transition: border-color .15s, box-shadow .15s }
.pbDraftField:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) }
.pbDraftField input#pbDraft { flex: 1; min-width: 0; border: 0; box-shadow: none; background: transparent; padding: 11px 14px 11px 6px; outline: none }
.pbDraftField:not(.has) input#pbDraft { padding-left: 6px }
.pbDraftOpener { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold); font: 700 .9rem var(--f-ui); white-space: nowrap }
.pbDraftOpener button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; border: 0; background: transparent; color: var(--gold); font-size: 1rem; line-height: 1; cursor: pointer }
.pbDraftOpener button:hover { background: color-mix(in srgb, var(--gold) 18%, transparent) }
.pbOpeners .stChip[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--gold) }
@media (max-width: 640px) { .pbDraftOpener { white-space: normal } }

/* editing a built prayer: a clear bar at the top of the builder or Strategy */
.pbEditBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 16px 20px; margin-bottom: 18px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); box-shadow: var(--shadow-sm) }
.pbEditTxt { display: grid; gap: 3px; min-width: 0 }
.pbEditTxt b { font: 600 1.2rem var(--f-display); color: var(--ink) }
.pbEditTxt small { color: var(--muted); font-size: .88rem }
/* the sentence gets the whole line; its scripture and the Add button sit beneath */
.pbDraft { grid-template-columns: minmax(0, 1fr) auto }
.pbDraft .pbDraftField { grid-column: 1 / -1 }
@media (max-width: 640px) { .pbDraft { grid-template-columns: minmax(0, 1fr) } }

/* pattern choices: every tile the same size, three lines at most (the full words show in the preview) */
.pbOpts { grid-auto-rows: 1fr }
.pbOpt { height: 92px; min-height: 0; align-items: center; overflow: hidden }
.pbOptText { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.pbOptMark { align-self: center }
@media (max-width: 640px) { .pbOpt { height: 88px } }

/* prayer actions: an even grid of bordered buttons; Delete stands apart at the bottom right */
.dactions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px; align-items: stretch }
.dactions > .btn { width: 100%; justify-content: center; text-align: center; min-height: 42px; white-space: normal }
.dactions .daSpacer { display: block; grid-column: 1 / -1; height: 0; margin: 4px 0 0; border-top: 1px dashed var(--line) }
.dactions [data-act="del"] { grid-column: 1 / -1; justify-self: end; width: auto; margin: 0; padding: 0 18px; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); background: transparent; color: var(--danger) }
.dactions [data-act="del"]:hover { background: color-mix(in srgb, var(--danger) 8%, transparent) }

/* Strategy: your own tactics and blessings, as chips with an × */
.stOwnChip { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; background: var(--gold-soft); border-color: var(--gold); color: var(--gold) }
.stOwnChip button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; border: 0; background: transparent; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer }
.stOwnChip button:hover { background: color-mix(in srgb, var(--gold) 18%, transparent) }
.stOwnBox input { width: 240px; max-width: 100% }
@media (max-width: 640px) { .stOwnBox { width: 100% } .stOwnBox input { flex: 1 1 100%; width: 100% } }
.stEdIntro { margin: 0 0 14px; line-height: 1.6 }
.stOwnTeam { display: inline-flex; align-items: center; gap: 8px; flex-basis: 100%; font-size: .88rem; color: var(--ink-2); cursor: pointer }
.stOwnTeam input { width: 18px; height: 18px; accent-color: var(--gold) }

/* Mono: your card alone, as wide as the 1-column view and in the same place */
.watches[data-cols="me"] { grid-template-columns: minmax(0, 1fr); justify-content: stretch; margin-top: 0 }

/* weapons closet: tap an icon instead of hunting for an emoji */
.stIconField .label i { font: italic 500 .82rem var(--f-display); letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 6px }
.stIcons { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); max-height: 220px; overflow-y: auto }
.stIcon { display: grid; place-items: center; height: 44px; border-radius: 10px; border: 1px solid transparent; background: transparent; font-size: 1.35rem; line-height: 1; cursor: pointer; transition: background .12s, border-color .12s, transform .12s }
.stIcon:hover { background: var(--sunk); transform: scale(1.08) }
.stIcon[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold) }

/* builder step 4: any scripture by reference or Find, in your version */
.pbAnyRef { display: grid; gap: 10px; padding: 16px 18px; margin-bottom: 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sunk) }
.pbAnyRef .pbMini i { font: italic 500 .84rem var(--f-display); letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 6px }
.pbAnyRef .refRow input { padding: 10px 14px }
.pbRefChips { display: flex; flex-wrap: wrap; gap: 8px }
@media (max-width: 640px) { .pbAnyRef .refRow { flex-wrap: wrap } .pbAnyRef .refRow input { flex: 1 1 100% } .pbAnyRef .refRow .btn, .pbAnyRef .refRow select { flex: 1 1 auto } }
/* strongholds can carry an icon on their chips */
.stHoldIco { margin-right: 6px; font-size: 1rem; line-height: 1 }

/* ---------- the Bible: a calm page to read, then pray ---------- */
.bibView { display: grid; gap: 18px; padding-bottom: 96px }
.bibBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); position: sticky; top: 8px; z-index: 5 }
.bibNav, .bibTools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.bibWhere { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--sunk); color: var(--ink); font: 600 1rem var(--f-display); cursor: pointer }
.bibWhere.ch { font: 600 .9rem var(--f-ui) }
.bibWhere[aria-expanded="true"], .bibWhere:hover { border-color: var(--gold); background: var(--gold-soft) }
.bibTools .verSel { height: 36px }
.bibLogos { text-decoration: none }
.bibPanel { padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm) }
.bibPanel .pkBook.on, .bibPanel .pkCh.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold) }
.bibResults { max-height: 420px; overflow-y: auto }
.bibPage { padding: 40px 48px 32px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow) }
.bibHead { text-align: center; margin-bottom: 26px }
.bibHead .label { color: var(--gold) }
.bibHead h2 { margin: 6px 0 0; font: 600 2.2rem/1.15 var(--f-display); letter-spacing: -.01em }
.bibText { max-width: 68ch; margin: 0 auto; font: 400 1.2rem/1.95 var(--f-display); color: var(--ink) }
.bibV { cursor: pointer; border-radius: 4px; padding: 1px 0; transition: background .15s, box-shadow .15s }
.bibV:hover { background: color-mix(in srgb, var(--gold) 8%, transparent) }
.bibV.on { background: color-mix(in srgb, var(--gold) 22%, transparent); box-shadow: 0 2px 0 var(--gold) }
.bibV.flash { animation: bibFlash 2.4s ease-out 1 }
@keyframes bibFlash { 0%, 40% { background: color-mix(in srgb, var(--gold) 30%, transparent) } 100% { background: transparent } }
.bibV sup { font: 700 .62rem var(--f-ui); color: var(--gold); margin: 0 4px 0 2px; vertical-align: .6em }
.bibFoot { display: flex; justify-content: space-between; gap: 12px; max-width: 68ch; margin: 30px auto 0; padding-top: 18px; border-top: 1px solid var(--line) }
.bibPage .pkNotice { max-width: 68ch; margin: 16px auto 0 }
.bibSelBar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; width: min(920px, calc(100% - 32px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px 12px 20px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--surface); box-shadow: 0 12px 40px rgba(0,0,0,.18) }
.bibSelRef { display: grid; gap: 2px; min-width: 0 }
.bibSelRef b { font: 600 1.05rem var(--f-display) }
.bibSelRef small { color: var(--muted); font-size: .8rem }
.bibSelActs { display: flex; flex-wrap: wrap; gap: 8px }
.bibSelActs a { text-decoration: none }
@media (max-width: 640px) {
  .bibBar { position: static; padding: 10px }
  .bibNav, .bibTools { width: 100%; justify-content: space-between }
  .bibPage { padding: 26px 18px 22px }
  .bibHead h2 { font-size: 1.8rem }
  .bibText { font-size: 1.12rem; line-height: 1.85 }
  .bibSelBar { bottom: 10px; padding: 12px }
  .bibSelActs { width: 100% } .bibSelActs .btn { flex: 1 1 auto; justify-content: center }
}

/* Bible: highlight what God spoke */
.bibHow { margin: 8px 0 0; color: var(--muted); font-size: .9rem }
.bibText ::selection { background: color-mix(in srgb, var(--gold) 38%, transparent) }
.bibHi { position: fixed; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line)); background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.18); white-space: nowrap }
.bibHi[hidden] { display: none }
.bibHiRef { font: 600 .9rem var(--f-display); color: var(--gold) }

/* Bible bar on a phone: two tidy rows — where you are, then the tools */
@media (max-width: 640px) {
  .bibBar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px }
  .bibNav { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) 40px; gap: 8px; width: 100%; align-items: center }
  .bibNav .pg { width: 40px; height: 40px }
  .bibWhere { width: 100%; height: 42px; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .bibTools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; padding-top: 10px; border-top: 1px solid var(--line) }
  .bibTools > * { width: 100%; min-width: 0; height: 40px; justify-content: center; text-align: center; padding: 0 8px; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .bibTools .verSel { height: 40px }
  .bibLogos { display: inline-flex; align-items: center }
}
.bibShort { display: none }
@media (max-width: 640px) {
  .bibFull { display: none } .bibShort { display: inline }
  .bibNav { grid-template-columns: 40px minmax(0, 1fr) 84px 40px }
}
@media (max-width: 640px) {
  .bibNav { grid-template-columns: 38px minmax(0, 1fr) 66px 38px; gap: 6px }
  .bibNav .pg { width: 38px; height: 38px }
  .bibWhere { font-size: .95rem; padding: 0 8px }
  .bibWhere.ch { font-size: .86rem }
}

/* the Bible in the side panel, beside the Prayer Builder */
.bibView.inPanel { gap: 14px; padding-bottom: 12px }
.bibView.inPanel .bibBar { position: sticky; top: 0; box-shadow: none }
.bibView.inPanel .bibPage { padding: 26px 24px 22px; box-shadow: none }
.bibView.inPanel .bibHead h2 { font-size: 1.8rem }
.bibView.inPanel .bibText { font-size: 1.1rem; line-height: 1.85 }
.bibView.inPanel .bibSelBar { position: sticky; left: auto; bottom: 10px; transform: none; width: 100% }
.pbReadBible { justify-self: start }
/* the prayer you're gathering, beside the Bible */
.bibGather { display: grid; gap: 14px; padding-top: 6px }
.bibFor { margin: 0; display: grid; gap: 4px; font: 600 1.15rem var(--f-display) }
.bibGathered { display: flex; flex-wrap: wrap; gap: 8px }
.bibGatherActs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line) }
/* the Bible button rests at the bottom right of its box */
.pbAnyFoot { display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--line) }
.pbAnyFoot .pbReadBible { justify-self: auto }
.stBibleBox { display: grid; gap: 10px; margin-top: 16px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sunk) }
@media (max-width: 640px) { .pbAnyFoot .btn { width: 100%; justify-content: center } }

/* the Bible page, split: reading on the left, your selection and prayer on the right */
.bibSplit { display: grid; gap: 18px; min-width: 0 }
.bibMain { display: grid; gap: 18px; min-width: 0; align-content: start }
.bibCard { display: grid; gap: 12px; padding: 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm) }
.bibCard .label { color: var(--gold) }
.bibCard .bibFor { margin: 0; font: 600 1.1rem var(--f-display) }
.bibGoBtn { justify-self: stretch; justify-content: center }
@media (min-width: 1024px) {
  .bibSplit { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start }
  .bibAside { position: sticky; top: 12px; display: grid; gap: 14px; align-content: start }
  .bibAside .bibSelBar { position: static; transform: none; width: auto; display: grid; gap: 12px; padding: 18px; border-radius: var(--r); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)) }
  .bibAside .bibSelBar .label { color: var(--gold) }
  .bibAside .bibSelRef small { line-height: 1.5 }
  .bibAside .bibSelActs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
  .bibAside .bibSelActs > :first-child { grid-column: 1 / -1 }
  .bibAside .bibSelActs .btn { justify-content: center; width: 100% }
  .bibView:not(.inPanel) .bibBar { position: static }
  .bibView:not(.inPanel) .bibPage { padding: 40px 40px 30px }
}
@media (max-width: 1023px) { #bibGatherCard { display: none } }

/* the Bible page in three columns: books · scripture · your selection and prayer */
.bibNavCol { display: none }
.bibNavCard { display: grid; gap: 10px; padding: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .3s, border-color .3s }
.bibNavCard.flash { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent) }
.bibNavCard .label { color: var(--gold) }
.bibBookList { display: grid; gap: 2px; max-height: 46vh; overflow-y: auto; margin: 0 -6px; padding: 0 6px; overscroll-behavior: contain }
.bibTest { margin: 8px 0 4px; font: 700 .68rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.bibTest:first-child { margin-top: 0 }
.bibBookBtn { text-align: left; padding: 7px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-2); font: 500 .92rem var(--f-ui); cursor: pointer }
.bibBookBtn:hover { background: var(--sunk); color: var(--ink) }
.bibBookBtn.on { background: var(--gold-soft); color: var(--gold); font-weight: 700 }
.bibChGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; max-height: 30vh; overflow-y: auto }
.bibChBtn { height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font: 600 .84rem var(--f-ui); color: var(--ink-2); cursor: pointer }
.bibChBtn:hover { border-color: var(--gold) }
.bibChBtn.on { background: var(--gold); border-color: var(--gold); color: #fff }
@media (min-width: 1024px) {
  .bibSplit { grid-template-columns: minmax(200px, 230px) minmax(0, 1fr); grid-template-areas: "nav main" "aside main"; align-items: start }
  .bibNavCol { display: grid; gap: 14px; grid-area: nav; position: sticky; top: 12px }
  .bibMain { grid-area: main }
  .bibAside { grid-area: aside; position: static }
}
@media (min-width: 1280px) {
  .bibSplit { grid-template-columns: minmax(200px, 230px) minmax(0, 1fr) minmax(260px, 320px); grid-template-areas: "nav main aside" }
  .bibAside { position: sticky; top: 12px }
}
/* Bible page: books on the left, scripture in the middle; the selection floats at the bottom */
@media (min-width: 1024px) {
  .bibSplit, .bibSplit:not(.x) { grid-template-columns: minmax(200px, 230px) minmax(0, 1fr); grid-template-areas: "nav main" }
  .bibView:not(.inPanel) > .bibSelBar { left: calc(50% + 125px); width: min(860px, calc(100% - 330px)) }
}

/* Find a scripture: the chapter reads as flowing text, the chosen verses highlighted in it */
.pkFlow { padding: 6px 4px 4px; font: 400 1.1rem/1.9 var(--f-display); color: var(--ink) }
.pkFlowV { cursor: pointer; border-radius: 4px; padding: 1px 0; transition: background .15s, box-shadow .15s }
.pkFlowV:hover { background: color-mix(in srgb, var(--gold) 8%, transparent) }
.pkFlowV.on { background: color-mix(in srgb, var(--gold) 22%, transparent); box-shadow: 0 2px 0 var(--gold) }
.pkFlowV sup { font: 700 .6rem var(--f-ui); color: var(--gold); margin: 0 4px 0 2px; vertical-align: .6em }
@media (max-width: 640px) { .pkFlow { font-size: 1.04rem; line-height: 1.8 } }

/* the book list resizes from the handle beside it */
.bibGrip { display: none }
@media (min-width: 1024px) {
  .bibSplit, .bibSplit:not(.x) { grid-template-columns: var(--bibNavW, 230px) 14px minmax(0, 1fr); grid-template-areas: "nav grip main"; column-gap: 4px }
  .bibGrip { display: block; grid-area: grip; align-self: stretch; position: relative; cursor: col-resize; touch-action: none; border-radius: 999px }
  .bibGrip::after { content: ""; position: sticky; top: 45vh; display: block; margin: 40px auto 0; width: 5px; height: 56px; border-radius: 999px; background: var(--line); transition: background .15s, height .15s }
  .bibGrip:hover::after, .bibGrip:focus-visible::after, .bibResizing .bibGrip::after { background: var(--gold); height: 72px }
  .bibResizing, .bibResizing * { cursor: col-resize !important; user-select: none !important }
  .bibView:not(.inPanel) > .bibSelBar { left: calc(50% + (var(--bibNavW, 230px) + 18px) / 2) }
}
/* Old and New Testament stand out above their books */
.bibTest { margin: 14px 0 6px; padding: 0 10px 6px; font: 700 .86rem var(--f-ui); letter-spacing: .12em; color: var(--gold); border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent) }
.bibTest:first-child { margin-top: 2px }
.bibTest { font-size: 1rem; letter-spacing: .1em; padding-bottom: 7px }

/* the Bible's book-and-chapter bar stays at the top while you read, level with the book list beside it */
@media (min-width: 1024px) {
  .bibView:not(.inPanel) .bibBar { position: sticky; top: 12px; z-index: 6; box-shadow: var(--shadow-sm) }
}
@media (min-width: 1024px) {
  /* stuck 12px below the top, resting on a strip of the page background (clean behind its rounded corners too) */
  .bibBarWrap { position: sticky; top: 0; z-index: 6; padding-top: 12px; margin-top: -12px; background: var(--bg) }
  .bibView:not(.inPanel) .bibBar { position: static; box-shadow: var(--shadow-sm) }
  .bibNavCol { top: 12px }
}

/* hovering a prayer on a card lightens the whole prayer area, its Comment row included (one shade, not two) */
.slide .pt:hover { background: transparent }
.slide:hover { background: color-mix(in srgb, var(--surface) 55%, transparent) }

/* the history keeps to a set height and scrolls inside itself; it can be cleared */
.mwHist ul { max-height: 248px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin }
.mwHistFoot { display: flex; justify-content: flex-end; padding-top: 10px }
.mwHistClear { color: var(--muted); font-size: .84rem }
.mwHistClear:hover { color: var(--danger) }
/* the layout highlight moves with a soft fade */
.colsSeg button { transition: background-color .18s ease, color .18s ease }

/* your own count on a prayer: how long it has been on your card, and on how many days you prayed it */
.slideFoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px }
.cardTally { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 600 .8rem var(--f-ui); color: var(--muted) }
.cardTally .ctTxt { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--w, var(--accent)) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--w, var(--accent)) 22%, var(--line)); color: var(--ink-2) }
.ctReset { font-size: .78rem; color: var(--muted) }
.ctReset:hover { color: var(--danger) }
.prayedTally { margin-top: 10px }

/* your count sits at the top of the prayer, just left of I prayed (only on your own card) */
.slideTop:has(.cardTally) { height: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 10px; padding: 10px 14px 0 }
.slideTop:has(.cardTally) .slideAmen { position: static }
.slide:has(.slideTop .cardTally) .pt > .subj { padding-right: 0; padding-top: 0 }
.cardTally.short { gap: 4px; font-size: .78rem }
.cardTally.short .ctTxt { padding: 5px 10px; white-space: nowrap }
.cardTally.short .ctReset { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 999px; font-size: .95rem; text-decoration: none }
.cardTally.short .ctReset:hover { background: color-mix(in srgb, var(--danger) 10%, transparent) }
.btn.saving { opacity: .75; cursor: progress }

/* the Bible tab: a closed book in gold, set evenly before the word */
.tabs .tabBible { display: inline-flex; align-items: center; gap: 7px }
.tabs .tabBible .tabIco { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-.5px) }
.tabs .tabBible[aria-selected="true"] .tabIco { stroke: currentColor }

/* Bible search results: one full-width line of text per verse (no tick column here) */
.bibResults .pkVerse { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; cursor: pointer }
.bibResults .pkTxt { display: block; font: 400 1.02rem/1.6 var(--f-display); color: var(--ink) }
.bibResults .pkRef { display: inline-block; margin-right: 8px; font: 700 .8rem var(--f-ui); color: var(--gold) }
.bibResults .pkVerse:hover { background: color-mix(in srgb, var(--gold) 7%, var(--surface)); border-color: color-mix(in srgb, var(--gold) 30%, var(--line)) }

/* ---------- word study ---------- */
.bibStudyBtn[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--gold) }
.bibText .ws { cursor: pointer; border-bottom: 1px dotted color-mix(in srgb, var(--gold) 70%, transparent); transition: background .15s }
.bibText .ws:hover, .bibText .ws:focus-visible { background: color-mix(in srgb, var(--gold) 16%, transparent); border-bottom-style: solid; outline: none; border-radius: 3px }
.wsCard { position: fixed; z-index: 70; width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 620px); display: flex; flex-direction: column; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); background: var(--surface); box-shadow: 0 18px 50px rgba(0,0,0,.22); overflow: hidden }
.wsCard[hidden] { display: none }
.wsCard.sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; max-height: 80vh; border-radius: 20px 20px 0 0 }
.wsTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 0 }
.wsTop .label { color: var(--gold) }
.wsClose { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer }
.wsClose:hover { color: var(--ink) }
.wsTabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 0 }
.wsHead { display: grid; gap: 4px; padding: 12px 18px 4px }
.wsWord { font: 600 2.2rem/1.2 "SBL Hebrew", "Ezra SIL", "Times New Roman", var(--f-display); color: var(--ink) }
.wsWord[dir="ltr"] { font-family: "SBL Greek", "Gentium Plus", var(--f-display) }
.wsSay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--ink-2) }
.wsSay b { font: italic 600 1.1rem var(--f-display) }
.wsSay i { color: var(--muted); font-size: .9rem }
.wsFacts { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 18px 12px; border-bottom: 1px solid var(--line) }
.wsFacts span { display: grid; gap: 1px; padding: 6px 12px; border-radius: 12px; background: var(--sunk); font-weight: 600; font-size: .9rem }
.wsFacts small { font: 700 .62rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.wsBody { overflow-y: auto; overscroll-behavior: contain; padding: 12px 18px 16px; display: grid; gap: 14px }
.wsBody section { display: grid; gap: 6px }
.wsBody .label { color: var(--gold) }
.wsDef { font-size: .94rem; line-height: 1.6; color: var(--ink-2) }
.wsDef ol, .wsDef ul { margin: 0; padding-left: 20px }
.wsDef p { margin: 0 0 4px }
.wsLink { display: inline-block; margin: 0 2px; padding: 0 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--gold-soft); color: var(--gold); font: 700 .78rem var(--f-ui); cursor: pointer }
.wsFoot { padding: 12px 18px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end }
.wsFound { display: grid; gap: 10px; margin-bottom: 14px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); background: color-mix(in srgb, var(--gold) 6%, var(--surface)) }
.wsFound .label { color: var(--gold) }
.wsFoundRow { display: flex; flex-wrap: wrap; gap: 10px }
.wsChip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left }
.wsChip:hover { border-color: var(--gold) }
.wsChipWord { font: 600 1.35rem "SBL Hebrew", "Times New Roman", var(--f-display) }
.wsChipTxt { display: grid; gap: 1px }
.wsChipTxt b { font: italic 600 .98rem var(--f-display) }
.wsChipTxt small { color: var(--muted); font-size: .76rem }
.wsHead .wsWord { justify-self: start; display: inline-block }

/* studied-in-full laws: The principle fits its text, and In prayer keeps the same gap as every other section */
@supports (grid-template-rows: subgrid) {
  .glCard.glLaw > .glPrinciple { align-self: start }
  .glCard.glLaw > .glPrinciple + .glPrayer, .glCard.glLaw > .glPrayer { margin-top: 18px }
}

/* the glossary feeds the prayers */
.glCardTop .glAddPray { flex: none; margin-left: auto; padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--gold-soft); color: var(--gold); font: 700 .76rem var(--f-ui); cursor: pointer; white-space: nowrap }
.glCardTop .glAddPray:hover { background: color-mix(in srgb, var(--gold) 22%, var(--surface)) }
.glCardTop .glAddPray.on { background: var(--surface); color: var(--ink-2) }
.glCardTop .glAddPray + .glEdit { margin-left: 6px }
.glFlash { animation: glFlash 2.2s ease-out 1 }
@keyframes glFlash { 0%, 35% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 45%, transparent) } 100% { box-shadow: var(--shadow-sm) } }
.pbGlLink { display: inline-block; margin: 2px 0 8px; font-size: .86rem; color: var(--gold) }
.pbSugGl { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)) }
.stGlossBox { display: grid; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); background: color-mix(in srgb, var(--gold) 6%, var(--surface)) }
.stGlossBox .label { color: var(--gold) }
.stGlossBox .stChip.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold) }

/* the glossary and God's Oracles point to each other */
.glOracleLink, .promGlLink { display: block; width: fit-content; margin-top: 8px; padding: 3px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); background: var(--gold-soft); color: var(--gold); font: 700 .76rem var(--f-ui); cursor: pointer; text-align: left }
.glOracleLink:hover, .promGlLink:hover { background: color-mix(in srgb, var(--gold) 22%, var(--surface)) }

/* Add to prayer: where it goes, and whether it fits */
.glpLine { display: grid; gap: 6px; padding: 14px 16px; margin: 6px 0 16px; border-radius: var(--r-md); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)) }
.glpLine .label { color: var(--gold) }
.glpLine small { color: var(--muted) }
.glpChoices { display: grid; gap: 12px }
.glpChoice { display: grid; gap: 6px; text-align: left; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink) }
.glpChoice:hover, .glpPick:hover { border-color: var(--gold); box-shadow: var(--shadow-sm) }
.glpChoice b { font: 600 1.05rem var(--f-display) }
.glpChoice > span:not(.glFit) { color: var(--ink-2); font-size: .92rem; line-height: 1.5 }
.glpMine { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sunk) }
.glpMine > b { font: 600 1.05rem var(--f-display) }
.glpPick { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; text-align: left; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); font-weight: 600 }
.glFit { width: fit-content; padding: 2px 10px; border-radius: 999px; font: 700 .74rem var(--f-ui) }
.glFit.yes { background: color-mix(in srgb, var(--ok, #2e7d32) 12%, var(--surface)); color: var(--ok, #2e7d32) }
.glFit.no { background: var(--sunk); color: var(--muted) }
.pbFromGl { border-color: color-mix(in srgb, var(--gold) 50%, var(--line)) }

/* Add to prayer, laid out like the Prayer Builder and Strategy */
.glpWhat { display: grid; gap: 10px; padding: 20px 22px; margin: 4px 0 18px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 12%, var(--surface)), color-mix(in srgb, var(--gold) 5%, var(--surface)) 70%) }
.glpWhat .label { color: var(--gold) }
.glpPray { margin: 0; font: italic 1.15rem/1.6 var(--f-display); color: var(--ink) }
.glpRefs { display: flex; flex-wrap: wrap; gap: 6px }
.glpStep { margin-bottom: 16px }
.glpStep > header { margin-bottom: 14px }
.glpChoices { display: grid; gap: 12px }
.glpChoice { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s }
.glpChoice:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); transform: translateY(-1px) }
.glpIco { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--gold-soft); color: var(--gold); font-size: 1.2rem; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent) }
.glpTxt { display: grid; gap: 4px; min-width: 0 }
.glpTxt b { font: 600 1.1rem var(--f-display) }
.glpTxt > span:not(.glFit) { color: var(--ink-2); font-size: .94rem; line-height: 1.5 }
.glpTxt small { color: var(--muted); font-size: .82rem }
.glpTxt small.glpWarn { color: var(--danger) }
.glpTxt .glFit { margin-top: 2px }
.glpGo { color: var(--muted); font-size: 1.4rem; line-height: 1 }
.glpChoice:hover .glpGo, .glpPick:hover .glpGo { color: var(--gold) }
.glpGroup { display: grid; gap: 8px }
.glpGroup + .glpGroup { margin-top: 16px }
.glpGroup .label { color: var(--gold) }
.glpPick { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; width: 100%; text-align: left; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .15s, box-shadow .15s }
.glpPick:hover { border-color: var(--gold); box-shadow: var(--shadow-sm) }
.glpPickTxt { display: grid; gap: 2px; min-width: 0 }
.glpPickTxt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.glpPickTxt small { color: var(--muted); font-size: .8rem }
.glpMore { justify-self: start; margin-top: 4px }
@media (max-width: 640px) { .glpChoice { grid-template-columns: 40px minmax(0, 1fr); padding: 14px } .glpChoice .glpGo { display: none } .glpPick { grid-template-columns: minmax(0, 1fr) auto } .glpPick .glFit { grid-column: 1 / -1; grid-row: 2 } }

/* Add to prayer keeps its proportions in a wide panel: one calm, centred column */
#sheet:has(.glpWhat) > * { width: 100%; max-width: 680px; margin-left: auto; margin-right: auto }
/* the saved-prayer rows: the roomier size of the narrow panel, at any width */
.glpPick { min-height: 76px; padding: 16px 18px; border-radius: var(--r-md); gap: 10px 14px }
.glpPickTxt { gap: 4px }
.glpPickTxt b { font: 600 1.08rem var(--f-display); white-space: normal }
.glpPickTxt small { font-size: .84rem }
.glpGroup { gap: 10px }
/* the saved prayers: the same full cards as "Where should it go?" */
.glpGroup { gap: 12px }
.glpGroup + .glpGroup { margin-top: 20px }
.glpMono { font: 600 1.15rem var(--f-display) }
.glpSaved .glpTxt .glFit { justify-self: start }
/* a bullet from the Glossary: where it came from, and a gold pulse when it lands */
.pcGl { display: block; margin-top: 4px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--gold) }
.glPulse { animation: glPulse 1.3s ease-in-out 3; border-radius: 12px }
@keyframes glPulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; background-color: transparent } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 45%, transparent); background-color: color-mix(in srgb, var(--gold) 12%, transparent) } }
@media (prefers-reduced-motion: reduce) { .glPulse { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent) } }
/* touch screens (iPad, phone): no lift on the Add-to-prayer cards; a moving layer inside the scrolling panel leaves Safari painting gray gaps */
@media (hover: none) {
  .glpChoice, .glpChoice:hover, .glpPick, .glpPick:hover { transform: none !important; transition: none; box-shadow: none }
  .glpChoice:active, .glpPick:active { border-color: var(--gold) }
}
/* an announcement's recommended prayers: on the card, and the picker in the post form */
.pinPrayers { display: grid; gap: 8px; margin-top: 4px }
.pinPrayers > .label { color: var(--gold) }
.pinPrayer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--ink); padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); cursor: pointer }
.pinPrayer .ppTxt { display: grid; gap: 2px; min-width: 0 }
.pinPrayer b { font: 600 1.04rem var(--f-display) }
.pinPrayer small { color: var(--muted); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.pinPrayer .ppGo { color: var(--muted); font-size: 1.3rem }
.pinPrayer:active, .pinPrayer:focus-visible { border-color: var(--gold) }
@media (hover: hover) { .pinPrayer:hover { border-color: var(--gold) } .pinPrayer:hover .ppGo { color: var(--gold) } }
#ppkQ { width: 100%; margin: 4px 0 2px }
.ppkChosen { display: flex; flex-wrap: wrap; gap: 8px }
.ppkPill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: var(--gold-soft) }
.ppkPill b { font-weight: 600; font-size: .92rem }
.ppkPill button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem }
.ppkList { display: grid; gap: 6px }
.ppkRow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--ink); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer }
.ppkTxt { display: grid; gap: 2px; min-width: 0 }
.ppkTxt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ppkTxt small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ppkAdd { color: var(--gold); font-weight: 600; font-size: .86rem; white-space: nowrap }
@media (hover: hover) { .ppkRow:hover { border-color: var(--gold) } }
.ppkNone { margin: 0; color: var(--muted); font-size: .88rem }
/* the "Have you prayed today?" prompt fades out after its 3 minutes */
.prayed-home.empty { transition: opacity .5s ease, transform .5s ease }
.prayed-home.empty.ptGoing { opacity: 0; transform: translateY(-6px) }
/* the quiet countdown in the corner of "Have you prayed today?" */
.ptTimer { font: 500 .78rem var(--f-mono, ui-monospace, monospace); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; opacity: .8 }
.ppkGroup { display: grid; gap: 6px }
.ppkGroup + .ppkGroup { margin-top: 12px }
.ppkGroup > .label { color: var(--gold) }
.ppkPill small { color: var(--muted); font-size: .74rem }
.ppkNote { margin: 8px 0 0; color: var(--ink-2); font-size: .84rem; line-height: 1.5; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent) }
/* WATCHMEN folds like History: a gold header bar with a count, and a faded peek of the prayers until it's opened */
.whole > header.wholeHead { cursor: pointer; align-items: center; user-select: none }
.wholeMeta { display: inline-flex; align-items: center; gap: 12px; flex: none }
.wCount { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--muted); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); background: color-mix(in srgb, var(--surface) 70%, transparent) }
.wChev { color: var(--gold); font-size: 1.35rem; line-height: 1; transition: transform .2s ease }
.whole.isOpen .wChev { transform: rotate(90deg) }
.wholeHead:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px }
.wholeBody { position: relative }
.whole.isFolded .wholeBody { max-height: 128px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 25%, transparent 92%); mask-image: linear-gradient(#000 25%, transparent 92%) }
.whole.isFolded .wlist { pointer-events: none }
.wholePeek { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; background: transparent; cursor: pointer }
@media (hover: hover) { .whole.isFolded:hover .wChev { transform: translateX(3px) } }
/* the WATCHMEN prayers slide sideways in one row, like the prayer tabs: swipe, or the arrows */
.whole .wlist.wslide { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; gap: 12px; padding: 16px; scroll-padding-inline: 16px }
.whole .wlist.wslide::-webkit-scrollbar { display: none }
.whole .wlist.wslide > .ptrow { flex: 0 0 min(340px, 84%); scroll-snap-align: start; min-width: 0 }
.wArrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0 0 2px; font-size: 1.35rem; line-height: 1; cursor: pointer; color: var(--gold); background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); box-shadow: var(--shadow-sm) }
.wArrow.l { left: 6px }
.wArrow.r { right: 6px }
.wArrow[hidden] { display: none }
@media (hover: none) { .wArrow { width: 30px; height: 30px } }
/* WATCHMEN, slim: one even row; the prayer point keeps to three lines so every card is the same short height */
.whole.wSlim > header.wholeHead { cursor: pointer }
.whole.wSlim .wlist.wslide > .ptrow { display: flex }
.whole.wSlim .wlist.wslide > .ptrow > .pt { flex: 1; align-content: start }
.whole.wSlim .pt > .txt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
/* the prayer itself sits on a soft gold, so it reads as the heart of the card (the prayer point above stays white) */
@container watch (min-width: 420px) {
  .smPrayer { background: radial-gradient(420px 160px at 0% 0%, color-mix(in srgb, var(--gold-2, var(--gold)) 16%, transparent), transparent 70%), linear-gradient(135deg, var(--gold-soft), var(--surface) 78%); border-color: color-mix(in srgb, var(--gold) 32%, var(--line)); color: var(--ink) }
}
/* phones: a watch card is as tall as its prayer, with nothing scrolling inside it, so a swipe over a card always scrolls the page (no catching, no skip) */
@media (hover: none) and (max-width: 700px) {
  .watch div.assigned, .watch .assigned { height: auto !important; max-height: none !important }
  .watch .slides { height: auto !important; align-items: stretch }
  .watch .slide { overflow: hidden !important }
}
/* three tabs on a card (Watch, Requests, Personal): on a narrow card they share one full-width row */
.cardTabs { max-width: 100%; overflow-x: auto; scrollbar-width: none }
.cardTabs::-webkit-scrollbar { display: none }
.cardTabs button[data-cardtab="requests"][aria-selected="true"] { color: var(--accent) }
@container watch (max-width: 460px) { .cardTabs { margin-left: 0; width: 100% } .cardTabs button { flex: 1; padding-inline: 8px } }
/* Slide layout: the watches in one row, one in front and the next ones peeking in; swipe or use the arrows */
.watches[data-cols="slide"], .watches[data-cols="slide"][data-cols] { display: flex; grid-template-columns: none; gap: 20px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 6px calc((100% - min(640px, 86%)) / 2) 14px; scroll-padding-inline: 0 }
.watches[data-cols="slide"]::-webkit-scrollbar { display: none }
.watches[data-cols="slide"] > article.watch { flex: 0 0 min(640px, 86%); scroll-snap-align: center; scroll-snap-stop: always; transition: opacity .25s ease, transform .25s ease }
.wSlideNav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 12px }
.wSlideNav[hidden] { display: none }
.wsPos { font: 600 .92rem var(--f-ui, inherit); color: var(--ink-2); min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.wsArrow { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding: 0 0 2px; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--gold); background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); box-shadow: var(--shadow-sm); flex: none }
.wsArrow:disabled { opacity: .35; cursor: default }
@media (hover: hover) { .wsArrow:not(:disabled):hover { border-color: var(--gold) } }
@media (max-width: 560px) { .watches[data-cols="slide"] { gap: 12px; padding-inline: 5% } .watches[data-cols="slide"] > article.watch { flex-basis: 90% } }
.watches[data-cols="slide"] { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%) }
@media (max-width: 560px) { .watches[data-cols="slide"] { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%) } }
@media (max-width: 560px) { .watches[data-cols="slide"] { gap: 14px; padding-inline: 8px; -webkit-mask-image: none; mask-image: none } .watches[data-cols="slide"] > article.watch { flex-basis: 100% } }
/* Slide: the card in front uses the room (wide enough for the roomier card layout), with a small peek of the next ones */
@media (min-width: 561px) { .watches[data-cols="slide"][data-cols] { padding-inline: calc((100% - min(820px, 86%)) / 2); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%) } .watches[data-cols="slide"][data-cols] > article.watch { flex-basis: 100% } }
/* breathing room inside the boxes on a card: the prayer most of all */
@container watch (min-width: 420px) {
  .smPrayer { padding: 16px 22px; line-height: 1.65 }
  div.assigned .slide .pt > .txt { padding: 12px 18px }
}
/* Slide: the faded edges are the way through. Each edge is a tap target over the peeking watch, with its arrow
   kept in the middle of the screen as you read down a tall card. The label above stays; on phones (no peek) the top arrows do the work. */
.wSlideWrap { position: relative }
.wsEdge { display: none }
.wSlideWrap.on .wsEdge:not([hidden]) { display: block; position: absolute; top: 6px; bottom: 14px; z-index: 4; width: calc((100% - min(820px, 86%)) / 2); padding: 0; border: 0; background: transparent; cursor: pointer }
.wsEdge.l { left: 0 }
.wsEdge.r { right: 0 }
.wsEdge > span { position: sticky; top: calc(50vh - 24px); display: grid; place-items: center; width: 48px; height: 48px; margin: 40px auto; border-radius: 50%; padding: 0 0 3px; font-size: 1.7rem; line-height: 1; color: var(--gold);
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: var(--shadow); backdrop-filter: blur(6px); transition: transform .15s ease, border-color .15s ease }
@media (hover: hover) { .wsEdge:hover > span { border-color: var(--gold); transform: scale(1.06) } .wsEdge:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent) } .wsEdge.r:hover { background: linear-gradient(270deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent) } }
.wsEdge:focus-visible > span { outline: 2px solid var(--gold); outline-offset: 2px }
/* wide screens: one set of arrows (on the edges); the label above just says where you are */
@media (min-width: 561px) { .wSlideNav .wsArrow { display: none } }
@media (max-width: 560px) { .wSlideWrap.on .wsEdge { display: none !important } }
/* the arrows sit out in the faded strip at each side (not in the middle of the peek), and the strip is wide enough to hold them */
@media (min-width: 561px) {
  .watches[data-cols="slide"][data-cols] { -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 36px, #000 92px, #000 calc(100% - 92px), rgba(0,0,0,.35) calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 36px, #000 92px, #000 calc(100% - 92px), rgba(0,0,0,.35) calc(100% - 36px), transparent 100%) }
  .wsEdge.l > span { margin-left: 14px; margin-right: auto }
  .wsEdge.r > span { margin-left: auto; margin-right: 14px }
}
/* the arrows sit out on the blank page margin beside the row (as far as the screen has room: --wsOut, measured) */
@media (min-width: 561px) { .wsEdge.l > span { margin-left: calc(-1 * var(--wsOut, 0px)) } .wsEdge.r > span { margin-right: calc(-1 * var(--wsOut, 0px)) } }
/* Mono on a laptop or iPad: your card the same size as in Slide (820 wide, centred), so it sits on the screen the same way */
@media (min-width: 701px) { .watches[data-cols="me"] { grid-template-columns: minmax(0, min(820px, 86%)); justify-content: center } }

/* Mono: a bit wider, but the same height (the prayer area stays the fixed 440 of the 820 card; a long prayer scrolls inside it) */
@media (min-width: 701px) {
  .watches[data-cols="me"] { grid-template-columns: minmax(0, min(1000px, 90%)) }
  .watches[data-cols="me"] > article.watch div.assigned { height: 440px; max-height: none }
}
/* a little more room between the letter circle and the name when the name sits under it */
.whead:has(.cardTabs) { row-gap: 12px }
/* a little more room between the letter circle and the name beside it */
.whead > .wav { margin-right: 6px }
/* every card lays out its name the same way: on a narrow card the name goes under the letter circle (as on yours, with its badges), on a wide card beside it */
@container watch (max-width: 400px) { .whead:has(.cardTabs) > h3 { flex-basis: 100% } }
/* Send to the manual: the reminder, the three choices, and a suggestion waiting for a leader */
.tmWhy { padding: 14px 18px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); background: linear-gradient(135deg, var(--gold-soft), var(--surface) 80%); color: var(--ink-2); font-size: .95rem; line-height: 1.55 }
.tmWhy b { color: var(--ink); display: block; margin-bottom: 2px }
.tmSug { margin: 0; font-size: .9rem; color: var(--ink-2) }
.tmPick { grid-template-columns: minmax(0, 1fr) }
.tmPick .typeCard { padding: 14px 16px }
.tmHelp { margin: 0 }
.tmBadge { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; color: var(--gold); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent) }
/* ---------- the header: warm gold with dark blue trim (a deeper, antique gold in dark mode) ---------- */
.mast {
  --mast: radial-gradient(640px 280px at 8% 0%, rgba(255, 255, 255, .55), transparent 65%), linear-gradient(135deg, #FBF2DC 0%, #EFD89F 50%, #D9AE55 100%);
  --mast-ink: #131B3D; --mast-muted: rgba(19, 27, 61, .74); --mast-line: rgba(26, 39, 88, .26); --mast-fill: rgba(26, 39, 88, .07);
  --mast-trim: #1A2758;
  --chev-mast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23131B3D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border: 2px solid var(--mast-trim)
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mast {
  --mast: radial-gradient(640px 280px at 8% 0%, rgba(255, 240, 200, .28), transparent 65%), linear-gradient(135deg, #DCC28A 0%, #C49D52 50%, #9A7333 100%);
  --mast-ink: #0E1430; --mast-muted: rgba(14, 20, 48, .78); --mast-line: rgba(14, 20, 48, .3); --mast-fill: rgba(14, 20, 48, .09); --mast-trim: #2A3E86 } }
:root[data-theme="dark"] .mast {
  --mast: radial-gradient(640px 280px at 8% 0%, rgba(255, 240, 200, .28), transparent 65%), linear-gradient(135deg, #DCC28A 0%, #C49D52 50%, #9A7333 100%);
  --mast-ink: #0E1430; --mast-muted: rgba(14, 20, 48, .78); --mast-line: rgba(14, 20, 48, .3); --mast-fill: rgba(14, 20, 48, .09); --mast-trim: #2A3E86 }
.mast::after { opacity: .35 }
/* the logo sits on a dark blue tile, the trim colour */
.mast .emblem { background: linear-gradient(135deg, #10172F, #26408F); color: #F5F0E4; border-color: var(--mast-trim) }
.mast .eyebrow { color: #7A4E08 }
.mast select:hover { border-color: rgba(26, 39, 88, .45) }
.mast .btn:hover { background: rgba(26, 39, 88, .1); border-color: rgba(26, 39, 88, .35) }
.mast .btn.ghost:hover { background: rgba(26, 39, 88, .08) }
.mast .prayNow { border-color: rgba(26, 39, 88, .26); background: rgba(255, 255, 255, .38) }
.brand #prayNow .prayNow { background: rgba(255, 255, 255, .38) }
/* the tabs: navy writing, and the open tab a dark blue pill */
.tabs button:hover { background: rgba(26, 39, 88, .08) }
.tabs button[aria-selected=true] { background: var(--mast-trim); color: #F5F0E4; box-shadow: 0 4px 14px -6px rgba(10, 16, 40, .55) }
.mast .tabArrow { color: #F5F0E4; background: rgba(19, 27, 61, .88); border-color: rgba(19, 27, 61, .6) }
/* the logo tile on the gold header: dark blue, with a soft gold light in its corner */
.mast .brand > .emblem { color: #fff; background: radial-gradient(120% 120% at 30% 20%, rgba(227, 187, 102, .28), transparent 60%), linear-gradient(135deg, #10172F, #26408F); border: 1px solid var(--mast-trim); box-shadow: 0 10px 26px -10px rgba(16, 23, 47, .6), inset 0 1px 0 rgba(255, 255, 255, .08) }
/* each watch card: its own colour glows softly inward from the border (the borders stay as they are); a little less on dark */
#watches article.watch { --wGlow: 22% }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #watches article.watch { --wGlow: 16% } }
:root[data-theme="dark"] #watches article.watch { --wGlow: 16% }
#watches article.watch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 34px 2px color-mix(in srgb, var(--w) var(--wGlow), transparent) }
/* Auto: a card is never narrower than its contents need (the time, the three tabs, Mark away), so nothing is cut off; more watches simply go onto the next row */
.watches[data-cols="auto"] { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) }
/* "Praying as": the header's dark blue trim, like its border and the open tab */
.mast .meChip { border-color: var(--mast-trim, #1A2758) }
.mast .meChip:hover .meSw, .mast .meChip:focus-visible .meSw { background: rgba(26, 39, 88, .14) }
/* "Active now": the green dot breathes, a soft ring pulsing out from it */
@media (prefers-reduced-motion: no-preference) {
  .onDot { animation: onPulse 2.2s ease-out infinite }
  @keyframes onPulse { 0% { box-shadow: 0 0 0 0 rgba(63, 191, 127, .55) } 70% { box-shadow: 0 0 0 7px rgba(63, 191, 127, 0) } 100% { box-shadow: 0 0 0 0 rgba(63, 191, 127, 0) } }
}
/* "Praying now" on the gold header (light and dark): a bronze label, a dark blue "Amen, done", soft blue edges */
.mast .pnLabel { color: #7A4E08 }
.mast .prayNow.on { border-color: rgba(26, 39, 88, .32); background: rgba(255, 255, 255, .4) }
.mast .pnPerson { background: rgba(26, 39, 88, .08) }
.mast .pnBtn.done { background: var(--mast-trim, #1A2758); color: #F5F0E4; border-color: var(--mast-trim, #1A2758) }
.mast .pnBtn.done:hover { background: #26408F; border-color: #26408F; color: #fff }
.mast .pnAv { box-shadow: 0 0 0 2px rgba(122, 78, 8, .55) }
@media (prefers-reduced-motion: no-preference) { .mast .prayNow.on .pnGlow { animation-name: pnGlowM } @keyframes pnGlowM { 50% { filter: drop-shadow(0 0 6px rgba(122, 78, 8, .6)); transform: scale(1.12) } } }
/* phones: each watch card (and its colour glow) is drawn once and moved as a whole while scrolling, so scrolling stays smooth */
@media (hover: none) and (min-width: 701px) { #watches article.watch { contain: paint } #watches article.watch::after { will-change: transform } }
/* while the page makes room for the prayer panel, each card is resized as one block (much less work per frame) */
html.sheetMoving #watches article.watch { contain: layout paint }
/* the watch cards no longer list their scriptures (they open with the prayer); the bullet count stays on narrow cards */
.watch .slide .pt > .ref.refCount::before { content: none }
@container watch (min-width: 420px) { .watch .slide .pt > .ref.refCount { display: none } }
/* laptop, Slide: every card is drawn ahead of time, so the very first move is as smooth as the rest */
@media (hover: hover) { .watches[data-cols="slide"] > article.watch { will-change: transform } }
/* the watch cards are for praying and tapping, not for selecting text: a press or a drag never highlights it (the open prayer still can) */
#watches article.watch, .whole .pt { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }
#watches article.watch :is(input, textarea, select) { -webkit-user-select: auto; user-select: auto }
/* Slide warming up: the row is invisible for a moment while each card is readied, then fades in */
.watches[data-cols="slide"] { transition: opacity .25s ease }
.watches[data-cols="slide"].wsWarming { opacity: .01; transition: none }
/* Slide: tell the browser this row scrolls, so it can glide it without redrawing */
.watches[data-cols="slide"] { will-change: scroll-position }
/* iPad (touch screens): opening or closing a prayer beside the page does not animate the page shrinking (too heavy for a tablet to draw smoothly);
   the page takes its new width at once and fades in softly, while the panel slides in as before */
@media (hover: none) {
  html.drawerSide body { transition: none !important }
  #main.sideShift { animation: sideShift .3s ease-out }
  @keyframes sideShift { from { opacity: .45 } to { opacity: 1 } }
}
/* phones only: no colour glow on the watch cards (barely visible at phone size, and costly to draw on the first scroll) */
@media (hover: none) and (max-width: 700px) { #watches article.watch::after { display: none } }
/* the slide arrows and their label are buttons, not text: tapping or double-clicking never highlights them */
.wSlideNav, .wsEdge, .wsArrow, .wArrow { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent }
/* sign-in on the many-churches version: the church code, and a way in for a new church */
.loginStart { margin: 4px 0 0; font-size: .9rem; color: var(--muted); text-align: center }
.loginStart a { color: var(--accent); font-weight: 600 }
/* a prayer in progress: a small gold Draft tag on its tab, and "Draft waiting" on Who's praying */
.tabDraft { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font: 700 .66rem var(--f-ui, inherit); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; color: #7A4E08; background: rgba(255, 255, 255, .55); border: 1px solid rgba(122, 78, 8, .35) }
.tabs button[aria-selected=true] .tabDraft { color: #F0D08F; background: transparent; border-color: rgba(240, 208, 143, .6) }
.tabDraft[hidden] { display: none }
.whoDraft { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; color: var(--gold); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); white-space: nowrap }
.whoName .whoNew + .whoDraft { margin-left: 8px }
/* the Draft badge in the top right corner of the first card, while a prayer is in progress */
.stStep:has(> .cardDraft) { position: relative }
.cardDraft { position: absolute; top: 14px; right: 16px; padding: 3px 10px; border-radius: 999px; font: 700 .7rem var(--f-ui, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent) }
.cardDraft[hidden] { display: none }
/* a prayer with no separate prayer point shows its own words in the card's box: that box is the prayer, so it gets the same soft gold */
.watch .slide .pt > .txt:not(.pp):not(.nopp) { background: radial-gradient(420px 160px at 0% 0%, color-mix(in srgb, var(--gold-2, var(--gold)) 16%, transparent), transparent 70%), linear-gradient(135deg, var(--gold-soft), var(--surface) 78%); border-color: color-mix(in srgb, var(--gold) 32%, var(--line)); color: var(--ink) }
/* ---------- header colour chosen in Settings ---------- */
/* a dark colour: light writing and light edges, so everything on the header still reads clearly */
.mast.mastDark { --mast-ink: #F7F2E6; --mast-muted: rgba(247, 242, 230, .8); --mast-line: rgba(255, 255, 255, .3); --mast-fill: rgba(255, 255, 255, .1);
  --chev-mast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23F7F2E6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.mast.mastDark .eyebrow, .mast.mastDark .pnLabel { color: #F0D08F }
.mast.mastDark .btn:hover, .mast.mastDark .tabs button:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4) }
.mast.mastDark .prayNow, .brand .mastDark #prayNow .prayNow { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3) }
.mast.mastDark .tabs button[aria-selected=true] { background: #F7F2E6; color: #131B3D }
.mast.mastDark .tabs button[aria-selected=true] .tabDraft { color: #7A4E08; border-color: rgba(122, 78, 8, .45) }
.mast.mastDark .meChip { border-color: rgba(255, 255, 255, .45) }
/* the Settings panel */
.lookPanel .lookBar { display: block; height: 44px; border-radius: var(--r-md); border: 2px solid #1A2758; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35) }
.lookNow { display: grid; gap: 10px }
.lookActs { display: flex; flex-wrap: wrap; gap: 8px }
.lookSeg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--sunk); margin-bottom: 12px }
.lookSeg button { font: 600 .9rem var(--f-ui, inherit); padding: 7px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer }
.lookSeg button[aria-pressed=true] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12) }
.lookSlots { display: flex; align-items: center; gap: 10px; margin-bottom: 12px }
.lookSlot { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .9rem var(--f-ui, inherit); cursor: pointer }
.lookSlot.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) }
.lookSw { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0, 0, 0, .15) }
.lookArrow { color: var(--muted) }
.lookPanel .lookPad { margin-top: 12px }
.lookPanel .cpkActs { display: none }
.lookPanel .formFoot { margin-top: 14px }
.lookPanel .lookBreak { flex-basis: 100%; height: 0 }
/* the header colour panel: choices on the left, the colour graph on the right (one column on phones) */
.lookGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start }
.lookCol { display: grid; gap: 8px; align-content: start }
.lookStep { margin: 6px 0 0; font: 700 .75rem/1.2 var(--f-ui, inherit); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.lookGrid .lookSeg, .lookGrid .lookSlots { margin-bottom: 4px; justify-self: start }
.lookPanel .lookGrid .lookPad { margin: 0 }
.lookPanel .lookGrid .cpk { max-width: none; margin: 0; flex-basis: auto }
.lookPanel .lookGrid .cpkSV { min-height: 200px }
@media (max-width: 760px) { .lookGrid { grid-template-columns: 1fr; gap: 16px } }
/* ---------- Settings: side by side, so there's little scrolling ---------- */
/* laptop and big iPad: the team and the categories side by side; header colour, manual changes and this device in a row underneath */
@media (min-width: 1100px) {
  #main > div.setup { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start }
  #main > div.setup > .setupCol { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start }
  /* choosing a colour needs the room: the panel takes the whole row while it's open */
  #main > div.setup > .setupCol > .lookPanel:has(.lookGrid) { grid-column: 1 / -1 }
}
/* below that: one column, but the smaller settings still share a row when there's room */
@media (min-width: 700px) and (max-width: 1099.98px) {
  #main > div.setup > .setupCol { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start }
  #main > div.setup > .setupCol > .lookPanel:has(.lookGrid) { grid-column: 1 / -1 }
}
/* the team list follows its panel's width: when the panel is narrower, each person's buttons go on a second line under their name */
#teamPanel { container-type: inline-size }
/* measured in em, so a bigger text size or zoom moves to the roomier layout too: nothing in a row ever runs past the panel */
@container (max-width: 54em) {
  .teamList > li { grid-template-columns: 56px repeat(4, minmax(0, 1fr)) 34px 34px; row-gap: 10px }
  .teamList > li > .idx { grid-column: 1; grid-row: 1 }
  .teamList > li > input { grid-column: 2 / 6; grid-row: 1 }
  .teamList > li > [data-act="tup"] { grid-column: 6; grid-row: 1 }
  .teamList > li > [data-act="tdown"] { grid-column: 7; grid-row: 1 }
  .teamList > li > .tLead { grid-column: 1 / 3; grid-row: 2 }
  .teamList > li > .tPin { grid-column: 3 / 4; grid-row: 2; display: flex }
  .teamList > li > [data-act="away"] { grid-column: 4 / 5; grid-row: 2 }
  .teamList > li > [data-act="trem"] { grid-column: 5 / 8; grid-row: 2 }
}
/* narrower still: three lines (name; arrows and leader; PIN, away, remove), like on a phone */
@container (max-width: 34em) {
  .teamList > li { grid-template-columns: 44px 44px minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px }
  .teamList > li > .idx { grid-column: 1; grid-row: 1 }
  .teamList > li > input { grid-column: 2 / -1; grid-row: 1 }
  .teamList > li > [data-act="tup"] { grid-column: 1; grid-row: 2; width: 100% }
  .teamList > li > [data-act="tdown"] { grid-column: 2; grid-row: 2; width: 100% }
  .teamList > li > .tLead { grid-column: 3 / -1; grid-row: 2 }
  .teamList > li > .tPin { grid-column: 1 / 3; grid-row: 3; justify-content: center; align-items: center }
  .teamList > li > [data-act="away"] { grid-column: 3; grid-row: 3 }
  .teamList > li > [data-act="trem"] { grid-column: 4; grid-row: 3 }
}
/* and whatever happens, a button's words stay inside the button and the row stays inside the panel */
.teamList > li { min-width: 0 }
.teamList .tSlot > *, .teamList > li > .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis }

/* the header colour panel follows its own width, not the screen's */
.lookPanel { container-type: inline-size }
@container (max-width: 560px) { .lookGrid { grid-template-columns: 1fr; gap: 16px } }
/* ...including cards with nothing on them yet: on a narrow card every name sits under its letter circle, like yours */
@container watch (max-width: 400px) { .whead { flex-wrap: wrap; row-gap: 12px } .whead > h3 { flex-basis: 100% } }
/* ---------- photos in the letter circles ---------- */
.wav > img, .pnAv > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; -webkit-user-drag: none }
.wav.hasPhoto { padding: 0 }
.pnAv:has(> img) { overflow: hidden; padding: 0 }
.pnAv:has(> img) { background: var(--surface) }
/* your own circle (and anyone's, for leaders) can be tapped to add a photo: a small camera shows on hover */
button.wavBtn { border: 0; padding: 0; cursor: pointer; font: inherit; font: 600 1.05rem/1 var(--f-display); color: #fff }
button.wavBtn.hasPhoto { overflow: visible }
button.wavBtn > img { border-radius: 50% }
.wavCam { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); opacity: 0; transform: scale(.8); transition: opacity .15s, transform .15s; pointer-events: none }
.wavCam svg { width: 12px; height: 12px }
button.wavBtn:hover .wavCam, button.wavBtn:focus-visible .wavCam { opacity: 1; transform: none }
/* your own circle always shows the camera until you add a photo; on phones and iPads every circle you can change shows it */
button.wavBtn.mine:not(.hasPhoto) .wavCam { opacity: 1; transform: none }
@media (hover: none) { button.wavBtn:not(.hasPhoto) .wavCam { opacity: 1; transform: none } }
/* if the green "on now" dot sits on the circle, the camera moves to the other side */
.watch.online button.wavBtn .wavCam { right: auto; left: -4px }
/* the photo sheet */
.phStage { display: grid; justify-items: center; gap: 14px; padding: 8px 0 4px }
.phView { width: 240px; height: 240px; border-radius: 50%; overflow: hidden; position: relative; display: grid; place-items: center; background: var(--mc); box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px color-mix(in srgb, var(--mc) 45%, transparent), 0 14px 34px -14px rgba(0, 0, 0, .4) }
.phView canvas { width: 240px; height: 240px; display: block; cursor: grab; touch-action: none }
.phView canvas:active { cursor: grabbing }
.phNow { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font: 600 5.2rem/1 var(--f-display) }
.phNow > img { width: 100%; height: 100%; object-fit: cover }
.phZoom { display: flex; align-items: center; gap: 12px; width: min(280px, 100%); font: 600 .85rem var(--f-ui, inherit); color: var(--muted) }
.phZoom input { flex: 1; accent-color: var(--accent) }
.phActs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }
.phPick { cursor: pointer }
/* Settings is for tapping, not for selecting text: nothing highlights on a press or a drag (the boxes you type in still work as usual) */
.setup { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }
.setup :is(input, textarea, select, [contenteditable]) { -webkit-user-select: auto; user-select: auto }
/* Settings for someone who isn't a leader: no categories, and the team as a simple list (their own name, PIN and away are still theirs to change) */
#main > div.setup.notLeader { grid-template-columns: minmax(0, 1fr) }
.teamList > li.ro { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px }
.teamList > li.ro > .idx { flex: none; width: 56px }
.teamList > li.ro > .tName { flex: 1 1 160px; min-width: 0; font-weight: 600; color: var(--ink) }
.teamList > li.ro > input { flex: 1 1 200px; width: auto }
.teamList > li.ro > .tSlot { flex: none; width: auto }
.teamList > li.ro > .tSlot:empty { display: none }
.teamList > li.ro > .btn { flex: none; width: auto }
.tAway { font-size: .85rem; font-weight: 600; color: var(--muted); padding: 3px 10px; border: 1px dashed var(--line); border-radius: 999px }
/* the header keeps its fuller shape on every screen: "Praying as" and the buttons always have their own row under the title */
.mastTop > .as { flex-basis: 100% }
/* ---------- the slim praying bar: once the header scrolls away, "Praying now" and "Amen, done" stay at the top ---------- */
.mast.pnFloat { position: fixed; z-index: 15; top: 0; left: 0; right: 0; margin: 0 auto; width: min(1352px, calc(100% - 32px));
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; border-radius: 0 0 16px 16px; border-top: 0;
  display: flex; justify-content: center; box-shadow: 0 10px 24px -12px rgba(10, 16, 40, .45); animation: pnFloatIn .22s ease-out }
.mast.pnFloat[hidden] { display: none }
.mast.pnFloat::after { content: none }
.mast.pnFloat .prayNow { margin: 0; max-width: 100% }
html.drawerSide .mast.pnFloat { right: var(--sideW, 0px); width: auto; left: 16px; margin: 0 }
@keyframes pnFloatIn { from { transform: translateY(-100%) } to { transform: none } }
@media (prefers-reduced-motion: reduce) { .mast.pnFloat { animation: none } }
/* the page leaves room for the bar: anything brought into view stops just below it */
html.pnFloatOn { scroll-padding-top: 64px }
@media (max-width: 560px) { .mast.pnFloat { width: 100%; border-radius: 0; border-left: 0; border-right: 0 } .mast.pnFloat .pnPeople { display: none } }
/* the bar reaches a little past the page's boxes on each side, so nothing peeks out at its edges as it scrolls under */
.mast.pnFloat { width: min(1384px, calc(100% - 16px)) }
html.drawerSide .mast.pnFloat { left: 8px }
/* past Order of prayer the bar slides back up out of the way (and comes down again on the way back up the page) */
.mast.pnFloat { transition: transform .25s ease, box-shadow .25s ease }
.mast.pnFloat.pnUp { transform: translateY(calc(-100% - 12px)); box-shadow: none; pointer-events: none }
@media (prefers-reduced-motion: reduce) { .mast.pnFloat { transition: none } }
/* ---------- the first-time tour ---------- */
#tour { position: fixed; inset: 0; z-index: 60 }
#tour .tourSpot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(10, 16, 40, .62), 0 0 0 3px #E3BB66; transition: all .25s ease; pointer-events: none }
#tour:has(.tourSpot[hidden]) { background: rgba(10, 16, 40, .62) }
#tour .tourCard { position: fixed; width: min(380px, calc(100% - 24px)); padding: 20px 20px 16px; border-radius: 18px; background: var(--surface); color: var(--ink); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55); display: grid; gap: 10px; transition: left .25s ease, top .25s ease }
#tour .tourCard.center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) }
#tour .tourStep { margin: 0; font: 700 .72rem var(--f-ui, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--gold) }
#tour h3 { margin: 0; font: 600 1.35rem/1.2 var(--f-display) }
#tour .tourText { margin: 0; color: var(--ink-2); line-height: 1.55 }
#tour .tourNever { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); cursor: pointer }
#tour .tourActs { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px }
#tour .tourNav { display: flex; gap: 8px }
@media (max-width: 599.98px) { #tour .tourCard:not(.center) { left: 12px !important; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); top: auto !important; width: auto } }
@media (prefers-reduced-motion: reduce) { #tour .tourSpot, #tour .tourCard { transition: none } }
.tourAgain { display: grid; gap: 8px; justify-items: start; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line) }
/* the tour: a deeper, even dim, and the button being shown as a crisp white pill above it */
#tour .tourSpot { box-shadow: 0 0 0 9999px rgba(8, 12, 30, .74), 0 0 0 2px #E3BB66, 0 0 22px 4px rgba(227, 187, 102, .45); border-radius: 999px }
#tour:has(.tourSpot[hidden]) { background: rgba(8, 12, 30, .74) }
.tourLit { position: relative; z-index: 61; background: #fff !important; color: #131B3D !important; border-radius: 999px; box-shadow: none !important }
.tourLit .n, .tourLit .tabDraft { color: #7A4E08 !important }
#prayNow.tourLit { background: transparent !important }
/* the tour lights a part of a card with soft corners, and a button as a pill */
#tour .tourSpot { border-radius: 18px }
#tour .tourSpot.pill { border-radius: 999px }