.m3-radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;                                  /* §10.3 — gap: 4px */
    width: 100%;
}

.m3-radio-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 24px;                        /* §10.3 — padding: 12px 24px */
    background-color: var(--md-surface-low);
    border: none;
    border-radius: var(--radius-full);         /* §10.3 — radius-full */
    cursor: pointer;
    transition: background-color var(--md-motion-duration-short) var(--md-motion-easing-standard);
    user-select: none;
}

.m3-radio-item:hover { background-color: var(--md-surface-high); }

.m3-radio-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.m3-radio-item:has(input:checked) { background-color: var(--md-primary-container); }

.m3-radio-indicator {
    position: relative;
    width: 20px;                               /* §10.3 — 20px */
    height: 20px;
    background-color: var(--md-surface-high);
    border: none;
    border-radius: var(--radius-full);
    margin-right: 14px;                        /* §10.3 — margin-right: 14px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--md-motion-duration-short) var(--md-motion-easing-standard);
}

.m3-radio-item:has(input:checked) .m3-radio-indicator { background-color: var(--md-primary); }

.m3-radio-indicator::after {
    content: '';
    position: absolute;
    width: 10px;                               /* §10.3 — 10px */
    height: 10px;
    border-radius: var(--radius-full);
    background-color: var(--md-on-primary);
    transform: scale(0);
    transition: transform var(--md-motion-duration-short) var(--md-motion-easing-emphasized);
}

.m3-radio-item input:checked + .m3-radio-indicator::after { transform: scale(1); }

.m3-radio-label {
    font-size: var(--md-type-body-large-size);  /* §9.3 — Body Large */
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: var(--md-type-body-large-lh);
    color: var(--md-text);
}

.m3-radio-item:has(input:checked) .m3-radio-label {
    font-weight: 600;                          /* §9.3 — weight 600 on checked */
    color: var(--md-primary);
}

.m3-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.m3-filter-chip { position: relative; cursor: pointer; }

.m3-filter-chip input[type="checkbox"],
.m3-filter-chip input[type="radio"] {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.chip-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;                         /* §10.3 */
    border-radius: var(--radius-full);
    border: none;
    background-color: var(--md-surface-low);
    color: var(--md-text-sub);
    font-size: var(--md-type-label-large-size); /* §9.3 — Label Large: 14px */
    font-weight: 500;
    letter-spacing: 0.1px;
    line-height: var(--md-type-label-large-lh);
    transition: background-color var(--md-motion-duration-short) var(--md-motion-easing-standard),
                color var(--md-motion-duration-short) var(--md-motion-easing-standard);
    user-select: none;
}

.m3-filter-chip:hover .chip-label { background-color: var(--md-surface-high); color: var(--md-text); }

.m3-filter-chip:has(input:checked) .chip-label {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    font-weight: 600;
}

.chip-label::before {
    content: 'check';
    font-family: 'Material Symbols Rounded', sans-serif;
    font-size: 15px;
    width: 0;
    overflow: hidden;
    margin-right: 0;
    opacity: 0;
    transition: width var(--md-motion-duration-short) var(--md-motion-easing-standard),
                margin var(--md-motion-duration-short) var(--md-motion-easing-standard),
                opacity var(--md-motion-duration-short) var(--md-motion-easing-standard);
}

.m3-filter-chip:has(input:checked) .chip-label::before { width: 15px; margin-right: 5px; opacity: 1; }

.m3-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--md-motion-duration-short) var(--md-motion-easing-standard);
}

.m3-checkbox-row:hover { background-color: var(--md-surface-low); }

.m3-checkbox-row input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }

.checkbox-box {
    position: relative;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background-color: var(--md-surface-low);
    border: none;
    border-radius: var(--md-shape-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--md-motion-duration-short) var(--md-motion-easing-standard);
    margin-top: 1px;
}

.m3-checkbox-row:has(input:checked) .checkbox-box { background-color: var(--md-primary); }

.checkbox-box::after {
    content: 'check';
    font-family: 'Material Symbols Rounded', sans-serif;
    font-size: 15px;
    color: var(--md-on-primary);
    transform: scale(0);
    transition: transform var(--md-motion-duration-short) var(--md-motion-easing-emphasized);
}

.m3-checkbox-row input:checked + .checkbox-box::after { transform: scale(1); }

.checkbox-text {
    font-size: var(--md-type-body-medium-size); /* §9.3 — Body Medium */
    letter-spacing: 0.25px;
    line-height: var(--md-type-body-medium-lh);
    color: var(--md-text);
}

.m3-text-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.m3-text-label {
    font-size: var(--md-type-label-large-size); /* 14px — Label Large */
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: var(--md-type-label-large-lh);
    color: var(--md-text);
}

.m3-text-input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;                           /* precise vertical centering via min-height */
    background-color: var(--md-surface-low);
    border: none;
    border-radius: var(--radius-sm);           /* §10.1 — radius-sm: 8px */
    color: var(--md-text);
    font-family: var(--font-family);
    font-size: var(--md-type-body-medium-size); /* 14px — Body Medium */
    letter-spacing: 0.25px;
    line-height: var(--md-type-body-medium-lh);
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--md-motion-duration-short) var(--md-motion-easing-standard),
                box-shadow var(--md-motion-duration-short) var(--md-motion-easing-standard);
}

.m3-text-input:hover {
    background-color: var(--md-surface-high);
}

.m3-text-input:focus {
    background-color: var(--md-surface-high);
    box-shadow: var(--focus-glow);
}