/* ====================================================================
   MemoryVerses — Notifications & Account dropdowns (redesign)
   Implements design_handoff_notification_account_dropdowns on the Slate &
   Coral palette. Same popover language as the nav dropdowns: a --ddv-surface
   popover with a --ddv-border-strong edge, the 4-layer --ddv-shadow, an 18px
   radius, an up-pointing caret, mono eyebrows, serif names, accent details.

   Self-contained token set (--ddv-*) scoped to .js-site-top-bar (always
   present on the bar). Light defaults; dark via [data-theme='dark'] /
   .theme-dark / OS preference, matching the app's theme switching.
   Component classes use the .mvdd- prefix and are styled here directly — they
   are NOT scanner utility classes, so they need no css-store.
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,500;6..72,600;6..72,700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- Tokens — light ------------------------------------------------ */
.js-site-top-bar {
	--ddv-surface: #FFFFFF;
	--ddv-surface-2: #F7F7F2;
	--ddv-border: rgba(11, 20, 38, 0.08);
	--ddv-border-strong: rgba(11, 20, 38, 0.14);
	--ddv-text-1: #0B1426;
	--ddv-text-2: #3F4A60;
	--ddv-text-3: #6B7790;
	--ddv-accent: #3F5876;
	--ddv-accent-strong: #2A4060;
	--ddv-accent-soft: rgba(63, 88, 118, 0.10);
	--ddv-brand: #C25E3F;
	--ddv-brand-soft: rgba(194, 94, 63, 0.10);
	--ddv-success: #059669;
	--ddv-success-soft: rgba(5, 150, 105, 0.10);
	--ddv-danger: #DC2626;
	--ddv-danger-soft: rgba(220, 38, 38, 0.08);
	--ddv-font-serif: 'Newsreader', 'Source Serif Pro', Georgia, serif;
	--ddv-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	--ddv-shadow:
		0 0 0 1px rgba(11, 20, 38, 0.06),
		0 2px 4px -1px rgba(11, 20, 38, 0.06),
		0 14px 28px -10px rgba(11, 20, 38, 0.18),
		0 40px 80px -20px rgba(11, 20, 38, 0.28);
}

/* ---- Tokens — dark (forced) --------------------------------------- */
[data-theme='dark'] .js-site-top-bar,
.theme-dark .js-site-top-bar {
	--ddv-surface: #131E36;
	--ddv-surface-2: #1A2542;
	--ddv-border: rgba(255, 255, 255, 0.08);
	--ddv-border-strong: rgba(255, 255, 255, 0.14);
	--ddv-text-1: #F5F6FA;
	--ddv-text-2: #B6BFD3;
	--ddv-text-3: #7B8AA6;
	--ddv-accent: #8FA7C2;
	--ddv-accent-strong: #6E89A8;
	--ddv-accent-soft: rgba(143, 167, 194, 0.16);
	--ddv-brand: #F08B6E;
	--ddv-brand-soft: rgba(240, 139, 110, 0.15);
	--ddv-success: #34D399;
	--ddv-success-soft: rgba(52, 211, 153, 0.15);
	--ddv-danger: #F87171;
	--ddv-danger-soft: rgba(248, 113, 113, 0.12);
	--ddv-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.4),
		0 2px 4px -1px rgba(0, 0, 0, 0.3),
		0 16px 32px -8px rgba(0, 0, 0, 0.45),
		0 48px 80px -24px rgba(0, 0, 0, 0.55);
}

/* ---- Tokens — dark (OS preference, no explicit choice) ------------- */
@media (prefers-color-scheme: dark) {
	html:not([data-theme='light']) .js-site-top-bar {
		--ddv-surface: #131E36;
		--ddv-surface-2: #1A2542;
		--ddv-border: rgba(255, 255, 255, 0.08);
		--ddv-border-strong: rgba(255, 255, 255, 0.14);
		--ddv-text-1: #F5F6FA;
		--ddv-text-2: #B6BFD3;
		--ddv-text-3: #7B8AA6;
		--ddv-accent: #8FA7C2;
		--ddv-accent-strong: #6E89A8;
		--ddv-accent-soft: rgba(143, 167, 194, 0.16);
		--ddv-brand: #F08B6E;
		--ddv-brand-soft: rgba(240, 139, 110, 0.15);
		--ddv-success: #34D399;
		--ddv-success-soft: rgba(52, 211, 153, 0.15);
		--ddv-danger: #F87171;
		--ddv-danger-soft: rgba(248, 113, 113, 0.12);
		--ddv-shadow:
			0 0 0 1px rgba(0, 0, 0, 0.4),
			0 2px 4px -1px rgba(0, 0, 0, 0.3),
			0 16px 32px -8px rgba(0, 0, 0, 0.45),
			0 48px 80px -24px rgba(0, 0, 0, 0.55);
	}
}

/* ====================================================================
   Popover chrome — both dropdowns. These override the panel's inline
   utility classes (bg-FFFFFF/br12/shadow-lg) via higher specificity.
   ==================================================================== */
.js-site-top-bar .mvdd-pop {
	background: var(--ddv-surface) !important;
	border: 1px solid var(--ddv-border-strong) !important;
	border-radius: 18px !important;
	box-shadow: var(--ddv-shadow) !important;
	margin-top: 14px;
	overflow: visible;            /* let the caret sit outside the top edge */
	animation: mvdd-pop-in 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}
.js-site-top-bar .mvdd-pop-notif { width: 372px; }
.js-site-top-bar .mvdd-pop-acct { width: 320px; }

@keyframes mvdd-pop-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Up-pointing caret — a rotated square sitting on the top edge, pointing
   at its trigger. Drawn with the panel's surface + top/left border. */
.mvdd-caret {
	position: absolute;
	top: -6px;
	width: 12px;
	height: 12px;
	background: var(--ddv-surface);
	border-top: 1px solid var(--ddv-border-strong);
	border-left: 1px solid var(--ddv-border-strong);
	border-radius: 3px 0 0 0;
	transform: rotate(45deg);
	z-index: 1;
}
.mvdd-caret-bell { right: 20px; }
.mvdd-caret-avatar { right: 14px; }

/* Scroll region — keeps the card inside the viewport, rounds its corners so
   rows clip cleanly to the popover. Sibling of the caret (never clips it). */
.mvdd-scroll {
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	border-radius: 18px;
}
.mvdd-clip { border-radius: 18px; overflow: hidden; }

/* Eyebrow — mono, accent, leading dot. */
.mvdd-eyebrow {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--ddv-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ddv-accent);
}
.mvdd-eyebrow::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 99px;
	background: var(--ddv-accent);
	flex-shrink: 0;
}

/* ====================================================================
   NOTIFICATIONS
   ==================================================================== */
.mvdd-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px 14px;
	border-bottom: 1px solid var(--ddv-border);
}
.mvdd-markread {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ddv-text-3);
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	transition: color 0.12s;
	font-family: inherit;
}
.mvdd-markread:hover { color: var(--ddv-accent); }

/* Section mini-headers — "Announcements" / "Activity" bands in the bell feed. */
.mvdd-subhead {
	font-family: var(--ddv-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ddv-text-3);
	padding: 10px 18px 8px;
	background: var(--ddv-surface-2);
	border-bottom: 1px solid var(--ddv-border);
}

/* Row — 3-col grid: media · body · trailing. */
.mvdd-note {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 13px;
	align-items: start;
	padding: 14px 18px;
	text-decoration: none;
	border-bottom: 1px solid var(--ddv-border);
	border-left: 2px solid transparent;
	background: transparent;
	transition: background 0.12s;
}
.mvdd-note:last-child { border-bottom: 0; }
.mvdd-note:hover { background: var(--ddv-surface-2); }
.mvdd-note.is-unread {
	background: var(--ddv-accent-soft);
	border-left-color: var(--ddv-accent);
}
.mvdd-note.is-unread:hover { background: var(--ddv-accent-soft); }

/* Leading media */
.mvdd-chip {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	flex-shrink: 0;
	background: var(--ddv-accent-soft);
	color: var(--ddv-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Sitewide announcement rows: megaphone chip in brand coral, so they read
   differently at a glance from the slate chips/avatars on user alerts. */
.mvdd-chip-announce {
	background: var(--ddv-brand-soft);
	color: var(--ddv-brand);
}
.mvdd-av {
	width: 36px;
	height: 36px;
	border-radius: 99px;
	flex-shrink: 0;
	object-fit: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	overflow: hidden;
}

/* Body */
.mvdd-note-body { min-width: 0; }
.mvdd-note-title {
	font-size: 13.5px;
	line-height: 1.35;
	text-wrap: pretty;
	font-weight: 500;
	color: var(--ddv-text-2);
}
.mvdd-note.is-unread .mvdd-note-title {
	font-weight: 600;
	color: var(--ddv-text-1);
}
.mvdd-note-title strong { font-weight: 600; color: var(--ddv-text-1); }
.mvdd-note-time {
	margin-top: 5px;
	font-size: 11px;
	color: var(--ddv-text-3);
	font-family: var(--ddv-font-mono);
	letter-spacing: 0.02em;
}

/* Trailing unread dot (or empty spacer) */
.mvdd-note-trail { width: 8px; flex-shrink: 0; }
.mvdd-note.is-unread .mvdd-note-trail {
	height: 8px;
	border-radius: 99px;
	background: var(--ddv-accent);
	margin-top: 6px;
}

/* Inline links inside an alert message (profile / group / verse) pick up the
   accent so they read as links in the new palette. */
.mvdd-note-title a {
	color: var(--ddv-accent);
	font-weight: 600;
	text-decoration: none;
}
.mvdd-note-title a:hover { text-decoration: underline; }

/* Inline action on an alert row (Accept / Join / Start / Practice). Lives in
   the trailing column instead of the unread dot. */
.mvdd-note-act {
	align-self: center;
	flex-shrink: 0;
	padding: 6px 12px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: var(--ddv-accent);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: filter 0.12s, background 0.12s, border-color 0.12s;
}
.mvdd-note-act:hover { filter: brightness(1.06); }
[data-theme='dark'] .mvdd-note-act, .theme-dark .mvdd-note-act { color: #0B1426; }
.mvdd-note-act-secondary {
	background: var(--ddv-surface);
	color: var(--ddv-text-2);
	border-color: var(--ddv-border-strong);
}
.mvdd-note-act-secondary:hover { background: var(--ddv-surface-2); filter: none; }
[data-theme='dark'] .mvdd-note-act-secondary, .theme-dark .mvdd-note-act-secondary { color: var(--ddv-text-2); }

/* "View More" ghost row (in-place pagination), sits above the footer. */
.mvdd-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 11px 18px;
	border: 0;
	border-top: 1px solid var(--ddv-border);
	background: transparent;
	color: var(--ddv-text-3);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}
.mvdd-more:hover { background: var(--ddv-surface-2); color: var(--ddv-accent); }
.mvdd-more svg { width: 14px; height: 14px; }

/* Empty state */
.mvdd-empty {
	padding: 26px 18px;
	text-align: center;
	font-size: 13.5px;
	color: var(--ddv-text-3);
}

/* Footer + pill CTA */
.mvdd-foot {
	padding: 12px;
	border-top: 1px solid var(--ddv-border);
}
.mvdd-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 11px 16px;
	border-radius: 999px;
	background: var(--ddv-accent);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.12s, filter 0.12s;
}
.mvdd-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.mvdd-cta svg { width: 14px; height: 14px; }
[data-theme='dark'] .mvdd-cta, .theme-dark .mvdd-cta { color: #0B1426; }

/* ====================================================================
   ACCOUNT / PROFILE
   ==================================================================== */
.mvdd-acct { border-radius: 18px; overflow: hidden; }

.mvdd-prof {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 18px 18px 16px;
	background: var(--ddv-surface-2);
	border-bottom: 1px solid var(--ddv-border);
}
.mvdd-prof::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ddv-accent), transparent);
	opacity: 0.55;
}
.mvdd-prof-av {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 99px;
	flex-shrink: 0;
	object-fit: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	overflow: hidden;
}
/* Avatar overlay: the real photo sits on top of an always-present fallback
   (initial or person glyph). If the photo 404s, its onerror removes it and the
   fallback underneath shows through — no broken-image warning, no leaking text. */
.mvdd-av-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}
.mvdd-av-ico { width: 56%; height: 56%; color: #fff; opacity: 0.95; }
.mvdd-av-ini { line-height: 1; }
.mvdd-prof-info { min-width: 0; }
.mvdd-prof-name {
	font-family: var(--ddv-font-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--ddv-text-1);
	letter-spacing: -0.01em;
	line-height: 1.15;
	white-space: nowrap;
	text-decoration: none;
}
.mvdd-prof-name:hover { text-decoration: none; }
.mvdd-prof-incomplete {
	font-size: 14px;
	font-weight: 600;
	color: var(--ddv-accent);
	text-decoration: none;
}
.mvdd-prof-church {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--ddv-text-2);
}
.mvdd-prof-church svg { width: 13px; height: 13px; color: var(--ddv-accent); flex-shrink: 0; }
.mvdd-prof-loc {
	margin-top: 2px;
	font-size: 11.5px;
	color: var(--ddv-text-3);
	font-family: var(--ddv-font-mono);
	letter-spacing: 0.02em;
}

/* Family switcher */
.mvdd-fam-wrap { padding: 14px 8px 8px; }
.mvdd-fam-eyebrow { padding: 0 8px 8px; }
.mvdd-fam {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 12px;
	text-decoration: none;
	background: transparent;
	cursor: pointer;
	transition: background 0.12s;
	border: 0;
	width: 100%;
	text-align: left;
	font-family: inherit;
}
.mvdd-fam:hover { background: var(--ddv-surface-2); }
.mvdd-fam.is-active { background: var(--ddv-accent-soft); }
.mvdd-fam-av {
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 99px;
	flex-shrink: 0;
	object-fit: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 600;
	font-size: 12px;
	overflow: hidden;
}
.mvdd-fam-body { flex: 1; min-width: 0; }
.mvdd-fam-name { font-size: 14px; font-weight: 600; color: var(--ddv-text-1); line-height: 1.2; }
.mvdd-fam-role { font-size: 11px; color: var(--ddv-text-3); margin-top: 1px; }
.mvdd-fam-online {
	width: 9px;
	height: 9px;
	border-radius: 99px;
	flex-shrink: 0;
	background: var(--ddv-success);
	box-shadow: 0 0 0 3px var(--ddv-success-soft);
}
.mvdd-add-circ {
	width: 34px;
	height: 34px;
	border-radius: 99px;
	flex-shrink: 0;
	border: 1.5px dashed var(--ddv-border-strong);
	color: var(--ddv-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mvdd-add-circ svg { width: 16px; height: 16px; }
.mvdd-add-label { font-size: 13.5px; font-weight: 600; color: var(--ddv-accent); }

/* Footer actions */
.mvdd-footactions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 14px;
	border-top: 1px solid var(--ddv-border);
}
.mvdd-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.mvdd-btn svg { width: 15px; height: 15px; }
.mvdd-btn-secondary {
	background: var(--ddv-surface-2);
	border: 1px solid var(--ddv-border);
	color: var(--ddv-text-2);
}
.mvdd-btn-secondary:hover { border-color: var(--ddv-border-strong); color: var(--ddv-text-1); }
.mvdd-btn-ghost {
	background: transparent;
	border: 1px solid transparent;
	color: var(--ddv-danger);
}
.mvdd-btn-ghost:hover { background: var(--ddv-danger-soft); border-color: var(--ddv-danger); }

/* ====================================================================
   Keyboard focus — a visible accent ring on every interactive element
   (rings/buttons/links). Uses :focus-visible so it only shows for keyboard.
   ==================================================================== */
.mvdd-note:focus-visible,
.mvdd-markread:focus-visible,
.mvdd-more:focus-visible,
.mvdd-note-act:focus-visible,
.mvdd-cta:focus-visible,
.mvdd-fam:focus-visible,
.mvdd-btn:focus-visible {
	outline: 2px solid var(--ddv-accent);
	outline-offset: 2px;
}

/* ====================================================================
   Active trigger ring — bell / avatar get an accent halo while open.
   Toggled by JS (.mvdd-trigger-open). Uses !important to beat the base
   trigger rules in top_row_redesign.css.
   ==================================================================== */
.top-row-redesign .js-notification-bell-trigger.mvdd-trigger-open,
.top-row-redesign .js-user-menu-trigger.mvdd-trigger-open {
	border-color: var(--ddv-accent) !important;
	box-shadow: 0 0 0 4px var(--ddv-accent-soft) !important;
}
.top-row-redesign .js-user-menu-trigger.mvdd-trigger-open {
	border-radius: 50%;
}

/* ====================================================================
   Real phones / tablets — flush full-width sheet (matches the markup's
   pp-/tlp- fixed overrides). Square top, no side borders, taller scroll.
   ==================================================================== */
@media only screen and (max-device-width: 1180px) {
	.js-site-top-bar .mvdd-pop,
	.js-site-top-bar .mvdd-pop-notif,
	.js-site-top-bar .mvdd-pop-acct {
		width: 100%;
		border-radius: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		margin-top: 0;
	}
	.mvdd-caret { display: none; }
	.mvdd-scroll, .mvdd-clip, .mvdd-acct { border-radius: 0; }
	.mvdd-scroll { max-height: calc(100vh - 72px); }
}