/* PSY compact header 2026-10-19.
   A presentation-only override. Leave the existing sidebar, profile <details>
   menu, course pages, video player and tariff rights untouched. */

/* Remove the visual full-width top strip and its redundant slogan. */
.main > .topbar {
    height: 50px;
    min-height: 50px;
    padding: 4px 38px 0;
    justify-content: flex-end;
    background: transparent;
    border-bottom: 0;
}
.main > .topbar > .topline { display: none; }

/* Existing profile summary and its dropdown remain in their normal DOM flow,
   preventing collisions with course navigation actions near page titles. */
.main > .topbar > .user-menu,
.main > .topbar > .user { margin-left: auto; }

/* The old topbar (69px) + top padding (34px) becomes 50px + 12px. */
.main > .content { padding-top: 12px; }

@media (max-width: 740px) {
    .main > .topbar {
        height: 48px;
        min-height: 48px;
        padding: 2px 15px 0;
    }
    .main > .content { padding-top: 12px; }
}

/* v2: The user correctly noticed that hiding the strip still reserved 50px.
   On spacious desktops the profile floats above the content without occupying
   a layout row. The real content starts at the top of .main. */
@media (min-width: 1051px) {
    .main { position: relative; }
    .main > .topbar {
        position: absolute;
        top: 7px;
        right: 38px;
        left: auto;
        z-index: 40;
        width: max-content;
        height: auto;
        min-height: 0;
        padding: 0;
        margin: 0;
        overflow: visible;
    }
    .main > .content { padding-top: 18px; }
    /* Long course/lesson titles cannot collide with the profile dropdown. */
    .main > .content > .kicker,
    .main > .content > .pagetitle { max-width: calc(100% - 205px); }
}

/* Medium screens preserve a short profile row to avoid collisions with lesson
   titles; all content stays in the same DOM order and the dropdown is intact. */
@media (min-width: 741px) and (max-width: 1050px) {
    .main > .topbar {
        height: 44px;
        min-height: 44px;
        padding: 0 26px;
        position: relative;
        z-index: 40;
        overflow: visible;
    }
    .main > .content { padding-top: 8px; }
}

/* Mobile: retain a clickable full-width user row with enough room for the
   dropdown, while removing unneeded blank space above the page contents. */
@media (max-width: 740px) {
    .main > .topbar {
        position: relative;
        z-index: 40;
        height: 44px;
        min-height: 44px;
        padding: 0 15px;
        overflow: visible;
    }
    .main > .content { padding-top: 8px; }
}