/* Reader requests section — uses the GadjetGeek theme tokens, with fallbacks. */
.req {
	--r-surface: var(--surface, #fff);
	--r-surface-2: var(--surface-2, #EEF0F3);
	--r-ink: var(--ink, #101216);
	--r-ink-2: var(--ink-2, #454B57);
	--r-ink-3: var(--ink-3, #5F6674);
	--r-line: var(--line, #E3E6EB);
	--r-brand: var(--brand, #7C3AED);
	--r-on-brand: var(--on-brand, #FFFFFF);
	margin-top: 40px; background: var(--r-surface); border: 1px solid var(--r-line); border-radius: 20px; padding: 26px; scroll-margin-top: 24px;
}
.req__head { display: flex; align-items: flex-start; gap: 14px; }
.req__icon { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--grad, var(--r-brand)); color: var(--r-on-brand); display: grid; place-items: center; }
.req__icon svg { width: 26px; height: 26px; }
.req__title { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.6; }
.req__lead { margin: 4px 0 0; font-size: 15px; line-height: 1.95; color: var(--r-ink-2); }
.req__body { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.req__main { flex: 3 1 360px; min-width: 0; }
.req__form { display: flex; flex-direction: column; gap: 16px; }
.req__form[hidden], .req__done[hidden], .req__msg[hidden] { display: none; }
.req__field { display: flex; flex-direction: column; gap: 6px; }
.req__field > label, .req__fieldset legend { font-size: 14px; font-weight: 800; color: var(--r-ink); padding: 0; }
.req__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.req__fieldset legend { margin-bottom: 8px; }
.req__opt { font-weight: 500; color: var(--r-ink-3); }
.req__field input[type="text"], .req__field input[type="email"], .req__field textarea {
	min-height: 48px; border-radius: 12px; border: 1px solid var(--r-line); background: var(--r-surface-2);
	color: var(--r-ink); padding: 10px 14px; font: inherit; font-size: 15px; width: 100%; box-sizing: border-box;
}
.req__field textarea { line-height: 1.9; resize: vertical; }
.req__field input[type="email"] { text-align: left; }
.req__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.req__cat { display: inline-flex; cursor: pointer; }
.req__cat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.req__cat span {
	display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--r-line);
	background: var(--r-surface); color: var(--r-ink-2); font-size: 14px; font-weight: 700;
}
.req__cat:hover span { border-color: var(--r-ink-3); color: var(--r-ink); }
.req__cat input:checked + span { background: var(--r-ink); color: var(--r-surface); border-color: var(--r-ink); }
.req__cat input:focus-visible + span { outline: 2px solid var(--r-brand); outline-offset: 2px; }
.req__hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.req__submit { align-self: flex-start; min-height: 48px; padding: 0 26px; }
.req__msg { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--warn-t, #FFF6E6); border: 1px solid var(--warn-b, #F3D9A8); color: var(--r-ink); font-size: 14px; }
.req__done { padding: 22px; border-radius: 14px; background: var(--tip-t, #E8F6F3); border: 1px solid var(--tip-b, #BFE3DB); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.req__done strong { font-size: 17px; color: var(--r-ink); }
.req__done span { font-size: 15px; line-height: 1.95; color: var(--r-ink-2); }
.req__recent { flex: 2 1 240px; min-width: 0; }
.req__recent-title { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--r-ink-2); }
.req__recent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.req__recent li { padding: 12px 14px; border-radius: 14px; background: var(--r-surface-2); display: flex; flex-direction: column; gap: 8px; }
.req__topic { font-size: 14px; font-weight: 700; line-height: 1.8; }
.req__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.req__st { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; line-height: 1.7; }
.req__st--done { color: var(--tip, #0F766E); background: var(--tip-t, #E8F6F3); }
.req__st--wip { color: var(--warn, #9A5B07); background: var(--warn-t, #FFF6E6); }
.req__st--queued { color: var(--r-ink-3); background: var(--r-surface); }
.req__vote {
	min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--r-line); background: var(--r-surface);
	color: var(--r-ink); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.req__vote:hover { border-color: var(--r-ink-3); }
.req__vote[aria-pressed="true"] { background: var(--r-brand); border-color: var(--r-brand); color: var(--r-on-brand); }
.req__read { display: flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 800; color: var(--brand-ink, #6D28D9); }
@media (max-width: 640px) { .req { padding: 18px; } }