/* album pages: album / travel / link share, library, shared with me */

.album-page { grid-template-columns: minmax(0, 1fr); }
.album-page > * { min-width: 0; }

.album-page .maplibregl-ctrl-top-right { top: calc(var(--topbar) + 6px); transition: right 0.2s; }
.album-page.panel-open .maplibregl-ctrl-top-right { right: 450px; }
.album-message { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--topbar) + 20px) 16px 20px; z-index: 4; }
.album-message .empty { background: var(--bg-elev); max-width: 460px; }

.album-title { max-width: min(440px, calc(100vw - 28px)); }
.album-page.panel-open .album-title { max-width: min(440px, calc(100vw - 500px)); }
.album-title .title-flags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.album-title .meta span { display: inline-flex; align-items: center; gap: 4px; }
.album-description { margin: 8px 0 0; color: var(--text-dim); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.album-title .title-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.album-title .privacy-chip { padding: 4px 10px; }
.album-removed { margin-top: 8px; }
.more-menu .dropdown { left: 0; right: auto; }
.dropdown .danger-item { color: var(--danger); }

.map-toggles { left: 12px; bottom: 34px; display: flex; gap: 6px; }
.map-toggles .chip { background: var(--glass); backdrop-filter: blur(10px); }
.album-notice { left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; }
.notice-card { display: flex; gap: 12px; align-items: center; padding: 14px 18px; }
.notice-card > svg { width: 28px; height: 28px; color: var(--accent); }

/* viewer */
.viewer .viewer-photo { position: relative; min-height: 220px; aspect-ratio: 3 / 2; }
.viewer-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; max-height: none; }
.viewer-photo .vw-thumb { filter: blur(6px); transform: scale(1.03); }
.viewer-photo .vw-full { opacity: 0; transition: opacity 0.25s; }
.viewer-photo.loaded .vw-full { opacity: 1; }
.viewer-photo.loaded .vw-thumb { visibility: hidden; }
.viewer-photo.is-offline .vw-thumb { filter: none; transform: none; }
.vw-offline { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; align-items: center; font-size: 12px;
  color: #fff; background: rgba(0,0,0,.55); padding: 6px 10px; border-radius: 10px; }
.viewer-meta .where { color: var(--text-dim); font-size: 13px; display: flex; align-items: center; gap: 4px; }
.viewer-meta .caption { font-size: 15px; }
.vw-flags { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.viewer-nav .counter { align-self: center; font-size: 13px; }
.vw-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.photo-grid .thumb { border: 0; padding: 0; }

/* lightbox */
.lightbox .lb-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.lightbox .lb-photo { position: absolute; inset: 0; background: transparent; border-radius: 0; cursor: default; aspect-ratio: auto; }
.lightbox .lb-photo img { object-fit: contain; }
.lightbox .lb-counter { position: absolute; top: 24px; left: 24px; color: #ccc; font-size: 14px; }

/* timeline */
.ps-timeline .tl-thumb .check { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff;
  background: rgba(0,0,0,.35); display: none; place-items: center; }
.ps-timeline .tl-thumb .check svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.ps-timeline.selecting .tl-thumb .check { display: grid; }
.ps-timeline .tl-thumb.selected .check { background: var(--glacier); border-color: var(--glacier); }
.ps-timeline .tl-thumb.selected .check svg { opacity: 1; }
.ps-timeline .tl-thumb.selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--glacier) 40%, transparent); }
.ps-timeline .tl-thumb img:not([src]) { visibility: hidden; }

.select-bar { max-width: calc(100vw - 24px); }
.select-bar .sel-count { margin-right: 6px; white-space: nowrap; }

/* pick a place */
.pick-bar { left: 50%; transform: translateX(-50%); top: calc(var(--topbar) + 12px); width: min(460px, calc(100vw - 24px)); padding: 12px 14px; z-index: 9; display: grid; gap: 10px; }
.album-page.picking .album-title { display: none; }
.album-page.picking .map { cursor: crosshair; }
.album-page.picking .maplibregl-canvas { cursor: crosshair; }
.pick-head { display: flex; gap: 10px; align-items: flex-start; }
.pick-head > svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.pick-search { position: relative; }
.pick-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 2; overflow: hidden; }
.pick-results:empty { display: none; }
.pick-results button { display: flex; gap: 8px; align-items: center; width: 100%; padding: 8px 10px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pick-results button:hover { background: var(--bg-hover); }
.pick-empty { padding: 8px 10px; }
.pick-marker { color: var(--accent); filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.pick-marker svg { width: 40px; height: 40px; fill: var(--accent); stroke: #fff; }

.share-link .link-row { display: flex; gap: 8px; }
.share-link input { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

/* album cards */
.album-card .cover img.fade-in { opacity: 0; transition: opacity 0.3s; position: absolute; inset: 0; }
.album-card .cover img.fade-in.shown { opacity: 1; }

/* library */
.usage-card { margin-bottom: 8px; }
.usage-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 22px; align-items: center; }
.usage-extra { display: grid; gap: 4px; font-size: 13px; color: var(--text-dim); }
.usage-extra svg { vertical-align: -2px; }
.library-map-box { position: relative; height: 460px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.library-map-box .map { position: absolute; inset: 0; }
.library-map-box .side-panel { top: 10px; width: min(360px, calc(100% - 20px)); }
.library-map-box .maplibregl-ctrl-top-right { top: 0; }
.library-count { left: 12px; top: 12px; padding: 6px 12px; font-size: 13px; }
.library-empty { margin-top: 24px; }

/* shared */
.invite-card { display: flex; gap: 14px; align-items: center; color: var(--text); margin-bottom: 10px; }
.invite-card:hover { text-decoration: none; border-color: var(--accent); }
.invite-card > svg { width: 26px; height: 26px; color: var(--accent); }
.invite-card > div { flex: 1; }
.owner-head { display: flex; align-items: center; gap: 10px; }

@media (max-width: 760px) {
  .album-page.panel-open .maplibregl-ctrl-top-right { right: 0; }
  .album-page.panel-open .album-title { display: none; }
  .album-title { padding: 10px 12px; }
  .album-title .title-tools .btn span, .album-description { display: none; }
  .usage-grid { grid-template-columns: 1fr; }
  .map-toggles { bottom: 30px; }
  .select-bar { bottom: 8px; padding: 8px; }
  .library-map-box { height: 380px; }
}

/* the photo shown in the viewer: its pulsing ring stays above the thumbnail markers */
.maplibregl-marker:has(.ps-pulse) { z-index: 5; }