/* ============================================================
   06-binders.css
   The binder shelf and the binder editor.
   ------------------------------------------------------------
   Load order matters — see index.html. These files are the old
   app.css split at section boundaries, in the original order, so
   the cascade is unchanged.
   ============================================================ */
/* ============================================================
   BINDER SHELF
   ============================================================ */
.binder-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px;}
.binder-tile{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r3); overflow:hidden; cursor:pointer; color:var(--text);
  font-family:inherit; text-align:left; display:flex; flex-direction:column;
  transition:border-color .16s, transform .13s, box-shadow .16s;
}
.binder-tile:hover{border-color:var(--line-3); transform:translateY(-3px); box-shadow:var(--shadow);}
.binder-tile.all{border-color:rgba(var(--accent-rgb),.34);}
.btile-art{height:128px; position:relative; background:var(--bg-2); overflow:hidden;}
.btile-art img{width:100%; height:100%; object-fit:cover; display:block;}
.btile-blank{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); font-size:30px; opacity:.5;
}
.btile-fade{position:absolute; inset:0; background:linear-gradient(0deg,var(--surface) 2%,transparent 62%);}
.btile-body{padding:12px 15px 15px;}
.btile-name{
  font-family:'Barlow Condensed',sans-serif; font-size:19px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; line-height:1.1; margin-bottom:4px;
}
.binder-tile.all .btile-name{color:var(--accent-hi);}
.btile-meta{font-size:12px; color:var(--text-faint); font-variant-numeric:tabular-nums;}
.btile-edit{position:absolute; top:9px; right:9px; z-index:2; opacity:0; transition:opacity .15s;}
.binder-tile:hover .btile-edit, .binder-tile:focus-within .btile-edit{opacity:1;}
@media (hover:none){ .btile-edit{opacity:1;} }

/* collection header inside a binder */
.coll-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.coll-head .spacer{margin-left:auto;}
.coll-title{
  font-family:'Barlow Condensed',sans-serif; font-size:27px; font-weight:700;
  text-transform:uppercase; letter-spacing:.045em;
}

/* cards plus the other binders on the right */
.coll-layout{display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:20px; align-items:start;}
.coll-main{min-width:0;}
.coll-aside{position:sticky; top:20px;}
.aside-binder{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:1px solid transparent; color:var(--text-dim);
  padding:7px 8px; border-radius:var(--r1); font-family:inherit; transition:all .14s;
}
.aside-binder:hover{background:var(--surface-2); color:var(--text);}
.aside-binder.on{background:var(--accent-soft); border-color:rgba(var(--accent-rgb),.3); color:var(--accent-hi);}
.ab-thumb{
  width:38px; height:28px; flex:0 0 38px; border-radius:5px; overflow:hidden;
  background:var(--surface-3); display:block;
}
.ab-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ab-text{display:flex; flex-direction:column; min-width:0; line-height:1.25;}
.ab-name{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ab-count{font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums;}

/* binder editor */
.binder-name-input{
  width:100%; background:var(--bg-2); border:1px solid var(--line-2); color:var(--text);
  padding:9px 12px; border-radius:var(--r1); font-family:inherit; font-size:14px;
}
.binder-name-input:focus{outline:none; border-color:var(--accent);}
.art-preview{
  border:1px solid var(--line-2); border-radius:var(--r2); overflow:hidden; background:var(--bg-2);
}
.art-preview img{width:100%; height:132px; object-fit:cover; display:block;}
.art-cap{font-size:11.5px; color:var(--text-faint); padding:7px 11px;}
.art-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px;
  max-height:240px; overflow-y:auto; margin-top:4px;
}
.art-opt{
  padding:0; border:2px solid transparent; border-radius:var(--r1); overflow:hidden;
  background:var(--bg-2); cursor:pointer; line-height:0;
}
.art-opt img{width:100%; height:66px; object-fit:cover; display:block;}
.art-opt:hover{border-color:var(--line-3);}
.art-opt.on{border-color:var(--accent);}

@media(max-width:1150px){
  .coll-layout{grid-template-columns:1fr;}
  .coll-aside{position:static; order:-1;}
  .coll-aside .panel-body{
    display:flex; gap:8px; overflow-x:auto; padding:10px;
    touch-action:pan-x; overscroll-behavior-x:contain;
  }
  .aside-binder{flex:0 0 auto; width:auto;}
  .coll-aside .btn{display:none;}
}

/* ---------- account ---------- */
.auth-tabs{width:100%;}
.auth-tabs button{flex:1;}
.avatar{
  width:46px; height:46px; flex:0 0 46px; border-radius:50%; overflow:hidden;
  background:var(--surface-3); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700; color:var(--accent-hi);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.acct-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:14px;}
.acct-stat{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r1);
  padding:9px 11px; text-align:center;
}
.acct-stat .n{
  font-family:'Barlow Condensed',sans-serif; font-size:19px; font-weight:700;
  color:var(--accent-hi); line-height:1; font-variant-numeric:tabular-nums;
}
.acct-stat .l{font-size:10.5px; color:var(--text-faint); margin-top:3px;}
@media(max-width:960px){ .acct-stats{grid-template-columns:repeat(2,1fr);} }

/* live detection outline drawn over the camera feed */
.scan-overlay{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2;}

/* ---------- import view ---------- */
.col-note{font-size:12.5px; color:var(--text-faint); margin-top:12px; line-height:1.6;}