/* Kitt Tube: a neutral, red-accented palette and a two-column watch page on top of Kitt Core. */

:root {
    --bk-bg: #f8f8f9;
    --bk-raised: #efeff2;
    --bk-line: #e3e3e8;
}

[data-mode="dark"] {
    --bk-bg: #0e0e10;
    --bk-surface: #161619;
    --bk-raised: #222226;
    --bk-line: #2d2d33;
    --bk-muted: #a4a4ad;
}

@media (prefers-color-scheme: dark) {
    [data-mode="auto"] {
        --bk-bg: #0e0e10;
        --bk-surface: #161619;
        --bk-raised: #222226;
        --bk-line: #2d2d33;
        --bk-muted: #a4a4ad;
    }
}

.bk-watch {
    display: grid;
    gap: 24px;
}

@media (min-width: 1100px) {
    .bk-watch.has-aside {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
        gap: 28px;
    }
}

/* In one column, the video lists under the details follow Up next. */
@media (max-width: 1099.98px) {
    .bk-watch.has-aside .bk-watch__main {
        display: contents;
    }

    .bk-watch.has-aside .bk-watch__main > [data-bk-type='related-row'] {
        order: 1;
    }
}

.bk-watch .bk-container {
    max-width: none;
    padding-inline: 0;
}

.bk-watch__main,
.bk-watch__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.bk-watch__aside .bk-section__title {
    font-size: 1.05rem;
}

.bk-watch__aside .bk-section__head {
    margin-bottom: 12px;
}