/* photos.sjwheel.net (tasks#14). One small stylesheet, no framework. */
:root{--bg:#0e0f12;--bg2:#16181d;--card:#1c1f26;--line:#2a2e37;--fg:#e9eaee;--mut:#9aa0ab;--acc:#7cb4ff;--acc2:#4f8ff7;--ok:#5ccf8a;--warn:#ffcc4d;--r:12px;--shadow:0 6px 24px #0007;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;margin:0;background:var(--bg);color:var(--fg)}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;font-weight:650;letter-spacing:-.01em}h2{font-size:1.5em;margin:.2em 0 .5em}
.muted{color:var(--mut)}small,.small{font-size:.85em}
img{max-width:100%}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.4em;padding:.5em max(1em,env(safe-area-inset-left));background:#0e0f12cc;backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.top .brand{font-weight:700;font-size:1.1em;color:var(--fg);display:flex;align-items:center;gap:.4em;margin-right:.6em}
.top .brand svg{width:22px;height:22px;color:var(--acc)}
.top nav{display:flex;align-items:center;gap:.2em;flex:1}
.top nav a,.top nav .who{padding:.35em .7em;border-radius:999px;color:var(--fg);white-space:nowrap}
.top nav a:hover{background:var(--card);text-decoration:none}.top nav a.on{background:var(--card);color:var(--acc)}
.top nav .sp{flex:1}.top nav .who{color:var(--mut);font-size:.85em;overflow:hidden;text-overflow:ellipsis;max-width:16em}
.top nav .admin{color:var(--mut);font-size:.92em}
.top form{margin:0}
.menu-btn{display:none;margin-left:auto}
@media (max-width:760px){
 .menu-btn{display:inline-flex}
 .top{flex-wrap:wrap}
 .top nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;padding:.4em 0}
 .top.open nav{display:flex}
 .top nav .sp{display:none}.top nav .who{max-width:none}
}

main{padding:1em max(1em,env(safe-area-inset-left));max-width:1800px;margin:0 auto}
main.narrow{max-width:1100px}

/* controls */
button,.btn{font:inherit;font-size:.92em;display:inline-flex;align-items:center;justify-content:center;gap:.35em;padding:.45em .95em;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
button:hover,.btn:hover{background:#262a33;border-color:#3a3f4b;text-decoration:none}
button:active,.btn:active{transform:translateY(1px)}
.btn.primary,button.primary{background:var(--acc2);border-color:var(--acc2);color:#fff}
.btn.primary:hover,button.primary:hover{background:#3d7ee6}
.btn.ghost,button.ghost{background:transparent}
.icon{padding:.45em .6em;line-height:1}
input,select,textarea{font:inherit;color:var(--fg);background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:.45em .7em;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc2);outline-offset:-1px;border-color:transparent}
input[type=checkbox],input[type=radio]{accent-color:var(--acc2);width:1.05em;height:1.05em;vertical-align:-.15em;padding:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* album toolbar */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.6em 1em;margin:.3em 0 1em}
.search{display:flex;align-items:center;gap:.4em;flex:1 1 20em;max-width:34em;margin:0}
.search input{flex:1;border-radius:999px;padding:.55em 1em;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:.4em;align-items:center}
.chip{display:inline-flex;align-items:center;gap:.3em;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.2em .75em;font-size:.9em;color:var(--fg)}
.chip a{color:var(--mut)}
.actions{display:flex;flex-wrap:wrap;gap:.4em;align-items:center}
.sub{display:flex;flex-wrap:wrap;gap:.3em 1em;align-items:center;color:var(--mut);font-size:.9em;margin:.2em 0 .8em}

/* justified photo rows: each tile grows in proportion to its aspect ratio */
.jgrid{display:flex;flex-wrap:wrap;gap:4px;--rh:200px}
.jgrid::after{content:"";flex-grow:1e4}
.jgrid a{position:relative;display:block;height:var(--rh);flex-grow:calc(var(--ar,1)*100);width:calc(var(--ar,1)*var(--rh));background:var(--bg2);overflow:hidden;border-radius:6px}
.jgrid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease,filter .35s}
.jgrid a:hover img{transform:scale(1.03);filter:brightness(1.08)}
@media (max-width:1000px){.jgrid{--rh:160px}}
@media (max-width:600px){.jgrid{--rh:110px;gap:3px}.jgrid a{border-radius:3px}}
@media (min-width:1600px){.jgrid{--rh:240px}}
.ygroup{margin-bottom:.6em}
h3.year{position:sticky;top:3.1em;z-index:5;margin:.9em 0 .5em;font-size:1.05em;display:inline-block;padding:.2em .8em;border-radius:999px;background:#16181ddd;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pager{text-align:center;margin:1.5em 0;color:var(--mut)}
.spinner{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite;margin:1em auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* old square grid (hidden/duplicates use .faces) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px}
.grid a{display:block;aspect-ratio:1;background:var(--bg2);overflow:hidden;border-radius:6px}.grid img{width:100%;height:100%;object-fit:cover}

/* recently added strip */
.recent{margin:.2em 0 1.2em;padding:.8em 1em;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r)}
.recent h3{margin:0 0 .6em;font-size:1em}
.strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:thin}
.strip .scan{display:flex;flex-direction:column;gap:3px;scroll-snap-align:start;flex:none}.strip .scan small{color:var(--mut);font-size:.75em}
.strip .prints{display:flex;gap:4px}.strip img{height:120px;width:auto;display:block;background:var(--card);border-radius:6px}

/* cards and faces */
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:1em 1.2em;margin:0 0 1em}
.faces{display:flex;flex-wrap:wrap;gap:10px}
.face{display:flex;flex-direction:column;align-items:center;gap:.25em;font-size:.82em;width:104px;text-align:center}
.face img{width:96px;height:96px;border-radius:10px;object-fit:cover;background:var(--card)}
.face:has(input[type=checkbox]:not(:checked)) img{opacity:.35}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:1em 0}
.card{display:flex;flex-direction:column;align-items:center;gap:.25em;padding:.8em .5em;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.card:hover{border-color:#3a3f4b}.card:has(input:checked){border-color:var(--acc2);background:#1a2233}
.card img{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--card)}
.card .nm{font-weight:600}
.dup{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:.8em 1em;margin:0 0 1em}
.dup .faces label{width:180px}.dup img{width:170px;height:170px;object-fit:contain;background:var(--card)}.best{outline:3px solid var(--ok);outline-offset:2px}
.cluster{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:.8em 1em;margin:0 0 1em}
.cluster p{margin:.7em 0 0;display:flex;flex-wrap:wrap;gap:.5em;align-items:center}

/* photo page */
.photo-nav{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;margin:0 0 .8em}
.photo-nav .sp{flex:1}
.pwrap{display:flex;justify-content:center}
.pbox{position:relative;display:inline-block;max-width:100%}.pbox img{max-height:82vh;display:block;border-radius:6px;box-shadow:var(--shadow)}
.fbox{position:absolute;border:2px solid #ffcc00aa;border-radius:6px;transition:border-color .15s}.fbox:hover{border-color:#fc0}
.fbox span{position:absolute;top:100%;left:-2px;margin-top:2px;background:#000c;color:#fff;font-size:.75em;padding:1px 6px;border-radius:4px;white-space:nowrap}.fbox.auto{border-style:dashed}
/* faces and the original scan are hidden until toggled (tasks#15) */
.vh{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fbox,.photo .photo-faces,.scanview{display:none}
#showfaces:checked ~ .pwrap .fbox{display:block}
#showfaces:checked ~ .photo-faces{display:flex}
#showscan:checked ~ .scanview{display:block}
#showfaces:checked ~ .photo-nav label[for=showfaces],#showscan:checked ~ .photo-nav label[for=showscan]{background:#1a2233;border-color:var(--acc2);color:var(--acc)}
#showfaces:focus-visible ~ .photo-nav label[for=showfaces],#showscan:focus-visible ~ .photo-nav label[for=showscan]{outline:2px solid var(--acc);outline-offset:2px}
.scanview{max-width:1100px;margin:1em auto}
.scanhead{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin-bottom:.7em}.scanhead .sp{flex:1}
.scanbox{position:relative;width:fit-content;max-width:100%;margin:0 auto}.scanbox img{display:block;max-height:80vh;border-radius:4px}
.scanbox svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* flag for review */
.pop{position:relative}.pop summary{list-style:none}.pop summary::-webkit-details-marker{display:none}
.pop[open] summary{background:#1a2233;border-color:var(--acc2);color:var(--acc)}
.popbody{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(22em,90vw);display:flex;flex-direction:column;gap:.45em;padding:1em;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);font-size:.92em}
.popbody label{display:flex;gap:.5em;align-items:baseline;cursor:pointer}.popbody textarea{width:100%}
.flagged{border-color:#6b5520;background:#2a2412;max-width:60em;margin:0 auto 1em}.flagged form{margin-left:.3em}
.note-ok{border-color:#2b5a3e;background:#15261c;max-width:60em;margin:0 auto 1em}
.top .count{display:inline-block;min-width:1.4em;padding:0 .4em;border-radius:999px;background:var(--warn);color:#000;font-size:.8em;text-align:center}
.review{display:flex;gap:1em;align-items:flex-start}.review .rthumb img{width:160px;height:160px;object-fit:contain;background:var(--card);border-radius:8px;display:block}
.review .rbody{flex:1;min-width:0}.review p{margin:0 0 .6em}
@media (max-width:600px){.review{flex-direction:column}}
.photo-faces{justify-content:center;margin:1.2em 0}
.photo-faces .face input[name=name]{width:96px;padding:.3em .4em;font-size:.95em}
.photo-faces .face span{display:flex;gap:3px}.photo-faces button{padding:.3em .6em}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(14em,1fr));gap:.8em;align-items:end;max-width:60em;margin:1em auto}
.notes label{display:flex;flex-direction:column;gap:.25em;font-size:.85em;color:var(--mut)}
.notes label.wide{grid-column:1/-1}.notes textarea{width:100%;min-height:3em}
.notes .hint{grid-column:1/-1;font-size:.88em}
.meta{text-align:center;font-size:.85em}
.danger{color:#ff8a80}

/* tables */
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%}td,th{padding:.5em .8em;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{color:var(--mut);font-weight:600;font-size:.85em;text-transform:uppercase;letter-spacing:.04em}
tr:hover td{background:#ffffff05}
td form{margin:0;display:inline-flex;gap:.3em;flex-wrap:wrap;align-items:center}

/* login */
.login{max-width:26em;margin:18vh auto;text-align:center;padding:2.5em 2em;background:var(--bg2);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.login h1{margin:.3em 0 .6em}.login svg{width:48px;height:48px;color:var(--acc)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:#000e;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;touch-action:pan-y}
/* [hidden] must win over display:flex, or the closed (transparent) lightbox
   keeps covering the page and swallows every click (tasks#14 comment). */
.lb[hidden]{display:none}.lb:not(.show){pointer-events:none}
.lb.show{opacity:1}
.lb img{max-width:100vw;max-height:100vh;max-height:100dvh;object-fit:contain;user-select:none;-webkit-user-drag:none;transition:opacity .2s}
.lb .lb-bar{position:absolute;top:0;left:0;right:0;display:flex;gap:.4em;align-items:center;padding:.6em max(.8em,env(safe-area-inset-left));background:linear-gradient(#000b,transparent)}
.lb .lb-bar .sp{flex:1}.lb .lb-bar span{color:var(--mut);font-size:.9em}
.lb button,.lb .btn{background:#ffffff1a;border-color:transparent;color:#fff;backdrop-filter:blur(6px)}
.lb button:hover,.lb .btn:hover{background:#ffffff33}
.lb .lb-prev,.lb .lb-next{position:absolute;top:50%;transform:translateY(-50%);font-size:1.5em;width:2em;height:2em;padding:0}
.lb .lb-prev{left:.5em}.lb .lb-next{right:.5em}
@media (hover:none){.lb .lb-prev,.lb .lb-next{display:none}}
body.noscroll{overflow:hidden}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}