/* App composition only. Visual components live in system-primitives.css. */
body:has(#app-content:not([hidden])) { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
#app-content { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: calc(2 * var(--spacing)); }
.app-header { flex-shrink: 0; }
.app-header { position: relative; z-index: var(--layer-raised); display: grid; grid-template-columns: 1fr minmax(200px,var(--size-search-max)) 1fr; align-items: center; gap: calc(4 * var(--spacing)); padding: calc(4 * var(--spacing)) calc(6 * var(--spacing)); }
.app-header .brand { justify-self: start; }
.app-header .search-field { min-height: var(--control-md); }
.header-actions { grid-column: 3; display: flex; justify-content: flex-end; align-items: center; gap: var(--spacing); }
.account-menu { width: 240px; }
.account-menu #session-email { display: block; padding: calc(2 * var(--spacing)) calc(3 * var(--spacing)); overflow-wrap: anywhere; }
.library-canvas { position: relative; z-index: 0; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; margin: 0 calc(2 * var(--spacing)); padding: var(--canvas-padding); background: var(--color-surface-1); border-radius: var(--radius-card); }
.library-status { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: calc(2 * var(--spacing)); padding: calc(3 * var(--spacing)) 0; }
.library-status:has(#status:empty):has(#retry[hidden]) { display: none; }
#grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(400px,1fr)); grid-auto-rows: 1px; align-items: start; column-gap: calc(4 * var(--spacing)); row-gap: 0; }


#load-trigger { height: calc(4 * var(--spacing)); }
.load-feedback { text-align: center; }
.load-feedback p { margin: 0; }
.load-feedback:has(p:empty):has(button[hidden]) { display: none; }
.empty-state { text-align: center; color: var(--color-fg-secondary); padding: calc(16 * var(--spacing)) calc(4 * var(--spacing)); }
.reference-dialog { padding: 0; max-width: none; width: calc(100vw - 20 * var(--spacing)); max-height: none; background: transparent; box-shadow: none; overflow: hidden; margin: auto; }
.dialogbody { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: calc(3 * var(--spacing)); height: calc(100dvh - 20 * var(--spacing)); }
.imagearea { --preview-control-inset: calc(4 * var(--spacing)); --preview-control-gap: calc(6 * var(--spacing)); position: relative; display: grid; grid-template-rows: minmax(0,1fr) auto; min-width: 0; min-height: 0; overflow: hidden; padding: calc(var(--preview-control-inset) + var(--control-md) + 2 * var(--spacing) + var(--preview-control-gap)) var(--preview-control-inset); background: var(--color-surface-1); border-radius: var(--radius-card); }
.preview-media { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; }
.preview-media > img,.preview-media > video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.preview-sidebar { --panel-padding: calc(5 * var(--spacing)); position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: var(--panel-padding); background: var(--color-surface-1); border-radius: var(--radius-card); }
.preview-navigation { position: absolute; z-index: var(--layer-floating); top: var(--preview-control-inset); left: var(--preview-control-inset); display: flex; gap: calc(2 * var(--spacing)); }
.zoom-controls { position: absolute; z-index: var(--layer-floating); bottom: var(--preview-control-inset); left: 50%; transform: translateX(-50%); }
.preview-media[data-zoomable="true"] { touch-action: none; }
.preview-media[data-zoomed="true"] { cursor: grab; }
.preview-media[data-zoomable="true"] img { cursor: zoom-in; }
.preview-media[data-zoomed="true"] img { cursor: zoom-out; }
.preview-media[data-panning="true"],.preview-media[data-panning="true"] img { cursor: grabbing; }
.preview-media img { user-select: none; transform-origin: center; }
.details { flex: 1; min-height: 0; overflow-y: auto; overflow-wrap: anywhere; }
.preview-actions { flex: none; display: grid; gap: calc(2 * var(--spacing)); padding-top: calc(3 * var(--spacing)); background: var(--color-surface-1); }
.preview-actions p { margin: 0; }
.preview-actions p:empty { display: none; }
.details h2 { margin: 0 0 calc(3 * var(--spacing)); }
.reference-metadata,.tagrow { display: flex; flex-wrap: wrap; gap: calc(2 * var(--spacing)); }
.reference-metadata { margin-bottom: calc(5 * var(--spacing)); }
.reference-metadata > [role="listitem"] { text-transform: capitalize; }
.source-list { display: grid; gap: calc(3 * var(--spacing)); margin-top: calc(6 * var(--spacing)); }
.reference-actions { position: absolute; z-index: var(--layer-floating); top: var(--preview-control-inset); right: var(--preview-control-inset); }
.preview-menu { position: fixed; inset: auto; margin: 0; min-width: 180px; }
.auth-panel { max-width: 400px; padding: calc(8 * var(--spacing)); margin: 10vh auto; background: var(--color-surface-1); border-radius: var(--radius-card); }
.auth-panel > p { margin-top: calc(2 * var(--spacing)); }
.auth-panel form { margin-top: calc(6 * var(--spacing)); }
.auth-panel .button { width: 100%; }
@media (max-width:1100px) { #grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) {
 .app-header { grid-template-columns: 1fr auto; padding: calc(4 * var(--spacing)); gap: calc(3 * var(--spacing)); }
 .app-header .mega-search { grid-row: 2; grid-column: 1 / -1; max-width: var(--size-search-max); }
 .header-actions { grid-column: 2; grid-row: 1; }
 #grid { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: calc(3 * var(--spacing)); }
 .library-status { display: block; }
 #status { margin-top: var(--spacing); }
 .dialogbody { grid-template-columns: 1fr; grid-template-rows: minmax(0,1.2fr) minmax(0,1fr); height: calc(100dvh - 4 * var(--spacing)); gap: calc(2 * var(--spacing)); }
 .reference-dialog { width: calc(100vw - 4 * var(--spacing)); }
 .imagearea { --preview-control-inset: calc(3 * var(--spacing)); --preview-control-gap: calc(4 * var(--spacing)); }
 .preview-sidebar { --panel-padding: calc(4 * var(--spacing)); padding: var(--panel-padding); }

 .preview-actions { grid-template-columns: 1fr 1fr; }
 .preview-actions p { grid-column: 1 / -1; }
 .auth-panel { margin: calc(8 * var(--spacing)) calc(4 * var(--spacing)); max-width: none; padding: calc(6 * var(--spacing)); }
}
@media (max-width:380px) {
 #grid { grid-template-columns: 1fr; }
 .zoom-controls { gap: 0; }
 .zoom-controls .button { padding-inline: calc(2 * var(--spacing)); }
}

.collection-list:not(:empty) { display: grid; gap: calc(3 * var(--spacing)); margin-top: calc(5 * var(--spacing)); }

.app-header .mega-search { justify-self: center; }
@media (min-width:721px) and (max-width:900px) { .app-header { grid-template-columns: 1fr minmax(200px,360px) 1fr; } }

/* First-load placeholders use the same columns and gaps as the live masonry. */
.gallery-skeleton { display: grid; grid-template-columns: repeat(auto-fill,minmax(400px,1fr)); gap: calc(4 * var(--spacing)); overflow: hidden; }
.gallery-skeleton-column { display: flex; flex-direction: column; gap: calc(4 * var(--spacing)); }
.gallery-skeleton .skeleton { width: 100%; height: auto; max-width: none; }
.gallery-skeleton-column:nth-child(2) .skeleton { animation-delay: calc(-1 * var(--duration-pulse) / 3); }
.gallery-skeleton-column:nth-child(3) .skeleton { animation-delay: calc(-2 * var(--duration-pulse) / 3); }
.reference { --card-reveal-order: 0; }
.reference .visual { position: relative; }
.reference[data-ready="false"] .visual::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-surface-3); animation: pulse var(--duration-pulse) ease-in-out infinite alternate; }
.reference .visual > img { opacity: 0; transition: opacity var(--duration-image-reveal) var(--ease-out); transition-delay: calc(var(--card-reveal-order,0) * var(--delay-image-reveal)); }
.reference[data-ready="true"] .visual > img { opacity: 1; }
@media (max-width:720px) {
 .gallery-skeleton,.gallery-skeleton-column { gap: calc(3 * var(--spacing)); }
}
@media (prefers-reduced-motion:reduce) {
 .reference .visual > img { transition-duration: var(--duration-press); transition-delay: 0ms; }
 .reference[data-ready="false"] .visual::before { animation: none; }
}

.reference[data-ready="false"] .media-play { opacity: 0; }

/* The loading surface stays still while the full-size image decodes. */
.preview-media { position: relative; }
.preview-image-placeholder { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--duration-image-reveal) var(--ease-out); }
.preview-image-placeholder .skeleton { width: 100%; max-width: none; height: 100%; }
.preview-media[data-image-state="loading"] .preview-image-placeholder { opacity: 1; }
.preview-media > #original { opacity: 0; transition: opacity var(--duration-image-reveal) var(--ease-out); }
.preview-media[data-image-state="ready"] > #original { opacity: 1; }
.preview-media:not([data-image-state="ready"]) > #original { transition: none; }
@starting-style { .preview-media[data-image-state="ready"] > #original { opacity: 0; } }
@media (prefers-reduced-motion:reduce) {
 .preview-media > #original,.preview-image-placeholder { transition-duration: var(--duration-press); }
}

/* Exiting tiles sit outside masonry so survivors can settle into their places. */
.gallery-transition-layer { position: absolute; inset: 0; pointer-events: none; z-index: var(--layer-raised); }
.gallery-transition-layer > .reference { position: absolute; margin: 0; pointer-events: none; }