/* DupFind — "Contact sheet" design system.
   Light table white, sorting-pencil blue, keeper green, bin red.
   Onest for the plain-spoken UI of a tool that deletes things.  */

:root{
  --lighttable:#f4f5f7;
  --sheetwhite:#ffffff;
  --graphite2:#1f2328;
  --pencilgrey2:#767c86;
  --cutline:#e3e5e9;
  --sortblue:#2f6fed;
  --sortblue-deep:#2258c9;
  --keepgreen:#12a05f;
  --binred:#d64545;
  --onest:'Onest',-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--lighttable);color:var(--graphite2);font-family:var(--onest);
  font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--sortblue-deep)}
h1,h2,h3{line-height:1.15;font-weight:700;letter-spacing:-.015em}
b,strong{font-weight:650}

/* top strip */
.viewer{display:flex;align-items:center;gap:14px;padding:13px 20px;
  border-bottom:1px solid var(--cutline);flex-wrap:wrap;background:var(--sheetwhite)}
.viewer .loupe{display:flex;align-items:center;gap:8px;font-weight:800;
  font-size:1.1rem;color:var(--graphite2);text-decoration:none}
.viewer .loupe em{font-style:normal;color:var(--sortblue)}
.viewer .caption2{font-size:.74rem;color:var(--pencilgrey2);margin-right:auto}
.viewer nav{display:flex;gap:16px;font-size:.9rem}
.viewer nav a{text-decoration:none;color:var(--graphite2);border-bottom:2px solid transparent;padding-bottom:2px}
.viewer nav a.here{border-bottom-color:var(--sortblue)}

/* opener */
.pileopener{max-width:960px;margin:0 auto;padding:30px 20px 6px}
.pileopener h1{font-size:clamp(1.7rem,5.2vw,2.6rem)}
.pileopener h1 em{font-style:normal;color:var(--sortblue)}
.pileopener .pitch{margin-top:10px;max-width:650px;color:var(--pencilgrey2);font-size:1rem}
.pileopener .pitch b{color:var(--graphite2)}

/* sorting table */
.sortingtable{max-width:960px;margin:16px auto 0;padding:0 20px}
.tabletop{background:var(--sheetwhite);border:1px solid var(--cutline);border-radius:12px;overflow:hidden}

.pickzone{padding:28px 22px;text-align:center}
.pickzone p{color:var(--pencilgrey2);font-size:.92rem;max-width:560px;margin:0 auto 14px}
.pickzone p b{color:var(--graphite2)}
.optline{font-size:.82rem;color:var(--pencilgrey2);margin-top:10px}

.sortbtn{font-family:var(--onest);font-weight:700;font-size:.95rem;border-radius:10px;
  border:1.5px solid var(--sortblue-deep);background:var(--sortblue);color:#fff;
  padding:11px 24px;cursor:pointer}
.sortbtn:hover{background:var(--sortblue-deep)}
.sortbtn.chalk{background:transparent;color:var(--sortblue-deep)}
.sortbtn.chalk:hover{background:#eaf0fd}
.sortbtn.small{font-size:.8rem;padding:7px 13px}
.sortbtn.bin{background:var(--binred);border-color:#b53b3b}
.sortbtn.bin:hover{background:#c23c3c}

.tablestatus{padding:0 22px 14px;font-size:.86rem;color:var(--pencilgrey2);text-align:center}
.tablestatus.err{color:var(--binred)}

.progresswrap{padding:0 22px 18px}
.progressbar-bg{height:8px;background:var(--cutline);border-radius:999px;overflow:hidden}
.progressbar-bg div{height:100%;background:var(--sortblue);width:0;transition:width .2s}
.progresstext{font-size:.78rem;color:var(--pencilgrey2);margin-top:6px;text-align:center}

/* controls + results */
.resultbar{display:flex;gap:12px;align-items:center;padding:14px 18px;border-top:1px solid var(--cutline);flex-wrap:wrap}
.resultbar label{font-size:.78rem;color:var(--pencilgrey2)}
.resultbar select{padding:7px 10px;border:1px solid var(--cutline);border-radius:8px;background:#fff;font-size:.88rem}
.resultbar .summary{font-size:.9rem;font-weight:650}
.resultbar .push4{flex:1}

.wall{padding:6px 18px 18px}
.gbox{border:1px solid var(--cutline);border-radius:12px;margin:12px 0;overflow:hidden}
.ghead{display:flex;gap:10px;align-items:baseline;padding:10px 14px;background:#fafbfc;border-bottom:1px solid var(--cutline);flex-wrap:wrap}
.ghead b{font-size:.92rem}
.ghead span{font-size:.76rem;color:var(--pencilgrey2)}
.gstrip{display:flex;gap:10px;padding:12px 14px;overflow-x:auto}
.pcard{flex:none;width:170px;border:2px solid var(--cutline);border-radius:10px;padding:8px;cursor:pointer;background:#fff}
.pcard.keeping{border-color:var(--keepgreen);background:#f2fbf6}
.pcard img{width:100%;height:110px;object-fit:cover;border-radius:6px;background:var(--lighttable)}
.pcard input{margin-right:6px;vertical-align:-1px}
.pmeta{margin-top:6px}
.pmeta .pn{display:block;font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmeta .ps{display:block;font-size:.7rem;color:var(--pencilgrey2)}
.pcard.keeping .pn::after{content:" · keeping";color:var(--keepgreen);font-weight:700}

.actionrow{display:flex;gap:10px;align-items:center;padding:14px 18px;border-top:1px solid var(--cutline);flex-wrap:wrap}
.nohandles{font-size:.82rem;color:var(--pencilgrey2);max-width:540px}

/* content */
.envelope2{max-width:960px;margin:0 auto;padding:24px 20px 40px}
.envelope2 h2{font-size:1.4rem;margin:44px 0 4px}
.envelope2 .whisper2{color:var(--pencilgrey2);font-size:.9rem;margin-bottom:14px}
.envelope2 p{margin:12px 0;max-width:700px}
.envelope2 ol,.envelope2 ul{margin:12px 0 12px 22px;max-width:680px}
.envelope2 li{margin:8px 0}

.negcard{background:var(--sheetwhite);border:1px solid var(--cutline);border-left:4px solid var(--sortblue);
  border-radius:10px;padding:18px 20px;margin:30px 0}
.negcard .sig{color:var(--pencilgrey2);font-size:.85rem;margin-top:10px}

.checklist2{list-style:none;margin-left:0!important}
.checklist2 li{padding-left:26px;position:relative}
.checklist2 li::before{content:"◱";position:absolute;left:2px;color:var(--sortblue)}

.qa h3{font-size:1.05rem;margin:22px 0 6px}
.qa p{margin-top:4px}

.sleeve{display:grid;gap:12px;margin-top:16px}
.sleeve a{display:block;background:var(--sheetwhite);border:1px solid var(--cutline);border-radius:10px;
  padding:14px 16px;text-decoration:none;color:var(--graphite2)}
.sleeve a:hover{border-color:var(--sortblue)}
.sleeve b{font-size:1.02rem}
.sleeve span{display:block;font-size:.88rem;color:var(--pencilgrey2);margin-top:3px}
.sleeve time{display:block;font-size:.72rem;color:var(--pencilgrey2);margin-top:8px;text-transform:uppercase;letter-spacing:.06em}

dl.sweeplog{max-width:680px}
dl.sweeplog dt{font-weight:700;margin-top:14px;color:var(--sortblue-deep)}
dl.sweeplog dd{margin-left:0}

/* articles */
article.sheetnote{max-width:720px;margin:0 auto;padding:30px 20px 50px}
article.sheetnote h1{font-size:clamp(1.5rem,4.6vw,2.1rem);margin-bottom:6px}
article.sheetnote .byline{color:var(--pencilgrey2);font-size:.85rem;margin-bottom:22px}
article.sheetnote h2{font-size:1.22rem;margin:30px 0 8px}
article.sheetnote p{margin:13px 0}
article.sheetnote ol{margin:12px 0 12px 22px}
article.sheetnote li{margin:9px 0}
article.sheetnote figure{margin:26px 0;text-align:center}
article.sheetnote figure svg{max-width:100%;height:auto}
article.sheetnote figcaption{font-size:.8rem;color:var(--pencilgrey2);margin-top:8px}
article.sheetnote code{background:var(--sheetwhite);border:1px solid var(--cutline);border-radius:4px;padding:1px 6px;font-size:.85em}

/* footer */
footer.filedaway{border-top:1px solid var(--cutline);margin-top:30px;padding:22px 20px;
  max-width:960px;margin-left:auto;margin-right:auto}
footer.filedaway .links{display:flex;gap:16px;font-size:.88rem;margin-bottom:10px;flex-wrap:wrap}
footer.filedaway p{font-size:.8rem;color:var(--pencilgrey2)}

@media (max-width:560px){
  .viewer .caption2{display:none}
  .pcard{width:140px}
}