/* Local album: responsive originals remain separate from all viewing copies. */
[hidden] { display: none !important; }
.collection-actions { display: flex; align-items: center; gap: 14px; }
.download-all { min-height: 44px; background: none; border: 0; color: #b3bcc3; font-size: var(--text-ui); padding: 8px; }
.chapter-nav { display: flex; align-items: center; justify-content: flex-start; gap: 12px; font-size: var(--text-meta); color: #b3bcc3; margin-bottom: 26px; }
.chapter-nav select { font: inherit; color: #e3e7ea; background: #23272c; padding: 11px 14px; border: 1px solid #ffffff20; border-radius: 8px; min-height: 44px; max-width: 240px; }
.chapter-nav select:focus-visible { outline: 2px solid #e3e7ea; outline-offset: 4px; }
body[data-album] .gallery:not([data-view=grid]):not([data-view=feed]) .photo-card { grid-column: auto; grid-row: auto; }
body[data-album] .gallery:not([data-view=grid]):not([data-view=feed]) .photo-card.tall { grid-row: span 2; }
body[data-album] .gallery:not([data-view=grid]):not([data-view=feed]) .photo-card.wide { grid-column: span 2; }
.photo-card { scroll-margin-top: 105px; }
.feed-context { display: block; color: #a4a9b1; font-size: var(--text-meta); margin-top: 5px; letter-spacing: 0; }
.viewer-description { display: flex; flex-direction: column; gap: 6px; }
#photoDetails { color: #a4a9b1; font-size: var(--text-meta); }
.gallery[data-view=feed] .photo-actions { bottom: 84px; }
.ribbon-section { margin: 0 0 48px; padding-block: 8px; }
.ribbon-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(24px,6vw,96px) 16px; color: #a9b2b9; font-size: var(--text-ui); }
.ribbon-heading button { color: #d8dfe4; background: transparent; border: 1px solid #ffffff24; border-radius: 100px; min-height: 44px; padding: 8px 14px; font-size: var(--text-meta); }
.ribbon-viewport { overflow-x: auto; scrollbar-width: none; touch-action: pan-x pan-y; cursor: grab; user-select: none; overscroll-behavior-x: contain; mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.ribbon-viewport::-webkit-scrollbar { display: none; }
.ribbon-viewport.is-dragging { cursor: grabbing; }
.ribbon-track { display: flex; gap: 12px; width: max-content; padding: 4px 0; }
.ribbon-photo { display: block; flex: 0 0 auto; height: 238px; width: calc(238px * var(--ratio)); min-width: 90px; max-width: 440px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #252a2e; cursor: inherit; }
.ribbon-photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: filter 180ms ease; }
.ribbon-photo:focus-visible { outline-offset: -4px; }
@media(hover:hover) and (pointer:fine) { .ribbon-photo:hover img { filter: brightness(1.08); } .download-all:hover { color: #fff; } }
@media(max-width:760px) {
  .collection-heading { flex-wrap: wrap; }
  .collection-actions { gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
  .collection-heading>span { flex: 1; }
  .download-all { font-size: 12px; }
  .ribbon-section { margin-bottom: 32px; }
  .ribbon-heading { padding-inline: 24px; font-size: 12px; }
  .ribbon-photo { height: 190px; width: calc(190px * var(--ratio)); max-width: 320px; }
  .ribbon-track { gap: 8px; }
  body[data-album] .gallery:not([data-view=grid]):not([data-view=feed]) .photo-card.wide { grid-column: span 2; }
  .chapter-nav { margin-bottom: 22px; }
  #photoDetails { font-size: 11px; }
}

.album-home { margin-left: auto; padding: 12px 4px; color: #e3e7ea; text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:760px) { .chapter-nav { flex-wrap: wrap; gap: 8px; } .album-home { margin-left: 0; } }

.back-to-top { position: fixed; right: max(22px,env(safe-area-inset-right)); bottom: max(24px,env(safe-area-inset-bottom)); z-index: 9; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid #ffffff30; border-radius: 50%; color: #e8ecef; background: #292e33ed; box-shadow: 0 6px 20px #0004; }
.back-to-top svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body:has(.selection-bar:not([hidden])) .back-to-top { bottom: 100px; }
body.viewer-open .back-to-top { visibility: hidden; }
@media(max-width:760px) { .back-to-top { right: 14px; bottom: max(18px,env(safe-area-inset-bottom)); } body:has(.selection-bar:not([hidden])) .back-to-top { bottom: 152px; } }
@media(hover:hover) { .back-to-top:hover { background: #41484f; } }