/* Feature requests */

.sf-noscript { margin-top: 12px; color: var(--ink-2); font-size: 15px; }

.sf-feature-title { overflow-wrap: anywhere; }
.tag { max-width: 100%; overflow-wrap: anywhere; }

.sf-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.sf-empty p { color: var(--ink-2); }

.modal-head .icon.close { margin-right: -10px; }

.sf-field { display: flex; flex-direction: column; gap: 6px; }
.sf-field > span { color: var(--ink); font-size: 15px; font-weight: 700; }
.sf-form-note { color: var(--ink-2); font-size: 14px; }
.button:disabled { cursor: progress; opacity: .6; }
.button:disabled:hover { background: var(--ink); }

/* Narrow phones: the vote arrow and count sit in a row above the title, so the
   text gets the card's full width. The negative margins line the arrow glyph,
   centred in its 44px target, up with the card's text. */
@media (max-width: 400px) {
	.feature { flex-direction: column; gap: 2px; }
	.feature .vote { flex-direction: row; width: auto; gap: 2px; margin: -11px 0 0 -11px; }
	/* Fill only behind the glyph so a voted tile doesn't crowd the card's corner. */
	.feature .icon.arrow.voted { padding: 8px; background-clip: content-box; }
}