/* CinNex Photos layouts only. Colours, type, radii, shadows and spacing come from tokens.css;
   panels, buttons, eyebrows and the camera backdrop come from components.css. */
.photos-page{margin:0;min-height:100vh;display:flex;flex-direction:column}
.photos-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5)}
/* Hidden by position, not transform: the shared reduced-motion rule removes every transform. */
.photos-page .portal-skip-link{position:fixed;top:-200px;left:var(--space-2);z-index:20;padding:var(--space-3) var(--space-4);background:var(--surface);color:var(--accent-text);border:2px solid var(--border);border-radius:var(--radius-md)}
.photos-page .portal-skip-link:focus{top:var(--space-2)}
.photos-brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--text)}
.photos-logo{display:block;width:32px;height:32px}
.photos-brand-name{font-size:var(--text-lg);font-weight:700;line-height:1.25}
.photos-theme-toggle{min-height:40px;min-width:40px;padding:var(--space-2)}
.photos-shell{flex:1;display:grid;place-items:center;padding:var(--space-5) var(--space-4) var(--space-7)}
.photos-panel{width:100%;max-width:440px;padding:var(--space-6) var(--space-5);box-sizing:border-box}
.photos-panel h1{margin:var(--space-1) 0 var(--space-2);font-size:var(--text-xl);font-weight:700;line-height:1.25;color:var(--text)}
.photos-panel .eyebrow{margin:0;font-weight:600;letter-spacing:0}
.photos-muted{margin:0;color:var(--muted);font-size:var(--text-md);line-height:1.5}
.photos-message{text-align:center}
.photos-message-icon{display:inline-flex;margin-bottom:var(--space-3);color:var(--muted)}
.photos-message-icon .portal-icon{width:32px;height:32px}
@media(max-width:600px){.photos-header{padding:var(--space-3) var(--space-4)}.photos-panel{padding:var(--space-5) var(--space-4)}}

/* Staff album screens (loaded on /portal/photos pages alongside the staff styles). */
.photos-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.photos-tabs a{display:inline-flex;align-items:center;min-height:36px;padding:var(--space-1) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-full);background:var(--surface);color:var(--text);font-size:var(--text-sm);font-weight:600;text-decoration:none;transition:background-color 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out}
.photos-tabs a:is(:hover,:focus-visible){border-color:var(--accent-text);color:var(--accent-text)}
.photos-tabs a.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.photos-search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-2);margin-bottom:var(--space-4)}
.photos-search label{display:grid;gap:var(--space-1);flex:1 1 280px;font-size:var(--text-sm);font-weight:600}
.photos-search input{min-height:40px;padding:var(--space-2) var(--space-3)}
.photos-meta{display:flex;align-items:center;gap:var(--space-1);color:var(--muted);font-size:var(--text-xs);font-weight:400}
.photos-num{font-variant-numeric:tabular-nums}
.photos-empty{padding:var(--space-6) var(--space-4);text-align:center;color:var(--muted)}
.photos-empty p{margin:0}
.portal-badge.photos-badge-accent{color:var(--accent-text)}
.portal-badge.photos-badge-muted{color:var(--muted)}
.photos-form{display:grid;gap:var(--space-4);max-width:720px}
.photos-form h2{margin:var(--space-2) 0 0;font-size:var(--text-lg)}
.photos-field{display:grid;gap:var(--space-1);min-width:0;margin:0;padding:0;border:0}
.photos-field>label,.photos-field legend{font-size:var(--text-sm);font-weight:600;padding:0}
.photos-field :is(input:not([type=radio]),select){min-height:44px;padding:var(--space-2) var(--space-3);width:100%;box-sizing:border-box}
.photos-field :is(input,select)[aria-invalid=true]{border-color:var(--danger)}
.photos-field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.photos-choices label{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-2);min-height:44px;font-weight:400}
.photos-choices input[type=radio]{flex:0 0 auto;width:20px;height:20px;min-height:0;margin:0;padding:0;accent-color:var(--accent-text)}
.photos-indent{margin-left:var(--space-6);max-width:240px}
.photos-indent-wide{margin-left:var(--space-6)}
.photos-indent-hint{margin:calc(-1 * var(--space-2)) 0 var(--space-1) calc(20px + var(--space-2))}
[data-nas-folder][hidden]{display:none}
.photos-hint{margin:0;color:var(--muted);font-size:var(--text-sm)}
.photos-inline{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.photos-inline select{flex:1 1 280px;min-height:44px;padding:var(--space-2) var(--space-3)}
.photos-fixed{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0}
.photos-fixed span{color:var(--muted)}
.photos-fixed-value{margin:0}
.photos-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-2)}
.photos-form-alert{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--danger-soft);color:var(--danger-text);font-weight:600}
.photos-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);margin:0}
.photos-details dt{color:var(--muted);font-size:var(--text-xs);font-weight:600}
.photos-details dd{margin:var(--space-1) 0 0;overflow-wrap:anywhere}
.photos-album-header .portal-badges{margin-top:var(--space-2)}
.photos-activity{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.photos-activity li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2);padding-bottom:var(--space-3);border-bottom:1px solid var(--border)}
.photos-activity li:last-child{border-bottom:0;padding-bottom:0}
.photos-back{display:inline-flex;align-items:center;gap:var(--space-2)}

/* Upload panel on the staff album page. */
.photos-upload{display:grid;gap:var(--space-3);margin-bottom:var(--space-5)}
.photos-drop{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-6) var(--space-4);border:2px dashed var(--border-field);border-radius:var(--radius-lg);background:var(--surface);text-align:center;cursor:pointer;transition:border-color 150ms ease-out,background-color 150ms ease-out}
.photos-drop>.portal-icon{width:32px;height:32px;color:var(--muted)}
.photos-drop:is(:hover,:focus-within),.photos-drop[data-dragging]{border-color:var(--accent-text);background:var(--surface-soft)}
.photos-drop:focus-within{outline:2px solid var(--accent-text);outline-offset:2px}
.photos-drop-title{font-size:var(--text-lg);font-weight:700;color:var(--text)}
.photos-drop-button{margin-top:var(--space-2)}
[data-unsupported] .photos-drop{cursor:not-allowed;opacity:.6}
.photos-upload-summary{margin:0;font-weight:600}
.photos-upload-summary:empty{display:none}
.photos-upload-done{display:none;margin:0}
[data-has-new]:not([data-busy]) .photos-upload-done{display:block}
.photos-upload-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);max-height:420px;overflow:auto}
.photos-upload-list:empty{display:none}
/* Once photos have been added, the empty message no longer applies. */
.photos-upload[data-has-new]~.photos-empty{display:none}
.photos-upload-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-1) var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.photos-upload-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.photos-upload-status{font-size:var(--text-xs);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.photos-upload-row[data-state=added] .photos-upload-status{color:var(--accent-text)}
.photos-upload-row[data-state=failed] .photos-upload-status{color:var(--danger-text)}
.photos-upload-row[data-state=skipped] .photos-upload-status{color:var(--warning-text)}
.photos-upload-bar{grid-column:1/-1;height:4px;border-radius:var(--radius-full);background:var(--surface-soft);overflow:hidden}
.photos-upload-bar span{display:block;width:0;height:100%;background:var(--accent)}
.photos-upload-note{grid-column:1/-1;font-size:var(--text-xs);color:var(--muted)}
.photos-upload-note:empty{display:none}
.photos-upload-row button{grid-column:1/-1;justify-self:start}
.photos-upload-row button[hidden]{display:none}

/* Photo grid: justified rows that keep each photo's own shape. A tile grows in proportion to its
   aspect ratio, so every tile in a row ends at the same height; the last row does not stretch. */
.photos-grid{--row:120px;display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:var(--space-3) 0 0;padding:0}
.photos-grid::after{content:'';flex-grow:999999}
@media(min-width:601px){.photos-grid{--row:200px;gap:var(--space-3)}}
/* Phones: exactly two photos per row, each keeping its shape, both ending at the same height. */
@media(max-width:600px){.photos-grid .photos-tile{flex-grow:0;flex-basis:calc((100% - var(--space-2) - 1px) * var(--ratio) / var(--pair))}}
.photos-tile{box-sizing:border-box;position:relative;flex-grow:var(--ratio);flex-basis:calc(var(--ratio) * var(--row));aspect-ratio:var(--ratio);min-width:0;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-soft);overflow:hidden;transition:border-color 150ms ease-out,box-shadow 150ms ease-out}
.photos-tile:is(:hover,:focus-within){border-color:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:var(--shadow-sm)}
.photos-tile-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.photos-tile-open:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
.photos-tile img{display:block;width:100%;height:100%;object-fit:cover}
.photos-tile-removed img{opacity:.4}
.photos-tile-flag{position:absolute;left:var(--space-2);right:var(--space-2);bottom:var(--space-2);display:grid;justify-items:start;gap:var(--space-1);pointer-events:none}
.photos-tile-note{max-width:100%;padding:0 var(--space-1);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--text);font-size:var(--text-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photos-nas-note{display:flex;align-items:center;gap:var(--space-2)}

/* Full-screen viewer: the one place with a solid black background, so photos are not tinted. */
.photos-viewer{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--black);color:var(--white)}
.photos-viewer::backdrop{background:var(--black)}
.photos-viewer[open]{display:grid;place-items:center}
.photos-viewer img{max-width:100vw;max-height:calc(100vh - 64px);object-fit:contain}
.photos-viewer-caption{position:absolute;left:0;right:0;bottom:var(--space-4);margin:0;text-align:center;font-size:var(--text-sm);color:var(--white)}
.photos-viewer-control{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:var(--radius-full);background:color-mix(in srgb,var(--black) 40%,transparent);color:var(--white);cursor:pointer;transition:background-color 150ms ease-out}
.photos-viewer-control .portal-icon{width:24px;height:24px}
.photos-viewer-control:is(:hover,:focus-visible){background:color-mix(in srgb,var(--black) 70%,transparent)}
.photos-viewer-control:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.photos-viewer-prev{left:var(--space-3);top:50%;margin-top:-24px}
.photos-viewer-next{right:var(--space-3);top:50%;margin-top:-24px}
.photos-viewer-close{right:var(--space-3);top:var(--space-3)}
.photos-viewer-control[disabled]{opacity:.3;cursor:default}

/* Agency pages on the photos domain. */
.photos-header-actions{display:flex;align-items:center;gap:var(--space-2)}
.photos-header-who{display:grid;text-align:right;line-height:1.25}
.photos-header-agency{font-weight:700;font-size:var(--text-sm);color:var(--text)}
.photos-header-name{font-size:var(--text-xs);color:var(--muted)}
.photos-signout{margin:0}
.photos-signout .ghost-button{min-height:40px}
@media(max-width:600px){.photos-header-who{display:none}}
.photos-signin{display:grid;gap:var(--space-3);margin-top:var(--space-4);text-align:left}
.photos-panel .photos-field input:not([type=checkbox]){min-height:44px;padding:var(--space-2) var(--space-3);font-size:var(--text-md);width:100%;box-sizing:border-box}
.photos-wide-button{width:100%;min-height:44px}
.photos-panel-foot{margin:var(--space-4) 0 0;font-size:var(--text-sm);color:var(--muted)}
.photos-notice{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) 0 0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.photos-contact{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-2)}
.photos-contact li{display:flex;align-items:center;gap:var(--space-2)}
.photos-panel-wide{max-width:560px}
.photos-terms{margin:var(--space-4) 0 0;padding-left:var(--space-5);display:grid;gap:var(--space-2);color:var(--text);font-size:var(--text-md);line-height:1.5}
.photos-check{display:flex;align-items:flex-start;gap:var(--space-2);min-height:44px;font-weight:600}
.photos-check input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent-text)}
.photos-draft-note{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) 0 0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--warning-soft);color:var(--warning-text);font-size:var(--text-sm);font-weight:600}
.photos-main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:var(--space-4) var(--space-5) var(--space-7);box-sizing:border-box}
@media(max-width:600px){.photos-main{padding:var(--space-3) var(--space-4) var(--space-6)}}
.photos-page-title{margin-bottom:var(--space-5)}
.photos-page-title h1{margin:var(--space-1) 0 0;font-size:var(--text-2xl);font-weight:800;line-height:1.15;color:var(--text)}
.photos-section{margin-bottom:var(--space-6)}
.photos-section h2{margin:0 0 var(--space-3);font-size:var(--text-xl);font-weight:700;color:var(--text)}
.photos-surface{background:color-mix(in srgb,var(--surface) 96%,transparent);border:1px solid var(--border);border-radius:var(--radius-lg)}
.photos-album-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.photos-album-row{display:grid;gap:var(--space-1);padding:var(--space-4)}
.photos-album-title{font-size:var(--text-lg);font-weight:700;color:var(--text)}

/* Staff agency members screen. */
.photos-agency-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.photos-agency-head h2{margin:0;font-size:var(--text-lg)}
.photos-member-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end}
.photos-member-actions form{margin:0}
.photos-invite-form{display:grid;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border)}
.photos-invite-form h3{margin:0;font-size:var(--text-md)}
.photos-invite-result{display:grid;gap:var(--space-3)}
.photos-copy-row{display:flex;gap:var(--space-2)}
.photos-copy-row input{flex:1;min-width:0}
.photos-invite-result input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--text-sm)}

/* Review: selecting tiles, the bulk bar, and the viewer's remove/restore button. */
.photos-tile-select{position:absolute;top:var(--space-1);left:var(--space-1);display:grid;place-items:center;width:44px;height:44px;cursor:pointer}
.photos-tile-select input{position:absolute;opacity:0;width:44px;height:44px;margin:0;cursor:pointer}
.photos-tile-check{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-full);background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--border-field);color:transparent;transition:background-color 150ms ease-out,color 150ms ease-out,border-color 150ms ease-out}
.photos-tile-check .portal-icon{width:20px;height:20px}
.photos-tile-select input:focus-visible+.visually-hidden+.photos-tile-check{outline:2px solid var(--accent-text);outline-offset:2px}
.photos-tile[data-selected]{outline:2px solid var(--accent);outline-offset:-2px}
.photos-tile[data-selected] .photos-tile-check{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.photos-tile:not([data-selected]) .photos-tile-select:hover .photos-tile-check{border-color:var(--accent-text)}
.photos-tile-flag[hidden],.photos-tile-note[hidden]{display:none}
.photos-bulk-bar{position:sticky;bottom:var(--space-3);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-md)}
.photos-bulk-count{flex:1 1 180px;margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.photos-bulk-note{flex:1 1 220px}
.photos-bulk-note input{width:100%;min-height:40px;padding:var(--space-2) var(--space-3);box-sizing:border-box}
.photos-bulk-bar button[disabled]{opacity:.5;cursor:not-allowed}
.photos-bulk-bar button[hidden]{display:none}
@media(max-width:600px){.photos-bulk-note input{font-size:var(--text-md)}.photos-bulk-bar>button{flex:1 1 auto}}
/* Centred with auto margins, not a transform: the shared reduced-motion rule removes transforms. */
.photos-viewer-action{position:absolute;left:0;right:0;width:max-content;margin:0 auto;top:var(--space-3);min-height:44px;padding:var(--space-2) var(--space-4);border:0;border-radius:var(--radius-full);background:color-mix(in srgb,var(--black) 40%,transparent);color:var(--white);font:inherit;font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:background-color 150ms ease-out}
.photos-viewer-action:is(:hover,:focus-visible){background:color-mix(in srgb,var(--black) 70%,transparent)}
.photos-viewer-action:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.photos-viewer-action[hidden]{display:none}
.photos-review-help{margin:0 0 var(--space-3)}
.photos-album-facts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);margin:var(--space-2) 0}
.photos-album-facts>span{display:inline-flex;align-items:center;gap:var(--space-1)}

/* Photos-domain pages don't load the staff stylesheet, which defines this for staff pages. */
.photos-page .visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Share with client: dialog, form and the one-time result. */
.photos-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--text);box-shadow:var(--shadow-md);box-sizing:border-box}
.photos-dialog::backdrop{background:color-mix(in srgb,var(--black) 45%,transparent)}
.photos-share-title{margin:0 0 var(--space-2);font-size:var(--text-xl);font-weight:700;color:var(--text)}
.photos-share-form{display:grid;gap:var(--space-3);margin-top:var(--space-4);text-align:left}
.photos-share-form input[type=email]{min-height:44px;padding:var(--space-2) var(--space-3);font-size:var(--text-md);width:100%;box-sizing:border-box}
.photos-title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-2)}
.photos-secret{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--text-lg);letter-spacing:.08em}
.photos-panel .photos-copy-row input{min-height:44px;padding:var(--space-2) var(--space-3);font-size:var(--text-md);width:100%;box-sizing:border-box}
.photos-panel .photos-field+.photos-field{margin-top:var(--space-3)}
.photos-panel .photos-actions{margin-top:var(--space-4)}
.photos-inline-form{display:inline;margin:0}
.photos-share-page{max-width:640px}
.photos-share-page .photos-copy-row input{min-height:44px;padding:var(--space-2) var(--space-3);width:100%;box-sizing:border-box}
.photos-share-page .photos-field+.photos-field{margin-top:var(--space-3)}
.photos-send-card{display:grid;gap:var(--space-3)}

/* Album link page: downloads on tiles and in the viewer, expiry note. */
.photos-tile-download{position:absolute;top:var(--space-1);right:var(--space-1);display:grid;place-items:center;width:44px;height:44px;color:var(--text);text-decoration:none}
.photos-tile-download::before{content:"";position:absolute;inset:6px;border-radius:var(--radius-full);background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--border-field);transition:border-color 150ms ease-out,background-color 150ms ease-out}
.photos-tile-download .portal-icon{position:relative;width:18px;height:18px}
.photos-tile-download:hover::before{border-color:var(--accent-text)}
.photos-tile-download:focus-visible{outline:none}
.photos-tile-download:focus-visible::before{outline:2px solid var(--accent-text);outline-offset:2px}
.photos-viewer-action.photos-viewer-download,[data-viewer-download]{right:auto;left:var(--space-3);margin:0;display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none}
[data-viewer-download] .portal-icon{width:20px;height:20px}
[data-viewer-download][hidden]{display:none}
@media(max-width:600px){[data-viewer-download]{padding:var(--space-2);min-width:44px;justify-content:center}[data-viewer-download] [data-viewer-download-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.photos-link-expiry{display:flex;align-items:center;gap:var(--space-1);margin:var(--space-2) 0 0}