/* Recording page. Phones: edge-to-edge player pinned to the top while reading, details below,
   then the Up next list. Wide screens: player and details on the left, Up next on the right. */
.watch-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;padding-block:28px 70px}
@media(min-width:1100px){.watch-layout{grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}}

.watch-stage{background:#0b0b0a;border-radius:12px;overflow:hidden}
.watch-player{max-width:none;margin:0;border:0;border-radius:0;aspect-ratio:16/9;background:#0b0b0a}
.watch-player video{object-fit:contain;background:#0b0b0a}
.watch-player.vertical-player{aspect-ratio:auto;max-width:none;width:100%;height:min(78vh,760px);max-height:none}
.watch-player.audio-player{aspect-ratio:auto;max-width:none}

.watch-info{padding-top:16px}
.watch-title{font:600 32px/1.12 var(--serif);letter-spacing:-.3px;color:var(--ink)}
.watch-meta{margin-top:8px;font-size:13px;font-weight:500;color:#77776f}

.watch-channel{display:flex;align-items:center;gap:12px;margin-top:18px}
.watch-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 16%;background:#1e1e1b;box-shadow:0 0 0 1px #d9bc8766}
.watch-channel-name{display:flex;flex-direction:column;min-width:0}
.watch-channel-name strong{font:600 17px/1.2 var(--serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.watch-channel-name span{font-size:12px;color:#8a8a80}
.watch-about{margin-left:auto;display:inline-flex;align-items:center;min-height:38px;padding:0 18px;border-radius:999px;background:linear-gradient(180deg,#151513,#0f100e);color:#efe7d6;font-size:13px;font-weight:600}
.watch-about:active{transform:scale(.97)}

.watch-actions{display:flex;gap:8px;margin-top:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.watch-actions::-webkit-scrollbar{display:none}
.action-pill{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border-radius:999px;background:#ebe8df;color:#262622;font-size:13px;font-weight:600;white-space:nowrap;transition:background .15s,transform .15s}
.action-pill .icon{color:#5a5a52}
.action-pill:hover{background:#e2ded2}
.action-pill:active{transform:scale(.96)}

.watch-description{position:relative;margin-top:16px;padding:14px 16px 12px;border-radius:12px;background:#ebe8df;cursor:default}
.watch-description-text{white-space:pre-line;font-size:14px;line-height:1.7;color:#3d3d37;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.watch-description.is-open .watch-description-text{display:block;-webkit-line-clamp:unset}
.watch-description:not(.is-open):has(.watch-description-toggle:not([hidden])){cursor:pointer}
.watch-description-toggle{margin-top:4px;padding:4px 0;background:none;font-size:13px;font-weight:700;color:#262622}
.watch-description .muted{font-size:12px;margin-top:12px}

.watch-next-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.watch-next-heading h2{font-size:26px}
.watch-next-heading .text-link{font-size:12px}
.next-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.next-item{display:grid;grid-template-columns:168px minmax(0,1fr);gap:12px;align-items:start;border-radius:10px;transition:background .15s}
.next-item:hover{background:#ebe8df}
.next-thumb{position:relative;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#1e1e1b;display:flex;align-items:center;justify-content:center;color:var(--gold)}
.next-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .4s}
.next-item:hover .next-thumb img{transform:scale(1.04)}
.next-duration{position:absolute;right:6px;bottom:6px;padding:2px 6px;border-radius:5px;background:#000000c7;color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.next-copy{display:flex;flex-direction:column;gap:5px;padding-top:2px;min-width:0}
.next-title{font:600 16.5px/1.22 var(--serif);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.next-meta{font-size:12px;color:#8a8a80}

/* Comments. Wide screens show the full list under the description; phones show a teaser card that opens it. */
.watch-comments{margin-top:28px}
.comments-title{display:flex;align-items:baseline;gap:10px;font-size:24px}
.comments-count{font:600 14px var(--sans);color:#8a8a80}
.comments-teaser{display:none}
.comment-avatar{flex:none;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#26261f,#121210);color:#e3c48d;font:600 16px var(--serif)}
.comment-avatar.is-you{background:#e4e0d4;color:#6d6d64}
.comment-form{display:flex;gap:12px;margin-top:18px}
.comment-fields{flex:1;min-width:0}
.comment-fields textarea{display:block;min-height:0;width:100%;resize:none;border:0;border-radius:0;border-bottom:1px solid #cfcabd;background:transparent;padding:8px 0;font:14px/1.55 var(--sans);color:var(--ink);overflow:hidden}
.comment-fields textarea:focus{outline:0;border-bottom:2px solid var(--ink);padding-bottom:7px}
.comment-extra{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.comment-name-input{width:100%;border:1px solid #d6d1c4;border-radius:10px;background:#fbfaf6;padding:10px 12px;font:14px/1.4 var(--sans);color:var(--ink)}
.comment-name-input::placeholder,.comment-fields textarea::placeholder{color:#8a8a80}
.comment-name-input:focus{outline:2px solid var(--ink);outline-offset:-1px}
.comment-note{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:#6c6c63}
.comment-note .icon{flex:none;margin-top:2px;color:var(--gold-deep)}
.comment-buttons{display:flex;justify-content:flex-end;gap:8px}
.comment-cancel,.comment-submit{min-height:38px;padding:0 18px;border-radius:999px;font-size:13px;font-weight:600}
.comment-cancel{background:none;color:#3d3d37}
.comment-cancel:hover{background:#ebe8df}
.comment-submit{background:linear-gradient(180deg,#151513,#0f100e);color:#efe7d6}
.comment-submit:disabled{opacity:.55}
.comment-status{margin-top:16px;padding:12px 14px;border-radius:12px;background:#eef0e6;border:1px solid #c9d3bd;color:#2f4a36;font-size:13px;line-height:1.55}
.comments-closed,.comments-empty{margin-top:18px;font-size:13.5px;color:#7a7a71}
.comment-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.comment{display:flex;gap:12px}
.comment-content{min-width:0;flex:1}
.comment-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:12px;color:#8a8a80}
.comment-name{font-size:13px;font-weight:700;color:#2b2b27}
.comment-body{margin-top:4px;white-space:pre-line;overflow-wrap:anywhere;font-size:14px;line-height:1.6;color:#33332e}
.comment.is-pending{padding:12px;margin:-12px;border-radius:12px;background:#f3ecdc}
.comment-pending{padding:2px 8px;border-radius:999px;background:#e3c48d55;color:#6e5225;font-size:11px;font-weight:700}
.comment-pending-note{margin-top:6px;font-size:12px;line-height:1.5;color:#7d6a49}
.comments-more{margin-top:20px;min-height:40px;padding:0 18px;border-radius:999px;background:#ebe8df;color:#262622;font-size:13px;font-weight:600}

/* Phones: the page margin is 20px here, so the player and the action row bleed to the screen edge. */
@media(max-width:640px){
  .watch-layout{padding-block:0 48px;gap:26px}
  /* The player sticks within its parent, so lift it into the full-page grid to stay pinned over Up next. */
  .watch-main{display:contents}
  .watch-info{margin-top:-26px}
  .watch-stage{margin-inline:-20px;border-radius:0;position:sticky;top:0;z-index:5;box-shadow:0 8px 20px -14px #000000aa}
  .watch-stage:has(.vertical-player),.watch-stage:has(.audio-player){position:static;box-shadow:none}
  .watch-player.vertical-player{height:min(72vh,177.8vw)}
  .watch-info{padding-top:14px}
  .watch-title{font-size:25px;line-height:1.16}
  .watch-meta{font-size:12.5px;margin-top:6px}
  .watch-actions{margin-inline:-20px;padding-inline:20px}
  .action-pill{min-height:44px}
  .watch-about{min-height:44px}
  .watch-description{padding:13px 14px 10px}
  .watch-description-text{font-size:14px}
  .watch-description-toggle{min-height:36px}
  .next-item{grid-template-columns:150px minmax(0,1fr)}
  .next-title{font-size:16px}
  .watch-comments{margin-top:-8px;padding:14px 16px;border-radius:12px;background:#ebe8df}
  .comments-title{font-size:19px}
  .comments-teaser{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;min-height:44px;background:none;padding:0;text-align:left}
  .comments-teaser .comment-avatar{width:28px;height:28px;font-size:13px}
  .comments-teaser-text{flex:1;min-width:0;font-size:13.5px;line-height:1.45;color:#33332e;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .comments-teaser-text.is-prompt{color:#7a7a71}
  .comments-teaser-chevron{transform:rotate(90deg);transition:transform .2s;color:#55554d}
  .watch-comments.is-open .comments-teaser-chevron{transform:rotate(-90deg)}
  .watch-comments:not(.is-open) .comments-body{display:none}
  .watch-comments{position:relative}
  .watch-comments.is-open .comments-teaser{position:absolute;top:4px;right:6px;width:44px;margin:0;justify-content:center}
  .watch-comments.is-open .comments-teaser>:not(.comments-teaser-chevron){display:none}
  .comment-name-input{font-size:16px}
  .comment-fields textarea{font-size:16px}
  .comment-cancel,.comment-submit,.comments-more{min-height:44px}
  .comment.is-pending{margin:0 -6px;padding:12px 10px}
  /* Keep scrolled-to comment content clear of the pinned 16:9 player. */
  .comment-status,.comment-form,.comment{scroll-margin-top:calc(56.25vw + 16px)}
}
@media(max-width:380px){.next-item{grid-template-columns:132px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.next-thumb img,.action-pill{transition:none}}