/* ==================================================================== *
 *  Video brand look (R2 WS6): template gallery, brand bar, look lock,   *
 *  the stage brand layer (logo bug, intro/end cards), branded lower     *
 *  thirds and caption styles, and the Brand Kit "Video" section.        *
 *  Linked from compose/, compose/preview/, video/ and the dashboard.    *
 * ==================================================================== */

/* ---------------- Template gallery (compose setup) ---------------- */
.vt-lede{
    margin: 0.35rem 0 0;
    padding-bottom: 1.5rem;
    opacity: 0.75;
    font-size: 0.95rem;
}
.vt-gallery{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
}
@media (max-width: 720px){
    .vt-gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vt-tile{
    appearance: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.9rem;
    background: color-mix(in oklab, var(--color-base-content, #fff) 6%, var(--color-base-100, #1d232a));
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    &:hover{ transform: translateY(-2px); }
    &:focus-visible{ outline: 3px solid var(--color-primary, #4f46e5); outline-offset: 2px; }
    &.is-picked{
        box-shadow: 0 0 0 3px var(--color-primary, #4f46e5);
    }
}
.vt-thumb{
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 0.55rem;
    overflow: hidden;
    background: linear-gradient(180deg, #9aa3af, #6b7280);
    container-type: inline-size;
}
.vt-cam{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    .material-symbols-outlined{
        font-size: 46cqw;
        line-height: 0.78;
        color: #e5e7eb;
        font-variation-settings: 'FILL' 1;
    }
}
.vt-card{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1cqw;
    padding: 0 5cqw;
    background: var(--tt-card);
    color: var(--tt-text);
    line-height: 1.1;
    b{ font-size: 7cqw; font-weight: 800; }
    small{ font-size: 3.6cqw; opacity: 0.9; }
}
.vt-thumb[data-fill="lower-third"] .vt-card{
    left: 5%; bottom: 7%; max-width: 62%; min-height: 26%;
    border-radius: 1cqw;
    box-shadow: inset 4px 0 0 var(--tt-accent);
    padding-left: 6cqw;
}
.vt-thumb[data-fill="lower-third-trans"] .vt-card{
    left: 0; right: 0; bottom: 0; height: 50%;
    justify-content: flex-end;
    padding-bottom: 7cqw;
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.7));
    color: #fff;
    b{ border-left: 4px solid var(--tt-accent); padding-left: 2cqw; }
}
.vt-thumb[data-fill="half-left"]{
    .vt-card{ inset: 0 50% 0 0; box-shadow: inset -4px 0 0 var(--tt-accent); }
    .vt-cam{ left: 50%; }
}
.vt-thumb[data-fill="half-right"]{
    .vt-card{ inset: 0 0 0 50%; box-shadow: inset 4px 0 0 var(--tt-accent); }
    .vt-cam{ right: 50%; }
}
.vt-thumb[data-fill^="half"] .vt-card b{ font-size: 10cqw; }
.vt-thumb img.vt-bug{
    position: absolute;
    top: 5%;
    right: 4%;
    left: auto;
    width: auto;
    height: 11%;
    max-width: 24%;
    margin: 0;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.4));
}
.vt-label{
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 1rem;
    padding: 0 0.25rem;
    .material-symbols-outlined{ font-size: 1.2rem; opacity: 0.8; }
}
.vt-badge{
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary, #4f46e5) 25%, transparent);
}
.vt-blurb{
    font-size: 0.8rem;
    line-height: 1.35;
    opacity: 0.75;
    padding: 0 0.25rem;
}
.vt-note{
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0.15rem 0.25rem 0;
    padding: 0.35rem 0.5rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.3;
    background: rgb(245 179 1 / 0.14);
    color: inherit;
    .material-symbols-outlined{ font-size: 0.95rem; color: #f5b301; }
}

/* ---------------- Brand bar + look lock (Edit scenes) ---------------- */
.brand-bar{
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.75rem;
    border-radius: 0.75rem;
    background: color-mix(in oklab, var(--color-base-content, #fff) 6%, var(--color-base-100, #1d232a));
}
.brand-bar-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.brand-bar-swatches{
    display: inline-flex;
    i{
        display: block;
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 999px;
        box-shadow: 0 0 0 2px var(--color-base-100, #1d232a);
        & + i{ margin-left: -0.35rem; }
    }
}
.brand-bar-text{
    display: flex;
    flex-direction: column;
    flex: 1 1 8rem;
    line-height: 1.2;
    b{ font-size: 0.9rem; }
    small{ font-size: 0.75rem; opacity: 0.7; }
}
.brand-bar-save{
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    input{ flex: 1; }
}
.brand-bar-note{
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    opacity: 0.8;
}
.brand-lock-note{
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.25rem 0 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.35;
    background: rgb(245 179 1 / 0.14);
    .material-symbols-outlined{ font-size: 1rem; color: #f5b301; }
}
.is-look-locked{
    input[type="color"]:disabled{ opacity: 0.45; cursor: not-allowed; }
    .scene-pickers .btn:disabled{ opacity: 0.55; }
}
.scene-picker-panel .picker-heading.picker-motion-note{
    text-transform: none;
    letter-spacing: 0;
    grid-column: 1 / -1;
    opacity: 0.7;
}

/* ---------------- Stage: branded scenes ---------------- */
/* Set by js/video-brand-layer.js on [data-message-media] for a branded video.
   The accent bar is a solid 4px in the brand accent on every card layout. */
[data-message-media][data-brand-lt] [data-slide][data-slide-grid="4x3"]{
    [data-group="lower-third"]::before{
        width: 4px;
        background: var(--icon_color);
    }
    [data-group="half-left"]{ box-shadow: inset -4px 0 0 var(--icon_color); }
    [data-group="half-right"]{ box-shadow: inset 4px 0 0 var(--icon_color); }
    [data-group="lower-third-trans"] > :first-child{
        border-left: 4px solid var(--icon_color);
        padding-left: 0.6rem;
    }
}
/* Lower third "Card": a solid rounded card, the accent bar across the top */
[data-message-media][data-brand-lt="card"] [data-slide][data-slide-grid="4x3"] [data-group="lower-third"]{
    background: var(--background_color);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem 0.85rem;
    &::before{
        right: 0;
        bottom: auto;
        width: auto;
        height: 4px;
        border-radius: 0.75rem 0.75rem 0 0;
    }
}

/* ---------------- Stage: brand layer ---------------- */
[data-message-media] > [data-brand-layer]{
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    container-type: size;
}
[data-brand-bug]{
    position: absolute;
    height: clamp(14px, 8cqh, 64px);
    max-width: 22cqw;
    width: auto;
    object-fit: contain;
    opacity: 0.92;
    filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.45));
    transition: opacity 0.3s;
}
[data-brand-bug="top-left"]{ top: 4cqh; left: 3cqw; }
[data-brand-bug="top-right"]{ top: 4cqh; right: 3cqw; }
[data-brand-bug="bottom-right"]{ bottom: 4cqh; right: 3cqw; }
[data-brand-state="intro"] [data-brand-bug],
[data-brand-state="end"] [data-brand-bug]{ opacity: 0; }
[data-brand-card]{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3cqh;
    padding: 6cqh 8cqw;
    text-align: center;
    background: var(--brand-card);
    color: var(--brand-text);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
    [data-brand-logo]{
        height: 16cqh;
        max-width: 44cqw;
        object-fit: contain;
    }
    [data-brand-title]{
        margin: 0;
        font-size: clamp(14px, 6.5cqh, 44px);
        font-weight: 800;
        line-height: 1.15;
        max-width: 80cqw;
    }
    [data-brand-rule]{
        display: block;
        width: 10cqw;
        height: 4px;
        border-radius: 2px;
        background: var(--brand-accent);
    }
}
[data-brand-state="intro"] [data-brand-card="intro"],
[data-brand-state="end"] [data-brand-card="end"]{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease;
}
[data-brand-state="end"] [data-brand-card="end"]{ pointer-events: auto; }
[data-brand-cta]{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    background: var(--brand-accent);
    color: var(--brand-cta-text, #fff) !important;
    font-weight: 700;
    font-size: clamp(14px, 4cqh, 22px);
    text-decoration: none;
    &:focus-visible{ outline: 3px solid var(--brand-text); outline-offset: 3px; }
}
[data-brand-replay]{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0.4rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--brand-text);
    font-size: clamp(12px, 3.2cqh, 16px);
    font-weight: 600;
    opacity: 0.85;
    cursor: pointer;
    .material-symbols-outlined{ font-size: 1.1em; }
    &:hover{ opacity: 1; }
    &:focus-visible{ outline: 3px solid var(--brand-text); outline-offset: 2px; }
}
/* the end card carries its own Watch again; the big play button would cover the CTA */
[data-brand-state="end"] [data-player-big-play]{ display: none !important; }
@media (prefers-reduced-motion: reduce){
    [data-brand-card], [data-brand-bug]{ transition: none; }
}

/* ---------------- Caption styles ---------------- */
[data-brand-captions="boxed"] .caption-display{
    background: var(--brand-card) !important;
}
[data-brand-captions="boxed"] .caption-display .caption-text{
    display: inline-block;
    padding: 0.1em 0.65em;
    border-left: 4px solid var(--brand-accent);
    color: var(--brand-text);
}

/* ---------------- Brand Kit: Video section (dashboard) ---------------- */
.bkv{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 60rem;
}
.bkv-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 900px){
    .bkv-grid{ grid-template-columns: minmax(0, 1fr); }
}
.bkv-fields{
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.bkv-field{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    > b{ font-size: 0.85rem; }
    > small{ font-size: 0.78rem; opacity: 0.7; }
}
.bkv-seg{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    button{
        min-height: 2.25rem;
        padding: 0.3rem 0.8rem;
        border-radius: 999px;
        border: 1px solid rgb(127 127 127 / 0.35);
        background: transparent;
        color: inherit;
        font-size: 0.85rem;
        cursor: pointer;
        &[aria-pressed="true"]{
            background: #4f46e5;
            border-color: #4f46e5;
            color: #fff;
            font-weight: 600;
        }
        &:disabled{ opacity: 0.5; cursor: not-allowed; }
        &:focus-visible{ outline: 2px solid #4f46e5; outline-offset: 2px; }
    }
}
.bkv-colors{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    button{
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        border: 2px solid transparent;
        background: var(--c);
        box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
        cursor: pointer;
        &[aria-pressed="true"]{ outline: 2px solid currentColor; outline-offset: 2px; }
        &:disabled{ cursor: not-allowed; }
    }
}
.bkv-row{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    select, input[type="text"], input[type="url"]{
        min-height: 2.25rem;
        padding: 0.3rem 0.6rem;
        border-radius: 0.5rem;
        border: 1px solid rgb(127 127 127 / 0.35);
        background: transparent;
        color: inherit;
        font-size: 0.85rem;
        min-width: 12rem;
    }
}
.bkv-toggle{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    input{ width: 1.1rem; height: 1.1rem; }
}
.bkv-preview{
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.bkv-stage{
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 0.6rem;
    overflow: hidden;
    background: linear-gradient(180deg, #9aa3af, #6b7280);
    container-type: inline-size;
    .vt-cam .material-symbols-outlined{ font-size: 46cqw; }
}
.bkv-lt{
    position: absolute;
    left: 5%;
    bottom: 8%;
    max-width: 60%;
    padding: 2.4cqw 4cqw 2.4cqw 5cqw;
    background: color-mix(in srgb, var(--bkv-card) 85%, transparent);
    color: var(--bkv-text);
    border-radius: 1cqw;
    box-shadow: inset 4px 0 0 var(--bkv-accent);
    line-height: 1.15;
    b{ display: block; font-size: 5.4cqw; }
    small{ font-size: 3.2cqw; opacity: 0.9; }
    &[data-lt="clear"]{
        background: none;
        box-shadow: none;
        color: #fff;
        text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
        b{ border-left: 4px solid var(--bkv-accent); padding-left: 2cqw; }
    }
    &[data-lt="card"]{
        background: var(--bkv-card);
        border-radius: 2cqw;
        box-shadow: inset 0 4px 0 var(--bkv-accent);
        padding-top: 3.4cqw;
    }
}
.bkv-bug{
    position: absolute;
    height: 10%;
    max-width: 24%;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.4));
    &[data-pos="top-left"]{ top: 5%; left: 4%; }
    &[data-pos="top-right"]{ top: 5%; right: 4%; }
    &[data-pos="bottom-right"]{ bottom: 5%; right: 4%; }
}
.bkv-caption{
    padding: 0.45rem 0.75rem;
    border-radius: 0 0 0.6rem 0.6rem;
    margin-top: -0.6rem;
    background: #000;
    color: #fff;
    font: 600 0.8rem/1.3 Arial, Helvetica, sans-serif;
    text-align: center;
    &[data-style="large"]{ font-size: 1.05rem; color: #ffeb3b; }
    &[data-style="boxed"]{
        background: var(--bkv-card);
        span{ border-left: 4px solid var(--bkv-accent); padding: 0 0.5rem; color: var(--bkv-text); }
    }
}
.bkv-endcard{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.9rem;
    border-radius: 0.6rem;
    background: var(--bkv-card);
    color: var(--bkv-text);
    text-align: center;
    font-size: 0.85rem;
    img{ height: 1.6rem; max-width: 50%; object-fit: contain; }
    i{ display: block; width: 2.5rem; height: 4px; border-radius: 2px; background: var(--bkv-accent); }
    span.bkv-cta{
        padding: 0.3rem 0.9rem;
        border-radius: 999px;
        background: var(--bkv-accent);
        color: var(--bkv-cta-text, #fff);
        font-weight: 700;
    }
}
.bkv-actions{
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}
.bkv-note{
    font-size: 0.8rem;
    opacity: 0.75;
}
.bkv-lock-note{
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    background: rgb(245 179 1 / 0.16);
    font-size: 0.82rem;
    .material-symbols-outlined{ font-size: 1rem; color: #b07d00; }
}