/* FALSE FACE — photographic archive / darkroom aesthetic */

:root{
  --paper:#f3f1ec;
  --paper-dim:#e7e4dc;
  --ink:#161513;
  --ink-soft:#57534a;
  --line:#c9c4b8;
  --accent:#b3402c;
  --danger:#9c2b1f;
  --card-bg:#ffffff;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
  --sans: -apple-system, 'SF Pro Text', 'Segoe UI', ui-sans-serif, Helvetica, Arial, sans-serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --tap-min: 44px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
.hidden{ display:none !important; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- splash ---------- */
.splash{
  position:fixed; inset:0; z-index:100;
  background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
  transition:opacity .4s ease;
}
.splash.is-hidden{ opacity:0; pointer-events:none; }
.splash-symbol{ width:15vw; max-width:88px; min-width:56px; }
.splash-symbol .frag{ opacity:0; transform:translateY(6px); animation:frag-in .5s ease forwards; }
.splash-symbol .frag-a{ animation-delay:.05s; }
.splash-symbol .frag-b{ animation-delay:.15s; }
.splash-symbol .frag-c{ animation-delay:.25s; }
.splash-symbol .frag-d{ animation-delay:.35s; }
@keyframes frag-in{ to{ opacity:1; transform:translateY(0); } }
.splash-wordmark{
  margin:0; font-family:var(--mono); font-size:0.85rem; letter-spacing:0.4em; font-weight:700;
  opacity:0; animation:frag-in .5s ease forwards; animation-delay:.5s;
}

/* ---------- topbar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(0.9rem + var(--safe-t)) calc(1.25rem + var(--safe-r)) 0.9rem calc(1.25rem + var(--safe-l));
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:var(--paper);
  z-index:20;
}
.brand{ display:flex; align-items:center; gap:0.55rem; min-width:0; }
.brand-symbol{ width:22px; height:22px; flex-shrink:0; }
.wordmark{
  margin:0;
  font-family:var(--mono);
  font-size:0.82rem;
  letter-spacing:0.28em;
  font-weight:700;
  white-space:nowrap;
}
.modenav{ display:flex; gap:1.1rem; }
.mode-btn{
  background:none;
  border:none;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.13em;
  color:var(--ink-soft);
  padding:0.6rem 0.1rem;
  min-height:var(--tap-min);
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.mode-btn:hover{ color:var(--ink); }
.mode-btn.is-active{ color:var(--ink); border-bottom-color:var(--accent); }

main{ min-height:calc(100vh - 64px); padding-bottom:var(--safe-b); }

.view{ animation:view-in .2s ease; }
@keyframes view-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* standalone (installed) PWA: a touch more breathing room under the notch/status bar */
.standalone .topbar{ padding-top:calc(1.1rem + var(--safe-t)); }

/* ---------- shared controls ---------- */
.ctrl-btn{
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.12em;
  padding:0.75rem 1.4rem;
  transition:background .15s ease, color .15s ease, opacity .15s ease;
}
.ctrl-btn:hover:not(:disabled){ background:var(--ink); color:var(--paper); }
.ctrl-btn:disabled{ opacity:0.35; cursor:default; }
.ctrl-primary{ background:var(--ink); color:var(--paper); }
.ctrl-primary:hover:not(:disabled){ background:var(--accent); border-color:var(--accent); color:#fff; }
.ctrl-ghost{ }
.ctrl-danger{ border-color:var(--danger); color:var(--danger); }
.ctrl-danger:hover{ background:var(--danger); color:#fff; }

/* ================= CAPTURE ================= */
.view-capture{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.4rem 1.2rem calc(2.2rem + var(--safe-b));
  gap:1.4rem;
}
.stage{
  position:relative;
  width:min(720px, 96vw);
  aspect-ratio:3/4;
  background:#0d0c0b;
  overflow:hidden;
  border-radius:2px;
}
@media (max-width: 640px){
  .stage{ width:100vw; aspect-ratio:3/4.3; border-radius:0; margin-left:calc(-1 * var(--safe-l)); margin-right:calc(-1 * var(--safe-r)); }
  .view-capture{ padding-left:0; padding-right:0; padding-top:0; }
}
.stage video, .stage canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
#overlay-canvas{ pointer-events:auto; object-fit:contain; background:transparent; }
.stage-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8a857a;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.15em;
  text-align:center;
  padding:2rem;
}

.capture-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2.2rem;
}
.shutter{
  width:64px; height:64px;
  border-radius:50%;
  border:2px solid var(--ink);
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.shutter span{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--accent);
  transition:transform .12s ease;
}
.shutter:active span{ transform:scale(0.85); }

.captured-controls{ width:min(720px,94vw); display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }

.analysis-status{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.18em; color:var(--ink-soft);
}

.detections{ display:flex; flex-direction:column; gap:0.4rem; }
.detections.secondary{ width:min(720px,94vw); }
.detection-chip{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; color:var(--ink-soft);
  cursor:pointer; text-align:left; padding:0.6rem 0; min-height:var(--tap-min); display:flex; align-items:center;
}
.detection-chip.is-selected{ color:var(--accent); font-weight:700; }

.view-other-btn{
  background:none; border:none; font-family:var(--mono); font-size:0.64rem; letter-spacing:0.15em;
  color:var(--ink-soft); text-decoration:underline; padding:0.7rem 0; min-height:var(--tap-min);
}
.view-other-btn:hover{ color:var(--ink); }

.classify-panel{
  width:min(720px,94vw);
  text-align:center;
}
.classify-label{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.2em; color:var(--ink-soft); margin-bottom:0.7rem;
}
.classify-options{ display:flex; gap:0.6rem; justify-content:center; flex-wrap:wrap; }
.classify-options button{
  border:1px solid var(--ink); background:transparent; font-family:var(--mono); font-size:0.68rem;
  letter-spacing:0.1em; padding:0.7rem 1.1rem; min-height:var(--tap-min);
}
.classify-options button:hover{ background:var(--ink); color:var(--paper); }
.classify-options button.is-active{ background:var(--ink); color:var(--paper); }
.classify-actions{ display:flex; gap:0.8rem; justify-content:center; margin-top:1rem; }

.debug-panel{
  width:min(900px,96vw); max-height:40vh; overflow:auto; background:#111; color:#9fe6a0;
  font-family:var(--mono); font-size:0.6rem; line-height:1.5; padding:1rem; white-space:pre-wrap;
}

/* ================= ARCHIVE ================= */
.view-archive{ padding:1.6rem 1.2rem calc(2.2rem + var(--safe-b)); }
.filter-row{ display:flex; gap:1.4rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.filter-btn{
  background:none; border:none; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em;
  color:var(--ink-soft); padding:0.55rem 0.1rem; min-height:var(--tap-min); border-bottom:2px solid transparent;
}
.filter-btn.is-active{ color:var(--ink); border-bottom-color:var(--accent); }

.contact-sheet{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:2px;
  background:var(--line);
}
.sheet-item{
  position:relative;
  aspect-ratio:1;
  background:var(--card-bg);
  overflow:hidden;
  cursor:pointer;
}
.sheet-item img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(0.15); transition:filter .2s ease, transform .3s ease; }
.sheet-item.is-rejected img{ opacity:0.35; filter:grayscale(0.7); }
.sheet-item.is-rejected .tag{ color:#e8b8ae; }
.sheet-item:hover img{ filter:grayscale(0); transform:scale(1.04); }
.sheet-item .tag{
  position:absolute; left:0; bottom:0; right:0;
  font-family:var(--mono); font-size:0.58rem; letter-spacing:0.1em;
  background:rgba(22,21,19,0.72); color:#f3f1ec; padding:0.3rem 0.45rem;
}
.empty-note{ font-family:var(--mono); font-size:0.72rem; color:var(--ink-soft); letter-spacing:0.05em; padding:2rem 0; }

.detail-overlay{
  position:fixed; inset:0; background:rgba(15,14,12,0.88);
  display:flex; align-items:center; justify-content:center; z-index:50;
  padding:calc(1.2rem + var(--safe-t)) calc(1.2rem + var(--safe-r)) calc(1.2rem + var(--safe-b)) calc(1.2rem + var(--safe-l));
}
.detail-card{
  background:var(--paper); max-width:820px; width:100%; max-height:90vh; overflow:auto;
  padding:1.6rem; position:relative;
}
.detail-close{
  position:absolute; top:0.5rem; right:0.6rem; background:none; border:none; font-size:1.6rem; color:var(--ink);
  line-height:1; width:var(--tap-min); height:var(--tap-min);
}
.detail-images{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
.detail-images > div{ flex:1 1 260px; }
.detail-images img{ width:100%; height:auto; display:block; background:#000; }
.detail-caption{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.15em; color:var(--ink-soft); display:block; margin-bottom:0.35rem; }
.detail-meta{ font-family:var(--mono); font-size:0.68rem; color:var(--ink-soft); line-height:1.8; margin-top:1.2rem; white-space:pre-wrap; }
.detail-actions{ display:flex; align-items:center; gap:1rem; margin-top:1.2rem; flex-wrap:wrap; }
.detail-actions label{ font-family:var(--mono); font-size:0.65rem; letter-spacing:0.1em; display:flex; flex-direction:column; gap:0.35rem; }
.detail-actions select{ font-family:var(--mono); padding:0.4rem; border:1px solid var(--ink); background:var(--paper); }

/* ================= ASSEMBLE ================= */
.view-assemble{
  display:flex; flex-direction:column; align-items:center; padding:1.4rem 1.2rem calc(2.2rem + var(--safe-b)); gap:1rem;
}
.portrait-stage{
  position:relative;
  width:min(920px, 96vw);
  background:#111;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 60px rgba(0,0,0,0.25);
}
#portrait-canvas{ width:100%; height:auto; display:block; }
.likeness-readout{
  font-family:var(--mono); font-size:0.8rem; letter-spacing:0.15em; color:var(--ink-soft);
}
.likeness-readout b{ color:var(--accent); }
.assemble-controls{ display:flex; gap:0.8rem; }
.portraits-strip{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(90px,1fr));
  gap:2px; width:min(920px,96vw); margin-top:0.6rem; background:var(--line);
}
.portraits-strip img{ width:100%; aspect-ratio:9/11; object-fit:cover; display:block; }

@media (max-width: 640px){
  .wordmark{ font-size:0.75rem; }
  .modenav{ gap:0.9rem; }
}

/* ================= MASK PREVIEW / REFINE (capture review) ================= */
.mask-preview-wrap{
  display:flex; justify-content:center; margin-bottom:0.6rem;
}
#fragment-preview-canvas{
  max-width:min(320px, 78vw); max-height:320px; width:auto; height:auto;
  background:
    linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd),
    linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd);
  background-size:16px 16px; background-position:0 0, 8px 8px;
  border:1px solid var(--line);
}
.mask-refine-btn{ display:block; margin:0 auto 1rem; min-height:var(--tap-min); }
.refine-hint{
  text-align:center; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.08em;
  color:var(--accent); margin:-0.3rem 0 0.6rem;
}

/* ================= MASK EDITOR MODAL ================= */
.mask-modal{
  position:fixed; inset:0; z-index:80; background:rgba(15,14,12,0.92);
  display:flex; align-items:center; justify-content:center;
  padding:calc(1rem + var(--safe-t)) calc(1rem + var(--safe-r)) calc(1rem + var(--safe-b)) calc(1rem + var(--safe-l));
}
.mask-modal-inner{
  background:var(--paper); padding:1.2rem; max-width:520px; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:0.9rem;
}
.mask-modal-label{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.2em; color:var(--ink-soft); align-self:flex-start; }
#mask-modal-canvas{
  max-width:100%; touch-action:none; cursor:crosshair;
  background:
    linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd),
    linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%,#ddd);
  background-size:16px 16px; background-position:0 0, 8px 8px;
}
.mask-modal-controls{ display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; justify-content:center; width:100%; }
.mask-mode-btn{
  border:1px solid var(--ink); background:transparent; font-family:var(--mono); font-size:0.64rem;
  letter-spacing:0.08em; padding:0.6rem 0.9rem; min-height:var(--tap-min);
}
.mask-mode-btn.is-active{ background:var(--ink); color:var(--paper); }
.mask-modal-hint{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.15em; color:var(--ink-soft); }
#mask-brush-size{ flex:1 1 90px; min-width:80px; accent-color:var(--accent); }
.mask-modal-actions{ display:flex; gap:0.8rem; width:100%; justify-content:center; }

.detail-actions button#detail-approve-toggle.is-rejected{ border-color:var(--danger); color:var(--danger); }