/*
 * Shared learner-course protection. This is deliberately a visible forensic
 * watermark and practical browser deterrence, not a claim of DRM. Watermarks
 * live only inside video containers so lesson reading stays unobstructed and
 * the learner trace remains present in the site's custom fullscreen mode.
 */

.content-protection-layer {
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.content-protection-layer--media {
    position: absolute;
    z-index: 3;
    inset: 0;
}

[data-protected-media]:not(.is-playing) > .content-protection-layer--media { display: none; }

.content-protection-mark {
    position: absolute;
    display: grid;
    width: max-content;
    max-width: min(46%, 300px);
    gap: 1px;
    padding: 0;
    color: #fff;
    font-family: var(--font-body, system-ui, sans-serif);
    line-height: 1.25;
    text-align: left;
    /* Readable on light and dark frames without a box over the video. */
    text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 1px 4px rgba(0, 0, 0, .7);
    opacity: .4;
    transition: opacity .2s ease;
}

.content-protection-mark.is-relocating { opacity: 0; }

.content-protection-mark strong,
.content-protection-mark span,
.content-protection-mark small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-protection-mark strong { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.content-protection-mark span { font-size: 10.5px; font-weight: 700; }
.content-protection-mark small { font-size: 9px; font-weight: 600; letter-spacing: .02em; }
.content-protection-mark small span { font-size: inherit; }

.content-protection-mark__trace {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}

[data-protected-media]:fullscreen .content-protection-mark strong { font-size: 13px; }
[data-protected-media]:fullscreen .content-protection-mark span { font-size: 14px; }
[data-protected-media]:fullscreen .content-protection-mark small { font-size: 12px; }

/* Three corner landing points clear of the centre and of YouTube's own UI:
   below its title row (top-left), below its ⚙ / captions row (top-right),
   and above its seek bar on the right. JavaScript fades out, relocates,
   then fades in, so the watermark never travels across the video. */
.content-protection-mark[data-watermark-position="0"] { top: 70px; left: 14px; }
.content-protection-mark[data-watermark-position="1"] { right: 14px; bottom: 92px; text-align: right; }
.content-protection-mark[data-watermark-position="2"] { top: 70px; right: 14px; text-align: right; }
[data-protected-media]:fullscreen .content-protection-mark[data-watermark-position="0"],
[data-protected-media]:fullscreen .content-protection-mark[data-watermark-position="2"] { top: 132px; }

.content-protection-capture-shield {
    position: fixed;
    z-index: 490;
    inset: 0;
    display: none;
    place-items: center;
    padding: 24px;
    pointer-events: none;
    background: #050b15;
    color: #fff;
    text-align: center;
}

.is-content-capture-shielded .content-protection-capture-shield { display: grid; }
.content-protection-capture-shield > div { display: grid; gap: 8px; }
.content-protection-capture-shield strong { font-size: clamp(20px, 4vw, 38px); }
.content-protection-capture-shield span { font-size: clamp(14px, 2vw, 18px); }
.content-protection-capture-shield small { font-family: var(--font-mono, ui-monospace, monospace); }

.content-protection-status {
    position: fixed;
    z-index: 510;
    right: 16px;
    bottom: 76px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--warn, #f59e0b) 48%, var(--border, #334155));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface, #0b1728) 95%, transparent);
    color: var(--text, #fff);
    box-shadow: 0 16px 45px rgba(0, 0, 0, .32);
    font: 700 13px/1.45 var(--font-body, system-ui, sans-serif);
    transform: translateY(16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.content-protection-status.is-visible { opacity: 1; transform: translateY(0); }
.content-protection-status:empty { display: none; }

.content-protection-print-notice { display: none; }

.protected-video-quality-hint {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 8px 2px 0;
    align-items: center;
    gap: 7px;
    color: var(--muted, #91a6c4);
    font: 650 11px/1.35 var(--font-body, system-ui, sans-serif);
}
.protected-video-quality-hint strong { color: var(--text, #eef3fb); font-weight: 800; }
.protected-video-quality-hint__badge {
    display: inline-grid;
    min-width: 28px;
    height: 20px;
    place-items: center;
    flex: none;
    border: 1px solid color-mix(in srgb, var(--brand, #ffd43b) 38%, var(--border, #334155));
    border-radius: 5px;
    background: color-mix(in srgb, var(--brand, #ffd43b) 10%, var(--surface, #0b1728));
    color: var(--text, #eef3fb);
    font: 850 9px/1 var(--font-body, system-ui, sans-serif);
    letter-spacing: .06em;
}
.video-player .protected-video-quality-hint { margin: 7px 11px 8px; }

/* The watermark full-screen buttons never sit over YouTube's player UI
   (YouTube policy; the old top-right spot hid its ⚙ quality control): one
   in the player bar below the video enters full screen, and the one inside
   the media is shown only in full screen, in a strip above the video, to
   exit it. */
.protected-media-fullscreen {
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 12px;
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
    background: rgba(3, 8, 18, .72);
    color: #fff;
    font: 750 12px/1 var(--font-body, system-ui, sans-serif);
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.protected-media-fullscreen:hover { background: rgba(3, 8, 18, .9); }
.protected-media-fullscreen:focus-visible { outline: 3px solid var(--brand, #ffd43b); outline-offset: 2px; }
.protected-media-fullscreen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.protected-media-fullscreen[hidden] { display: none; }
[data-protected-media]:not(:fullscreen) > .protected-media-fullscreen { display: none; }
.protected-media-fullscreen--bar {
    position: static;
    flex: none;
    min-height: 40px;
    border-color: var(--border, rgba(255, 255, 255, .28));
    background: var(--surface-2, rgba(3, 8, 18, .72));
    color: var(--text, #fff);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.protected-media-fullscreen--bar:hover { border-color: var(--brand, #ffd43b); background: var(--surface-2, rgba(3, 8, 18, .9)); }
.video-player__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 8px 11px;
}
.video-player__bar-text { display: grid; gap: 4px; min-width: 0; flex: 1 1 220px; }
.video-player__bar .video-player__title,
.video-player__bar .protected-video-quality-hint { margin: 0; padding: 0; }
.vc-player-bar { padding-inline: 2px; }
/* Full screen: the 60px strip at the top holds the Exit button; the video
   fills exactly the rest of the screen. This is the only rule that sizes the
   media's children in full screen -- a second one that set height: 100%
   pushed the video 60px past the bottom edge, hiding YouTube's play/pause
   and progress controls on phones. The children are already absolutely
   positioned (inset: 0), so top and height are all that change. */
[data-protected-media]:fullscreen > :is(iframe, .vc-player__frame, .video-player__poster, .vc-player__poster) {
    top: 60px;
    height: calc(100% - 60px);
    aspect-ratio: auto;
}

.vc-player__protected-backdrop,
.video-player__protected-poster {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    background:
        radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--brand, #ffd43b) 24%, transparent), transparent 38%),
        radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--accent, #4f8dff) 28%, transparent), transparent 42%),
        linear-gradient(145deg, #07111f, #10243f 52%, #07111f);
    color: rgba(255, 255, 255, .74);
}
.vc-player__protected-backdrop svg {
    width: clamp(42px, 7vw, 68px);
    height: clamp(42px, 7vw, 68px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
}
.vc-player__protected-backdrop span,
.video-player__protected-poster span {
    font: 800 clamp(10px, 1.4vw, 14px)/1.2 var(--font-body, system-ui, sans-serif);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.video-player__protected-poster::before {
    width: 42px;
    height: 42px;
    border: 2px solid currentColor;
    border-radius: 50% 50% 44% 44%;
    content: '';
    opacity: .5;
}
/* Lesson posters: the play button sits at the exact centre, so the label
   goes below it (clear of the button's ripple) and the decorative lock
   circle it would cover is not drawn. */
.video-player__poster .video-player__protected-poster::before { display: none; }
.video-player__poster .video-player__protected-poster span { margin-top: 118px; }
/* The same for the Video chapter poster and its larger play button. */
.vc-player__poster .vc-player__protected-backdrop svg { display: none; }
.vc-player__poster .vc-player__protected-backdrop span { margin-top: calc(clamp(64px, 9vw, 92px) + 64px); }
.video-player__poster.is-loading :is(.video-player__play-icon, .video-player__protected-poster span),
.vc-player.is-loading .vc-player__center { opacity: .35; }
.video-player__poster.is-loading,
.vc-player.is-loading .vc-player__poster { cursor: progress; }

[data-protected-media] { position: relative; isolation: isolate; }
[data-protected-media]:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: #000;
}
[data-protected-media]:fullscreen .video-player__title { display: none; }
[data-protected-media]:fullscreen .protected-video-quality-hint { display: none; }

[data-content-protected-region] img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

@media (max-width: 600px) {
    .content-protection-mark { max-width: calc(60% - 12px); }
    .content-protection-mark strong, .content-protection-mark span { font-size: 9px; }
    .content-protection-mark small { font-size: 8px; }
    .content-protection-mark[data-watermark-position="0"],
    .content-protection-mark[data-watermark-position="2"] { top: 52px; }
    .content-protection-mark[data-watermark-position="1"] { bottom: 66px; }
    .protected-media-fullscreen span { display: none; }
    .protected-media-fullscreen { padding: 0; }
    .protected-video-quality-hint { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .content-protection-mark,
    .content-protection-status { transition: none; }
}

@media print {
    body[data-content-protected="true"] main {
        display: none !important;
    }
    body[data-content-protected="true"] > :not(.content-protection-print-notice) {
        display: none !important;
    }
    body[data-content-protected="true"] .content-protection-print-notice {
        display: grid !important;
        min-height: 90vh;
        place-items: center;
        padding: 2cm;
        color: #111;
        background: #fff;
        font-family: Arial, sans-serif;
        text-align: center;
    }
    .content-protection-print-notice h1 { margin: 0 0 .4cm; font-size: 24pt; }
    .content-protection-print-notice p { margin: .18cm 0; font-size: 12pt; }
}