/* Shared form widgets for the crypto experiment sites. Re-theme with variables; do not fork the markup.
   Set any of these on :root (or a wrapper): --rf-bg --rf-fg --rf-muted --rf-accent --rf-accent-fg --rf-border --rf-radius --rf-font */
:root { --rf-bg: transparent; --rf-fg: #111; --rf-muted: #666; --rf-accent: #111; --rf-accent-fg: #fff; --rf-border: #bbb; --rf-radius: 6px; --rf-font: inherit; }
.cp-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cp-invalid { outline: 2px solid #d33; outline-offset: 1px; }
.rf-form { display: grid; gap: 14px; max-width: 640px; font-family: var(--rf-font); color: var(--rf-fg); }
.rf-field { display: flex; flex-direction: column; gap: 4px; }
.rf-field label, .rf-set legend { font-size: 13px; font-weight: 600; color: var(--rf-muted); }
.rf-field input, .rf-field textarea, .rf-which { font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid var(--rf-border); border-radius: var(--rf-radius); background: var(--rf-bg); color: var(--rf-fg); }
.rf-set { border: 0; padding: 0; margin: 0; }
.rf-req { font-weight: 400; }
.rf-methods { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.rf-pill { position: relative; cursor: pointer; }
.rf-pill input { position: absolute; opacity: 0; }
.rf-pill span { display: inline-block; padding: 7px 14px; border: 1px solid var(--rf-border); border-radius: 999px; font-size: 14px; color: var(--rf-fg); }
.rf-pill input:checked + span { background: var(--rf-accent); color: var(--rf-accent-fg); border-color: var(--rf-accent); }
.rf-pill input:focus-visible + span { outline: 2px solid var(--rf-accent); outline-offset: 2px; }
.rf-other { display: inline-flex; gap: 8px; align-items: center; }
.rf-which { width: 130px; padding: 6px 10px; }
.rf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rf-span { grid-column: 1 / -1; }
.rf-status { min-height: 1.4em; font-size: 14px; color: var(--rf-fg); }
.rf-submit { font: inherit; font-weight: 700; padding: 12px 22px; border: 0; border-radius: var(--rf-radius); background: var(--rf-accent); color: var(--rf-accent-fg); cursor: pointer; justify-self: start; }
.rf-submit:disabled { opacity: .6; cursor: wait; }
@media (max-width: 560px) { .rf-row { grid-template-columns: 1fr; } }