.lesson-status-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.25;
    padding: 0.3125rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.lesson-status-badge--scheduled {
    background-color: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.lesson-status-badge--completed {
    background-color: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.lesson-status-badge--cancelled {
    background-color: #fff1f2;
    color: #be123c;
    border-color: #fecdd3;
}

.lesson-status-badge--absent {
    background-color: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.lesson-assessment-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1.25;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.lesson-assessment-badge--light {
    width: 0.9rem;
    height: 0.9rem;
    padding: 0;
    border-width: 0;
}

.lesson-assessment-badge--green {
    background-color: #22c55e;
    color: #047857;
    border-color: #16a34a;
}

.lesson-assessment-badge--yellow {
    background-color: #eab308;
    color: #b45309;
    border-color: #ca8a04;
}

.lesson-assessment-badge--red {
    background-color: #ef4444;
    color: #b91c1c;
    border-color: #dc2626;
}

.lesson-assessment-badge--empty {
    background-color: #f4f4f5;
    color: #71717a;
    border-color: #e4e4e7;
}

.parent-lesson-card__assessments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 0.75rem;
}

.parent-lesson-card__assessment {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.parent-lesson-card__assessment-label {
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 500;
}

.fi-parent-portal .parent-lesson-card .lesson-assessment-badge {
    font-size: 0.8125rem;
    padding: 0.3125rem 0.625rem;
}

.assessment-panel {
    max-width: 22rem;
}

.assessment-panel .fi-section {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.assessment-panel .fi-section-header {
    display: none;
}

.assessment-panel .fi-section-content-ctn,
.assessment-panel .fi-section-content {
    padding: 1.5rem;
}

.assessment-panel .fi-sc-component + .fi-sc-component,
.assessment-panel .fi-fo-field-wrp + .fi-fo-field-wrp {
    margin-top: 1.25rem;
}

.assessment-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.assessment-panel__title {
    margin: 0;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.assessment-panel__hint {
    color: #94a3b8;
    font-size: 0.75rem;
}

.assessment-panel .fi-fo-field-wrp {
    gap: 0.5rem;
}

.assessment-panel .fi-fo-field-wrp-label {
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 500;
}

.assessment-segment {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

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

.assessment-segment__option {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.assessment-segment__light {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    opacity: 0.35;
    box-shadow: inset 0 -1px 3px rgb(0 0 0 / 0.18);
    transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.assessment-segment__option--green .assessment-segment__light {
    background: #22c55e;
}

.assessment-segment__option--yellow .assessment-segment__light {
    background: #eab308;
}

.assessment-segment__option--red .assessment-segment__light {
    background: #ef4444;
}

.assessment-segment__option:is(:hover, :focus-within):not(.is-selected):not(:has(.assessment-segment__input:checked)):not(:has(.assessment-segment__input:disabled)) .assessment-segment__light {
    opacity: 0.7;
    transform: scale(1.06);
}

.assessment-segment__option:focus-within .assessment-segment__light {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #94a3b8;
}

.assessment-segment__option.is-selected .assessment-segment__light,
.assessment-segment__option:has(.assessment-segment__input:checked) .assessment-segment__light {
    opacity: 1;
    transform: scale(1.08);
}

.assessment-segment__option--green.is-selected .assessment-segment__light,
.assessment-segment__option--green:has(.assessment-segment__input:checked) .assessment-segment__light {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #86efac, inset 0 -1px 3px rgb(0 0 0 / 0.18);
}

.assessment-segment__option--yellow.is-selected .assessment-segment__light,
.assessment-segment__option--yellow:has(.assessment-segment__input:checked) .assessment-segment__light {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #fde68a, inset 0 -1px 3px rgb(0 0 0 / 0.18);
}

.assessment-segment__option--red.is-selected .assessment-segment__light,
.assessment-segment__option--red:has(.assessment-segment__input:checked) .assessment-segment__light {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #fecaca, inset 0 -1px 3px rgb(0 0 0 / 0.18);
}

.assessment-segment__option:has(.assessment-segment__input:disabled) {
    cursor: not-allowed;
}

.assessment-segment__option:has(.assessment-segment__input:disabled) .assessment-segment__light {
    opacity: 0.2;
}

.lesson-assessment-context {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #27272a;
}

.lesson-assessment-context__sep {
    padding-inline: 0.375rem;
    color: #a1a1aa;
    font-weight: 400;
}

.lesson-assessment-context__when {
    color: #71717a;
}

.lesson-assessment-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.lesson-assessment-title__icon {
    color: #059669;
}

.lesson-assessment-form.fi-section {
    border-color: #e4e4e7;
}

.lesson-assessment-form > .fi-section-header {
    display: none;
}

.lesson-assessment-form .fi-section-content-ctn > .fi-section-content {
    padding-top: 0.75rem;
    gap: 0.75rem;
}

.lesson-assessment-form .fi-sc.fi-grid {
    gap: 0.75rem;
    align-items: center;
}

.lesson-assessment-form .fi-sc.fi-flex {
    gap: 0.75rem;
    align-items: center;
}

.assessment-compact {
    max-width: none;
}

.assessment-compact .fi-fo-field-wrp + .fi-fo-field-wrp {
    margin-top: 0.75rem;
}

.assessment-compact .fi-fo-field-wrp {
    gap: 0.375rem;
}

.assessment-compact .fi-fo-repeater > .fi-fo-repeater-items {
    gap: 0;
}

.assessment-compact .fi-fo-repeater-item {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.assessment-compact .fi-fo-repeater-item-header {
    display: none;
}

@media (min-width: 640px) {
    .lesson-assessment-form .fi-sc.fi-flex {
        flex-wrap: nowrap;
    }
}

@media (max-width: 767px) {
    .lesson-assessment-badge,
    .parent-lesson-card__assessment-label {
        font-size: 0.8125rem;
    }
}