/* Desktop preview: final hierarchy and desktop-only interaction refinements. */

/* Recommendation rationale is visually distinct and sits above the activity title. */
.desktop-preview-recommendations .desktop-preview-recommendation-reason {
    order: -1;
    margin: 0 0 3px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: var(--ui-brand-action-hover, #950c0f) !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.desktop-preview-recommendations [data-recommendation-card] h4 {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.desktop-preview-recommendations [data-recommendation-card] .p-home-card-meta {
    margin-top: 4px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
}

/* Lesson number is part of the metadata sentence, immediately after level. */
.desktop-preview-schedule .desktop-preview-lesson-number-inline {
    color: inherit;
    font: inherit;
    line-height: inherit;
    font-weight: inherit;
    white-space: nowrap;
}

/* One generic future-list control for every selected day. */
.desktop-preview-iteration-future-control {
    padding: 10px 16px 16px;
    text-align: center;
}

.desktop-preview-iteration-future-more {
    padding: 0 16px 16px;
}

.desktop-preview-iteration-future-more .desktop-preview-upcoming-group + .desktop-preview-upcoming-group {
    margin-top: 24px;
}

/* Only genuinely short desktop sheets are vertically centred. Long drawers keep
   the existing full-height right-side geometry. */
@media (min-width: 931px) {
    body:has(#desktop-preview-frame) #bottom_sheet_absence_makeup {
        background: var(--ui-positive-action, #258568) !important;
        overflow: hidden;
    }

    body:has(#desktop-preview-frame) #bottom_sheet_absence_makeup .bottom-sheet-content {
        background: var(--ui-surface, #ffffff);
    }

    body:has(#desktop-preview-frame) .bottom-sheet.desktop-preview-sheet-short {
        top: calc(50% + 38px) !important;
        bottom: auto !important;
        height: auto !important;
        max-height: calc(100vh - 100px) !important;
        transform: translate(100%, -50%) !important;
    }

    body:has(#desktop-preview-frame) .bottom-sheet.desktop-preview-sheet-short.active,
    body:has(#desktop-preview-frame) .bottom-sheet.desktop-preview-sheet-short.open {
        transform: translate(0, -50%) !important;
    }

    body:has(#desktop-preview-frame) .bottom-sheet.desktop-preview-sheet-short .bottom-sheet-content {
        gap: 16px !important;
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    body:has(#desktop-preview-frame) .bottom-sheet.desktop-preview-sheet-short .bottom-sheet-content > * + * {
        margin-top: 16px !important;
    }
}