/* Watch layout v1 — YouTube-like, Inter variable, flicker-free */

@font-face{
  font-family:"InterVariable";
  src:url("/assets/fonts/InterVariable.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:75% 125%; font-style:normal; font-display:swap;
}

:root{
  --bg:#0b1020; --fg:#e7e9ee; --muted:#9aa6bf; --line:#203055; --card:#0e1630;
  --accent:#7c3aed;
  --sans:"InterVariable",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body.watch{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.75 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--accent); color:#fff}
a,button{-webkit-tap-highlight-color:transparent}
:focus{outline:none} :focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* container */
.watch-wrap{max-width:1280px; margin:0 auto; padding:18px}
.watch-grid{display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:24px}
@media (max-width:1100px){ .watch-grid{grid-template-columns:1fr} }

/* player */
.player{border-radius:14px; overflow:hidden; background:#000; border:1px solid var(--line)}
.ratio{position:relative; width:100%; padding-top:56.25%}
.media{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000}

/* title & bar */
.watch-title{font-weight:800; letter-spacing:-.01em; margin:14px 0 8px; font-size:clamp(20px,2.6vw,26px)}
.watch-bar{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px}
.watch-meta{color:var(--muted); font-size:14px; display:flex; gap:8px; align-items:center}
.btn{border:1px solid var(--line); background:#121933; color:#e7e9ee; padding:.45rem .75rem; border-radius:999px; cursor:pointer; font-weight:600}
.btn:hover{background:#182143}

/* channel */
.channel{display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)}
.avatar{width:48px; height:48px; border-radius:50%; object-fit:cover; border:1px solid var(--line)}
.ch-name{font-weight:700}
.ch-sub{font-size:13px; color:var(--muted)}
.cta{display:inline-block; padding:.5rem .9rem; border-radius:999px; background:#e11d48; color:#fff; text-decoration:none; font-weight:700}

/* description/article */
.desc{padding:12px 0; border-bottom:1px solid var(--line)}
.lead{color:#cbd5e1; margin:.2rem 0 1rem}
.prose{color:#dee3f1; font-size:16px}
.prose p{margin:.7rem 0}
.prose ul{padding-left:1.2rem}
.prose a{color:#a78bfa; text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose pre{background:#0a0f1f; border:1px solid var(--line); padding:12px; border-radius:8px; overflow:auto; font-family:var(--mono)}
.transcript{white-space:pre-wrap}

.prose.short{max-height:200px; overflow:hidden; position:relative}
.prose.short::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(180deg, transparent, rgba(11,16,32,.95));
  pointer-events:none;
}
.more{border:0; background:transparent; color:#cbd5e1; padding:.25rem 0; cursor:pointer; font-weight:700}
.more:hover{color:#fff}

/* sidebar */
.watch-side{min-width:0}
.side-head{font-weight:800; margin:6px 0 10px}
.side-list{display:flex; flex-direction:column; gap:10px}
.side-item{display:grid; grid-template-columns:168px 1fr; gap:10px; text-decoration:none; color:inherit; align-items:start; padding:6px; border-radius:10px; border:1px solid transparent}
.side-item:hover{background:#0e1630; border-color:var(--line)}
.side-thumb{position:relative; border-radius:10px; overflow:hidden; background:#000; border:1px solid var(--line)}
.side-thumb img{display:block; width:100%; height:94px; object-fit:cover}
.dur{position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; padding:2px 6px; border-radius:6px}
.side-title{font-weight:700; line-height:1.25; margin-bottom:4px}
.side-sub{font-size:13px; color:var(--muted)}

/* small tweaks */
@media (max-width:560px){
  .side-item{grid-template-columns:140px 1fr}
  .side-thumb img{height:84px}
}