/*
 * ACTS Members Portal — THE design system (Round 196, "modern app look").
 * One token set + one component set for every Portal page. Loaded LAST in mp_head() (and for the sign-in screens), so it extends and
 * replaces the older colour/component rules of style.css / portal.css / portal-app.css instead of running beside them.
 * The global compact mobile rules (mobile-compact.css) stay: this file only updates their tokens (--m-*) for the Portal.
 * Phone screens (<=720px) get the app shell: Home/large-title/inner headers + bottom navigation + ＋ sheet. Desktop keeps a top bar.
 * Dark mode: every colour below is a variable, so a dark theme is a token swap (see [data-theme="dark"]; launches in phase 2).
 * ACTS System (admin) uses the same colour/font tokens through admin.css (see "ACTS System alignment" there), without any of this shell.
 */

/* ============================================================ 1. TOKENS */
:root {
  --acts-navy: #13233A;       /* primary dark: headers, primary buttons, active nav, hero cards */
  --acts-ink: #1B2A41;        /* body text */
  --acts-muted: #5A6272;      /* secondary text (5.3:1 on cream) */
  --acts-cream: #F7F3EA;      /* page background */
  --acts-card: #FFFFFF;
  --acts-divider: #EFE9DD;
  --acts-border: #E3DCCD;
  --acts-gold: #C9993F;       /* FILLS ONLY: centre ＋, active indicator, avatar ring. Never small text. */
  --acts-gold-text: #8A6216;  /* gold as text (≥4.5:1 on white and on --acts-gold-soft) */
  --acts-gold-soft: #F3EAD6;
  --acts-blue: #2C4A73;       --acts-blue-soft: #E3EBF4;
  --acts-red: #C2412D;        --acts-red-soft: #F6E7E1;   --acts-red-text: #A3452E;
  --acts-green: #1F6B45;      --acts-green-soft: #E2F1E8;
  --acts-purple: #5B4B9A;     --acts-purple-soft: #F1EEF8;
  --acts-grey-soft: #ECE8DF;
  --acts-nav-line: #ECE5D7;
  --acts-on-navy: #FFFFFF;
  --acts-scrim: rgba(19, 35, 58, .5);
  --acts-shadow: 0 1px 2px rgba(19, 35, 58, .06), 0 4px 16px rgba(19, 35, 58, .05);
  --acts-shadow-up: 0 -8px 32px rgba(19, 35, 58, .18);
  --acts-radius: 16px; --acts-radius-tile: 12px; --acts-pad: 16px; --acts-gap: 16px;
  --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-display: 'Fraunces', Georgia, serif;
  --ui-nav-h: 76px;
}
/* Phase 2 (prepared now, switched on later by Account → Appearance): the same names, dark values. */
:root[data-theme="dark"] {
  --acts-navy: #0B1424; --acts-ink: #EEF1F5; --acts-muted: #A9B3C1; --acts-cream: #0E1726; --acts-card: #172338;
  --acts-divider: #243349; --acts-border: #2C3C55; --acts-gold: #D9A94C; --acts-gold-text: #E3B861; --acts-gold-soft: #2F2A1C;
  --acts-blue: #9DB8DE; --acts-blue-soft: #1D2D47; --acts-red: #E0705C; --acts-red-soft: #3A2320; --acts-red-text: #F0A090;
  --acts-green: #6FC196; --acts-green-soft: #1B3328; --acts-purple: #B7A9F0; --acts-purple-soft: #2A2547; --acts-grey-soft: #25324A;
  --acts-nav-line: #243349; --acts-on-navy: #FFFFFF; --acts-scrim: rgba(0, 0, 0, .6);
  --acts-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
}

/* The older token names the Portal pages still use now resolve to the new palette (Portal pages only; the public website is untouched). */
body.mp-body, body.mp-auth-body {
  --navy-950: var(--acts-navy); --navy-900: var(--acts-navy); --navy-800: #233A57; --navy-700: var(--acts-blue); --navy-600: #3F6291;
  --fog-50: var(--acts-cream); --steel-100: var(--acts-blue-soft); --steel-300: #B9C6D6; --steel-500: #6F7F95;
  --line: var(--acts-border); --ink: var(--acts-ink); --ink-soft: var(--acts-muted); --white: var(--acts-card);
  --gold-600: var(--acts-gold-text); --gold-500: var(--acts-gold); --gold-400: #D8AC5E; --gold-100: var(--acts-gold-soft);
  --danger: var(--acts-red-text); --success: var(--acts-green);
  --radius-md: 16px; --shadow-sm: var(--acts-shadow); --shadow-md: 0 8px 28px rgba(19, 35, 58, .12);
  --pa-bg: var(--acts-cream); --pa-card: var(--acts-card); --pa-line: var(--acts-divider); --pa-ink-soft: var(--acts-muted);
  --pa-gold-ink: var(--acts-gold-text); --pa-red: var(--acts-red); --pa-blue: var(--acts-blue); --pa-green: var(--acts-green);
  /* the shared compact tokens (mobile-compact.css), updated for the new look */
  --m-page-pad: 16px; --m-section-gap: 16px; --m-card-pad: 14px; --m-radius: 16px; --m-radius-sm: 12px; --m-radius-in: 12px;
  --m-border: 0; --m-input-h: 44px; --m-btn-h: 36px; --m-badge: .6875rem; --m-bottomnav-h: 76px;
  --m-h1: 1.625rem; --m-h2: 1.125rem; --m-body: .875rem; --m-meta: .78rem;
  font-family: var(--ui-font); color: var(--acts-ink); background: var(--acts-cream); font-size: .875rem; line-height: 1.5;
}
[hidden] { display: none !important; }

/* ============================================================ 2. TYPE */
body.mp-body :where(h1, h2, .mp-card-head h2, .pd-greet h1) { font-family: var(--ui-display); color: var(--acts-navy); font-weight: 600; letter-spacing: -.005em; }
body.mp-body :where(h1) { font-size: 1.625rem; line-height: 1.2; }
body.mp-body :where(h2) { font-size: 1.125rem; line-height: 1.3; }
body.mp-body :where(h3) { font-size: .9063rem; font-family: var(--ui-font); font-weight: 600; color: var(--acts-navy); }
body.mp-body :is(.mp-meta, .mp-row-sub, .pd-sub, .cf-post-meta) { font-size: .78rem; color: var(--acts-muted); }
body.mp-body .ui-caps, .ui-caps { font: 700 .72rem/1.2 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; color: var(--acts-muted); }
.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================ 3. COMPONENTS */
/* ---- icon tiles (40×40, radius 12), tinted by tone ---- */
.ui-tile { flex: none; width: 40px; height: 40px; border-radius: var(--acts-radius-tile); display: inline-flex; align-items: center; justify-content: center; background: var(--acts-blue-soft); color: var(--acts-blue); }
.ui-tone-navy { background: var(--acts-blue-soft); color: var(--acts-navy); }
.ui-tone-gold { background: var(--acts-gold-soft); color: var(--acts-gold-text); }
.ui-tone-blue { background: var(--acts-blue-soft); color: var(--acts-blue); }
.ui-tone-red { background: var(--acts-red-soft); color: var(--acts-red-text); }
.ui-tone-green { background: var(--acts-green-soft); color: var(--acts-green); }
.ui-tone-purple { background: var(--acts-purple-soft); color: var(--acts-purple); }
.ui-tone-grey { background: var(--acts-grey-soft); color: var(--acts-muted); }

/* ---- cards: radius 16, white, no border, soft shadow ---- */
.ui-card, body.mp-body .mp-card { background: var(--acts-card); border: 0; border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); overflow: hidden; }
.ui-card-pad { padding: 14px; }
.ui-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 8px; }
.ui-sec-head h2 { margin: 0; font-size: 1.125rem; }
.ui-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .8125rem; font-weight: 700; color: var(--acts-blue); }
.ui-sec-head .ui-link { min-height: 32px; }
.ui-stack { display: flex; flex-direction: column; gap: var(--acts-gap); }
.ui-screen { max-width: 720px; margin: 0 auto; width: 100%; }
:where(body.mp-body) section { padding: 0; }   /* the public site gives every <section> 88px of padding; zero-specificity so components can set their own */

/* ---- list rows (grouped list cards): tile, label, right detail/count, chevron; hairline divider inset 14px ---- */
.ui-list { background: var(--acts-card); border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); overflow: hidden; }
.ui-lrow { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 14px; color: var(--acts-ink); -webkit-tap-highlight-color: transparent; }
.ui-lrow + .ui-lrow::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: var(--acts-divider); }
.ui-lrow:active, .ui-lrow:hover { background: var(--acts-cream); }
.ui-lrow-l { flex: 1; min-width: 0; font-size: .9063rem; font-weight: 600; }
.ui-lrow-d { flex: none; max-width: 42%; font-size: .78rem; color: var(--acts-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-lrow-go { flex: none; display: inline-flex; color: var(--acts-muted); }
.ui-lrow.is-danger .ui-lrow-l { color: var(--acts-red-text); }
.ui-lrow.is-danger .ui-tile { background: var(--acts-red-soft); color: var(--acts-red-text); }
.ui-group-h { margin: 18px 2px 8px; }

/* ---- item card: icon tile + title + meta + status badge + at most two actions ---- */
.ui-item { display: flex; gap: 12px; padding: 14px; background: var(--acts-card); border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); }
.ui-item-main { flex: 1; min-width: 0; }
.ui-item-t { margin: 0; font-size: .9063rem; font-weight: 600; line-height: 1.35; color: var(--acts-ink); }
.ui-item-m { margin: 2px 0 0; font-size: .78rem; color: var(--acts-muted); }
.ui-item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---- status badges (never colour alone: always a word) ---- */
.ui-badge, body.mp-body .mp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .6875rem; font-weight: 700; line-height: 1.3; letter-spacing: .01em; background: var(--acts-blue-soft); color: var(--acts-blue); white-space: nowrap; }
.ui-badge--green, body.mp-body .mp-badge--approved, body.mp-body .mp-badge--prayed_for, body.mp-body .mp-badge--answered { background: var(--acts-green-soft); color: var(--acts-green); }
.ui-badge--amber, body.mp-body .mp-badge--pending, body.mp-body .mp-badge--wait, body.mp-body .mp-badge--in_progress { background: var(--acts-gold-soft); color: var(--acts-gold-text); }
.ui-badge--red, body.mp-body .mp-badge--rejected { background: var(--acts-red-soft); color: var(--acts-red-text); }
.ui-badge--grey, body.mp-body .mp-badge--withdrawn, body.mp-body .mp-badge--closed { background: var(--acts-grey-soft); color: var(--acts-muted); }
.ui-badge--purple { background: var(--acts-purple-soft); color: var(--acts-purple); }
.ui-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: .6875rem; font-weight: 700; background: var(--acts-blue-soft); color: var(--acts-blue); }
.ui-pill--red { background: var(--acts-red); color: #fff; }

/* ---- buttons: pills. Main 44px, small 36px, hit area ≥44px ---- */
body.mp-body .btn, body.mp-auth-body .btn, .ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 700 .875rem/1 var(--ui-font); letter-spacing: 0; text-align: center; cursor: pointer; transition: background .15s ease, transform .1s ease, box-shadow .15s ease; box-shadow: none; transform: none; text-decoration: none;
}
body.mp-body .btn-sm, body.mp-auth-body .btn-sm, .ui-btn--sm { min-height: 36px; padding: 0 16px; font-size: .8125rem; }
body.mp-body .btn::after, body.mp-body .btn-sm::after, .ui-btn--sm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }   /* a 36px button keeps a 44px hit area */
body.mp-body .btn-primary, body.mp-auth-body .btn-primary, .ui-btn--primary { background: var(--acts-navy); color: var(--acts-on-navy); border-color: var(--acts-navy); }
body.mp-body .btn-primary:hover, body.mp-auth-body .btn-primary:hover, .ui-btn--primary:hover { background: #1C3453; transform: none; box-shadow: none; color: var(--acts-on-navy); }
body.mp-body .btn-secondary, body.mp-body .btn-ghost, body.mp-auth-body .btn-ghost, .ui-btn--secondary { background: var(--acts-card); color: var(--acts-navy); border: 1px solid var(--acts-border); }
body.mp-body .btn-secondary:hover, body.mp-body .btn-ghost:hover, body.mp-auth-body .btn-ghost:hover, .ui-btn--secondary:hover { background: var(--acts-cream); color: var(--acts-navy); transform: none; box-shadow: none; }
.ui-btn--gold { background: var(--acts-gold); color: var(--acts-navy); border-color: var(--acts-gold); }   /* full-width action on a card ("I've read this"): navy text on gold = 6:1 */
body.mp-body .btn:active, .ui-btn:active { transform: scale(.98); }
body.mp-body .btn[disabled], body.mp-body .btn.is-busy, .ui-btn[disabled], .ui-btn.is-busy { opacity: .6; pointer-events: none; }
body.mp-body .btn.is-busy::before, .ui-btn.is-busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ui-spin .7s linear infinite; }
body.mp-body .btn-block, .ui-btn--block { width: 100%; }
.ui-iconbtn { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--acts-navy); cursor: pointer; padding: 0; }
.ui-iconbtn:active { background: rgba(19, 35, 58, .08); }
.ui-iconbtn.is-ghost { visibility: hidden; }
.ui-dot { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--acts-red); color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--acts-cream); box-sizing: content-box; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--acts-blue); outline-offset: 2px; }

/* ---- chips: 34px pills, active navy ---- */
.ui-chips, body.mp-body :is(.cf-chips, .ph-chips) { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin: 0; -webkit-overflow-scrolling: touch; }
.ui-chips::-webkit-scrollbar { display: none; }
.ui-chip, body.mp-body :is(.cf-chip, .ph-chip) { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--acts-card); border: 1px solid var(--acts-border); color: var(--acts-ink); font: 600 .8125rem/1 var(--ui-font); white-space: nowrap; position: relative; }
.ui-chip::after, body.mp-body :is(.cf-chip, .ph-chip)::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.ui-chip.is-on, body.mp-body :is(.cf-chip, .ph-chip).is-on { background: var(--acts-navy); border-color: var(--acts-navy); color: #fff; }
body.mp-body .ph-chip.is-on b { color: #fff; }

/* ---- forms: 12px labels, 44px inputs with a 16px font (no zoom on phones), sticky action bar ---- */
body.mp-body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea), body.mp-auth-body :is(input:not([type=checkbox]):not([type=radio]), select, textarea), .ui-input {
  font: 400 16px/1.4 var(--ui-font); color: var(--acts-ink); background: var(--acts-card); border: 1px solid var(--acts-border); border-radius: 12px; min-height: 44px; padding: 10px 14px; width: 100%; box-sizing: border-box;
}
body.mp-body textarea { min-height: 96px; }
body.mp-body :is(input, select, textarea):focus, body.mp-auth-body :is(input, select, textarea):focus { border-color: var(--acts-blue); outline: 2px solid var(--acts-blue-soft); outline-offset: 0; box-shadow: none; }
body.mp-body label, body.mp-auth-body label, .ui-label { font-size: .75rem; font-weight: 600; color: var(--acts-muted); }
body.mp-body .field > label, body.mp-auth-body .field > label { display: block; margin-bottom: 4px; }
body.mp-body :is(input[type=checkbox], input[type=radio]) { width: 22px; height: 22px; accent-color: var(--acts-navy); }
.ui-actionbar, body.mp-has-actionbar .mp-form-actions { position: sticky; bottom: 0; z-index: 30; display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); margin: 0 -16px; background: var(--acts-card); border-top: 1px solid var(--acts-divider); }
.ui-actionbar .btn, body.mp-has-actionbar .mp-form-actions .btn { flex: 1; }

/* ---- empty state (32px line icon, one sentence, one action) + skeleton + toast ---- */
.ui-empty, body.mp-body :is(.cf-empty) { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; text-align: center; color: var(--acts-muted); }
.ui-empty .mp-icon, body.mp-body .cf-empty .mp-icon { width: 32px; height: 32px; color: var(--acts-muted); }
.ui-empty p, body.mp-body .cf-empty p { margin: 0; font-size: .875rem; color: var(--acts-muted); }
.ui-empty-line { margin: 0; padding: 14px; color: var(--acts-muted); font-size: .875rem; }
body.mp-body .mp-empty { color: var(--acts-muted); font-size: .875rem; }
.ui-caughtup { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px 0 0; padding: 18px 0 4px; font-weight: 600; font-size: .875rem; color: var(--acts-muted); }
.ui-caughtup .mp-icon { color: var(--acts-green); }
.ui-caughtup small { font-weight: 400; font-size: .78rem; }
.ui-skel { display: block; border-radius: 12px; background: linear-gradient(90deg, var(--acts-divider) 0%, #F6F1E6 50%, var(--acts-divider) 100%); background-size: 200% 100%; animation: ui-shimmer 1.2s ease-in-out infinite; }
.ui-skel--line { height: 12px; border-radius: 6px; } .ui-skel--card { height: 96px; border-radius: var(--acts-radius); }
.ui-toast { position: fixed; left: 50%; bottom: calc(var(--ui-nav-h) + 20px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 90; max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 999px; background: var(--acts-navy); color: #fff; font-size: .875rem; font-weight: 600; box-shadow: var(--acts-shadow-up); opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.ui-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
body.mp-body .mp-flash { border-radius: var(--acts-radius); border: 0; box-shadow: var(--acts-shadow); padding: 12px 16px; font-weight: 600; }
body.mp-body .mp-flash--success { background: var(--acts-green-soft); color: var(--acts-green); }
body.mp-body .mp-flash--error { background: var(--acts-red-soft); color: var(--acts-red-text); }

/* ---- bottom sheet (quick actions, bookings, confirmations) ---- */
.ui-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.ui-sheet-scrim { position: absolute; inset: 0; background: var(--acts-scrim); animation: ui-fade .2s ease; }
.ui-sheet-panel { position: relative; width: 100%; max-width: 560px; max-height: 86vh; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--acts-card); border-radius: 24px 24px 0 0; box-shadow: var(--acts-shadow-up); padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); animation: ui-rise .26s cubic-bezier(.2, .8, .2, 1); outline: none; }
.ui-sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--acts-border); margin: 4px auto 6px; }
.ui-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.ui-sheet-head h2 { margin: 0; font-size: 1.125rem; }
.ui-sheet-body { display: flex; flex-direction: column; }
.ui-qa-i { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 4px; color: var(--acts-ink); border-top: 1px solid var(--acts-divider); }
.ui-qa-i:first-child { border-top: 0; }
.ui-qa-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ui-qa-t b { font-size: .9375rem; font-weight: 600; }
.ui-qa-t span { font-size: .78rem; color: var(--acts-muted); }
.ui-qa-i > .mp-icon { color: var(--acts-muted); }
@media (min-width: 721px) { .ui-sheet { align-items: center; } .ui-sheet-panel { border-radius: 24px; max-width: 440px; padding-bottom: 20px; } }

@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer { to { background-position: -200% 0; } }
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-rise { from { transform: translateY(40px); opacity: .4; } }

/* ============================================================ 4. APP SHELL */
/* ---- desktop: the top bar keeps the brand, adds the four tabs, the bell and the profile menu ---- */
body.mp-ui .mp-header { background: var(--acts-card); border-bottom: 1px solid var(--acts-divider); backdrop-filter: none; }
.mp-topnav { display: flex; align-items: center; justify-content: center; gap: 4px; }
.mp-topnav a, .mp-topnav button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 600 .875rem/1 var(--ui-font); color: var(--acts-muted); background: none; border: 0; cursor: pointer; }
.mp-topnav a:hover, .mp-topnav button:hover { background: var(--acts-cream); color: var(--acts-navy); }
.mp-topnav a.is-active { background: var(--acts-navy); color: #fff; }
.mp-topnav .mp-topplus { background: var(--acts-gold); color: var(--acts-navy); margin-left: 8px; }
.mp-topnav .mp-topplus:hover { background: #D8AC5E; color: var(--acts-navy); }
body.mp-ui .mp-menu { border: 0; border-radius: var(--acts-radius); box-shadow: var(--acts-shadow-up); }
body.mp-ui .mp-user-btn .mp-avatar { box-shadow: 0 0 0 2px var(--acts-card), 0 0 0 4px var(--acts-gold); border: 0; }
.ui-head, .ui-nav { display: none; }            /* phone-only pieces */
body.mp-ui .mp-main { padding-top: 24px; }
body.mp-ui .mp-footer { color: var(--acts-muted); }

@media (max-width: 720px) {
  :root { --ui-nav-h: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.mp-ui:not(.mp-ui-guest) .mp-header { display: none; }
  .mp-topnav { display: none; }
  body.mp-ui .mp-main { padding: 0 var(--acts-pad) calc(var(--ui-nav-h) + 16px); }
  body.mp-ui.mp-has-bottom-nav { padding-bottom: 0; }
  body.mp-ui.mp-has-bottom-nav .mp-footer { display: none; }   /* Visit website / Privacy live under Me → Account on phones */

  /* ---- headers ---- */
  .ui-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) var(--acts-pad) 8px; background: var(--acts-cream); }   /* sits outside <main>, full width */
  .ui-head--home, .ui-head--inner { position: sticky; top: 0; z-index: 50; }
  .ui-head-actions { flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .ui-wordmark { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 1.375rem/1 var(--ui-display); letter-spacing: .04em; color: var(--acts-navy); }
  .ui-wordmark i { width: 7px; height: 7px; border-radius: 50%; background: var(--acts-gold); margin-top: 6px; }
  .ui-avatar-ring { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
  .ui-avatar-ring .mp-avatar { width: 36px; height: 36px; border: 0; box-shadow: 0 0 0 2px var(--acts-cream), 0 0 0 4px var(--acts-gold); }
  .ui-head--large { align-items: flex-end; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
  .ui-head-text { flex: 1; min-width: 0; }
  .ui-title { margin: 0; font: 600 1.75rem/1.15 var(--ui-display); color: var(--acts-navy); }
  .ui-head-sub { margin: 2px 0 0; font-size: .8125rem; color: var(--acts-muted); }
  .ui-head--inner { padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; background: var(--acts-cream); box-shadow: 0 1px 0 var(--acts-divider); }
  .ui-head--inner .ui-back { margin-left: -10px; }
  .ui-head-t { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 8px; font: 600 1.125rem/1.2 var(--ui-display); color: var(--acts-navy); }
  .ui-head-t > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ui-head-ic { display: inline-flex; color: var(--acts-muted); }
  /* the page's own big h1 would repeat the header title: keep it for screen readers, not the eye */
  body.mp-head-inner .mp-main > .mp-page-head:first-child h1, body.mp-head-inner .mp-main > .mp-page-head > div > h1:first-child, body.mp-head-inner .mp-main > .mp-page-head--row h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.mp-head-inner .mp-main > .mp-page-head:first-child { margin-top: 8px; }
  body.mp-head-inner .mp-main { padding-top: 8px; }
  body.mp-head-home .mp-main, body.mp-head-large .mp-main { padding-top: 4px; }
  body.mp-head-none .mp-main { padding-top: 0; }

  /* ---- bottom navigation: Home · Community · ＋ · My Week · Me ---- */
  .ui-nav { display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; height: var(--ui-nav-h); padding: 0 4px env(safe-area-inset-bottom, 0px); background: var(--acts-card); border-top: 1px solid var(--acts-nav-line); }
  body.mp-has-actionbar .ui-nav { display: none; }
  .ui-nav-i { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; color: var(--acts-muted); font: 600 .6875rem/1 var(--ui-font); -webkit-tap-highlight-color: transparent; }
  .ui-nav-i.is-active { color: var(--acts-navy); font-weight: 800; }
  .ui-nav-i.is-active::before { content: ""; position: absolute; top: -1px; left: 50%; width: 30px; height: 3px; margin-left: -15px; border-radius: 0 0 3px 3px; background: var(--acts-gold); }
  .ui-nav-ic { position: relative; display: inline-flex; }
  .ui-nav-ic .mp-icon { width: 24px; height: 24px; }
  .ui-nav-i.is-active .mp-icon { stroke-width: 2.2; }
  .ui-nav-badge { position: absolute; top: -6px; left: 14px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--acts-red); color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; line-height: 17px; text-align: center; box-sizing: border-box; }
  .ui-nav-mid { position: relative; }
  .ui-nav-plus { position: absolute; left: 50%; top: -22px; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; border: 0; background: var(--acts-gold); color: var(--acts-navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(19, 35, 58, .28); -webkit-tap-highlight-color: transparent; transition: transform .15s ease; }
  .ui-nav-plus:active { transform: scale(.94); }
  .ui-nav-plus .mp-icon { stroke-width: 2.4; }
  .ui-nav-plus::after { content: ""; position: absolute; inset: -4px; }
  html.ui-sheet-open .ui-nav-plus { transform: rotate(45deg); }
  .as-fab-root[data-as-ctx="portal"] { display: none !important; }   /* the old floating ⇄ button is gone from the Portal */
}

/* ============================================================ 5. SCREENS */
.ui-desk-head { margin: 0 0 16px; }
.ui-desk-head h1 { margin: 0 0 2px; }
@media (max-width: 720px) { .ui-desk-head { display: none; } }

/* ---------- Home ---------- */
.hm { display: flex; flex-direction: column; gap: var(--acts-gap); }
.hm-greet { margin: 4px 2px 0; }
.hm-greet .ui-caps { margin: 0 0 4px; }
.hm-greet h1 { margin: 0; font-size: 1.75rem; }
.hm-hl { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--acts-pad) * -1); padding: 4px var(--acts-pad) 2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.hm-hl::-webkit-scrollbar { display: none; }
.hm-hl-i { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; scroll-snap-align: start; color: var(--acts-ink); }
.hm-hl-c { position: relative; width: 64px; height: 64px; border-radius: 50%; padding: 3px; border: 2px solid var(--acts-gold); background: var(--acts-cream); }
.hm-hl-in { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--acts-gold-soft); color: var(--acts-gold-text); }
.hm-hl-i.is-plain .hm-hl-c { border-color: var(--acts-border); }
.hm-hl-i.is-plain .hm-hl-in { background: var(--acts-blue-soft); color: var(--acts-blue); }
.hm-hl-i.is-live .hm-hl-c { border-color: var(--acts-red); }
.hm-hl-i.is-live .hm-hl-in { background: var(--acts-red-soft); color: var(--acts-red-text); }
.hm-live-tag { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px; background: var(--acts-red); color: #fff; font-style: normal; font-size: .625rem; font-weight: 800; letter-spacing: .06em; border: 2px solid var(--acts-cream); }
.hm-hl-l { max-width: 72px; font-size: .75rem; font-weight: 600; line-height: 1.2; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui-screen .hm-verse { position: relative; padding: 18px; border-radius: var(--acts-radius); background: var(--acts-navy); color: var(--acts-on-navy); box-shadow: var(--acts-shadow); }
.hm-verse-top { display: flex; align-items: center; justify-content: space-between; }
.hm-verse-cap { margin: 0; font: 700 .72rem/1.2 var(--ui-font) !important; letter-spacing: 1.2px; text-transform: uppercase; color: var(--acts-gold) !important; }   /* gold on navy: 6:1 */
.hm-vsave { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -12px -10px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.hm-vsave span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hm-vsave.is-mine { color: var(--acts-gold); }
.hm-verse-text { margin: 12px 0 8px; font: 500 1.3rem/1.4 var(--ui-display); color: #fff; }
.hm-verse-ref { margin: 0 0 14px; font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .82); }
.hm-verse-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-vlike-f { margin: 0; display: inline-flex; }
.hm-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .13); color: #fff; border: 1px solid rgba(255, 255, 255, .22); font: 600 .8125rem/1 var(--ui-font); cursor: pointer; position: relative; }
.hm-pill::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.hm-pill b { font-weight: 700; }
.hm-pill.is-liked { background: #fff; color: var(--acts-red-text); border-color: #fff; }
.hm-pill.is-liked .mp-icon { fill: currentColor; }
.hm-pill:active { transform: scale(.97); }
.hm-verse-ctx { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; min-height: 44px; font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .88); text-decoration: underline; text-underline-offset: 3px; }
.hm-verse .hm-vsave { margin: 0; }

.hm-arow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hm-arow-t b { font-size: .9063rem; font-weight: 600; line-height: 1.3; }
.hm-arow-t span { font-size: .78rem; color: var(--acts-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-arow, .hm-wmain { min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
.hm-more .ui-lrow-l { font-size: .8125rem; color: var(--acts-blue); }
.hm-wrow { position: relative; }
.hm-wrow + .hm-wrow::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: var(--acts-divider); }
.hm-wrow .ui-lrow + .ui-lrow::before { display: none; }
.hm-wacts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px 66px; }
.hm-wacts form { margin: 0; }
.hm-week-empty { display: flex; align-items: center; gap: 8px; }
.hm-week-empty .mp-icon { flex: none; color: var(--acts-muted); }
.wk-live { background: var(--acts-red); color: #fff; }
.wk-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: ui-pulse 1.4s ease-in-out infinite; }

/* ---------- My Week ---------- */
.wk { display: flex; flex-direction: column; gap: var(--acts-gap); }
.wk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wk-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--acts-grey-soft); }
.wk-seg a { min-height: 34px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; font: 600 .8125rem/1 var(--ui-font); color: var(--acts-muted); position: relative; }
.wk-seg a::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.wk-seg a.is-on { background: var(--acts-card); color: var(--acts-navy); box-shadow: 0 1px 2px rgba(19, 35, 58, .1); }
.wk-cal { gap: 6px; }
@media (max-width: 720px) { .wk-cal { display: none; } }
.wk-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; min-height: 64px; border-radius: 14px; background: var(--acts-card); color: var(--acts-ink); box-shadow: var(--acts-shadow); }
.wk-day .wk-dow { font-size: .6875rem; font-weight: 600; color: var(--acts-muted); text-transform: uppercase; letter-spacing: .04em; }
.wk-day b { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.wk-day.is-today { background: var(--acts-navy); color: #fff; }
.wk-day.is-today .wk-dow { color: rgba(255, 255, 255, .8); }
.wk-day.is-on:not(.is-today) { outline: 2px solid var(--acts-navy); outline-offset: -2px; }
.wk-dots { display: flex; gap: 3px; height: 6px; align-items: center; }
.wk-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--acts-gold); }
.wk-dots i.is-blue { background: var(--acts-blue); } .wk-dots i.is-red { background: var(--acts-red); } .wk-dots i.is-purple { background: var(--acts-purple); }
.wk-day.is-today .wk-dots i.is-blue { background: #9DB8DE; } .wk-day.is-today .wk-dots i.is-purple { background: #B7A9F0; } .wk-day.is-today .wk-dots i.is-red { background: #F0A090; }
.wk-timeline { display: flex; flex-direction: column; gap: 20px; }
.wk-group { scroll-margin-top: 72px; }
.wk-gh { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 8px; font-size: 1.125rem; }
.wk-gh small { font: 400 .8125rem var(--ui-font); color: var(--acts-muted); }
.wk-none { margin: 0 2px; font-size: .8125rem; color: var(--acts-muted); }
.wk-item { display: flex; gap: 10px; align-items: flex-start; }
.wk-item + .wk-item { margin-top: 10px; }
.wk-time { flex: none; width: 46px; padding-top: 14px; text-align: right; display: flex; flex-direction: column; line-height: 1.15; }
.wk-time b { font-size: .875rem; font-weight: 700; color: var(--acts-ink); }
.wk-time span { font-size: .6875rem; font-weight: 600; color: var(--acts-muted); }
.wk-card { position: relative; flex: 1; min-width: 0; background: var(--acts-card); border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); overflow: hidden; }
.wk-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--acts-gold); }
.wk-tone-blue::before { background: var(--acts-blue); } .wk-tone-purple::before { background: var(--acts-purple); } .wk-tone-red::before { background: var(--acts-red); } .wk-tone-green::before { background: var(--acts-green); }
.wk-card--dashed { background: transparent; box-shadow: none; border: 1.5px dashed var(--acts-border); }
.wk-card--dashed::before { display: none; }
.wk-main { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 12px 18px; color: var(--acts-ink); }
.wk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.wk-title { font-size: .9063rem; font-weight: 600; line-height: 1.35; }
.wk-sub { font-size: .78rem; color: var(--acts-muted); }
.wk-text .ui-badge { margin-top: 4px; }
.wk-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px 70px; }
.wk-actions form, .wk-act { margin: 0; }

/* ---------- Me ---------- */
.me { display: flex; flex-direction: column; }
body.mp-body .ui-screen .me-hero { margin: 0 calc(var(--acts-pad) * -1) 4px; padding: calc(8px + env(safe-area-inset-top, 0px)) var(--acts-pad) 18px; background: var(--acts-navy); color: #fff; border-radius: 0 0 24px 24px; }
.me-hero .ui-iconbtn { color: #fff; }
.me-hero .ui-iconbtn:active { background: rgba(255, 255, 255, .14); }
.me-hero-top { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.me-kebab { position: relative; } .me-kebab > summary { list-style: none; } .me-kebab > summary::-webkit-details-marker { display: none; }
.me-kebab-menu { position: absolute; right: 0; top: 46px; z-index: 40; min-width: 220px; padding: 6px; border-radius: 14px; background: var(--acts-card); box-shadow: var(--acts-shadow-up); }
.me-kebab-menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--acts-ink); font-size: .875rem; font-weight: 600; }
.me-kebab-menu a:hover { background: var(--acts-cream); }
.me-kebab-menu a.is-danger { color: var(--acts-red-text); }
.me-id { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 0 0 14px; }
.me-photo { display: inline-flex; border-radius: 50%; padding: 3px; background: var(--acts-gold); }
.me-photo .mp-avatar { width: 76px; height: 76px; border: 3px solid var(--acts-navy); box-shadow: none; font-size: 1.5rem; }
body.mp-body .me-hero .me-name { margin: 10px 0 0; color: #fff; font-size: 1.5rem; }
.me-since { margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .8); }
.me-status { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: var(--acts-green-soft); color: var(--acts-green); font-size: .6875rem; font-weight: 700; }
.me-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.me-stats a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; border-radius: 14px; background: rgba(255, 255, 255, .1); color: #fff; }
.me-stats b { font: 600 1.375rem/1 var(--ui-display); }
.me-stats span { font-size: .75rem; color: rgba(255, 255, 255, .85); }
.me .ui-group-h { margin: 20px 2px 8px; }
.me .ui-list + .ui-group-h { margin-top: 20px; }
.me .ui-list .ui-lrow { width: 100%; background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.me-foot { margin: 20px 0 0; text-align: center; font-size: .75rem; color: var(--acts-muted); }
@media (min-width: 721px) {
  body.mp-body .ui-screen .me-hero { margin: 0 0 8px; border-radius: 24px; padding-top: 12px; }
}

/* ---------- Community: search, post box, posts ---------- */
.cf-search { margin: 4px 0 8px; } .cf-search input { border-radius: 999px; }
body.mp-body .cf-compose-box { padding: 12px 14px; }
body.mp-body .cf-compose { padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
body.mp-body .cf-compose-sum { display: flex; align-items: center; gap: 12px; min-height: 44px; list-style: none; cursor: pointer; color: var(--acts-muted); font-size: .9375rem; }
body.mp-body .cf-compose-sum::-webkit-details-marker { display: none; }
body.mp-body .cf-compose-sum .mp-avatar { width: 36px; height: 36px; }
body.mp-body .cf-compose[open] .cf-compose-sum { margin-bottom: 10px; color: var(--acts-ink); font-weight: 600; }
.cf-compose-quick { display: flex; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--acts-divider); }
.cf-compose[open] ~ .cf-compose-quick { display: none; }
body.mp-body .cf .cf-card, body.mp-body .cf-feed .cf-card, body.mp-body article.cf-card { background: var(--acts-card); border: 0; border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); padding: 14px; overflow: hidden; }
body.mp-body .cf-post { display: block; }
body.mp-body .cf-imp-label, body.mp-body .cf-pinned-label { display: flex; align-items: center; gap: 6px; margin: -14px -14px 12px; padding: 8px 14px; background: var(--acts-red-soft); color: var(--acts-red-text); font: 700 .72rem/1.2 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; }
body.mp-body .cf-pinned-label { background: var(--acts-gold-soft); color: var(--acts-gold-text); }
body.mp-body .cf-post-title { font: 600 1.125rem/1.3 var(--ui-display); margin: 6px 0 6px; }
body.mp-body .cf-post-title a { color: var(--acts-navy); }
body.mp-body .cf-post-body { font-size: .875rem; line-height: 1.55; color: var(--acts-ink); }
body.mp-body .cf-post-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; max-height: 360px; background: var(--acts-divider); }
body.mp-body .cf-post-who strong { font-size: .9063rem; color: var(--acts-ink); }
body.mp-body .cf-post .cf-acts, body.mp-body .cf-post .cf-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--acts-divider); }
body.mp-body .cf-act, body.mp-body .cf-react { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: none; border: 0; color: var(--acts-muted); font: 600 .8125rem/1 var(--ui-font); cursor: pointer; }
body.mp-body .cf-act.is-mine, body.mp-body .cf-react.is-mine { color: var(--acts-navy); background: var(--acts-blue-soft); }
body.mp-body .cf-react i { display: none; }
body.mp-body .cf-ack { margin-top: 12px; }
body.mp-body .cf-ack-t { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; font-size: .8125rem; }
body.mp-body .cf-ack-btn { width: 100%; background: var(--acts-gold); border-color: var(--acts-gold); color: var(--acts-navy); }
body.mp-body .cf-ack-btn:hover { background: #D8AC5E; color: var(--acts-navy); }
body.mp-body .cf-ack-done { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--acts-green-soft); color: var(--acts-green); font-weight: 600; }
/* prayer request: lavender card, purple "I'm praying" */
body.mp-body .cf-post.is-prayer { background: var(--acts-purple-soft); }
body.mp-body .cf-post.is-prayer .cf-react:first-child, body.mp-body .cf-post.is-prayer .cf-react-f:first-of-type .cf-react { background: var(--acts-purple); color: #fff; }
body.mp-body .cf-post.is-prayer .cf-react-f:first-of-type .cf-react i { display: inline; font-style: normal; }
body.mp-body .cf-post.is-prayer .cf-react.is-mine { animation: ui-glow 1.8s ease-in-out 2; }
body.mp-body .cf-pin--prayer { display: inline-flex; align-items: center; gap: 4px; background: var(--acts-purple-soft); color: var(--acts-purple); }
body.mp-body .cf-caught, body.mp-body .cf-newpill { color: var(--acts-muted); }
body.mp-body .cf-eyebrow { font: 700 .72rem/1.2 var(--ui-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--acts-muted); }
.cf-post.ui-heart-pulse { position: relative; }
.ui-heart { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; color: #fff; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35)); pointer-events: none; animation: ui-heart .9s ease-out forwards; z-index: 5; }
.ui-heart svg { width: 100%; height: 100%; fill: var(--acts-red); stroke: #fff; }

@keyframes ui-pulse { 50% { opacity: .35; } }
@keyframes ui-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 75, 154, 0); } 50% { box-shadow: 0 0 0 8px rgba(91, 75, 154, .22); } }
@keyframes ui-heart { 0% { transform: scale(.3); opacity: 0; } 30% { transform: scale(1.15); opacity: 1; } 60% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }

/* ============================================================ 6. THE REST OF THE PORTAL, ON THE SAME COMPONENTS */
/* ---- cards that older pages still draw as .mp-card: flat header, no gold bar, soft shadow ---- */
body.mp-body .mp-card-head { background: transparent; border: 0; border-bottom: 1px solid var(--acts-divider); padding: 12px 14px; }
body.mp-body .mp-card-head h2 { font-size: 1.125rem; }
body.mp-body .mp-card-head h2 .mp-icon { color: var(--acts-muted); }
body.mp-body .mp-card-foot { background: transparent; border-top: 1px solid var(--acts-divider); }
body.mp-body .mp-card::before { display: none; }
body.mp-body .mp-card .mp-card { box-shadow: none; }
body.mp-body .mp-narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
body.mp-body .mp-page-head h1 { font-size: 1.625rem; margin-bottom: 4px; }
body.mp-body .mp-page-head p { color: var(--acts-muted); }
body.mp-body .mp-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--acts-blue); }
body.mp-body .mp-row { min-height: 52px; border-radius: 0; }
body.mp-body .mp-row + .mp-row { border-top: 1px solid var(--acts-divider); }
body.mp-body .mp-row-title { font-weight: 600; color: var(--acts-ink); }
body.mp-body .mp-avatar { border-color: var(--acts-border); background: var(--acts-gold-soft); color: var(--acts-gold-text); }
body.mp-body .mp-avatar--icon { background: var(--acts-blue-soft); color: var(--acts-blue); border-radius: var(--acts-radius-tile); }
body.mp-body .mp-dl dt { color: var(--acts-muted); font-size: .75rem; }
body.mp-body .mp-dl dd { color: var(--acts-ink); font-size: .875rem; }
body.mp-body a:not(.btn):not(.ui-chip):not(.cf-chip):not(.ph-chip):not([class*="-tab"]) { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
body.mp-body .mp-card-body a:not([class]), body.mp-body .mp-meta a { color: var(--acts-blue); font-weight: 600; }
/* tab strips of the older pages (Groups, Saved, Prayer, Classes, Reimbursements, …) → the same 34px chips, active navy */
body.mp-body :is(.gx-tabs, .sv-tabs, .pw-tabs, .ct-tabs, .pr-tabs, .reim-tabs, .pdt-tabs, .mp-tabs, .cx-tabs, .pe-tabs, .ministry-tabs, .sp-tabs, .van-tabs) { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; border: 0; background: none; padding: 2px 0; margin: 0 0 12px; box-shadow: none; }
body.mp-body :is(.gx-tabs, .sv-tabs, .pw-tabs, .ct-tabs, .pr-tabs, .reim-tabs, .pdt-tabs, .mp-tabs, .cx-tabs, .pe-tabs, .ministry-tabs, .sp-tabs, .van-tabs) > :is(a, button) { flex: none; display: inline-flex; align-items: center; height: 34px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--acts-card); border: 1px solid var(--acts-border); color: var(--acts-ink); font: 600 .8125rem/1 var(--ui-font); white-space: nowrap; box-shadow: none; position: relative; }
body.mp-body :is(.gx-tabs, .sv-tabs, .pw-tabs, .ct-tabs, .pr-tabs, .reim-tabs, .pdt-tabs, .mp-tabs, .cx-tabs, .pe-tabs, .ministry-tabs, .sp-tabs, .van-tabs) > :is(a, button)::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
body.mp-body :is(.gx-tabs, .sv-tabs, .pw-tabs, .ct-tabs, .pr-tabs, .reim-tabs, .pdt-tabs, .mp-tabs, .cx-tabs, .pe-tabs, .ministry-tabs, .sp-tabs, .van-tabs) > :is(.is-on, .is-active, [aria-current]:not([aria-current="false"])) { background: var(--acts-navy); border-color: var(--acts-navy); color: #fff; box-shadow: none; }
/* details / kebab menus */
body.mp-body .mp-kebab-menu, body.mp-body .mc-ovf-menu, body.mp-body .cf-more-menu { border: 0; border-radius: 14px; box-shadow: var(--acts-shadow-up); }
body.mp-body .cf-more > summary { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* status/notice banners that older pages draw with their own colours */
body.mp-body :is(.mp-alert, .mp-notice, .mp-callout) { border-radius: var(--acts-radius); border: 0; background: var(--acts-gold-soft); color: var(--acts-ink); }
body.mp-body .mp-flash a { color: inherit; text-decoration: underline; }
/* tables inside the Portal: calm, with hairlines */
body.mp-body table { border-collapse: collapse; width: 100%; }
body.mp-body th { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acts-muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--acts-divider); }
body.mp-body td { padding: 10px; border-bottom: 1px solid var(--acts-divider); font-size: .875rem; }
/* sign-in, activation, password screens */
body.mp-auth-body { background: var(--acts-cream); }
body.mp-auth-body .mp-auth { max-width: 440px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top, 0px)) 16px 40px; }
body.mp-auth-body .mp-auth-card { background: var(--acts-card); border: 0; border-radius: 20px; box-shadow: var(--acts-shadow); padding: 22px 20px; }
body.mp-auth-body .mp-auth-card h1 { font-size: 1.625rem; margin: 2px 0 8px; }
body.mp-auth-body .mp-auth-card .eyebrow { font: 700 .72rem/1.2 var(--ui-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--acts-gold-text); }
body.mp-auth-body .mp-auth-lead, body.mp-auth-body .mp-auth-foot { color: var(--acts-muted); font-size: .875rem; }
body.mp-auth-body .mp-auth-foot a { color: var(--acts-blue); font-weight: 600; }
body.mp-auth-body .mp-auth-logo img { height: 56px; width: auto; margin: 0 auto 16px; }
body.mp-auth-body .btn-primary { width: 100%; }

/* ---- pull-to-refresh indicator, page transition ---- */
.ui-ptr { position: fixed; top: 0; left: 50%; z-index: 70; width: 38px; height: 38px; margin-top: 8px; border-radius: 50%; background: var(--acts-card); box-shadow: var(--acts-shadow-up); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translate(-50%, 0); transition: opacity .15s ease; }
.ui-ptr.is-on { opacity: 1; }
.ui-ptr span { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--acts-border); border-top-color: var(--acts-navy); }
.ui-ptr.is-ready span { border-top-color: var(--acts-gold); }
.ui-ptr.is-spin span { animation: ui-spin .7s linear infinite; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: ui-vt-out .14s ease both; }
  ::view-transition-new(root) { animation: ui-vt-in .2s ease both; }
  body.mp-ui .mp-main { animation: ui-page .2s ease both; }   /* fallback where the View Transitions API is missing */
}
@keyframes ui-vt-out { to { opacity: 0; } }
@keyframes ui-vt-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes ui-page { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .wk-live i { animation: none; }
}
@media print { .ui-nav, .ui-head, .ui-sheet, .ui-toast, .ui-ptr { display: none !important; } }

/* ============================================================ 7. FIXES FOUND WHEN WALKING THE PAGES */
:root { --acts-tint: #FBF8F1; }
:root[data-theme="dark"] { --acts-tint: #1B2A43; }
@media (max-width: 720px) {
  body.mp-ui:not(.mp-ui-guest) .mp-back, body.mp-ui:not(.mp-ui-guest) .mp-desk-only { display: none; }   /* the inner header has the ← back button */
}
/* round header buttons used by pages (the old .mp-appbar-btn markup) */
.mp-appbar-btn, .ui-head-actions .mp-kebab > summary { position: relative; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--acts-navy); cursor: pointer; text-decoration: none; font: inherit; list-style: none; }
.mp-appbar-btn:active { background: rgba(19, 35, 58, .08); }
.ui-head-actions form { margin: 0; display: inline-flex; }
.ui-head-actions .mp-kebab { position: relative; }
.ui-head-actions .mp-kebab > summary::-webkit-details-marker { display: none; }
/* notices (Notifications, My Requests): white rows, a hairline between, a soft tint when unread */
body.mp-body .mp-notice { background: transparent; border-radius: 0; }
body.mp-body .mp-notice.is-unread { background: var(--acts-tint); }
body.mp-body .mp-notice-title { color: var(--acts-ink); font-weight: 600; }
body.mp-body .mp-notice-main:not(:has(.cx-text)) { flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 0; width: auto; min-width: 0; min-height: 0; padding: 0; }
body.mp-body .mp-notices .mp-notice:has(> .mp-badge) { flex-wrap: wrap; }
body.mp-body .mp-notices .mp-notice:has(> .mp-badge) > .mp-notice-main { flex: 1 1 calc(100% - 80px); }
body.mp-body .mp-notices .mp-notice:has(> .mp-badge) > .mp-badge { margin-left: 62px; }
body.mp-body .mp-notice > .mp-avatar { margin-left: 14px; }
body.mp-body .mp-notice > .mp-badge, body.mp-body .mp-notice > form { margin-right: 14px; }
body.mp-body .mp-notice { padding: 8px 0; gap: 10px; }

/* 8. Round 196 sweep fixes ------------------------------------------------------------------------------------------------ */
body.mp-body :is(.van-opt, .van-date, .mp-check, label:has(> input[type=checkbox]), label:has(> input[type=radio])) { align-items: center; }
body.mp-body :is(input[type=checkbox], input[type=radio]) { flex: none; min-height: 0; padding: 0; margin: 0 6px 0 0; }
body.mp-body .van-opt small { flex-basis: 100%; padding-left: 30px; }
body.mp-body :is(.mp-sort, .mp-sortbar) select { max-width: 100%; min-width: 0; }
body.mp-body .mp-sort, body.mp-body .mp-sortbar { flex-wrap: wrap; }
body.mp-body .mp-page-head p { white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
body.mp-body .mp-page-head > * { min-width: 0; }
.ui-lrow[hidden], .ui-screen [hidden] { display: none !important; }

/* 9. Flat surfaces: the design system has no gradients (a photo scrim stays, so text over a banner photo remains readable) ----- */
body.mp-body :is(.mpg-hero:not(.has-banner), .gx-hero:not(.has-banner), .mp-welcome-hero, .pd-svc, .mpg-cta) { background: var(--acts-navy); background-image: none; border-radius: var(--acts-radius); box-shadow: none; }
body.mp-body .mp-card-head { background: transparent; }
body.mp-auth-body { background: var(--acts-cream); }
body.mp-body .cf-verse { background: var(--acts-card); }

/* 10. Round 197 — laptop / tablet layout, shared by every Portal page ------------------------------------------------------
   Phone (≤720px): unchanged — one column, bottom bar.   Tablet (721–1023px): one centred column, max 720px, top bar.
   Laptop (≥1024px): centred container (content max 1120px, 32px side padding), main (2fr) + side (1fr) columns where a page has side content. */
:root { --ui-topbar-h: 72px; --ui-gap: 20px; }
html { scroll-padding-top: calc(var(--ui-topbar-h) + 24px); }
body.mp-ui [id] { scroll-margin-top: calc(var(--ui-topbar-h) + 24px); }

.ui-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-gap); align-items: start; }
.ui-main, .ui-side { display: flex; flex-direction: column; gap: var(--ui-gap); min-width: 0; }
body.mp-body :is(.ui-main, .ui-side) > * { margin-top: 0; margin-bottom: 0; }
.ui-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ui-gap); align-items: stretch; }
.ui-grid > * { height: 100%; margin: 0; }
.ui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .ui-grid--2, .ui-grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* cards: titles and padding */
.ui-card-h { margin: 0; padding: 18px 20px 4px; font-size: 1.0625rem; }
.ui-card-hrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-right: 20px; }
.ui-card-hrow .mp-sortbar { margin: 0; padding: 14px 0 0; }
.ui-side-card { padding: 18px 20px; }
.ui-side-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
.ui-side-h svg { color: var(--acts-muted); flex: none; }
.ui-side-f { margin-top: 12px; }

/* tablet: one centred column */
@media (min-width: 721px) {
  body.mp-ui .mp-header-inner { min-height: var(--ui-topbar-h); padding: 0 32px; max-width: 1184px; margin-inline: auto; }
  body.mp-ui .mp-main { max-width: 784px; margin-inline: auto; padding: 32px 32px 64px; }
  .mp-topnav { align-self: stretch; align-items: stretch; gap: 2px; }
  /* top bar: a lighter active tab (navy text + gold underline) so it never competes with the gold Create button */
  .mp-topnav a { position: relative; min-height: var(--ui-topbar-h); padding: 0 14px; border-radius: 0; background: transparent; }
  .mp-topnav a:hover { background: transparent; color: var(--acts-navy); }
  .mp-topnav a.is-active { background: transparent; color: var(--acts-navy); }
  .mp-topnav a.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--acts-gold); }
  .mp-topnav .mp-topplus { align-self: center; min-height: 44px; padding: 0 18px; border-radius: 999px; margin-left: 12px; }
  .mp-welcome strong { font-weight: 600; color: var(--acts-navy); }
  .mp-menu-who { margin: 0; padding: 10px 14px 8px; font-size: .8125rem; color: var(--acts-muted); border-bottom: 1px solid var(--acts-divider); }
  .mp-menu-who strong { display: block; color: var(--acts-ink); font-size: .9063rem; }
  .ui-desk-head, body.mp-body .mp-page-head { margin: 0 0 20px; }
  body.mp-body .mp-page-head h1, .ui-desk-head h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 6px; }
  body.mp-body .mp-page-head p, .ui-desk-head p { font-size: .875rem; margin: 0; }
  body.mp-body .mp-back { margin-bottom: 8px; }
  body.mp-body .mp-two { grid-template-columns: minmax(0, 1fr); gap: var(--ui-gap); }
  body.mp-body .mp-stack { gap: var(--ui-gap); }
  body.mp-body .mp-main > .mp-narrow, body.mp-body .mp-main > form { max-width: 760px; }
}
@media (max-width: 1100px) { .mp-welcome { display: none; } }

/* laptop: container + two columns */
@media (min-width: 1024px) {
  body.mp-ui .mp-main { max-width: 1184px; }
  .ui-cols { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 24px; }
  .ui-cols--single { grid-template-columns: minmax(0, 760px); justify-content: center; }
  .ui-cols > .ui-side { position: sticky; top: calc(var(--ui-topbar-h) + 24px); max-height: calc(100vh - var(--ui-topbar-h) - 48px); overflow-y: auto; padding: 2px 4px 8px; margin: -2px -4px -8px; scrollbar-width: thin; }
  body.mp-body .mp-two { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 24px; }
}
@media (max-width: 1023px) { .ui-cols > .ui-side { position: static; max-height: none; overflow: visible; } }
/* readable line lengths: reading content and feeds never get wider than ~680px */
.ui-readable, body.mp-body .cf-page { max-width: 680px; }
.ui-main > .ui-readable { margin-inline: auto; width: 100%; }
.ui-main > .cf-page { width: 100%; }

/* Spiritual Journey: milestones timeline, growth tiles, records */
.jr-steps { list-style: none; margin: 0; padding: 16px 20px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; counter-reset: jr; }
.jr-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 8px; min-width: 0; }
.jr-step::before { content: ""; position: absolute; top: 22px; left: -50%; width: 100%; height: 2px; background: var(--acts-border); z-index: 0; }
.jr-step:first-child::before { display: none; }
.jr-step.is-done::before { background: var(--acts-green); }
.jr-dot { position: relative; z-index: 1; flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #EEF0F3; color: var(--acts-muted); box-shadow: 0 0 0 4px var(--acts-card); }
.jr-step.is-done .jr-dot { background: var(--acts-green-soft); color: var(--acts-green); }
.jr-st { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.jr-st b { font-size: .9063rem; font-weight: 600; color: var(--acts-ink); }
.jr-when { font-size: .78rem; color: var(--acts-muted); }
.jr-add, .jr-tell { display: inline-flex; align-items: center; min-height: 32px; font-size: .78rem; font-weight: 700; color: var(--acts-blue); text-decoration: none; }
.jr-add:hover, .jr-tell:hover { text-decoration: underline; }
.jr-growth { box-shadow: none; border-radius: 0; background: transparent; padding: 4px 8px 12px; }
.ui-lrow--two .ui-lrow-l { display: flex; flex-direction: column; gap: 2px; }
.ui-lrow--two .ui-lrow-l small { font-size: .78rem; font-weight: 400; color: var(--acts-muted); }
.jr-hint { margin: 0; padding: 4px 20px 0; font-size: .875rem; color: var(--acts-muted); }
.jr-rec { list-style: none; margin: 0; padding: 6px 8px 10px; }
.jr-rec-i + .jr-rec-i { border-top: 1px solid var(--acts-divider); }
.jr-rec-in { display: block; }
.jr-rec-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px; list-style: none; cursor: default; }
details.jr-rec-in > summary { cursor: pointer; }
details.jr-rec-in > summary::-webkit-details-marker { display: none; }
.jr-rec-t { flex: 1; min-width: 0; font-size: .9063rem; }
.jr-rec-s { flex: none; font-size: .8125rem; color: var(--acts-muted); }
.jr-rec-list { list-style: none; margin: 0; padding: 0 12px 12px 64px; display: flex; flex-direction: column; gap: 8px; }
.jr-rec-list li { display: flex; flex-direction: column; gap: 2px; font-size: .875rem; }
.jr-help-p { margin: 0 0 14px; font-size: .875rem; color: var(--acts-muted); }
.jr-suggest { width: 100%; }
.jr-pend { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.jr-pend li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.jr-pend-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .875rem; }
.jr-pend-t span { font-size: .78rem; color: var(--acts-muted); }
.ui-sheet-panel--form { max-width: 520px; }
.jr-form { gap: 4px; }
.jr-form .field { margin-bottom: 12px; }
.jr-send { width: 100%; min-height: 44px; margin-top: 4px; }
/* growth as three tiles on wide screens */
@media (min-width: 1280px) {
  .jr-growth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 8px 20px 20px; }
  .jr-growth .ui-lrow { border: 1px solid var(--acts-divider); border-radius: 14px; min-height: 64px; padding: 8px 12px; }
  .jr-growth .ui-lrow + .ui-lrow::before { display: none; }
}
/* phone: vertical timeline */
@media (max-width: 720px) {
  .jr-steps { grid-template-columns: minmax(0, 1fr); padding: 8px 16px 16px; }
  .jr-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; padding: 0 0 18px; }
  .jr-step:last-child { padding-bottom: 0; }
  .jr-step::before { top: -18px; left: 21px; width: 2px; height: calc(100% - 26px); }
  .jr-step:first-child::before { display: none; }
  .jr-step::before { top: 44px; left: 21px; width: 2px; height: calc(100% - 44px); display: block; }
  .jr-step:last-child::before { display: none; }
  .jr-step.is-done::before { background: var(--acts-border); }
  .jr-st { align-items: flex-start; padding-top: 2px; }
  .ui-card-h { padding: 14px 16px 2px; }
  .jr-rec-list { padding-left: 16px; }
}

/* Round 197 — Profile tabs on a laptop */
@media (min-width: 721px) { .ui-mob-only, body.mp-body .ui-mob-only { display: none !important; } }
@media (max-width: 720px) { .ui-desk-only, body.mp-body .ui-desk-only { display: none !important; } }
/* Personal Information: always show the read-only view first on a laptop (Edit opens the form) */
body.mp-ui .pi-view { display: block; }
body.mp-ui .pi-wrap:not(.is-edit) .pi-edit { display: none; }
body.mp-ui .pi-wrap.is-edit .pi-view { display: none; }
body.mp-body .pi-view .pr-sub-h, body.mp-body .pi-view .pr-sub-h + .mp-card { max-width: none; }
body.mp-body .pi-view .pr-sub-h { margin: 0 0 10px; }
.pi-side-edit { width: 100%; min-height: 44px; }
.pi-side-edit svg { margin-right: 6px; }
@media (min-width: 721px) {
  .pi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px 8px; }
  .pi-grid > .pr-row { border-top: 0; }
  .pi-grid > .pr-row:nth-child(n+3) { border-top: 1px solid var(--acts-divider); }
  .pi-grid > .pr-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ui-side .pr-card--center { padding: 24px 20px; }
  .pr-intro { display: none; }
}
@media (max-width: 1023px) and (min-width: 721px) { .pi-grid { grid-template-columns: minmax(0, 1fr); } .pi-grid > .pr-row:nth-child(n+2) { border-top: 1px solid var(--acts-divider); } }
/* Ministry Involvement: ministries as cards in a two-column grid */
@media (min-width: 1024px) {
  .ui-main .gx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-gap); align-items: stretch; }
  .ui-main .gx-list > .gx-card { height: 100%; margin: 0; }
  .ui-main .mp-kids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* Account Settings: the legacy phone list stays last on a laptop */
.ui-main > .st-wrap { order: 9; }
.st-wrap .st-phone-only { display: none; }
@media (max-width: 720px) { .st-wrap .st-phone-only { display: block; } .ui-main > .st-wrap { order: 0; } }
.ui-grid.st-hide-phone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .ui-grid.st-hide-phone-grid { display: none; } }

/* Round 197 — Home, Community, My Week, Me on a laptop */
@media (min-width: 1024px) { .ui-screen { max-width: none; } }
.ui-list--flat { box-shadow: none; border-radius: 0; background: transparent; margin: 0 -6px; }
.ui-side .ui-lrow { padding-left: 6px; padding-right: 6px; }
.ui-side .hm-hl--side { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; overflow: visible; padding: 4px 0 0; margin: 0; flex-wrap: wrap; }
.ui-side .hm-hl--side .hm-hl-i { min-width: 0; width: auto; }
.ui-side .hm-hl--side .hm-hl-l { max-width: 100%; }
.ui-chips--v { flex-direction: column; align-items: stretch; flex-wrap: nowrap; overflow: visible; gap: 6px; margin: 0; padding: 0; }
.ui-chips--v .cf-chip { width: 100%; justify-content: flex-start; }
.cm-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cm-side-list a { display: flex; flex-direction: column; gap: 2px; color: var(--acts-ink); text-decoration: none; }
.cm-side-list a:hover b { text-decoration: underline; }
.cm-side-list b { font-size: .875rem; font-weight: 600; line-height: 1.35; }
.cm-side-list span { font-size: .78rem; color: var(--acts-muted); }
.ui-main > .cf-page { margin-inline: 0; display: flex; flex-direction: column; padding: 0; width: 100%; }
.ui-main > .cf-page > .cf-feed { width: 100%; min-width: 0; }
.ui-main > .cf-page .cf-feed { display: flex; flex-direction: column; gap: var(--ui-gap); }
/* My Week mini month + legend */
.wk-mini-h { font: 600 .9375rem var(--ui-display, inherit); margin: 0 0 8px; }
.wk-mini-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.wk-mini-d { font-size: .6875rem; font-weight: 700; color: var(--acts-muted); padding: 2px 0 4px; }
.wk-mini-c { position: relative; display: flex; align-items: center; justify-content: center; min-height: 34px; border-radius: 10px; font-size: .8125rem; color: var(--acts-ink); text-decoration: none; }
.wk-mini-c.is-past { color: #A6ACB8; }
.wk-mini-c.is-today { background: var(--acts-navy); color: #fff; font-weight: 700; }
a.wk-mini-c:hover { background: var(--acts-cream); } a.wk-mini-c.is-today:hover { background: var(--acts-navy); }
.wk-mini-c i { position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--acts-gold); }
.wk-mini-c i.is-blue { background: var(--acts-blue); } .wk-mini-c i.is-red { background: var(--acts-red); } .wk-mini-c i.is-purple { background: var(--acts-purple); }
.wk-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .8125rem; color: var(--acts-muted); }
.wk-legend li { display: flex; align-items: center; gap: 10px; }
.wk-legend i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--acts-gold); }
.wk-legend i.is-blue { background: var(--acts-blue); } .wk-legend i.is-red { background: var(--acts-red); } .wk-legend i.is-purple { background: var(--acts-purple); }
@media (min-width: 1024px) { .wk .wk-strip { margin-bottom: 0; } }

/* Round 197 — pages without side content: one centred column (max 760) on a laptop; header and cards share the same edges */
@media (min-width: 1024px) {
  body.mp-ui .mp-main:not(:has(.ui-cols)) { max-width: 824px; }
  body.mp-ui .mp-main:not(:has(.ui-cols)) .mp-narrow { max-width: none; margin-left: 0; margin-right: 0; width: 100%; }
  body.mp-ui .mp-main:not(:has(.ui-cols)) > form { max-width: 640px; }
}
/* Round 197 — Sponsorship / Transportation titles use the shared page-header style */
@media (min-width: 721px) {
  body.mp-body .spn-banner, body.mp-body .van-banner { display: block; margin: 0 0 20px; padding: 0; background: none; border: 0; }
  body.mp-body .spn-banner h1, body.mp-body .van-banner h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
  body.mp-body .spn-banner .spn-prices, body.mp-body .van-banner .van-sub { display: block; font-size: .875rem; font-weight: 500; }
  body.mp-body .van-banner .van-sub { color: var(--acts-muted); }
}
/* Round 197 — filter pills wrap on a laptop instead of scrolling sideways (phones keep the swipe row) */
@media (min-width: 1024px) {
  body.mp-body :is(.ph-chips, .reim-tabs):not(.ui-chips--v) { flex-wrap: wrap; overflow: visible; }
}
/* Round 197 — tablet top bar: logo only (the church name returns on a laptop) so the tabs never collide with the brand */
@media (min-width: 721px) and (max-width: 1099px) {
  body.mp-ui .mp-brand-text { display: none; }
  body.mp-ui .mp-header-inner { padding: 0 20px; gap: 8px; }
  .mp-topnav a { padding: 0 10px; gap: 6px; }
  .mp-topnav .mp-topplus { margin-left: 6px; padding: 0 14px; }
}
body.mp-body #jr-sheet .jr-send, body.mp-body #jr-sheet .btn { min-height: 44px; }
@media (min-width: 721px) { body.mp-ui .mp-main:not(:has(.ui-cols)) > .cf-page { margin-inline: 0; padding-inline: 0; } }

/* ============================================================ Round 198 — Home: a fuller, never-empty first screen */
.hm2 { display: flex; flex-direction: column; gap: 16px; }
.hm-stack { display: flex; flex-direction: column; gap: 16px; }
.hm-stack > *, .hm-two .ui-main > *, .hm-two .ui-side > * { margin: 0; }
.hm-two { display: none; }
.hm-card { min-width: 0; }
.hm-card .ui-sec-head { margin-bottom: 8px; }
.hm-card .ui-sec-head h2 .ui-pill { margin-left: 6px; vertical-align: 2px; }
.hm-act { margin: 0; display: inline-flex; }
.hm-more-t { margin: 8px 0 0; font-size: .78rem; color: var(--acts-muted); }
@media (min-width: 1024px) {
  .hm-one { display: none; }
  .hm-two { display: block; }
  .hm2 { gap: 20px; }
  .hm-greet h1 { font-size: 2rem; }
}

/* cards that have their own white surface on the phone (on a laptop the side ones are .ui-side-card) */
.hm-card:is(.hm-step, .hm-ann, .hm-help, .hm-pray, .hm-cel, .hm-prompt, .hm-suggest):not(.ui-card) { background: var(--acts-card); border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); padding: 14px 16px 16px; }
.hm-suggest { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; color: var(--acts-muted); }
.hm-suggest p { margin: 0; color: var(--acts-ink); font-size: .9063rem; }
.hm-suggest .mp-icon { color: var(--acts-gold-text); }
.hm-suggest .ui-link { min-height: 36px; }
.ui-btn--ghost-on-navy { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); }
.ui-btn--ghost-on-navy:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* This Friday — navy hero */
.hm-friday { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--acts-radius); background: var(--acts-navy); color: #fff; box-shadow: var(--acts-shadow); }
.hm-fri-img { position: relative; aspect-ratio: 16 / 9; background: #233A57; overflow: hidden; }
.hm-fri-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-fri-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--acts-gold); background: linear-gradient(135deg, #233A57, #13233A); }
.hm-fri-img .hm-live-tag { position: absolute; left: 14px; top: 14px; bottom: auto; transform: none; padding: 4px 10px; font-size: .75rem; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.hm-friday.is-live { box-shadow: 0 0 0 2px var(--acts-red), var(--acts-shadow); }
.hm-fri-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hm-fri-cap { margin: 0; font: 700 .72rem/1.2 var(--ui-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--acts-gold); }
.hm-friday h2 { margin: 2px 0 0; font: 600 1.5rem/1.2 var(--ui-display); color: #fff; }
.hm-fri-sub { margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .86); }
.hm-fri-when { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; font-size: .875rem; color: rgba(255, 255, 255, .92); }
.hm-fri-when .mp-icon { flex: none; color: var(--acts-gold); }
.hm-fri-count { margin: 8px 0 0; font-weight: 700; font-size: .9375rem; color: #fff; }
.hm-fri-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hm-friday:not(.is-live) .hm-fri-count { color: var(--acts-gold); }
.hm-friday.is-live .hm-fri-count::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--acts-red); margin-right: 8px; animation: hm-pulse 1.4s ease-in-out infinite; }
@keyframes hm-pulse { 50% { opacity: .3; } }
@media (min-width: 1024px) {
  .hm-friday { flex-direction: row; align-items: stretch; }
  .hm-fri-img { flex: 0 0 42%; aspect-ratio: auto; min-height: 240px; }
  .hm-fri-body { flex: 1; padding: 24px 28px; justify-content: center; }
  .hm-friday h2 { font-size: 1.875rem; }
}

/* waiting / week rows */
.hm-waiting .ui-list { background: var(--acts-card); }
@media (min-width: 1024px) {
  .hm-two .hm-week-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; background: none; box-shadow: none; overflow: visible; border-radius: 0; align-items: stretch; }
  .hm-two .hm-week-list .hm-wrow { display: flex; flex-direction: column; background: var(--acts-card); border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); overflow: hidden; }
  .hm-two .hm-week-list .hm-wrow + .hm-wrow::before { display: none; }
  .hm-two .hm-week-list .hm-wacts { padding: 0 14px 14px; margin-top: auto; }
  .hm-two .hm-week-list .hm-wmain { flex-wrap: wrap; align-items: flex-start; padding-top: 14px; flex: 1; }
  .hm-two .hm-week-list .hm-wmain .ui-badge { margin-left: 52px; }
}

/* next step */
.hm-step-n { font-size: .78rem; font-weight: 700; color: var(--acts-muted); }
.hm-bar { height: 8px; border-radius: 999px; background: var(--acts-grey-soft); overflow: hidden; margin: 2px 0 12px; }
.hm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--acts-gold); transition: width .3s ease; }
.hm-step-t { margin: 0 0 12px; font-size: .9375rem; font-weight: 600; color: var(--acts-ink); }
.hm-step.ui-side-card .ui-sec-head { margin-inline: 0; }

/* events: phone swipe (230 px) · laptop list */
.hm-evrow { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 calc(var(--acts-pad) * -1); padding: 2px var(--acts-pad) 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hm-evrow::-webkit-scrollbar { display: none; }
.hm-evc { flex: 0 0 230px; width: 230px; scroll-snap-align: start; background: var(--acts-card); border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); overflow: hidden; display: flex; flex-direction: column; }
.hm-evc-img { position: relative; aspect-ratio: 23 / 13; background: var(--acts-blue-soft); overflow: hidden; }
.hm-evc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-ev-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--acts-blue); }
.hm-evc-img .hm-date { position: absolute; left: 10px; top: 10px; }
.hm-evc-b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.hm-evc-b h3 { margin: 0; font-size: .9375rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-evc-b h3 a { color: var(--acts-ink); }
.hm-evc-m, .hm-evc-g { margin: 0; font-size: .78rem; color: var(--acts-muted); }
.hm-evc-a { margin-top: auto; padding-top: 10px; }
.hm-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 44px; height: 48px; border-radius: 12px; background: #fff; color: var(--acts-navy); box-shadow: 0 1px 4px rgba(19, 35, 58, .15); line-height: 1; }
.hm-date b { font-size: 1.125rem; font-weight: 800; }
.hm-date small { margin-top: 3px; font-size: .625rem; font-weight: 700; letter-spacing: .06em; color: var(--acts-red-text); }
.hm-evlist, .hm-helplist, .hm-cellist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hm-evlist li, .hm-helplist li, .hm-cellist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.hm-evlist li + li, .hm-helplist li + li, .hm-cellist li + li { border-top: 1px solid var(--acts-divider); }
.hm-evlist .hm-date, .hm-helplist .hm-date { background: var(--acts-cream); box-shadow: none; }
.hm-evl-t, .hm-help-t, .hm-cel-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hm-evl-t a { color: var(--acts-ink); }
.hm-evl-t b, .hm-help-t b, .hm-cel-t b { font-size: .9063rem; font-weight: 600; line-height: 1.3; }
.hm-evl-t small, .hm-help-t small, .hm-cel-t small { font-size: .75rem; color: var(--acts-muted); }
.hm-help-f { color: var(--acts-gold-text) !important; font-weight: 600; }
.hm-helplist .hm-act, .hm-evlist .hm-act, .hm-cellist .hm-act { flex: none; }
.ui-pill--gold { background: var(--acts-gold-soft); color: var(--acts-gold-text); }

/* announcement */
.hm-ann { border-left: 4px solid var(--acts-gold); }
.hm-ann-cap { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; font: 700 .72rem/1.2 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: var(--acts-gold-text); }
.hm-ann-t { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--acts-ink); }
.hm-ann-m { margin: 6px 0 12px; font-size: .78rem; color: var(--acts-muted); }
.hm-ann-a { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hm-ann-more { font-size: .78rem; color: var(--acts-muted); }

/* latest sermon */
.hm-ser { display: flex; gap: 14px; padding: 12px; background: var(--acts-card); border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); }
.hm-ser-img { position: relative; flex: 0 0 112px; aspect-ratio: 16 / 9; align-self: flex-start; border-radius: 12px; overflow: hidden; background: var(--acts-navy); }
.hm-ser-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-ser-img .hm-ev-ph { color: var(--acts-gold); }
.hm-ser-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-ser-b h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.hm-ser-m, .hm-ser-s { margin: 0; font-size: .78rem; color: var(--acts-muted); }
.hm-ser-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hm-audio { margin-top: 10px; } .hm-audio audio { width: 100%; }
@media (max-width: 420px) { .hm-ser-img { flex-basis: 96px; } }
@media (min-width: 1024px) { .hm-ser { padding: 16px; } .hm-ser-img { flex-basis: 220px; } }

/* prayer, celebrations, prompt */
.hm-pray-n { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--acts-gold-text); }
.hm-pray-q { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--acts-gold); background: var(--acts-cream); border-radius: 0 12px 12px 0; }
.hm-pray-q p { margin: 0; font-size: .9063rem; line-height: 1.45; }
.hm-pray-q footer { margin-top: 6px; font-size: .75rem; color: var(--acts-muted); }
.hm-pray-t { margin: 0 0 12px; font-size: .9063rem; }
.hm-pray-a { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hm-cellist li .ui-tile { width: 36px; height: 36px; }
.hm-prompt { display: flex; align-items: flex-start; gap: 12px; }
.hm-prompt.ui-side-card { display: flex; }
.hm-pr-b { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hm-pr-b h2 { margin: 0; font-size: 1rem; line-height: 1.3; }
.hm-pr-b p { margin: 0; font-size: .875rem; color: var(--acts-muted); }

/* quick actions 2 × 2 (laptop side column) */
.hm-qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hm-qa-i { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; border-radius: 14px; background: var(--acts-cream); color: var(--acts-ink); font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.hm-qa-i:hover { background: var(--acts-grey-soft); }
.hm-qa-i .ui-tile { width: 36px; height: 36px; }

/* the smaller Verse of the Day */
.ui-screen .hm-verse--sm { padding: 14px 16px; }
.hm-verse--sm .hm-verse-text { margin: 8px 0 4px; font-size: 1.0625rem; line-height: 1.4; }
.hm-verse--sm .hm-verse-ref { margin-bottom: 10px; }
.hm-verse--sm .hm-verse-ctx { margin-top: 6px; min-height: 36px; }
.hm-verse--sm .hm-pill { min-height: 36px; padding: 0 12px; }

/* community: 1–2 unread posts; two in a row on a laptop */
.hm-comm-list { max-width: none !important; }
@media (min-width: 1024px) {
  .hm-comm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .hm-comm-list > * { margin: 0; min-width: 0; }
}
body.mp-body .hm-comm .cf-page { max-width: none; padding-inline: 0; }

/* images load lazily into a box of fixed shape, so nothing jumps */
.hm-fri-img, .hm-evc-img, .hm-ser-img { background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%); background-size: 200% 100%; animation: hm-shimmer 1.6s linear infinite; }
.hm-fri-img img, .hm-evc-img img, .hm-ser-img img { position: relative; z-index: 0; background: var(--acts-card); }
@keyframes hm-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .hm-fri-img, .hm-evc-img, .hm-ser-img { animation: none; } .hm-friday.is-live .hm-fri-count::before { animation: none; } }
/* Round 198 — cards in the sticky side column keep their own height (the column scrolls instead of squeezing them) */
.ui-cols > .ui-side > *, .ui-cols > .ui-main > * { flex-shrink: 0; }
/* Round 198 — tablet: the Friday photo is a wide strip, not a full 16:9 block */
@media (min-width: 600px) and (max-width: 1023px) { .hm-fri-img { aspect-ratio: 21 / 8; } .hm-evrow { margin-inline: 0; padding-inline: 0; } }

/* ============================================================ Round 199 — the engaging Home: highlights first, then the church feed
   One DOM for every width. Phone order: welcome+chips · Waiting (leaders) · billboard · Today · Must read · tabs · feed.
   Laptop (>=1024): centre + right column (Must read, events, prayer, new members, help); >=1280 adds the left column (profile, shortcuts, Today). */
.hm3 { display: block; }
.hm3-cols { display: block; }
.hm3-left, .hm3-right { display: none; }
.hm3-centre { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hm3-centre > :empty { display: none; }
.hm3-centre > * { min-width: 0; margin: 0; }
.hm3-o1 { order: 10; } .hm3-o1b { order: 20; } .hm3-o2 { order: 30; } .hm3-o3 { order: 40; } .hm3-o4 { order: 50; } .hm3-o5 { order: 60; } .hm3-o6 { order: 70; }
.hm3-o5 { display: none; }
.hm3 [hidden] { display: none !important; }

/* welcome + chips */
.hm3-welcome h1 { margin: 2px 0 0; font-size: 1.5rem; line-height: 1.2; }
.hm3-chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hm3-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; font: 600 .8125rem/1 var(--ui-font); background: var(--acts-grey-soft); color: var(--acts-ink); text-decoration: none; }
.hm3-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--acts-muted); flex: none; }
.hm3-chip--red { background: var(--acts-red-soft); color: var(--acts-red-text); } .hm3-chip--red i { background: var(--acts-red); }
.hm3-chip--green { background: var(--acts-green-soft); color: var(--acts-green); } .hm3-chip--green i { background: var(--acts-green); }
.hm3-chip--lav { background: var(--acts-purple-soft); color: var(--acts-purple); } .hm3-chip--lav i { background: var(--acts-purple); }
.hm3-chip--gold { background: var(--acts-gold-soft); color: var(--acts-gold-text); } .hm3-chip--gold i { background: var(--acts-gold); }
.hm3-uptodate { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--acts-muted); font-size: .875rem; }
.hm3-uptodate .mp-icon { color: var(--acts-green); flex: none; }

/* church billboard */
.hm3-bb { position: relative; }
.hm3-bb-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: var(--acts-radius); }
.hm3-bb-track::-webkit-scrollbar { display: none; }
.hm3-slide { position: relative; flex: 0 0 min(326px, calc(100% - 24px)); height: 200px; scroll-snap-align: start; border-radius: var(--acts-radius); overflow: hidden; background: var(--acts-navy); color: #fff; box-shadow: var(--acts-shadow); }
.hm3-bb:has(.hm3-slide:only-child) .hm3-slide { flex-basis: 100%; }
.hm3-slide-img { position: absolute; inset: 0; background: linear-gradient(135deg, #233A57, #13233A); }
.hm3-slide-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm3-slide-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(19, 35, 58, .94) 0%, rgba(19, 35, 58, .55) 55%, rgba(19, 35, 58, .1) 100%); }
.hm3-slide-ph { position: absolute; right: 18px; top: 16px; color: var(--acts-gold); opacity: .8; }
.hm3-slide-img img:not([hidden]) ~ .hm3-slide-ph { display: none; }
.hm3-slide-b { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px 16px; }
.hm3-slide-label { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--acts-gold); color: #13233A; font: 700 .68rem/1.3 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; }
.hm3-slide-label.is-live { background: var(--acts-red); color: #fff; }
.hm3-slide-label i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.hm3-slide h2 { margin: 0; color: #fff; font-size: 1.1875rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm3-slide p { margin: 0; max-width: 100%; color: rgba(255, 255, 255, .88); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm3-slide-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hm3-slide-btns .hm-act { margin: 0; }
.hm3-slide-btns .ui-btn { white-space: nowrap; }
.hm3-bb-dots { display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
.hm3-dot-b { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.hm3-dot-b::before { content: ""; position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--acts-border); transition: width .2s, background .2s; }
.hm3-dot-b.is-on::before { width: 8px; background: var(--acts-navy); }
.hm3-bb-arrow { display: none; }
.hm3-bb-pause { position: absolute; z-index: 2; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(19, 35, 58, .55); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hm3-bb-pause[aria-pressed="true"]::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent #fff; left: 12px; top: 11px; }
.hm3-bb-pause[aria-pressed="true"] svg { display: none; }
.hm3-slide.is-live { box-shadow: 0 0 0 2px var(--acts-red), var(--acts-shadow); }
.hm3-slide.no-img .hm3-slide-ph { display: block; }

/* Today at ACTS */
.hm3-today .ui-sec-head, .hm3-must .ui-sec-head { margin-bottom: 8px; }
.hm3-trow { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; scrollbar-width: none; }
.hm3-trow::-webkit-scrollbar { display: none; }
.hm3-tcard { position: relative; flex: 0 0 236px; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--acts-card); border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); scroll-snap-align: start; min-width: 0; }
.hm3-tcard.is-live { box-shadow: 0 0 0 2px var(--acts-red), var(--acts-shadow); }
.hm3-tmain { display: flex; align-items: flex-start; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.hm3-tt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hm3-tt b { font-size: .9063rem; color: var(--acts-navy); overflow-wrap: anywhere; }
.hm3-tt small { color: var(--acts-muted); font-size: .75rem; }
.hm3-tcard .ui-badge { align-self: flex-start; }
.hm3-tcard .hm-wacts { display: flex; flex-wrap: wrap; gap: 8px; }
.hm3-quiet { margin: 0; padding: 14px 16px; background: var(--acts-card); border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); color: var(--acts-muted); }
.hm3-today--side { display: none; }

/* Must read */
.hm3-must { background: var(--acts-card); border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); padding: 14px 16px 6px; }
.hm3-must .ui-sec-head h2 .ui-pill { margin-left: 8px; font-size: .7rem; vertical-align: 2px; }
.hm3-mlist { list-style: none; margin: 0; padding: 0; }
.hm3-mlist li + li { border-top: 1px solid var(--acts-divider); }
.hm3-mrow { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; color: inherit; text-decoration: none; }
.hm3-rdot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--acts-red); }
.hm3-rdot.is-gone { background: transparent; }
.hm3-mt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hm3-mt b { font-size: .9063rem; color: var(--acts-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm3-mt small { color: var(--acts-muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm3-mrow.is-unread .hm3-mt small { color: var(--acts-red-text); font-weight: 600; }
.hm3-mrow.is-read { opacity: .62; }
.hm3-ma { flex: none; font-size: .72rem; color: var(--acts-muted); }
.hm3-must--side { display: none; }

/* feed tabs */
.hm3-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; scroll-margin-top: 72px; }
.hm3-tabs::-webkit-scrollbar { display: none; }
.hm3-tab { flex: 1 1 auto; justify-content: center; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; white-space: nowrap; border-radius: 999px; background: var(--acts-card); border: 1px solid var(--acts-border); color: var(--acts-ink); font: 600 .875rem/1 var(--ui-font); text-decoration: none; }
.hm3-tab.is-on { background: var(--acts-navy); border-color: var(--acts-navy); color: #fff; }

/* the feed */
.hm3-feed { display: flex; flex-direction: column; gap: 16px; }
.hm3-item { min-width: 0; }
.hm3-item > * { margin: 0 !important; }
.hm3-item .hm-card:not(.ui-card):not(.hm-verse):not(.hm-sermon):not(.hm-friday) { background: var(--acts-card); border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); padding: 14px 16px 16px; }
.hm3-item .hm-verse, .hm3-item .hm-sermon { box-shadow: var(--acts-shadow); }
.hm3-post { padding-bottom: 12px; }
.hm3-post.is-new { box-shadow: inset 3px 0 0 var(--acts-gold), var(--acts-shadow); }
.hm3-plabel { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 .68rem/1.2 var(--ui-font); letter-spacing: .09em; text-transform: uppercase; color: var(--acts-muted); }
.hm3-plabel > span { color: var(--acts-gold-text); }
.hm3-post.is-k-prayer .hm3-plabel > span { color: var(--acts-purple); }
.hm3-new { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-style: normal; color: var(--acts-gold-text); }
.hm3-new i { width: 8px; height: 8px; border-radius: 50%; background: var(--acts-gold); }
.hm3-more { margin: 4px 0 0; }
.hm3-menu { padding: 4px; min-width: 210px; }
.hm3-menu form { margin: 0; }
.hm3-menu-b { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--acts-ink); font: 500 .875rem/1.2 var(--ui-font); text-align: left; cursor: pointer; }
.hm3-menu-b:hover { background: var(--acts-grey-soft); }
.hm3-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.hm3-acts form { margin: 0; }
.hm3-react.is-mine { color: var(--acts-gold-text); font-weight: 700; }
.hm3-cprev { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--acts-grey-soft); color: var(--acts-ink); font-size: .8125rem; text-decoration: none; }
.hm3-cprev strong { color: var(--acts-navy); }
.hm3-cprev small { display: block; margin-top: 2px; color: var(--acts-muted); font-weight: 600; }
.hm3-div { display: flex; align-items: center; gap: 12px; margin: 4px 0 !important; font: 700 .72rem/1 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: var(--acts-muted); }
.hm3-div::before, .hm3-div::after { content: ""; flex: 1; height: 1px; background: var(--acts-border); }
.hm3-div--new { color: var(--acts-gold-text); }
.hm3-end { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 12px; }
.hm3-seemore { justify-content: center; }

/* polls */
.hm-poll { margin: 10px 0 4px; }
.hm-poll-opts { display: flex; flex-direction: column; gap: 8px; }
.hm-poll-opt { width: 100%; min-height: 46px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--acts-border); background: var(--acts-card); color: var(--acts-navy); font: 600 .9063rem/1.2 var(--ui-font); text-align: left; cursor: pointer; }
.hm-poll-opt:hover, .hm-poll-opt:focus-visible { border-color: var(--acts-navy); background: var(--acts-gold-soft); }
.hm-poll-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hm-poll-bars li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--acts-grey-soft); overflow: hidden; font-size: .9063rem; }
.hm-poll-bars li i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acts-gold-soft); z-index: 0; border-radius: 12px 0 0 12px; }
.hm-poll-bars li.is-mine i { background: var(--acts-gold); opacity: .55; }
.hm-poll-bars li > * { position: relative; z-index: 1; }
.hm-poll-l { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--acts-navy); }
.hm-poll-m { margin: 8px 0 0; font-size: .75rem; color: var(--acts-muted); }

/* small feed cards */
.hm3-evcard, .hm3-album { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.hm3-album-open { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.hm3-plabel--row { justify-content: space-between; margin-bottom: 2px; }
/* Round 201 — "All albums ›": 13px, 600, gold text, 44px tap target (the negative margin keeps the label row compact) */
.pg-all { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -14px -6px -14px 0; padding: 0 6px 0 14px; font: 600 13px/1 var(--ui-font); letter-spacing: 0; text-transform: none; color: var(--acts-gold-text); text-decoration: none; white-space: nowrap; }
.pg-all:hover, .pg-all:focus-visible { text-decoration: underline; }
.pg-all span { font-size: 16px; line-height: 1; }
.pg-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.pg-head-row h2 { margin: 0; }
.mp-card-head .pg-all { margin: -10px -6px -10px auto; }
.hm3-ev-img img, .hm3-al-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 12px; }
.hm3-al-img { position: relative; }
.hm3-al-n { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(19, 35, 58, .8); color: #fff; font: 700 .75rem/1.2 var(--ui-font); }
.hm3-al-b h3 { margin: 0; }
.hm3-al-b small, .hm3-ev-t p { color: var(--acts-muted); font-size: .8125rem; }
.hm3-ev-b { display: flex; gap: 12px; align-items: center; }
.hm3-ev-t h3 { margin: 0; } .hm3-ev-t p { margin: 2px 0 0; }
.hm3-ev-g { color: var(--acts-green) !important; font-weight: 600; }
.hm3-ev-a { display: flex; flex-wrap: wrap; gap: 8px; }
.hm3-wlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hm3-wlist li { display: flex; align-items: center; gap: 10px; }
.hm3-wn { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hm3-wn small { color: var(--acts-muted); font-size: .75rem; }
.hm3-k-prayer .hm-pray { background: var(--acts-purple-soft) !important; }

/* search */
.hm3-searchf { max-width: 560px; }
.hm3-sres { margin-top: 18px; max-width: 560px; }
.hm3-sres h2 { font-size: 1.0625rem; margin: 0 0 8px; }
.hm3-slist { list-style: none; margin: 0; padding: 4px 16px; }
.hm3-slist li + li { border-top: 1px solid var(--acts-divider); }
.hm3-slist a { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; color: inherit; text-decoration: none; min-height: 44px; }
.hm3-slist small { color: var(--acts-muted); }

/* top bar search + avatar-menu shortcuts */
body.mp-body .mp-topsearch { display: none; position: relative; align-items: center; flex: 0 1 auto; }
body.mp-body .mp-topsearch input { height: 40px; width: 200px; min-width: 0; padding: 0 14px 0 42px !important; border: 1px solid var(--acts-border); border-radius: 999px; background: var(--acts-card); color: var(--acts-ink); font: 500 .875rem var(--ui-font); box-shadow: none; }
body.mp-body .mp-topsearch-b { position: absolute; left: 3px; top: 2px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--acts-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mp-menu-sc { display: none !important; }
body.mp-body .mp-topnav a span { white-space: nowrap; }
@media (min-width: 721px) { body.mp-ui .mp-header-inner:has(.mp-topsearch) { grid-template-columns: auto auto minmax(max-content, 1fr) auto; gap: 8px; } body.mp-body .mp-topsearch { display: flex; margin-left: auto; margin-right: 8px; } body.mp-body .mp-topsearch input { width: 0; padding: 0; border: 0; position: absolute; opacity: 0; pointer-events: none; } body.mp-body .mp-topsearch-b { position: static; width: 40px; height: 40px; } }
@media (min-width: 1200px) { body.mp-body .mp-topsearch { margin-left: 8px; margin-right: 0; } body.mp-body .mp-topsearch input { position: static; width: 180px !important; padding: 0 12px 0 42px !important; border: 1px solid var(--acts-border); opacity: 1; pointer-events: auto; } body.mp-body .mp-topsearch-b { position: absolute; width: 36px; height: 36px; } }
@media (min-width: 1500px) { body.mp-body .mp-topsearch input { width: 240px !important; } }
@media (min-width: 1024px) and (max-width: 1279px) { body.mp-page-home:has(.hm3-cols) .mp-menu-sc { display: flex !important; } }
.hm3-today--side .ui-sec-head h2 { font-size: 1rem; }
.hm3-today--side .ui-sec-head .ui-link { white-space: nowrap; }

/* tablet 768-1023: one centred column (max 720), phone order; Today as a wrapping grid */
@media (min-width: 768px) {
  .hm3-today--main .hm3-trow { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); overflow: visible; }
  .hm3-today--main .hm3-tcard { flex: none; }
  .hm3-welcome h1 { font-size: 1.875rem; }
}

/* laptop 1024+: centre + right (and left from 1280) */
@media (min-width: 1024px) {
  body.mp-ui .mp-main:has(.hm3-cols) { max-width: 1304px; }
  body.mp-page-home.mp-ui:has(.hm3-cols) .mp-header-inner { max-width: 1304px; }
  .hm3-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
  .hm3-right { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--ui-topbar-h) + 24px); max-height: calc(100vh - var(--ui-topbar-h) - 48px); overflow-y: auto; padding: 2px 4px 8px; margin: -2px -4px -8px; scrollbar-width: thin; }
  .hm3-right > * { flex-shrink: 0; margin: 0; }
  .hm3-must--main { display: none; }
  .hm3-must--side { display: block; }
  .hm3-must--side.hm3-must { padding: 18px 20px 8px; }
  .hm3-o5 { display: block; }
  .hm3-o3 { order: 25; }
  .hm3-phone-only { display: none; }
  .hm3-tabs, .hm3-feed, .hm3-end, .hm3-postbox { max-width: 680px; width: 100%; }
  .hm3-postbox { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
  .hm3-pb-in { flex: 1; display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--acts-grey-soft); color: var(--acts-muted); text-decoration: none; font-size: .9063rem; }
  .hm3-pb-photo { height: 44px; }
  .hm3-slide { flex-basis: 100%; height: 280px; display: grid; grid-template-columns: 46% 1fr; }
  .hm3-slide-img { position: relative; inset: auto; min-height: 100%; }
  .hm3-slide-img::after { display: none; }
  .hm3-slide-b { position: static; justify-content: center; gap: 10px; padding: 28px 32px; }
  .hm3-slide h2 { font-size: 1.75rem; -webkit-line-clamp: 3; }
  .hm3-slide p { white-space: normal; font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .hm3-slide-ph { right: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .5; }
  .hm3-bb-track { gap: 0; }
  .hm3-bb-arrow { position: absolute; top: calc(50% - 22px); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--acts-navy); box-shadow: var(--acts-shadow); cursor: pointer; }
  .hm3-bb-prev { left: 12px; transform: scaleX(-1); } .hm3-bb-next { right: 12px; }
}
@media (min-width: 1280px) {
  .hm3-cols { grid-template-columns: 240px minmax(0, 1fr) 300px; }
  .hm3-left { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--ui-topbar-h) + 24px); max-height: calc(100vh - var(--ui-topbar-h) - 48px); overflow-y: auto; padding: 2px 4px 8px; margin: -2px -4px -8px; scrollbar-width: thin; }
  .hm3-left > * { flex-shrink: 0; margin: 0; }
  .hm3-today--main { display: none; }
  .hm3-today--side { display: block; }
  .hm3-today--side .hm3-trow { flex-direction: column; overflow: visible; padding: 0; }
  .hm3-today--side .hm3-tcard { flex: none; width: 100%; }
  .hm3-today--side { background: var(--acts-card); border-radius: var(--acts-radius); box-shadow: var(--acts-shadow); padding: 16px; }
}
.hm3-me { padding: 18px 20px; }
.hm3-me-top { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.hm3-me-top .mp-avatar { width: 56px; height: 56px; flex: none; }
.hm3-me-t { display: flex; flex-direction: column; min-width: 0; }
.hm3-me-t b { color: var(--acts-navy); font-size: 1rem; overflow-wrap: anywhere; }
.hm3-me-t small { color: var(--acts-muted); }
.hm3-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--acts-divider); text-align: center; }
.hm3-stats dt { font-size: .7rem; color: var(--acts-muted); text-transform: uppercase; letter-spacing: .06em; }
.hm3-stats dd { margin: 2px 0 0; font: 600 1.125rem var(--ui-display); color: var(--acts-navy); }
.hm3-short ul { list-style: none; margin: 0; padding: 0; }
.hm3-short a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--acts-ink); text-decoration: none; font-weight: 600; font-size: .9063rem; }
@media (prefers-reduced-motion: reduce) { .hm3-bb-track { scroll-behavior: auto; } .hm3 * { animation: none !important; transition: none !important; } }
.hm3-o6 { display: flex; flex-direction: column; gap: 16px; }
/* Round 199 fixes: Home cards carry their own "New" marker (the older blue corner dot is dropped there); laptop slide text clears the arrow buttons */
.hm3-post.is-new::before { display: none; }
@media (min-width: 1024px) { .hm3-slide-b { padding-right: 64px; } }

/* ===== Round 200: one action row — Like · Love · Comment · other reactions · Save … Share ===== */
.cf-actrow { display: flex; align-items: center; flex-wrap: nowrap; gap: 2px; }
.cf-actrow .cf-react-f { display: inline-flex; margin: 0; }
.cf-actrow .cf-act { gap: 5px; padding: 0 8px; white-space: nowrap; }
.cf-actrow .cf-act b:empty { display: none; }
.cf-actrow .cf-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cf-actrow .cf-act-share { margin-left: auto; }
@media (min-width: 640px) {
  .cf-actrow .cf-lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: .8125rem; font-weight: 600; }
  .cf-actrow .cf-act-share .cf-lbl { position: static; }
  .cf-actrow .cf-act { padding: 0 10px; }
  .cf-actrow .cf-save-f .cf-lbl, .cf-actrow .cf-act-save span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.cf-actrow .cf-act.is-mine, .cf-actrow .cf-act.is-mine svg { color: var(--acts-navy); }
.cf-actrow .cf-act-love.is-mine, .cf-actrow .cf-act-love.is-mine svg { color: #b3263e; }
.cf-actrow .cf-act-love.is-mine svg { fill: currentColor; }
.cf-actrow .cf-act-praise.is-mine, .cf-actrow .cf-act-praise.is-mine svg { color: var(--acts-gold-text); }

/* ===== Round 200: Home — no service card; Verse of the Day on top; slim LIVE bar ===== */
.hm3-ov { order: 25; }
.hm3-ov .hm-card { margin: 0; }
.hm3-live { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; background: #fdecee; border: 1px solid #f3c1c8; color: #7a1626; text-decoration: none; font-size: .875rem; }
.hm3-live b { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .75rem; }
.hm3-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #d3203a; flex: none; box-shadow: 0 0 0 0 rgba(211, 32, 58, .5); animation: hm3-pulse 1.8s infinite; }
.hm3-live-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm3-live-go { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
@keyframes hm3-pulse { 70% { box-shadow: 0 0 0 8px rgba(211, 32, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(211, 32, 58, 0); } }
@media (prefers-reduced-motion: reduce) { .hm3-live-dot { animation: none; } }
.hm-verse-ref-q { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; color: rgba(255, 255, 255, .86); font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; }
.hm-verse-ref-q svg { flex: none; margin-top: 2px; }

/* ---------- Round 200: members-only Photo Gallery (Photos) ---------- */
.pg-note { margin: 0 0 10px; }
.pg-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.pg-toolbar .cf-chips { flex: 1 1 100%; }
.pg-search { display: flex; flex: 1 1 100%; gap: 6px; align-items: center; }
@media (min-width: 640px) { .pg-search { flex: 1 1 300px; } }
.pg-search input[type=search] { flex: 1 1 auto; width: auto; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--acts-border); border-radius: 10px; background: var(--acts-card); color: var(--acts-ink); font: inherit; }
.pg-search select { flex: 0 0 auto; width: auto; max-width: 42%; height: 38px; border: 1px solid var(--acts-border); border-radius: 10px; background: var(--acts-card); color: var(--acts-ink); padding: 0 8px; font: inherit; }
.pg-sbtn { height: 38px; width: 38px; border: 1px solid var(--acts-border); border-radius: 10px; background: var(--acts-card); color: var(--acts-navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.pg-album { display: block; background: var(--acts-card); border: 1px solid var(--acts-border); border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none; }
.pg-album:focus-visible, .pg-ph:focus-visible { outline: 3px solid var(--gold-500, #c8a24a); outline-offset: 2px; }
.pg-cover { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--acts-cream, #f4efe6); }
.pg-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-cover-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--acts-muted); }
.pg-lock { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(14, 33, 66, .78); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pg-meta { display: block; padding: 9px 11px 11px; }
.pg-meta b { display: block; font-size: .875rem; color: var(--acts-navy); line-height: 1.25; }
.pg-meta small { display: block; margin-top: 2px; color: var(--acts-muted); font-size: .75rem; }
.pg-album-head { margin: 0 0 12px; }
.pg-album-head h1 { margin: 0 0 4px; }
.pg-lockpill { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px 9px; border-radius: 999px; background: var(--acts-cream, #f4efe6); border: 1px solid var(--acts-border); color: var(--acts-navy); font: 600 .72rem/1 var(--ui-font); vertical-align: middle; }
.pg-desc { margin: 6px 0 0; max-width: 62ch; }
.pg-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0 0 18px; }
.pg-ph { position: relative; display: block; padding: 0; border: 0; background: var(--acts-cream, #f4efe6); aspect-ratio: 1; cursor: pointer; overflow: hidden; }
.pg-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-pend { position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 6px; background: rgba(180, 60, 20, .9); color: #fff; font-size: .65rem; font-weight: 700; }
@media (min-width: 640px) { .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } }
@media (min-width: 1024px) { .pg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .pg-photos { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pg-toolbar .cf-chips { flex: 0 1 auto; } }
@media (min-width: 1360px) { .pg-photos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* the viewer */
html.pg-lb-open, html.pg-lb-open body { overflow: hidden; }
.pg-lb { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; background: #080c14; color: #fff; }
.pg-lb[hidden] { display: none; }
.pg-lb-top { display: flex; align-items: center; gap: 4px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); }
.pg-lb-count { flex: 1; font: 600 .8125rem/1 var(--ui-font); color: rgba(255, 255, 255, .8); }
.pg-lb-b { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pg-lb-b:hover, .pg-lb-b:focus-visible { background: rgba(255, 255, 255, .14); }
.pg-lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; }
.pg-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-drag: none; touch-action: none; }
.pg-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; }
.pg-lb-prev { left: 12px; } .pg-lb-prev svg { transform: rotate(180deg); } .pg-lb-next { right: 12px; }
@media (min-width: 768px) { .pg-lb-nav { display: inline-flex; } }
.pg-lb-bot { padding: 8px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.pg-lb-cap { margin: 0 0 6px; font-size: .875rem; color: rgba(255, 255, 255, .92); text-align: center; }
.pg-lb-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pg-act { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: 600 .8125rem/1 var(--ui-font); cursor: pointer; text-decoration: none; }
.pg-act:hover, .pg-act:focus-visible { background: rgba(255, 255, 255, .14); }
.pg-act.is-mine { background: rgba(255, 255, 255, .2); }
.pg-act b { font-weight: 700; } .pg-act b:empty { display: none; }
@media (max-width: 520px) { .pg-lb-acts { flex-wrap: nowrap; justify-content: space-between; } .pg-act { padding: 0 8px; min-width: 40px; justify-content: center; } .pg-act span { display: none; } }
/* one photo page, manage page */
.pg-one { margin: 0 auto; }
.pg-one-fig { margin: 0 0 8px; background: #0e1626; border-radius: 12px; overflow: hidden; }
.pg-one-fig img { display: block; width: 100%; max-height: 74vh; object-fit: contain; }
.pg-one-cap { margin: 0 0 8px; } .pg-one-cap small { display: block; color: var(--acts-muted); }
.pg-one-acts { margin-bottom: 12px; }
.pg-h { margin: 0 0 8px; font-size: 1.0625rem; }
.pg-cm { padding: 8px 0; border-top: 1px solid var(--acts-border); } .pg-cm p { margin: 0 0 2px; } .pg-cm small { color: var(--acts-muted); }
.pg-cm-form, .pg-find, .pg-found { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; } .pg-cm-form textarea, .pg-find input { flex: 1; min-width: 0; }
.pg-found { align-items: center; justify-content: space-between; }
.pg-link input { width: min(100%, 420px); }
.pg-det { margin: 6px 0; } .pg-det summary { cursor: pointer; font-weight: 600; }
.pg-form label { display: block; margin: 10px 0 4px; font-weight: 600; } .pg-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .pg-form select, .pg-form textarea { width: 100%; max-width: 560px; }
.pg-two { display: grid; grid-template-columns: 1fr; gap: 0 14px; } @media (min-width: 640px) { .pg-two { grid-template-columns: 1fr 1fr; } }
.pg-vis, .pg-checks { border: 1px solid var(--acts-border); border-radius: 12px; padding: 10px 12px; margin: 12px 0; } .pg-vis legend, .pg-checks legend { padding: 0 6px; font-weight: 700; }
.pg-radio { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 400 !important; } .pg-radio span b { display: block; } .pg-radio small { display: block; color: var(--acts-muted); }
.pg-inl { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 400 !important; } .pg-inl-f { display: inline-flex; gap: 6px; margin-top: 6px; }
.pg-req, .pg-mp { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--acts-border); } .pg-req img, .pg-mp img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; flex: none; }
.pg-mp-f { flex: 1; min-width: 0; } .pg-mp-f form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; } .pg-mp-f input[name=caption] { flex: 1 1 180px; min-width: 0; }
.pg-defaults { margin: 0 0 14px; }
body.mp-body .btn-danger { background: #b3261e; color: #fff; border-color: #b3261e; }
body.mp-body .btn-danger:hover { background: #8f1d17; color: #fff; }

/* ============================================================ Bible Games (Round 202) — white 16px cards, Fraunces question text, 44px answers, words + colour for right/wrong */
.bg-card { padding: 16px; margin: 0 0 16px; }
.bg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bg-cap { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 .75rem/1.2 var(--ui-font) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--acts-muted) !important; }
.bg-cap svg { color: var(--acts-gold-text); }
.bg-streak { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--acts-grey-soft); color: var(--acts-muted); font-size: .78rem; white-space: nowrap; }
.bg-streak b { font-weight: 700; color: inherit; }
.bg-streak.is-on { background: var(--acts-gold-soft); color: var(--acts-gold-text); }
.bg-streak svg { stroke-width: 1.8; }
.bg-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; font-size: .75rem; color: var(--acts-muted); }
.bg-lvl { font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--acts-blue-soft); color: var(--acts-blue); }
.bg-lvl--medium { background: var(--acts-gold-soft); color: var(--acts-gold-text); }
.bg-lvl--hard { background: var(--acts-purple-soft); color: var(--acts-purple); }
.bg-q { margin: 0 0 14px; font-family: var(--ui-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.35; color: var(--acts-navy); }
.bg-opts { display: grid; gap: 8px; }
.bg-opt { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; min-height: 44px; padding: 10px 14px; text-align: left; font: 600 .9375rem/1.3 var(--ui-font); color: var(--acts-ink); background: var(--acts-card); border: 1.5px solid var(--acts-border); border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bg-opt:hover:not(:disabled), .bg-opt:focus-visible { border-color: var(--acts-navy); background: var(--acts-cream); }
.bg-opt:focus-visible { outline: 3px solid var(--acts-blue); outline-offset: 2px; }
.bg-opt:disabled { cursor: default; opacity: 1; color: var(--acts-ink); }
.bg-letter { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--acts-grey-soft); color: var(--acts-navy); font-size: .8rem; font-weight: 700; }
.bg-opt-t { flex: 1 1 140px; min-width: 0; }
.bg-tag { flex-basis: 100%; display: inline-flex; align-items: center; gap: 4px; margin-left: 36px; font: 700 .75rem/1.2 var(--ui-font); font-style: normal; }
.bg-opt.is-pending { border-color: var(--acts-navy); background: var(--acts-blue-soft); }
.bg-opt.is-pending .bg-letter { background: var(--acts-navy); color: #fff; }
.bg-opt.is-correct { border-color: var(--acts-green); background: var(--acts-green-soft); } .bg-opt.is-correct .bg-tag { color: var(--acts-green); } .bg-opt.is-correct .bg-letter { background: var(--acts-green); color: #fff; }
.bg-opt.is-wrong { border-color: var(--acts-red); background: var(--acts-red-soft); } .bg-opt.is-wrong .bg-tag { color: var(--acts-red-text); } .bg-opt.is-wrong .bg-letter { background: var(--acts-red); color: #fff; }
.bg-form.is-busy .bg-opt:not(.is-pending) { opacity: .6; }
.bg-slot:not(:empty) { margin-top: 12px; }
.bg-fb { padding: 12px 14px; border-radius: 12px; outline: 0; }
.bg-fb.is-correct { background: var(--acts-green-soft); } .bg-fb.is-wrong { background: var(--acts-red-soft); }
.bg-fb p { margin: 0 0 6px; } .bg-fb p:last-child { margin-bottom: 0; }
.bg-fb-h { display: flex; align-items: center; gap: 8px; font-size: 1rem; } .bg-fb.is-correct .bg-fb-h { color: var(--acts-green); } .bg-fb.is-wrong .bg-fb-h { color: var(--acts-red-text); }
.bg-pts { margin-left: auto; font-size: .78rem; font-weight: 700; }
.bg-fb-e { color: var(--acts-ink); }
.bg-fb-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8125rem; color: var(--acts-muted); } .bg-fb-r a { font-weight: 700; color: var(--acts-blue); min-height: 24px; }
.bg-after { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: .8125rem; color: var(--acts-muted); }
.bg-after p { display: flex; align-items: center; gap: 6px; margin: 0; flex: 1 1 200px; }
.bg-fb .bg-after { border-top: 1px solid rgba(19, 35, 58, .12); padding-top: 10px; }
.bg-after--pre { margin-top: 10px; }
.bg-more { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; font-weight: 700; color: var(--acts-blue); text-decoration: none; margin-left: auto; }
.bg-muted { color: var(--acts-muted); margin: 0 0 8px; }
.bg-cele { margin-top: 12px; display: grid; gap: 8px; }
.bg-cele-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--acts-gold-soft); color: var(--acts-gold-text); text-decoration: none; }
.bg-cele-i b { display: block; color: var(--acts-navy); } .bg-cele-i small { color: var(--acts-muted); font-size: .78rem; }
.bg-badge-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--acts-gold); color: #fff; }
.bg-confetti { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.bg-confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: .95; animation: bgfall 1.6s ease-in forwards; }
@keyframes bgfall { to { transform: translate3d(var(--dx, 0), 105vh, 0) rotate(540deg); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .bg-confetti { display: none; } .bg-confetti i { animation: none; } }
/* hub */
.bg-screen { max-width: 1040px; margin: 0 auto; }
.bg-page-h { margin: 4px 0 12px; }
.bg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.bg-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--acts-border); background: var(--acts-card); color: var(--acts-navy); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.bg-chip.is-on { background: var(--acts-navy); color: #fff; border-color: var(--acts-navy); }
.bg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bg-tiles form { display: contents; }
.bg-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 96px; padding: 12px; width: 100%; text-align: left; border: 1.5px solid var(--acts-border); border-radius: 14px; background: var(--acts-card); color: var(--acts-ink); cursor: pointer; font: inherit; }
.bg-tile b { font: 600 1.0625rem/1.2 var(--ui-display); color: var(--acts-navy); } .bg-tile span { font-size: .8rem; color: var(--acts-muted); } .bg-tile small { margin-top: auto; font-size: .72rem; color: var(--acts-muted); }
.bg-tile--easy { border-top: 4px solid var(--acts-green); } .bg-tile--medium { border-top: 4px solid var(--acts-gold); } .bg-tile--hard { border-top: 4px solid var(--acts-purple); }
.bg-tile:hover:not(:disabled), .bg-tile:focus-visible { background: var(--acts-cream); } .bg-tile:focus-visible { outline: 3px solid var(--acts-blue); outline-offset: 2px; } .bg-tile:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 420px) { .bg-tiles { grid-template-columns: 1fr; } .bg-tile { min-height: 64px; } }
.bg-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 10px; }
.bg-stat { background: var(--acts-cream); border-radius: 12px; padding: 10px 12px; } .bg-stat dt { font-size: .72rem; color: var(--acts-muted); } .bg-stat dd { margin: 2px 0 0; font: 600 1.25rem/1.2 var(--ui-display); color: var(--acts-navy); }
.bg-badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.bg-chipbadge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--acts-gold-soft); color: var(--acts-gold-text); font-size: .75rem; font-weight: 700; }
.bg-recap-t { margin: 0 0 2px; font: 600 1.0625rem/1.3 var(--ui-display); color: var(--acts-navy); }
.bg-recap-done { display: flex; align-items: center; gap: 8px; color: var(--acts-green); margin: 8px 0; }
.bg-off { text-align: center; padding: 32px 20px; max-width: 520px; margin: 24px auto; } .bg-off h1 { font-size: 1.375rem; margin: 10px 0 6px; } .bg-off p { color: var(--acts-muted); margin: 0 0 12px; }
.bg-off-ic { display: inline-flex; width: 56px; height: 56px; border-radius: 16px; align-items: center; justify-content: center; background: var(--acts-gold-soft); color: var(--acts-gold-text); }
/* round player */
.bg-play { max-width: 640px; margin: 0 auto; }
.bg-prog { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .8125rem; color: var(--acts-muted); }
.bg-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--acts-grey-soft); overflow: hidden; } .bg-bar i { display: block; height: 100%; background: var(--acts-navy); border-radius: 999px; transition: width .25s; }
@media (prefers-reduced-motion: reduce) { .bg-bar i { transition: none; } }
.bg-next { margin-top: 12px; display: flex; justify-content: flex-end; } .bg-next .ui-btn { min-height: 44px; }
.bg-end { text-align: center; } .bg-score { font: 600 2.75rem/1 var(--ui-display); color: var(--acts-navy); margin: 6px 0; } .bg-end-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.bg-review { list-style: none; margin: 0; padding: 0; } .bg-review li { padding: 12px 0; border-top: 1px solid var(--acts-divider); } .bg-review b { display: block; font-family: var(--ui-display); color: var(--acts-navy); margin-bottom: 4px; }
.bg-review .bg-res { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .8125rem; } .bg-res.is-correct { color: var(--acts-green); } .bg-res.is-wrong { color: var(--acts-red-text); }
.bg-review p { margin: 2px 0; font-size: .8125rem; color: var(--acts-muted); }
/* badges page */
.bg-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
.bg-bd { display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: var(--acts-card); border: 1px solid var(--acts-border); }
.bg-bd .bg-badge-ic { background: var(--acts-gold); } .bg-bd.is-locked { opacity: .6; } .bg-bd.is-locked .bg-badge-ic { background: var(--acts-grey-soft); color: var(--acts-muted); }
.bg-bd b { display: block; color: var(--acts-navy); font-size: .875rem; } .bg-bd small { display: block; color: var(--acts-muted); font-size: .75rem; line-height: 1.35; }
.bg-hist { list-style: none; margin: 0; padding: 0; } .bg-hist li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--acts-divider); font-size: .875rem; } .bg-hist li:first-child { border-top: 0; } .bg-hist small { color: var(--acts-muted); }
.bg-priv { display: flex; gap: 10px; align-items: flex-start; } .bg-priv input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
@media (min-width: 900px) { .bg-tiles { gap: 14px; } .bg-card { padding: 20px; } .bg-q { font-size: 1.3125rem; } .bg-badges { grid-template-columns: repeat(3, 1fr); } }
.hm3-og { order: 26; }
.hm3-og .bg-card { margin: 0; }
@media (min-width: 1024px) { .hm3-og { order: 5; max-width: 680px; width: 100%; } }

/* ============================================================ Bible Games honesty pledge, reminder line and countdown ring (Round 203) */
.bg-honest { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .78rem; font-weight: 600; color: var(--acts-muted); }
.bg-honest svg { color: var(--acts-gold-text); flex: none; }
.bg-start { margin-top: 4px; min-height: 44px; }
.bg-daily .bg-q:focus { outline: 0; }
.bg-pledge-panel { font-size: 16px; line-height: 1.55; color: var(--acts-ink); }
.bg-pledge-panel:focus { outline: 0; }
.bg-pl-h { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font: 600 1.375rem/1.25 var(--ui-display); color: var(--acts-navy); }
.bg-pl-h svg { flex: none; color: var(--acts-gold-text); }
.bg-pl-text { margin: 0 0 14px; font-size: 16px; }
.bg-pl-verse { margin: 0 0 14px; padding: 12px 14px; border-left: 4px solid var(--acts-gold); border-radius: 0 12px 12px 0; background: var(--acts-cream); }
.bg-pl-verse p { margin: 0; font: italic 500 1.0625rem/1.45 var(--ui-display); color: var(--acts-navy); }
.bg-pl-verse footer { margin-top: 4px; font-size: .875rem; font-weight: 700; color: var(--acts-gold-text); }
.bg-pl-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: 0 0 14px; padding: 10px 12px; border: 1.5px solid var(--acts-border); border-radius: 12px; background: var(--acts-card); font-size: 16px; font-weight: 600; color: var(--acts-navy); cursor: pointer; }
.bg-pl-check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--acts-navy); }
.bg-pl-check:focus-within { outline: 3px solid var(--acts-blue); outline-offset: 2px; }
.bg-pl-err { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--acts-red-soft); color: var(--acts-red-text); font-size: .875rem; font-weight: 600; }
.bg-pl-actions { display: flex; flex-direction: column; gap: 4px; }
.bg-pl-go { width: 100%; min-height: 48px; font-size: 16px; }
.bg-pl-go:disabled { opacity: .5; cursor: not-allowed; }
.bg-pl-later { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; color: var(--acts-muted); text-decoration: none; }
.bg-pl-later:hover { color: var(--acts-navy); }
.bg-timer { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font: 700 .8125rem/1 var(--ui-font); color: var(--acts-navy); }
.bg-timer svg { transform: rotate(-90deg); margin-right: 4px; }
.bg-timer circle { fill: none; stroke-width: 3.5; }
.bg-timer-bg { stroke: var(--acts-grey-soft); }
.bg-timer-ring { stroke: var(--acts-gold); stroke-linecap: round; }
.bg-fb.is-timeout { background: var(--acts-gold-soft); } .bg-fb.is-timeout .bg-fb-h { color: var(--acts-gold-text); }
.bg-res.is-timeout { color: var(--acts-gold-text); }
body.mp-body:has([data-bg-sheet-page]) .ui-nav { display: none; }   /* the pledge page is a sheet of its own: the bottom bar would sit on its button */
.bg-pledge-panel label.bg-pl-check, .bg-pledge-panel label.bg-pl-check > span { font: 600 16px/1.4 var(--ui-font); color: var(--acts-navy); }

/* Round 204 — Bible Games: player level, messages from church leaders, small celebration */
.bg-lvl { margin: 0 0 12px; }
.bg-lvl-t { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 700; color: var(--acts-navy); font-size: 1rem; line-height: 1.35; }
.bg-lvl-t svg { color: var(--acts-gold-text); flex: none; }
.bg-lvl-bar { height: 10px; border-radius: 999px; background: var(--acts-line, #e3e8ef); overflow: hidden; }
.bg-lvl-bar span { display: block; height: 100%; border-radius: 999px; background: var(--acts-navy); }
.bg-msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bg-msg { display: flex; gap: 12px; padding: 12px; border-radius: 12px; background: var(--acts-surface-2, #f6f8fb); font-size: 1rem; line-height: 1.5; }
.bg-msg.is-new { background: var(--acts-gold-soft); }
.bg-msg-ic { flex: none; color: var(--acts-gold-text); padding-top: 2px; }
.bg-msg small { color: var(--acts-muted); font-size: .8rem; }
.bg-msg-body { display: block; margin-top: 4px; color: var(--acts-ink, #1f2a37); }
.bg-pl-priv { margin: 0 0 12px; font-size: .8125rem; color: var(--acts-muted); }
.bg-party { position: relative; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--acts-gold-soft); color: var(--acts-navy); overflow: hidden; }
.bg-party-dots { position: absolute; inset: 0; pointer-events: none; }
.bg-party-dots i { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--acts-gold-text); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .bg-party-dots i { animation: bg-pop 1.4s ease-out 1 both; }
  .bg-party-dots i:nth-child(2n) { background: var(--acts-navy); }
  .bg-party-dots i:nth-child(1) { --x: -120px; --y: -30px; } .bg-party-dots i:nth-child(2) { --x: -70px; --y: 26px; } .bg-party-dots i:nth-child(3) { --x: -20px; --y: -34px; } .bg-party-dots i:nth-child(4) { --x: 30px; --y: 28px; }
  .bg-party-dots i:nth-child(5) { --x: 80px; --y: -26px; } .bg-party-dots i:nth-child(6) { --x: 130px; --y: 24px; } .bg-party-dots i:nth-child(7) { --x: 170px; --y: -20px; } .bg-party-dots i:nth-child(8) { --x: -160px; --y: 18px; }
  @keyframes bg-pop { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1); opacity: 0; } }
}

/* ===== Round 205 — Snack Sponsorship pause banner (the Snack Sponsorship page, the Home card and My Week share it). Calm, not an error. ===== */
.spn-pause { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fff3dc; color: #5c3a00; border: 1px solid #f0d9a8; font-size: .9rem; line-height: 1.4; }
.spn-pause strong { display: block; font-size: .95rem; }
.spn-pause-ic { flex: none; font-size: 1.1rem; line-height: 1.3; }
.spn-pause-line { display: block; margin-top: 2px; }
.spn-pause--compact { margin: 6px 0 0; padding: 6px 10px; font-size: .84rem; }
.spn-pause--compact strong { font-size: .86rem; }
:root[data-theme="dark"] .spn-pause, body.is-dark .spn-pause { background: #3a2c10; color: #f5deaa; border-color: #5d4a1c; }
.spn-pause-refused { font-size: 1rem; margin: 0 0 12px; }

/* ---------- Round 206: Approvals (over-budget approval panel) ---------- */
.apv-tabs { margin: 4px 0 12px; }
.apv-list { display: grid; gap: 10px; max-width: 760px; }
.apv-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-height: 44px; border-radius: 16px; background: var(--acts-card); border: 1px solid var(--acts-border); border-left-width: 5px; color: var(--acts-ink); text-decoration: none; }
.apv-card--wait { border-left-color: var(--acts-red); }
.apv-card--mid { border-left-color: var(--acts-gold); }
.apv-card--ok { border-left-color: #2f7d57; }
.apv-card--bad { border-left-color: var(--acts-muted); }
.apv-card-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.apv-card-top b { font-size: 1rem; overflow-wrap: anywhere; }
.apv-amt { font: 700 .8125rem/1.3 var(--ui-font); color: var(--acts-red-text); }
.apv-card-mid { font-size: .875rem; color: var(--acts-muted); overflow-wrap: anywhere; }
.apv-card-bot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: .8125rem; }
.apv-status { font-weight: 700; }
.apv-mine { padding: 2px 10px; border-radius: 999px; background: var(--acts-gold-soft); color: var(--acts-gold-text); font-weight: 600; }
.apv-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 700 .75rem/1.5 var(--ui-font); }
.apv-badge--wait { background: var(--acts-red-soft); color: var(--acts-red-text); }
.apv-badge--ok { background: #e3f5ec; color: #1f6b46; }
.apv-badge--bad, .apv-badge--mid { background: var(--acts-divider); color: var(--acts-muted); }
.apv-cols .mp-card { margin-bottom: 14px; }
.apv-over { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--acts-red-soft); color: var(--acts-red-text); }
.apv-over b { font-size: 1.25rem; }
.apv-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 0; }
.apv-dl div { min-width: 0; }
.apv-dl .wide { grid-column: 1 / -1; }
.apv-dl dt { font: 600 .75rem/1.3 var(--ui-font); color: var(--acts-muted); text-transform: uppercase; letter-spacing: .03em; }
.apv-dl dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.apv-table { width: 100%; border-collapse: collapse; }
.apv-table th, .apv-table td { padding: 8px 0; border-bottom: 1px solid var(--acts-divider); text-align: left; font-weight: 400; }
.apv-table td { text-align: right; font-variant-numeric: tabular-nums; }
.apv-over-row th, .apv-over-row td { font-weight: 700; color: var(--acts-red-text); border-bottom: 0; }
.apv-lines { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.apv-lines li { display: flex; flex-direction: column; font-size: .8125rem; }
.apv-lines span { color: var(--acts-muted); }
.apv-sub { font: 700 .8125rem/1.3 var(--ui-font); margin: 14px 0 4px; }
.apv-form { display: grid; gap: 8px; }
.apv-form textarea, .apv-form input[type=password] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--acts-border); border-radius: 12px; font: inherit; background: #fff; }
.apv-form label { font-weight: 600; font-size: .875rem; }
.apv-form label small { font-weight: 400; color: var(--acts-muted); }
.apv-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 4px; }
.apv-btn { min-height: 46px; justify-content: center; text-align: center; padding: 8px 6px; font-weight: 700; }
.apv-btn--reject { background: var(--acts-red-soft); color: var(--acts-red-text); border: 1px solid var(--acts-red); }
.apv-btn--approve { background: var(--acts-navy); color: #fff; }
.apv-mine-note, .apv-locked { padding: 10px 12px; border-radius: 12px; background: var(--acts-gold-soft); color: var(--acts-gold-text); margin: 0 0 10px; }
.apv-count { font-size: 1rem; margin: 0 0 2px; }
.apv-people, .apv-files, .apv-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.apv-person { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: baseline; }
.apv-mark { font-weight: 700; text-align: center; }
.apv-person--approve .apv-mark { color: #1f6b46; }
.apv-person--reject .apv-mark { color: var(--acts-red); }
.apv-person--none .apv-mark { color: var(--acts-muted); }
.apv-pstate { grid-column: 2; font-size: .75rem; color: var(--acts-muted); }
.apv-pnote { grid-column: 2; font-size: .8125rem; overflow-wrap: anywhere; }
.apv-files a { display: block; padding: 8px 0; min-height: 36px; overflow-wrap: anywhere; }
.apv-files small { color: var(--acts-muted); }
.apv-comments li { padding-bottom: 8px; border-bottom: 1px solid var(--acts-divider); }
.apv-comments p { margin: 2px 0 0; }
@media (max-width: 420px) { .apv-dl { grid-template-columns: 1fr; } .apv-buttons { grid-template-columns: 1fr; } }
body.mp-body .apv-buttons .apv-btn { min-height: 46px; height: auto; padding-top: 10px; padding-bottom: 10px; line-height: 1.2; }