.channel-page {
    --channel-radius: 9px;
    --channel-fill: var(--surface-raised);
    --channel-gap: .85rem;
    min-width: 0;
}

.channel-page .channel-heading {
    margin-block-end: .65rem;
}

.channel-page .channel-heading h1 {
    font-size: clamp(1.18rem, 2.5vw, 1.55rem);
}

.channel-tabs {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding-block-end: .6rem;
    border-block-end: 1px solid var(--line);
    margin-block-end: 1.05rem;
}

.channel-tabs a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.125rem;
    padding: .36rem .75rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--muted);
    font-size: .88rem;
    font-weight: 700;
}

.channel-tabs a:hover {
    background: var(--surface-hover);
    color: var(--ink);
}

.channel-tabs a[aria-current="page"] {
    border-color: var(--accent);
    background: var(--surface-raised);
    color: var(--accent);
}

.channel-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .65rem 1rem;
    margin-block-end: 1.05rem;
}

.channel-page .search {
    flex: 1 1 17rem;
    margin: 0;
}

.channel-page .search-error {
    margin: 0 0 .85rem;
}

.channel-page .section-heading {
    margin-block-end: .75rem;
}

.channel-library {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 1.25rem var(--channel-gap);
    align-items: start;
}

.channel-video {
    position: relative;
    min-width: 0;
}

.channel-page .channel-video .card {
    border: 0;
    border-radius: var(--channel-radius);
    background: transparent;
    overflow: visible;
}

.channel-page .channel-video .card-media {
    overflow: hidden;
    border-radius: var(--channel-radius);
}

.channel-page .channel-video .card-body {
    gap: .2rem;
    padding: .42rem 0 0;
}

.channel-page .channel-video:has(.channel-menu-trigger) .card-body {
    padding-inline-end: 2rem;
}

.channel-page .channel-video .card-body b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .9rem;
    line-height: 1.45;
}

.channel-page .channel-video .card:hover .card-body b {
    color: var(--accent);
}

.channel-page .channel-video .card-body small {
    font-size: .77rem;
}

.channel-page .channel-video .duration {
    inset-inline-end: .32rem;
    inset-block-end: .32rem;
    padding: .02rem .28rem;
    font-size: .73rem;
}

.channel-menu-trigger {
    position: absolute;
    inset-block-start: auto;
    inset-inline-end: 0;
    inset-block-end: 0;
    display: grid;
    place-items: center;
    min-inline-size: 2rem;
    min-block-size: 2rem;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1;
}

.channel-menu-trigger:hover,
.channel-menu-trigger[aria-expanded="true"] {
    background: var(--channel-fill);
    color: var(--accent);
}

.channel-shelf {
    padding-block: 1.1rem;
    border-block-end: 1px solid var(--line);
}

.channel-shelf:first-of-type {
    padding-block-start: .45rem;
}

.channel-shelf-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .85rem;
    margin-block-end: .65rem;
}

.channel-shelf-heading h2 {
    font-size: 1.05rem;
}

.channel-shelf-row {
    --shelf-card-width: clamp(10rem, 20vw, 13rem);
    position: relative;
}

.channel-track {
    display: flex;
    align-items: start;
    gap: var(--channel-gap);
    min-width: 0;
    padding: .22rem .23rem .6rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: .23rem;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
}

.channel-track > .channel-video {
    flex: 0 0 var(--shelf-card-width);
    scroll-snap-align: start;
}

.channel-arrow {
    position: absolute;
    z-index: 1;
    inset-block-start: calc(.22rem + var(--shelf-card-width) * .28125);
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 2px 10px var(--shadow);
    transform: translateY(-50%);
}

.channel-arrow[data-scroll-direction="previous"] {
    inset-inline-start: -.45rem;
}

.channel-arrow[data-scroll-direction="next"] {
    inset-inline-end: -.45rem;
}

.channel-arrow::before {
    content: "";
    inline-size: .46rem;
    block-size: .46rem;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: translateX(-.09rem) rotate(-45deg);
}

.channel-arrow[data-scroll-direction="next"]::before {
    transform: translateX(.09rem) rotate(135deg);
}

.channel-arrow:dir(ltr)[data-scroll-direction="previous"]::before {
    transform: translateX(.09rem) rotate(135deg);
}

.channel-arrow:dir(ltr)[data-scroll-direction="next"]::before {
    transform: translateX(-.09rem) rotate(-45deg);
}

.channel-arrow:hover {
    background: var(--channel-fill);
    color: var(--accent);
}

.channel-arrow:disabled,
.channel-arrow[aria-disabled="true"] {
    cursor: default;
    opacity: .4;
}

.channel-feedback {
    margin-block: .5rem .8rem;
    padding: .55rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--channel-radius);
    background: var(--channel-fill);
}

.channel-create {
    margin-block: 0 1rem;
}

.channel-create form,
form.channel-create {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .5rem;
    max-inline-size: 34rem;
}

.channel-create form {
    margin-block-start: .65rem;
}

.channel-create label {
    display: grid;
    gap: .25rem;
    flex: 1 1 13rem;
}

.channel-create button {
    flex: 0 0 auto;
}

.channel-create summary {
    width: fit-content;
    cursor: pointer;
}

.channel-video-menu {
    position: fixed;
    z-index: 20;
    inset: auto;
    inline-size: min(19rem, calc(100vw - 1rem));
    max-block-size: calc(100vh - 1rem);
    max-block-size: calc(100dvh - 1rem);
    margin: 0;
    padding: .85rem;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--channel-radius);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 7px 28px var(--shadow);
}

.channel-video-menu form {
    display: grid;
    gap: .55rem;
}

.channel-menu-header,
.channel-menu-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.channel-menu-header {
    justify-content: space-between;
    margin-block-end: .55rem;
}

.channel-menu-header bdi {
    flex: 1;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.channel-menu-actions > button {
    flex: 1 1 max-content;
}

.channel-video-menu select {
    inline-size: 100%;
    min-inline-size: 0;
    padding: .5rem;
    border: 1px solid var(--control-line);
    border-radius: .5rem;
    background: var(--input);
    color: var(--ink);
    font: inherit;
}

.channel-video-menu button {
    font-size: .87rem;
}

.channel-video-menu button[value="playlist_remove"],
#channel-menu-close {
    border-color: var(--line);
    background: transparent;
    color: var(--muted);
}

.channel-video-menu button[value="playlist_remove"]:hover,
#channel-menu-close:hover {
    background: var(--channel-fill);
    color: var(--accent);
}

@media (max-width: 580px) {
    .channel-library {
        --channel-gap: .55rem;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
        row-gap: 1rem;
    }

    .channel-tools {
        align-items: stretch;
    }
}