.qr-type-picker { min-width: 0; padding: 0; margin: 0 0 20px; border: 0; } .qr-type-picker legend, .qr-step-heading { display: block; float: none; width: 100%; margin: 0 0 12px; padding: 0; font: 10px/1.6 var(--font-display); letter-spacing: 0; text-transform: none; } .qr-type-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .qr-type-buttons label { position: relative; min-width: 0; cursor: pointer; } .qr-type-buttons input { position: absolute; width: 1px; height: 1px; opacity: 0; } .qr-type-buttons span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 4px; border: 2px solid var(--cream); color: var(--navy); background: var(--white); font: 11px/1.4 var(--font-display); } .qr-type-buttons input:checked + span { border-color: var(--navy); color: var(--white); background: var(--navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .qr-type-buttons input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; } .qr-type-buttons label:hover span { border-color: var(--blue); } .qr-field { display: block; min-width: 0; margin: 0 0 12px; font: 10px/1.6 var(--font-display); } .qr-field :is(input, select, textarea) { display: block; width: 100%; min-width: 0; min-height: 48px; margin-top: 8px; padding: 8px 12px; border: 2px solid var(--cream); border-radius: 0; color: var(--navy); background: var(--white); font: 20px/1.4 var(--font-body); } .qr-field input:is([type="url"], [type="email"], [type="password"]), .qr-field select { font: 16px/1.5 var(--font-code); } .qr-field textarea { min-height: 100px; resize: vertical; } .qr-check { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 8px; font: 20px/1.3 var(--font-body); cursor: pointer; } .qr-check input { flex: none; width: 20px; height: 20px; accent-color: var(--navy); } .qr-note { font: 20px/1.3 var(--font-body); overflow-wrap: anywhere; } .qr-feedback { margin-block: 12px; padding: 12px; border-left: 4px solid var(--blue); background: var(--sand); font: 20px/1.3 var(--font-body); overflow-wrap: anywhere; } @media (max-width: 380px) { .qr-type-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .qr-type-buttons span { font-size: 10px; } }