/* YouTube as YouTube draws it, for the desk's preview (yt.js): every size and colour from
   docs/design/youtube/youtube-reference.md (measured Oct 28 2026 at 1440 × 900 and on an iPhone, 390 wide). Roboto
   400-700 (OFL, fonts/OFL-Roboto.txt). Icons are drawn approximations of YouTube's interface glyphs, not brand marks;
   the marks themselves are /yt/brand/*.svg, unaltered. */
@font-face { font-family: "Roboto YT"; src: url("yt-fonts/roboto-latin.woff2") format("woff2"); font-weight: 400 700; font-display: block; }

.ytr {
  --yt-bg: #fff; --yt-tx: #0f0f0f; --yt-tx2: #606060; --yt-hair: rgba(0,0,0,.1); --yt-line: rgba(0,0,0,.2); --yt-tone: rgba(0,0,0,.05);
  --yt-sub-bg: #0f0f0f; --yt-sub-tx: #f1f1f1;
  font: 400 14px/20px "Roboto YT", Arial, sans-serif; letter-spacing: 0; color: var(--yt-tx); background: var(--yt-bg);
  -webkit-font-smoothing: antialiased; text-align: left; font-variant-numeric: normal;
}
:root[data-theme="dark"] .ytr { --yt-bg: #0f0f0f; --yt-tx: #f1f1f1; --yt-tx2: #aaa; --yt-hair: rgba(255,255,255,.1); --yt-line: rgba(255,255,255,.2); --yt-tone: rgba(255,255,255,.1); --yt-sub-bg: #f1f1f1; --yt-sub-tx: #0f0f0f; }
.ytr *, .ytr *::before, .ytr *::after { box-sizing: border-box; }
.ytr p, .ytr h3 { margin: 0; }
.ytr b { font-weight: 500; }
.ytr-i { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; font-style: normal; }
.ytr-i svg { width: 24px; height: 24px; fill: currentColor; }
.ytr-i.down svg { transform: rotate(180deg); }
.ytr-av { display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: #ffd23f; color: #0f1113; font: 500 16px/1 "Roboto YT", Arial, sans-serif; text-transform: uppercase; }
.ytr-av img { width: 100%; height: 100%; object-fit: cover; }
.ytr-dur { position: absolute; right: 8px; bottom: 8px; height: 20px; padding: 1px 4px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; font: 500 12px/18px "Roboto YT", Arial, sans-serif; }
.ytr-sub { display: inline-flex; align-items: center; flex: none; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--yt-sub-bg); color: var(--yt-sub-tx); font: 500 14px/40px "Roboto YT", Arial, sans-serif; }
.ytr-th { position: relative; overflow: hidden; background: #000; }
.ytr-art { position: absolute; inset: 0; background: #000; }
.ytr-art img, .ytr-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The watch page, primary column */
.ytr-watch { padding-bottom: 4px; }
.ytr-player { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.ytr-title { margin-top: 12px; font: 700 20px/28px "Roboto YT", Arial, sans-serif; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ytr-owner { display: flex; align-items: center; margin-top: 12px; min-height: 40px; }
.ytr-owner > .ytr-av { margin-right: 12px; }
.ytr-ownt { display: flex; flex-direction: column; margin-right: 24px; min-width: 0; }
.ytr-ownt b { font: 500 16px/22px "Roboto YT", Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ytr-ownt small { font-size: 12px; line-height: 18px; color: var(--yt-tx2); white-space: nowrap; }
.ytr-ownt small:empty { display: none; }
.ytr-acts { display: flex; gap: 8px; margin-left: auto; }
.ytr-pill { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 12px; border-radius: 20px; background: var(--yt-tone); white-space: nowrap; }
.ytr-pill > b { font: 500 14px/40px "Roboto YT", Arial, sans-serif; }
.ytr-pill.ytr-like { padding: 0; gap: 0; }
.ytr-like > span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px 0 12px; gap: 10px; }
.ytr-like > span:last-child { padding: 0 16px; }
.ytr-like > span > b { font: 500 14px/40px "Roboto YT", Arial, sans-serif; }
.ytr-div { width: 1px; height: 24px; background: var(--yt-line); }
.ytr-pill.ytr-round { width: 40px; padding: 0; justify-content: center; }
.ytr-desc { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--yt-tone); }
.ytr-info { display: block; font: 500 14px/20px "Roboto YT", Arial, sans-serif; white-space: pre; }
.ytr-desc p { margin-top: 0; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ytr-more { font-weight: 500; }

/* The Up next column: 396 wide, thumbnail 247.5 × 139.2 radius 8, text 12 after it */
.ytr-side { display: grid; grid-template-columns: 247.5px minmax(0, 1fr); column-gap: 12px; width: 396px; }
.ytr-side .ytr-th { height: 139.2px; border-radius: 8px; }
.ytr-side .ytr-dur { right: 4px; bottom: 4px; }
.ytr-st { display: flex; flex-direction: column; min-width: 0; }
.ytr-st b { font: 500 14px/20px "Roboto YT", Arial, sans-serif; max-height: 60px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; margin-bottom: 2px; }
.ytr-st small { font-size: 12px; line-height: 18px; color: var(--yt-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* The Up next list on an iPhone: 390 wide */
.ytr-mcard { width: 390px; padding-bottom: 12px; }
.ytr-mcard .ytr-th { height: 218.9px; }
.ytr-mrow { position: relative; display: grid; grid-template-columns: 40px 278px; column-gap: 12px; padding: 12px 0 0 12px; }
.ytr-mrow b { font: 400 14px/17.5px "Roboto YT", Arial, sans-serif; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ytr-mrow small { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--yt-tx2); }
.ytr-mrow > .ytr-i { position: absolute; left: 342px; top: 0; width: 48px; height: 48px; }

/* The watch page on an iPhone, under the 48 top bar */
.ytr-mwatch { width: 390px; padding-bottom: 12px; }
.ytr-mwatch .ytr-player { border-radius: 0; }
.ytr-minfo { padding: 12px 16px 0; }
.ytr-minfo h3 { font: 700 18px/26px "Roboto YT", Arial, sans-serif; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }
.ytr-minfo p { display: flex; gap: 8px; margin-top: 2px; font-size: 12px; line-height: 18px; white-space: nowrap; }
.ytr-minfo p span { color: var(--yt-tx2); }
.ytr-minfo .m { font-weight: 500; }
.ytr-mch { position: relative; display: flex; align-items: center; height: 48px; margin-top: 12px; padding-left: 16px; }
.ytr-mch > .ytr-av { margin-right: 8px; }
.ytr-mch .ytr-sub { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12px; line-height: 32px; }
.ytr-mic { position: absolute; left: 174px; top: 0; display: flex; }
.ytr-mic .ytr-i { width: 41px; height: 48px; justify-items: start; padding-left: 12px; }

/* A Short on an iPhone */
.ytr-short { position: relative; overflow: hidden; background: #000; color: #fff; }
.ytr-short::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.45), transparent 34%); pointer-events: none; }
.ytr-sbar { position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 8px; }
.ytr-sbar .ytr-i { width: 40px; height: 40px; }
.ytr-stext { position: absolute; z-index: 1; left: 16px; bottom: 16px; width: 298.9px; display: flex; flex-direction: column; gap: 8px; }
.ytr-sch { display: flex; align-items: center; height: 40px; }
.ytr-sch > .ytr-av { margin-right: 8px; }
.ytr-sch > span:not(.ytr-sub):not(.ytr-av) { font: 400 14px/20px "Roboto YT", Arial, sans-serif; margin-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ytr-short .ytr-sub { background: #0f0f0f; color: #f1f1f1; }
.ytr-stext p { font: 400 14px/20px "Roboto YT", Arial, sans-serif; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ytr-srail { position: absolute; z-index: 1; right: 12px; bottom: 24px; width: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ytr-srail > span { display: flex; flex-direction: column; align-items: center; }
.ytr-srail > span > .ytr-i { width: 32px; height: 32px; }
.ytr-srail small { font: 500 12px/16px "Roboto YT", Arial, sans-serif; white-space: nowrap; }
.ytr-srail .ytr-snd .ytr-av { width: 40px; height: 40px; border-radius: 6px; }