/*
 * <pcu-dsa-report-form> (protected/TS/src/ExtraComponents/Pcu/PcuDsaReportForm.ts) and the
 * page around it (meldung.php). In 00_public: the form is a public page for anonymous visitors.
 * UUI tokens only (--uui-*), no --rd-*. Figma `DSA Meldeseite` → Dev Assets (7014:375 ff.).
 *
 * Generated control rules carry several attribute selectors; where the form must beat them
 * (the 320px drawn width), !important is the documented exception (skill uui, using-components.md).
 */

pcu-dsa-report-form {
    display: block;
    inline-size: 100%;
}

.pcu-dsa-report-form {
    --uui-stack-gap: var(--uui-spacing-xl);
    text-align: start;
}

/* The checkbox is drawn at Figma's width; the label may use the whole column. */
.pcu-dsa-report-form .uui-checkbox__root,
.pcu-dsa-report-form .uui-checkbox__text-wrap {
    inline-size: 100% !important;
    max-inline-size: none !important;
}

/* Figma draws the controls 320px wide on two parts; the form owns the width. */
.pcu-dsa-report-form uui-textarea,
.pcu-dsa-report-form uui-input-field,
.pcu-dsa-report-form .uui-textarea__root,
.pcu-dsa-report-form .uui-textarea__input,
.pcu-dsa-report-form .uui-textarea__content,
.pcu-dsa-report-form .uui-textarea__value,
.pcu-dsa-report-form .uui-input-field__root,
.pcu-dsa-report-form .uui-input-field__input {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
}

/* Both textareas are the long-form answer; 5000 characters need room. */
.pcu-dsa-report-form .uui-textarea__value {
    min-block-size: 128px;
    resize: vertical;
}

/* Name and e-mail are optional: no asterisk (the label already says "(freiwillig)"). */
.pcu-dsa-report-form uui-input-field .uui-input-field__required {
    display: none;
}

/*
 * Library gap (2026-10-16, see PcuCmeSignupForm.css): the published input-field slice has no
 * hint rule for type=default with destructive=true, so the error text renders unstyled.
 */
.pcu-dsa-report-form uui-input-field[destructive="true"] .uui-input-field__hint,
.pcu-dsa-report-form uui-textarea[destructive="true"] .uui-textarea__hint {
    margin: 0;
    font-size: var(--uui-text-sm-font-size);
    line-height: var(--uui-text-sm-line-height);
    color: var(--uui-text-error-primary);
}

/* Checkbox error: Figma notes the checkbox has no error variant yet — text sm in text-error-primary under it. */
.pcu-dsa-report-form__confirm {
    display: grid;
    gap: var(--uui-spacing-sm);
}

.pcu-dsa-report-form__field-error {
    margin: 0;
    font-size: var(--uui-text-sm-font-size);
    line-height: var(--uui-text-sm-line-height);
    color: var(--uui-text-error-primary);
}

.pcu-dsa-report-form__privacy {
    margin: 0;
    color: var(--uui-text-tertiary);
}

.pcu-dsa-report-form__privacy a {
    color: var(--uui-text-brand-secondary);
    text-decoration: underline;
}

/* The alert's text column must be allowed to wrap (flex item default min-inline-size: auto). */
.pcu-dsa-report-form__alert .uui-alert__text-and-supporting-text,
.pcu-dsa-report-form__alert .uui-alert__content {
    min-inline-size: 0;
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.pcu-dsa-report-form__hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.pcu-dsa-report-form__submit {
    justify-self: start;
}

/* Sent states (7014:854, 7016:766): centred icon, heading, text, one button. */
.pcu-dsa-report-form__done {
    --uui-stack-gap: var(--uui-spacing-xl);
    justify-items: center;
    text-align: center;
    padding-block: var(--uui-spacing-3xl);
}

.pcu-dsa-report-form__done-title,
.pcu-dsa-report-form__done-text {
    margin: 0;
    max-inline-size: var(--uui-paragraph-max-width);
}

.pcu-dsa-report-form__done-text {
    color: var(--uui-text-tertiary);
}

.pcu-dsa-report-form__done-link {
    text-decoration: none;
}

/* ---------------------------------------------------------------- page (meldung.php) */

/*
 * The page uses the legal pages' skeleton (round-teaser band + `.center.set_left`), so the
 * typography around the form is the site's. Only the form region is UUI: it gets its own
 * vertical room and a width cap matching Figma's 720px text column.
 */
.rd-dsa-page__form {
    max-inline-size: var(--uui-paragraph-max-width);
    margin-block: var(--uui-spacing-4xl);
}

.rd-dsa-page__form uui-checkbox .uui-checkbox__label {
    color: inherit;
}