/* By-Homefeed polls — matches the feed design system (uses --feed-* tokens
   defined by the theme, with safe fallbacks). Logical properties keep the
   layout correct in both RTL and LTR. */

/* hidden must always win over any display rule below. */
.byhf-poll [hidden],
.byhf-poll[hidden],
.byhf-composer [hidden] { display: none !important; }

.byhf-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Poll card ---------- */

.byhf-poll {
	margin-block-start: 16px;
	padding: 14px;
	border: 1px solid var(--feed-line, #e3e2dc);
	border-radius: 14px;
	background: var(--feed-surface, #fff);
}
.byhf-poll.is-busy { opacity: .65; pointer-events: none; }

.byhf-poll__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 10px; }
.byhf-poll__badge {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--feed-tint, #f4f3ee);
	color: var(--feed-muted, #5f5e58);
	font-size: 12px;
}

.byhf-poll__fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.byhf-poll__question {
	padding: 0;
	margin-block-end: 12px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--feed-text, #0e0e10);
}

.byhf-poll__form,
.byhf-poll__results,
.byhf-poll__static { display: grid; gap: 8px; }
.byhf-poll__form[hidden],
.byhf-poll__results[hidden] { display: none; }

.byhf-poll__option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 46px;
	padding-inline: 14px;
	border: 1px solid var(--feed-line, #e3e2dc);
	border-radius: 11px;
	background: var(--feed-surface, #fff);
	cursor: pointer;
	font-size: 14.5px;
	overflow-wrap: anywhere;
}
.byhf-poll__option:hover { border-color: #7e9c91; background: #f5f8f3; }
.byhf-poll__option:focus-within { outline: 2px solid #1f6b4f; outline-offset: 2px; }
.byhf-poll__option input { accent-color: #0b3b2e; inline-size: 18px; block-size: 18px; flex: 0 0 auto; }
.byhf-poll__option--static { cursor: default; color: var(--feed-muted, #5f5e58); }
.byhf-poll__option-img {
	flex: 0 0 auto;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 8px;
	object-fit: cover;
	border: 1px solid var(--feed-line, #e3e2dc);
}
.byhf-poll__option--static:hover { border-color: var(--feed-line, #e3e2dc); background: var(--feed-surface, #fff); }

.byhf-poll__vote-btn {
	justify-self: start;
	min-block-size: 44px;
	padding-inline: 22px;
	border: 0;
	border-radius: 999px;
	background: #0b3b2e;
	color: #fafbf7;
	font-weight: 600;
	cursor: pointer;
}
.byhf-poll__vote-btn:hover { background: #14513f; }

/* Results */
.byhf-poll__result {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-block-size: 46px;
	padding-inline: 14px;
	border: 1px solid var(--feed-line, #e3e2dc);
	border-radius: 11px;
	overflow: hidden;
	font-size: 14.5px;
}
.byhf-poll__result.is-selected { border-color: #1f6b4f; }
.byhf-poll__result-bar {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	background: var(--feed-tint, #eef2ec);
	border-start-start-radius: 10px;
	border-end-start-radius: 10px;
	animation: byhf-bar-grow .5s cubic-bezier(.2, .7, .2, 1);
	transform-origin: var(--byhf-origin, right);
}
.byhf-poll__result.is-selected .byhf-poll__result-bar { background: #dcecdf; }
@keyframes byhf-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
	.byhf-poll__result-bar { animation: none; }
}
[dir="ltr"] .byhf-poll__result-bar { --byhf-origin: left; }

.byhf-poll__result-text {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-wrap: anywhere;
	min-inline-size: 0;
}
.byhf-poll__check { color: #1f6b4f; font-weight: 700; }
.byhf-poll__result-value {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	justify-items: end;
	font-size: 13.5px;
	color: var(--feed-text, #0e0e10);
}
.byhf-poll__result-value small { font-size: 11px; font-weight: 400; color: var(--feed-muted, #5f5e58); }

.byhf-poll__note { margin: 4px 0 0; color: var(--feed-muted, #5f5e58); font-size: 13px; }

/* Add-option row */
.byhf-poll__add { display: flex; gap: 8px; margin-block-start: 10px; }
.byhf-poll__add input {
	flex: 1;
	min-inline-size: 0;
	min-block-size: 42px;
	padding-inline: 12px;
	border: 1px solid var(--feed-line, #e3e2dc);
	border-radius: 10px;
	font-size: 14px;
}
.byhf-poll__add button {
	min-block-size: 42px;
	padding-inline: 16px;
	border: 0;
	border-radius: 10px;
	background: #0b3b2e;
	color: #fafbf7;
	cursor: pointer;
}

/* Footer */
.byhf-poll__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-block-start: 12px;
	color: var(--feed-muted, #5f5e58);
	font-size: 13px;
}
.byhf-poll__time.is-ending { color: #a4652b; font-weight: 600; }
.byhf-poll.is-closed .byhf-poll__time { font-weight: 600; }
.byhf-poll__link-btn {
	min-block-size: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #1f6b4f;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.byhf-poll__link-btn--danger { color: #a42b3f; }
.byhf-poll__link-btn:focus-visible,
.byhf-poll__vote-btn:focus-visible,
.byhf-poll__add button:focus-visible { outline: 2px solid #1f6b4f; outline-offset: 2px; }

.byhf-poll__error { margin: 10px 0 0; color: #a42b3f; font-size: 13px; }

/* ---------- Composer editor ---------- */

.byhf-composer { display: grid; gap: 12px; inline-size: 100%; }

.byhf-composer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.byhf-composer__head strong { font-size: 14.5px; color: var(--feed-text, #0e0e10); }
.byhf-composer__head [data-byhf-close-editor] {
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	border: 1px solid var(--feed-line, #e3e2dc);
	border-radius: 50%;
	background: var(--feed-surface, #fff);
	color: var(--feed-muted, #5f5e58);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.byhf-composer__head [data-byhf-close-editor]:hover { color: #a42b3f; border-color: #a42b3f; }

.byhf-composer__img-wrap { position: relative; flex: 0 0 auto; display: inline-flex; }
.byhf-composer__img-btn {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px dashed #aaa9a3;
	border-radius: 10px;
	background: var(--feed-surface, #fff);
	color: var(--feed-muted, #5f5e58);
	cursor: pointer;
	overflow: hidden;
}
.byhf-composer__img-btn:hover { border-color: #1f6b4f; color: #1f6b4f; }
.byhf-composer__img-btn img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: 9px;
}
.byhf-composer__img-remove {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -6px;
	display: grid;
	place-items: center;
	inline-size: 20px;
	block-size: 20px;
	padding: 0;
	border: 1px solid var(--feed-line, #e3e2dc);
	border-radius: 50%;
	background: var(--feed-surface, #fff);
	color: #a42b3f;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.byhf-composer__field { display: grid; gap: 5px; position: relative; }
.byhf-composer__field label,
.byhf-composer__row label { color: var(--feed-muted, #5f5e58); font-size: 12px; }
.byhf-composer .byhf-composer__field textarea,
.feed-composer .byhf-composer__field textarea {
	min-block-size: 56px;
	padding: 10px 12px;
	border: 1px solid var(--feed-line, #e3e2dc);
	border-radius: 10px;
	background: var(--feed-surface, #fff);
	font: inherit;
	font-size: 15px;
	line-height: 1.6;
	resize: vertical;
}

.byhf-composer__options { display: grid; gap: 8px; }
.byhf-composer__option { display: flex; align-items: center; gap: 8px; position: relative; }
.byhf-composer__option input[type="text"] {
	flex: 1;
	min-inline-size: 0;
	min-block-size: 44px;
	padding-inline: 12px;
	border: 1px solid var(--feed-line, #e3e2dc);
	border-radius: 10px;
	background: var(--feed-surface, #fff);
	font-size: 15px;
}
.byhf-composer__option [data-byhf-remove-option] {
	flex: 0 0 auto;
	inline-size: 34px;
	block-size: 34px;
	border: 1px solid var(--feed-line, #e3e2dc);
	border-radius: 50%;
	background: var(--feed-surface, #fff);
	color: #a42b3f;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.byhf-composer__counter { color: var(--feed-muted, #8b8a84); font-size: 11px; justify-self: end; }
.byhf-composer__option .byhf-composer__counter { flex: 0 0 auto; }

.byhf-composer__add {
	justify-self: start;
	min-block-size: 42px;
	padding-inline: 14px;
	border: 1px dashed #aaa9a3;
	border-radius: 10px;
	background: transparent;
	color: #0b3b2e;
	cursor: pointer;
}

.byhf-composer__row { display: grid; gap: 5px; }
.byhf-composer__row select,
.byhf-composer__row input[type="datetime-local"] {
	min-block-size: 44px;
	padding-inline: 10px;
	border: 1px solid var(--feed-line, #e3e2dc);
	border-radius: 10px;
	background: var(--feed-surface, #fff);
	font: inherit;
	font-size: 14px;
}

.byhf-composer__settings-toggle {
	justify-self: start;
	min-block-size: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #1f6b4f;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}
.byhf-composer__settings { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--feed-line, #e3e2dc); border-radius: 10px; background: var(--feed-surface, #fff); }
.byhf-composer__settings label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.byhf-composer__settings input { accent-color: #0b3b2e; inline-size: 17px; block-size: 17px; }

.byhf-composer__error { margin: 0; color: #a42b3f; font-size: 13px; }

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
	.byhf-poll { padding: 12px; }
	.byhf-poll__footer { gap: 6px 10px; }
	.byhf-poll__option,
	.byhf-poll__result { min-block-size: 48px; }
}