/* 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-block: calc(2 * var(--spacing)); background: var(--color-header); }
.app-header { flex-shrink: 0; background: var(--color-header); }
.app-header { position: relative; z-index: var(--layer-raised); display: grid; grid-template-columns: minmax(360px,1fr) minmax(200px,640px) minmax(360px,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: calc(2 * var(--spacing)); }
.library-views { display: flex; align-items: center; gap: calc(2 * var(--spacing)); flex: none; margin-right: calc(2 * var(--spacing)); }
.account-menu { width: 240px; }
.admin-menu { width: 200px; }
.account-menu #session-email { display: block; padding: calc(2 * var(--spacing)) calc(3 * var(--spacing)); overflow-wrap: anywhere; }
.library-canvas { box-shadow: var(--shadow-content); 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-library-canvas); 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; }
.library-canvas:has(> #empty:not([hidden])) { display: grid; grid-template-rows: 1fr; }
.library-canvas:has(> #empty:not([hidden])) > #grid { display: none; }
.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; }
/* The panels handle spatial motion; the shared dialog still fades its backdrop. */
.reference-dialog[open] { transform: none; }
.dialogbody { display: grid; grid-template-columns: minmax(0,1fr) 400px; 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); }
.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:empty { display: none; }
[data-notes]:not(:empty) { margin-top: calc(6 * var(--spacing)); }
.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; }
@media (max-width:1100px) { #grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:1000px) {
 .app-header { grid-template-columns: 1fr repeat(5,auto); padding: calc(4 * var(--spacing)); gap: calc(3 * var(--spacing)) calc(2 * var(--spacing)); }
 .app-header .header-identity { grid-row: 1; grid-column: 1; }
 .app-header .mega-search { grid-row: 3; grid-column: 1 / -1; max-width: var(--size-search-max); }
 .header-actions { display: contents; }
 .header-actions > details,.header-actions > button { grid-row: 1; }
 .library-views { grid-column: 1 / -1; grid-row: 2; margin-right: 0; }
}
@media (max-width:720px) {
 #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); }

}
@media (max-width:380px) {
 #grid { grid-template-columns: 1fr; }
 .zoom-controls { gap: 0; }
 .zoom-controls .button { padding-inline: calc(2 * var(--spacing)); }
}
@media (max-width:480px) {
 .library-views { margin-right: 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; }

.reference { --card-reveal-order: 0; }
.reference .visual { position: relative; }

/* A quiet fixed surface avoids invented tile proportions jumping into real cards. */
.gallery-skeleton { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
/* The content gutter supplies the remaining 8px below the controls. */
.app-header { min-height: 64px; padding-bottom: calc(2 * var(--spacing)); }
body:has(.app-header[data-loading]):not(:has(#app-content:not([hidden])))::after { content: ""; position: fixed; top: calc(64px + 2 * var(--spacing)); bottom: calc(2 * var(--spacing)); left: calc(2 * var(--spacing)); right: calc(2 * var(--spacing)); background: var(--color-library-canvas); border-radius: var(--radius-card); pointer-events: none; }
@media (max-width:1000px) {
 .app-header[data-loading] { grid-template-rows: 32px 32px 40px; }
 body:has(.app-header[data-loading]):not(:has(#app-content:not([hidden])))::after { top: calc(152px + 2 * var(--spacing)); }
}
.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; }

.header-identity { display: flex; align-items: center; gap: calc(2 * var(--spacing)); min-width: 0; }
.library-stats { position: relative; top: calc(.5 * var(--spacing)); display: inline-block; font-weight: 400; color: var(--color-fg-tertiary); font-size: var(--text-body-lg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.library-stat-number { font-weight: inherit; }
.library-stat-digit { --digit-index: 0; display: inline-block; transform-origin: 50% 80%; }
.library-stat-current { display: inline-block; }
.library-stat-current[data-enter] .library-stat-digit { animation: library-stat-digit-in var(--duration-stat-enter) var(--ease-out) both; animation-delay: calc(var(--digit-index) * var(--delay-stat-digit)); }
.library-stat-current[data-enter] .library-stat-label { animation: library-stat-label-in var(--duration-stat-enter) var(--ease-out) both; }
.library-stat-outgoing { position: absolute; left: 0; top: 0; pointer-events: none; animation: library-stat-exit var(--duration-fast) var(--ease-out) both; }
.app-header { --size-search-collapsed: 280px; --size-search-max: 480px; --header-search-height: 40px; }
.app-header .mega-search .search-field { min-height: var(--header-search-height); }
@keyframes library-stat-digit-in { from { opacity: 0; filter: blur(3px); transform: perspective(180px) translateY(.35em) rotateX(-45deg) scale(.92); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes library-stat-label-in { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: blur(0); } }
@keyframes library-stat-exit { to { opacity: 0; filter: blur(2px); transform: translateY(-.2em); } }
@media (max-width:600px) { .header-identity { gap: calc(2 * var(--spacing)); } .library-stats { display: none; } }
@media (prefers-reduced-motion:reduce) { .library-stat-current[data-enter] .library-stat-digit,.library-stat-current[data-enter] .library-stat-label { animation: none; } .library-stat-outgoing { display: none; } }

/* The page shell stays fixed; only decoded content fades in. */
.app-header,.library-canvas { animation: none; }
.app-header[data-loading] .header-actions,body:has(.app-header[data-loading]) > #theme-menu { visibility: hidden; }

.app-header[data-loading]::before,.app-header[data-loading]::after { content: ""; position: absolute; top: 20px; height: 32px; border-radius: var(--radius-sm); background: var(--color-surface-3); pointer-events: none; }
.app-header[data-loading]::before { position: static; grid-column: 2; grid-row: 1; justify-self: center; width: 100%; max-width: var(--size-search-collapsed); height: var(--header-search-height); border-radius: var(--radius-pill); }
.app-header[data-loading]::after { right: calc(6 * var(--spacing)); width: 200px; }
@media (max-width:1000px) {
 .app-header[data-loading]::before { grid-column: 1 / -1; grid-row: 3; max-width: var(--size-search-max); }
 .app-header[data-loading]::after { top: 60px; left: calc(4 * var(--spacing)); right: auto; width: 220px; }
}

/* The loading canvas is already visible: never fade it out and reveal it again. */
.app-header:not([data-loading]) { animation: page-appear var(--duration-page-appear) var(--ease-out) backwards; }

@keyframes page-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion:reduce) {
 .app-header:not([data-loading]),body:has(.app-header:not([data-loading])) .library-canvas { animation: none; }
}

.reference-attributes { margin: calc(6 * var(--spacing)) 0; }
.reference-attributes h3 { margin: 0 0 calc(3 * var(--spacing)); font-weight: 500; }
.reference-attribute-options { display: flex; flex-wrap: wrap; gap: calc(2 * var(--spacing)); }
.reference-attribute-options[aria-busy="true"] .attribute-pill:disabled { opacity: 1; cursor: progress; }
.reference-attributes [role="status"] { margin: calc(2 * var(--spacing)) 0 0; }
.reference-attributes [role="status"]:empty { display: none; }

/* Image details are grouped by intent, provenance, then optional metadata. */
.reference-sections { display: flex; flex-direction: column; gap: 24px; }
.reference-heading h2 { margin-bottom: 0; }
.reference-heading .reference-social { margin-top: calc(3 * var(--spacing)); }
.reference-taste { display: flex; flex-direction: column; gap: calc(4 * var(--spacing)); }
.reference-taste .reference-attributes, .reference-taste [data-notes]:not(:empty) { margin: 0; }
.reference-provenance { display: flex; flex-direction: column; gap: calc(3 * var(--spacing)); }
.reference-provenance > h3 { margin: 0; font-weight: 500; }
.reference-provenance:has(.source-list:empty):has(.collection-list:empty) { display: none; }
.reference-provenance .source-list, .reference-provenance .collection-list:not(:empty) { margin: 0; }
.reference-disclosure > summary { width: 100%; justify-content: space-between; list-style: none; cursor: pointer; }
.reference-disclosure > summary::-webkit-details-marker { display: none; }
.reference-disclosure > summary .icon { transition: transform var(--duration-fast); }
.reference-disclosure[open] > summary .icon { transform: rotate(180deg); }
.reference-disclosure-content { padding-top: calc(4 * var(--spacing)); }
.reference-disclosure > summary:is(:hover,:focus-visible) { background: var(--color-control-hover); color: var(--color-fg-primary); }

.library-canvas:has(#grid:empty):has(#retry:not([hidden])) .library-status { min-height:280px; flex-direction:column; justify-content:center; gap:16px; text-align:center; max-width:480px; margin:auto; }
.library-status #status { overflow-wrap:anywhere; }