*{box-sizing:border-box}body{margin:0;background:#f7f7f6;color:#171717;font:15px system-ui,-apple-system,sans-serif}header{padding:25px clamp(16px,4vw,55px);display:flex;justify-content:space-between;gap:20px;align-items:center;background:white;border-bottom:1px solid #e5e5e5}small{font-size:10px;letter-spacing:.18em;color:#777}h1{font-size:clamp(23px,3vw,36px);font-weight:580;letter-spacing:-.035em;margin:7px 0}p{color:#777;margin:4px 0}.actions{display:flex;gap:8px;flex-wrap:wrap}button{font:inherit;cursor:pointer;background:white;border:1px solid #ddd;border-radius:9px;padding:10px 14px;color:#222}button:hover{background:#eee}#export,.active{background:#181818!important;color:white!important;border-color:#181818!important}main{padding:24px clamp(12px,4vw,55px)}nav{display:flex;gap:8px;overflow:auto;padding-bottom:20px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.tile{position:relative;border:0;padding:0;background:#ddd;aspect-ratio:3/4;overflow:hidden;border-radius:8px}.tile img{width:100%;height:100%;object-fit:cover;display:block}.tile .mark{position:absolute;right:8px;top:8px;background:#ffffffed;border-radius:30px;padding:6px 9px;font-weight:700;box-shadow:0 1px 7px #0002}.mark.yes{color:#dc3157}.mark.maybe{color:#ad7600}.mark.no{color:#555}.viewer{position:fixed;inset:0;background:#0c0c0d;color:white;z-index:10;display:flex;align-items:center;justify-content:center}.viewer[hidden],#empty[hidden]{display:none}.viewer img{max-width:95vw;max-height:calc(100dvh - 175px);object-fit:contain}.viewtop,.viewbottom{position:absolute;left:0;right:0;padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#101010ee}.viewtop{top:0}.viewbottom{bottom:0;flex-wrap:wrap}.viewtop button,.votes button,.arrow{background:#2a2a2c;color:white;border:1px solid #505050}.arrow{position:absolute;top:47%;font-size:35px;padding:6px 14px}.left{left:10px}.right{right:10px}.votes{display:flex;gap:8px}.votes button.selected{background:#fff;color:#111}.votes kbd{opacity:.6;margin-left:5px}dialog{border:0;border-radius:16px;padding:28px;max-width:440px;box-shadow:0 20px 90px #0005}dialog::backdrop{background:#0009}@media(max-width:600px){header{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.tile{border-radius:4px}.viewbottom{justify-content:center;text-align:center}.viewbottom #file{width:100%;font-size:11px}.votes{width:100%;justify-content:center}.votes button{font-size:12px;padding:10px}.votes kbd{display:none}.arrow{font-size:25px;padding:4px 8px}.viewer img{max-height:calc(100dvh - 190px)}}
.layout-controls{display:flex;align-items:center;gap:7px;margin:-8px 0 16px;color:#777;font-size:13px}.layout-controls button{padding:7px 11px;font-size:13px}.grid.mosaic{display:flex;flex-wrap:wrap;gap:8px}.grid.mosaic .tile{flex:1 1 auto;width:auto;height:190px;aspect-ratio:auto;min-width:95px;max-width:380px}.grid.mosaic .tile img{width:auto;height:100%;max-width:100%;object-fit:contain}.viewer-tools{display:flex;align-items:center;gap:10px}.shortcut-hint{font-size:12px;color:#bbb}.viewer-tools button{background:#2a2a2c;color:white;border-color:#505050}.viewtop{z-index:2}@media(max-width:850px){.shortcut-hint{display:none}}@media(max-width:600px){.grid.mosaic .tile{height:130px;max-width:260px;min-width:75px}.viewer-tools button{font-size:12px;padding:8px}.viewtop{padding:10px}}

/* True masonry: tightly stacked, aspect-ratio-preserving columns. */
.grid.mosaic{display:block;columns:5 165px;column-gap:9px}
.grid.mosaic .tile{display:block;width:100%;height:auto;min-width:0;max-width:none;margin:0 0 9px;break-inside:avoid;aspect-ratio:auto;overflow:hidden}
.grid.mosaic .tile img{display:block;width:100%;height:auto;max-width:none;object-fit:contain}
@media(max-width:600px){.grid.mosaic{columns:2 120px;column-gap:6px}.grid.mosaic .tile{height:auto;max-width:none;min-width:0;margin-bottom:6px}}
.layout-controls{flex-wrap:wrap;row-gap:9px}.layout-controls button{padding:9px 14px;min-height:38px}

/* Justified rows: fill each completed row, preserve aspect ratios, no cropping. */
.grid.justified{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px}
.grid.justified .tile{display:block;min-width:0;max-width:none;aspect-ratio:auto;height:205px;flex:none}
.grid.justified .tile img{width:100%;height:100%;object-fit:contain}
@media(max-width:600px){.grid.justified{gap:8px}.grid.justified .tile{height:135px;min-width:0;max-width:none}}

/* Fullscreen encompasses both gallery and viewer. */
:root:fullscreen{background:#fff;overflow:auto}
:root:fullscreen body{min-height:100vh;overflow:auto}
:root:fullscreen .viewer{position:fixed;inset:0}
:root:fullscreen .viewer[hidden]{display:none}

/* Mobile touch and immersive viewer refinements. */
@media (hover:none), (pointer:coarse){button:hover{background:inherit}#export:hover,.active:hover{background:#181818!important;color:white!important}.viewer button:hover{background:#2a2a2c}.votes button.selected:hover{background:#fff;color:#111}}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.viewer img.photo-change{animation:photo-enter .16s ease-out}
@keyframes photo-enter{from{opacity:.55;transform:translateX(7px)}to{opacity:1;transform:translateX(0)}}
body.immersive .viewer{position:fixed;inset:0;inset:0 0 env(safe-area-inset-bottom) 0}
body.immersive .viewtop{padding-top:max(12px,env(safe-area-inset-top))}
body.immersive .viewbottom{padding-bottom:max(12px,env(safe-area-inset-bottom))}
body.immersive header{display:none}
body.immersive main{padding-top:10px}
@media(max-width:600px){.viewtop{gap:4px}.viewer-tools{gap:5px}.viewbottom{padding:12px 8px}.votes button{min-height:44px}.grid.justified{gap:6px}.viewer img{max-width:100vw}}
@media(prefers-reduced-motion:reduce){.viewer img.photo-change{animation:none}}

/* Pilot 0.7: explicit justified rows, no flex-wrap rounding gaps */
.grid.justified{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:8px}
.grid.justified .justified-row{display:grid;gap:8px;max-width:100%;min-width:0}
.grid.justified .justified-row .tile{width:100%;height:100%;min-width:0;max-width:none;aspect-ratio:auto;overflow:hidden}
.grid.justified .justified-row .tile img{width:100%;height:100%;object-fit:contain}
@media(max-width:600px){
 .grid.justified,.grid.justified .justified-row{gap:6px}
 [data-fullscreen-toggle]{display:none!important}
}
@media(hover:none){button:hover{background:inherit}.votes button:hover,.arrow:hover,.viewtop button:hover{background:#2a2a2c}}

/* Pilot 0.8: natural-size final row, without fixed-height letterboxing */
.grid.justified .justified-row.last-row{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;height:auto!important}
.grid.justified .justified-row.last-row .tile{height:auto!important;flex:none;align-self:flex-start;background:transparent}
.grid.justified .justified-row.last-row .tile img{display:block;width:100%;height:auto!important;object-fit:contain}

/* Pilot 0.9: allow vertical Safari gestures, own horizontal photo swipes. */
@media (pointer:coarse){.viewer{touch-action:pan-y}.viewer img{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}}

/* 1.2 client submission: additive styles, viewer layout unchanged */
#brand-logo{max-width:180px;max-height:60px;object-fit:contain;display:block;margin:0 0 8px}#brand-logo[hidden],#welcome[hidden]{display:none}#welcome{max-width:65ch;line-height:1.5}.submission-dialog{width:min(480px,calc(100vw - 40px));max-height:85vh;overflow:auto;border:0;border-radius:16px;padding:24px;background:#fff;color:#172033;box-shadow:0 16px 70px #0006}.submission-dialog::backdrop{background:#101827b8}.submission-dialog label:not(.checkline){display:block;font-weight:600;margin:12px 0 5px}.submission-dialog input:not([type=checkbox]),.submission-dialog textarea{display:block;box-sizing:border-box;width:100%;font:inherit;border:1px solid #b7c0cb;border-radius:8px;padding:10px;color:#172033;background:white}.submission-dialog .checkline{display:flex;align-items:center;gap:8px;margin:12px 0}.submit-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.submission-dialog button{padding:10px 14px;border-radius:8px;border:1px solid #9da9b5;cursor:pointer}.dialog-close{float:right}#submit-status{overflow-wrap:anywhere;font-size:.9rem}

/* 1.2.1 client-first controls */
.actions{align-items:center}.primary-submit{background:#215d78!important;color:#fff!important;border:2px solid #215d78!important;font-weight:750;padding:12px 18px;box-shadow:0 3px 10px #0002;order:0}.primary-submit:hover{filter:brightness(1.12)}#export{background:transparent!important;color:#343434!important;border-color:#ccc!important;font-weight:400;order:2}.help-round{width:40px;height:40px;border-radius:50%;padding:0;font-weight:800;font-size:20px;order:3}#language-switch{font:inherit;padding:9px 8px;border:1px solid #ddd;border-radius:8px;background:#fff;order:4;max-width:130px}header [data-fullscreen-toggle]{order:1}#brand-name.branded{font-size:15px;letter-spacing:.025em;font-weight:800;color:var(--client-accent,#215d78);text-transform:none}.submission-dialog{z-index:100}.submission-dialog #send-selections{background:#215d78;color:white;border-color:#215d78;font-weight:700}@media(max-width:600px){.actions{width:100%}.primary-submit{flex:1 0 100%;order:-1}.help-round{margin-left:auto}}