.questionnaire {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--q-max-width);
    margin: 1.5rem auto;
    padding: var(--q-pad);
    background: var(--q-bg);
    color: var(--q-text);
    font-family: var(--q-font);
    font-size: var(--q-font-size);
    line-height: 1.5;
    border: var(--q-border-width) solid var(--q-border);
    border-radius: var(--q-radius);
    box-shadow: var(--q-shadow);
    color-scheme: light;
    -webkit-font-smoothing: antialiased;
}

.questionnaire *,
.questionnaire *::before,
.questionnaire *::after {
    box-sizing: border-box;
}

.questionnaire__form[hidden],
.questionnaire__success[hidden],
.questionnaire__error[hidden] {
    display: none !important;
}

.questionnaire__title,
.questionnaire__success-title {
    margin: 0 0 0.45em;
    color: var(--q-heading);
    font-family: var(--q-heading-font);
    font-size: var(--q-heading-size);
    font-weight: 700;
    line-height: 1.2;
}

.questionnaire__intro {
    margin: 0 0 1.25rem;
    color: var(--q-muted);
}

.questionnaire__success-message {
    margin: 0;
    color: var(--q-text);
    white-space: pre-wrap;
}

.questionnaire__form {
    display: flex;
    flex-direction: column;
    gap: var(--q-gap);
}

.questionnaire__question {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
    text-align: left;
}

.questionnaire__legend,
.questionnaire__label {
    display: block;
    width: 100%;
    margin: 0 0 0.45rem;
    padding: 0;
    color: var(--q-heading);
    font-family: var(--q-heading-font);
    font-size: var(--q-question-size);
    font-weight: var(--q-question-weight);
    line-height: 1.35;
    float: none;
    overflow-wrap: anywhere;
}

.questionnaire__number {
    margin-right: 0.35rem;
    color: var(--q-accent);
}

.questionnaire__required {
    margin-left: 0.2rem;
    color: var(--q-error);
}

.questionnaire__hint {
    display: inline-block;
    margin-left: 0.55rem;
    color: var(--q-accent);
    font-family: var(--q-font);
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 0.15em;
}

.questionnaire__help {
    margin: 0 0 0.75rem;
    color: var(--q-muted);
    font-size: 0.92em;
}

.questionnaire__choices {
    display: grid;
    gap: 0.55rem;
}

.questionnaire__choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.questionnaire__control {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    accent-color: transparent !important;
    color-scheme: light !important;
}

.questionnaire__mark {
    flex: none;
    display: grid !important;
    place-items: center;
    box-sizing: border-box;
    width: 1.15rem;
    height: 1.15rem;
    min-width: 1.15rem;
    margin-top: 0.18rem;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #9ca3af !important;
    border-radius: 0.22rem;
    box-shadow: none !important;
    color-scheme: light;
}

.questionnaire__choice:hover .questionnaire__mark {
    border-color: var(--q-accent);
}

.questionnaire__control[type="radio"] + .questionnaire__mark {
    border-radius: 50%;
}

.questionnaire__control:checked + .questionnaire__mark {
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: var(--q-accent, #111827) !important;
}

.questionnaire__control[type="checkbox"]:checked + .questionnaire__mark::after {
    content: "";
    width: 0.28rem;
    height: 0.52rem;
    margin-top: -0.12rem;
    border: solid var(--q-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.questionnaire__control[type="radio"]:checked + .questionnaire__mark::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    background: var(--q-accent);
    border-radius: 50%;
}

.questionnaire__control:focus-visible + .questionnaire__mark {
    outline: 2px solid var(--q-accent);
    outline-offset: 2px;
}

.questionnaire--cards .questionnaire__choice {
    padding: 0.8rem 0.95rem;
    background: var(--q-input-bg);
    color: var(--q-input-text);
    border: 1px solid var(--q-input-border);
    border-radius: calc(var(--q-radius) * 0.65);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.questionnaire--cards .questionnaire__choice:hover {
    border-color: var(--q-accent);
}

.questionnaire--cards .questionnaire__choice:has(input:checked) {
    border-color: var(--q-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-accent) 28%, transparent);
}

.questionnaire--cards .questionnaire__choice:has(input:focus-visible) {
    outline: 2px solid var(--q-accent);
    outline-offset: 2px;
}

.questionnaire__input,
.questionnaire__textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.72rem 0.85rem;
    color: var(--q-input-text);
    background: var(--q-input-bg);
    border: 1px solid var(--q-input-border);
    border-radius: calc(var(--q-radius) * 0.5);
    font-family: inherit;
    font-size: inherit;
    line-height: 1.45;
}

.questionnaire__textarea {
    resize: vertical;
    min-height: 6rem;
}

.questionnaire__input::placeholder,
.questionnaire__textarea::placeholder {
    color: var(--q-muted);
    opacity: 1;
}

.questionnaire__input:focus,
.questionnaire__textarea:focus {
    outline: 2px solid var(--q-accent);
    outline-offset: 1px;
    border-color: var(--q-accent);
}

.questionnaire__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.questionnaire__button {
    width: var(--q-btn-width);
    max-width: 100%;
    margin: 0;
    padding: 0.82rem 1.4rem;
    color: var(--q-btn-text);
    background: var(--q-btn-bg);
    border: 0;
    border-radius: var(--q-btn-radius);
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .questionnaire__button:hover {
        background: var(--q-btn-hover);
    }
}

.questionnaire__button:focus-visible {
    outline: 2px solid var(--q-accent);
    outline-offset: 2px;
}

.questionnaire__button:disabled {
    opacity: 0.65;
    cursor: progress;
}

.questionnaire--center .questionnaire__title,
.questionnaire--center .questionnaire__intro,
.questionnaire--center .questionnaire__success {
    text-align: center;
}

.questionnaire--center .questionnaire__actions {
    align-items: center;
}

.questionnaire__error,
.questionnaire__form-error,
.questionnaire__warning {
    margin: 0.35rem 0 0;
    color: var(--q-error);
    font-size: 0.875em;
}

.questionnaire__empty {
    margin: 0;
    padding: 0.9rem 1rem;
    color: var(--q-muted);
    border: 1px dashed var(--q-border);
    border-radius: calc(var(--q-radius) * 0.5);
}

.questionnaire__success {
    margin-top: 0.25rem;
}

.questionnaire__sr,
.questionnaire__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .questionnaire {
        padding: min(var(--q-pad), 20px);
        border-radius: min(var(--q-radius), 12px);
    }
}