/* ux-player: the way out of the player on wide screens, the notice Finish shows when chapters are still open,
   the certificate card, and lesson tools big enough for a finger. Phones keep the bar r4-learn built. */

/* ---------- UX-4: the player's bar leads back at every width ---------- */
.r4bar__back, .r4bar__title, .uxp-bar__out { text-decoration: none; }
.r4bar__title:hover, .uxp-bar__out:hover { text-decoration: underline; }

@media (min-width: 901px) {
    .r4bar {
        display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20;
        padding: 10px 40px; background: var(--surface); border-bottom: 1px solid var(--line);
    }

    .r4bar__back {
        display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 10px; border-radius: 10px;
        color: var(--ink-2); font-size: 13px; font-weight: 700;
    }

    .r4bar__back:hover { background: var(--surface-3); color: var(--ink); }

    .r4bar__title {
        min-width: 0; font-size: 14px; font-weight: 700; color: var(--ink);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .uxp-bar__out {
        margin-left: auto; flex: none; padding: 7px 10px; border-radius: 10px;
        color: var(--ink-2); font-size: 13px; font-weight: 700;
    }

    .uxp-bar__out:hover { background: var(--surface-3); color: var(--ink); }
    .r4bar__back:focus-visible, .r4bar__title:focus-visible, .uxp-bar__out:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .r4bar__tools { display: none; }
    .cplay__maintop { justify-content: flex-end; padding-top: 14px; }
}

@media (max-width: 900px) {
    .uxp-bar__out, .uxp-bar__backtext { display: none; }
}

/* ---------- UX-9: Finish with chapters still open says so, and points at the first one ---------- */
.uxp-left {
    margin: 26px 0 0; padding: 12px 14px; border: 1px solid var(--warn-line); border-radius: 12px;
    background: var(--tint-warn); color: var(--warn-ink); font-size: 14px; line-height: 1.5;
}

.uxp-left p { margin: 0; }
.uxp-left strong { margin-right: 4px; }
.uxp-left__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.uxp-left + .cplay__nav { margin-top: 14px; }

/* ---------- UX-14: the certificate's title gets the room, its actions sit underneath ---------- */
.cert {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px 16px;
}

.cert__ribbon { grid-column: 1; grid-row: 1; }
.cert__body { grid-column: 2; grid-row: 1; }
.cert__title { font-size: 15.5px; line-height: 1.35; }
.cert__meta { flex-wrap: wrap; row-gap: 2px; }
.cert__code { overflow-wrap: anywhere; }
.cert__actions { grid-column: 2; grid-row: 2; }

@media (max-width: 600px) {
    .cert { grid-template-columns: minmax(0, 1fr); }
    .cert__ribbon, .cert__body, .cert__actions { grid-column: 1; }
    .cert__ribbon { grid-row: 1; }
    .cert__body { grid-row: 2; }
    .cert__actions { grid-row: 3; }
}

/* A badge card's words stay inside the card, however long the language makes them. */
.badge__name, .badge__desc, .badge__earned { max-width: 100%; }

/* ---------- UX-18: the lesson tools are a finger wide where there is no mouse ---------- */
@media (max-width: 900px), (pointer: coarse) {
    .r3tools { gap: 8px; }
    .r3tools__btn { min-height: 44px; padding: 8px 14px; }
    .r3tools__speed select { min-height: 44px; }
    .r3tools__status { display: inline-flex; align-items: center; min-height: 44px; }
}