/* Missionary Lane admin (CMS). Builds on brand.css tokens; nothing here overrides church chrome. */
:root {
  --adm-bg: #F3F6F7;
  --danger: #B42318;
  --danger-tint: #FDECEA;
  --ok: #1E7B4A;
  --ok-tint: #E6F4EC;
  --warn-tint: #FFF4D6;
  --warn-ink: #7A5200;
}
body.admin { background: var(--adm-bg); min-height: 100vh; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: var(--radius); }
.skip:focus { left: 8px; }
#main { outline: none; padding-bottom: 64px; }
.boot, .loading { display: flex; align-items: center; gap: 12px; padding: 40px var(--gutter); color: var(--brand-muted); }
.small { font-size: .85rem; }
.muted.small, .small.muted { display: block; }
.req { font-weight: 400; color: var(--brand-muted); font-size: .85rem; }
code { font-size: .85em; background: var(--brand-surface-2); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.site-header nav a, .site-header nav button { min-height: 48px; white-space: nowrap; }
@media (min-width: 721px) {   /* five admin links: "View gallery" becomes an icon (named for screen readers; the dashboard has a big button too) */
  .site-header nav.is-admin [data-always] .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
}
.site-header nav svg { width: 20px; height: 20px; }

/* Buttons (additions) */
.btn-block { width: 100%; }
.btn-danger { --b-bg: var(--danger); --b-fg: #fff; }
.btn-ai { --b-bg: var(--brand-primary-deep); --b-fg: #fff; box-shadow: 0 4px 14px rgba(14,113,137,.3); }
.btn.danger-txt { --b-fg: var(--danger); }
.btn.danger-txt:hover { --b-bg: var(--danger-tint); }
.btn.playing { --b-bg: var(--brand-primary); --b-fg: #fff; border-color: var(--brand-primary); }
.linklike { background: none; border: 0; color: var(--brand-primary-deep); font: inherit; text-decoration: underline; cursor: pointer; min-height: 48px; padding: 0 4px; }
.filebtn { cursor: pointer; }
.filebtn:focus-within { outline: 3px solid var(--brand-primary-bright); outline-offset: 2px; }

/* Spinner */
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--brand-primary-tint); border-top-color: var(--brand-primary); animation: spin .8s linear infinite; display: inline-block; flex: none; }
.spinner.sm { width: 16px; height: 16px; border-width: 2px; }
.btn .spinner { border-color: rgba(255,255,255,.35); border-top-color: currentColor; }
.spinner.lg { width: 40px; height: 40px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Notices */
.notice { padding: 14px 16px; border-radius: var(--radius-lg); margin: 12px 0; background: var(--brand-primary-tint); color: var(--brand-ink); display: block; }
.notice.ok { background: var(--ok-tint); }
.notice.err { background: var(--danger-tint); color: #5c1510; }
.notice.warn { background: var(--warn-tint); color: #4a3200; }
.notice.info { background: #E8F1FF; }
.notice .btn { margin-top: 4px; }
.notice-msg { margin: 0 0 6px; }
.notice details { margin-top: 8px; font-size: .85rem; }
.notice summary { cursor: pointer; color: var(--brand-muted); min-height: 32px; }

/* Page scaffolding */
.page { padding-top: clamp(20px, 4vw, 36px); }
.page.narrow { max-width: 820px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-head h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.lede { color: var(--brand-muted); margin: 4px 0 0; font-size: 1.05rem; }
.card.pad { padding: clamp(18px, 3vw, 30px); margin-bottom: 20px; }
.card h2 { font-size: 1.45rem; }
.card h3 { font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.card h3 svg { width: 22px; height: 22px; color: var(--brand-primary); }
.empty { padding: 40px 24px; text-align: center; }
.empty .btn { margin-top: 8px; }
.big-emoji { font-size: 3rem; line-height: 1; margin-bottom: 12px; text-align: center; }
.empty-sm { color: var(--brand-muted); padding: 16px 0; list-style: none; }
.stack { display: grid; gap: 12px; margin-top: 20px; }
.actions { margin-top: 8px; }
.backlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-decoration: none; margin-bottom: 8px; }
.backlink svg { width: 20px; height: 20px; }

/* Forms */
fieldset { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
legend { font-weight: 700; color: var(--brand-primary-deep); font-size: 1.1rem; padding: 0 0 10px; margin-bottom: 14px; border-bottom: 1px solid var(--brand-line); width: 100%; display: flex; align-items: center; gap: 8px; }
legend svg { width: 22px; height: 22px; }
.card fieldset.card { margin-bottom: 20px; }
.grid2 { display: grid; gap: 0 18px; align-items: end; }
@media (min-width: 700px) { .grid2 { grid-template-columns: 1fr 1fr; } .grid2 .span2 { grid-column: 1 / -1; } }
.search-row, .pw-row { display: flex; gap: 8px; align-items: stretch; }
.search-row input, .pw-row input { flex: 1; min-width: 0; }
.search-row .btn, .pw-row .btn { flex: none; }
input[type=color] { width: 56px; height: 48px; padding: 3px; border: 1px solid #cfd6da; border-radius: var(--radius); background: #fff; cursor: pointer; flex: none; }

/* Switch */
.switch-row { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; padding: 8px 0; min-height: 48px; }
.switch-text { display: grid; gap: 2px; }
.switch-text strong { color: var(--brand-ink); font-weight: 600; }
.switch-text .hint { font-size: .88rem; color: var(--brand-muted); }
.switch { position: relative; flex: none; width: 58px; height: 32px; margin-top: 2px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; z-index: 1; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: #C3CCD0; transition: background .2s var(--ease); }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.switch input:checked + .track { background: var(--brand-primary); }
.switch input:checked + .track::after { transform: translateX(26px); }
.switch input:focus-visible + .track { outline: 3px solid var(--brand-primary-bright); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .5; }

/* Save bar: turns sticky + amber when there are unsaved changes */
.savebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding: 14px 0 0; border-top: 1px solid var(--brand-line); }
.savestate { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-muted); font-size: .95rem; }
.savestate .dot { width: 10px; height: 10px; border-radius: 50%; background: #B7C2C6; }
.savebar.is-dirty { position: sticky; bottom: 0; z-index: 20; background: #FFF8E6; border: 1px solid #F2D48A; border-radius: var(--radius-lg); padding: 12px 14px; margin: 16px calc(-1 * clamp(8px, 1.5vw, 14px)) 0; box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
.savebar.is-dirty .savestate { color: var(--warn-ink); font-weight: 600; }
.savebar.is-dirty .savestate .dot { background: #E0A100; box-shadow: 0 0 0 4px rgba(224,161,0,.2); }

/* Toasts */
.toasts { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; width: min(560px, calc(100vw - 24px)); pointer-events: none; }
.toast { display: flex; gap: 12px; align-items: center; padding: 14px 18px; background: #1F2A2E; color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: auto; font-size: .98rem; }
.toast.in { opacity: 1; transform: none; }
.toast .ti { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; background: var(--ok); }
.toast.err .ti { background: var(--danger); }
.toast.info .ti { background: var(--brand-primary); }

/* Modal */
.modal-back { position: fixed; inset: 0; z-index: 150; background: rgba(10,20,24,.55); display: grid; place-items: center; padding: 16px; }
.modal { width: min(520px, 100%); padding: 26px; }
.modal h2 { font-size: 1.4rem; }
.modal.wide { width: min(760px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal-body { overflow-y: auto; margin: 4px -6px 0; padding: 0 6px; }
.csvprev .csvm { border-top: 1px solid var(--brand-line); padding: 12px 0; }
.csvprev .csvm:first-child { border-top: 0; padding-top: 4px; }
.csvprev h3 { font-size: 1.05rem; margin: 0 0 6px; }
.csvprev ul { margin: 0; padding-left: 18px; }
.csvprev li { margin: 4px 0; }
.csvprev .csvchg { display: block; overflow-wrap: anywhere; }
.csvprev .old { text-decoration: line-through; opacity: .7; }
.csvprev .new { font-weight: 600; color: var(--brand-ink); }
.csvprev .warn { color: #8a5a00; }
.csvprev .notice { margin-top: 12px; }
.ed-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) { .ed-head { flex-wrap: wrap; } .ed-actions { margin-left: 0; width: 100%; } }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 480px) { .modal-actions .btn { flex: 1 1 100%; } .modal-actions { flex-direction: column-reverse; } }

/* Auth */
.auth-wrap { min-height: calc(100vh - 60px); display: grid; place-items: start center; padding: clamp(24px, 6vw, 64px) 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--brand-primary) 14%, transparent), transparent 60%); }
.auth { width: min(480px, 100%); padding: clamp(24px, 5vw, 40px); text-align: left; }
.auth-logo { width: 72px; height: 72px; border-radius: 16px; margin: 0 auto 14px; box-shadow: var(--shadow-1); }
.auth h1 { text-align: center; font-size: 2rem; margin-bottom: 4px; }
.auth .lede { text-align: center; margin-bottom: 20px; }
.auth h2 { font-size: 1.3rem; }
.auth-foot { margin-top: 16px; text-align: center; }
.auth-foot .hint { color: var(--brand-muted); font-size: .92rem; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--brand-surface-2); border-radius: var(--radius-lg); padding: 4px; margin-bottom: 20px; }
.tabs button { min-height: 48px; border: 0; background: none; border-radius: var(--radius); font: 600 1rem var(--font-body); color: var(--brand-muted); cursor: pointer; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--brand-primary-deep); box-shadow: var(--shadow-1); }

/* Dashboard */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; align-items: center; }
.searchbox { position: relative; flex: 1 1 320px; }
.searchbox svg { position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--brand-muted); pointer-events: none; }
.searchbox input { padding-left: 46px; min-height: 52px; }
.seg { display: inline-flex; background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); padding: 3px; flex-wrap: wrap; }
.seg button { min-height: 44px; padding: 0 16px; border: 0; background: none; border-radius: var(--radius); font: 500 .95rem var(--font-body); color: var(--brand-text); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--brand-primary); color: #fff; }
.mtable { background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); overflow: hidden; }
.mrow { display: grid; grid-template-columns: 40px 52px minmax(0,1.9fr) minmax(0,1.4fr) 118px 124px 164px 96px; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--brand-line); }
.mrow.mhead { border-top: 0; background: var(--brand-surface-2); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-muted); padding-top: 8px; padding-bottom: 8px; }
.mrow:not(.mhead):hover { background: #FAFCFD; }
.mrow.picked, .mrow.picked:hover { background: #EEF8FB; }
.mhead .staff { text-transform: none; letter-spacing: 0; }
.c-thumb img, .noimg { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--brand-surface-2); display: grid; place-items: center; color: #9aa6ab; }
.noimg svg { width: 60%; height: 60%; }
.noimg.sm { width: 36px; height: 36px; flex: none; }
.c-name { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.c-name a { font-weight: 700; color: var(--brand-ink); text-decoration: none; font-size: 1.02rem; line-height: 1.3; }
.c-name a:hover { color: var(--brand-primary-deep); text-decoration: underline; }
.c-name .muted { line-height: 1.35; }
.c-name .chip { margin-top: 4px; }
.chip svg { width: 14px; height: 14px; }
.chip { white-space: nowrap; }
.c-place { line-height: 1.35; font-size: .95rem; min-width: 0; }
.c-status { display: grid; gap: 5px; justify-items: start; }
.c-support, .c-visit { font-size: .92rem; line-height: 1.35; }
.c-support strong { color: var(--brand-ink); }
.mlabel { display: none; }
.c-edit .btn { width: 100%; }
.chk { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -2px; cursor: pointer; border-radius: var(--radius); }
.chk:hover { background: var(--brand-primary-tint); }
.chk input { width: 22px; height: 22px; accent-color: var(--brand-primary); cursor: pointer; margin: 0; }
.chip.st-on_field { background: var(--ok-tint); color: var(--ok); }
.chip.st-furlough { background: #E8F1FF; color: #1F4E9C; }
.chip.st-preparing { background: var(--warn-tint); color: var(--warn-ink); }
.chip.st-retired, .chip.st-former { background: #EEE; color: #555; }
.chip.big { font-size: .95rem; padding: 6px 14px; }
.chip.vis-public { background: var(--brand-primary); color: #fff; }
.chip.vis-draft { background: #F1F3F4; color: #505a5e; border: 1px dashed #B7C2C6; }
.chip.vis-limited { background: var(--warn-tint); color: var(--warn-ink); }
.chip.vis-hidden { background: #3A4346; color: #fff; }
.staff { display: inline-block; font-size: .72rem; font-weight: 600; background: #EEE; color: #555; border-radius: 999px; padding: 1px 8px; vertical-align: middle; letter-spacing: 0; text-transform: none; }
.shown { margin: 0 0 6px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; margin: -4px 0 16px; }
.fsel { display: grid; gap: 4px; flex: 1 1 170px; min-width: 0; }
.fsel label { font-size: .82rem; font-weight: 600; color: var(--brand-muted); }
.fsel select { min-height: 48px; padding: 8px 10px; }
.fswitch { flex: 0 0 auto; }
.fswitch .switch-row { padding: 0; }
.fswitch .switch-text .hint { font-size: .8rem; }
.selbar { position: sticky; top: 64px; z-index: 30; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; margin-bottom: 12px; background: #1F2A2E; color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.selbar[hidden] { display: none; }
.selcount { font-weight: 700; margin-right: auto; }
.selbar select { width: auto; min-width: 190px; }
.selbar .btn-ghost { --b-fg: #fff; border-color: rgba(255,255,255,.35); }
.selbar .btn-ghost:hover { --b-bg: rgba(255,255,255,.12); }
@media (max-width: 1100px) {
  .mhead { display: none !important; }
  .mtable { background: none; border: 0; box-shadow: none; display: grid; gap: 12px; overflow: visible; }
  .mrow { grid-template-columns: 44px 56px minmax(0,1fr) auto; grid-template-areas: "chk thumb name status" "chk thumb place status" ". support support support" ". visit visit visit" ". edit edit edit"; gap: 4px 12px; background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius-xl); padding: 14px; box-shadow: var(--shadow-1); }
  .c-chk { grid-area: chk; align-self: start; } .c-thumb { grid-area: thumb; align-self: start; } .c-name { grid-area: name; } .c-place { grid-area: place; } .c-status { grid-area: status; justify-items: end; align-self: start; }
  .c-support { grid-area: support; margin-top: 6px; } .c-visit { grid-area: visit; } .c-edit { grid-area: edit; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--brand-line); }
  .c-support .muted.small, .c-visit .muted.small { display: inline; margin-left: 4px; }
  .mlabel { display: inline; color: var(--brand-muted); }
  .c-edit .btn { width: auto; }
}
@media (max-width: 560px) {
  .mrow { grid-template-columns: 44px 52px minmax(0,1fr); grid-template-areas: "chk thumb name" "chk thumb place" "status status status" "support support support" "visit visit visit" "edit edit edit"; }
  .c-status { justify-items: start; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .c-support .muted.small, .c-visit .muted.small { display: block; margin-left: 0; }
  .c-edit .btn { width: 100%; }
  .page-head .btn-lg { width: 100%; }
  .seg { width: 100%; } .seg button { flex: 1; padding: 0 8px; }
  .fsel { flex: 1 1 calc(50% - 6px); }
  .selbar { top: 58px; } .selbar select { flex: 1 1 100%; } .selbar .btn { flex: 1; }
}

/* Upcoming dates */
.upcoming h2 { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; flex-wrap: wrap; }
.upcoming h2 svg { width: 24px; height: 24px; color: var(--brand-primary); }
.upcoming h2 .muted { font-weight: 400; font-size: 1rem; }
.upcoming > div > p { margin: 0; }
.uplist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.uplist a { display: flex; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); text-decoration: none; color: var(--brand-text); min-height: 60px; }
.uplist a:hover { border-color: var(--brand-primary); background: #F6FBFC; }
.upd { display: grid; place-items: center; width: 48px; flex: none; border-radius: var(--radius); background: var(--brand-primary-tint); color: var(--brand-primary-deep); line-height: 1.05; padding: 5px 0; }
.upm { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.upday { font-size: 1.25rem; font-weight: 700; }
.upt { display: grid; min-width: 0; line-height: 1.3; }
.upk { display: flex; gap: 6px; align-items: center; font-weight: 600; color: var(--brand-ink); }
.upk svg { width: 17px; height: 17px; flex: none; color: var(--brand-primary); }

/* Editor */
.ed-head { display: flex; gap: 18px; align-items: center; margin: 4px 0 22px; }
.ed-head h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 4vw, 2.3rem); }
.ed-portrait { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid #fff; box-shadow: var(--shadow-1); }
.ed-portrait.noimg { display: grid; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; }
.steps { position: sticky; top: 78px; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.steps a, .steps .dis { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-lg); text-decoration: none; color: var(--brand-text); min-height: 56px; border: 1px solid transparent; }
.steps a:hover { background: #fff; border-color: var(--brand-line); }
.steps [aria-current="step"] { background: #fff; border-color: var(--brand-primary); box-shadow: var(--shadow-1); }
.steps .dis { opacity: .55; cursor: not-allowed; }
.steps .dis[aria-current="step"] { opacity: 1; cursor: default; }
.steps .num, .step-title .num { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-primary-tint); color: var(--brand-primary-deep); display: grid; place-items: center; font-weight: 700; flex: none; }
.steps [aria-current="step"] .num { background: var(--brand-primary); color: #fff; }
.steps .st { display: grid; line-height: 1.25; }
.steps .st strong { color: var(--brand-ink); font-weight: 600; }
.steps .sb { font-size: .8rem; color: var(--brand-muted); margin-top: 2px; }
.step-title { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.step-title .num { width: 42px; height: 42px; font-size: 1.2rem; background: var(--brand-primary); color: #fff; }
.step-title h2 { margin: 4px 0 2px; }
.step-title .hint { color: var(--brand-muted); margin: 0; }
.stepfoot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.stepfoot .btn svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .ed-grid { grid-template-columns: 1fr; gap: 16px; }
  .steps { position: static; margin: 0 calc(-1 * var(--gutter)); overflow-x: auto; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .steps ol { display: flex; gap: 6px; padding: 0 var(--gutter) 4px; width: max-content; }
  .steps a, .steps .dis { padding: 8px 14px 8px 8px; min-height: 48px; align-items: center; background: #fff; border-color: var(--brand-line); }
  .steps .sb { display: none; }
  .ed-head { gap: 14px; }
  .ed-portrait { width: 64px; height: 64px; }
}
@media (max-width: 560px) {
  .stepfoot .btn { flex: 1 1 100%; }
  .stepfoot > span:empty { display: none; }
  .search-row { flex-wrap: wrap; } .search-row .btn { flex: 1 1 100%; }
}

/* Place search */
.place-results { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.place-opt { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; min-height: 56px; padding: 10px 14px; background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); font: inherit; color: var(--brand-ink); cursor: pointer; }
.place-opt:hover, .place-opt:focus-visible { border-color: var(--brand-primary); background: #F6FBFC; }
.place-opt svg { width: 22px; height: 22px; color: var(--brand-primary); flex: none; }
.place-opt span { display: grid; line-height: 1.3; }
.place-opt .muted { font-size: .88rem; }
.picked { margin: 4px 0 16px; }
.picked-box { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--brand-primary-tint); border-radius: var(--radius-lg); }
.picked-box svg { width: 26px; height: 26px; color: var(--brand-primary-deep); flex: none; }
.picked .hint { color: var(--brand-muted); font-size: .9rem; }

/* Drop zones + uploads */
.drop { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 30px 20px; border: 2px dashed #9FC9D4; border-radius: var(--radius-xl); background: #F6FBFC; cursor: pointer; transition: background .2s, border-color .2s; }
.drop:hover, .drop.over { background: var(--brand-primary-tint); border-color: var(--brand-primary); }
.drop:focus-within { outline: 3px solid var(--brand-primary-bright); outline-offset: 2px; }
.drop strong { font-size: 1.2rem; color: var(--brand-ink); }
.drop .hint { color: var(--brand-muted); max-width: 44ch; }
.drop-icon { width: 58px; height: 58px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: grid; place-items: center; }
.drop-icon svg { width: 28px; height: 28px; }
.uploads { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.uploads li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--brand-surface-2); border-radius: var(--radius); font-size: .95rem; }
.uploads li.ok { background: var(--ok-tint); } .uploads li.err { background: var(--danger-tint); }
.uploads .ui { font-weight: 700; width: 18px; text-align: center; }
.uploads .uname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 50%; }
.uploads .ustate { color: var(--brand-muted); }
.video-add { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--brand-line); }
.or { color: var(--brand-muted); margin: 4px 0 10px; font-size: .9rem; }

/* Media list */
.media-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.media-item { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 18px; padding: 14px; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); background: #fff; }
.mthumb { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--brand-surface-2); }
.mthumb img, .mthumb video { width: 100%; height: 100%; object-fit: cover; }
.pbadge { position: absolute; left: 8px; top: 8px; background: var(--brand-primary); color: #fff; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.vbadge { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; pointer-events: none; }
.vbadge svg { width: 44px; height: 44px; padding: 10px; background: rgba(0,0,0,.55); border-radius: 50%; }
.vtile { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--brand-muted); font-size: .85rem; }
.vtile svg { width: 36px; height: 36px; }
.mbody .field { margin-bottom: 8px; }
.mactions { display: flex; flex-wrap: wrap; gap: 6px; }
.mactions .btn { min-height: 44px; padding: .45em .9em; font-size: .95rem; }
@media (max-width: 640px) {
  .media-item { grid-template-columns: 1fr; gap: 10px; }
  .mactions .btn { flex: 1 1 calc(50% - 6px); }
}

/* Newsletters */
.letters { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.letter { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 16px; padding: 14px; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); }
.lthumb { display: block; aspect-ratio: 8.5/11; border-radius: 4px; overflow: hidden; background: var(--brand-surface-2); border: 1px solid var(--brand-line); }
.lthumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lmeta { font-size: .9rem; color: var(--brand-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ltitle { display: block; font-size: 1.1rem; color: var(--brand-ink); margin: 2px 0 4px; }
.lsum { font-size: .95rem; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) { .letter { grid-template-columns: 72px minmax(0,1fr); gap: 12px; } }
.pages { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.npage { flex: none; width: 120px; text-decoration: none; font-size: .85rem; color: var(--brand-muted); text-align: center; }
.npage img, .npage .vtile { width: 120px; aspect-ratio: 8.5/11; object-fit: cover; object-position: top; border: 1px solid var(--brand-line); border-radius: 4px; background: #fff; margin-bottom: 4px; }
.npage.pdf .vtile { color: var(--brand-primary-deep); }
.ai-box { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--radius-xl); background: linear-gradient(120deg, #E6F5F9, #F4FAFC 60%, #FFF7E8); border: 1px solid #CFE7EE; }
.ai-box > div { flex: 1 1 300px; }
.ai-box strong { color: var(--brand-ink); font-size: 1.1rem; }
.ai-box .hint { margin: 4px 0 0; color: var(--brand-muted); font-size: .92rem; }
@media (max-width: 560px) { .ai-box .btn { width: 100%; } }
.ai-working { display: flex; gap: 16px; align-items: center; padding: 18px; margin-top: 14px; background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); }
.ai-working .hint { color: var(--brand-muted); font-size: .9rem; }
.listed-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.listed-items li { display: flex; gap: 8px; align-items: flex-start; }
.listed-items textarea { min-height: 56px; flex: 1; }
.listed-items .rm { flex: none; padding: 0 12px; }
.listed-items .rm svg { width: 20px; height: 20px; }
.listed .addrow { justify-self: start; }
.card-inset { margin-top: 16px; padding: 16px 18px; border: 1px solid #F2D48A; background: #FFFBF0; border-radius: var(--radius-lg); }
.suggest-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.suggest-head .hint { margin: 2px 0 0; color: var(--brand-muted); font-size: .9rem; }
.suggest ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.suggest li { display: grid; grid-template-columns: 170px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid #F3E3B5; }
.sg-l { font-weight: 600; color: var(--brand-ink); font-size: .92rem; }
.sg-v { word-break: break-word; font-size: .95rem; }
.suggest li.applied .sg-v { color: var(--brand-muted); }
@media (max-width: 640px) { .suggest li { grid-template-columns: 1fr auto; } .sg-l { grid-column: 1 / -1; } }

/* Kiosk design */
.kgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.kprev-sticky { position: sticky; top: 80px; }
.kprev-label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-muted); margin-bottom: 8px; }
.kcontrols > .card.pad { margin-bottom: 16px; }
.kcontrols legend { border-bottom: 0; margin-bottom: 10px; padding-bottom: 0; float: left; }
.kcontrols legend + * { clear: both; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.swatch { display: flex; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); cursor: pointer; }
.swatch span { display: grid; line-height: 1.25; }
.swatch strong { font-size: .92rem; color: var(--brand-ink); }
.swatch .hint { font-size: .78rem; color: var(--brand-muted); }
.narr { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--brand-line); }
.narr:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.narr .field { margin-bottom: 8px; }
.narr-bar { display: grid; gap: 8px; }
.vstate { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 32px; }
.vstate .muted.small { display: inline; }
.narr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.narr-actions .btn { min-height: 48px; flex: 1 1 190px; }
.narr-out .notice { margin-bottom: 0; }
.chip.vchip { font-size: .85rem; padding: 5px 12px; }
.chip.vchip.rec { background: var(--ok-tint); color: var(--ok); }
.chip.vchip.builtin { background: #EEF1F2; color: #4F5A5E; }
.chip.vchip.busy { background: var(--brand-primary-tint); color: var(--brand-primary-deep); }
@media (max-width: 1000px) {
  .kgrid { grid-template-columns: 1fr; }
  .kprev-sticky { position: static; }
  .kprev-wrap { max-width: 460px; width: 100%; justify-self: center; }
}
/* Kiosk preview card */
.kp { border-radius: var(--radius-xl); overflow: hidden; background: var(--kp-paper); color: var(--kp-ink); box-shadow: var(--shadow-2); border: 1px solid rgba(0,0,0,.06); }
.kp-roof { display: block; width: 100%; height: 30px; background: var(--adm-bg); margin-bottom: -1px; }
.kp-banner { min-height: 170px; padding: 26px 24px 58px; background-size: auto; text-align: center; display: grid; align-content: center; }
.kp-greet { font: 300 clamp(2.4rem, 6vw, 3.4rem)/1 var(--font-display); letter-spacing: -.01em; }
.kp-lang { font-size: .85rem; opacity: .85; margin-top: 6px; letter-spacing: .06em; text-transform: uppercase; }
.kp-body { padding: 0 24px 26px; position: relative; text-align: center; }
.kp-portrait { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; margin: -52px auto 10px; border: 4px solid var(--kp-paper); background: #ddd; display: grid; place-items: center; }
.kp-place { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; font-weight: 600; color: var(--kp-ink); opacity: .85; }
.kp-place svg { width: 16px; height: 16px; color: var(--kp-sec); }
.kp-head { color: var(--kp-ink); font-size: 1.45rem; margin: 6px 0 6px; justify-content: center; }
.kp-sub { font-size: .98rem; opacity: .85; margin-bottom: 14px; }
.kp-quote { margin: 0; padding: 12px 16px; border-left: 5px solid var(--kp-accent); background: rgba(255,255,255,.55); text-align: left; font-style: italic; border-radius: 0 var(--radius) var(--radius) 0; font-size: .95rem; }
.kp-quote cite { display: block; font-style: normal; font-size: .85rem; margin-top: 6px; opacity: .8; }

/* News & facts */
.brief-bar .muted.small { display: inline; }
.brief-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; background: var(--brand-surface-2); border-radius: var(--radius-lg); margin-bottom: 14px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0 0 22px; }
.facts div { padding: 12px 14px; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); }
.facts dt { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-primary-deep); }
.facts dd { margin: 4px 0 0; font-size: .95rem; line-height: 1.45; }
.advisory { display: grid; gap: 4px; padding: 14px 16px; border-left: 5px solid #E0A100; background: var(--warn-tint); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin-bottom: 22px; }
.advisory .small { display: block; }
.news { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.news li { padding: 14px 16px; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); }
.news p { margin: 6px 0 0; font-size: .95rem; }
.news .why { color: var(--brand-muted); }

/* Privacy & publish */
.danger-zone { border-color: #F3C5C0; }
.danger-zone h3 { color: var(--danger); }
#aliasbox { margin-top: 8px; padding-left: 72px; }
@media (max-width: 560px) { #aliasbox { padding-left: 0; } .danger-zone .btn { width: 100%; } }

/* Settings */
.keystate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 18px; }
.keystate .muted.small { display: inline; }
.chip.info { background: #E8F1FF; color: #1F4E9C; }
.record-all { margin-top: 22px; padding: 18px 20px; border-radius: var(--radius-xl); background: linear-gradient(120deg, #E6F5F9, #F4FAFC 60%, #FFF7E8); border: 1px solid #CFE7EE; }
.record-all .hint { margin: 10px 0 0; color: var(--brand-muted); font-size: .92rem; }
.record-all .notice { margin-bottom: 0; }
.rec-line { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-weight: 500; color: var(--brand-ink); }
#customvoice { margin-top: -4px; }
@media (max-width: 560px) { .record-all .btn { width: 100%; } .actions .btn { width: 100%; } }
.admins { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.admins li { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); min-height: 60px; }
.aemail { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.aemail .chip { margin-left: 6px; }

/* Church (tenant) in the header, church picker, members, provider pickers */
.site-header .brand .sub.church { font-weight: 500; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
.church-switch { color: #fff; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius); font: 500 .85rem/1 var(--font-body); min-height: 36px; padding: 0 10px; cursor: pointer; white-space: nowrap; }
.church-switch:hover { background: rgba(255,255,255,.22); }
.church-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; text-align: left; }
.church-list button { width: 100%; justify-content: space-between; }
.church-list .chip { pointer-events: none; }
.member-add { display: grid; gap: 8px; grid-template-columns: 1fr auto auto; align-items: end; }
.member-add select { width: auto; }
@media (max-width: 560px) { .member-add { grid-template-columns: 1fr; } }
.prov-fields:empty { display: none; }
.mode-row { margin: 0 0 18px; }

/* Header on small screens: icon + tiny label so every button is named */
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .site-header .bar { gap: 8px; padding-top: 6px; padding-bottom: 6px; }
  .site-header .brand img { height: 26px; }
  .site-header .brand .sub.church { display: none; }
  .church-switch { font-size: .7rem; padding: 0 6px; }
  .site-header nav { gap: 0; }
  .site-header nav a, .site-header nav button { flex-direction: column; gap: 2px; padding: 5px 7px; font-size: .66rem; min-height: 50px; justify-content: center; }
  .site-header nav .label { display: inline; white-space: nowrap; }
  .site-header nav.is-admin [data-always] { display: none; }
  .head-actions { width: 100%; } .head-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 900px) {
  .steps li:not(.cur) .st { display: none; }
  .steps li:not(.cur) a, .steps li:not(.cur) .dis { padding: 8px; }
}

/* Public/private eyes */
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.eye { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; margin: -4px 0; border-radius: 999px; border: 1px solid #cfd6da; background: #fff; color: #6b767a; font: 600 .8rem var(--font-body); cursor: pointer; position: relative; }
.eye::after { content: ''; position: absolute; inset: -6px -2px; }   /* 48px tap target */
.eye svg { width: 18px; height: 18px; }
.eye.on { background: var(--brand-primary-tint); border-color: transparent; color: var(--brand-primary-deep); }
.eye:hover { border-color: var(--brand-primary); }
.eye-legend svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--brand-primary); }
.step-title .hint + .hint { margin-top: 6px; }
.pubrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin: -4px 0 18px; background: var(--brand-surface-2); border-radius: var(--radius-lg); }
.pubrow-l { font-size: .9rem; font-weight: 600; color: var(--brand-muted); }
.pubitem { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; }
.pubitem .eye { margin: 0; }
.grid3 { display: grid; gap: 0 18px; }
@media (min-width: 700px) { .grid3 { grid-template-columns: 1fr 1fr 1fr; } }
fieldset.staffcard { background: #F7F8F9; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); padding: 16px 18px 4px; }
fieldset.staffcard legend { float: left; border-bottom: 0; padding: 0; margin-bottom: 6px; flex-wrap: wrap; }
fieldset.staffcard legend + * { clear: both; }
fieldset.staffcard > .hint { color: var(--brand-muted); font-size: .9rem; margin: 0 0 12px; }
.flabel { font-weight: 600; color: var(--brand-ink); font-size: .95rem; }

/* Family & dates */
.rows { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 12px; }
.rowcard { border: 1px solid var(--brand-line); border-radius: var(--radius-lg); padding: 14px 14px 10px; background: #fff; }
.rowgrid { display: grid; gap: 0 14px; }
.rowgrid .field { margin-bottom: 10px; }
@media (min-width: 700px) {
  .rowgrid.fam { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.1fr); }
  .rowgrid.dates { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
  .rowgrid .span-all { grid-column: 1 / -1; }
}
.agehint { min-height: 1.2em; }
.rowfoot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; border-top: 1px solid var(--brand-line); padding-top: 8px; }
.switches { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.mini-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; font-size: .92rem; font-weight: 500; color: var(--brand-ink); }
.mini-switch .switch { margin-top: 0; }
.rowbtns { display: flex; gap: 6px; margin-left: auto; }
.rowbtns .btn { min-height: 44px; padding: .4em .8em; }
.rowbtns .btn svg { width: 20px; height: 20px; }
.add-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick .btn { min-height: 44px; font-size: .9rem; padding: .4em .9em; }
@media (max-width: 560px) {
  .switches { flex-direction: column; gap: 0; }
  .rowbtns { width: 100%; } .rowbtns .danger-txt { margin-left: auto; }
  .add-row > .btn { width: 100%; }
}

/* Privacy & publish */
.vischoose { display: grid; gap: 10px; margin-bottom: 16px; }
@media (min-width: 760px) { .vischoose { grid-template-columns: 1fr 1fr; } }
.visopt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 2px solid var(--brand-line); border-radius: var(--radius-lg); cursor: pointer; background: #fff; min-height: 48px; }
.visopt:hover { border-color: #9FC9D4; }
.visopt:has(input:checked) { border-color: var(--brand-primary); background: #F3FAFC; box-shadow: 0 0 0 3px var(--brand-primary-tint); }
.visopt input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--brand-primary); flex: none; }
.vo-body { display: grid; gap: 4px; }
.vo-body .chip { font-size: .9rem; }
.vo-line { font-size: .92rem; color: var(--brand-text); line-height: 1.4; }
#aliasbox { margin-top: 0; padding-left: 0; }
.pubcheck { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.pubcheck label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: var(--radius); border: 1px solid var(--brand-line); cursor: pointer; font-size: .92rem; }
.pubcheck input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pc-box { width: 24px; height: 24px; flex: none; border-radius: 6px; border: 2px solid #B7C2C6; display: grid; place-items: center; color: transparent; background: #fff; }
.pc-box svg { width: 16px; height: 16px; stroke-width: 3; }
.pubcheck input:checked + .pc-box { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.pubcheck input:focus-visible + .pc-box { outline: 3px solid var(--brand-primary-bright); outline-offset: 2px; }
.pubcheck input:not(:checked) ~ span:last-child { color: var(--brand-muted); }
.pubcheck.inactive { opacity: .6; }
.pubcheck-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .pubcheck { grid-template-columns: 1fr 1fr; } .pubcheck label { font-size: .85rem; padding: 6px 8px; gap: 8px; } .pubcheck-actions .btn { flex: 1; } }

/* Kiosk decorations */
.flagrow { display: grid; gap: 4px 18px; align-items: end; }
.flagrow .switch-row { margin: -4px 0 10px; }
.flag-in { display: flex; gap: 10px; align-items: center; }
.flag-in input { max-width: 9rem; text-transform: lowercase; }
.flagprev { display: inline-flex; align-items: center; min-height: 40px; }
.flagprev img { height: 36px; width: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.propgroups { display: grid; gap: 10px; margin-top: 6px; }
.propgroup { display: grid; gap: 4px; }
.pg-l { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-muted); }
.propchips { display: flex; flex-wrap: wrap; gap: 6px; }
.propchip { position: relative; cursor: pointer; }
.propchip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.propchip span { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 12px; border: 1px solid #cfd6da; border-radius: 999px; font-size: .88rem; background: #fff; color: var(--brand-text); }
.propchip input:checked + span { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.propchip input:checked + span::before { content: '✓ '; white-space: pre; }
.propchip input:focus-visible + span { outline: 3px solid var(--brand-primary-bright); outline-offset: 2px; }
.propchip.dim span { opacity: .45; }
.bunting { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.bcol { display: inline-flex; align-items: center; gap: 2px; }
.bcol .bx { min-height: 44px; padding: 0 8px; }
.bcol .bx svg { width: 18px; height: 18px; }
.kp-banner { position: relative; }
.kp-bunting { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 18px; }
.kp-flag { position: absolute; top: 24px; right: 14px; height: 34px; width: auto; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.kp-decor { margin-top: 14px; display: grid; gap: 6px; justify-items: center; }
.kp-scenery { font-size: .8rem; opacity: .8; }
.kp-props { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.kp-props span { font-size: .75rem; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.06); }

/* Announcements */
.anngroup details > summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; }
.anngroup details > summary::-webkit-details-marker { display: none; }
.anngroup summary h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.anngroup summary h2::before { content: '▸'; color: var(--brand-primary); transition: transform .2s; display: inline-block; }
.anngroup details[open] summary h2::before { transform: rotate(90deg); }
.anngroup .count { font-size: .85rem; background: var(--brand-primary-tint); color: var(--brand-primary-deep); border-radius: 999px; padding: 2px 10px; }
.anns { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.ann { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); }
.ann-img { display: block; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--brand-surface-2); }
.ann-img img { width: 100%; height: 100%; object-fit: cover; }
.ann-body { display: grid; gap: 4px; min-width: 0; }
.ann-title { font-size: 1.08rem; color: var(--brand-ink); }
.ann-msg { margin: 0; font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) {
  .ann { grid-template-columns: 76px minmax(0,1fr); align-items: start; }
  .ann-edit { grid-column: 1 / -1; }
}
.autos { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.autos li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px dashed #B7C2C6; border-radius: var(--radius-lg); }
.autos li > svg { width: 22px; height: 22px; color: var(--brand-primary); flex: none; }
.autos li > div { display: grid; }
.notice.tpl { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.notice.tpl .btn { margin-top: 0; }
.radiocards { display: grid; gap: 8px; }
@media (min-width: 640px) { .radiocards { grid-template-columns: repeat(3, 1fr); } }
.radiocard { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 2px solid var(--brand-line); border-radius: var(--radius-lg); cursor: pointer; min-height: 48px; }
.radiocard:has(input:checked) { border-color: var(--brand-primary); background: #F3FAFC; }
.radiocard input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--brand-primary); flex: none; }
.radiocard > span { display: grid; gap: 2px; }
.radiocard .hint { font-size: .85rem; color: var(--brand-muted); }
.annpic { margin-top: 6px; }
.annpic-has { display: grid; gap: 10px; justify-items: start; }
.annpic-has img { max-height: 220px; width: auto; border-radius: var(--radius-lg); border: 1px solid var(--brand-line); }
.drop.drop-sm { padding: 20px; }
.drop.drop-sm .drop-icon { width: 46px; height: 46px; }
#mpicked .picked-box { flex-wrap: wrap; }
#mpicked .picked-box > div { flex: 1; min-width: 180px; }
#mpicked .picked-box .muted.small { display: block; }
#mpick-row[hidden] { display: none; }
.opt { font-weight: 400; color: var(--brand-muted); font-size: .85rem; }
.rowcard input[type=text], .rowcard input[type=date], .rowcard select { height: 52px; min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
.steps a, .steps .dis { position: relative; }   /* keep the sr-only step labels inside the scrolling step bar */
.card h2 svg { width: 24px; height: 24px; color: var(--brand-primary); vertical-align: -3px; }
.card h2:has(> svg) { display: flex; align-items: center; gap: 8px; }

/* Two-step sign-in */
.auth.mfa { max-width: 560px; }
.mfa-steps { padding-left: 1.3em; display: grid; gap: 14px; margin: 8px 0 16px; text-align: left; }
.mfa-qr { margin: 10px 0 6px; }
.mfa-qr img { display: block; width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); }
.mfa-secret { display: inline-block; margin-top: 6px; font-size: 1.05rem; letter-spacing: .06em; word-break: break-all; user-select: all; }
.code-input { font-size: 1.6rem; letter-spacing: .35em; text-align: center; max-width: 12ch; font-variant-numeric: tabular-nums; }
#addfactor { margin-top: 10px; }

/* Month / day / optional-year picker */
.mdy { border: 0; padding: 0; margin: 0; min-width: 0; }
.mdy legend { font-weight: 600; color: var(--brand-ink); font-size: .95rem; padding: 0; margin-bottom: 6px; }
.mdy-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.mdy-row [data-part="m"] { grid-column: 1 / -1; }
.mdy-row select, .mdy-row input { width: 100%; min-width: 0; padding-left: 10px; padding-right: 8px; }

/* ---------- Create your church (hosted signup) ---------- */
.slug-row { display: flex; align-items: stretch; border: 1px solid #cfd6da; border-radius: var(--radius); background: #fff; overflow: hidden; }
.slug-row:focus-within { outline: 3px solid var(--brand-primary-tint); border-color: var(--brand-primary); }
.slug-row input { border: 0; border-radius: 0; min-width: 0; flex: 1; padding-left: 4px; padding-right: 4px; }
.slug-row input:focus { outline: none; }
.slug-pre, .slug-post { display: flex; align-items: center; padding: 0 10px; color: var(--brand-muted); background: var(--brand-surface-2); font-size: .95rem; white-space: nowrap; }
.slug-pre { padding-right: 6px; }
.slug-state { min-height: 1.6em; font-size: .92rem; margin-top: 4px; }
.slug-state.ok { color: var(--ok); }
.slug-state.err { color: #8a1c13; }
.check-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; min-height: 48px; cursor: pointer; }
.check-row input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--brand-primary); }
.auth-foot .btn-block + .linklike { display: block; margin: 6px auto 0; }

/* ---------- Setup wizard ---------- */
.setup .steps .num { font-size: .95rem; }
.setup-foot { margin-top: 22px; align-items: center; }
.setup-go { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 560px) { .setup-go { width: 100%; } .setup-go .btn, .setup-foot > .btn { flex: 1 1 100%; } }
.setup-nudge { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.setup-nudge .notice-msg { margin: 0; flex: 1 1 320px; }
.setup-done { text-align: center; }
.setup-done .stack { max-width: 360px; margin: 20px auto 0; }
.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 10px; }
@media (max-width: 1000px) { .brand-grid { grid-template-columns: 1fr; } }
.brand-swatches { grid-template-columns: 1fr; }
.hexv { font-size: .78rem; color: var(--brand-muted); }
.ok-txt { color: var(--ok); }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type=range] { flex: 1; min-height: 48px; accent-color: var(--brand-primary); }
.range-row output { min-width: 3ch; font-weight: 700; }
.import-notes { margin: 6px 0 0; padding-left: 1.2em; font-size: .92rem; }
textarea.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; min-height: 90px; }

/* Brand preview: a miniature gallery styled only by the --brand-* variables set on .bp */
.bp { position: sticky; top: 90px; border: 1px solid var(--brand-line); border-radius: var(--radius-xl); overflow: hidden; background: var(--brand-surface, #fff); box-shadow: var(--shadow-1); font-family: var(--font-body); color: var(--brand-text); font-size: .9rem; }
.bp .btn { min-height: 40px; font-size: .9rem; pointer-events: none; }
.bp-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--brand-primary-sticky); color: #fff; }
.bp-bar img { height: 26px; width: auto; max-width: 55%; object-fit: contain; }
.bp-bar b { font: 600 1rem/1.2 var(--font-display); }
.bp-sub { font: 300 .9rem/1 var(--font-display); border-left: 1px solid rgba(255,255,255,.4); padding-left: 10px; }
.bp-hero { background: var(--brand-hero, #0a0a0a); color: #fff; padding: 22px 16px; text-align: center; }
.bp-count { font: 500 .7rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-accent-on-dark); margin-bottom: 10px; }
.bp-h { font-size: 1.6rem; line-height: 1.15; color: #fff; margin-bottom: 14px; }
.bp-body { padding: 16px; display: grid; gap: 12px; justify-items: start; }
.bp-title { color: var(--brand-primary); font-weight: 700; font-size: 1.1rem; justify-self: center; }
.bp-card { display: flex; width: 100%; border: 1px solid var(--brand-line); border-top: 5px solid var(--brand-primary); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.bp-ph { width: 76px; flex: none; background: var(--brand-primary-tint); }
.bp-cb { display: grid; gap: 4px; padding: 10px 12px; justify-items: start; }
.bp-cb b { color: var(--brand-ink); }
.bp-cb small { color: var(--brand-muted); }
.bp-body p { margin: 0; }
.bp-link { color: var(--brand-primary-deep); text-decoration: underline; }
.bp-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 16px; background: var(--brand-footer); color: var(--brand-footer-text); }
.bp-foot b { color: #fff; }
.bp-link-dark { color: var(--brand-primary-bright); text-decoration: underline; }
@media (max-width: 1000px) { .bp { position: static; } }

/* Church details: image pickers */
.imgfields { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.imgfield { padding: 12px; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); margin: 0; }
.imgfield .lbl { font-weight: 600; color: var(--brand-ink); font-size: .95rem; }
.imgbox { display: grid; gap: 8px; }
.imgprev { width: 100%; height: 96px; object-fit: contain; background: repeating-conic-gradient(#f1f1f1 0 25%, #fff 0 50%) 0 0 / 16px 16px; border-radius: var(--radius); }
.imgprev.sq { width: 96px; }
.imgprev.none { display: grid; place-items: center; color: var(--brand-muted); font-size: .85rem; background: var(--brand-surface-2); }
.imgact { display: flex; gap: 8px; flex-wrap: wrap; }
.imgact label.btn { cursor: pointer; }
.imgact label.btn:focus-within { outline: 3px solid var(--brand-primary-bright); outline-offset: 2px; }
.up-note { display: flex; gap: 6px; align-items: center; }

/* Share */
.qr { width: 220px; max-width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); padding: 8px; margin-bottom: 18px; }
.qr svg { width: 100%; height: 100%; }

/* ---------- Billing ---------- */
.bill-facts { margin-bottom: 14px; }
.meter-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.meter { flex: 1 1 200px; height: 12px; border-radius: 999px; background: var(--brand-surface-2); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--brand-primary); border-radius: inherit; }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.plan { display: grid; gap: 8px; align-content: start; padding: 18px; border: 2px solid var(--brand-line); border-radius: var(--radius-xl); }
.plan.cur { border-color: var(--brand-primary); background: #F3FAFC; }
.plan h3 { margin: 0; }
.plan-price { font: 700 1.4rem/1.2 var(--font-display); color: var(--brand-ink); }
.plan p { margin: 0; }
.plan-feat { margin: 0; padding-left: 1.2em; font-size: .95rem; }
.plan .btn, .plan .chip { justify-self: start; }

/* ---------- Settings: web address and usage ---------- */
.doms li { flex-wrap: wrap; }
.doms .chip { margin-left: 6px; }
.dns-t, .usage-t { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .92rem; }
.dns-t th, .dns-t td, .usage-t th, .usage-t td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--brand-line); vertical-align: middle; }
.dns-t th, .usage-t thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-muted); }
.usage-t tfoot th, .usage-t tfoot td { font-weight: 700; border-bottom: 0; }
.dns-v { overflow-wrap: anywhere; }
.btn.sm { min-height: 36px; padding: 4px 8px; }
.btn.sm svg { width: 16px; height: 16px; }
.usage-bal { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) {
  .dns-t thead { display: none; }
  .dns-t tr { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--brand-line); }
  .dns-t td { border: 0; padding: 2px 0; }
}

/* ---------- Self-hosting access (#/self-host) ---------- */
.license { max-height: 420px; overflow: auto; padding: 16px 20px; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); background: var(--brand-surface-2); line-height: 1.55; }
.license:focus-visible { outline: 3px solid var(--brand-primary-bright); outline-offset: 2px; }
.license h3 { font-size: 1.15rem; margin: 1em 0 .4em; } .license h4 { font-size: 1.05rem; margin: 1em 0 .3em; } .license h5 { font-size: 1rem; margin: .9em 0 .3em; }
.license > :first-child { margin-top: 0; }
.license ol, .license ul { padding-left: 1.4em; margin: 0 0 1em; }
.license li { margin-bottom: .35em; }
.sha { font-size: .78rem; color: var(--brand-muted); overflow-wrap: anywhere; margin: 6px 0 14px; }
.sha code { font-size: .78rem; }
.lic-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; font-size: 1.05rem; }
.sh-steps { padding-left: 1.3em; margin: 0 0 14px; }
.sh-steps li { margin-bottom: 8px; }
.dl-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
@media (max-width: 560px) { .dl-row .btn { flex: 1 1 100%; } }
.admins li.invite { background: var(--brand-surface-2); flex-wrap: wrap; }
.inv-note { display: block; font-size: .82rem; margin-top: 2px; }

/* Footer with "Send feedback" (js/feedback.js) */
.adm-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; max-width: var(--maxw); margin: 0 auto; padding: 8px var(--gutter) 28px; color: var(--brand-muted); font-size: .92rem; border-top: 1px solid var(--brand-line); }