/* Photo library: wider layout for office and marketing use; same look as the camera. */
.wrap.wide{max-width:1240px}
.top .who a.btn{min-height:36px;padding:5px 12px;font-size:.95rem;text-decoration:none;display:inline-flex;align-items:center}
.ver{font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}
.fl.grow{flex:2 1 260px}
.fl input[type=search],.fl input[type=date],.fl input[type=text],.fl select{font:inherit;font-size:1rem;color:var(--ink);padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--panel);width:100%;min-width:0}
.row.between{justify-content:space-between}
.row.center{justify-content:center;margin-top:8px}
.note{font-size:.85rem;color:var(--muted)}
#selMode[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.selbar{position:sticky;top:8px;z-index:5;border-color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.12)}
.selbar button{font-size:.95rem;padding:7px 11px}
.groups{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.jgrp{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.jgrp header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.jgrp h3{color:var(--ink);text-transform:none;letter-spacing:.01em;font-family:var(--f-display);font-weight:700;font-size:1.25rem;margin:0}
.jgrp .meta{text-transform:none;letter-spacing:0;font-family:var(--f-body);font-size:.85rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);color:var(--muted)}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.lib .tile{cursor:pointer}
.tile .badges{position:absolute;top:5px;left:5px;display:flex;gap:3px}
.tile .bd{font-family:var(--f-mono);font-size:.62rem;padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.62);color:#fff}
.tile .bd.feat{background:var(--accent);color:var(--accent-ink)}
.tile[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:-3px}
.tile[aria-pressed="true"]::after{content:"✓";position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700}
.pairs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.pair{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3px;width:260px;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--sunk);cursor:pointer;padding:0}
.pair img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pair span{grid-column:1/-1;font-size:.75rem;font-weight:600;padding:4px 8px;text-align:left;font-family:var(--f-body);letter-spacing:0}
.box.wide{width:min(1000px,100%)}
.vtitle{font-family:var(--f-display);font-size:1.3rem}
.vimgs{display:grid;gap:6px;grid-template-columns:1fr}
.vimgs.two{grid-template-columns:1fr 1fr}
.vimgs figure{margin:0;position:relative}
.vimgs img{width:100%;max-height:60vh;object-fit:contain;border-radius:8px;background:var(--sunk);display:block}
.vimgs figcaption{position:absolute;left:8px;top:8px;font-family:var(--f-display);font-weight:700;font-size:.95rem;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff}
.flags{gap:14px}
.c.sw{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;min-height:40px}
.c.sw input{width:20px;height:20px;accent-color:var(--accent)}
@media (max-width:560px){.lib{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.vimgs.two{grid-template-columns:1fr}.pair{width:200px}}
.filters .fl{flex-basis:150px}
@media (max-width:560px){.filters .row{gap:8px}.filters .fl:not(.grow){flex:1 1 140px}}
.top .who a.pill{text-decoration:none;color:var(--ink)}
.pill.over{background:var(--accent-soft);border-color:var(--bad);color:var(--bad)}
/* Tabs: job photos | photos for website and ads */
.tabs{display:flex;gap:6px;border-bottom:1.5px solid var(--line)}
.tabs button{border:0;border-bottom:3px solid transparent;border-radius:0;background:none;padding:8px 12px;min-height:44px;color:var(--muted)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
/* Photos for website and ads */
#webView{display:flex;flex-direction:column;gap:14px}
.drop{border:1.5px dashed var(--line);border-radius:10px;padding:16px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--muted)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.queue{display:flex;flex-direction:column;gap:6px}
.qrow{display:flex;gap:10px;align-items:center;font-size:.9rem}
.qrow img{width:56px;height:42px;object-fit:cover;border-radius:6px;background:var(--sunk);flex:0 0 auto}
.qrow .qname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.qstat{font-size:.875rem;color:var(--muted);flex:0 0 auto}
.qstat.ok{color:var(--good)} .qstat.err{color:var(--bad)}
.err-line{color:var(--bad);font-size:.9rem;margin:4px 0 0}
#wRelease[aria-invalid="true"]{outline:2.5px solid var(--bad);outline-offset:2px}
@media (max-width:560px){.drop .drop-hint{display:none}}
.focal:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}
.tile .bd.wait,.chip.wait{background:var(--accent-soft);color:var(--ink);border:1px solid var(--accent)}
.focal{position:relative;align-self:center;max-width:100%;cursor:crosshair;line-height:0}
.focal img{max-height:50vh;width:auto;max-width:100%}
.focal .dot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--accent),0 1px 6px rgba(0,0,0,.5);pointer-events:none}
.crops{display:flex;flex-wrap:wrap;gap:10px}
.crops figure{margin:0;display:flex;flex-direction:column;gap:3px;font-size:.875rem;color:var(--muted)}
.crops canvas{border-radius:6px;display:block;background:var(--sunk)}
#wReleaseWrap{display:flex;flex-wrap:nowrap;align-items:flex-start}
#wReleaseWrap input{flex:0 0 auto;margin-top:2px}
#wReleaseWrap>span{flex:1 1 auto;min-width:0}
.qrow{flex-wrap:wrap}
.qrow .qname{flex:1 1 140px}
.qstat{flex:1 1 auto;text-align:right}