/* ==========================================================
   PAGE: artwork.html  (YouTube channel, metrics from the Figma spec)

   YouTube's own stack is Roboto with an Arial fallback. Roboto is not a
   macOS system face, so it is used when installed and Arial carries the
   look otherwise. No webfont request: the site loads zero third-party
   resources and the CSP pins everything to this origin.
   ========================================================== */
[data-page="artwork"] {
    --yt-bg:      #0D0D0D;
    --yt-nav:     #181818;
    --yt-rail:    #0F0F0F;
    --yt-field:   #0F0F0F;
    --yt-chip:    #2A2A2A;
    --yt-accent:  #912DF5;
    --yt-dim:     #9A9A9A;
    --yt-dimmer:  #8F8F8F;
    --yt-sub:     #888888;
    --yt-dead:    #5C5C5C;   /* decorative chrome that does nothing */

    background: var(--yt-bg);
    color: #FFFFFF;
    font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    min-height: 100%;
    padding-bottom: 80px;
}

/* ---- top bar ---- */
[data-page="artwork"] .yt-nav {
    display: flex;
    align-items: center;
    height: 56px;
    background: var(--yt-nav);
}

[data-page="artwork"] .yt-burger {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    flex: 0 0 72px;
}

[data-page="artwork"] .yt-navinner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

[data-page="artwork"] .yt-logo {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

[data-page="artwork"] .yt-logomark {
    width: 29px;
    height: 21px;
    background: #FF0000;
    border-radius: 5px;
    position: relative;
}

[data-page="artwork"] .yt-logomark::after {
    content: '';
    position: absolute;
    left: 11px;
    top: 6px;
    border-left: 8px solid #FFFFFF;
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
}

[data-page="artwork"] .yt-wordmark {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.06em;
    color: #FFFFFF;
}

/* ---- search ---- */
[data-page="artwork"] .yt-search {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1 1 auto;
    max-width: 863px;
    min-width: 0;
}

[data-page="artwork"] .yt-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    height: 38px;
    min-width: 0;
    background: var(--yt-field);
    border: 1.6px solid var(--yt-chip);
    border-radius: 99px;
}

[data-page="artwork"] .yt-fieldbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 78px;
    height: 38px;
    margin-left: auto;
    margin-right: -1.6px;
    background: var(--yt-chip);
    border-radius: 0 99px 99px 0;
}

[data-page="artwork"] .yt-mic {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    background: var(--yt-chip);
    border-radius: 99px;
}

[data-page="artwork"] .yt-actions {
    display: flex;
    align-items: center;
    gap: 34px;
    flex: 0 0 auto;
}

[data-page="artwork"] .yt-avatar-mini {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--yt-accent);
    background-size: cover;
    background-position: center;
}

[data-page="artwork"] .yt-ico {
    width: 24px;
    height: 24px;
    fill: #FFFFFF;
    flex: 0 0 auto;
}

/* ---- decorative chrome ----
   The top bar and the left rail are a drawing of YouTube, not YouTube. Dimmed
   so they read as inert, and pointer-events:none so they never take a hover or
   a cursor change and invite a click that goes nowhere. The logo is left at
   full strength: it is branding, not a control. */
[data-page="artwork"] .yt-burger,
[data-page="artwork"] .yt-search,
[data-page="artwork"] .yt-actions,
[data-page="artwork"] .yt-rail {
    pointer-events: none;
    user-select: none;
}

[data-page="artwork"] .yt-burger .yt-ico,
[data-page="artwork"] .yt-search .yt-ico,
[data-page="artwork"] .yt-actions .yt-ico,
[data-page="artwork"] .yt-rail .yt-ico {
    fill: var(--yt-dead);
}

[data-page="artwork"] .yt-field {
    background: #0C0C0C;
    border-color: #232323;
}

[data-page="artwork"] .yt-fieldbtn,
[data-page="artwork"] .yt-mic { background: #1E1E1E; }

[data-page="artwork"] .yt-avatar-mini { opacity: 0.45; }

/* ---- banner row: the left rail runs only beside the cover ---- */
[data-page="artwork"] .yt-coverrow {
    display: flex;
    align-items: flex-start;
}

[data-page="artwork"] .yt-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    flex: 0 0 88px;
    width: 88px;
    padding: 12px;
    background: var(--yt-rail);
    align-self: stretch;
}

[data-page="artwork"] .yt-railitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--yt-dead);
}

[data-page="artwork"] .yt-railitem span {
    font-family: 'Inter', 'Roboto', Arial, sans-serif;
    font-size: 8px;
    font-weight: 500;
    line-height: 10px;
    text-align: center;
    white-space: nowrap;
}

/* Taller than YouTube's own 309px strip. A 16:9 banner in a 6:1 box loses
   about 70% of its height, which decapitates anything composed near the top.
   An aspect-ratio instead of a fixed height keeps the crop the SAME fraction
   of the image at every window width, so the composition cannot drift as the
   window resizes. At 3:1 roughly 59% of the image survives, centred.
   To favour a different part of the image, change background-position:
   'center 35%' shows more of the top, 'center 65%' more of the bottom. */
[data-page="artwork"] .yt-cover {
    position: relative;
    flex: 1 1 auto;
    aspect-ratio: 3 / 1;
    min-height: 260px;
    min-width: 0;
    background: var(--yt-accent);
    background-size: cover;
    background-position: center;
}

[data-page="artwork"] .yt-coverbadge {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.5);
}

[data-page="artwork"] .yt-coverbadge b {
    font-size: 14.4px;
    font-weight: 500;
    line-height: 17px;
    color: #000000;
}

[data-page="artwork"] .yt-badgeavatar {
    width: 15.65px;
    height: 16px;
    background: var(--yt-accent);
    background-size: cover;
}

[data-page="artwork"] .yt-social {
    width: 16px;
    height: 16px;
    border-radius: 99px;
    flex: 0 0 16px;
}

[data-page="artwork"] .yt-social.fb { background: #3B52A5; }
[data-page="artwork"] .yt-social.tw { background: #55ACEE; }
[data-page="artwork"] .yt-social.ig { background: linear-gradient(224.73deg, #7420BC 7.89%, #F7CB53 92.11%); }

/* ---- the centred content column ---- */
[data-page="artwork"] .yt-body {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: min(1284px, calc(100% - 64px));
    margin: 32px auto 0;
}

/* ---- channel header ---- */
[data-page="artwork"] .yt-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    min-height: 128px;
}

[data-page="artwork"] .yt-identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

[data-page="artwork"] .yt-avatar {
    width: 128px;
    height: 128px;
    flex: 0 0 128px;
    border-radius: 999px;
    background: var(--yt-accent);
    background-size: cover;
    background-position: center;
}

[data-page="artwork"] .yt-names {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

[data-page="artwork"] .yt-nameline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

[data-page="artwork"] .yt-name {
    font-size: 30.37px;
    font-weight: 500;
    line-height: 36px;
    color: #FFFFFF;
}

[data-page="artwork"] .yt-check {
    width: 20.78px;
    height: 20.78px;
    fill: var(--yt-dim);
    flex: 0 0 auto;
}

[data-page="artwork"] .yt-subs {
    max-width: 620px;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--yt-sub);
}

[data-page="artwork"] .yt-subscribe {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    flex: 0 0 auto;
    background: #FFFFFF;
    border: none;
    border-radius: 65px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    color: #000000;
    cursor: default;
}

/* ---- tabs ---- */
[data-page="artwork"] .yt-tabs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

[data-page="artwork"] .yt-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    font-size: 17.59px;
    font-weight: 500;
    line-height: 21px;
    color: var(--yt-dimmer);
    white-space: nowrap;
}

[data-page="artwork"] .yt-tab.on { color: #FFFFFF; }

[data-page="artwork"] .yt-tabrule {
    width: 134.29px;
    max-width: 100%;
    height: 3.2px;
    background: var(--yt-dim);
}

[data-page="artwork"] .yt-tabsearch {
    width: 31.97px;
    height: 31.97px;
    fill: var(--yt-dimmer);
    flex: 0 0 auto;
}


/* ---- a row of work ---- */
[data-page="artwork"] .yt-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

[data-page="artwork"] .yt-rowhead {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
}

[data-page="artwork"] .yt-rowtitle {
    font-size: 20.78px;
    font-weight: 700;
    line-height: 24px;
    color: #FFFFFF;
}

[data-page="artwork"] .yt-playall {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--yt-dim);
    white-space: nowrap;
}

[data-page="artwork"] .yt-playall svg { width: 16px; height: 16px; fill: var(--yt-dim); }

[data-page="artwork"] .yt-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px 4px;
}

/* ---- one tile ---- */
[data-page="artwork"] .yt-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    min-width: 0;
}

[data-page="artwork"] .yt-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 210 / 118;
    background: var(--yt-accent);
    border-radius: 8px;
    overflow: hidden;
}

[data-page="artwork"] .yt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-page="artwork"] .yt-card:hover .yt-thumb img { transform: scale(1.04); }

/* small corner mark so motion pieces read as motion before you open one */
[data-page="artwork"] .yt-thumb.is-video::after {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 0;
    height: 0;
    border-left: 9px solid rgba(255, 255, 255, 0.92);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
}

[data-page="artwork"] .yt-cardtext {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

[data-page="artwork"] .yt-cardtitle {
    font-size: 17.59px;
    font-weight: 700;
    line-height: 21px;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-page="artwork"] .yt-cardchannel {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    font-size: 15.99px;
    font-weight: 500;
    line-height: 150%;
    color: var(--yt-dim);
}

[data-page="artwork"] .yt-cardchannel svg { width: 17.59px; height: 17.59px; fill: var(--yt-dim); flex: 0 0 auto; }

[data-page="artwork"] .yt-cardmeta {
    font-size: 15.99px;
    font-weight: 500;
    line-height: 150%;
    color: var(--yt-dim);
}

/* ---- My Favorites ----
   Four across instead of six, because these tiles carry a paragraph. The
   description is the reason the row exists, so it gets room to breathe. */
[data-page="artwork"] .yt-row.is-favorites .yt-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 20px;
}

[data-page="artwork"] .yt-row.is-favorites .yt-cardtitle {
    white-space: normal;          /* let a long title wrap rather than clip */
    overflow: visible;
}

[data-page="artwork"] .yt-carddesc {
    margin: 10px 0 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.62;
    color: #B9B9B9;
}

@media (max-width: 1180px) {
    [data-page="artwork"] .yt-row.is-favorites .yt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    [data-page="artwork"] .yt-row.is-favorites .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    [data-page="artwork"] .yt-row.is-favorites .yt-grid { grid-template-columns: 1fr; }
}

/* ---- the popup ----
   Fixed, and inset below the 52px toolbar, so it opens centred on wherever
   you are rather than at the top of the scrolled page. Video carries native
   controls: these are performances, so they need a seek bar and a volume. */
[data-page="artwork"] .yt-lightbox {
    position: fixed;
    inset: 52px 0 0 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: rgba(5, 5, 6, 0.9);
}

[data-page="artwork"] .yt-lightbox.open { display: flex; }

[data-page="artwork"] .yt-lightbox img,
[data-page="artwork"] .yt-player {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 4px;
    animation: ytPop 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- the player ----
   Our own bar, not the browser's. Chrome removes the scrubber from its native
   controls once the element is narrow, and most of these clips are vertical,
   so the native bar showed up with nothing to seek on. */
/* inline-block so the box is exactly the size of the picture, which is what
   makes the bar line up with it instead of running wider */
[data-page="artwork"] .yt-player {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
}

/* An explicit height, not a percentage: the player is an inline-block with an
   auto height, so max-height:100% on the video had nothing definite to resolve
   against and a tall clip overflowed the popup. 148px = the 52px toolbar the
   lightbox is inset by, plus its 48px padding top and bottom. */
/* 192px = the 52px toolbar the lightbox is inset by, its 48px padding top and
   bottom, and the 44px the bar below needs. */
[data-page="artwork"] .yt-player video {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 192px);
    border-radius: 4px 4px 0 0;
    cursor: pointer;                 /* click the picture to play or pause */
    background: #000;
}

/* Close. Sits over the top-right corner of the media, above the player's own
   stacking so it is always reachable, with a 40px hit area drawn small. */
[data-page="artwork"] .yt-x {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(12, 12, 14, 0.62);
    color: #F2F2F2;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

[data-page="artwork"] .yt-x:hover { background: rgba(12, 12, 14, 0.88); }

[data-page="artwork"] .yt-player.is-still { line-height: 0; }

[data-page="artwork"] .yt-player.is-still img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 148px);
    border-radius: 4px;
}

/* The bar sits BELOW the picture, never on top of it. Opera draws its own
   overlay UI (the pop-out-video widget) across video elements, and browser
   chrome composites above page content: a bar overlapping the video is visible
   but unclickable there. Its width is synced to the video in JS. */
[data-page="artwork"] .yt-pbar {
    position: static;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 44px;
    padding: 0 14px;
    line-height: normal;
    border-radius: 0 0 4px 4px;
    background: #121214;
    user-select: none;
}

[data-page="artwork"] .yt-pplay,
[data-page="artwork"] .yt-pmute {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
}

/* play triangle, becomes two pause bars while running */
[data-page="artwork"] .yt-pplay::before {
    content: '';
    position: absolute;
    left: 5px; top: 3px;
    border-left: 13px solid #EDEDED;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}
[data-page="artwork"] .yt-pplay.is-playing::before {
    left: 4px; top: 4px;
    width: 4px; height: 14px;
    border: none;
    background: #EDEDED;
    box-shadow: 8px 0 0 #EDEDED;
}

[data-page="artwork"] .yt-pmute::before {
    content: '';
    position: absolute;
    left: 3px; top: 6px;
    width: 6px; height: 10px;
    background: #EDEDED;
    clip-path: polygon(0 20%, 45% 20%, 100% 0, 100% 100%, 45% 80%, 0 80%);
    transform: scaleX(2.2);
    transform-origin: left center;
}
[data-page="artwork"] .yt-pmute.is-muted::after {
    content: '';
    position: absolute;
    left: 2px; top: 10px;
    width: 19px; height: 2px;
    background: #FF5B5B;
    transform: rotate(-34deg);
}

/* the bar itself: generous hit area, thin visual line */
[data-page="artwork"] .yt-scrub {
    position: relative;
    flex: 1 1 auto;
    height: 28px;                    /* generous hit area; the line itself stays 4px */
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;              /* so a drag scrubs instead of scrolling */
}

[data-page="artwork"] .yt-scrub::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.22);
}

[data-page="artwork"] .yt-scrubfill {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: #FF0000;
    pointer-events: none;            /* clicks belong to the track, not the fill */
    width: 0;
}

[data-page="artwork"] .yt-ptime {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 500;
    color: #CFCFCF;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@keyframes ytPop {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: none; }
}

/* ---- narrower windows ---- */
@media (max-width: 1180px) {
    [data-page="artwork"] .yt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    [data-page="artwork"] .yt-search { max-width: 420px; }
}

@media (max-width: 900px) {
    [data-page="artwork"] .yt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    [data-page="artwork"] .yt-rail { display: none; }
    [data-page="artwork"] .yt-cover { aspect-ratio: 5 / 2; min-height: 200px; }
    [data-page="artwork"] .yt-actions { gap: 18px; }
    /* The tab row stops fitting here. Let it scroll, and drop the trailing
       search icon, which is decorative and would sit oddly in a scrolling row. */
    [data-page="artwork"] .yt-tabs {
        justify-content: flex-start;
        gap: 32px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    [data-page="artwork"] .yt-tabs::-webkit-scrollbar { display: none; }
    [data-page="artwork"] .yt-tabsearch { display: none; }
}

@media (max-width: 680px) {
    [data-page="artwork"] .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-page="artwork"] .yt-header { flex-direction: column; align-items: flex-start; }
    [data-page="artwork"] .yt-avatar { width: 88px; height: 88px; flex-basis: 88px; }
    [data-page="artwork"] .yt-name { font-size: 24px; line-height: 28px; }
    [data-page="artwork"] .yt-tabs { gap: 28px; }


    [data-page="artwork"] .yt-lightbox { padding: 20px; }
    [data-page="artwork"] .yt-player video { max-height: calc(100vh - 136px); }
}

/* ---- phone ----
   The top bar is decorative here, and at this width the search field plus
   four action items no longer fit, so the row pushed the whole page sideways.
   YouTube's own phone header keeps the logo, the bell and the avatar, so the
   field and the two leading icons go. */
@media (max-width: 500px) {
    [data-page="artwork"] .yt-search { display: none; }
    [data-page="artwork"] .yt-actions { gap: 20px; margin-left: auto; }
    [data-page="artwork"] .yt-actions > .yt-ico:nth-child(-n+2) { display: none; }
    [data-page="artwork"] .yt-navinner { padding: 12px 14px; }
}