/*
 * 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 {
  /* Round 228 — ONE laptop container for every Members Portal page: the top bar, Home's three columns, every page's content and the
   * ACTS Messenger card all use these two values, so nothing moves by a pixel when you switch tabs. --portal-read is the narrower
   * reading column used INSIDE the container by pages that are one column of text (it never changes the page's own edges). */
  --portal-max: 1304px;
  --portal-pad: 32px;
  --portal-read: 824px;
  --acts-navy: #0B1F3A;       /* primary dark: headers, primary buttons, active nav, hero cards */
  --acts-ink: #172B4D;        /* body text */
  --acts-muted: #64748B;      /* secondary text (5.3:1 on cream) */
  --acts-cream: #FAFAF8;      /* page background */
  --acts-card: #FFFFFF;
  --acts-divider: #EEF1F5;
  --acts-border: #E5E9EF;
  --acts-gold: #D4A437;       /* 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: #DC3545;        --acts-red-soft: #F6E7E1;   --acts-red-text: #A3452E;
  --acts-green: #16865D;      --acts-green-soft: #E2F1E8;
  --acts-purple: #5B4B9A;     --acts-purple-soft: #F1EEF8;
  --acts-grey-soft: #ECE8DF;
  --acts-nav-line: #E5E9EF;
  --acts-on-navy: #FFFFFF;
  --acts-scrim: rgba(11, 31, 58, .5);
  --acts-shadow: 0 1px 2px rgba(11, 31, 58, .06), 0 4px 16px rgba(11, 31, 58, .05);
  --acts-shadow-up: 0 -8px 32px rgba(11, 31, 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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-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 (Round 247): Home · Read · Quest · Journal · More ---- */
  .ui-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 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; }
  button.ui-nav-i { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
  .ui-nav-dot { position: absolute; top: -2px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--acts-red); box-shadow: 0 0 0 2px var(--acts-card); }
  .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; }
  .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 var(--portal-pad); max-width: var(--portal-max); margin-inline: auto; }
  body.mp-ui .mp-main { max-width: 784px; margin-inline: auto; padding: 32px var(--portal-pad) 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: var(--portal-max); }
  .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)):not(:has(.hm3-cols)) { max-width: var(--portal-read); }   /* a reading column inside the shared container, not a second container */
  body.mp-ui .mp-main:not(:has(.ui-cols)):not(:has(.hm3-cols)) .mp-narrow { max-width: none; margin-left: 0; margin-right: 0; width: 100%; }
  body.mp-ui .mp-main:not(:has(.ui-cols)):not(:has(.hm3-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) {
  :root { --portal-pad: 20px; }   /* Round 228: the narrower side space of this range belongs to the container, so the content follows the top bar */
  body.mp-ui .mp-brand-text { display: none; }
  body.mp-ui .mp-header-inner { 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-right { margin-right: -10px; } }   /* Round 228: the profile button's 10px of padding sits outside the container, so the ⌄ is flush with the container edge (= Home's right column = the Messenger card) */
@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) {
  .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; }
.hm3-og-bar { display: none; }
@media (min-width: 1024px) {
  /* Round 232: laptops show the greeting first, then the Bible Games (right after the greeting, before "Waiting for you") */
  .hm3-og { order: 11; max-width: 680px; width: 100%; }
  .hm3-og-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
  .hm3-og-t { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--acts-navy, #13233A); font-size: 15px; }
  .hm3-og-btn { min-width: 96px; }
  .hm3-og.is-folded .hm3-og-body { display: none; }
}

/* ============================================================ 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; }

/* Round 216 — Family → Children: one vertical card (details on top, a thin divider, then the actions), never buttons beside narrow text */
.fx-kids { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fx-kid { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px; border: 1px solid #E3DCCD; border-radius: 14px; background: #fff; }
.fx-kid-top { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
.fx-kid .fx-kid-av { width: 64px; height: 64px; font-size: 1.25rem; flex: none; }
.fx-kid-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-kid-name { display: block; font-size: 16px; line-height: 1.35; font-weight: 700; color: #13233A; overflow-wrap: anywhere; }
.fx-kid-line { display: block; font-size: 14px; line-height: 1.45; color: #5A6272; }
.fx-kid-grade { display: flex; align-items: center; gap: 6px; }
.fx-kid-grade svg { flex: none; }
.fx-kid-badge { align-self: flex-start; margin-top: 6px; }
.fx-kid-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid #E3DCCD; }
body.mp-body .fx-kid-actions .btn.btn-sm:not(#mc) { display: inline-flex; align-items: center; justify-content: center; height: auto; min-height: 40px; border-radius: 999px; padding: 0 18px; max-width: 100%; text-align: center; font-size: .9rem; }
.fx-kid-actions .mp-meta { flex: 1 1 100%; font-size: 13px; }
@media (min-width: 768px) { .fx-kids { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } }
@media (max-width: 767px) { body.mp-body .fx-kid-actions .btn.btn-sm:not(#mc) { flex: 1 1 0; min-width: 0; } }
/* the "2 children · Sort by" row: one line on a laptop with the full select text; the select goes under the count on a phone */
.fm-children .mp-sortbar { flex-wrap: nowrap; align-items: center; margin-bottom: 16px; }
body.mp-body .fm-children .mp-sortbar .ls-sort.field select:not(#mc) { width: 240px; min-width: 0; max-width: 100%; }
@media (max-width: 767px) {
  .fm-children .mp-sortbar { flex-wrap: wrap; flex-direction: column; align-items: stretch; gap: 8px; }
  .fm-children .mp-sortbar .ls-sort { margin-left: 0; width: 100%; }
  body.mp-body .fm-children .mp-sortbar .ls-sort.field select:not(#mc) { width: 100%; max-width: none; }
  .fm-children .mp-sortbar .ls-sort.field { flex: 1 1 auto; }
}

/* Round 218 — unread count beside "Messages" in the profile menu */
.mp-menu .mp-menu-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acts-red); color: #fff; font-size: .75rem; font-weight: 700; line-height: 20px; text-align: center; }
.mp-menu a:has(.mp-menu-count) { display: flex; align-items: center; gap: 8px; }

/* ---- Round 221 / 225 — the floating ACTS Messenger button (it IS the anchor icon: no extra circle) and the chat icon in the top bar ----
   Phones and tablets (< 1024 px) always; laptops only when System Settings → ACTS Messenger → "Show the floating button on laptops" is on. */
.acts-msgr-ico { display: block; flex: none; }
.ui-tone-msgr, .cx-tile.cx-tone-msgr { background: transparent !important; }
.mp-msgr .acts-msgr-ico, .ui-iconbtn[data-mmu] .acts-msgr-ico { display: block; }
.mp-msgr .mp-bell-count[hidden], .ui-iconbtn[data-mmu] .ui-dot[hidden], .mmu-fab-badge[hidden] { display: none; }
.mp-msgr .mp-bell-count, .ui-iconbtn[data-mmu] .ui-dot { background: #C8362F; color: #fff; border-color: var(--acts-cream, #F7F3EA); }
.mmu-fab { display: none; position: fixed; z-index: 60; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; min-width: 48px; min-height: 48px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; color: inherit; text-decoration: none;
  align-items: center; justify-content: center; filter: drop-shadow(0 4px 10px rgba(19, 35, 58, .25));
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: width .18s ease, height .18s ease, opacity .18s ease, transform .15s ease, box-shadow .15s ease; }
.mmu-fab .acts-msgr-ico { width: 100%; height: 100%; }
.mmu-fab:hover, .mmu-fab:focus-visible { transform: scale(1.05); --msgr-ring: #D9AE55; }
.mmu-fab:focus-visible { outline: 2px solid #13233A; outline-offset: 2px; }
.mmu-fab:active { transform: scale(.95); }
.mmu-fab.is-open { --msgr-ring-w: 3.43; box-shadow: 0 0 0 4px rgba(201, 153, 63, .25); }                    /* panel / sheet showing: ring 3 px … */
.mmu-fab.is-open:hover, .mmu-fab.is-open:focus-visible { --msgr-ring-w: 4.57; }                              /* … 4 px when also hovered / focused */
.mmu-fab-badge { position: absolute; top: -1px; right: -1px; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #C8362F; color: #fff;
  font: 700 .75rem/18px var(--ui-font, system-ui, sans-serif); font-style: normal; text-align: center; border: 2px solid var(--acts-cream, #F7F3EA); pointer-events: none; }
.mmu-fab.is-small { width: 48px; height: 48px; }
.mmu-fab.is-hidden { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; visibility: hidden; }
@media (max-width: 1023px) {
  body.mp-ui.mp-has-fab { padding-bottom: 0; }
  body.mp-has-fab .mp-main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }      /* tablets: no bottom nav */
  body.mp-has-fab .ui-toast { bottom: calc(16px + 56px + 12px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 720px) {
  .mmu-fab { bottom: calc(var(--ui-nav-h) + 16px); }      /* --ui-nav-h already includes the bottom safe area; the button sits at the RIGHT edge, well clear of the gold centre + */
  body.mp-has-fab .mp-main { padding-bottom: calc(var(--ui-nav-h) + 84px); }
  body.mp-has-fab .ui-toast { bottom: calc(var(--ui-nav-h) + 16px + 56px + 12px); }
  /* with the sticky action bar the bottom nav is gone: the button is not rendered there; this is a safety net */
  body.mp-has-actionbar .mmu-fab { display: none; }
  /* Round 248: no floating ACTS Messenger button on phones (Messenger is in the bottom bar) */
  .mmu-fab, .mmu-fab--laptop { display: none !important; }
}
@media (min-width: 1024px) {
  .mmu-fab--laptop { display: inline-flex; right: 24px; bottom: 24px; }
  .mmu-fab--laptop:not(.mmu-fab--phone) { transition: right .22s ease, transform .15s ease, opacity .18s ease; }
  .mmu-fab--phone:not(.mmu-fab--laptop) { display: none; }
}
@media (min-width: 721px) and (max-width: 1023px) {
  body.mp-has-fab .mp-header-right .mp-msgr { display: none; }          /* tablets: the floating button is the shortcut, the header has no room for a second icon */
  .mp-header-right .mp-msgr { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .mmu-fab, .mmu-fab:not(.mmu-fab--phone) { transition: none; } .mmu-fab:hover, .mmu-fab:focus-visible, .mmu-fab:active { transform: none; } }
@media print { .mmu-fab { display: none !important; } }
.msg-title-acts { color: #8A6216; letter-spacing: .02em; }
:root[data-theme="dark"] .msg-title-acts { color: #E3B861; }
/* Round 221: the laptop header gained a chat icon beside the bell — make room so the church name is never clipped */
@media (min-width: 1024px) {
  .mp-header-inner:has(.mp-msgr) .mp-topsearch input { width: 180px !important; }
  .mp-header-inner:has(.mp-msgr) .mp-header-right .mp-bell { width: 40px; height: 40px; }
}
@media (min-width: 1024px) and (max-width: 1359px) { .mp-header-inner:has(.mp-msgr) .mp-brand-text { display: none; } }

/* Round 227 — the top bar never squeezes. The church name is shown in full or not at all, and the search shrinks to a magnifier button before anything overlaps
 * (assets/js/portal-header-fit.js adds .hdr-noname, then .hdr-iconsearch, only when the row would not fit). */
@media (min-width: 1024px) { body.mp-body .mp-brand { min-width: max-content; } body.mp-body .mp-brand-text { white-space: nowrap; } }
body.mp-body .mp-header-inner.hdr-noname .mp-brand-text { display: none !important; }
@media (min-width: 721px) {
  body.mp-body .mp-header-inner.hdr-iconsearch .mp-topsearch { margin-left: auto; margin-right: 8px; }
  body.mp-body .mp-header-inner.hdr-iconsearch .mp-topsearch input { width: 0 !important; padding: 0 !important; border: 0 !important; position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
  body.mp-body .mp-header-inner.hdr-iconsearch .mp-topsearch-b { position: static !important; width: 40px !important; height: 40px !important; }
}

/* =====================================================================================================================================
 * Round 230 — "Soft Anchor": readability over the soft page background (the background itself is assets/css/portal-backdrop.css).
 * Cards: white at 95 % with an 8 px blur on laptops (solid white on phones and where blur is not supported), a 1 px warm border and a soft shadow.
 * The laptop top bar: white at 92 % with a blur. The phone app bar and bottom bar: solid white. Text on the background stays ≥ 4.5 : 1 (t/r230_ui.py).
 * ===================================================================================================================================== */
body.mp-bg-soft :is(.ui-card, .mp-card, .cf-card:not(.hm3-album), .ui-list:not(.ui-list--flat)):not(:is(.ui-card, .mp-card, .cf-card, .ui-list) *) {
  border: 1px solid rgba(227, 220, 205, .9); box-shadow: 0 6px 24px rgba(19, 35, 58, .06);
}
/* text that can sit straight on the background is a shade darker, so it keeps ≥ 4.5 : 1 even over the misty hills and the anchor (on white it only gains contrast) */
body.mp-bg-soft { --acts-muted: #545B6A; --acts-gold-text: #7A5612; --pa-ink-soft: #545B6A; --pa-gold-ink: #7A5612; }
body.mp-bg-soft .mp-header { background: #fff; border-bottom: 1px solid var(--acts-divider); }
@media (min-width: 1024px) {
  @supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
    body.mp-bg-soft :is(.ui-card, .mp-card, .cf-card:not(.hm3-album), .ui-list:not(.ui-list--flat)):not(:is(.ui-card, .mp-card, .cf-card, .ui-list) *) {
      background-color: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    }
    body.mp-bg-soft .mp-header { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  }
}
@media (max-width: 720px) {
  body.mp-bg-soft .ui-head--home, body.mp-bg-soft .ui-head--inner { background: #fff; box-shadow: 0 1px 0 var(--acts-divider); }
  body.mp-bg-soft .ui-head--home .ui-avatar-ring .mp-avatar, body.mp-bg-soft .ui-head--inner .ui-avatar-ring .mp-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--acts-gold); }
  body.mp-bg-soft .ui-head--large { background: transparent; }
}
body.mp-bg-soft .ui-nav { background: #fff; }
/* ACTS Messenger (Soft look, laptops): the page anchor sits inside the chat pane, near its right edge */
@media (min-width: 1024px) { body.mp-bg-soft.mp-page-messages .pbg-anchor { right: calc(max(0px, (100vw - var(--portal-max)) / 2) + var(--portal-pad) + 56px); bottom: 15vh; } }

/* ---------------------------------------------------------------------------------------------------------------------------------
 * Round 231 — the Sunrise photo (body.pbg-photo, on top of mp-bg-soft). The photo is brighter and bluer than the drawn background, so the
 * grey and gold text that sits straight on it is one more shade darker, and in ACTS Messenger the sender name above a message sits on a small
 * white tag (it can fall over the anchor and the rocks). Everything else (white cards, frosted panels, white bars) is unchanged.
 * --------------------------------------------------------------------------------------------------------------------------------- */
body.pbg-photo { --acts-muted: #383F4D; --acts-gold-text: #6B4B10; --pa-ink-soft: #383F4D; --pa-gold-ink: #6B4B10; }
body.pbg-photo.mp-page-messages { --msg-muted: #383F4D; }
body.pbg-photo #msg-app.msgr--soft { --s-muted: #383F4D; --s-blue: #1E4A78; }
body.pbg-photo #msg-app.msgr--soft .msg-m-name { display: inline-block; width: auto; max-width: 100%; padding: 1px 8px; border-radius: 8px; background: rgba(255, 255, 255, .86); }

/* ---------------------------------------------------------------------------------------------------------------------------------
 * Round 236 (v1.65.0) — My Faith Journal (members/my-faith-journal.php), the compact "browse first, edit second" layout.
 * Panels are white at 96% so the ocean background stays readable behind them. Type is small and calm: title 28px (desktop), section
 * 19px, record title 14px, body 14px, metadata 12px, badges 11px. Desktop: the list (about 38%) and the open entry or prayer (about 62%)
 * sit side by side. Phone: one list; the open entry or prayer takes the full screen. Writing opens in a drawer, only on request.
 * --------------------------------------------------------------------------------------------------------------------------------- */
body.mp-body .mfj-wrap { max-width: 1240px; margin: 0 auto; color: var(--acts-ink, #13233A); }
/* The journal is a list beside its entry (two columns on a laptop), so it uses the shared container, not the one-column reading width. */
body.mp-ui .mp-main:has(> .mfj-wrap):not(:has(.ui-cols)):not(:has(.hm3-cols)) { max-width: var(--portal-max); }
body.mp-body .mfj-head { margin: 0 0 10px; }
body.mp-body .mfj-headrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
body.mp-body .mfj-back { display: inline-flex; align-items: center; min-height: 40px; color: var(--acts-navy, #13233A); font-weight: 600; font-size: 14px; text-decoration: none; }
body.mp-body .mfj-private { margin: 0; font-size: 12px; color: #33475B; background: rgba(255, 255, 255, .96); border: 1px solid rgba(19, 35, 58, .10); padding: 3px 10px; border-radius: 999px; }
body.mp-body .mfj-title { margin: 6px 0 8px; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--acts-navy, #13233A); }
body.mp-body .mfj-h { margin: 0 0 6px; font-size: 19px; line-height: 1.25; font-weight: 700; color: var(--acts-navy, #13233A); }
body.mp-body .mfj-sub { margin-top: 16px; font-size: 16px; }
body.mp-body .mfj-seg { display: inline-flex; gap: 2px; padding: 3px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(19, 35, 58, .10); border-radius: 999px; box-shadow: 0 1px 2px rgba(19, 35, 58, .06); }
body.mp-body .mfj-seg-a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--acts-navy, #13233A); text-decoration: none; }
body.mp-body .mfj-seg-a.is-on { background: var(--acts-navy, #13233A); color: #fff; }
body.mp-body .mfj-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 10px; }
body.mp-body .mfj-toolbar .btn { min-height: 38px; }
body.mp-body .mfj-search { flex: 1 1 320px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
body.mp-body .mfj-search input[type="search"] { flex: 1 1 200px; min-width: 0; min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 999px; border: 1px solid rgba(19, 35, 58, .16); background: rgba(255, 255, 255, .96); }
body.mp-body .mfj-search select { flex: 0 0 auto; width: auto; min-height: 38px; padding: 0 30px 0 12px; font-size: 14px; border-radius: 999px; background: rgba(255, 255, 255, .96); }
body.mp-body .mfj-menu { position: relative; }
body.mp-body .mfj-menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 38px; border-radius: 999px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(19, 35, 58, .14); color: var(--acts-navy, #13233A); font-size: 12px; letter-spacing: .08em; cursor: pointer; user-select: none; }
body.mp-body .mfj-menu > summary::-webkit-details-marker { display: none; }
body.mp-body .mfj-menu-list { position: absolute; right: 0; top: 44px; z-index: 30; min-width: 190px; padding: 6px; background: #fff; border: 1px solid rgba(19, 35, 58, .12); border-radius: 12px; box-shadow: 0 8px 24px rgba(19, 35, 58, .18); }
body.mp-body .mfj-menu-list a { display: block; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--acts-ink, #13233A); text-decoration: none; }
body.mp-body .mfj-menu-list a:hover, body.mp-body .mfj-menu-list a:focus-visible { background: #EEF2F7; }
body.mp-body .mfj-monthbar { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
body.mp-body .mfj-month { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 700; text-align: center; color: var(--acts-navy, #13233A); }
body.mp-body .mfj-nav { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(19, 35, 58, .14); color: var(--acts-navy, #13233A); font-size: 20px; line-height: 1; text-decoration: none; }
body.mp-body .mfj-nav[aria-disabled="true"] { opacity: .4; pointer-events: none; }
body.mp-body .mfj-today { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(19, 35, 58, .14); font-size: 13px; font-weight: 600; color: var(--acts-navy, #13233A); text-decoration: none; }
body.mp-body .mfj-results { margin: 0 0 8px; font-size: 12px; }
body.mp-body .mfj-split { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
body.mp-body .mfj-master { min-width: 0; }
body.mp-body .mfj-detail { min-width: 0; }
body.mp-body .mfj-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
body.mp-body .mfj-row { display: grid; gap: 3px; padding: 10px 12px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(19, 35, 58, .10); border-radius: 12px; color: var(--acts-ink, #13233A); text-decoration: none; box-shadow: 0 1px 2px rgba(19, 35, 58, .05); }
body.mp-body .mfj-row.is-on { border: 2px solid var(--acts-navy, #13233A); padding: 9px 11px; }
body.mp-body .mfj-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.mp-body .mfj-row-date { font-size: 13px; font-weight: 700; color: var(--acts-navy, #13233A); }
body.mp-body .mfj-row-verse { font-size: 12px; font-style: italic; color: #33475B; }
body.mp-body .mfj-row-prev { font-size: 13px; line-height: 1.4; color: #33475B; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
body.mp-body .mfj-type { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: #EEF2F7; color: #13233A; font-size: 11px; font-weight: 600; white-space: nowrap; }
body.mp-body .mfj-badge { flex: none; display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
body.mp-body .mfj-mood-peaceful { background: #E3F4E8; color: #1E5E3A; }
body.mp-body .mfj-mood-thankful { background: #FBF0D4; color: #6B4300; }
body.mp-body .mfj-mood-joyful { background: #F3E3F6; color: #6B2A7A; }
body.mp-body .mfj-mood-anxious { background: #FDE6D2; color: #7A3A0A; }
body.mp-body .mfj-mood-struggling { background: #E6ECF4; color: #33475B; }
body.mp-body .mfj-badge--waiting { background: #FFF1D6; color: #6B4300; }
body.mp-body .mfj-badge--ongoing { background: #E4EEF9; color: #1D4F91; }
body.mp-body .mfj-badge--answered { background: #E7F3EC; color: #1E5E3A; }
body.mp-body .mfj-more { margin: 8px 0; }
body.mp-body .mfj-empty, body.mp-body .mfj-pick { padding: 18px; text-align: center; background: rgba(255, 255, 255, .96); border-radius: 14px; border: 1px solid rgba(19, 35, 58, .10); }
body.mp-body .mfj-empty .mp-empty, body.mp-body .mfj-pick { font-size: 13px; margin: 0; }
body.mp-body .mfj-card { padding: 0; }
body.mp-body .mfj-read { padding: 16px 18px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(19, 35, 58, .10); border-radius: 14px; box-shadow: 0 1px 2px rgba(19, 35, 58, .06), 0 4px 14px rgba(19, 35, 58, .06); }
body.mp-body .mfj-read-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
body.mp-body .mfj-read-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.mp-body .mfj-back-m { display: none; }
body.mp-body .mfj-verse { margin: 4px 0 8px; font-size: 13px; font-style: italic; color: #33475B; }
body.mp-body .mfj-body { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; color: var(--acts-ink, #13233A); }
body.mp-body .mfj-answer { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #E7F3EC; }
body.mp-body .mfj-answered { color: #1E5E3A; font-weight: 600; font-size: 13px; margin: 6px 0; }
body.mp-body .mfj-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
body.mp-body .mfj-acts form { margin: 0; }
body.mp-body .mfj-panel { margin-top: 12px; padding: 12px; border-radius: 12px; background: #F6F8FB; border: 1px solid rgba(19, 35, 58, .08); }
body.mp-body .mfj-form { display: grid; gap: 10px; margin-top: 10px; }
body.mp-body .mfj-form .field { margin: 0; }
body.mp-body .mfj-form label { font-size: 13px; font-weight: 600; }
body.mp-body .mfj-form textarea, body.mp-body .mfj-form input[type="text"], body.mp-body .mfj-form input[type="date"], body.mp-body .mfj-form select { font-size: 14px; }
body.mp-body .mfj-prompt { margin: 0 0 4px; font-size: 13px; font-style: italic; color: #33475B; }
body.mp-body .mfj-moods { border: 0; padding: 0; margin: 0; min-width: 0; }
body.mp-body .mfj-moods legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
body.mp-body .mfj-mood { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 4px 11px; min-height: 36px; border-radius: 999px; border: 1px solid rgba(19, 35, 58, .14); background: #fff; color: var(--acts-ink, #13233A); font-size: 12px; font-weight: 600; cursor: pointer; }
body.mp-body .mfj-mood input { margin: 0; }
body.mp-body .mfj-mood.mfj-mood-peaceful { background: #E3F4E8; color: #1E5E3A; }
body.mp-body .mfj-mood.mfj-mood-thankful { background: #FBF0D4; color: #6B4300; }
body.mp-body .mfj-mood.mfj-mood-joyful { background: #F3E3F6; color: #6B2A7A; }
body.mp-body .mfj-mood.mfj-mood-anxious { background: #FDE6D2; color: #7A3A0A; }
body.mp-body .mfj-mood.mfj-mood-struggling { background: #E6ECF4; color: #33475B; }
body.mp-body .mfj-mood:has(input:checked) { background: var(--acts-navy, #13233A); border-color: var(--acts-navy, #13233A); color: #fff; }
body.mp-body .mfj-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
body.mp-body .mfj-notice { display: grid; gap: 10px; margin-top: 10px; padding: 14px; border-radius: 12px; background: #F6F8FB; border: 1px solid rgba(19, 35, 58, .08); font-size: 14px; }
body.mp-body .mfj-notice p { margin: 0; }
body.mp-body .mfj-scrim-n { display: none; }
body.mp-body .mfj-drawer-wrap { position: fixed; inset: 0; z-index: 60; }
body.mp-body .mfj-scrim { position: absolute; inset: 0; background: rgba(19, 35, 58, .35); }
body.mp-body .mfj-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); overflow-y: auto; padding: 18px; background: rgba(255, 255, 255, .97); box-shadow: -8px 0 24px rgba(19, 35, 58, .2); }
body.mp-body .mfj-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
body.mp-body .mfj-close { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(19, 35, 58, .14); font-size: 13px; font-weight: 600; color: var(--acts-navy, #13233A); text-decoration: none; }
body.mp-body .mfj-remove { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(19, 35, 58, .10); }
body.mp-body .mfj-timeline { list-style: none; margin: 8px 0 12px; padding: 0 0 0 12px; border-left: 2px solid rgba(19, 35, 58, .14); }
body.mp-body .mfj-timeline li { display: grid; gap: 2px; margin-bottom: 10px; }
body.mp-body .mfj-when { font-size: 12px; color: #4a5865; }
body.mp-body .mfj-kind { font-size: 12px; font-weight: 700; color: var(--acts-navy, #13233A); }
body.mp-body .mfj-txt { font-size: 13px; overflow-wrap: anywhere; }
body.mp-body .mfj-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
body.mp-body .mfj-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(19, 35, 58, .12); font-size: 13px; font-weight: 600; color: var(--acts-navy, #13233A); text-decoration: none; }
body.mp-body .mfj-chip.is-on { background: var(--acts-navy, #13233A); border-color: var(--acts-navy, #13233A); color: #fff; }
body.mp-body .mfj-n { font-weight: 700; }
body.mp-body .mfj-thead { display: none; }
body.mp-body .mfj-table .mfj-prow { display: grid; gap: 4px 10px; align-items: center; padding: 12px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(19, 35, 58, .10); border-radius: 12px; margin-bottom: 6px; box-shadow: 0 1px 2px rgba(19, 35, 58, .05); }
body.mp-body .mfj-table .mfj-prow.is-on { border: 2px solid var(--acts-navy, #13233A); padding: 11px; }
body.mp-body .mfj-ptitle { grid-area: title; font-size: 14px; font-weight: 700; color: var(--acts-navy, #13233A); text-decoration: none; overflow-wrap: anywhere; }
body.mp-body .mfj-pfirst, body.mp-body .mfj-plast { font-size: 12px; color: #33475B; }
body.mp-body .mfj-pfirst::before, body.mp-body .mfj-plast::before { content: none; }
body.mp-body .mfj-quick { grid-area: status; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
body.mp-body .mfj-quick select { min-width: 100px; min-height: 36px; padding: 0 28px 0 10px; font-size: 13px; font-weight: 600; border-radius: 999px; border: 1px solid rgba(19, 35, 58, .16); background-color: #fff; }
body.mp-body .mfj-quick.mfj-badge--waiting select { background-color: #FFF1D6; color: #6B4300; }
body.mp-body .mfj-quick.mfj-badge--ongoing select { background-color: #E4EEF9; color: #1D4F91; }
body.mp-body .mfj-quick.mfj-badge--answered select { background-color: #E7F3EC; color: #1E5E3A; }
body.mp-body .mfj-set { min-height: 36px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(19, 35, 58, .16); background: #fff; font-size: 12px; font-weight: 600; color: var(--acts-navy, #13233A); cursor: pointer; }
body.mp-body .mfj-pmenu { grid-area: menu; justify-self: end; }
body.mp-body .mfj-table .mfj-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
body.mp-body .mfj-table .mfj-ptitle { flex: 1 1 0; min-width: 0; }
body.mp-body .mfj-table .mfj-pmenu { flex: 0 0 auto; }
body.mp-body .mfj-table .mfj-quick { flex: 1 1 100%; flex-wrap: nowrap; width: 100%; }
body.mp-body .mfj-table .mfj-quick select { flex: 1 1 auto; min-width: 0; width: auto; }
body.mp-body .mfj-table .mfj-prayer-meta { flex: 1 1 100%; }
body.mp-body .mfj-prayer-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 4px 14px; }
/* Tablet and phone (below 1024px): one list at a time. An open entry or prayer takes the full width; "back" returns to the list. */
@media (max-width: 1023px) {
  body.mp-body .mfj-split.has-detail .mfj-master { display: none; }
  body.mp-body .mfj-split:not(.has-detail) .mfj-detail { display: none; }
  body.mp-body .mfj-back-m { display: inline-flex; align-items: center; min-height: 40px; margin-bottom: 4px; color: var(--acts-navy, #13233A); font-size: 14px; font-weight: 600; text-decoration: none; }
  body.mp-body .mfj-seg-a { min-height: 40px; }
  body.mp-body .mfj-toolbar .mfj-menu { margin-left: auto; order: 2; }
  body.mp-body .mfj-toolbar .mfj-search { order: 3; flex: 1 1 100%; }
  body.mp-body .mfj-search select { flex: 1 1 auto; width: auto; }
  body.mp-body .mfj-search input[type="search"] { flex: 1 1 100%; }
  body.mp-body .mfj-menu > summary { width: 44px; height: 40px; }
  body.mp-body .mfj-chip { min-height: 40px; }
}
/* Prayer table: from 900px it is a table; the phone rows above are stacked. */
@media (min-width: 900px) {
  body.mp-body .mfj-thead { display: grid; grid-template-columns: minmax(0, 1fr) 92px 152px 100px 34px; gap: 8px; padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4a5865; }
  body.mp-body .mfj-table .mfj-prow { grid-template-columns: minmax(0, 1fr) 92px 152px 100px 34px; grid-template-areas: "title first status last menu"; gap: 8px; padding: 8px 14px; font-size: 13px; border-radius: 10px; }
  body.mp-body .mfj-table .mfj-prow.is-on { padding: 7px 13px; }
  body.mp-body .mfj-pfirst { grid-area: first; }
  body.mp-body .mfj-quick { grid-area: status; flex-wrap: nowrap; }
  body.mp-body .mfj-plast { grid-area: last; }
  body.mp-body .mfj-prayer-meta { display: contents; }
  body.mp-body .mfj-pmenu { grid-area: menu; }
  body.mp-body .mfj-drawer { width: 460px; }
}
/* Laptop: the list (about 38%) and the open entry (about 62%) sit side by side; prayers give the list a little more room. */
@media (min-width: 1024px) {
  body.mp-body .mfj-split { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 16px; }
  body.mp-body .mfj-split.mfj-split--p { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.mp-body .mfj-master { max-height: calc(100vh - 230px); overflow-y: auto; padding-right: 4px; }
  body.mp-body .mfj-detail { position: sticky; top: 12px; max-height: calc(100vh - 230px); overflow-y: auto; }
  body.mp-body .mfj-split:not(.has-detail) .mfj-detail { display: block; }
  body.mp-body .mfj-split .mfj-master { display: block; }
}
/* Laptop, narrower (1024 to 1239px): the Last updated column is left out of the table; it is in the prayer's own panel. */
@media (min-width: 1024px) and (max-width: 1239px) {
  body.mp-body .mfj-thead, body.mp-body .mfj-table .mfj-prow { grid-template-columns: minmax(0, 1fr) 92px 152px 34px; grid-template-areas: "title first status menu"; }
  body.mp-body .mfj-th-last, body.mp-body .mfj-plast { display: none; }
}
/* Phone: each prayer is a stacked row (title and menu, then the status, then the two dates). */
@media (max-width: 899px) {
  body.mp-body .mfj-table .mfj-pfirst::before { content: attr(data-label) ': '; color: #4a5865; }
  body.mp-body .mfj-table .mfj-plast::before { content: attr(data-label) ': '; color: #4a5865; }
  body.mp-body .mfj-table .mfj-prayer-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; }
  body.mp-body .mfj-table .mfj-pmenu { order: 1; }
  body.mp-body .mfj-table .mfj-prayer-meta { order: 2; }
  body.mp-body .mfj-quick .mfj-set, body.mp-body .mfj-quick select { min-height: 40px; }
}
/* Round 231/232: section links ("See my week", "Open") sit straight on the photo's sea and rocks on some screens: one shade deeper keeps them at 4.5 : 1 */
body.pbg-photo .ui-sec-head .ui-link { color: #1E3A5F; }

/* Round 235 (v1.64.0): the simplified Me page (profile card, three rows), the My Groups footer line and My badges on Home. */
.me-card-link { display: flex; align-items: center; gap: 16px; color: #fff; text-decoration: none; }
.me-card-link .me-id { display: flex; flex-direction: column; min-width: 0; }
.me-card-link .me-photo { flex: 0 0 auto; }
.me-card-link .me-since { display: block; margin-top: 4px; font-size: .875rem; color: rgba(255, 255, 255, .9); }
.me-open { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: .8125rem; font-weight: 700; color: var(--acts-gold); }
.gx-foot--line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.bg-hb { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .08); }
.bg-hb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.bg-hb-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.bg-hb-streak { 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-hb-go { margin-left: auto; display: inline-flex; }
.bg-hb .bg-badge-row { margin-top: 8px; }

/* ---------------------------------------------------------------------------------------------------------------
   Round 238 (v1.67.0) — My Faith Journal → Prayers: one toolbar (search, status, New Prayer), compact rows with the
   status set from the row, the selected prayer with its original text and Prayer Journey, the Mark as answered dialog,
   and a wide editor with an auto-growing prayer box. Mobile: stacked rows and a near-full-screen editor.
   --------------------------------------------------------------------------------------------------------------- */
body.mp-body .mfj-ptoolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 10px; }
body.mp-body .mfj-ptoolbar .mfj-search { flex: 1 1 360px; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0; }
body.mp-body .mfj-qwrap { position: relative; flex: 1 1 220px; min-width: 0; }
body.mp-body .mfj-qwrap input[type="search"] { width: 100%; min-height: 38px; padding: 0 40px 0 14px; font-size: 14px; border-radius: 999px; border: 1px solid rgba(19, 35, 58, .16); background: rgba(255, 255, 255, .96); }
body.mp-body .mfj-qclear { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: #EEF2F7; color: #33475B; font-size: 18px; line-height: 1; text-decoration: none; }
body.mp-body .mfj-fsel { flex: 0 0 auto; width: auto; min-width: 176px; min-height: 38px; padding: 0 30px 0 12px; font-size: 14px; font-weight: 600; border-radius: 999px; border: 1px solid rgba(19, 35, 58, .16); background-color: rgba(255, 255, 255, .96); }
body.mp-body .mfj-ptoolbar .mfj-new { min-height: 38px; white-space: nowrap; }
body.mp-body .mfj-ptoolbar > .mfj-menu { flex: 0 0 auto; }

body.mp-body .mfj-thead { display: none; }
body.mp-body .mfj-table .mfj-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 12px; margin-bottom: 6px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(19, 35, 58, .10); border-radius: 12px; box-shadow: 0 1px 2px rgba(19, 35, 58, .05); }
body.mp-body .mfj-table .mfj-prow.is-on { border: 2px solid var(--acts-navy, #13233A); padding: 9px 11px; }
body.mp-body .mfj-pmain { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.mp-body .mfj-ptitle { font-size: 14px; font-weight: 700; color: var(--acts-navy, #13233A); text-decoration: none; overflow-wrap: anywhere; }
body.mp-body .mfj-pverse { font-size: 12px; font-style: italic; color: #33475B; }
body.mp-body .mfj-pprev { font-size: 12px; color: #4a5565; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mp-body .mfj-pmenu { grid-column: 2; grid-row: 1; justify-self: end; }
body.mp-body .mfj-pfirst { grid-column: 1; grid-row: 2; font-size: 12px; color: #33475B; }
body.mp-body .mfj-plast { grid-column: 2; grid-row: 2; justify-self: end; font-size: 12px; color: #33475B; white-space: nowrap; }
body.mp-body .mfj-pstatus { grid-column: 1 / -1; grid-row: 3; display: flex; }
body.mp-body .mfj-pstatus .mfj-quick { margin: 0; }
body.mp-body .mfj-quick { display: inline-flex; margin: 0; }
body.mp-body .mfj-ssel { min-width: 128px; min-height: 36px; padding: 0 28px 0 12px; font-size: 13px; font-weight: 600; border-radius: 999px; border: 1px solid rgba(19, 35, 58, .16); background-color: #fff; color: var(--acts-ink, #13233A); }
body.mp-body .mfj-quick.mfj-badge--waiting .mfj-ssel { background-color: #FFF1D6; color: #6B4300; }
body.mp-body .mfj-quick.mfj-badge--ongoing .mfj-ssel { background-color: #E4EEF9; color: #1D4F91; }
body.mp-body .mfj-quick.mfj-badge--answered .mfj-ssel { background-color: #E7F3EC; color: #1E5E3A; }
body.mp-body .mfj-badge--archived { background: #ECEFF3; color: #4A5565; }
body.mp-body .mfj-mform { margin: 0; }
body.mp-body .mfj-mbtn { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font-size: 14px; color: var(--acts-ink, #13233A); cursor: pointer; }
body.mp-body .mfj-mbtn:hover, body.mp-body .mfj-mbtn:focus-visible { background: #EEF2F7; }
body.mp-body .mfj-mform .btn { min-height: 36px; }
body.mp-body .mfj-detail-empty { padding: 18px; text-align: center; background: rgba(255, 255, 255, .96); border-radius: 14px; border: 1px solid rgba(19, 35, 58, .10); display: grid; gap: 10px; justify-items: center; }
body.mp-body .mfj-detail-empty p { margin: 0; }
body.mp-body .mfj-archnote { margin: 8px 0; }
body.mp-body .mfj-acts .mfj-quick { display: inline-flex; align-items: center; }
body.mp-body .mfj-acts .mfj-quick .mfj-ssel { min-width: 140px; }
body.mp-body .mfj-verse { font-style: italic; }

/* The editor: wide and roomy; the prayer box grows with the text */
body.mp-body .mfj-drawer.mfj-drawer--wide { width: min(1040px, 74vw); padding: 20px 22px; }
body.mp-body .mfj-frow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
body.mp-body .mfj-pform .mfj-count { font-size: 12px; text-align: right; }
body.mp-body .mfj-pform textarea.mfj-autogrow { min-height: 300px; resize: vertical; overflow: hidden; line-height: 1.6; }
body.mp-body .mfj-static { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }

/* The answer dialog: small and centred */
body.mp-body .mfj-dialog-wrap .mfj-scrim { background: rgba(19, 35, 58, .45); }
body.mp-body .mfj-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; padding: 18px; background: rgba(255, 255, 255, .98); border-radius: 16px; box-shadow: 0 12px 36px rgba(19, 35, 58, .28); }
body.mp-body .mfj-dialog .mfj-h { margin-bottom: 2px; }

@media (min-width: 560px) {
  body.mp-body .mfj-frow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 900px) {
  body.mp-body .mfj-thead { display: grid; grid-template-columns: minmax(0, 1fr) 118px 150px 118px 40px; gap: 14px; align-items: center; padding: 0 14px 6px; font-size: 12px; font-weight: 700; color: #4a5565; }
  body.mp-body .mfj-thead .mfj-th-last { display: block; }
  body.mp-body .mfj-table .mfj-prow { grid-template-columns: minmax(0, 1fr) 118px 150px 118px 40px; grid-template-rows: auto; gap: 14px; align-items: center; padding: 10px 14px; }
  body.mp-body .mfj-table .mfj-prow.is-on { padding: 9px 13px; }
  body.mp-body .mfj-table .mfj-pmain { grid-column: 1; grid-row: 1; }
  body.mp-body .mfj-table .mfj-pfirst { grid-column: 2; grid-row: 1; }
  body.mp-body .mfj-table .mfj-pstatus { grid-column: 3; grid-row: 1; }
  body.mp-body .mfj-table .mfj-plast { grid-column: 4; grid-row: 1; justify-self: start; display: block; }
  body.mp-body .mfj-table .mfj-pmenu { grid-column: 5; grid-row: 1; }
  body.mp-body .mfj-table .mfj-pprev { display: block; }
}
@media (min-width: 1024px) {
  body.mp-body .mfj-split.mfj-split--p { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 16px; }
  body.mp-body .mfj-thead { grid-template-columns: minmax(0, 1fr) 112px 146px 112px 40px; }
  body.mp-body .mfj-table .mfj-prow { grid-template-columns: minmax(0, 1fr) 112px 146px 112px 40px; }
}
@media (min-width: 1400px) {
  body.mp-body .mfj-drawer.mfj-drawer--wide { width: min(1100px, 72vw); }
}
@media (max-width: 1023px) {
  body.mp-body .mfj-drawer.mfj-drawer--wide { width: min(980px, 92vw); }
  body.mp-body .mfj-pform textarea.mfj-autogrow { min-height: 260px; }
}
@media (max-width: 899px) {
  body.mp-body .mfj-ptoolbar .mfj-search { flex: 1 1 100%; flex-wrap: wrap; }
  body.mp-body .mfj-ptoolbar .mfj-qwrap { flex: 1 1 100%; }
  body.mp-body .mfj-fsel { flex: 1 1 auto; min-width: 0; }
  body.mp-body .mfj-ptoolbar .mfj-new { order: 2; }
  body.mp-body .mfj-ptoolbar > .mfj-menu { order: 3; }
  body.mp-body .mfj-pfirst::before { content: attr(data-label) ': '; color: #4a5565; }
  body.mp-body .mfj-plast::before { content: attr(data-label) ': '; color: #4a5565; }
  body.mp-body .mfj-table .mfj-prow { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 640px) {
  body.mp-body .mfj-drawer.mfj-drawer--wide { width: 100%; padding: 16px; }
  body.mp-body .mfj-drawer-wrap:has(.mfj-drawer--wide) { position: fixed; }
  body.mp-body .mfj-pform textarea.mfj-autogrow { min-height: 45vh; }
  body.mp-body .mfj-dialog { width: calc(100% - 24px); }
  body.mp-body .mfj-ssel { min-width: 0; flex: 1 1 auto; }
  body.mp-body .mfj-pstatus .mfj-quick { width: 100%; }
}

/* Round 238 — toolbar and column fixes after the first review */
body.mp-body .mfj-ptoolbar .mfj-search .mfj-fsel { flex: 0 0 180px; width: 180px; min-width: 0; }
body.mp-body .mfj-ptoolbar .mfj-search .mfj-qwrap { flex: 1 1 0; width: auto; min-width: 200px; }
body.mp-body .mfj-ptoolbar .mfj-search .mfj-qwrap input[type="search"] { width: 100%; }
@media (min-width: 1024px) and (max-width: 1279px) {
  body.mp-body .mfj-split.mfj-split--p { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  body.mp-body .mfj-thead { grid-template-columns: minmax(0, 1fr) 104px 136px 40px; }
  body.mp-body .mfj-thead .mfj-th-last { display: none; }
  body.mp-body .mfj-table .mfj-prow { grid-template-columns: minmax(0, 1fr) 104px 136px 40px; }
  body.mp-body .mfj-table .mfj-plast { display: none; }
  body.mp-body .mfj-table .mfj-pfirst { grid-column: 2; }
  body.mp-body .mfj-table .mfj-pstatus { grid-column: 3; }
  body.mp-body .mfj-table .mfj-pmenu { grid-column: 4; }
}
@media (min-width: 1280px) {
  body.mp-body .mfj-thead { grid-template-columns: minmax(0, 1fr) 112px 146px 112px 40px; }
  body.mp-body .mfj-table .mfj-prow { grid-template-columns: minmax(0, 1fr) 112px 146px 112px 40px; }
}
@media (max-width: 899px) {
  /* the search form dissolves into the toolbar, so status, New Prayer and the menu share one line */
  body.mp-body .mfj-ptoolbar .mfj-search { display: contents; }
  body.mp-body .mfj-ptoolbar .mfj-search .mfj-qwrap { flex: 1 1 100%; min-width: 0; order: 1; }
  body.mp-body .mfj-ptoolbar .mfj-search .mfj-fsel { flex: 1 1 0; width: auto; min-width: 0; order: 2; }
  body.mp-body .mfj-ptoolbar .mfj-new { order: 3; }
  body.mp-body .mfj-ptoolbar > .mfj-menu { order: 4; }
}
@media (min-width: 1280px) {
  body.mp-body .mfj-split.mfj-split--p { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: 16px; }
}

/* ---- Round 239: My Faith Journal in the reference format (day groups, rows with the time, centred Edit dialog) ---- */
body.mp-body .mfj-title, body.mp-body .mfj-read-title { font-family: Georgia, 'Times New Roman', serif; }
body.mp-body .mfj-toolbar { flex-wrap: nowrap; gap: 10px; margin: 10px 0 12px; }
body.mp-body .mfj-toolbar .mfj-search { flex: 1 1 auto; flex-wrap: nowrap; }
body.mp-body .mfj-search input[type="search"] { flex: 1 1 auto; min-height: 44px; border-radius: 999px; background: #fff; border: 1px solid rgba(19, 35, 58, .14); }
body.mp-body .mfj-toolbar .mfj-search select.mfj-typesel { flex: 0 0 auto; width: 160px; max-width: 160px; min-width: 0; min-height: 44px; background-color: #fff; }
body.mp-body .mfj-toolbar .mfj-search input#mfj-q { flex: 1 1 auto; width: auto; min-width: 0; }
body.mp-body .mfj-toolbar .mfj-new { min-height: 44px; padding: 0 20px; border-radius: 999px; white-space: nowrap; }
body.mp-body .mfj-toolbar .mfj-menu > summary { height: 44px; }
body.mp-body .mfj-new-m { display: none; }
body.mp-body .mfj-monthbar { justify-content: center; gap: 10px; margin: 6px 0 10px; }
body.mp-body .mfj-month { flex: 0 1 auto; font-size: 18px; }
body.mp-body .mfj-today { min-height: 36px; background: #fff; border: 1px solid rgba(19, 35, 58, .14); color: var(--acts-navy, #13233A); }
body.mp-body .mfj-split { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 18px; }
body.mp-body .mfj-master { padding: 14px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(19, 35, 58, .08); border-radius: 18px; box-shadow: 0 10px 30px rgba(19, 35, 58, .08); }
body.mp-body .mfj-day { margin: 0 0 10px; }
body.mp-body .mfj-day-h { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px; border-radius: 10px; background: #E6EEF8; color: var(--acts-navy, #13233A); font-size: 14px; font-weight: 700; cursor: pointer; }
body.mp-body .mfj-day-h::-webkit-details-marker { display: none; }
body.mp-body .mfj-day-h::after { content: ''; width: 8px; height: 8px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg); transition: transform .15s; flex: none; }
body.mp-body .mfj-day[open] > .mfj-day-h::after { transform: rotate(45deg); }
body.mp-body .mfj-day-n { margin-left: auto; font-size: 13px; font-weight: 600; color: #33475B; }
body.mp-body .mfj-day > .mfj-rows { margin-top: 4px; gap: 0; }
body.mp-body .mfj-day > .mfj-rows > li { border-bottom: 1px solid rgba(19, 35, 58, .08); }
body.mp-body .mfj-day > .mfj-rows > li:last-child { border-bottom: 0; }
body.mp-body .mfj-row { display: flex; align-items: center; gap: 14px; padding: 12px 12px; background: transparent; border: 0; border-radius: 0; }
body.mp-body .mfj-row.is-on { background: #EEF4FB; border: 0; padding: 12px 12px; box-shadow: inset 4px 0 0 var(--acts-navy, #13233A); }
body.mp-body .mfj-row-time { flex: 0 0 66px; font-size: 13px; font-weight: 600; color: #33475B; }
body.mp-body .mfj-row-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
body.mp-body .mfj-row-title { font-size: 15px; font-weight: 700; color: var(--acts-navy, #13233A); }
body.mp-body .mfj-row-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13px; color: #33475B; }
body.mp-body .mfj-row-verse { flex: none; font-weight: 600; color: var(--acts-navy, #13233A); }
body.mp-body .mfj-row-sep { flex: none; color: #8A99AA; }
body.mp-body .mfj-row-prev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; -webkit-line-clamp: unset; }
body.mp-body .mfj-row-go { flex: none; font-size: 22px; line-height: 1; color: #8A99AA; }
body.mp-body .mfj-read { padding: 22px 24px; border-radius: 18px; box-shadow: 0 10px 30px rgba(19, 35, 58, .08); }
body.mp-body .mfj-read-top { align-items: center; margin-bottom: 6px; }
body.mp-body .mfj-read-when { margin: 0; font-size: 13px; color: #33475B; }
body.mp-body .mfj-read-btns { display: flex; align-items: center; gap: 8px; }
body.mp-body .mfj-read-btns .mfj-edit { min-height: 38px; border: 1px solid rgba(19, 35, 58, .16); border-radius: 999px; padding: 0 16px; }
body.mp-body .mfj-read-btns .mfj-menu > summary { width: 38px; height: 38px; border: 1px solid rgba(19, 35, 58, .16); border-radius: 999px; }
body.mp-body .mfj-rmenu .mfj-menu-list { min-width: 170px; }
body.mp-body .mfj-rmenu .mfj-menu-list form { margin: 0; }
body.mp-body .mfj-rmenu .mfj-menu-list button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; color: #B42318; cursor: pointer; }
body.mp-body .mfj-rmenu .mfj-menu-list button:hover, body.mp-body .mfj-rmenu .mfj-menu-list button:focus-visible { background: #FDECEC; }
body.mp-body .mfj-read-title { font-size: 26px; margin: 4px 0 10px; }
body.mp-body .mfj-verse-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; background: #E4EEF9; color: var(--acts-navy, #13233A); font-size: 13px; font-weight: 600; }
body.mp-body .mfj-chip-ico { flex: none; color: var(--acts-navy, #13233A); }
body.mp-body .mfj-read .mfj-body { font-size: 16px; line-height: 1.7; }
/* the Journal editor uses the same wide panel as the prayer editor (mfj-drawer--wide) */
body.mp-body .mfj-drawer.mfj-jentry { background: #fff; }
body.mp-body .mfj-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.mp-body .mfj-jentry .mfj-form { gap: 14px; margin-top: 6px; }
body.mp-body .mfj-jentry .mfj-form input[type="text"], body.mp-body .mfj-jentry .mfj-form input[type="date"], body.mp-body .mfj-jentry .mfj-form select { min-height: 44px; }
body.mp-body .mfj-req { color: #B42318; }
/* Round 243: the reflection box uses the same size rule as the prayer details box (the shared .mfj-pform textarea.mfj-autogrow rule above) */
body.mp-body .mfj-count { display: block; margin-top: 4px; text-align: right; font-size: 12px; }
body.mp-body .mfj-dfoot { justify-content: flex-end; margin-top: 4px; }
body.mp-body .mfj-dfoot .btn { min-height: 42px; padding: 0 18px; }
body.mp-body .mfj-jentry .mfj-moods { display: none; }
@media (max-width: 899px) {
  body.mp-body .mfj-toolbar { flex-wrap: wrap; }
  body.mp-body .mfj-toolbar:not(.mfj-ptoolbar) .mfj-new { display: none; }
  body.mp-body .mfj-toolbar .mfj-search { flex: 1 1 100%; order: 1; }
  body.mp-body .mfj-toolbar .mfj-menu { order: 2; margin-left: auto; }
  body.mp-body .mfj-toolbar .mfj-search select.mfj-typesel { flex: 0 0 auto; width: 150px; max-width: 150px; }
  body.mp-body .mfj-split, body.mp-body .mfj-split.mfj-split--j { grid-template-columns: minmax(0, 1fr); }
  body.mp-body .mfj-monthbar { gap: 6px; }
  body.mp-body .mfj-master { padding: 10px; border-radius: 16px; }
  body.mp-body .mfj-new-m { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 12px; border-radius: 999px; }
  body.mp-body .mfj-row { padding: 12px 6px; gap: 10px; }
  body.mp-body .mfj-row-time { flex-basis: 60px; font-size: 12px; }
  body.mp-body .mfj-read { padding: 16px; }
  body.mp-body .mfj-read-title { font-size: 24px; }
  body.mp-body .mfj-drawer-wrap:has(.mfj-drawer--wide) { z-index: 1000; }
  /* a full-screen editor on a phone covers the app bar and the bottom navigation (its own header and Save take their place) */
  body.mp-body:has(.mfj-drawer-wrap) .ui-nav, body.mp-body:has(.mfj-drawer-wrap) .ui-head { display: none !important; }
  body.mp-body .mfj-drawer .mfj-close { font-size: 0; }
  body.mp-body .mfj-drawer .mfj-close::before { content: '\2190'; font-size: 22px; line-height: 1; }
  body.mp-body .mfj-head-save { display: inline-flex; min-height: 40px; padding: 0 16px; border-radius: 999px; }
  body.mp-body .mfj-two { grid-template-columns: 1fr; }
  body.mp-body .mfj-dfoot { display: none; }
}

/* Round 243 — reflection and prayer details: the character counter turns gold near the 5,000 limit (90%) and at the limit. */
body.mp-body .mfj-count.is-near, body.mp-body .mfj-count.is-full { color: var(--acts-gold-text); font-weight: 600; }
/* Round 243: the drawer's title and Save / Close stay at the top while a long reflection or prayer is typed (phone and laptop). */
body.mp-body .mfj-drawer .mfj-drawer-head { position: sticky; top: -18px; z-index: 3; margin: -18px -18px 6px; padding: 18px 18px 10px; background: #fff; box-shadow: 0 1px 0 var(--acts-border); }

/* Round 245 — the Home games card folds itself after a period without a game: the bar and "Expand to keep playing" show on every screen size. */
.hm3-og.is-rule-folded { margin: 0 0 12px; }
.hm3-og.is-rule-folded > .hm3-og-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin: 0; padding: 12px 14px; background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(19, 35, 58, .08); }
.hm3-og.is-rule-folded .hm3-og-t { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--acts-navy, #13233A); font-size: 15px; min-width: 0; flex: 1 1 200px; }
.hm3-og.is-rule-folded .hm3-og-btn { white-space: nowrap; min-width: 0; }

/* Round 246b — Bible Quest, after the mockup: banner, Home grid, five-question round, result, summary, progress. Tokens from the portal. */
.bq-screen { display: grid; gap: 14px; }
.bq-screen .ui-card { margin: 0; }
.bq-banner { position: relative; overflow: hidden; border-radius: 16px; min-height: 150px; color: #fff; display: flex; align-items: flex-end; }
.bq-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.bq-banner-t { position: relative; padding: 18px 20px; text-shadow: 0 1px 8px rgba(11, 20, 36, .35); }
.bq-banner-t h1 { margin: 2px 0 4px; font: 600 2rem/1.1 var(--ui-display); color: #fff; }
.bq-banner-t p { margin: 0; font: 600 .9375rem/1.4 var(--ui-font); color: #fff; }
.bq-logo { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .18); }
.bq-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.bq-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.bq-card { padding: 16px; border-radius: 16px; }
.bq-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 1rem/1.2 var(--ui-font); color: var(--acts-navy); }
.bq-muted { color: var(--acts-muted); font-weight: 400; }
.bq-tagline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .875rem; }
.bq-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--acts-gold-soft); color: var(--acts-gold-text); font: 700 .75rem/1.3 var(--ui-font); }
.bq-today-q { margin: 0 0 6px; font: 600 1.0625rem/1.4 var(--ui-display); color: var(--acts-navy); }
.bq-ref { margin: 0 0 14px; font-weight: 600; color: var(--acts-muted); }
.bq-cta { width: 100%; min-height: 48px; }
.bq-tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bq-tile-form { margin: 0; }
.bq-tile { width: 100%; height: 100%; min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; border: 1.5px solid var(--acts-border); border-radius: 14px; background: var(--acts-card); color: var(--acts-ink); text-align: center; cursor: pointer; font: inherit; }
.bq-tile:hover:not(:disabled), .bq-tile:focus-visible { border-color: var(--acts-navy); }
.bq-tile:disabled, .bq-tile.is-soon { opacity: .6; cursor: default; }
.bq-tile-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--acts-cream); color: var(--acts-navy); }
.bq-tile-t { font: 700 .875rem/1.25 var(--ui-font); }
.bq-tile-n { font-size: .75rem; color: var(--acts-muted); }
.bq-stat-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bq-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--acts-cream); text-align: center; }
.bq-stat b { font: 700 1.5rem/1.1 var(--ui-display); color: var(--acts-navy); }
.bq-stat span { font-size: .75rem; color: var(--acts-muted); }
.bq-more { margin: 12px 0 0; font-weight: 600; }
.bq-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bq-recent li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--acts-divider, var(--acts-border)); }
.bq-recent li:first-child { border-top: 0; padding-top: 0; }
.bq-recent-t { font-weight: 600; }
.bq-tabs { display: flex; gap: 8px; }
.bq-tabs a { flex: 1; text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1.5px solid var(--acts-border); background: var(--acts-card); color: var(--acts-ink); font: 600 .9375rem/1 var(--ui-font); text-decoration: none; }
.bq-tabs a.is-on { background: var(--acts-navy); border-color: var(--acts-navy); color: #fff; }
.bq-mode-row { display: grid; gap: 6px; margin-bottom: 12px; }
.bq-mode-top { display: flex; justify-content: space-between; font-weight: 600; }
.bq-bar { height: 10px; border-radius: 999px; background: var(--acts-divider, var(--acts-border)); overflow: hidden; }
.bq-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--acts-blue, #2f6fa8); transition: width .3s; }
.bq-bar--sm { height: 7px; }
.bq-play { display: grid; gap: 10px; }
.bq-topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bq-back { font-weight: 600; color: var(--acts-navy); text-decoration: none; }
.bq-qn { font-weight: 600; font-size: .875rem; color: var(--acts-muted); }
.bq-pct { font-size: .8125rem; font-weight: 600; color: var(--acts-muted); text-align: right; margin-top: -4px; }
.bq-passage-h { margin: 0 0 6px; font: 600 1.0625rem/1.3 var(--ui-font); color: var(--acts-navy); }
.bq-q { margin: 0 0 14px; font: 600 1.1875rem/1.35 var(--ui-display); color: var(--acts-navy); }
.bq-opts { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.bq-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--acts-border); border-radius: 12px; background: var(--acts-card); cursor: pointer; font: 600 .9375rem/1.35 var(--ui-font); color: var(--acts-ink); }
.bq-opt input { accent-color: var(--acts-blue, #2f6fa8); width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.bq-opt:has(input:checked) { border-color: var(--acts-blue, #2f6fa8); background: var(--acts-cream); }
.bq-opt:focus-within { outline: 3px solid var(--acts-blue, #2f6fa8); outline-offset: 2px; }
.bq-letter { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: var(--acts-cream); color: var(--acts-navy); font-weight: 700; }
.bq-opt-t { flex: 1 1 auto; min-width: 0; }
.bq-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.bq-row form { margin: 0; }
.bq-hint { margin-top: 10px; padding: 12px 14px; border-left: 3px solid var(--acts-gold, #c9a24a); background: var(--acts-gold-soft); border-radius: 10px; line-height: 1.5; }
.bq-hint-form { margin: 12px 0 0; }
.bq-hint-btn { display: inline-flex; align-items: center; gap: 6px; }
.bq-verdict { display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 12px 14px; border-radius: 12px; font: 700 .9375rem/1.3 var(--ui-font); }
.bq-verdict.is-right { background: var(--acts-green-soft); color: var(--acts-green); }
.bq-verdict.is-wrong { background: var(--acts-red-soft); color: var(--acts-red-text); }
.bq-answer { display: grid; gap: 12px; margin-top: 4px; }
.bq-correct { margin: 0; display: grid; gap: 2px; }
.bq-correct span { font-weight: 600; }
.bq-block { padding: 14px; border-radius: 12px; background: var(--acts-cream); line-height: 1.55; }
.bq-block p { margin: 0 0 6px; }
.bq-block-h { display: flex; align-items: center; gap: 8px; font: 700 .9375rem/1.2 var(--ui-font); color: var(--acts-navy); }
.bq-key { padding: 14px; border-radius: 12px; background: var(--acts-gold-soft); line-height: 1.55; }
.bq-key p { margin: 0 0 6px; }
.bq-passage-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.bq-passage { font-weight: 600; color: var(--acts-blue, #2f6fa8); }
.bq-journal { display: inline-flex; margin-top: 8px; font-weight: 600; color: var(--acts-navy); }
.bq-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.bq-nav form { margin: 0; }
.bq-scrim { position: fixed; inset: 0; background: rgba(11, 20, 36, .55); z-index: 900; }
.bq-sheet { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 380px); padding: 22px; border-radius: 18px; background: var(--acts-card); color: var(--acts-ink); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); z-index: 901; text-align: center; }
.bq-sheet h3 { margin: 4px 0 8px; font: 700 1.125rem/1.2 var(--ui-font); color: var(--acts-navy); }
.bq-sheet p { margin: 0 0 16px; line-height: 1.5; }
.bq-sheet-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--acts-gold-soft); color: var(--acts-gold-text); margin: 0; }
.bq-done .bq-stat-grid { margin: 12px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bq-more a { color: var(--acts-navy); }
.bq-foot { margin: 0; font-size: .8125rem; color: var(--acts-muted); line-height: 1.5; }
@media (min-width: 900px) {
  .bq-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .bq-banner-t h1 { font-size: 2.5rem; }
  .bq-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bq-play { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
}
@media (max-width: 480px) { .bq-opt { min-height: 48px; } .bq-tile { min-height: 96px; } }

/* Round 256 (v1.82.0): typed answers, put-in-order answers, the theme passages and the passage links */
.bq-type-label, .bq-label { display: block; margin: 0 0 6px; font: 700 .875rem/1.3 var(--ui-font); color: var(--acts-ink); }
.bq-type { width: 100%; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--acts-border); border-radius: 12px; background: var(--acts-card); color: var(--acts-ink); font: 600 1rem/1.3 var(--ui-font); box-sizing: border-box; }
.bq-type:focus { outline: 2px solid var(--acts-blue, #2f6fa8); outline-offset: 2px; }
.bq-small { font-size: .8125rem; margin: 8px 0 0; }
.bq-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--acts-soft, #f4f0e6); color: var(--acts-ink); font: 500 .875rem/1.4 var(--ui-font); }
.bq-pair { display: grid; gap: 8px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--acts-border); border-radius: 12px; }
.bq-pair p { margin: 0; font: 500 .9375rem/1.45 var(--ui-font); color: var(--acts-ink); }
.bq-order { display: grid; gap: 10px; }
.bq-order-answer { list-style: none; margin: 0; padding: 0; min-height: 52px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 10px; border: 1.5px dashed var(--acts-border); border-radius: 12px; }
.bq-order-answer li { display: contents; }
.bq-order-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.bq-chip { min-height: 40px; padding: 8px 12px; border: 1.5px solid var(--acts-border); border-radius: 999px; background: var(--acts-card); color: var(--acts-ink); font: 600 .9375rem/1.2 var(--ui-font); cursor: pointer; }
.bq-chip:disabled { opacity: .35; cursor: default; }
.bq-chip.is-picked { border-color: var(--acts-blue, #2f6fa8); }
.bq-chip:focus-visible { outline: 2px solid var(--acts-blue, #2f6fa8); outline-offset: 2px; }
@media (max-width: 480px) { .bq-chip { min-height: 44px; } .bq-type { min-height: 48px; } }


/* 11. Round 247 — the portal sidebar (laptop and tablet), the five-item phone bar and the More sheet ---------------------------------
   Laptop (≥1024px): a 248px sidebar with labels. Tablet (721–1023px): a 76px icon rail. Phone: no sidebar; the bottom bar
   reads Home · Read · Quest · Journal · More. The sidebar and the bar take their items from includes/portal-ui.php (pui_sections). */
:root { --ui-rail-w: 0px; }
/* Round 248: the sidebar uses the ACTS System sidebar colours (admin/assets style.css: --navy-950, --steel-300, --gold-500, --gold-400) */
:root { --ui-rail-bg: #0C2330; --ui-rail-line: rgba(255,255,255,.08); --ui-rail-text: #AEC3D2; --ui-rail-hover: rgba(255,255,255,.08);
  --ui-rail-active: rgba(207,157,63,.16); --ui-rail-gold: #CF9D3F; --ui-rail-gold-2: #E0B563; }
.ui-rail { display: none; }
.ui-sheet-h { margin: 14px 4px 2px; font: 700 .72rem/1.2 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: var(--acts-muted); }
.ui-sheet-h:first-of-type { margin-top: 6px; }

@media (min-width: 721px) {
  :root { --ui-rail-w: 76px; }
  body.mp-has-sidebar { padding-left: var(--ui-rail-w); }
  body.mp-has-sidebar .mp-brand { display: none; }
  body.mp-has-sidebar .mp-header-inner { grid-template-columns: minmax(0, 1fr) auto !important; }
  body.mp-has-sidebar .mp-header-inner:has(.mp-topsearch) { grid-template-columns: minmax(0, 1fr) auto !important; }
  body.mp-has-sidebar .mp-header-inner { max-width: none; margin-inline: 0; padding-inline: 24px; }
  body.mp-has-sidebar .mp-main { margin-inline: auto; }
  .ui-rail { display: flex; position: fixed; left: 0; top: 0; bottom: 0; z-index: 66; width: var(--ui-rail-w); flex-direction: column; gap: 6px; padding: 16px 10px 14px; background: var(--ui-rail-bg); border-right: 1px solid var(--ui-rail-line); color: var(--ui-rail-text); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .ui-rail-brand { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 6px 10px; color: var(--acts-navy); text-decoration: none; }
  .ui-rail-logo { width: 40px; height: 40px; flex: none; object-fit: contain; }
  .ui-rail-name { display: none; min-width: 0; }
  .ui-rail-name strong { display: block; font: 600 1.125rem/1.1 var(--ui-display); letter-spacing: .03em; color: #fff; }
  .ui-rail-name small { display: block; font-size: .75rem; color: var(--ui-rail-text); }
  .ui-rail-create { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0 2px 10px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--acts-gold); color: var(--acts-navy); font: 700 .9rem/1 var(--ui-font); cursor: pointer; }
  .ui-rail-create:hover { background: #D8AC5E; }
  .ui-rail-nav { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
  .ui-rail-g { display: flex; flex-direction: column; gap: 2px; }
  .ui-rail-h { display: none; margin: 0 0 4px 12px; font: 700 .7rem/1.2 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-rail-gold-2); }
  .ui-rail-i { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--ui-rail-text); font: 600 .9rem/1.2 var(--ui-font); text-decoration: none; }
  .ui-rail-i:hover { background: var(--ui-rail-hover); color: #fff; }
  .ui-rail-i.is-active { background: var(--ui-rail-active); color: #fff; box-shadow: inset 3px 0 0 var(--ui-rail-gold); }
  .ui-rail-i.is-active .ui-rail-ic { background: color-mix(in srgb, var(--nc, #AEC3D2) 30%, transparent); }
  .ui-rail-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 9px; color: var(--nc, var(--ui-rail-text)); background: color-mix(in srgb, var(--nc, #AEC3D2) 18%, transparent); }
  .ui-rail-ic .mp-icon { width: 18px; height: 18px; }
  .ui-rail-badge { position: absolute; top: 8px; left: 30px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--acts-red); color: #fff; font: 700 .65rem/18px var(--ui-font); font-style: normal; text-align: center; }
  .ui-rail-me { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 8px; border-top: 1px solid var(--ui-rail-line); border-radius: 12px; color: #fff; text-decoration: none; position: relative; }
  .ui-rail-me:hover { background: var(--ui-rail-hover); }
  .ui-rail-me.is-active { background: var(--ui-rail-active); }
  .ui-rail-me .mp-avatar { flex: none; border: 0; box-shadow: 0 0 0 2px var(--ui-rail-bg), 0 0 0 4px var(--ui-rail-gold); }
  .ui-rail-me .ui-rail-badge { top: 4px; left: 30px; }
  .ui-rail-me .ui-rail-l { display: none; min-width: 0; }
  .ui-rail-me .ui-rail-l strong { display: block; font: 600 .875rem/1.2 var(--ui-font); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ui-rail-me .ui-rail-l small { display: block; font-size: .72rem; color: var(--ui-rail-text); }
  /* tablet: icons only; the label is shown on hover as the tooltip (title) */
  .ui-rail-l { display: none; }
  .ui-rail-create .ui-rail-l { display: none; }
}
@media (min-width: 1024px) {
  :root { --ui-rail-w: 248px; }
  .ui-rail { padding: 20px 14px 16px; }
  .ui-rail-name { display: block; }
  .ui-rail-brand { padding: 4px 8px 14px; }
  .ui-rail-h { display: block; }
  .ui-rail-l { display: inline; }
  .ui-rail-create { justify-content: flex-start; padding: 0 16px; }
  .ui-rail-create .ui-rail-l { display: inline; }
  .ui-rail-i { padding: 0 12px; }
  .ui-rail-badge { position: static; margin-left: auto; }
  .ui-rail-me .ui-rail-l { display: block; }
  .ui-rail-me .ui-rail-badge { position: static; margin-left: auto; }
}
@media (min-width: 721px) and (max-width: 1023px) {
  .ui-rail-i { justify-content: center; padding: 0; }
  .ui-rail-create { padding: 0; }
  .ui-rail-me { justify-content: center; padding: 10px 0; }
  .ui-rail-me .ui-rail-l { display: none; }
}
@media (max-width: 720px) { body.mp-has-sidebar .mp-header-inner { padding-inline: var(--acts-pad); } }

/* ===== Round 249: sidebar foot Messenger, count pill, hub tabs ===== */
@media (min-width: 721px) {
  .ui-rail-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font: 700 .72rem/20px var(--ui-font); font-style: normal; text-align: center; }
  .ui-rail-msgr { position: relative; display: flex; align-items: center; gap: 10px; margin-top: auto; min-height: 52px; padding: 0 8px 0 16px; border-radius: 14px; background: var(--acts-gold); color: var(--acts-navy); font: 700 .9rem/1.2 var(--ui-font); text-decoration: none; }
  .ui-rail-msgr:hover { background: #D8AC5E; }
  .ui-rail-msgr.is-active { box-shadow: 0 0 0 2px var(--acts-navy), 0 0 0 4px var(--ui-rail-gold-2); }
  .ui-rail-msgr-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ui-rail-msgr-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--ui-rail-bg); color: #fff; }
  .ui-rail-msgr .ui-rail-badge--msgr { position: static; flex: none; margin: 0; }
  .ui-rail-msgr-ic svg { width: 22px; height: 22px; }
}
@media (min-width: 721px) and (max-width: 1023px) {
  .ui-rail-count { display: none; }
  .ui-rail-msgr { justify-content: center; gap: 0; padding: 0; }
  .ui-rail-msgr-l { display: none; }
  .ui-rail-msgr .ui-rail-badge--msgr { position: absolute; top: -5px; right: -5px; }
}
.ui-seg2 { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 999px; background: rgba(12,35,48,.06); }
.ui-seg2-i { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; color: var(--acts-navy); font: 700 .9rem/1 var(--ui-font); text-decoration: none; }
.ui-seg2-i:hover { background: rgba(12,35,48,.08); }
.ui-seg2-i.is-active { background: var(--acts-navy); color: #fff; }
/* Round 249: Church Feed at laptop: fixed 620px column, right column ends on the avatar edge */
@media (min-width: 1200px) {
  body.mp-body.mp-page-feed .ui-cols { grid-template-columns: 620px minmax(300px, 360px); justify-content: space-between; column-gap: 40px; }
  body.mp-body.mp-page-feed .ui-cols > .ui-main { width: 620px; max-width: 620px; }
  body.mp-body.mp-page-feed .cf-page { max-width: 620px; }
  body.mp-body.mp-page-feed .ui-cols > .ui-side { margin-right: 16px; }
}

/* ===== Round 249: My Faith Journal, compact laptop layout ===== */
body.mp-body.pbg-on.mfj-bg-journal .pbg.pbg--photo { --pbg-wash: linear-gradient(rgba(247, 243, 234, .86), rgba(247, 243, 234, .86)); }
body.mp-body .mfj-private-d { display: none; }
body.mp-body .mfj-detail--auto { display: none; }
@media (min-width: 1024px) {
  /* one header row: title, Journal/Prayers switch, search, type, New Entry, menu */
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 0; align-items: center; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) > .mfj-head { display: contents; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) > .mfj-head > .mfj-headrow { display: none; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) .mfj-title { margin: 0; font-size: 26px; white-space: nowrap; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) .mfj-seg { margin: 0; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) > .mfj-toolbar { display: contents; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) .mfj-toolbar > .mfj-search { grid-column: 3; margin: 0; min-width: 0; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) .mfj-toolbar > .mfj-new { grid-column: 4; margin: 0; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) .mfj-toolbar > .mfj-menu { grid-column: 5; margin: 0; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) > .mfj-monthbar { grid-column: 1 / -1; justify-content: flex-start; margin: 10px 0 0; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) > .mfj-results { grid-column: 1 / -1; margin: 6px 0 0; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) > .mfj-split { grid-column: 1 / -1; }
  body.mp-body .mfj-private-d { display: inline-block; margin-left: auto; }
  body.mp-body .mfj-monthbar .mfj-month { flex: 0 0 auto; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) .mfj-toolbar > .mfj-search input[type="search"] { min-height: 42px; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) .mfj-toolbar .mfj-new { min-height: 42px; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) .mfj-toolbar .mfj-menu > summary { height: 42px; }
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) .mfj-toolbar .mfj-search select.mfj-typesel { width: 150px; max-width: 150px; min-height: 42px; }
  /* compact rows (about 56px) and the reading pane */
  body.mp-body .mfj-row { padding: 8px 10px; gap: 12px; }
  body.mp-body .mfj-row.is-on { padding: 8px 10px; }
  body.mp-body .mfj-day-h { min-height: 34px; padding: 6px 12px; }
  body.mp-body .mfj-master { padding: 10px; }
  body.mp-body .mfj-read { padding: 18px 20px; }
  /* no footer and no "Me" back link on the laptop (the sidebar is the way back) */
  body.mp-body .mfj-wrap:has(> .mfj-toolbar) .mfj-back { display: none; }
  body.mp-body:has(.mfj-wrap) > footer.mp-footer { display: none; }
  body.mp-body .mfj-split.mfj-split--auto { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
  body.mp-body .mfj-detail--auto { display: block; }
}

/* ===== Round 249: Resources, two columns on a laptop, long names wrap ===== */
body.mp-body .mp-resource-row .mp-row-title { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; overflow: visible; }
body.mp-body .mp-resource-row .mp-row-main { min-width: 0; }
@media (min-width: 1024px) {
  body.mp-body .mp-main:has(.mp-res-grid) .mp-page-head { max-width: 1128px; margin-inline: auto; }
  body.mp-body .mp-res-sort.mp-narrow, body.mp-body .mp-res-grid.mp-narrow { max-width: 1128px; margin-inline: auto; width: 100%; }
  body.mp-body .mp-res-grid.mp-narrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  body.mp-body .mp-res-grid > .mp-card { margin: 0; min-width: 0; }
}

/* ===== Round 249: pressed feedback on touch and reduced motion ===== */
@media (hover: none) and (pointer: coarse) {
  body.mp-body .ui-rail-i:active, body.mp-body .ui-nav-i:active, body.mp-body .ui-lrow:active, body.mp-body .ui-seg2-i:active, body.mp-body .mfj-row:active { background: rgba(19, 35, 58, .08); }
  body.mp-body .ui-chip:active, body.mp-body .hm-pill:active, body.mp-body .btn:active { opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  body.mp-body *, body.mp-body *::before, body.mp-body *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Round 249 fix: a resource row keeps its title beside the icon at every width; the buttons sit on their own line under it */
body.mp-body .mp-resource-row { flex-wrap: wrap; align-items: center; }
body.mp-body .mp-resource-row .mp-row-lead { flex: none; }
body.mp-body .mp-resource-row .mp-row-main { flex: 1 1 0; min-width: 0; }
body.mp-body .mp-resource-actions { flex-wrap: wrap; width: 100%; padding-left: 52px; }

/* ===== Round 250 (Members Portal redesign, Phase 1): one laptop content frame ===== */
/* Every laptop page with the sidebar uses the same frame: the content starts at the same left edge and never exceeds 1128px.
   Narrow blocks inside the frame align left instead of floating in the middle, so titles and content share one edge. */
@media (min-width: 721px) {
  body.mp-has-sidebar .mp-main { max-width: 1128px !important; width: 100%; margin-inline: auto; padding-left: 0; padding-right: 0; padding-top: 28px; }   /* !important: beats the per-page reading widths (portal-read) that some pages set */
  body.mp-has-sidebar .mp-main .mp-narrow { max-width: none; margin-left: 0; margin-right: 0; width: 100%; }
  body.mp-has-sidebar .mp-main > .mp-narrow, body.mp-has-sidebar .mp-main > form { max-width: none; }
  body.mp-has-sidebar .mp-page-head { margin-bottom: 20px; }
}

/* ==========================================================================
   Round 251 (v1.79.0): the in-portal Bible reader (members/bible-reader.php).
   Laptop: a book and chapter list on the left, the chapter on the right.
   Tablet and phone: one column; the books and chapters open in a sheet.
   Highlights are gold only. The selected verse has a gold outline.
   ========================================================================== */
.br { --br-ink: var(--acts-ink); color: var(--br-ink); }
.br-side, .br-text { min-width: 0; }
.br-title { margin: 0; font: 700 1.5rem/1.2 var(--ui-font); color: var(--acts-ink); }
.br-top { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.br-titlebtn { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.br-titlebtn:focus-visible, .br-btn:focus-visible, .br-pill:focus-visible, .br-cn:focus-visible, .br-bi:focus-visible, .br-v:focus-visible { outline: 2px solid var(--acts-gold); outline-offset: 2px; }
.br-caret { color: var(--acts-muted); }
.br-tr { font: 700 .72rem/1 var(--ui-font); letter-spacing: .06em; padding: 5px 9px; border-radius: 999px; background: var(--acts-gold-soft); color: var(--acts-gold-text); }
.br-srch-b { margin-left: auto; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--acts-border); background: var(--acts-card); color: var(--acts-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

.br-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 18px; }
.br-nav { display: inline-flex; gap: 8px; }
.br-fs { display: inline-flex; gap: 4px; }
.br-fs .br-btn { min-width: 40px; justify-content: center; padding: 0 8px; }
.br-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--acts-border); background: var(--acts-card); color: var(--acts-ink); font: 600 .875rem/1 var(--ui-font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.br-btn.is-off { opacity: .42; pointer-events: none; }
.br-btn:hover { border-color: var(--acts-gold); }

.br-card { background: var(--acts-card); border: 1px solid var(--acts-border); border-radius: 18px; padding: 20px; box-shadow: var(--acts-shadow); }
.br-h2 { margin: 0 0 10px; font: 700 1.05rem/1.3 var(--ui-font); color: var(--acts-ink); }
.br-note { margin: 6px 0; color: var(--acts-muted); line-height: 1.5; }
.br-hit { margin: 0 0 14px; line-height: 1.6; }
.br-hit mark { background: var(--acts-gold-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.br-pager { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

.br-verses { font-size: 1.125rem; line-height: 1.85; color: var(--acts-ink); background: var(--acts-card); border: 1px solid var(--acts-border); border-radius: 18px; padding: 22px 26px; box-shadow: var(--acts-shadow); }
.br-fs-0 .br-verses { font-size: 1rem; }
.br-fs-2 .br-verses { font-size: 1.3rem; line-height: 1.9; }
.br-v { cursor: pointer; border-radius: 6px; padding: 1px 2px; transition: background-color .15s ease; }
.br-v:hover { background: var(--acts-grey-soft); }
.br-v.is-hl { background: var(--acts-gold-soft); }
.br-v.is-sel { box-shadow: 0 0 0 2px var(--acts-gold); background: var(--acts-gold-soft); }
.br-vn { font: 700 .66em/1 var(--ui-font); color: var(--acts-gold-text); margin-right: 3px; vertical-align: super; }
.br-vt { color: var(--acts-ink); }

.br-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px; background: var(--acts-card); border: 1px solid var(--acts-border); border-radius: 18px; box-shadow: var(--acts-shadow-up, var(--acts-shadow)); }
.br-bar[hidden] { display: none; }
.br-like, .br-act { margin: 0; display: contents; }
.br-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--acts-border); background: var(--acts-card); color: var(--acts-ink); font: 600 .875rem/1 var(--ui-font); text-decoration: none; cursor: pointer; }
.br-pill[aria-pressed="true"], .br-pill.is-on { background: var(--acts-gold-soft); border-color: var(--acts-gold); color: var(--acts-gold-text); }
.br-lc { font-weight: 700; }
.br-lc:empty { display: none; }
.br-credit { margin: 18px 2px 0; font-size: .8rem; line-height: 1.5; color: var(--acts-muted); }
.br-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 16px; }

/* The books and chapters: a card on a laptop, a sheet on a phone and a tablet. */
.br-side { display: none; }
.br-search { margin: 0 0 12px; }
.br-search input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--acts-border); background: var(--acts-card); color: var(--acts-ink); font: 500 .95rem var(--ui-font); }
.br-h { margin: 14px 0 6px; font: 700 .72rem/1.2 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: var(--acts-muted); }
.br-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.br-cn { display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 10px; border: 1px solid var(--acts-border); background: var(--acts-card); color: var(--acts-ink); font: 600 .85rem/1 var(--ui-font); text-decoration: none; }
.br-cn:hover { border-color: var(--acts-gold); }
.br-cn.is-current { background: var(--acts-gold-soft); border-color: var(--acts-gold); color: var(--acts-gold-text); font-weight: 800; }
.br-blist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.br-bi { display: block; padding: 8px 10px; border-radius: 10px; color: var(--acts-ink); font: 500 .9rem/1.3 var(--ui-font); text-decoration: none; }
.br-bi:hover { background: var(--acts-grey-soft); }
.br-bi.is-current { background: var(--acts-gold-soft); color: var(--acts-gold-text); font-weight: 700; }
.br-blocks { display: grid; gap: 6px; }

.br-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 4px 10px; }
.br-sheet-h h2 { margin: 0; font: 700 1.125rem/1.3 var(--ui-font); color: var(--acts-ink); }
.br-sheet .br-search { margin: 4px 0 8px; }
.br-sheet .br-blocks { margin-bottom: 8px; }
.br-marks { list-style: none; margin: 6px 0 0; padding: 0; }
.br-marks li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--acts-divider); }
.br-marks a { color: var(--acts-ink); font-weight: 600; text-decoration: none; }
.br-marks form { margin: 0; }

/* Phone: a full-page reader. The verse text runs to the edges of the card. */
@media (max-width: 720px) {
  .br-verses { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; padding: 18px 16px; margin: 0 -16px; }
  .br-bar { bottom: calc(76px + env(safe-area-inset-bottom)); border-radius: 16px; margin-left: 0; margin-right: 0; }
  .br-print { display: none; }
  .br-title { font-size: 1.3rem; }
}
@media (hover: none) and (pointer: coarse) {
  .br-v:hover { background: none; }
  .br-btn, .br-pill, .br-cn, .br-bi { min-height: 44px; }
}

/* Laptop: the books and chapters stay on the left; the chapter reads on the right. */
@media (min-width: 1024px) {
  .br { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
  .br-side { display: block; position: sticky; top: calc(var(--ui-topbar-h, 64px) + 16px); max-height: calc(100vh - var(--ui-topbar-h, 64px) - 32px); overflow-y: auto; padding: 14px; background: var(--acts-card); border: 1px solid var(--acts-border); border-radius: 18px; box-shadow: var(--acts-shadow); }
  .br-srch-b { display: none; }
  .br-title { font-size: 1.75rem; }
  .br-top { margin-bottom: 4px; }
  #br-sheet { display: none !important; }
  .br-titlebtn { pointer-events: none; }   /* the books are in the left column */
}

/* Round 252 (v1.79.2): books first, then a book's chapters. A tap on a book opens its chapter grid; ← Books goes back. */
.br-view[hidden], .br-blocks[hidden], .br-bli[hidden], .br-note[hidden] { display: none !important; }
.br-chaphead { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.br-back { min-height: 40px; }
.br-bookname { margin: 0; font: 700 1rem/1.3 var(--ui-font); color: var(--acts-ink); }
.br-bi { min-height: 44px; display: flex; align-items: center; box-sizing: border-box; }
.br-cgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .br-cgrid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
  .br-cn { height: 44px; min-width: 0; font-size: .8rem; }
  .br-back { min-height: 44px; }
  .br-sheet .br-bookname { display: none; }   /* the sheet heading already shows the book name */
}

/* Round 253 (v1.80.0): choose the Bible version. The header button opens the version sheet (phone and laptop); the version list sits at the top of the Books sheet. */
.br-tr { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; padding: 0 12px; box-sizing: border-box; font: 700 .72rem/1 var(--ui-font); letter-spacing: .06em; border-radius: 999px; background: var(--acts-gold-soft); color: var(--acts-gold-text); }
.br-tr:focus-visible { outline: 2px solid var(--acts-gold); outline-offset: 2px; }
.br-tr svg { flex: 0 0 auto; }
.br-verblock { margin: 0 0 8px; }
.br-verblock .br-h { margin-top: 6px; }
.br-vlist { gap: 4px; margin-bottom: 6px; }
.br-vi { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; position: relative; padding: 8px 36px 8px 10px; border-radius: 10px; min-height: 52px; box-sizing: border-box; color: var(--acts-ink); font: 500 .9rem/1.3 var(--ui-font); text-decoration: none; }
.br-vi:hover { background: var(--acts-gold-soft); }
.br-vi-main { display: block; min-width: 0; overflow-wrap: anywhere; }
.br-vi-main strong { font-weight: 800; letter-spacing: .04em; margin-right: 4px; }
.br-vi-meta { display: block; font: 500 .72rem/1.3 var(--ui-font); color: var(--acts-muted); }
.br-vi-tick { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--acts-gold-text); font-weight: 800; }
.br-vi.is-current { background: var(--acts-gold-soft); color: var(--acts-gold-text); }
.br-mver { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font: 700 .65rem/1.4 var(--ui-font); letter-spacing: .06em; background: var(--acts-card); border: 1px solid var(--acts-border); color: var(--acts-muted); }
.br-versionnote { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--acts-gold-soft); color: var(--acts-gold-text); font: 600 .85rem/1.35 var(--ui-font); }
@media (max-width: 380px) {
  .br-vi { padding-right: 32px; }
  .br-vi-tick { right: 8px; }
}

/* Round 290: the thin line between church feed posts (Home and the Feed tab). Decorative only: hidden from screen readers. */
.pv-div { height: 1px; margin: 16px 0; background: rgba(19, 35, 58, .12); }

/* Round 291: phone type sizes, and a borderless Facebook-style feed on Home and the Feed tab.
   Sizes are in rem so that the member's text size (Settings → Text size) still scales them. Touch targets stay 44px.
   Selectors start with body.mp-body.mp-ui so they beat the older card rules (including body.mp-bg-soft :is(.cf-card…)). */
@media (max-width: 599px) {
  body.mp-body.mp-ui .td-hero h1 { font: 600 1.5rem/1.25 var(--ui-display, Fraunces, Georgia, serif); }
  body.mp-body.mp-ui .td-date { font-size: .75rem; letter-spacing: .06em; }
  body.mp-body.mp-ui .td-verse .hm-verse { padding: 16px; }
  body.mp-body.mp-ui .td-verse .hm-verse-text, body.mp-body.mp-ui .td-verse blockquote { font: 500 1.125rem/1.55 var(--ui-display, Fraunces, Georgia, serif); }
  body.mp-body.mp-ui .td-verse .hm-verse-cap { font-size: .75rem; }
  body.mp-body.mp-ui .td-verse .hm-verse-ref { font-size: .875rem; }
  body.mp-body.mp-ui .td-verse .hm-verse-pills { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
  body.mp-body.mp-ui .td-verse .hm-verse-pills > form, body.mp-body.mp-ui .td-verse .hm-verse-pills > form > button { width: auto; }
  body.mp-body.mp-ui .td-verse .hm-verse-pills > a { grid-column: 1 / -1; justify-self: stretch; width: 100%; box-sizing: border-box; justify-content: center; }
  body.mp-body.mp-ui .td-verse .hm-pill { min-height: 44px; font-size: .875rem; }
  body.mp-body.mp-ui .td-next .td-h { font: 700 .75rem/1.3 var(--ui-font, Inter, sans-serif); text-transform: uppercase; letter-spacing: .08em; color: #6b4f16; }
  body.mp-body.mp-ui .td-next-t { font-size: .875rem; font-weight: 700; line-height: 1.35; }
  body.mp-body.mp-ui .td-btn { font-size: .875rem; min-height: 44px; }
  body.mp-body.mp-ui .td-h { font-size: 1.125rem; }
  body.mp-body.mp-ui .td-kicker { font-size: .6875rem; }
  body.mp-body.mp-ui .ui-sec-head h2 { font-size: 1.125rem; }

  /* the feed: one white layer, borderless posts, edge-to-edge media, a light action row */
  body.mp-body.mp-ui .hm3-feed, body.mp-body.mp-ui #cf-feed { background: #fff; border: 0; border-radius: 0; box-shadow: none; padding: 4px 0 12px; width: auto; max-width: none; }
  body.mp-body.mp-ui #cf-feed.hm3-feed { margin-left: -32px; margin-right: -32px; }
  body.mp-body.mp-ui #cf-feed { margin-left: -16px; margin-right: -16px; }
  body.mp-body.mp-ui article.cf-card.cf-post { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0 12px; overflow: visible; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-post-head .mp-avatar, body.mp-body.mp-ui article.cf-card.cf-post .cf-post-head .mp-avatar--sm { width: 40px; height: 40px; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-post-who strong { font-size: .9375rem; font-weight: 700; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-post-meta { font-size: .8125rem; color: #6b7480; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-post-body { font-size: .9375rem; line-height: 1.45; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap { margin: 8px -12px 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-strip { margin: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-slide { flex-basis: 100%; border-radius: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-open { border-radius: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-open img { height: min(100vw, 440px); border-radius: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-post-img, body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap img { width: 100%; border-radius: 0; aspect-ratio: auto; max-height: min(125vw, 500px); object-fit: cover; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-row { display: flex; gap: 0; margin-top: 8px; padding-top: 0; border-top: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-row > *, body.mp-body.mp-ui article.cf-card.cf-post .cf-row > * > button { flex: 1 1 0; width: auto; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-row button, body.mp-body.mp-ui article.cf-card.cf-post .cf-row a.cf-act, body.mp-body.mp-ui article.cf-card.cf-post .cf-row .cf-act { flex: 1 1 0; width: 100%; min-height: 44px; justify-content: center; font-size: .875rem; border: 0; box-shadow: none; background: transparent; }
  body.mp-body.mp-ui .pv-div { margin: 12px 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-more summary { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Round 292 (v1.86.28): laptop church feed in boxes, in the Facebook desktop layout. Phones are unchanged (Round 291).
   Each post is a white box with a 12px radius and a soft shadow; its parts are divided by a 1px line and sit 16px in from the box edge.
   The extra controls below are hidden by default and shown only at 1024px and wider. */
body.mp-body.mp-ui .cf-counts, body.mp-body.mp-ui .cf-see-more, body.mp-body.mp-ui .cf-cprev-l, body.mp-body.mp-ui .cf-more-rx { display: none; }

@media (min-width: 1024px) {
  body.mp-body.mp-ui .td-hero h1 { font-size: 1.75rem; }

  /* the feed page's two columns: the box column keeps the centre, the side panel takes 300 to 340px (no sideways scroll at 1024px) */
  body.mp-body.mp-ui.mp-page-feed .ui-cols { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); column-gap: 24px; justify-content: stretch; }
  body.mp-body.mp-ui.mp-page-feed .ui-cols > .ui-main { width: auto; max-width: none; min-width: 0; }
  body.mp-body.mp-ui.mp-page-feed .ui-cols > .ui-side { margin-right: 0; }

  /* the column: boxes with 16px between them, no divider lines between boxes */
  body.mp-body.mp-ui .hm3-feed, body.mp-body.mp-ui #cf-feed { display: flex; flex-direction: column; gap: 16px; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 12px; margin: 0; width: 100%; max-width: 680px; }
  body.mp-body.mp-ui .pv-div { display: none; }

  /* the box */
  body.mp-body.mp-ui article.cf-card.cf-post { display: block; background: #fff; border: 0; border-radius: 12px; box-shadow: 0 1px 2px rgba(19, 35, 58, 0.08); overflow: hidden; padding: 0; }

  /* the parts: each has 12px above and below and 16px at the sides, with a 1px line above it */
  body.mp-body.mp-ui article.cf-card.cf-post > * { border-top: 1px solid #e4e7ec; padding: 12px 16px; }
  body.mp-body.mp-ui article.cf-card.cf-post > header.cf-post-head,
  body.mp-body.mp-ui article.cf-card.cf-post > .cf-imp-label,
  body.mp-body.mp-ui article.cf-card.cf-post > .cf-pinned-label,
  body.mp-body.mp-ui article.cf-card.cf-post > .hm3-plabel { border-top: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post > .cf-media-wrap { padding: 12px 0; }
  body.mp-body.mp-ui article.cf-card.cf-post > .cf-row { padding: 4px 12px; }
  body.mp-body.mp-ui article.cf-card.cf-post > .cf-see-more { border-top: 0; padding: 0 16px 12px; }
  body.mp-body.mp-ui article.cf-card.cf-post > .cf-reacted { display: none; }
  body.mp-body.mp-ui article.cf-card.cf-post > .hm3-cprev { border-top: 0; margin: 0 16px 12px; padding: 10px 12px; }
  body.mp-body.mp-ui article.cf-card.cf-post > .hm3-more { border-top: 0; display: none; }

  /* the author row */
  body.mp-body.mp-ui article.cf-card.cf-post > header.cf-post-head { gap: 12px; align-items: center; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-post-head .mp-avatar, body.mp-body.mp-ui article.cf-card.cf-post .cf-post-head .mp-avatar--sm { width: 40px; height: 40px; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-post-who strong { font-size: 1rem; font-weight: 700; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-post-meta { font-size: .8125rem; color: #6b7480; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-more > summary { min-width: 40px; min-height: 40px; }

  /* text: 16px; three lines, then See more */
  body.mp-body.mp-ui article.cf-card.cf-post .cf-post-body { font-size: 1rem; line-height: 1.5; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-post-body.is-long { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  body.mp-body.mp-ui article.cf-card.cf-post > .cf-post-body { padding-bottom: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-see-more { display: block; font-weight: 700; font-size: .9375rem; color: var(--acts-navy, #13233a); text-decoration: none; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-see-more:hover { text-decoration: underline; }

  /* media: full width of the box, top corners follow the box; one photo up to 4:5; several photos in a 2-column grid with 2px gaps */
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap { margin: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .cf-post-img { display: block; width: 100%; height: auto; aspect-ratio: auto; max-height: 850px; object-fit: cover; border-radius: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-strip { margin: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-track { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; overflow: visible; scroll-snap-type: none; padding: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-strip.is-one .fm-track { grid-template-columns: 1fr; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-slide { flex: none; border-radius: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-slide:nth-child(n+5) { display: none; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-open img { display: block; width: 100%; height: 300px; object-fit: cover; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-strip.is-one .fm-open img { height: auto; max-height: 850px; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-bar .fm-prev, body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-bar .fm-next { display: none !important; }

  /* empty parts (no photo, no RSVP, no acknowledgement) take no line and no space */
  body.mp-body.mp-ui article.cf-card.cf-post > :is(.cf-media-wrap, .cf-rsvp, .cf-ack, .cf-shared, .cf-post-body, .cf-post-title):empty { display: none; }
  body.mp-body.mp-ui article.cf-card.cf-post > .cf-media-wrap:not(:has(*)) { display: none; }

  /* the counts row: shown only when there is a reaction or a comment */
  body.mp-body.mp-ui article.cf-card.cf-post > .cf-counts { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .8125rem; color: #6b7480; padding: 10px 16px; }
  body.mp-body.mp-ui .cf-counts-r { display: inline-flex; align-items: center; gap: 6px; }
  body.mp-body.mp-ui .cf-counts-r > span:first-child { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 999px; background: #1877f2; color: #fff; }
  body.mp-body.mp-ui .cf-counts-r b { font-weight: 600; color: #3a3b3c; }
  body.mp-body.mp-ui .cf-counts-c { color: #6b7480; text-decoration: none; }
  body.mp-body.mp-ui .cf-counts-c:hover { text-decoration: underline; }

  /* the action row: Like, Comment and Share, three equal buttons with no border */
  body.mp-body.mp-ui article.cf-card.cf-post .cf-row { display: flex; align-items: center; gap: 0; margin: 0; flex-wrap: nowrap; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-row .cf-rx-x { display: none !important; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-row .cf-react-f { flex: 1 1 0; display: flex; margin: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-row .cf-act { flex: 1 1 0; width: 100%; min-width: 0; min-height: 44px; justify-content: center; gap: 8px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; font-size: .9375rem; font-weight: 600; color: #4b5563; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-row .cf-act:hover { background: #f0f2f5; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-row .cf-act .cf-lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: .9375rem; font-weight: 600; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-row .cf-act b { display: none; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-row .cf-act-share { margin-left: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-row .cf-act.is-mine { color: var(--acts-navy, #13233a); background: transparent; }

  /* the first comment preview (Feed tab) and the comments disclosure */
  body.mp-body.mp-ui article.cf-card.cf-post > .cf-cprev-l { display: block; }
  body.mp-body.mp-ui article.cf-card.cf-post > .cf-comments { padding: 10px 16px 12px; }
  body.mp-body.mp-ui article.cf-card.cf-post > .cf-comments > summary { font-size: .875rem; font-weight: 600; color: #4b5563; }

  /* the ⋯ menu carries the reactions and Save that the row no longer shows on laptop */
  body.mp-body.mp-ui article.cf-card.cf-post .cf-more-menu .cf-more-rx { display: block; margin: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-more-menu .cf-more-rx button { width: 100%; text-align: left; min-height: 44px; }

  /* See all posts: a full-width outlined button in the column */
  body.mp-body.mp-ui a.hm3-seemore { display: flex; width: 100%; max-width: 680px; box-sizing: border-box; min-height: 44px; align-items: center; justify-content: center; border: 1px solid #d0d5dd; border-radius: 12px; background: #fff; color: var(--acts-navy, #13233a); font-weight: 700; text-decoration: none; }
  body.mp-body.mp-ui a.hm3-seemore:hover { background: #f0f2f5; }
}

@media (prefers-reduced-motion: reduce) {
  body.mp-body.mp-ui article.cf-card.cf-post, body.mp-body.mp-ui article.cf-card.cf-post .cf-row .cf-act { transition: none !important; animation: none !important; }
}

/* Round 293 (v1.86.29): one column edge on laptop; on phone a 16px gutter, a composer that does not overlap,
   and borderless sections separated by thin dividers. Visual change only. */
@media (max-width: 599px) {
  /* the Home content sits inside the same 16px gutter as the rest of the page */
  body.mp-body.mp-ui .td, body.mp-body.mp-ui .td-rest { padding-left: 0; padding-right: 0; }

  /* sections: a rounded box with the standard card border (Round 308: the square edge and the lone top line are gone) */
  body.mp-body.mp-ui .td-games, body.mp-body.mp-ui .td-around, body.mp-body.mp-ui .td-feed {
    background: var(--acts-cream); box-shadow: none; border: 1px solid var(--acts-border); border-radius: 16px; padding: 16px;
    margin: 0 0 16px; box-sizing: border-box; overflow: hidden;
  }
  body.mp-body.mp-ui .td-games > .td-h, body.mp-body.mp-ui .td-around > .td-h, body.mp-body.mp-ui .td-feed > .td-h { margin: 0 0 12px; font-size: 1.125rem; }

  /* inside a section: each part separated by a 1px line with 12px above and below */
  body.mp-body.mp-ui .td-card, body.mp-body.mp-ui .td-around .ui-card, body.mp-body.mp-ui .td-games .hm3-og, body.mp-body.mp-ui .td-games .bg-card {
    background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0;
  }
  body.mp-body.mp-ui .td-games .bg-card > * + * { border-top: 1px solid rgba(19, 35, 58, 0.12); padding-top: 12px; margin-top: 12px; }
  body.mp-body.mp-ui .td-games .td-stack > * + *, body.mp-body.mp-ui .td-around .td-stack > * + *,
  body.mp-body.mp-ui .td-card > * + *, body.mp-body.mp-ui .td-around .ui-card > * + * {
    border-top: 1px solid rgba(19, 35, 58, 0.12); padding-top: 12px; margin-top: 12px;
  }

  /* the Church Feed composer: avatar, placeholder and Photo button in one row, nothing under the button */
  body.mp-body.mp-ui .td-feed > .hm3-postbox {
    display: flex; align-items: center; gap: 16px; background: transparent; box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 12px; margin: 0; border-bottom: 1px solid rgba(19, 35, 58, 0.12);
  }
  body.mp-body.mp-ui .td-feed > .hm3-postbox > .mp-avatar { flex: none; width: 36px; height: 36px; }
  body.mp-body.mp-ui .td-feed > .hm3-postbox > .hm3-pb-in {
    flex: 1 1 auto; min-width: 0; display: block; min-height: 44px; line-height: 44px; padding: 0 16px; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis; border-radius: 999px; background: var(--acts-grey-soft, #eef1f5);
  }
  body.mp-body.mp-ui .td-feed > .hm3-postbox > .hm3-pb-photo { flex: none; min-height: 44px; width: auto; white-space: nowrap; }

  /* the feed sits in the content gutter, like the sections above it; posts keep their dividers */
  body.mp-body.mp-ui #cf-feed.hm3-feed, body.mp-body.mp-ui #cf-feed { margin: 0; width: 100%; max-width: none; }
  body.mp-body.mp-ui article.cf-card.cf-post { padding: 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap { margin: 8px 0 0; }
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .cf-post-img,
  body.mp-body.mp-ui article.cf-card.cf-post .cf-media-wrap .fm-open img { border-radius: 0; }
}

@media (min-width: 1024px) {
  /* one column edge: the feed, the composer, the tabs, the end line and See all posts fill the column */
  body.mp-body.mp-ui .hm3-feed, body.mp-body.mp-ui #cf-feed, body.mp-body.mp-ui .hm3-tabs, body.mp-body.mp-ui .hm3-postbox,
  body.mp-body.mp-ui .hm3-end, body.mp-body.mp-ui a.hm3-seemore { max-width: none; width: 100%; }
  body.mp-body.mp-ui a.hm3-seemore { max-width: none; }
}

/* ============================================================
   ROUND 294 — one laptop width (the install card's edges) on every page; Facebook-style phone sections
   Laptop: the centre-column blocks fill .mp-main, the same left and right edges as the "Install the ACTS Church app" card.
   Phone: no card boxes; sections are separated by 1px dividers. Visual only: no data, permission or privacy change.
   ============================================================ */
body.mp-body.mp-ui .pg-all { margin-right: 0; }   /* the See all link stays inside the column edge */
@media (min-width: 1024px) {
  body.mp-body.mp-ui .td { max-width: none; width: 100%; margin: 0; padding-left: 0; padding-right: 0; }
  body.mp-body.mp-ui .td-rest, body.mp-body.mp-ui .td-stack, body.mp-body.mp-ui .td-hero { max-width: none; width: 100%; box-sizing: border-box; padding-left: 0; padding-right: 0; }
  body.mp-body.mp-ui .bg-screen, body.mp-body.mp-ui .bq-screen { max-width: none; width: 100%; }
  body.mp-body.mp-ui .bq-play { max-width: none; }
  body.mp-body.mp-ui .pw-list, body.mp-body.mp-ui .pw-new, body.mp-body.mp-ui .pw-tabs, body.mp-body.mp-ui .pw-chips, body.mp-body.mp-ui .pw-mine, body.mp-body.mp-ui .pw-empty, body.mp-body.mp-ui .cf.pw-focus { max-width: none; width: 100%; }
  body.mp-body.mp-ui .apv-list { max-width: none; }
}

@media (max-width: 599px) {
  body.mp-body.mp-ui.mp-bg-soft .pwa-card, body.mp-body.mp-ui .pwa-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 14px 0; border-bottom: 1px solid rgba(19, 35, 58, .12); }
  body.mp-body.mp-ui.mp-bg-soft :is(.ui-card, .mp-card, .bg-card, .td-card, .ui-side-card, .bq-card, .cf-card), body.mp-body.mp-ui :is(.ui-card, .mp-card, .bg-card, .td-card, .ui-side-card, .bq-card) {
    background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  }
  body.mp-body.mp-ui .mp-card-head { background: transparent; border-top: 0; }
  body.mp-body.mp-ui.mp-bg-soft :is(.ui-card, .mp-card, .bg-card, .td-card, .ui-side-card, .bq-card) + :is(.ui-card, .mp-card, .bg-card, .td-card, .ui-side-card, .bq-card), body.mp-body.mp-ui :is(.ui-card, .mp-card, .bg-card, .td-card, .ui-side-card, .bq-card) + :is(.ui-card, .mp-card, .bg-card, .td-card, .ui-side-card, .bq-card) {
    border-top: 1px solid rgba(19, 35, 58, .12); margin-top: 16px; padding-top: 16px;
  }
  body.mp-body.mp-ui .bq-banner { border-radius: 0; }
}
@media (min-width: 1024px) {
  body.mp-body.mp-ui:not(.mp-page-feed) .ui-cols { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); column-gap: 24px; justify-content: stretch; }
  body.mp-body.mp-ui:not(.mp-page-feed) .ui-cols > .ui-main, body.mp-body.mp-ui:not(.mp-page-feed) .ui-cols > .ui-side { width: auto; min-width: 0; max-width: none; }
  body.mp-body.mp-ui:not(.mp-page-feed) .ui-cols > .ui-side { margin-right: 0; }
}

/* ============================================================
   ROUND 295 — phone Post page: the attached design. A white post card with a small side gap, the action row spread across
   (like, love, comment, praise, save, share) with the count beside each icon, and the Comments / Reactions / Details tabs as pills.
   Phone only (599px and below). The feed cards keep the Round 294 borderless layout; only the Post page changes.
   ============================================================ */
@media (max-width: 599px) {
  html body.mp-body.mp-ui .mp-main:has(> .cf.pdt, .cf.pdt) { padding-left: 8px; padding-right: 8px; }
  html body.mp-body.mp-ui .cf.pdt { padding: 0; }
  html body.mp-body.mp-ui.mp-bg-soft .cf.pdt > article.pdt-post,
  html body.mp-body.mp-ui .cf.pdt > article.pdt-post {
    background: #fff; border: 1px solid rgba(227, 220, 205, .9); border-radius: 16px; box-shadow: 0 6px 24px rgba(19, 35, 58, .06);
    padding: 14px 14px 10px; margin: 0; overflow: hidden;
  }
  html body.mp-body.mp-ui .pdt-post .cf-post-head { margin: 0 0 8px; }
  html body.mp-body.mp-ui .pdt-post .cf-post-body { margin: 6px 0 8px; }
  html body.mp-body.mp-ui .pdt-post .cf-actrow { display: flex; justify-content: space-between; align-items: center; gap: 0; margin: 6px -6px 0; padding: 0; }
  html body.mp-body.mp-ui .pdt-post .cf-actrow .cf-act, html body.mp-body.mp-ui .pdt-post .cf-actrow .cf-react-f button {
    display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 6px; border-radius: 999px;
  }
  html body.mp-body.mp-ui .pdt-post .cf-actrow b { display: inline-block; font-size: .85rem; font-weight: 700; color: var(--acts-ink, #1B2A41); }
  html body.mp-body.mp-ui .pdt-post .cf-actrow .cf-act.is-mine, html body.mp-body.mp-ui .pdt-post .cf-actrow button.is-mine { background: #e6edf7; }
  html body.mp-body.mp-ui .pdt-post .cf-actrow .cf-lbl { display: none; }
  /* the tabs: pills, the active one navy (as the attached design) */
  html body.mp-body.mp-ui .pdt-tabs { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 12px 0 0; padding: 0 0 4px; }
  html body.mp-body.mp-ui .pdt-tab { flex: 0 0 auto; padding: 9px 14px; border: 1px solid #dfe4ec; border-radius: 999px; background: #fff; color: var(--acts-navy, #13233A); border-bottom: 1px solid #dfe4ec; font-weight: 700; }
  html body.mp-body.mp-ui .pdt-tab.is-on { background: var(--acts-navy, #13233A); border-color: var(--acts-navy, #13233A); color: #fff; border-bottom-color: var(--acts-navy, #13233A); }
  html body.mp-body.mp-ui .pdt-tab b { background: #fff; color: var(--acts-navy, #13233A); margin-left: 6px; }
  html body.mp-body.mp-ui .pdt-tab.is-on b { background: #fff; color: var(--acts-navy, #13233A); }
  html body.mp-body.mp-ui .pdt-tab:not(.is-on) b { background: #f1f4f8; }
}

/* ============================================================
   ROUND 296 — phone Church feed in one round box, like the Messenger list: one white rounded box, rows separated by thin lines.
   Phone only (599px and below). Feed tab: the posts are direct children of #cf-feed. Home: each post is its own hm3-item
   (class hm3-k-church) and the run of them forms one box. The Post page keeps its own card (Round 295).
   ============================================================ */
/* laptop: the run of posts keeps the 16px gap between posts (a plain list, no box) */
html body.mp-body.mp-ui #cf-feed > .hm3-postlist { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 599px) {
  /* Feed tab: the tabs and the composer stay on the page; the posts (contiguous) form one box from the first post to the last */
  html body.mp-body.mp-ui section.cf-feed#cf-feed, html body.mp-body.mp-ui.mp-bg-soft section.cf-feed#cf-feed { background: transparent; border: 0; box-shadow: none; border-radius: 0; margin: 0; padding: 0; width: auto; max-width: none; }
  html body.mp-body.mp-ui section.cf-feed#cf-feed article.cf-post, html body.mp-body.mp-ui.mp-bg-soft section.cf-feed#cf-feed article.cf-post {
    background: #fff; border: 0; border-left: 1px solid rgba(227, 220, 205, .9); border-right: 1px solid rgba(227, 220, 205, .9);
    border-radius: 0; box-shadow: none; margin: 0 8px; padding: 14px 14px 12px; overflow: visible;
  }
  html body.mp-body.mp-ui section.cf-feed#cf-feed article.cf-post:not(article.cf-post ~ article.cf-post), html body.mp-body.mp-ui.mp-bg-soft section.cf-feed#cf-feed article.cf-post:not(article.cf-post ~ article.cf-post) {
    border-top: 1px solid rgba(227, 220, 205, .9); border-radius: 16px 16px 0 0;
  }
  html body.mp-body.mp-ui section.cf-feed#cf-feed article.cf-post:not(:has(~ article.cf-post)), html body.mp-body.mp-ui.mp-bg-soft section.cf-feed#cf-feed article.cf-post:not(:has(~ article.cf-post)) {
    border-bottom: 1px solid rgba(227, 220, 205, .9); border-radius: 0 0 16px 16px;
  }
  html body.mp-body.mp-ui section.cf-feed#cf-feed article.cf-post:not(article.cf-post ~ article.cf-post):not(:has(~ article.cf-post)), html body.mp-body.mp-ui.mp-bg-soft section.cf-feed#cf-feed article.cf-post:not(article.cf-post ~ article.cf-post):not(:has(~ article.cf-post)) {
    border-radius: 16px;
  }
  html body.mp-body.mp-ui section.cf-feed#cf-feed article.cf-post ~ article.cf-post::before, html body.mp-body.mp-ui.mp-bg-soft section.cf-feed#cf-feed article.cf-post ~ article.cf-post::before {
    content: ''; display: block; height: 1px; background: rgba(19, 35, 58, .12); margin: -14px -14px 14px;
  }
  html body.mp-body.mp-ui section.cf-feed#cf-feed .cf-media-wrap { margin: 8px 0 0; }
  /* Home: the run of posts (hm3-postlist) is one box; the posts inside are separated by thin lines */
  html body.mp-body.mp-ui #cf-feed > .hm3-postlist {
    display: flex; flex-direction: column; gap: 0; margin: 0 8px; padding: 0;
    background: #fff; border: 1px solid rgba(227, 220, 205, .9); border-radius: 16px; box-shadow: 0 6px 24px rgba(19, 35, 58, .06); overflow: hidden;
  }
  html body.mp-body.mp-ui #cf-feed > .hm3-postlist > .hm3-item { background: transparent; border: 0; box-shadow: none; margin: 0; padding: 14px 14px 12px; }
  html body.mp-body.mp-ui #cf-feed > .hm3-postlist > .hm3-item ~ .hm3-item { border-top: 1px solid rgba(19, 35, 58, .12); }
  html body.mp-body.mp-ui #cf-feed > .hm3-postlist .cf-media-wrap { margin: 8px 0 0; }
}

/* ============================================================
   ROUND 299 — the bottom bar in the ACTS Modern order: Home · Bible · ACTS Messenger (centre) · Community · More.
   The Messenger anchor sits in the centre as an elevated round badge, a little larger than the other icons. It never covers
   content: the bar keeps its height, and the badge rises only 14px above the bar's top edge.
   ============================================================ */
@media (max-width: 599px) {
  .ui-nav-i--centre { overflow: visible; }
  .ui-nav-i--centre .ui-nav-ic { width: 46px; height: 46px; margin-top: -14px; border-radius: 50%; background: var(--acts-card); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 -2px 10px rgba(11, 31, 58, .14), 0 4px 12px rgba(11, 31, 58, .14); }
  .ui-nav-i--centre .ui-nav-ic svg { width: 40px; height: 40px; }
  .ui-nav-i--centre.is-active::before { display: none; }
  .ui-nav-i--centre .ui-nav-badge { top: -6px; left: 30px; }
}

/* ============================================================
   ROUND 301 — the Bible hub (members/bible.php): search, four quick tiles, two rows. ACTS Modern: white cards, navy text,
   gold icons, Inter throughout. Phones and laptops share the page column.
   ============================================================ */
.bh { display: flex; flex-direction: column; gap: 16px; padding: 8px 16px 24px; color: var(--acts-ink); }
.bh-head h1 { margin: 0; font: 700 1.625rem/1.2 var(--ui-font); color: var(--acts-navy); }
.bh-sub { margin: 2px 0 0; font: 500 .875rem/1.4 var(--ui-font); color: var(--acts-muted); }
.bh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bh-search { position: relative; }
html body .bh-search input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px 0 46px !important; border: 1px solid var(--acts-border); border-radius: 14px; background: var(--acts-card); font: 500 1rem/1 var(--ui-font); color: var(--acts-ink); }
.bh-search input:focus-visible { outline: 2px solid var(--acts-gold); outline-offset: 2px; }
html body .bh-search .bh-search-ic { position: absolute; left: 16px; z-index: 1; top: 50%; transform: translateY(-50%); color: var(--acts-muted); display: inline-flex; }
.bh-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bh-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 112px; box-sizing: border-box; padding: 14px; background: var(--acts-card); border: 1px solid var(--acts-border); border-radius: 16px; box-shadow: var(--acts-shadow); color: var(--acts-ink); text-decoration: none; }
.bh-tile b { font: 600 .9375rem/1.25 var(--ui-font); color: var(--acts-navy); }
.bh-tile span:not(.bh-tile-ic) { font: 500 .75rem/1.35 var(--ui-font); color: var(--acts-muted); }
.bh-tile-ic, .bh-row-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px; background: var(--acts-gold-soft); color: var(--acts-gold-text); }
.bh-rows { list-style: none; margin: 0; padding: 0; background: var(--acts-card); border: 1px solid var(--acts-border); border-radius: 16px; box-shadow: var(--acts-shadow); overflow: hidden; }
.bh-rows li + li { border-top: 1px solid var(--acts-divider); }
.bh-row { display: flex; align-items: center; gap: 12px; padding: 14px; min-height: 44px; color: var(--acts-ink); text-decoration: none; }
.bh-row-ic { margin: 0; flex: none; }
.bh-row-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bh-row-t b { font: 600 .9375rem/1.3 var(--ui-font); color: var(--acts-navy); }
.bh-row-t span { font: 500 .8125rem/1.35 var(--ui-font); color: var(--acts-muted); }
.bh-chev { color: var(--acts-muted); display: inline-flex; }
.bh a:focus-visible { outline: 2px solid var(--acts-gold); outline-offset: 2px; }
@media (min-width: 720px) { .bh { max-width: 760px; margin: 0 auto; padding: 16px 0 32px; } .bh-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ROUND 301 — More (the Me page): gold line icons on plain rows, no tinted tiles, as in the ACTS Modern mockup. Only this page. */
.ui-screen.me .ui-tile { background: transparent !important; color: var(--acts-gold-text) !important; box-shadow: none; }
.ui-screen.me .ui-lrow { padding-top: 12px; padding-bottom: 12px; }

/* ============================================================
   ROUND 300 — phone Home: the quick tiles under the greeting (ACTS Modern). Phones and small tablets only (720px and below).
   Giving is not here yet (held back until the church confirms its rules).
   ============================================================ */
.td-tiles { margin: 0 0 16px; }
.td-tiles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.td-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 96px; box-sizing: border-box; padding: 12px; background: var(--acts-card); border: 1px solid var(--acts-border); border-radius: 16px; box-shadow: var(--acts-shadow); color: var(--acts-ink); text-decoration: none; }
.td-tile b { font: 600 .8125rem/1.25 var(--ui-font); color: var(--acts-navy); }
.td-tile small { font: 500 .6875rem/1.3 var(--ui-font); color: var(--acts-muted); }
.td-tile-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 12px; background: var(--acts-gold-soft); color: var(--acts-gold-text); }
.td-tile:focus-visible { outline: 2px solid var(--acts-gold); outline-offset: 2px; }
@media (min-width: 721px) { .td-tiles { display: none; } }
/* Round 305: the Bible hub is a tab page, so its top bar has no back arrow and no empty slot for one (the title sits at the left edge). */
body:has(.bh) .ui-head--inner .ui-back.is-ghost { display: none; }

/* Round 307 (v1.86.42): ACTS Messenger mockup on phones: the More title, the active filter chip in gold, the Community title. Tokens only. */
.me-phone-head { padding: 8px 16px 12px; }
.me-phone-head h1 { margin: 0; font: 700 1.625rem/1.2 var(--ui-font); color: var(--acts-navy); }
.me-phone-head p { margin: 2px 0 0; font: 500 .875rem/1.4 var(--ui-font); color: var(--acts-muted); }
body.mp-body .cf-chips .cf-chip.is-on { background: var(--acts-gold); border-color: var(--acts-gold); color: var(--acts-navy); }
.bh-tile-ic, .bh-row-ic { background: transparent; }   /* Round 307: gold line icons on plain white (the mockup), like More */
/* Round 308 (v1.86.43): the Home sections are rounded boxes on phones (16px corners, the card border). */
/* Round 309 (v1.86.44): Home shows today's devotion as a white card (mockup D2). Tokens only. */
body.mp-body.mp-ui .td-devo .cf-card { background: var(--acts-card); border: 1px solid var(--acts-border); border-radius: 16px; padding: 16px; box-shadow: var(--acts-shadow); margin: 0; }
body.mp-body.mp-ui .td-devo .cf-eyebrow { margin: 0 0 8px; font: 600 .75rem/1.2 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: var(--acts-muted); }
body.mp-body.mp-ui .td-devo .cf-dev-ref { margin: 0; font: 600 .8125rem/1.3 var(--ui-font); color: var(--acts-gold-text); }
body.mp-body.mp-ui .td-devo .cf-dev-title { margin: 2px 0 0; font: 700 1.125rem/1.3 var(--ui-font); color: var(--acts-navy); }
body.mp-body.mp-ui .td-devo .mp-meta { margin: 4px 0 0; font: 500 .875rem/1.4 var(--ui-font); color: var(--acts-muted); }
body.mp-body.mp-ui .td-devo .cf-verse-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
body.mp-body.mp-ui .td-devo .cf-verse-bar .btn { min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--acts-navy); color: var(--acts-card); border: 0; display: inline-flex; align-items: center; font: 600 .9375rem/1 var(--ui-font); text-decoration: none; }
body.mp-body.mp-ui .td-devo .cf-dev-week { font: 500 .8125rem/1.4 var(--ui-font); color: var(--acts-muted); }

/* Round 309 (v1.86.44): the verse card on the Bible hub uses the same navy card as the Home verse (the Home rule is scoped to .ui-screen, which the hub does not have). Tokens only. */
.bh-verse { margin: 0 0 16px; }
.bh-verse .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); }
/* Round 310 (v1.86.45): the phone tile and row icons are bare gold line icons on the card, like the ACTS Modern mockup (no tinted square). Tokens only. */
.td-tile-ic, .bh-tile-ic, .bh-row-ic { background: transparent; border-radius: 0; color: var(--acts-gold); width: 30px; height: 30px; }
.bh-row-ic { width: 32px; height: 32px; }
.td-tile-ic .mp-icon, .bh-tile-ic .mp-icon, .bh-row-ic .mp-icon { stroke-width: 1.9; }
/* Round 311 (v1.86.46): the icons cut from the ACTS icon set sheet are CSS masks painted in currentColor. The muted text rule on tile labels must not repaint them. Tokens only. */
.td-tile .td-tile-ic .mp-icon--sheet, .bh-tile .bh-tile-ic .mp-icon--sheet, .bh-row .bh-row-ic .mp-icon--sheet { color: inherit; }
.td-tile-ic, .bh-tile-ic { color: var(--acts-gold); }