/* ============================================================
   The Upper Room — community network for Prophecy Voices
   LinkedIn's 3-column playbook, rebuilt in the PV brand:
   warm cream page, white cards, copper accents, dark-brown chrome.
   Tokens come from ../../colors_and_type.css.
   ============================================================ */

/* ── Upper Room design-system tokens (see docs/DESIGN-SYSTEM.md) ──
   One type scale + radii for the whole app. New UI MUST use these, not fresh px/rem.
   Non-visual addition — existing styles unchanged until they adopt these vars. */
:root {
  --ur-fs-2xs: 0.7rem;   /* timestamps, tiny meta, badges */
  --ur-fs-xs:  0.78rem;  /* secondary meta, counts, nav labels */
  --ur-fs-sm:  0.85rem;  /* sub-text, captions, button text */
  --ur-fs-base:0.95rem;  /* post body, comments, default reading */
  --ur-fs-md:  1.05rem;  /* author names, card emphasis */
  --ur-fs-lg:  1.2rem;   /* card / section titles */
  --ur-fs-xl:  1.5rem;   /* page headings */
  --ur-lh-body: 1.7;     /* reading text */
  --ur-lh-ui:   1.3;     /* labels / UI */
  --ur-radius-card:  20px;
  --ur-radius-field: 11px;
  --ur-radius-pill:  999px;
}

.ur * , .ur *::before, .ur *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ur { font-family: var(--sans); background: var(--cream-dark); color: var(--text-dark); min-height: 100vh; overflow-x: hidden; }
/* never let a long word or pasted Scripture push the layout past the screen edge */
.ur-post-body, .ur-post-verse, .ur-saved-body, .ur-prayer-text, .ur-result-snippet { overflow-wrap: anywhere; }
.ur button { font-family: var(--sans); cursor: pointer; }
.ur a { color: inherit; text-decoration: none; }

/* avatars — initials, no images needed */
.ur .avatar { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-family: var(--sans); flex: 0 0 auto; overflow: hidden; user-select: none; }
.ur .avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── reusable card ── */
.ur .card { background: #fff; border: 1px solid #F1E9DC; border-radius: 20px; box-shadow: 0 2px 4px rgba(26,23,20,.03), 0 14px 38px rgba(124,45,18,.07); }

/* ════════════════ AUTH ════════════════ */
.ur-auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 0.9fr; }
.ur-auth-left { position: relative; background: var(--dark); display: flex; flex-direction: column; justify-content: center; padding: 64px 72px; overflow: hidden; }
.ur-auth-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: ur-bg-rotate 18s infinite; }
.ur-bg-1 { background-image: url('images/doves-bible.png'); animation-delay: 0s; }
.ur-bg-2 { background-image: url('images/spirit-poured.png'); animation-delay: 6s; }
.ur-bg-3 { background-image: url('images/hero-bg.png'); animation-delay: 12s; }
@keyframes ur-bg-rotate { 0% { opacity: 0; } 4% { opacity: 0.62; } 28% { opacity: 0.62; } 33% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ur-auth-bg { animation: none; } .ur-bg-1 { opacity: 0.55; } .ur-bg-2, .ur-bg-3 { opacity: 0; } }
.ur-auth-left::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(250,247,242,0.85) 0%, rgba(253,243,227,0.45) 42%, rgba(253,243,227,0.10) 100%); z-index: 1; pointer-events: none; }
.ur-auth-left-inner { position: relative; z-index: 2; max-width: 460px; }
.ur-auth-cross { font-size: 1.5rem; color: var(--copper); margin-bottom: 28px; }
.ur-auth-left h1 { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 800; line-height: 1.12; color: var(--text-light); margin-bottom: 20px; }
.ur-auth-left h1 em { font-style: italic; color: var(--copper-light); }
.ur-auth-left .tagline { font-size: 1.05rem; line-height: 1.6; color: var(--text-muted); font-style: italic; }
.ur-auth-left .verse-ref { margin-top: 18px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); }

.ur-auth-right { background: var(--cream); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px; }
.ur-auth-card { width: 100%; max-width: 380px; }
.ur-auth-brand { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--text-dark); text-align: center; margin-bottom: 6px; }
.ur-auth-brand span { color: var(--copper); }
.ur-auth-sub { text-align: center; font-size: 0.9rem; color: var(--text-mid); margin-bottom: 34px; }
.ur-oauth { display: flex; flex-direction: column; gap: 12px; }
.ur-oauth-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px 18px; border-radius: 100px; border: 1px solid rgba(26,18,8,0.18); background: #fff; font-size: 0.95rem; font-weight: 600; color: var(--text-dark); transition: background 0.15s, border-color 0.15s, transform 0.1s; }
.ur-oauth-btn:hover { background: #faf7f1; border-color: rgba(26,18,8,0.3); }
.ur-oauth-btn:active { transform: scale(0.99); }
.ur-oauth-btn.apple { background: #111; color: #fff; border-color: #111; }
.ur-oauth-btn.apple:hover { background: #000; }
.ur-oauth-logo { width: 20px; height: 20px; display: block; }
.ur-auth-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--text-mid); font-size: 0.8rem; }
.ur-auth-or::before, .ur-auth-or::after { content: ''; flex: 1; height: 1px; background: rgba(26,18,8,0.12); }
.ur-auth-email { width: 100%; padding: 13px 16px; border: 1px solid rgba(26,18,8,0.18); border-radius: 10px; font-family: var(--sans); font-size: 0.92rem; color: var(--text-dark); outline: none; }
.ur-auth-email:focus { border-color: var(--copper); }
.ur-auth-continue { width: 100%; margin-top: 10px; padding: 13px; border: none; border-radius: 10px; background: var(--copper); color: #fff; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.03em; transition: background 0.15s; }
.ur-auth-continue:hover { background: var(--copper-dark); }
.ur-auth-fine { margin-top: 22px; text-align: center; font-size: 0.72rem; color: var(--text-mid); line-height: 1.5; }
.ur-auth-fine a { color: var(--copper-dark); font-weight: 600; }

/* ════════════════ PROFILE SETUP ════════════════ */
.ur-setup { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 48px 24px; background: var(--cream-dark); }
.ur-setup-card { width: 100%; max-width: 560px; padding: 40px; }
.ur-setup-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ur-setup-step { font-size: var(--ur-fs-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper); }
.ur-setup-signout { font-size: var(--ur-fs-xs); font-weight: 600; color: var(--text-muted); background: none; border: none; padding: 0; }
.ur-setup-signout:hover { color: var(--copper-dark); }
.ur-photo-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ur-photo-btn.ghost { color: var(--text-mid); }
.ur-setup h2 { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.ur-setup .intro { font-size: 0.92rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 30px; }
.ur-photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.ur-photo-hint { font-size: 0.85rem; color: var(--text-mid); }
.ur-photo-hint b { color: var(--text-dark); display: block; font-size: 0.92rem; margin-bottom: 2px; }
.ur-photo-btn { margin-top: 6px; font-size: 0.8rem; font-weight: 600; color: var(--copper-dark); background: none; border: none; padding: 0; }
.ur-field { margin-bottom: 18px; }
.ur-field label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 7px; }
.ur-field label .opt { text-transform: none; letter-spacing: 0; color: var(--placeholder); font-weight: 500; }
.ur-field input, .ur-field textarea, .ur-field select { width: 100%; padding: 12px 14px; border: 1px solid rgba(26,18,8,0.18); border-radius: 10px; font-family: var(--sans); font-size: 0.92rem; color: var(--text-dark); outline: none; background: #fff; transition: border-color 0.15s; }
.ur-field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.ur-field input:focus, .ur-field textarea:focus, .ur-field select:focus { border-color: var(--copper); }
.ur-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ur-setup-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }
.ur-skip { background: none; border: none; font-size: 0.88rem; font-weight: 600; color: var(--text-mid); }
.ur-skip:hover { color: var(--text-dark); }
.ur-primary { padding: 13px 30px; border: none; border-radius: 100px; background: var(--copper); color: #fff; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.03em; transition: background 0.15s, transform 0.1s; }
.ur-primary:hover { background: var(--copper-dark); }
.ur-primary:active { transform: scale(0.99); }

/* ════════════════ TOP NAV ════════════════ */
.ur-topnav { position: sticky; top: 0; z-index: 50; background: var(--dark-brown); border-bottom: 1px solid rgba(200,113,74,0.18); }
.ur-topnav-inner { max-width: 1128px; margin: 0 auto; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.ur-logo { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--text-light); white-space: nowrap; }
.ur-logo span { color: var(--copper); }
.ur-search { position: relative; flex: 0 1 280px; display: block; }
.ur-search input { width: 100%; background: rgba(255,255,255,0.07); border: 1px solid transparent; border-radius: 8px; padding: 9px 32px 9px 38px; font-family: var(--sans); font-size: 0.85rem; color: var(--text-light); outline: none; }
.ur-search input::placeholder { color: var(--text-muted); }
.ur-search input:focus { border-color: var(--copper); background: rgba(255,255,255,0.1); }
.ur-search .ur-search-ic { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--text-muted); background: none; border: none; padding: 4px; display: inline-flex; }
.ur-search .ur-search-ic:hover { color: var(--copper-light); }
.ur-search .ur-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-muted); background: none; border: none; padding: 4px; display: inline-flex; }
.ur-search .ur-search-clear:hover { color: var(--text-light); }
.ur-nav-items { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ur-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border: none; background: none; color: var(--text-muted); border-radius: 8px; transition: color 0.15s, background 0.15s; position: relative; }
.ur-nav-item .ic { color: currentColor; }
.ur-nav-item span { font-size: 0.68rem; letter-spacing: 0.01em; }
.ur-nav-item:hover { color: var(--text-light); }
.ur-nav-item.active { color: var(--copper); }
.ur-nav-item.active::after { content: ''; position: absolute; bottom: -1px; left: 10px; right: 10px; height: 2px; background: var(--copper); border-radius: 2px; }
.ur-nav-badge { position: absolute; top: 2px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--copper); color: #fff; font-size: 0.6rem; font-weight: 700; border-radius: 8px; display: grid; place-items: center; }
.ur-me { padding-left: 8px; margin-left: 4px; border-left: 1px solid rgba(255,255,255,0.1); }

/* ════════════════ FEED LAYOUT ════════════════ */
.ur-shell { max-width: 1128px; margin: 0 auto; padding: 24px 20px 64px; display: grid; grid-template-columns: 240px 1fr 300px; gap: 24px; align-items: start; }

/* left rail */
.ur-left .profile-card { overflow: hidden; padding-bottom: 16px; }
.ur-cover { height: 60px; background: linear-gradient(120deg, var(--copper) 0%, var(--copper-dark) 60%, var(--mid-brown) 100%); }
.ur-left .profile-card .avatar { width: 68px; height: 68px; font-size: 1.5rem; border: 3px solid #fff; margin: -34px auto 0; }
.ur-left .profile-name { text-align: center; font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin: 10px 16px 4px; }
.ur-left .profile-meta { text-align: center; font-size: 0.8rem; color: var(--text-mid); margin: 0 16px; line-height: 1.5; }
.ur-left .profile-church { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 0.8rem; color: var(--copper-dark); font-weight: 600; }
.ur-divider { height: 1px; background: rgba(26,18,8,0.08); margin: 14px 0; }
.ur-left .stat-row { display: flex; justify-content: space-between; padding: 4px 16px; font-size: 0.8rem; }
.ur-left .stat-row span { color: var(--text-mid); }
.ur-left .stat-row b { color: var(--copper-dark); }
.ur-left-links { margin-top: 16px; }
.ur-left-link { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 0.85rem; font-weight: 500; color: var(--text-mid); transition: background 0.12s, color 0.12s; }
.ur-left-link .ic { color: var(--copper); }
.ur-left-link:hover { background: var(--cream); color: var(--text-dark); }

/* composer */
.ur-composer { padding: 14px 16px; margin-bottom: 16px; }
.ur-composer.locked .ur-composer-fake { color: var(--placeholder); cursor: pointer; }

/* guest nudge banner */
.ur-nudge { display: flex; align-items: center; gap: 14px; border-left: 3px solid var(--copper); padding: 14px 16px; margin-bottom: 16px; }
.ur-nudge-ic { width: 40px; height: 40px; border-radius: 50%; background: rgba(200,113,74,0.12); color: var(--copper); display: grid; place-items: center; font-size: 1.1rem; flex: 0 0 auto; }
.ur-nudge-text { flex: 1; font-size: 0.82rem; color: var(--text-mid); line-height: 1.45; }
.ur-nudge-text b { display: block; color: var(--text-dark); font-size: 0.9rem; margin-bottom: 2px; }
.ur-nudge-btn { flex: 0 0 auto; padding: 9px 18px; border: none; border-radius: 100px; background: var(--copper); color: #fff; font-weight: 700; font-size: 0.82rem; white-space: nowrap; transition: background 0.15s; }
.ur-nudge-btn:hover { background: var(--copper-dark); }
.ur-nudge.flash { animation: ur-nudge-flash 1.2s ease; }
@keyframes ur-nudge-flash { 0%, 100% { box-shadow: var(--shadow-card); } 30% { box-shadow: 0 0 0 4px rgba(200,113,74,0.4); } 60% { box-shadow: 0 0 0 4px rgba(200,113,74,0.18); } }
.ur-composer-top { display: flex; gap: 12px; align-items: center; }
.ur-composer-top .avatar { width: 44px; height: 44px; font-size: 1rem; }
.ur-composer-fake { flex: 1; text-align: left; padding: 13px 18px; border: 1px solid rgba(26,18,8,0.18); border-radius: 100px; background: #fff; color: var(--text-mid); font-size: 0.9rem; transition: background 0.12s; }
.ur-composer-fake:hover { background: var(--cream); }
.ur-composer-actions { display: flex; justify-content: space-around; margin-top: 12px; padding-top: 4px; }
.ur-composer-action { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: none; background: none; border-radius: 8px; color: var(--text-mid); font-size: 0.85rem; font-weight: 600; transition: background 0.12s; }
.ur-composer-action .ic { color: var(--copper); }
.ur-composer-action:hover { background: var(--cream); }

/* post card */
.ur-post { padding: 26px 26px 18px; margin-bottom: 22px; }
.ur-post-head { display: flex; gap: 13px; align-items: center; }
.ur-post-head .avatar { width: 50px; height: 50px; font-size: 1.05rem; box-shadow: 0 0 0 4px #FBF3E8; }
.ur-post-author { flex: 1; min-width: 0; }
.ur-post-author .name { font-family: var(--serif); font-size: 1.0rem; font-weight: 700; color: var(--text-dark); display: flex; align-items: center; gap: 6px; }
.ur-post-author .name .badge-ic { color: var(--copper); }
.ur-post-author .meta { font-size: 0.78rem; color: var(--text-mid); line-height: 1.4; }
.ur-post-author .time { font-size: 0.74rem; color: var(--placeholder); }
.ur-post-follow { background: none; border: none; color: var(--copper-dark); font-weight: 700; font-size: 0.82rem; display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 6px; }
.ur-post-follow:hover { background: var(--cream); }
.ur-post-body { font-size: 0.97rem; line-height: 1.78; color: #3A352F; margin: 18px 2px; white-space: pre-wrap; }
.ur-post-verse { display: block; font-family: var(--serif); background: #FCF7EF; border-radius: 14px; padding: 16px 18px; margin: 14px 0; font-style: italic; color: var(--copper-light); font-size: 1.0rem; line-height: 1.6; }
.ur-post-verse .ref { display: block; font-family: var(--sans); font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); margin-top: 8px; }
.ur-post-counts { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px 4px; font-size: 0.82rem; color: var(--text-mid); }
.ur-post-counts > span:first-child { color: var(--copper); font-weight: 600; }
.ur-post-counts .amen-dot { margin-right: 5px; vertical-align: middle; }
.ur-post-bar { display: flex; justify-content: space-around; border-top: 1px solid rgba(26,18,8,0.08); padding-top: 4px; }
.ur-post-action { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: none; background: none; border-radius: 8px; color: var(--text-mid); font-size: 0.84rem; font-weight: 600; transition: background 0.12s, color 0.12s; }
.ur-post-action:hover { background: var(--cream); }
.ur-post-action.active { color: var(--copper); }
.ur-post-action.active .ic { color: var(--copper); }

/* right rail */
.ur-right .rail-card { padding: 16px; margin-bottom: 16px; }
.ur-right .rail-title { font-size: 0.92rem; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.ur-right .rail-sub { font-size: 0.76rem; color: var(--text-mid); margin-bottom: 14px; line-height: 1.45; }
.ur-suggest { display: flex; gap: 10px; padding: 10px 0; }
.ur-suggest .avatar { width: 44px; height: 44px; font-size: 0.95rem; }
.ur-suggest-info { flex: 1; min-width: 0; }
.ur-suggest-info .name { font-size: 0.86rem; font-weight: 700; color: var(--text-dark); }
.ur-suggest-info .meta { font-size: 0.74rem; color: var(--text-mid); line-height: 1.4; margin-bottom: 8px; }
.ur-connect { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: 1.5px solid var(--copper); border-radius: 100px; background: none; color: var(--copper-dark); font-size: 0.8rem; font-weight: 700; transition: background 0.12s, color 0.12s; }
.ur-connect .ic { color: currentColor; }
.ur-connect:hover { background: var(--copper); color: #fff; }
.ur-connect.done { border-color: rgba(26,18,8,0.2); color: var(--text-mid); }
.ur-connect.done:hover { background: var(--cream); color: var(--text-dark); }
.ur-rail-foot { text-align: center; padding-top: 10px; }
.ur-rail-foot button { background: none; border: none; color: var(--text-mid); font-weight: 600; font-size: 0.82rem; padding: 6px; border-radius: 6px; width: 100%; }
.ur-rail-foot button:hover { background: var(--cream); color: var(--text-dark); }

/* the week's word widget */
.ur-word-card { padding: 0; overflow: hidden; }
.ur-word-head { background: var(--dark); padding: 16px; }
.ur-word-eyebrow { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ur-word-verse { font-family: var(--serif); font-size: 1rem; font-style: italic; line-height: 1.45; color: var(--text-light); }
.ur-word-ref { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); margin-top: 10px; }
.ur-word-body { padding: 14px 16px; }
.ur-word-body p { font-size: 0.8rem; color: var(--text-mid); line-height: 1.55; margin-bottom: 10px; }
.ur-word-link { font-size: 0.82rem; font-weight: 700; color: var(--copper-dark); display: inline-flex; align-items: center; gap: 5px; }

.ur-foot-note { text-align: center; font-size: 0.72rem; color: var(--text-mid); padding: 8px 0; }

/* ════════════════ CIRCLE PAGE ════════════════ */
.ur-shell-circle { grid-template-columns: 240px 1fr; }
.ur-circle-overview { padding: 18px; }
.ur-circle-overview .ovr-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-bottom: 14px; }
.ur-circle-overview .ovr-stats { display: flex; flex-direction: column; gap: 12px; }
.ovr-stat { display: flex; align-items: baseline; gap: 8px; }
.ovr-stat b { font-size: 1.05rem; color: var(--copper-dark); min-width: 18px; }
.ovr-stat span { font-size: 0.84rem; color: var(--text-mid); }

/* invitations */
.ur-invites { margin-bottom: 18px; }
.ur-invites-head, .ur-suggest-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; }
.ur-invites-head span, .ur-suggest-head span { font-size: 0.92rem; font-weight: 700; color: var(--text-dark); }
.ur-suggest-head { padding: 4px 4px 14px; }
.ur-manage { font-size: 0.84rem; font-weight: 600; color: var(--text-mid); cursor: pointer; }
.ur-manage:hover { color: var(--copper-dark); }
.ur-invite { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid rgba(26,18,8,0.08); }
.ur-invite .avatar { width: 52px; height: 52px; font-size: 1.1rem; }
.ur-invite-info { flex: 1; min-width: 0; }
.ur-invite-info .name { font-size: 0.92rem; font-weight: 700; color: var(--text-dark); }
.ur-invite-info .meta { font-size: 0.78rem; color: var(--text-mid); }
.ur-invite-info .note { font-size: 0.8rem; color: var(--text-mid); font-style: italic; margin-top: 4px; }
.ur-invite-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.ur-ghost { padding: 8px 16px; border: none; background: none; border-radius: 100px; font-size: 0.85rem; font-weight: 700; color: var(--text-mid); }
.ur-ghost:hover { background: var(--cream); color: var(--text-dark); }
.ur-solid { padding: 8px 18px; border: 1.5px solid var(--copper); border-radius: 100px; background: var(--copper); color: #fff; font-size: 0.85rem; font-weight: 700; }
.ur-solid:hover { background: var(--copper-dark); border-color: var(--copper-dark); }
.ur-invite-done { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 700; color: var(--copper-dark); }

/* suggestion tiles */
.ur-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ur-tile { position: relative; padding-bottom: 18px; text-align: center; overflow: hidden; display: flex; flex-direction: column; align-items: center; }
.ur-tile-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(19,14,9,0.45); color: #fff; display: grid; place-items: center; }
.ur-tile-x:hover { background: rgba(19,14,9,0.7); }
.ur-tile-cover { height: 56px; width: 100%; background: linear-gradient(120deg, var(--copper) 0%, var(--copper-dark) 55%, var(--mid-brown) 100%); }
.ur-tile .avatar { width: 72px; height: 72px; font-size: 1.5rem; border: 3px solid #fff; margin-top: -38px; }
.ur-tile .avatar.square { border-radius: 16px; }
.ur-tile-name { display: flex; align-items: center; gap: 5px; font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin: 12px 14px 2px; line-height: 1.25; }
.ur-tile-name .ic { color: var(--copper); }
.ur-tile-desc { font-size: 0.78rem; color: var(--text-mid); line-height: 1.4; margin: 0 16px; min-height: 32px; }
.ur-tile-count { font-size: 0.74rem; color: var(--placeholder); margin: 8px 0 14px; min-height: 16px; }
.ur-tile-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 7px 22px; border: 1.5px solid var(--copper); border-radius: 100px; background: none; color: var(--copper-dark); font-size: 0.85rem; font-weight: 700; transition: background 0.12s, color 0.12s; }
.ur-tile-btn .ic { color: currentColor; }
.ur-tile-btn:hover { background: var(--copper); color: #fff; }
.ur-tile-btn.done { border-color: rgba(26,18,8,0.2); color: var(--text-mid); }
.ur-tile-btn.done:hover { background: var(--cream); color: var(--text-dark); }

/* ════════════════ PROFILE PAGE ════════════════ */
.ur-shell-profile { grid-template-columns: 1fr 300px; }
.ur-prof-card { position: relative; overflow: hidden; margin-bottom: 16px; }
.ur-prof-cover { height: 120px; background: linear-gradient(120deg, var(--copper) 0%, var(--copper-dark) 50%, var(--mid-brown) 100%); }
.ur-prof-avatar { width: 110px !important; height: 110px !important; font-size: 2.2rem !important; border: 4px solid #fff; position: absolute; top: 64px; left: 24px; }
.ur-prof-edit { position: absolute; top: 132px; right: 20px; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--cream); color: var(--text-mid); display: grid; place-items: center; }
.ur-prof-edit:hover { background: var(--cream-dark); color: var(--text-dark); }
.ur-prof-body { padding: 56px 24px 24px; }
.ur-prof-name { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--text-dark); }
.ur-prof-name .ic { color: var(--copper); }
.ur-prof-headline { font-size: 1rem; color: var(--text-dark); margin-top: 4px; }
.ur-prof-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.ur-prof-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; color: var(--text-mid); }
.ur-prof-meta .ic { color: var(--copper); }
.ur-prof-stats { font-size: 0.82rem; color: var(--text-mid); margin-top: 10px; }
.ur-prof-stats b { color: var(--copper-dark); }
.ur-prof-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ur-prof-primary { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border: none; border-radius: 100px; background: var(--copper); color: #fff; font-size: 0.88rem; font-weight: 700; transition: background 0.15s; }
.ur-prof-primary:hover { background: var(--copper-dark); }
.ur-prof-ghost { padding: 9px 20px; border: 1.5px solid rgba(26,18,8,0.25); border-radius: 100px; background: none; color: var(--text-dark); font-size: 0.88rem; font-weight: 700; transition: border-color 0.15s, background 0.15s; }
.ur-prof-ghost:hover { border-color: var(--copper); background: var(--cream); }

.ur-prof-section { padding: 22px 24px; margin-bottom: 16px; }
.ur-section-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--text-dark); margin-bottom: 14px; display: flex; align-items: baseline; justify-content: space-between; }
.ur-section-sub { font-family: var(--sans); font-size: 0.78rem; font-weight: 500; color: var(--text-mid); }
.ur-about-text { font-size: 0.9rem; line-height: 1.7; color: var(--text-mid); }
.ur-community { display: flex; gap: 14px; align-items: center; padding: 8px 0; }
.ur-community-info .name { display: flex; align-items: center; gap: 5px; font-size: 0.92rem; font-weight: 700; color: var(--text-dark); }
.ur-community-info .name .ic { color: var(--copper); }
.ur-community-info .role { font-size: 0.8rem; color: var(--text-mid); margin-top: 2px; }
.ur-activity-post { padding: 14px 0; border-top: 1px solid rgba(26,18,8,0.08); }
.ur-activity-post:first-of-type { border-top: none; }
.ur-activity-time { font-size: 0.74rem; color: var(--placeholder); margin-bottom: 6px; }
.ur-activity-body { font-size: 0.88rem; line-height: 1.6; color: var(--text-dark); }
.ur-activity-counts { font-size: 0.76rem; color: var(--text-mid); margin-top: 10px; }
.ur-activity-all { text-align: center; border-top: 1px solid rgba(26,18,8,0.08); margin-top: 8px; padding-top: 8px; }
.ur-activity-all button { background: none; border: none; color: var(--text-mid); font-weight: 600; font-size: 0.84rem; padding: 6px; border-radius: 6px; width: 100%; }
.ur-activity-all button:hover { background: var(--cream); color: var(--text-dark); }

/* placeholder for unbuilt tabs */
.ur-placeholder { max-width: 480px; margin: 80px auto; text-align: center; padding: 0 24px; }
.ur-placeholder-cross { font-size: 2rem; color: var(--copper); margin-bottom: 16px; }
.ur-placeholder h2 { font-family: var(--serif); font-size: 1.8rem; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.ur-placeholder p { font-size: 0.92rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 24px; }

/* ════════════════ POST DETAIL + COMMENTS ════════════════ */
.ur-back { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; color: var(--text-mid); font-size: 0.86rem; font-weight: 600; padding: 4px 6px 14px; }
.ur-back:hover { color: var(--copper-dark); }
.ur-post-commentcount { cursor: pointer; }
.ur-post-commentcount:hover { color: var(--copper-dark); text-decoration: underline; }
.ur-comments { padding: 16px 18px 8px; margin-top: 16px; }
.ur-comments-title { font-size: 0.9rem; font-weight: 700; color: var(--text-dark); margin-bottom: 14px; }
.ur-comment-composer { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; }
.ur-comment-composer .avatar { width: 40px; height: 40px; font-size: 0.9rem; }
.ur-comment-inputwrap { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(26,18,8,0.18); border-radius: 100px; padding: 4px 4px 4px 16px; transition: border-color 0.15s; }
.ur-comment-inputwrap:focus-within { border-color: var(--copper); }
.ur-comment-inputwrap input { flex: 1; border: none; outline: none; background: none; font-family: var(--sans); font-size: 0.88rem; color: var(--text-dark); padding: 8px 0; }
.ur-comment-send { border: none; border-radius: 100px; background: var(--copper); color: #fff; font-weight: 700; font-size: 0.82rem; padding: 8px 18px; transition: background 0.15s; }
.ur-comment-send:hover { background: var(--copper-dark); }
.ur-comment-send:disabled { background: rgba(200,113,74,0.4); cursor: default; }
.ur-comment-locked { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; padding: 8px; border-radius: 100px; cursor: pointer; }
.ur-comment-locked:hover { background: var(--cream); }
.ur-comment-locked .avatar { width: 40px; height: 40px; font-size: 0.9rem; }
.ur-comment-locked-text { flex: 1; padding: 10px 16px; border: 1px dashed rgba(200,113,74,0.4); border-radius: 100px; color: var(--text-mid); font-size: 0.86rem; }
.ur-comments-list { display: flex; flex-direction: column; gap: 16px; }
.ur-comment { display: flex; gap: 10px; }
.ur-comment .avatar { width: 40px; height: 40px; font-size: 0.9rem; }
.ur-comment-main { flex: 1; min-width: 0; }
.ur-comment-bubble { background: var(--cream); border-radius: 4px 14px 14px 14px; padding: 10px 14px; }
.ur-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ur-comment-head .name { font-size: 0.86rem; font-weight: 700; color: var(--text-dark); display: inline-flex; align-items: center; gap: 6px; }
.ur-comment-head .you-tag { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--copper); border-radius: 4px; padding: 1px 6px; }
.ur-comment-head .meta { font-size: 0.72rem; color: var(--text-mid); }
.ur-comment-body { font-size: 0.86rem; line-height: 1.55; color: var(--text-dark); margin-top: 4px; }
.ur-comment-actions { display: flex; align-items: center; gap: 10px; padding: 6px 14px 0; }
.ur-comment-actions button { background: none; border: none; font-size: 0.76rem; font-weight: 700; color: var(--text-mid); padding: 0; }
.ur-comment-actions button:hover { color: var(--copper-dark); }
.ur-comment-actions button.active { color: var(--copper); }
.ur-comment-actions .dot { color: var(--placeholder); font-size: 0.7rem; }
.ur-comment-actions .time { margin-left: auto; font-size: 0.72rem; color: var(--placeholder); }

/* clickable author names / avatars across the app */
.ur-author-link { cursor: pointer; }
.ur-author-link:hover { color: var(--copper-dark); text-decoration: underline; }
.ur-clickable-author { cursor: pointer; flex: 0 0 auto; }
.ur-clickable-author:hover { opacity: 0.85; }
.ur-prof-primary.is-done { background: rgba(26,18,8,0.12); color: var(--text-dark); }
.ur-prof-primary.is-done:hover { background: rgba(26,18,8,0.18); }

/* ════════════════ ALERTS / NOTIFICATIONS ════════════════ */
.ur-alert-tabs { display: flex; gap: 8px; padding: 12px 16px; margin-bottom: 16px; }
.ur-alert-tab { padding: 7px 18px; border: 1px solid rgba(26,18,8,0.18); border-radius: 100px; background: none; font-size: 0.84rem; font-weight: 600; color: var(--text-mid); transition: background 0.12s, color 0.12s, border-color 0.12s; }
.ur-alert-tab:hover { background: var(--cream); color: var(--text-dark); }
.ur-alert-tab.active { background: var(--copper); border-color: var(--copper); color: #fff; }
.ur-alert-list { padding: 4px 0; }
.ur-alert { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px 14px 24px; border-top: 1px solid rgba(26,18,8,0.07); cursor: pointer; transition: background 0.12s; }
.ur-alert:first-child { border-top: none; }
.ur-alert:hover { background: var(--cream); }
.ur-alert.unread { background: rgba(200,113,74,0.06); }
.ur-alert.unread:hover { background: rgba(200,113,74,0.1); }
.ur-alert-dot { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--copper); }
.ur-alert .avatar { width: 48px; height: 48px; font-size: 1rem; }
.ur-alert-icon { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: rgba(200,113,74,0.12); color: var(--copper); }
.ur-alert-icon.k-word { background: var(--dark); color: var(--copper); }
.ur-alert-icon.k-reach { background: rgba(22,163,74,0.10); color: #16A34A; }
.ur-alert-icon.k-pray { background: rgba(200,113,74,0.14); color: var(--copper); }
.ur-alert-main { flex: 1; min-width: 0; }
.ur-alert-text { font-size: 0.88rem; line-height: 1.5; color: var(--text-dark); }
.ur-alert-text b { font-weight: 700; }
.ur-alert-excerpt { margin-top: 8px; padding: 8px 12px; border: 1px solid rgba(26,18,8,0.12); border-radius: 8px; font-size: 0.82rem; color: var(--text-mid); line-height: 1.45; }
.ur-alert-action { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 16px; border: 1.5px solid var(--copper); border-radius: 100px; background: none; color: var(--copper-dark); font-size: 0.8rem; font-weight: 700; transition: background 0.12s, color 0.12s; }
.ur-alert-action:hover { background: var(--copper); color: #fff; }
.ur-alert-action.done { border-color: rgba(26,18,8,0.2); color: var(--text-mid); }
.ur-alert-action.done:hover { background: var(--cream); color: var(--text-dark); }
.ur-alert-side { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ur-alert-time { font-size: 0.74rem; color: var(--placeholder); white-space: nowrap; }
.ur-alert-more { width: 28px; height: 28px; border: none; background: none; border-radius: 50%; color: var(--text-mid); display: grid; place-items: center; }
.ur-alert-more:hover { background: rgba(26,18,8,0.08); }
.ur-alert-empty { padding: 40px 24px; text-align: center; font-size: 0.88rem; color: var(--text-mid); }

/* ════════════════ MESSAGES ════════════════ */
.ur-shell-messages { grid-template-columns: 1fr; }
.ur-msg-panel { display: grid; grid-template-columns: 320px 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 56px - 48px); min-height: 440px; overflow: hidden; padding: 0; }
.ur-msg-list-head { grid-column: 1; grid-row: 1; padding: 16px 18px; font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--text-dark); border-right: 1px solid rgba(26,18,8,0.1); border-bottom: 1px solid rgba(26,18,8,0.1); }
.ur-msg-list { grid-column: 1; grid-row: 2; border-right: 1px solid rgba(26,18,8,0.1); overflow-y: auto; }
.ur-thread { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; min-width: 0; }

.ur-convo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: none; background: none; text-align: left; border-bottom: 1px solid rgba(26,18,8,0.06); position: relative; transition: background 0.12s; }
.ur-convo:hover { background: var(--cream); }
.ur-convo.active { background: var(--cream-dark); box-shadow: inset 3px 0 0 var(--copper); }
.ur-convo .avatar { width: 46px; height: 46px; font-size: 0.95rem; }
.ur-convo-info { flex: 1; min-width: 0; }
.ur-convo-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ur-convo-top .name { font-size: 0.88rem; font-weight: 700; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur-convo-top .time { font-size: 0.7rem; color: var(--placeholder); flex: 0 0 auto; }
.ur-convo-preview { font-size: 0.8rem; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ur-convo.unread .name { color: var(--text-dark); }
.ur-convo.unread .ur-convo-preview { color: var(--text-dark); font-weight: 600; }
.ur-convo-dot { position: absolute; right: 12px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--copper); }

.ur-thread-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(26,18,8,0.1); cursor: pointer; transition: background 0.12s; }
.ur-thread-head:hover { background: var(--cream); }
.ur-thread-head .avatar { width: 40px; height: 40px; font-size: 0.85rem; }
.ur-thread-head .name { font-size: 0.92rem; font-weight: 700; color: var(--text-dark); }
.ur-thread-head .meta { font-size: 0.76rem; color: var(--text-mid); }
.ur-thread-head .ic { margin-left: auto; color: var(--placeholder); }
.ur-thread-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--cream); }
.ur-bubble-row { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.ur-bubble-row.me { align-self: flex-end; flex-direction: row-reverse; }
.ur-bubble { background: #fff; border-radius: 14px 14px 14px 4px; padding: 9px 13px; box-shadow: var(--shadow-card); }
.ur-bubble-row.me .ur-bubble { background: var(--copper); border-radius: 14px 14px 4px 14px; }
.ur-bubble-text { font-size: 0.86rem; line-height: 1.45; color: var(--text-dark); }
.ur-bubble-row.me .ur-bubble-text { color: #fff; }
.ur-bubble-time { font-size: 0.66rem; color: var(--placeholder); margin-top: 4px; }
.ur-bubble-row.me .ur-bubble-time { color: rgba(255,255,255,0.7); }
.ur-thread-composer { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(26,18,8,0.1); }
.ur-thread-composer input { flex: 1; border: 1px solid rgba(26,18,8,0.18); border-radius: 100px; padding: 11px 18px; font-family: var(--sans); font-size: 0.88rem; color: var(--text-dark); outline: none; }
.ur-thread-composer input:focus { border-color: var(--copper); }
.ur-thread-send { width: 42px; height: 42px; flex: 0 0 auto; border: none; border-radius: 50%; background: var(--copper); color: #fff; display: grid; place-items: center; transition: background 0.15s; }
.ur-thread-send:hover { background: var(--copper-dark); }

/* ════════════════ GATHERINGS ════════════════ */
.ur-church-card { overflow: hidden; margin-bottom: 16px; position: relative; }
.ur-church-cover { height: 80px; background: linear-gradient(120deg, var(--copper) 0%, var(--copper-dark) 55%, var(--mid-brown) 100%); }
.ur-church-logo { width: 64px !important; height: 64px !important; font-size: 1.3rem !important; border: 3px solid #fff; position: absolute; top: 46px; left: 20px; }
.ur-church-body { padding: 24px 20px 18px; }
.ur-church-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--text-dark); display: flex; align-items: center; gap: 6px; }
.ur-church-name .ic { color: var(--copper); }
.ur-church-meta { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--text-mid); margin-top: 6px; }
.ur-church-meta .ic { color: var(--copper); }
.ur-church-link { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; color: var(--copper-dark); margin-top: 8px; }
.ur-church-link:hover { text-decoration: underline; }
.ur-church-members { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(26,18,8,0.08); font-size: 0.84rem; color: var(--text-mid); }
.ur-church-members b { color: var(--copper-dark); }

.ur-plan-cta { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; margin-bottom: 16px; border: none; text-align: left; }
.ur-plan-cta .avatar { width: 44px; height: 44px; font-size: 1rem; }
.ur-plan-cta-text { flex: 1; display: flex; align-items: center; gap: 8px; padding: 13px 18px; border: 1px solid rgba(26,18,8,0.18); border-radius: 100px; color: var(--text-mid); font-size: 0.9rem; transition: background 0.12s; }
.ur-plan-cta-text .ic { color: var(--copper); }
.ur-plan-cta:hover .ur-plan-cta-text { background: var(--cream); }
.ur-plan-locked { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 16px; border: 1px dashed rgba(200,113,74,0.4) !important; cursor: pointer; font-size: 0.86rem; color: var(--text-mid); }
.ur-plan-locked-ic { width: 40px; height: 40px; border-radius: 50%; background: rgba(200,113,74,0.12); color: var(--copper); display: grid; place-items: center; flex: 0 0 auto; }
.ur-plan-form { padding: 18px; margin-bottom: 16px; }
.ur-plan-form-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--text-dark); margin-bottom: 14px; }
.ur-plan-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

.ur-gathering-grid { display: flex; flex-direction: column; gap: 16px; }
.ur-gathering { padding: 18px 20px; border-left: 3px solid var(--copper); }
.ur-gathering-date { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--copper-dark); }
.ur-gathering-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--text-dark); margin: 8px 0 10px; }
.ur-gathering-host { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--text-mid); cursor: pointer; }
.ur-gathering-where { display: flex; align-items: center; gap: 7px; font-size: 0.84rem; color: var(--text-mid); margin-top: 8px; }
.ur-gathering-where .ic { color: var(--copper); }
.ur-gathering-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(26,18,8,0.08); gap: 12px; flex-wrap: wrap; }
.ur-gathering-going { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text-mid); }
.ur-going-avatars { display: flex; }
.ur-going-avatars .avatar { margin-left: -8px; }
.ur-going-avatars .avatar:first-child { margin-left: 0; }
.ur-gathering-actions { display: flex; gap: 8px; }
.ur-gathering-pray { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px solid rgba(26,18,8,0.18); border-radius: 100px; background: none; color: var(--text-mid); font-size: 0.82rem; font-weight: 700; }
.ur-gathering-pray:hover { border-color: var(--copper); color: var(--copper-dark); }
.ur-gathering-pray.active { border-color: var(--copper); color: var(--copper); background: rgba(200,113,74,0.08); }
.ur-gathering-rsvp { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 1.5px solid var(--copper); border-radius: 100px; background: var(--copper); color: #fff; font-size: 0.82rem; font-weight: 700; transition: background 0.12s; }
.ur-gathering-rsvp:hover { background: var(--copper-dark); }
.ur-gathering-rsvp.done { background: none; color: var(--copper-dark); }
.ur-gathering-rsvp.done:hover { background: var(--cream); }

/* ════════════════ COMPOSE MODAL ════════════════ */
.ur-modal-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(19,14,9,0.55); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 64px 20px; overflow-y: auto; }
.ur-modal { width: 100%; max-width: 560px; padding: 0; overflow: hidden; }
.ur-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid rgba(26,18,8,0.08); }
.ur-modal-author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ur-modal-author .avatar { width: 46px; height: 46px; font-size: 1rem; }
.ur-modal-author .name { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); line-height: 1.25; white-space: nowrap; }
.ur-modal-author .meta { font-size: 0.78rem; color: var(--text-mid); line-height: 1.3; }
.ur-modal-x { width: 34px; height: 34px; border: none; background: none; border-radius: 50%; color: var(--text-mid); display: grid; place-items: center; }
.ur-modal-x:hover { background: var(--cream); color: var(--text-dark); }
.ur-modal-body { width: 100%; border: none; outline: none; resize: none; min-height: 150px; padding: 18px; font-family: var(--sans); font-size: 1.05rem; line-height: 1.6; color: var(--text-dark); }
.ur-modal-body::placeholder { color: var(--placeholder); }
.ur-modal-verse { padding: 0 18px 6px; }
.ur-modal-verse textarea { width: 100%; border: 1px solid rgba(200,113,74,0.3); border-left: 3px solid var(--copper); border-radius: 8px; padding: 10px 12px; font-family: var(--sans); font-style: italic; font-size: 0.9rem; line-height: 1.5; color: var(--text-mid); resize: vertical; min-height: 56px; outline: none; }
.ur-modal-verse input { width: 100%; margin-top: 8px; border: 1px solid rgba(26,18,8,0.18); border-radius: 8px; padding: 9px 12px; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--copper-dark); outline: none; }
.ur-modal-verse textarea:focus, .ur-modal-verse input:focus { border-color: var(--copper); }
.ur-modal-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-top: 1px solid rgba(26,18,8,0.08); }
.ur-modal-tool { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid rgba(26,18,8,0.18); border-radius: 100px; background: none; color: var(--text-mid); font-size: 0.82rem; font-weight: 600; }
.ur-modal-tool .ic { color: var(--copper); }
.ur-modal-tool:hover { background: var(--cream); color: var(--text-dark); }
.ur-modal-tool.active { border-color: var(--copper); color: var(--copper-dark); background: rgba(200,113,74,0.08); }
.ur-modal-post { padding: 11px 26px; }

/* ── responsive ── */
@media (max-width: 980px) {
  .ur-shell { grid-template-columns: 1fr 300px; }
  .ur-shell-circle { grid-template-columns: 1fr; }
  .ur-shell-profile { grid-template-columns: 1fr; }
  .ur-tile-grid { grid-template-columns: repeat(3, 1fr); }
  .ur-left { display: none; }
}
@media (max-width: 760px) {
  .ur-shell { grid-template-columns: 1fr; }
  .ur-tile-grid { grid-template-columns: repeat(2, 1fr); }
  .ur-msg-panel { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .ur-msg-list { grid-column: 1; grid-row: 2; max-height: 180px; }
  .ur-thread { grid-column: 1; grid-row: 3; }
  .ur-right { display: none; }
  .ur-nav-item span { display: none; }
  .ur-search { flex-basis: 160px; }
  .ur-auth { grid-template-columns: 1fr; }
  .ur-auth-left { display: none; }
}

/* ════════════════ ADDED SCREENS — search · saved · prayer · settings · legal · share ════════════════ */

/* solo screen shell (single centered column, no rails) */
.ur-shell-solo { display: block; max-width: 680px; margin: 0 auto; padding: 24px 16px 80px; }
.ur-shell-solo .ur-center { width: 100%; }

.ur-page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ur-page-head .ic { color: var(--copper); }
.ur-page-head h2 { font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--text-dark); }
.ur-page-sub { font-size: 0.9rem; color: var(--text-mid); line-height: 1.55; margin-bottom: 18px; }

/* search */
.ur-search-empty { text-align: center; padding: 60px 24px; color: var(--text-mid); }
.ur-search-empty.small { padding: 24px; }
.ur-search-empty .ic { color: var(--copper); margin-bottom: 12px; }
.ur-search-empty h2 { font-family: var(--serif); font-size: 1.5rem; color: var(--text-dark); margin-bottom: 8px; }
.ur-search-empty p { font-size: 0.9rem; line-height: 1.55; max-width: 380px; margin: 0 auto; }
.ur-results-head { font-size: 0.95rem; color: var(--text-mid); padding: 4px 4px 16px; }
.ur-results-head b { color: var(--text-dark); }
.ur-result-group { padding: 18px; margin-bottom: 16px; }
.ur-result-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 10px; cursor: pointer; transition: background 0.12s; }
.ur-result-row:hover { background: var(--cream); }
.ur-result-row .avatar { width: 44px; height: 44px; font-size: 0.95rem; }
.ur-result-row .avatar.square { border-radius: 10px; }
.ur-result-info { flex: 1; min-width: 0; }
.ur-result-info .name { font-weight: 600; color: var(--text-dark); font-size: 0.92rem; display: flex; align-items: center; gap: 5px; }
.ur-result-info .name .ic { color: var(--copper); }
.ur-result-info .meta { font-size: 0.8rem; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur-result-row > .ic { color: var(--placeholder); flex: 0 0 auto; }
.ur-result-word { padding: 12px 6px; border-top: 1px solid rgba(26,18,8,0.06); cursor: pointer; }
.ur-result-word:hover { background: var(--cream); }
.ur-result-word .meta { font-size: 0.78rem; color: var(--text-mid); margin-bottom: 4px; }
.ur-result-snippet { font-size: 0.88rem; color: var(--text-dark); line-height: 1.5; }

/* saved words */
.ur-saved { padding: 16px 18px; margin-bottom: 14px; }
.ur-saved-note { display: flex; align-items: flex-start; gap: 7px; font-size: 0.82rem; font-style: italic; color: var(--copper-dark); background: rgba(200,113,74,0.08); border-radius: 8px; padding: 8px 11px; margin-bottom: 12px; }
.ur-saved-note .ic { color: var(--copper); flex: 0 0 auto; margin-top: 2px; }
.ur-saved-author { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; }
.ur-saved-author .name { font-weight: 600; font-size: 0.88rem; color: var(--text-dark); }
.ur-saved-author .meta { font-size: 0.76rem; color: var(--text-mid); }
.ur-saved-body { font-size: 0.92rem; line-height: 1.6; color: var(--text-dark); cursor: pointer; }
.ur-saved-body:hover { color: var(--copper-dark); }

/* prayer wall */
.ur-prayer-compose { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; margin-bottom: 16px; text-align: left; border: 1px solid rgba(200,113,74,0.14); color: var(--text-mid); font-size: 0.92rem; }
.ur-prayer-compose:hover { border-color: var(--copper); }
.ur-prayer { padding: 16px 18px; margin-bottom: 14px; position: relative; }
.ur-prayer.urgent { border-left: 3px solid var(--copper); }
.ur-prayer.answered { border-left: 3px solid #16A34A; }
.ur-prayer-flag { position: absolute; top: 14px; right: 16px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper-dark); }
.ur-prayer-flag.answered { color: #16A34A; display: inline-flex; align-items: center; gap: 4px; }
.ur-prayer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; }
.ur-prayer-head .name { font-weight: 600; font-size: 0.9rem; color: var(--text-dark); }
.ur-prayer-head .meta { font-size: 0.76rem; color: var(--text-mid); }
.ur-prayer-text { font-size: 0.92rem; line-height: 1.6; color: var(--text-dark); margin-bottom: 14px; }
.ur-prayer-bar { display: flex; align-items: center; gap: 14px; }
.ur-pray-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 100px; border: 1px solid rgba(200,113,74,0.3); background: none; color: var(--copper-dark); font-weight: 600; font-size: 0.85rem; }
.ur-pray-btn:hover { background: rgba(200,113,74,0.08); }
.ur-pray-btn.active { background: var(--copper); color: #fff; border-color: var(--copper); }
.ur-pray-count { font-size: 0.8rem; color: var(--text-mid); }

/* settings */
.ur-set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 12px 4px; background: none; border: none; text-align: left; border-top: 1px solid rgba(26,18,8,0.06); }
.ur-set-row:first-of-type { border-top: none; }
.ur-set-text .label { font-size: 0.92rem; font-weight: 600; color: var(--text-dark); }
.ur-set-text .sub { font-size: 0.78rem; color: var(--text-mid); margin-top: 2px; }
.ur-switch { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 100px; background: rgba(26,18,8,0.18); position: relative; transition: background 0.15s; }
.ur-switch .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.ur-switch.on { background: var(--copper); }
.ur-switch.on .knob { left: 21px; }
.ur-set-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 4px; background: none; border: none; border-top: 1px solid rgba(26,18,8,0.06); text-align: left; font-size: 0.92rem; font-weight: 500; color: var(--text-dark); }
.ur-set-link:first-of-type { border-top: none; }
.ur-set-link:hover { color: var(--copper-dark); }
.ur-set-link .ic:first-child { color: var(--copper); }
.ur-set-link .ic:last-child { margin-left: auto; color: var(--placeholder); }
.ur-signout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; margin: 6px 0 18px; border: 1px solid rgba(220,38,38,0.30); border-radius: 12px; background: none; color: #DC2626; font-weight: 600; font-size: 0.9rem; }
.ur-signout:hover { background: rgba(180,60,50,0.06); }

/* legal pages */
.ur-legal { padding: 30px 28px; }
.ur-legal-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.ur-legal-head .ic { color: var(--copper); }
.ur-legal-head h2 { font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--text-dark); }
.ur-legal-intro { font-size: 0.95rem; line-height: 1.65; color: var(--text-mid); margin-bottom: 24px; }
.ur-legal-section { margin-bottom: 20px; }
.ur-legal-section h3 { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.ur-legal-section p { font-size: 0.9rem; line-height: 1.6; color: var(--text-mid); }
.ur-legal-foot { font-size: 0.85rem; font-style: italic; color: var(--text-mid); padding-top: 18px; border-top: 1px solid rgba(26,18,8,0.08); }
.ur-legal-links { margin-top: 18px; }
.ur-legal-links button { padding: 11px 22px; border: none; border-radius: 100px; background: var(--copper); color: #fff; font-weight: 600; font-size: 0.86rem; }
.ur-legal-links button:hover { background: var(--copper-dark); }
.ur-prelegal { position: fixed; inset: 0; z-index: 200; background: var(--cream-dark); overflow-y: auto; }

/* share sheet */
.ur-sheet { width: 100%; max-width: 440px; background: #fff; border-radius: 18px 18px 0 0; padding: 12px 18px 22px; box-shadow: 0 -8px 40px rgba(0,0,0,0.2); animation: ur-sheet-up 0.2s ease; }
@keyframes ur-sheet-up { from { transform: translateY(40px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }
.ur-sheet-grip { width: 40px; height: 4px; border-radius: 100px; background: rgba(26,18,8,0.18); margin: 0 auto 16px; }
.ur-sheet-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--text-dark); margin-bottom: 14px; }
.ur-sheet-list { display: flex; flex-direction: column; gap: 4px; }
.ur-sheet-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 8px; background: none; border: none; text-align: left; border-radius: 10px; font-size: 0.92rem; color: var(--text-dark); }
.ur-sheet-row:hover { background: var(--cream); }
.ur-sheet-ic { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; background: rgba(200,113,74,0.1); color: var(--copper-dark); align-items: center; justify-content: center; }
.ur-sheet-cancel { width: 100%; margin-top: 14px; padding: 13px; border: 1px solid rgba(26,18,8,0.14); border-radius: 12px; background: none; font-weight: 600; font-size: 0.9rem; color: var(--text-mid); }
.ur-sheet-cancel:hover { background: var(--cream); }
.ur-sheet-scrim { align-items: flex-end; padding: 0; }
.ur-sheet-scrim .ur-sheet { margin: 0 auto; }

/* Me dropdown menu */
.ur-me { position: relative; }
.ur-me-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 240px; background: #fff; border: 1px solid rgba(200,113,74,0.16); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.16); padding: 8px; z-index: 120; animation: ur-menu-in 0.14s ease; }
@keyframes ur-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.ur-me-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; border-bottom: 1px solid rgba(26,18,8,0.07); margin-bottom: 6px; }
.ur-me-menu-head .name { font-weight: 600; font-size: 0.88rem; color: var(--text-dark); }
.ur-me-menu-head .meta { font-size: 0.76rem; color: var(--text-mid); }
.ur-me-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 10px; background: none; border: none; text-align: left; border-radius: 9px; font-size: 0.88rem; font-weight: 500; color: var(--text-dark); }
.ur-me-item:hover { background: var(--cream); }
.ur-me-item .ic { color: var(--copper); }
.ur-me-item.danger { color: #DC2626; }
.ur-me-item.danger .ic { color: #DC2626; }
.ur-me-divider { height: 1px; background: rgba(26,18,8,0.07); margin: 6px 4px; }

/* post save (bookmark) + counts right group */
.ur-post-counts-right { display: inline-flex; align-items: center; gap: 14px; }
.ur-post-save { background: none; border: none; color: var(--text-mid); padding: 2px; display: inline-flex; }
.ur-post-save:hover, .ur-post-save.active { color: var(--copper); }

/* circle invite count chip */
.ur-invites-count { background: var(--copper); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 100px; }

/* clickable left links get a pointer */
.ur-left-link { cursor: pointer; }

/* ════════════════ MOBILE — make every added screen and the nav phone-first ════════════════ */
@media (max-width: 760px) {
  /* turn the top nav row into a sticky bottom tab bar on phones */
  .ur-topnav { position: sticky; top: 0; }
  .ur-topnav-inner { gap: 8px; }
  .ur-search { flex: 1 1 auto; }
  .ur-nav-items { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--dark-brown); display: flex; justify-content: space-around; align-items: center; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,0.08); margin: 0; }
  .ur-nav-item { flex: 1; flex-direction: column; gap: 2px; padding: 6px 0; }
  .ur-nav-item span { display: block !important; font-size: 0.6rem; }
  .ur-me { border-left: none; padding-left: 0; margin-left: 0; flex: 1; }
  .ur-me .ur-nav-item { flex-direction: column; }
  /* the Me menu drops to a bottom popover above the tab bar */
  .ur-me-menu { position: fixed; top: auto; bottom: 64px; left: 12px; right: 12px; width: auto; }
  /* give content room above the bottom bar + symmetric side gutters (fix: right edge bleed) */
  .ur-shell, .ur-shell-solo, .ur-placeholder { padding-bottom: 84px; }
  .ur-shell { padding-left: 14px; padding-right: 14px; }
  .ur-shell-solo { padding-left: 12px; padding-right: 12px; }
  /* center column must be allowed to shrink so long words/verse cards wrap instead of pushing off-screen */
  .ur-center, .ur-shell > * { min-width: 0; }
  .ur-logo { font-size: 0.95rem; }
  /* share sheet already docks to the bottom; widen on mobile */
  .ur-sheet { max-width: 100%; }
}
@media (max-width: 420px) {
  .ur-nav-item span { font-size: 0.56rem; }
  .ur-page-head h2, .ur-legal-head h2 { font-size: 1.45rem; }
  .ur-result-row .avatar { width: 40px; height: 40px; }
}

/* AIxWrk-style brand lockup (amber rounded-square glyph + tight wordmark) — reskin 2026-06-05 */
.ur-brand-lockup { display: inline-flex; align-items: center; gap: 9px; }
.ur-brand-glyph { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--copper), var(--copper-light)); color: #fff; display: grid; place-items: center; font-size: 15px; line-height: 1; flex-shrink: 0; box-shadow: 0 4px 12px rgba(217,119,6,0.20); }
.ur-brand-wm { font-weight: 800; letter-spacing: -0.02em; }