:root {
    --form-element-height-sm: clamp(2rem, 1.8rem + 0.6vw, 2.25rem);
    --form-element-height-md: clamp(2.5rem, 2.1rem + 0.8vw, 3rem);
    --form-element-height-lg: clamp(3rem, 2.5rem + 1vw, 3.5rem);

    /* Default size context (lg) — lets tt-input-group work outside .tt-form */
    --form-input-height: var(--form-element-height-lg);
    --form-input-font-size: var(--step--1);
    --form-input-padding: var(--space-3xs);
    --form-button-padding: var(--button-padding-lg);
    --form-button-radius: var(--button-radius-lg);
}

.tt-form {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: var(--paragraph-color);

    /* label */
    --form-label-font-size: var(--step-0);
    --form-label-color: var(--paragraph-color);

    /* input */
    --form-input-font-size: var(--step-0);
    --form-input-height: var(--form-element-height-lg);
    --form-input-padding: var(--space-3xs);

    /* row */
    --form-row-margin-bottom: var(--space-2xs);

    /* buttons */
    --form-button-padding: var(--button-padding-lg);
    --form-button-radius: var(--button-radius-lg);
}

/* SIZES */
.tt-form--medium {
    --form-label-font-size: var(--step--1);
    --form-input-font-size: var(--step--1);
    --form-input-height: var(--form-element-height-md);
    --form-row-margin-bottom: var(--space-2xs);

    /* buttons */
    --form-button-padding: var(--button-padding-md);
    --form-button-radius: var(--button-radius-md);
}
.tt-form--small {
    --form-label-font-size: var(--step--1);
    --form-input-font-size: var(--step--2);
    --form-input-height: var(--form-element-height-sm);
    --form-row-margin-bottom: var(--space-2xs);

    /* buttons */
    --form-button-padding: var(--button-padding-sm);
    --form-button-radius: var(--button-radius-sm);
}

/* INPUT GROUP SIZE MODIFIERS — mirrors form size contexts for standalone groups */
.tt-input-group--md {
    --form-input-height: var(--form-element-height-md);
    --form-input-font-size: var(--step--1);
    --form-button-padding: var(--button-padding-md);
    --form-button-radius: var(--button-radius-md);
}
.tt-input-group--sm {
    --form-input-height: var(--form-element-height-sm);
    --form-input-font-size: var(--step--2);
    --form-button-padding: var(--button-padding-sm);
    --form-button-radius: var(--button-radius-sm);
}

/* BUTTON SIZES */
.tt-form .tt-btn {
    height: var(--form-input-height);
    font-size: var(--form-input-font-size);
    padding: var(--form-button-padding);
    border-radius: var(--form-button-radius);
}

/* SECTION TITLE — visual separator between groups of fields inside a form */
.tt-form-section-title {
    width: 100%;
    margin-top: var(--space-s);
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-2xs);
    border-bottom: var(--border-thin) solid var(--primary-color);
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--heading-color);
    letter-spacing: 0.01em;
}

/* No top margin when it's the very first child — already has card padding above it */
.tt-form-section-title:first-child {
    margin-top: 0;
}

/* LAYOUT */

.tt-form .tt-form-row {
    width: 100%;
    margin-bottom: var(--form-row-margin-bottom);
}

.tt-form .grid-base-md,
.tt-form .grid-base {
    width: 100%;
    row-gap: 0;
}

/* FORM GRID */
.tt-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--form-row-margin-bottom);
    margin-bottom: var(--form-row-margin-bottom);
    width: 100%;
    align-items: flex-start;
}
.tt-form-grid .tt-form-grid-item {
    display: flex; /* needed if items are input groups */
    flex: 0 0 auto;
}

.tt-form-grid .tt-form-grid-item--auto {
    flex: 1 1 0;   /* default: grow and shrink equally */
}

/* Grid items inside the form grid */
.tt-form-grid > .tt-form-row {
    flex: 1 1 auto;                 /* default: grow to fill space */
    min-width: 16rem;               /* don't shrink below this */
}

/* RESET BUTTON WIDTH AND MARGIN */
.tt-form .tt-btn,
.tt-form.tt-form--medium .tt-btn,
.tt-form.tt-form--small .tt-btn
{
    width: fit-content;
    margin: 0;
}

/* LABEL */
.tt-form label, .tt-form .tt-label {
    color: var(--form-label-color);
}

.tt-form label:not(.tt-checkbox-label, .tt-helper-label, .tt-radio-label),
.tt-form .tt-label {
    width: 100%;
    font-weight: normal;
    font-size: var(--form-label-font-size);
    line-height: 1.4;
    max-width: 60ch;
    margin-bottom: 0;
}

.tt-form .tt-checkbox-label,
.tt-form .tt-label .tt-checkbox-label {
    display: inline;
}

.tt-form label.tt-helper-label {
    display: block;
    font-weight: normal;
    font-size: var(--step--2);
    color: var(--form-label-color);
    margin: 0;
}
.tt-form label.tt-radio-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--form-label-font-size);
    padding: 0.15rem 0.4rem;
}
.tt-placeholder-label::before {
    content: "\00A0";
}
.tt-sr-only {
    position: absolute !important;   /* remove from flex layout */
    width: 1px !important;           /* minimal width for screen readers */
    height: 1px !important;          /* minimal height */
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none;            /* prevent accidental interaction */
}