/* Content-first viewer. Visual controls are compact; touch targets remain at least 44px. */
:root { --tabbar-h: 48px; }
.tabbar a svg.i { width: 22px; height: 22px; }
.tabbar a { font-size: 10px; gap: 1px; }
.tabbar .tab-create { min-height: 44px; }
.feed-top { padding: calc(var(--safe-t) + 4px) 8px 12px; }
.feed-tabs a { min-height: 44px; display: inline-flex; align-items: center; }
.feed-top-right { display: flex; }
.reel[data-fill="true"] .media-slot > .media { object-fit: cover; }
.reel[data-fill="false"] .media-slot > .media { object-fit: contain; }

.backdrop { filter: blur(28px) brightness(.23); }
.stage::after { height: 150px; background: linear-gradient(transparent,rgba(0,0,0,.68)); }
.caption { left: max(14px,env(safe-area-inset-left)); right: 74px; bottom: 24px; gap: 3px; }
.cap-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.cap-author { font-size: 14px; min-height: 28px; }
.library-label { color: #ccc; font-size: 10px; letter-spacing: .02em; }
.cap-details { display: flex; align-items: center; gap: 8px; text-align: left; max-width: 100%; min-height: 44px; }
.cap-title { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.details-label { color: #ccc; font-size: 11px; white-space: nowrap; display: inline-flex; align-items: center; }
.lesson-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; min-height: 32px; }
.lesson-description { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.lesson-details { display: grid; gap: 12px; }
.stage-tools { top: calc(var(--safe-t) + 60px); right: max(6px,env(safe-area-inset-right)); gap: 2px; }
.tool { width: 44px; height: 44px; background: rgba(0,0,0,.38); }
.tool svg.i { width: 20px; height: 20px; }
.fit-control { font-size: 11px; font-weight: 700; }
.actions { right: max(4px,env(safe-area-inset-right)); gap: 8px; bottom: 28px; }
.act { min-width: 48px; min-height: 48px; font-size: 11px; gap: 1px; }
.act svg.i { width: 28px; height: 28px; }
.act-avatar { min-width: 44px; min-height: 44px; }
.act-avatar .avatar { --s: 40px; }
.follow-dot { width: 28px; height: 28px; margin-left: -14px; bottom: -12px; }
.act-author { margin-bottom: 10px; }
.scrub { height: 24px; }
.progress { height: 24px; }
.clear-control { position: absolute; z-index: 9; top: calc(var(--safe-t) + 58px); left: 12px; min-height: 44px; padding: 0 12px; border-radius: 24px; background: rgba(0,0,0,.48); color: #e9e9e9; font-size: 11px; border: 1px solid rgba(255,255,255,.14); }
.clear-view .caption,.clear-view .actions,.clear-view .stage-tools,.clear-view .feed-top,.clear-view .scrub,.clear-view .sound-hint { visibility: hidden; pointer-events: none; }
.clear-view .stage::after { display: none; }

.clear-view .clear-control { top: calc(var(--safe-t) + 6px); }
.profile { overflow: visible; }
.profile .profile-top { position: sticky; top: 0; z-index: 12; margin-top: calc(-1 * var(--safe-t) - 10px); padding-top: var(--safe-t); min-height: calc(48px + var(--safe-t)); background: #000; }
.profile .p-tabs { position: sticky; top: calc(48px + var(--safe-t)); z-index: 11; margin-top: 0; min-height: 48px; background: rgba(0,0,0,.97); backdrop-filter: blur(16px); }
.profile #p-grid { min-height: calc(100dvh - 96px - var(--safe-t) - var(--safe-b)); }
.settings .sub-head { position: sticky; top: 0; padding-top: var(--safe-t); z-index: 12; background: #000; margin-top: calc(-1 * var(--safe-t) - 10px); min-height: calc(52px + var(--safe-t)); }
@media (min-width:768px) {
  :root { --tabbar-h: 0px; }
  .feed-page { grid-template-rows: 52px 1fr; }
  .feed-top { padding: 0 20px; }
  .reel { padding-bottom: 8px; gap: 16px; }
  .stage { border-radius: 12px; max-width: calc(100vw - var(--rail-w) - 140px); }
  .stage-tools { top: 10px; bottom: auto; left: auto; right: 8px; padding: 0; opacity: 1; flex-direction: row; }
  .stage-tools .time,.stage-tools .grow { display: none; }
  .caption { bottom: 24px; right: 16px; }

  .clear-control { top: 60px; }
  .clear-view .clear-control { top: 8px; }

  .clear-view { grid-template-rows: 0px 1fr; }
  .actions { gap: 12px; }
  .act svg.i { width: 46px; height: 46px; padding: 10px; }
}
@media (max-height:640px) and (max-width:767px) {
  .actions { gap: 2px; bottom: 22px; }
  .act { min-height: 44px; }
  .stage-tools { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) { .reels { scroll-behavior: auto; } }

/* Keep sticky chrome opaque all the way to the profile's edges. */
.profile .profile-top { margin-inline: -16px; padding-inline: 16px; }
@media (max-width:767px) { .stage-tools .only-wide { display: none; } }
@media (max-height:500px) and (min-width:768px) {
  .actions { display: grid; grid-template-columns: repeat(2,48px); gap: 8px; }
  .act-author { grid-column: span 2; justify-self: center; }
  .stage-tools { gap: 0; right: 0; }
  .stage-tools .only-wide { display: none; }
  .caption { left: 8px; right: 8px; bottom: 18px; }
  .cap-author { font-size: 11px; }
  .cap-details { min-height: 32px; }
  .library-label { display: none; }

  .feed-page { grid-template-rows: 44px 1fr; }
}