:root {
  /* B1.church-inspired palette: navy header, blue accents, cool gray bg */
  --bg: #eef1f6;
  --card: #ffffff;
  --text: #1e293b;
  --text-muted: #64748b;
  --amber-700: #1d5eb4;   /* primary blue (var names kept for compatibility) */
  --amber-600: #2f74d0;   /* hover blue */
  --amber-100: #e4eefb;   /* light blue tint */
  --amber-200: #bfd7f2;   /* soft blue */
  --border: #dbe3ee;
  --shadow: 0 1px 3px rgba(13, 36, 71, 0.08), 0 1px 2px rgba(13, 36, 71, 0.06);

  /* Fixed bottom tab bar height, and the iPhone home-indicator inset.
     Everything that needs to sit above the tab bar references these. */
  --tabbar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* SIGNED-OUT BRAND PALETTE (install page + login).
     Deep navy into royal blue, with orange as the single accent, sampled from
     the church's existing B1 install page so the two feel like one church
     rather than two products. Kept as variables rather than sprinkled
     literals so the whole scheme moves from one place.
     Deliberately separate from the --amber-* theme variables, which the staff
     theme editor owns and which drive the signed-IN app. */
  --brand-navy: #072e69;
  --brand-blue: #1b4fa2;
  --brand-accent: #f97216;
  --brand-accent-hover: #e5650c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  /* svh = SMALL viewport height: the stable height with browser chrome
     visible. Unlike 100vh (which ignores chrome and lets content spill
     below) and 100dvh (which resizes as the URL bar hides/shows, making
     the layout jump), svh never moves. */
  min-height: 100vh; /* fallback for old browsers */
  min-height: 100svh;
  /* room for the fixed tab bar + iPhone home-indicator inset */
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
}

a { color: var(--amber-700); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(135deg, #0d2440 0%, #16467f 60%, #1d5eb4 100%);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
}

.topbar h1 {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 700;
  color: #fff;
}

.topbar a.back {
  color: #fff;
  font-size: 1.3rem;
  padding: 4px 8px;
  margin-left: -8px;
}

.topbar .logout-form { margin: 0; }
.topbar button.linklike {
  background: none;
  border: none;
  color: #bfd7f2;
  font-size: 0.85rem;
  padding: 8px;
  cursor: pointer;
}

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}

.card {
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--border);
}

.card-body { padding: 14px 16px; }

.group-card {
  display: block;
  color: inherit;
}
.group-card:hover { text-decoration: none; }

.group-banner {
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: var(--amber-100);
  display: block;
}

.group-banner-placeholder {
  width: 100%;
  height: 90px;
  background: linear-gradient(135deg, var(--amber-200), var(--amber-100));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.group-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 4px;
}

.group-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--amber-700);
  background: var(--amber-100);
  border-radius: 999px;
  padding: 2px 9px;
  margin-right: 6px;
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 16px;
}

/* Group page */
.group-header {
  margin: -16px -16px 16px;
}
.group-header .group-banner { height: 150px; border-radius: 0; }
.group-header .card-body { padding: 16px; }

.conversation-list-item {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: inherit;
}
.conversation-list-item:last-child { border-bottom: none; }
.conversation-list-item:hover { background: var(--amber-100); text-decoration: none; }
.conv-title { font-weight: 700; margin: 0 0 2px; }
.conv-snippet {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-count {
  font-size: 0.75rem;
  color: var(--amber-700);
  font-weight: 600;
}

form.new-conv {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input[type=text], input[type=email], input[type=password], textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  width: 100%;
}
textarea { resize: vertical; min-height: 44px; }

button, .btn {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  background: var(--amber-700);
  color: #fff;
  cursor: pointer;
  min-height: 44px;
}
button:hover, .btn:hover { background: var(--amber-600); text-decoration: none; }
button:active { transform: translateY(1px); }
.btn-secondary {
  background: var(--amber-100);
  color: var(--amber-700);
}
.btn-small {
  padding: 6px 12px;
  min-height: auto;
  font-size: 0.82rem;
  border-radius: 999px;
}

/* Thread / messages */
#message-list { padding: 12px 0 4px; }

.message {
  padding: 10px 16px;
  margin-bottom: 2px;
}

.message.is-reply {
  margin-left: 20px;
  padding-left: 14px;
  border-left: 3px solid var(--amber-200);
}

.message-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.message-author {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--amber-700);
}
.message-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.message-body {
  font-size: 0.95rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0 0 6px;
}

.reply-context {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 3px;
  font-style: italic;
}

.message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.reaction-chip {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  min-height: auto;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.reaction-chip.mine {
  background: var(--amber-100);
  border-color: var(--amber-600);
  color: var(--amber-700);
  font-weight: 700;
}
.reaction-chip:hover { background: var(--amber-100); }

.reply-btn {
  font-size: 0.78rem;
  color: var(--amber-700);
  background: none;
  border: none;
  padding: 3px 6px;
  cursor: pointer;
  min-height: auto;
  font-weight: 600;
}

.composer {
  position: sticky;
  /* sit directly on top of the fixed tab bar, above the home indicator */
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 10px 16px 14px;
}
.composer .reply-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--amber-100);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: var(--amber-700);
  margin-bottom: 8px;
}
.composer .reply-banner a { color: var(--amber-700); font-weight: 700; }
.composer form {
  display: flex;
  gap: 8px;
}
.composer textarea { flex: 1; min-height: 44px; }

/* Sermons */
.sermon-card { display: flex; gap: 12px; padding: 12px; align-items: flex-start; }
.sermon-thumb {
  width: 120px;
  height: 68px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--amber-100);
}
.sermon-info { flex: 1; min-width: 0; }
.sermon-title { font-weight: 700; margin: 0 0 3px; font-size: 0.95rem; }
.sermon-date { font-size: 0.78rem; color: var(--amber-700); margin: 0 0 4px; font-weight: 600; }
.sermon-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.playlist-title { font-size: 1.1rem; font-weight: 700; margin: 18px 0 10px; }
.playlist-desc { color: var(--text-muted); font-size: 0.88rem; margin: -6px 0 14px; }

.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  margin-bottom: 16px;
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border: none;
}

/* Login */
/* The signed-out family: /login, /signup, password reset, email confirm.
   Navy gradient, matching the install page hero, so the front door and the
   sign-in door look like the same building. #0d2440 is the app's theme-color
   and is written literally here because app.css is loaded everywhere and must
   not depend on setup.css's --hero-ink. */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /* Full-bleed: these pages render inside the layout's centred container, so
     without escaping it the navy is a column down the middle of a grey page.
     Same technique as the install hero. */
  margin-inline: calc(50% - 50vw);
  /* The extra top/bottom picks up the iPhone notch and home-indicator insets
     so the gradient runs under both rather than stopping at a white band. */
  padding: calc(28px + var(--safe-t)) max(20px, calc(50vw - 22rem))
           calc(28px + var(--safe-b));
  background: linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-blue) 100%);
}
/* 100vw includes the scrollbar; without this the full-bleed buys a few pixels
   of sideways scroll. Scoped to these pages via :has(). */
body:has(.login-wrap) { overflow-x: hidden; }

/* THE WHITE GUTTERS, top and bottom.
   Two separate causes, both of which only exist for the signed-in app:
     * .container adds 16px of vertical padding around every page;
     * body reserves room at the bottom for the fixed tab bar.
   Neither applies to a signed-out page -- there is no tab bar -- so the navy
   stopped short and the page background showed through above and below.
   Zeroed here rather than in the container itself, which the rest of the app
   still needs. */
body:has(.login-wrap) { padding-bottom: 0; }
body:has(.login-wrap) .container { padding: 0; max-width: none; }



/* The white wordmark, sitting on the navy ABOVE the card -- it cannot go
   inside, where white-on-white would be invisible. */
.login-logo {
  display: block;
  height: 52px;
  width: auto;
  max-width: 80%;
}
.login-card {
  background: var(--card);
  border-radius: 20px;
  /* Deeper than var(--shadow): this card floats on a dark background rather
     than sitting on the page, so it needs to lift off it. */
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  padding: 30px 26px 28px;
  max-width: 400px;
  width: 100%;
  border: none;
}

/* Bigger than the app's default controls, on purpose: the congregation skews
   over 60 and this is the first thing they touch. 52px clears the 44px WCAG
   floor with room to spare. */
.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"] {
  min-height: 52px;
  font-size: 1rem;
  border-radius: 10px;
}
.login-card button[type="submit"] {
  min-height: 52px;
  font-size: 1.02rem;
  font-weight: 700;
  border-radius: 10px;
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
}
.login-card button[type="submit"]:hover {
  background: var(--brand-accent-hover);
  border-color: var(--brand-accent-hover);
}
.login-card input:focus-visible,
.login-card button:focus-visible,
.login-card .google-btn:focus-visible {
  outline: 3px solid var(--amber-200);
  outline-offset: 2px;
}
.login-card h1 {
  text-align: center;
  color: var(--amber-700);
  margin: 0 0 4px;
  font-size: 1.4rem;
}
/* On /login the wordmark above the card carries the name, so the h1 is there
   for screen readers and page structure only. */
.login-title-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.login-sub {
  text-align: center;
  color: var(--text-muted);
  margin: 0 0 22px;
  font-size: 0.88rem;
}
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.error-box {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

/* Bottom tab bar */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(13,36,71,0.06);
  z-index: 100;
  /* Extend the bar's background into the home-indicator area so no page
     content is ever visible beneath it on iPhones. */
  padding-bottom: var(--safe-b);
  min-height: var(--tabbar-h);
}
.tabbar a {
  flex: 1;
  text-align: center;
  padding: 10px 0 8px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.tabbar a.active { color: var(--amber-700); }
.tabbar .tab-icon { font-size: 1.15rem; }

@media (max-width: 360px) {
  .tabbar a { font-size: 0.62rem; }
}

h1, h2, h3 { color: var(--text); }

/* Facebook-style group feed */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber-100);
  color: var(--amber-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.avatar.avatar-sm {
  width: 30px;
  height: 30px;
  font-size: 0.78rem;
}

.composer-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.composer-input {
  flex: 1;
  min-height: 44px;
  border-radius: 20px;
  background: var(--bg);
}
.composer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.composer-post-btn {
  padding: 8px 20px;
  min-height: 40px;
}

.post-card { margin-bottom: 14px; }
.post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.post-author {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.post-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.post-headline {
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 6px;
}
.post-body {
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}
.post-stats {
  display: flex;
  gap: 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 10px;
}

.post-actions {
  display: flex;
  border-top: 1px solid var(--border);
}
.post-actions .post-action-form {
  flex: 1;
  margin: 0;
}
.post-action-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 10px 0;
  min-height: 44px;
  cursor: pointer;
  border-radius: 0;
}
.post-actions a.post-action-btn {
  flex: 1;
  line-height: 24px;
}
.post-action-btn:hover { background: var(--amber-100); text-decoration: none; }
.post-action-btn.liked { color: var(--amber-700); font-weight: 700; }

.post-view-all {
  padding-top: 4px;
  padding-bottom: 4px;
}
.post-view-all a {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}

.post-comments {
  padding-top: 4px;
  padding-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-bubble {
  background: color-mix(in srgb, var(--border) 45%, var(--bg));
  border-radius: 16px;
  padding: 8px 12px;
  font-size: 0.88rem;
  line-height: 1.35;
  word-wrap: break-word;
}
.comment-author {
  font-weight: 700;
  margin-right: 4px;
}

.post-quick-comment { padding-top: 8px; padding-bottom: 12px; }
.post-quick-comment .comment-row { gap: 8px; }
.comment-input {
  flex: 1;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 0.88rem;
  min-height: 38px;
}
.comment-submit {
  padding: 8px 16px;
  min-height: 38px;
  border-radius: 999px;
}

/* Group banner photo upload affordance */
.group-banner-wrap {
  position: relative;
}
.group-banner-edit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
}
.group-banner-edit:hover { background: rgba(0, 0, 0, 0.7); }

/* ---------------------------------------------------------------------------
   PWA install banner (injected by pb_public/install.js).
   Sits directly above the fixed tab bar, so it must clear both the bar height
   and the iPhone home-indicator inset -- the same offsets .composer uses.
   --------------------------------------------------------------------------- */
.install-banner {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px);
  z-index: 90;               /* below .tabbar (100), above page content */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card, #fff);
  box-shadow: 0 6px 20px rgba(13, 36, 64, 0.18);
  font-size: 14px;
}

.install-banner-text {
  flex: 1;
  line-height: 1.35;
}

.install-banner-go {
  flex: none;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--amber-700);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.install-banner-x {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #667);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.install-banner-x:hover { background: var(--bg); }

@media (max-width: 400px) {
  .install-banner { font-size: 13px; gap: 8px; }
  .install-banner-go { padding: 7px 11px; }
}

/* ---------------------------------------------------------------------------
   Post-login notification opt-in (pb_public/notify-prompt.js).
   A soft ask shown before the browser's own permission dialog, so a "no" here
   never permanently blocks the site from asking later.
   --------------------------------------------------------------------------- */
.notify-prompt {
  position: fixed;
  inset: 0;
  z-index: 200;              /* above tabbar (100) and install banner (90) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(13, 36, 64, 0.45);
  padding: 16px;
  padding-bottom: calc(16px + var(--safe-b));
}

.notify-prompt-card {
  width: 100%;
  max-width: 420px;
  background: var(--card, #fff);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 40px rgba(13, 36, 64, 0.3);
}

.notify-prompt-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.notify-prompt-text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted, #55606e);
}

.notify-prompt-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.notify-prompt-no {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #55606e);
  font-size: 14px;
  cursor: pointer;
}

.notify-prompt-yes {
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--amber-700);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.notify-prompt-alt {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.95rem;
}
.notify-prompt-alt a { color: var(--amber-700); text-decoration: underline; }

.notify-prompt-status {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted, #55606e);
}

@media (min-width: 640px) {
  .notify-prompt { align-items: center; }
}

/* ---------------------------------------------------------------------------
   @mentions
   The highlight is applied server-side to an ALREADY-escaped body, so nothing
   here is ever fed raw user text (see mentions_lib.applyMentionMarkup).
   --------------------------------------------------------------------------- */
.mention {
  color: var(--amber-700);
  background: var(--amber-100);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 600;
  white-space: nowrap;
}

/* Autocomplete dropdown (pb_public/mentions.js). Appended to <body> and
   absolutely positioned under the composer, so it is never clipped by the
   card's overflow. */
.mention-menu {
  position: absolute;
  z-index: 999;
  max-width: 320px;
  max-height: 232px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 4px;
}

.mention-menu[hidden] { display: none; }

.mention-option {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mention-option:hover,
.mention-option.active {
  background: var(--amber-100);
  color: var(--amber-700);
}

/* ---------------------------------------------------------------------------
   Church logo in the topbar.
   The source art (260x55) is WHITE on transparent, which suits the dark blue
   topbar gradient directly -- no filter needed. Height-constrained with
   width:auto so the aspect ratio is preserved, and min-width:0 on the flex
   parent lets a long section title truncate instead of shoving the logo or
   the hamburger off-screen on narrow phones.
   --------------------------------------------------------------------------- */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.topbar-logo {
  height: 26px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}

.topbar-left h1 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sub-pages show back arrow + logo + section title; drop the logo a little
   so all three fit comfortably on small screens. */
@media (max-width: 400px) {
  .topbar-logo { height: 22px; }
}

/* ---------------------------------------------------------------------------
   Soft delete. The standalone 🗑️ button is gone -- Delete now lives inside the
   "..." post menu (postmenu.css / moderation_lib.postMenuHtml), which is where
   its wrapper form is styled. What remains here is the wrapper form itself,
   kept because the delete POST is still a plain form (works with JS off).
   --------------------------------------------------------------------------- */
.delete-form { display: inline-flex; margin: 0; }

/* Feed reaction buttons: four compact chips (❤️ 🙏 👍 😂) instead of the
   single "Like" the feed used to offer. Narrower than the old labelled
   button so four of them plus Comment still fit a 360px screen. */
.post-react-btn {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1rem;
  line-height: 1;
}

.post-react-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
}

.post-react-btn.liked .post-react-count {
  color: inherit;
}

@media (max-width: 380px) {
  .post-react-btn { padding-left: 7px; padding-right: 7px; }
}

/* ---------------------------------------------------------------------------
   Home screen clarity.
   The congregation skews over 60, so the landing screen has to say plainly
   what to do rather than relying on people inferring that a card is tappable.
   Body-sized text (not the usual small muted meta) because this is an
   instruction, not a footnote.
   --------------------------------------------------------------------------- */
.home-intro {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
}

.group-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.group-card-foot .group-meta {
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* A visual affordance INSIDE the card's anchor -- deliberately a span, not a
   button, so the whole card remains one large tap target. */
.group-open-btn {
  flex: none;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--amber-700);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Home screen clarity. The congregation skews over 60, so the landing screen
   states plainly what to do rather than relying on people inferring that a
   card is tappable. Body-sized text because this is an instruction, not a
   footnote.
   --------------------------------------------------------------------------- */
.home-intro {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
}

.group-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.group-card-foot .group-meta { margin: 0; flex: 1; min-width: 0; }

/* Visual affordance INSIDE the card's anchor -- deliberately a span, not a
   button, so the whole card stays one large tap target. */
.group-open-btn {
  flex: none;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--amber-700);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Composer: collapsed pill that expands, Facebook-style.
   Driven by a hidden checkbox + :checked, so it works with JavaScript
   disabled -- no script, nothing to bind, nothing HTMX can swap away.
   --------------------------------------------------------------------------- */
.composer-collapsed {
  display: flex;
  align-items: center;
  gap: 10px;
}

.composer-pill {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.98rem;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-pill:hover { background: var(--amber-100, rgba(0,0,0,.05)); }

.composer-photo-hint {
  flex: none;
  font-size: 1.35rem;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
}

/* Expanded state */
.composer-expanded { display: none; }
.composer-toggle:checked ~ .composer-collapsed { display: none; }
.composer-toggle:checked ~ .composer-expanded { display: block; }

.composer-attach {
  display: block;
  margin: 10px 0 0;
}


.composer-cancel {
  padding: 9px 14px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.92rem;
  cursor: pointer;
}

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Photo on a post */
.post-image-wrap {
  display: block;
  margin: 10px 0 0;
  border-radius: 12px;
  overflow: hidden;
}

.post-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  background: var(--bg);
}

/* ---------------------------------------------------------------------------
   Composer photo picker. The native file input is hidden behind its label, so
   this is a pill button until a photo is chosen, then a thumbnail with the
   filename and a Remove action -- rather than "Choose File / No file chosen".
   --------------------------------------------------------------------------- */
.composer-attach { margin: 10px 0 0; }

.composer-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;              /* comfortable tap target */
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--amber-700);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.composer-photo-btn:hover { background: var(--amber-100, rgba(0, 0, 0, 0.04)); }

.composer-photo-icon { font-size: 1.15rem; line-height: 1; }

.composer-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.composer-preview-img {
  width: 64px;
  height: 64px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  background: var(--border);
}

.composer-preview-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.composer-preview-name {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-preview-remove {
  flex: none;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.composer-preview-remove:hover { background: var(--border); color: var(--text); }

/* The `hidden` attribute works by setting display:none in the UA stylesheet,
   so ANY author rule with an explicit `display` silently overrides it -- which
   is exactly what happened here: the native file input and the empty preview
   both stayed on screen. Restate it for the elements we style. */
.composer-attach input[type="file"][hidden],
.composer-preview[hidden],
.composer-photo-btn[hidden] {
  display: none !important;
}

/* Install guidance shown BEFORE sign-in. On iPhone the order genuinely
   matters -- a Home Screen PWA has its own storage, so signing in in Safari
   first means signing in again inside the app. */
.login-install {
  /* Sits on the navy above the sign-in card, not on the page background:
     loginBody renders it before .login-wrap, so it must carry the same
     backdrop or it reads as a detached fragment floating above the design.
     Full-bleed for the same reason .login-wrap is. */
  margin-inline: calc(50% - 50vw);
  margin-bottom: 0;
  padding: calc(16px + var(--safe-t)) max(20px, calc(50vw - 22rem)) 16px;
  max-width: none;
  border: none;
  border-radius: 0;
  background: var(--brand-navy);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}
.login-install strong { color: #fff; }

/* The iPhone version is a warning, not a note -- getting the order wrong
   there means signing in twice -- so it gets the accent bar rather than
   blending into the navy. */
.login-install-strong {
  background: var(--brand-accent);
  color: #fff;
}
.login-install-strong strong { color: #fff; }

.login-install-icon {
  display: inline-block;
  font-weight: 700;
}

/* ---- icon set (pb_hooks/icons_lib.js) ---------------------------------- */

/* One size, set here rather than per-icon, so a caller never has to think
   about it. currentColor is on the <svg> itself, so an icon takes the colour
   of whatever contains it -- which is how the active tab tints. */
.icon {
  width: 1.4em;
  height: 1.4em;
  display: block;
  flex: 0 0 auto;
}

/* The tab bar sized these as text (font-size on the glyph). SVGs need real
   dimensions, and the label sits under them. */
.tabbar .tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
.tabbar .tab-icon .icon { width: 24px; height: 24px; }

/* Drawer rows: the icon column was 22px wide for a centred glyph. */
.drawer-link-icon { display: flex; align-items: center; justify-content: center; }
.drawer-link-icon .icon { width: 21px; height: 21px; }

/* Small inline actions in admin tables. */
.sa-edit-cell .icon { width: 20px; height: 20px; }