/* Route-local viewer: the feed, not the document, owns vertical scrolling. */
html:has(body.shorts-viewer) { overflow: hidden; scroll-snap-type: none; }
body.shorts-viewer { overflow: hidden; }
body.shorts-viewer .feed-head { display: none; }
body.shorts-viewer .layout { height: calc(100dvh - var(--site-header-h, 64px) - var(--site-mobile-nav-h, 0px)); padding-bottom: 0; min-height: 0; }
body.shorts-viewer .content { height: 100%; min-height: 0; padding-top: 0; }
.shorts-viewer .shorts-page { height: 100%; min-height: 0; container-type: size; }
.shorts-viewer .shorts-feed { display: block; height: 100%; max-width: none; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scrollbar-width: none; }
.shorts-viewer .shorts-feed::-webkit-scrollbar { display: none; }
/* Size budget: >=160px metadata + 16px gap + 68px rail + 12px left padding
   + 68px clearance for the existing right navigation. The page container
   already excludes the measured header/mobile navigation. */
.shorts-viewer .short-slide { --short-player-h: min(calc(430px * 16 / 9), calc(100cqh - 17px), calc((100cqw - 324px) * 16 / 9)); --short-meta-w: min(240px, calc(100cqw - (var(--short-player-h) * 9 / 16 + 68px) - 96px)); height: 100%; min-height: 0; max-height: none; padding: 8px 68px 8px 12px; padding-left: max(12px, calc((100cqw - (var(--short-player-h) * 9 / 16 + 68px)) / 2 - var(--short-meta-w) - 16px)); display: grid; grid-template-columns: var(--short-meta-w) calc(var(--short-player-h) * 9 / 16 + 68px); grid-template-rows: var(--short-player-h); gap: 16px; align-content: center; justify-content: start; border-bottom: 1px solid var(--border); overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; scroll-margin: 0; }
.shorts-viewer .short-stage { position: relative; grid-column: 2; grid-row: 1; display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 0; height: 100%; min-width: 0; }
.shorts-viewer .short-frame { flex: none; width: auto; max-width: calc(100% - 68px); height: 100%; aspect-ratio: 9 / 16; margin: 0; }
.shorts-viewer .short-frame::after { display: none; }
.shorts-viewer .short-actions { flex: none; width: 56px; }
.shorts-viewer .short-author { position: static; grid-column: 1; grid-row: 1; align-self: end; display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; color: var(--text); }
.shorts-viewer .short-author-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 44px; }
.shorts-viewer .short-author-name { color: var(--text); min-width: 0; max-width: 60%; }
.shorts-viewer .short-author-avatar img { border-color: var(--border); }
.shorts-viewer .short-author .subscribe-btn { flex: none; margin: 0; min-height: 44px; font-size: 12px; padding: 8px 12px; }
.shorts-viewer .short-author .ttl { margin: 0; min-width: 0; max-width: 100%; font-size: 13.5px; line-height: 1.4; -webkit-line-clamp: 1; }
.shorts-viewer .short-author > small { color: var(--text-secondary); font-size: 12px; line-height: 1.4; white-space: nowrap; }
.shorts-viewer .shorts-drawer { top: var(--site-header-h, 64px); bottom: var(--site-mobile-nav-h, 0px); overscroll-behavior: contain; }
.shorts-viewer .shorts-drawer-list { min-height: 0; overscroll-behavior: contain; }
.shorts-viewer .shorts-feed.comments-open { overflow-y: hidden; }
.shorts-viewer .shorts-empty { margin-top: 24px; }
@media (min-width: 769px) and (max-width: 1100px) {
  .shorts-viewer .short-author-row { flex-wrap: wrap; }
  .shorts-viewer .short-author .subscribe-btn { margin-left: 44px; }
}
@media (max-width: 768px) {
  body.shorts-viewer .layout { padding: 0; }
  body.shorts-viewer .content { padding: 0; }
  .shorts-viewer .short-slide { padding: 0; gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-content: normal; }
  .shorts-viewer .short-stage { grid-column: 1; grid-row: 1; }
  .shorts-viewer .short-stage { background: #000; }
  .shorts-viewer .short-frame { width: auto; max-width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); height: min(100%, calc((100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) * 16 / 9)); border-radius: 0; border: 0; box-shadow: none; }
  .shorts-viewer .short-actions { position: absolute; right: max(8px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 48px; gap: 4px; padding: 0; z-index: 6; }
  .shorts-viewer .short-act { color: #fff; min-width: 48px; min-height: 48px; text-shadow: 0 1px 4px #000; }
  .shorts-viewer .short-act .act-circle { width: 44px; height: 44px; background: #0008; border-color: #ffffff40; color: #fff; }
  .shorts-viewer .short-act.active .act-circle { background: var(--red-800); }
  .shorts-viewer .short-author { grid-row: 2; align-self: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 4px 12px max(4px, env(safe-area-inset-bottom)); background: var(--surface, #fff); }
  .shorts-viewer .short-author-row { min-height: 36px; }
  .shorts-viewer .short-author .ttl { font-size: 13px; line-height: 1.3; -webkit-line-clamp: 2; }
  .shorts-viewer .short-author > small { font-size: 11px; line-height: 1.3; }
  .shorts-viewer .short-author-name { flex: 0 1 auto; }
  .shorts-viewer .short-sound { top: 12px; right: 12px; }
  .shorts-viewer .shorts-drawer { top: auto; height: min(75dvh, calc(100dvh - var(--site-header-h, 64px) - var(--site-mobile-nav-h, 0px))); }
}
@media (max-width: 768px) and (max-height: 620px) {
  /* Leave room for four actions above the new metadata area on small phones. */
  .shorts-viewer .short-act { padding: 0; gap: 2px; line-height: 1.2; }
  .shorts-viewer .short-sound { left: 12px; right: auto; }
}