/* Video and photos: /videos, /watch, /shorts, /photos and /upload.
   Same furniture as the rest of Southbag: greyscale, square corners, ridge and inset borders,
   standard grey buttons (never restyled here, not even over a video), slow linear transitions.
   Every video and photo sits in a box of a fixed shape and is stretched to fill it:
   watch player 16:9, shorts 9:16, photo posts square, thumbnails 16:9 or 9:16. */

/* -- Shared ---------------------------------------------------------------- */
.liked-note {
  position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%) rotate(-2deg); pointer-events: none;
  padding: 6px 18px; background: #fff; color: #000; border: 2px outset var(--sb-bevel); font-weight: 700; font-size: 1.4rem;
}

/* -- /videos --------------------------------------------------------------- */
.yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px 16px; box-shadow: none; }
.yt-card { min-width: 0; box-shadow: none; }
.yt-grid > .yt-card:nth-child(3n + 2) { transform: rotate(-0.4deg); }
.yt-grid > .yt-card:nth-child(5n) { transform: rotate(0.3deg); }
.yt-card .video-thumb { border: 2px inset var(--sb-bevel); }
.yt-card .video-thumb .play, .yt-short .video-thumb .play { opacity: 0; transition: opacity 1.2s linear; }
.yt-card .video-thumb:hover .play, .yt-short:hover .video-thumb .play { opacity: 1; }
.yt-meta { display: flex; gap: 10px; margin-top: 8px; align-items: flex-start; box-shadow: none; }
.yt-meta .grow { box-shadow: none; }
.yt-title {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--sb-ink);
}
.yt-sub { color: var(--sb-muted); font-size: 0.84rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: none; }
.yt-channel { display: inline-flex; align-items: baseline; gap: 4px; color: var(--sb-muted); max-width: 100%; }
.yt-channel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Compact cards (Up next) */
.yt-card.compact { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 8px; margin-bottom: 12px; transform: none; }
.yt-card.compact .yt-meta { margin-top: 0; }
.yt-card.compact .yt-title { font-size: 0.92rem; }
.yt-card.compact .yt-sub { font-size: 0.78rem; }

/* Shorts row */
.yt-shelf { grid-column: 1 / -1; border: 2px ridge var(--sb-ridge); background: var(--sb-panel); padding: 0.75rem; }
.yt-shelf-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; box-shadow: none; }
.yt-shelf-head h2 { margin: 0; }
.yt-shelf-head .spacer { flex: 1; box-shadow: none; }
.yt-shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 170px); gap: 12px; overflow-x: auto; padding-bottom: 6px; box-shadow: none; }
.yt-short { display: flex; flex-direction: column; gap: 4px; color: var(--sb-ink); min-width: 0; text-decoration: none; box-shadow: none; }
.yt-short:hover { background: none; }
.yt-short .video-thumb { border: 2px inset var(--sb-bevel); }
.yt-short-caption {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 700; font-size: 0.92rem; line-height: 1.3;
}

@media (max-width: 640px) {
  .yt-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .yt-shelf-row { grid-auto-columns: 42%; }
}

/* -- /watch/:id -------------------------------------------------------------- */
.watch { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; box-shadow: none; }
.watch-primary { min-width: 0; box-shadow: none; }
/* The player is always 16:9. A vertical video is stretched sideways to fill it. */
.watch-player {
  position: relative; background: #000; aspect-ratio: 16 / 9; width: 100%; max-width: calc(75vh * 16 / 9);
  border: 2px inset var(--sb-bevel);
}
.watch-player video { display: block; width: 100%; height: 100%; box-shadow: none; }
.watch-player:fullscreen { border: 0; max-width: none; }
.watch-unmute { position: absolute; left: 10px; top: 10px; z-index: 2; }
.watch-upnext {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(0, 0, 0, 0.8); color: #fff; text-align: center; padding: 16px;
}
.watch-upnext-title { font-size: 1.2rem; max-width: 520px; box-shadow: none; }
.watch-upnext .row { box-shadow: none; }
.watch-title { font-size: clamp(1.4rem, 3vw, 2rem); max-width: none; margin: 16px 0 10px; overflow-wrap: anywhere; }
.watch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; justify-content: space-between; padding: 8px 0; border-bottom: 2px dashed #000; box-shadow: none; }
:root[data-theme='dark'] .watch-bar { border-bottom-color: #666; }
.watch-channel { display: flex; align-items: center; gap: 10px; min-width: 0; box-shadow: none; }
.watch-channel .grow { display: flex; flex-direction: column; line-height: 1.25; box-shadow: none; }
.watch-channel-name { font-weight: 700; color: var(--sb-ink); display: inline-flex; align-items: baseline; gap: 4px; }
.watch-subs { font-size: 0.8rem; color: var(--sb-muted); }
.watch-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; box-shadow: none; }
.watch-desc { margin: 14px 0 20px; padding: 10px 12px; background: var(--sb-paper); border: 2px inset var(--sb-bevel); }
.watch-desc.collapsed { cursor: pointer; }
.watch-desc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-weight: 700; font-size: 0.9rem; box-shadow: none; }
.watch-desc-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; box-shadow: none; }
.watch-desc-text a { color: var(--sb-blue); }
.watch-desc.collapsed .watch-desc-text { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.watch-desc.collapsed .watch-desc-legal { display: none; }
.watch-desc-toggle { margin-top: 6px; }
.watch-comments { box-shadow: none; }
.watch-comments > .row { margin-bottom: 8px; }
.watch-comments-title { font-size: 1.3rem; margin: 0; }
.watch-comments .composer { margin-bottom: 12px; }
.watch-comment-list, .shorts-comment-list { box-shadow: none; }
.watch-comment-list > .post, .shorts-comment-list > .post { padding: 10px 0; border-top: 1px dashed #999; box-shadow: none; }
.watch-related { min-width: 0; border: 2px ridge var(--sb-ridge); background: var(--sb-panel); padding: 0.75rem; }
.watch-related-title { font-size: 1.3rem; margin: 0 0 12px; }
@media (max-width: 1100px) {
  .watch { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .watch-bar { flex-direction: column; align-items: stretch; }
  .yt-card.compact { grid-template-columns: 140px minmax(0, 1fr); }
}

/* -- /shorts ----------------------------------------------------------------- */
/* Full-screen black behind a 9:16 box. A landscape video is squeezed to fill the box. */
.shorts-page { --shorts-top: 150px; position: relative; background: #000; color: #eee; box-shadow: none; }
.shorts-page a { color: #fff; }
.shorts-page a:hover { background: #333; }
.shorts-feed {
  height: calc(100vh - var(--shorts-top));
  height: calc(100dvh - var(--shorts-top));
  min-height: 420px; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; outline: none;
  box-shadow: none;
}
.shorts-feed::-webkit-scrollbar { display: none; }
.short {
  height: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; container-type: size;
  display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 14px 0; box-shadow: none;
}
.short-stage {
  position: relative; flex-shrink: 0; aspect-ratio: 9 / 16; width: min(calc(100cqw - 170px), calc(100cqh * 9 / 16));
  background: #000; overflow: hidden; border: 2px inset #555; cursor: pointer; user-select: none;
}
.short-stage video { position: absolute; inset: 0; width: 100%; height: 100%; box-shadow: none; }
.short-paused {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); pointer-events: none;
  padding: 4px 14px; background: #fff; color: #000; font-weight: 700; font-size: 1.1rem; border: 2px outset var(--sb-bevel);
}
.short-controls { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; gap: 6px; box-shadow: none; }
.short-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; z-index: 3; cursor: pointer; display: flex; align-items: flex-end; box-shadow: none; }
.short-progress-fill { height: 4px; width: 0; background: #ddd; box-shadow: none; }
.short-caption {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; padding: 8px 12px; cursor: default;
  background: rgba(0, 0, 0, 0.6); color: #eee; box-shadow: none;
}
.short-caption-head { display: flex; gap: 8px; align-items: baseline; box-shadow: none; }
.short-handle { font-weight: 700; }
.short-time { color: #bbb; font-size: 0.85rem; }
.short-caption-text {
  margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; box-shadow: none;
}
.short-caption.expanded .short-caption-text { display: block; max-height: 40vh; overflow: auto; }
.short-sound { margin-top: 4px; font-size: 0.8rem; color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: none; }

.short-rail { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 12px; width: 140px; flex-shrink: 0; box-shadow: none; }
.short-author { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 4px; box-shadow: none; }
.short-author .avatar { --size: 56px; }
.short-rail .rail-like { box-shadow: none; }
.short-rail .rail-like > span { display: flex !important; }
.short-rail .rail-like button, .short-rail > button { width: 100%; text-align: left; }
.short-rail .reaction-picker { left: auto; right: 0; bottom: calc(100% + 6px); flex-wrap: wrap; width: 220px; }

.shorts-nav { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 4; box-shadow: none; }
.short-end { align-items: center; }
.short-end-inner { text-align: center; max-width: 420px; padding: 24px; margin: auto; box-shadow: none; }
.short-end-inner h2 { color: #fff; }
.short-end-inner .row { box-shadow: none; }
.shorts-empty { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.shorts-empty .empty, .shorts-empty .empty p { color: #ccc; box-shadow: none; }

/* Comments: a side panel on wide screens, a sheet from the bottom on phones. */
.shorts-panel-host { box-shadow: none; }
.shorts-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); z-index: 6; display: flex; flex-direction: column;
  background: var(--sb-paper); color: var(--sb-text); border-left: 2px ridge var(--sb-ridge);
  transform: translateX(100%); transition: transform 1.2s linear;
}
.shorts-panel a { color: var(--sb-ink); }
.shorts-panel a:hover { background: #e4e2db; }
.shorts-panel.open { transform: none; }
.shorts-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 2px dashed #000; box-shadow: none; }
.shorts-panel-head h2 { font-size: 1.3rem; margin: 0; }
.shorts-panel-body { flex: 1; overflow-y: auto; padding: 0 14px; overscroll-behavior: contain; box-shadow: none; }
.shorts-panel-foot { padding: 10px 14px; border-top: 2px dashed #000; box-shadow: none; }
.shorts-page.with-panel .shorts-nav { right: 420px; }
@media (min-width: 1100px) {
  .shorts-page.with-panel .short { padding-right: 400px; }
}

@media (max-width: 640px) {
  .short { padding: 0; }
  .short-stage { width: min(100cqw, calc(100cqh * 9 / 16)); border: 0; }
  .short-rail { position: absolute; right: 6px; bottom: 110px; z-index: 3; width: auto; gap: 6px; padding: 0; align-items: flex-end; }
  .short-author { align-items: flex-end; }
  .short-author .avatar { --size: 44px; }
  .short-rail .rail-like button, .short-rail > button, .short-rail .short-follow { font-size: 0.8rem; padding: 0.2rem 0.5rem; width: auto; }
  .short-caption { padding-right: 12px; bottom: 12px; }
  .shorts-nav { display: none; }
  .shorts-panel {
    top: auto; left: 0; width: 100%; height: 72%; border-left: 0; border-top: 2px ridge var(--sb-ridge);
    transform: translateY(100%);
  }
  .shorts-panel.open { transform: none; }
}

/* -- /photos ----------------------------------------------------------------- */
.ig-toggle { display: inline-flex; gap: 4px; box-shadow: none; }
.ig-feed { max-width: 500px; margin: 0 auto; box-shadow: none; }
.ig-card { border: 2px ridge var(--sb-ridge); background: var(--sb-panel); margin: 0 0 1.2rem; padding-bottom: 10px; }
.ig-feed > .ig-card:nth-child(3n + 2) { transform: rotate(-0.4deg); }
.ig-feed > .ig-card:nth-child(5n) { transform: rotate(0.3deg); }
.ig-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; box-shadow: none; }
.ig-head .grow { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 0.9rem; box-shadow: none; }
.ig-head time { white-space: nowrap; }
.ig-handle { font-weight: 700; color: var(--sb-ink); display: inline-flex; align-items: baseline; gap: 4px; }
/* Square carousel from components/media.js: non-square photos are stretched into it. */
.ig-media { position: relative; border-top: 2px inset var(--sb-bevel); border-bottom: 2px inset var(--sb-bevel); box-shadow: none; }
.ig-media .carousel img { cursor: default; }
.ig-actions { display: flex; align-items: center; gap: 6px; padding: 10px 10px 4px; flex-wrap: wrap; box-shadow: none; }
.ig-actions .spacer { flex: 1; box-shadow: none; }
.ig-likes { margin: 6px 10px 0; }
.ig-caption { padding: 6px 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: none; }
.ig-caption a { color: var(--sb-blue); }
.ig-caption .ig-handle { color: var(--sb-ink); }
.ig-caption.clamped { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ig-more { margin: 4px 10px 0; }
.ig-comments { display: block; padding: 6px 10px 0; color: var(--sb-muted); font-size: 0.9rem; box-shadow: none; }

.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; box-shadow: none; }
.ig-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #000; border: 2px inset var(--sb-bevel); }
.ig-tile img { width: 100%; height: 100%; display: block; box-shadow: none; }
.ig-tile-multi { position: absolute; top: 4px; right: 4px; background: #fff; color: #000; font-size: 0.7rem; padding: 0 4px; }
.ig-tile-hover {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: #fff; font-weight: 700; font-size: 0.85rem; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 1.2s linear;
}
.ig-tile:hover .ig-tile-hover, .ig-tile:focus-visible .ig-tile-hover { opacity: 1; }
.ig-tile:hover { background: #000; }
@media (max-width: 640px) {
  .ig-grid { gap: 3px; }
  .ig-tile { border-width: 1px; }
}

/* Comment composers on the watch page and in the shorts panel take the full width. */
.watch-comments .composer .grow textarea, .shorts-panel .composer .grow textarea { width: 100%; }

/* -- /upload ----------------------------------------------------------------- */
.studio { max-width: 1080px; box-shadow: none; }
.studio-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  min-height: 280px; padding: 28px 16px; border: 2px dashed #000; background: var(--sb-panel); cursor: pointer;
  transition: background-color 1.2s linear;
}
:root[data-theme='dark'] .studio-drop { border-color: #777; }
.studio-drop-title { font-size: 1.4rem; }
.studio-drop.over { background: #dcdbd6; }
.studio-panel { box-shadow: none; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; box-shadow: none; }
.studio-grid:has(.studio-side.hidden) { grid-template-columns: minmax(0, 1fr); }
.studio-main { min-width: 0; box-shadow: none; }
.studio-status .row { gap: 8px; box-shadow: none; }
.studio-filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-progress { height: 10px; margin: 10px 0 6px; }
.studio-status-text { font-size: 0.85rem; color: var(--sb-muted); box-shadow: none; }
.studio-status.failed { border: 4px double #111; }
.studio-form { margin-top: 8px; }
.studio-form .field { position: relative; }
.studio-form .field .counter { position: absolute; right: 0; top: 0; }
.studio-side { border: 2px ridge var(--sb-ridge); background: var(--sb-panel); padding: 0.75rem; min-width: 0; }
.studio-side h3 { margin: 0 0 6px; }
/* Previews use the published shapes: 16:9 for a video, 9:16 for a short. */
.studio-preview-video, .studio-poster { position: relative; background: #000; aspect-ratio: 16 / 9; width: 100%; margin-bottom: 12px; border: 2px inset var(--sb-bevel); }
.studio-side.vertical .studio-preview-video, .studio-side.vertical .studio-poster { aspect-ratio: 9 / 16; width: 60%; }
.studio-preview-video video, .studio-poster img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; box-shadow: none; }
.studio-poster { display: flex; align-items: center; justify-content: center; }
.studio-poster .muted, .studio-poster .loading { color: #bbb; }
.studio-notes { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; box-shadow: none; }
.studio-notes li { padding: 6px 8px; border: 2px dashed #000; background: var(--sb-paper); }
.studio-notes li .btn-small { margin-top: 4px; }
.studio-photos { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; box-shadow: none; }
.studio-photo { min-width: 0; border: 2px inset var(--sb-bevel); background: var(--sb-paper); padding: 4px; }
.studio-photo.error { border: 4px double #111; }
/* Photos are shown square, as they will be published: stretched, not cropped. */
.studio-photo-box { position: relative; aspect-ratio: 1; background: #000; box-shadow: none; }
.studio-photo-box img { width: 100%; height: 100%; display: block; box-shadow: none; }
.studio-photo-box .progress-bar { position: absolute; left: 4px; right: 4px; bottom: 4px; }
.studio-photo-label { font-size: 0.8rem; margin: 4px 0; box-shadow: none; }
.studio-photo-tools { display: flex; flex-wrap: wrap; gap: 4px; box-shadow: none; }
@media (max-width: 860px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-side { order: -1; }
  .studio-side.vertical .studio-preview-video, .studio-side.vertical .studio-poster { width: 50%; }
}
@media (max-width: 640px) {
  .studio-drop { min-height: 200px; }
  .studio-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}