/* youtube-site.css: the site's layout around the supplied youtube.css (left as supplied). Load last. */

/* The ad boxes hold real ad zones, so they lose the dashed placeholder look. */
.ytp .cp-ad.ytp-ad{display:flex;justify-content:center;min-width:0;overflow:hidden;height:auto;min-height:0;width:auto;padding:0;border:0;border-radius:0;background:none;
  color:inherit;font-size:inherit;letter-spacing:normal;text-transform:none;font-weight:inherit}
.ytp .cp-ad.ytp-ad>*{max-width:360px}
.ytp .cp-ad.ytp-ad-wide>*{max-width:100%}

/* The house /chart columns (as the Census, earthquake and recall pages), sticky:
   each side column is a menu and a 600px ad, held in view while the page
   scrolls. Menus are capped so the ad under each always fits on screen.
   - 1600px and up: 360px | content | 360px, 32px apart, at most 1840px, 72px
     kept clear on the right for the floating share button. Left: Sidebar1,
     then countries and categories. Right: "On this page", then Sidebar2.
   - 1024 to 1599px: content | 360px. No left ad; the countries and categories
     run under the content, so the H1 comes first. The right column stays sticky.
   - Below 1024px: one column: the content, the menu, then the right column. */
:root{--cp-menu-max:max(100px,calc(100vh - 72px - 16px - 600px - 24px))}
.yt.ytp{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;max-width:1400px}
.yt.ytp>.yt-side{position:static;flex:none;width:auto;max-width:none;min-width:0;order:0}
.yt.ytp>.yt-left .ytp-ad{display:none}
.yt.ytp>.yt-main{order:-1;min-width:0}
.yt.ytp .yt-nav{max-height:none;min-height:0}
.yt.ytp>.yt-left .yt-nav{flex-direction:row;flex-wrap:wrap;gap:4px}
.yt.ytp>.yt-left .yt-nav .yt-nav-title{flex-basis:100%}
.yt.ytp>.yt-left .yt-nav a{padding:5px 9px;border:1px solid var(--line2)}
.yt.ytp>.yt-left .yt-nav a span:last-child,.yt.ytp>.yt-left .yt-nav a .bi-chevron-right{margin-left:4px}
.yt-nav-gap{margin-top:10px}
@media (min-width:1024px){
  .yt.ytp{grid-template-columns:minmax(0,1fr) 360px;column-gap:32px;padding-right:72px}
  .yt.ytp>.yt-main{grid-column:1;grid-row:1}
  .yt.ytp>.yt-left{grid-column:1;grid-row:2}
  .yt.ytp>.yt-right{grid-column:2;grid-row:1/span 2;position:sticky;top:72px;align-self:start}
  .yt.ytp>.yt-right .yt-nav{max-height:var(--cp-menu-max);overflow-y:auto;overscroll-behavior:contain}
}
@media (min-width:1600px){
  .yt.ytp{grid-template-columns:360px minmax(0,1fr) 360px;max-width:1840px}
  .yt.ytp>.yt-left{grid-column:1;grid-row:1;position:sticky;top:72px;align-self:start}
  .yt.ytp>.yt-main{grid-column:2;grid-row:1}
  .yt.ytp>.yt-right{grid-column:3;grid-row:1}
  .yt.ytp>.yt-left .ytp-ad{display:flex}
  .yt.ytp>.yt-left .yt-nav{flex-direction:column;flex-wrap:nowrap;gap:2px;max-height:var(--cp-menu-max);overflow-y:auto;overscroll-behavior:contain}
  .yt.ytp>.yt-left .yt-nav a{border:0;padding:7px 10px}
  .yt.ytp>.yt-left .yt-nav a span:last-child{margin-left:auto}
}

/* Pictures load as images, lazily, not as CSS backgrounds that all load at once. */
.yt img.yt-ava{object-fit:cover;background:var(--soft3)}
.yt-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yt-thumb b{z-index:1}
.yt-top3 .yt-body img.yt-ava{display:block}
.yt-footer{max-width:1840px}

/* Supplied fixes: the pop-up sits outside .yt, so its headings need their own size; a flag keeps its size in a card heading. */
.yt-dialog h2{font-size:16px;line-height:1.3;font-weight:700;margin:0 0 4px}
.yt-dialog .yt-pad>div:first-child h2{margin:0}
.yt-tile-head .yt-flag{flex:none}