/**
 * Radio Moody — Prayer Wall styles (v4.2, mockup design).
 *
 * Theme tokens: --rm-primary / --rm-secondary are injected from the plugin
 * color settings (wp_add_inline_style in class-shortcodes.php). The warm
 * neutrals below have local fallbacks and can be overridden by themes.
 */

.rm-pw {
	--pw-card:         #ffffff;
	--pw-ink:          #2e2a24;
	--pw-muted:        #8a8377;
	--pw-line:         #e8e2d4;
	--pw-line-soft:    #f0ebdf;
	--pw-primary:      var(--rm-primary, #a5772e);
	--pw-primary-dark: var(--rm-secondary, #8a6323);
	--pw-radius:       16px;
	--pw-serif:        Georgia, 'Times New Roman', serif;
	--pw-sans:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pw-mono:         ui-monospace, "SF Mono", Menlo, monospace;

	font-family: var(--pw-sans);
	color: var(--pw-ink);
}

/* ===== Signed-in toolbar (All/Mine tabs + account chip) ===== */
/* Both halves are session-gated: signed out, every child is display:none and
   the flex row collapses to zero height, so the layout matches a wall that
   never had it. */
.rm-pw-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* ===== Account chip ===== */
.rm-pw-account { position: relative; margin-left: auto; margin-bottom: 16px; z-index: 20; }
.rm-pw-account-chip {
	width: 38px; height: 38px; padding: 0;
	display: grid; place-items: center;
	background: #fff;
	border: 1px solid var(--pw-line);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.rm-pw-account-avatar {
	display: grid; place-items: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--pw-primary); color: #fff;
	font-size: 14px; font-weight: 700; line-height: 1;
}
.rm-pw-account-menu {
	position: absolute; top: 46px; right: 0;
	min-width: 160px; padding: 12px;
	background: #fff; border: 1px solid var(--pw-line);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
	text-align: center;
}
.rm-pw-account-name {
	margin-bottom: 10px;
	font-weight: 700; font-size: 14px; color: var(--pw-ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-pw-account-menu .rm-pw-account-signout { width: 100%; }

/* ===== Hero ===== */
/* The --pw-hero-* properties are set as an inline style by the template when
   a wall customizes its banner; the var() fallbacks below ARE the default
   look, so an untouched wall renders unchanged. */
.rm-pw-hero {
	border-radius: 24px;
	padding: 52px 28px 44px;
	margin-bottom: 26px;
	text-align: center;
	color: var(--pw-hero-ink, var(--pw-ink, #2e2a24));
	background: var(--pw-hero-bg,
		radial-gradient(ellipse 60% 90% at 25% 40%, rgba(255, 236, 200, 0.55), transparent),
		linear-gradient(115deg, #e9dac0, #d8cbc7 55%, #cfc4dd));
}
.rm-pw-hero-icon {
	width: 68px; height: 68px; margin: 0 auto 18px;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, 0.35);
	border: 1px solid rgba(120, 90, 40, 0.25);
	border-radius: 50%;
	font-size: 26px;
	overflow: hidden;
}
.rm-pw-hero-icon img {
	max-width: 64%;
	max-height: 64%;
	display: block;
}
.rm-pw-hero-title {
	margin: 0;
	font-family: var(--pw-serif);
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 700;
	line-height: 1.15;
}
.rm-pw-hero-tagline {
	max-width: 560px;
	margin: 12px auto 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--pw-hero-muted, #5d554a);
}
.rm-pw-hero-stats { display: flex; justify-content: center; gap: 48px; margin-top: 32px; flex-wrap: wrap; }
.rm-pw-hstat { text-align: center; }
.rm-pw-hstat b { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 800; }
.rm-pw-hstat > span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--pw-hero-muted, #6d6457); }

/* ===== Guidelines ===== */
.rm-pw-guidelines {
	background: var(--pw-card);
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-radius);
	padding: 16px 20px;
	margin-bottom: 20px;
}
.rm-pw-guidelines-header { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.rm-pw-guidelines p { margin: 0; font-size: 13.5px; color: #6d6457; line-height: 1.55; }
.rm-pw-guidelines-link {
	display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600;
	color: var(--pw-primary); text-decoration: none;
}
.rm-pw-guidelines-link:hover { text-decoration: underline; }
/* The embed render is a bare page with no theme stylesheet, so the "opens in
   a new tab" hint needs its own visually-hidden rule. */
.rm-pw .screen-reader-text, .rm-pw-wrap .screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}

/* ===== Composer ===== */
.rm-pw-composer {
	background: var(--pw-card);
	border: 1px solid var(--pw-line);
	border-radius: var(--pw-radius);
	margin-bottom: 20px;
	overflow: hidden;
}
.rm-pw-composer-bar {
	display: flex; align-items: center; gap: 14px;
	width: 100%; padding: 20px 22px;
	background: none; border: none; cursor: pointer; text-align: left;
	font-family: var(--pw-serif); font-style: italic; font-size: 17px; color: #7d7466;
}
.rm-pw-plus { color: var(--pw-primary); font-style: normal; font-size: 20px; font-weight: 700; }
.rm-pw-composer-body { padding: 0 22px 18px; }
.rm-pw-composer-body textarea {
	width: 100%; min-height: 92px; padding: 13px;
	border: 1px solid var(--pw-line); border-radius: 12px;
	font-family: var(--pw-serif); font-size: 16px; resize: vertical;
	background: #fdfcf8; color: var(--pw-ink); box-sizing: border-box;
}
.rm-pw-composer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 13px; }
.rm-pw-composer-foot select {
	padding: 9px 12px; border: 1px solid var(--pw-line); border-radius: 10px;
	background: #fff; font-size: 13.5px; color: var(--pw-ink); max-width: 100%;
}
.rm-pw-anon-label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #6d6457; }
.rm-pw-char-count { margin-left: auto; font-family: var(--pw-mono); font-size: 12.5px; color: var(--pw-muted); }
.rm-pw-form-actions { display: flex; gap: 8px; }

/* Terms */
.rm-pw-terms-row { margin-top: 10px; }
.rm-pw-terms-label { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.rm-pw-terms-label input { margin-top: 3px; }
.rm-pw-terms-text { margin: 6px 0 0 24px; font-size: 12.5px; color: #6d6457; }
.rm-pw-terms-link {
	display: inline-block; margin: 4px 0 0 24px; font-size: 12.5px; font-weight: 600;
	color: var(--pw-primary); text-decoration: none;
}
.rm-pw-terms-link:hover { text-decoration: underline; }
.rm-pw-terms-link-plain { margin-left: 0; }

/* ===== All / Mine ===== */
/* A segmented control rather than more chips: the category chips filter the
   list, this switches which list you are looking at, and making them look the
   same would invite the two to be read as one row of filters. */
.rm-pw-scope-tabs {
	display: inline-flex; gap: 4px; margin-bottom: 16px; padding: 4px;
	background: var(--pw-card); border: 1px solid var(--pw-line);
	border-radius: 14px; max-width: 100%;
}
.rm-pw-scope-tab {
	flex: 0 1 auto; min-width: 0;
	padding: 9px 20px; border: none; border-radius: 10px;
	background: none; color: var(--pw-ink);
	font-size: 14.5px; font-weight: 600; cursor: pointer;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-pw-scope-tab-active { background: var(--pw-primary); color: #fff; }

/* ===== Filters ===== */
.rm-pw-filters { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.rm-pw-search {
	flex: 1 1 280px; display: flex; align-items: center; gap: 10px;
	padding: 11px 15px; background: var(--pw-card);
	border: 1px solid var(--pw-line); border-radius: 12px;
}
.rm-pw-search input {
	flex: 1; border: none; outline: none; font-size: 14.5px;
	background: none; color: var(--pw-ink); min-width: 60px;
}
.rm-pw-chip {
	padding: 11px 18px; background: var(--pw-card);
	border: 1px solid var(--pw-line); border-radius: 12px;
	font-size: 14px; font-weight: 600; cursor: pointer; color: var(--pw-ink);
}
.rm-pw-chip-active {
	background: var(--pw-primary);
	border-color: var(--pw-primary);
	color: #fff;
}

/* ===== Feed (masonry) ===== */
.rm-pw-feed { columns: 2 360px; column-gap: 18px; }
.rm-pw-card {
	break-inside: avoid;
	margin-bottom: 18px;
	background: var(--pw-card);
	border: 1px solid #eee8da;
	border-radius: var(--pw-radius);
	padding: 20px 20px 12px;
}
.rm-pw-card-answered { border-color: #bfe5c8; }

.rm-pw-card-head { display: flex; align-items: flex-start; gap: 12px; }
.rm-pw-avatar {
	flex: none; width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em;
}
.rm-pw-av-1 { background: #f6dede; color: #b45252; }
.rm-pw-av-2 { background: #dff0e9; color: #3f8b6b; }
.rm-pw-av-3 { background: #e6e2f4; color: #7a68b8; }
.rm-pw-av-4 { background: #fdeecd; color: #a8802b; }
.rm-pw-av-5 { background: #dcecf4; color: #4381a8; }

.rm-pw-who { flex: 1; min-width: 0; }
.rm-pw-who b { font-size: 16px; }
.rm-pw-when { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-family: var(--pw-mono); font-size: 11.5px; color: var(--pw-muted); }

.rm-pw-badge {
	flex: none; padding: 5px 12px; border-radius: 999px;
	font-family: var(--pw-mono); font-size: 12px;
	border: 1px solid transparent;
}
/* Moderation state on the author's own card. Deliberately unlike the category
   palettes — this is a state, not a topic, and reads as a warning. */
.rm-pw-status-badge {
	flex: none; padding: 5px 12px; border-radius: 999px;
	font-family: var(--pw-mono); font-size: 12px;
	border: 1px solid transparent;
}
.rm-pw-status-pending { background: #fff6e5; color: #9a6b12; border-color: #f2ddb2; }
.rm-pw-status-hidden  { background: #f0eeec; color: #6d6457; border-color: #ddd8d1; }

/* Category palettes — assigned by list position, cycling through six. */
.rm-pw-cat-0 { background: #fdeeee; color: #cf4d4d; border-color: #f5d2d2; }
.rm-pw-cat-1 { background: #faf3e0; color: #a8802b; border-color: #ecd9a8; }
.rm-pw-cat-2 { background: #f1ecfb; color: #7a5cc9; border-color: #ddd2f2; }
.rm-pw-cat-3 { background: #e9f6ec; color: #3f8b52; border-color: #cfe8d5; }
.rm-pw-cat-4 { background: #e5f5f4; color: #338c86; border-color: #c4e6e4; }
.rm-pw-cat-5 { background: #eeedf8; color: #7f7abc; border-color: #d9d7ee; }

.rm-pw-card-text {
	margin: 15px 2px 13px;
	font-family: var(--pw-serif);
	font-size: 16px; line-height: 1.6;
	overflow-wrap: break-word;
}
.rm-pw-answered-badge {
	display: inline-flex; align-items: center; gap: 7px;
	margin-top: 12px; padding: 5px 13px;
	background: #e9f6ec; border: 1px solid #bfe5c8; color: #1a7f37;
	border-radius: 999px; font-size: 12.5px; font-weight: 700;
}

/* Action row — labeled buttons (🙏 Praying / 💬 Comment) + flag. */
.rm-pw-card-foot {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 11px 2px 10px;
	border-top: 1px solid var(--pw-line-soft);
}
.rm-pw-actbtn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px;
	background: #fff; border: 1px solid var(--pw-line); border-radius: 10px;
	font-size: 13.5px; font-weight: 600; color: #6d6457; cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rm-pw-actbtn:hover { background: #f6f2e8; }
.rm-pw-act-count { font-family: var(--pw-mono); font-size: 12.5px; font-weight: 600; }
.rm-pw-praying,
.rm-pw-praying:hover {
	background: var(--pw-primary); border-color: var(--pw-primary); color: #fff;
}
.rm-pw-pending { opacity: 0.6; pointer-events: none; }
.rm-pw-flag-btn {
	margin-left: auto;
	background: none; border: none; cursor: pointer;
	padding: 4px 6px; font-size: 13px; color: #6d6457; opacity: 0.7;
}
.rm-pw-flag-btn:hover { opacity: 1; }

/* Inline comment box — always visible under the action row. */
.rm-pw-comment-box { position: relative; margin-top: 2px; }
.rm-pw-comment-form { display: flex; gap: 8px; margin: 0; }
.rm-pw-comment-input {
	flex: 1; width: 100%; min-width: 0; box-sizing: border-box;
	padding: 10px 15px;
	border: 1px solid var(--pw-line); border-radius: 999px;
	background: #fdfcf8; color: var(--pw-ink); font-size: 14px;
}
.rm-pw-comment-trigger { cursor: pointer; }
.rm-pw-comment-trigger:hover { background: #f6f2e8; }

/* Prewritten response popover (attached below the comment box). */
.rm-pw-response-pop {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
	background: #fff; border: 1px solid var(--pw-line); border-radius: 14px;
	padding: 12px 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}
.rm-pw-pop-title {
	margin: 0 0 8px; font-size: 12px; font-weight: 700;
	color: var(--pw-muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.rm-pw-respond-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-pw-rchip {
	padding: 8px 14px;
	background: #f7f0e2; border: 1px solid #e6d8ba; border-radius: 999px;
	font-size: 13px; cursor: pointer; color: #7a5a22;
	font-family: var(--pw-serif);
}
.rm-pw-rchip:hover { background: #efe3c9; }
.rm-pw-rchip:disabled { opacity: 0.5; cursor: wait; }

.rm-pw-comment-feedback { padding: 8px 0 0; font-size: 13px; color: #1a7f37; font-weight: 600; }
.rm-pw-comment-error { color: #c25353; font-size: 13.5px; }
.rm-pw-no-comments { padding: 8px 0 2px; font-size: 13.5px; color: var(--pw-muted); font-style: italic; }

/* Most-recent comment preview. */
.rm-pw-recent-comment {
	display: flex; align-items: flex-start; gap: 9px;
	margin-top: 12px; font-size: 13.5px;
}
.rm-pw-avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.rm-pw-recent-body { min-width: 0; line-height: 1.45; overflow-wrap: break-word; }
.rm-pw-recent-body b { font-size: 13px; }
.rm-pw-recent-text { color: #5d554a; font-family: var(--pw-serif); }
.rm-pw-recent-body time { margin-left: 4px; font-family: var(--pw-mono); font-size: 11px; color: var(--pw-muted); white-space: nowrap; }

/* "View all comments" text link. */
.rm-pw-view-all {
	display: inline-block; margin-top: 8px; padding: 0;
	background: none; border: none; cursor: pointer;
	font-size: 13px; font-weight: 600; color: var(--pw-primary);
}
.rm-pw-view-all:hover { text-decoration: underline; color: var(--pw-primary-dark); }

/* Avatar photos (cards, previews, modal rows). */
.rm-pw-av-photo { overflow: hidden; background: #efe9da; }
.rm-pw-avatar img {
	width: 100%; height: 100%; display: block;
	object-fit: cover; border-radius: 50%;
}

/* Comments modal (reuses .rm-pw-modal shell, JS-created on <body>). */
.rm-pw-comments-content h3 { margin: 0 0 14px; font-family: var(--pw-serif); font-size: 20px; }
.rm-pw-comments-modal-list { max-height: 60vh; overflow: auto; }
.rm-pw-modal-comment {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 10px 0; border-top: 1px solid var(--pw-line-soft);
}
.rm-pw-modal-comment:first-child { border-top: none; }
.rm-pw-modal-comment-body { flex: 1; min-width: 0; }
.rm-pw-modal-comment-meta { display: flex; align-items: baseline; gap: 8px; }
.rm-pw-modal-comment-meta b { font-size: 13.5px; }
.rm-pw-modal-comment-meta time { font-family: var(--pw-mono); font-size: 11px; color: var(--pw-muted); }
.rm-pw-modal-comment-body p {
	margin: 3px 0 0; font-size: 13.5px; line-height: 1.5;
	font-family: var(--pw-serif); color: #5d554a; overflow-wrap: break-word;
}

/* ===== Load more / new badge / banner ===== */
.rm-pw-load-more { display: block; margin: 16px auto 0; }
.rm-pw-new-badge {
	display: block; margin: 0 auto 16px; padding: 9px 18px;
	border: none; border-radius: 999px;
	background: var(--pw-primary); color: #fff;
	font-size: 14px; font-weight: 600; cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.rm-pw-new-badge:hover { background: var(--pw-primary-dark); }
.rm-pw-thank-you-banner {
	background: #e9f6ec; border: 1px solid #bfe5c8; color: #1a7f37;
	border-radius: 12px; padding: 13px 18px; margin-bottom: 16px;
	font-weight: 600; font-size: 14.5px;
}

/* ===== Skeletons ===== */
.rm-pw-skeleton { columns: 2 360px; column-gap: 18px; }
.rm-pw-skeleton-card {
	break-inside: avoid; margin-bottom: 18px;
	background: var(--pw-card); border: 1px solid #eee8da;
	border-radius: var(--pw-radius); padding: 18px;
	display: flex; flex-direction: column; gap: 10px;
}
.rm-pw-skel-row { display: flex; align-items: center; gap: 10px; }
.rm-pw-skel-avatar {
	width: 38px; height: 38px; border-radius: 50%;
	background: linear-gradient(90deg, #eee 25%, #f6f6f6 50%, #eee 75%);
	background-size: 200% 100%;
	animation: rm-pw-shimmer 1.4s infinite;
}
.rm-pw-skel-line {
	height: 12px; border-radius: 6px;
	background: linear-gradient(90deg, #eee 25%, #f6f6f6 50%, #eee 75%);
	background-size: 200% 100%;
	animation: rm-pw-shimmer 1.4s infinite;
}
.rm-pw-skel-w40 { width: 40%; }
.rm-pw-skel-w70 { width: 70%; }
.rm-pw-skel-w90 { width: 90%; }
@keyframes rm-pw-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.rm-pw-skel-avatar, .rm-pw-skel-line { animation: none; }
}

/* ===== Owner menu ===== */
.rm-pw-owner-menu { position: relative; flex: none; }
.rm-pw-owner-toggle {
	background: none; border: none; cursor: pointer;
	font-size: 18px; color: var(--pw-muted); padding: 2px 6px;
}
.rm-pw-owner-actions {
	position: absolute; right: 0; top: 26px; z-index: 30;
	background: #fff; border: 1px solid var(--pw-line);
	border-radius: 12px; padding: 6px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
	min-width: 180px;
}
.rm-pw-owner-actions button {
	display: block; width: 100%; text-align: left;
	background: none; border: none; cursor: pointer;
	padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: var(--pw-ink);
}
.rm-pw-owner-actions button:hover { background: #f6f2e8; }

.rm-pw-inline-edit-form textarea {
	width: 100%; padding: 12px;
	border: 1px solid var(--pw-line); border-radius: 10px;
	font-family: var(--pw-serif); font-size: 15px; box-sizing: border-box;
}
.rm-pw-inline-edit-form .rm-pw-form-actions { margin: 10px 0; justify-content: flex-end; }

/* ===== Auth modal ===== */
.rm-pw-modal { position: fixed; inset: 0; z-index: 99990; }
.rm-pw-modal-backdrop { position: absolute; inset: 0; background: rgba(30, 25, 15, 0.45); }
.rm-pw-modal-content {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: min(420px, calc(100vw - 32px));
	max-height: min(86vh, 700px); overflow: auto;
	background: #fff; border-radius: 18px; padding: 28px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
}
/* Embedded: the iframe is sized to the whole wall and never scrolls itself,
   so viewport-centering would drop the dialog at half the wall's total
   height — far from the click. JS anchors it to the interaction point via
   --rm-pw-anchor instead. vh-based sizes are useless here for the same
   reason (the "viewport" is thousands of pixels tall), hence the fixed cap. */
.rm-pw-modal-anchored .rm-pw-modal-content {
	top: var(--rm-pw-anchor, 120px);
	transform: translate(-50%, 0);
	max-height: 620px;
	/* No page-wide dimming to lean on in the embed — the card carries the
	   elevation itself. */
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--pw-line, #e8e2d4);
}

/* An embed's backdrop can only ever cover the iframe, not the host page
   around it, so the standard dark tint reads as a weird highlighted strip
   cut into someone else's page. Frost the wall instead: a light blur with a
   whisper of warm white softens the wall's own content behind the dialog
   with no color shift, which is what made the iframe boundary obvious.
   Browsers without backdrop-filter just get the faint tint — the card's
   shadow does the separating. */
.rm-pw-modal-anchored .rm-pw-modal-backdrop {
	background: rgba(253, 252, 248, 0.4);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.rm-pw-modal-close {
	position: absolute; right: 14px; top: 10px;
	background: none; border: none; cursor: pointer;
	font-size: 26px; line-height: 1; color: #999;
}
.rm-pw-prompt-content h3 { margin: 0 0 16px; font-family: var(--pw-serif); font-size: 20px; }
.rm-pw-prompt-actions { display: flex; flex-direction: column; gap: 10px; }

/* Loading bits */
.rm-pw-loading-sm { padding: 10px 0; }
.rm-spinner-sm {
	display: inline-block; width: 16px; height: 16px;
	border: 2px solid #e0d9c8; border-top-color: var(--pw-primary);
	border-radius: 50%; animation: rm-pw-spin 0.8s linear infinite;
}
@keyframes rm-pw-spin { to { transform: rotate(360deg); } }

/* ===== Responsive ===== */
@media (max-width: 640px) {
	.rm-pw-hero { padding: 36px 18px 32px; }
	.rm-pw-hero-stats { gap: 26px; }
	.rm-pw-feed, .rm-pw-skeleton { columns: 1; }
	.rm-pw-composer-foot select { flex: 1 1 100%; }
}

/* Honeypot field: off-screen rather than display:none, since some bots skip
   hidden inputs but fill anything that merely is not visible. */
.rm-pw-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }