/* ==========================================================================
   Shiny Kiwi: binder builder styles
   Shared tokens/header/footer/buttons/.panel live in main.css and
   centering-tool.css. Deliberately uses the site's cream/green/gold palette,
   not pkmnbindr's dark/blue theme.
   ========================================================================== */

.binder-app{
  display:grid;
  grid-template-columns:56px 1fr 300px;
  gap:20px;
  align-items:start;
}

/* --- icon rail --- */
.binder-rail{
  display:flex; flex-direction:column; gap:8px;
  background:var(--cream-panel); border:1px solid #E4DFC8; border-radius:14px;
  padding:10px 6px;
}
.rail-btn{
  width:40px; height:40px; border-radius:10px; border:1px solid transparent;
  background:none; color:var(--green-deep); cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.rail-btn svg{width:20px; height:20px;}
.rail-btn:hover{background:#EFE9D3; border-color:#E4DFC8;}
.rail-btn.danger{color:var(--bad);}
.rail-btn.danger:hover{background:rgba(176,74,58,.1);}
.rail-btn:disabled{opacity:.35; cursor:not-allowed;}
.rail-btn:disabled:hover{background:none; border-color:transparent;}

/* --- main grid area --- */
.binder-main{min-width:0;}
.binder-toolbar{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:18px; flex-wrap:wrap;
}
.page-nav-btn{
  width:34px; height:34px; border-radius:8px; border:1px solid #E4DFC8;
  background:var(--cream-panel); color:var(--green-deep); font-size:1.1rem;
  cursor:pointer;
}
.page-nav-btn:hover{background:#EFE9D3;}
.page-nav-btn:disabled{opacity:.35; cursor:not-allowed;}
.page-title-block{display:flex; align-items:center; gap:10px;}
.page-name-input{
  font-family:'Baloo 2'; font-weight:700; font-size:1.05rem; color:var(--green-deep);
  border:1px solid transparent; background:none; padding:4px 8px; border-radius:8px;
  max-width:220px; text-align:center;
}
.page-name-input:hover, .page-name-input:focus{border-color:#E4DFC8; background:var(--cream-panel); outline:none;}
.page-counter{font-family:'Space Mono', monospace; font-size:.82rem; color:#8a8877; white-space:nowrap;}

.binder-grid{
  display:grid;
  grid-template-columns:repeat(var(--cols, 3), 1fr);
  gap:14px;
  max-width:640px;
  margin:0 auto;
}
.binder-slot{
  position:relative; aspect-ratio:63.5 / 88.9; border-radius:8px;
  background:var(--cream-panel); overflow:hidden; border:1px solid #E4DFC8;
}
.binder-grid.show-outline .binder-slot.empty{
  border:2px dashed #C9C2A4; background:transparent;
}
.binder-slot img{width:100%; height:100%; object-fit:cover; display:block;}
.binder-slot.drag-over{outline:2px solid var(--gold); outline-offset:2px;}

.slot-price{
  position:absolute; left:4px; bottom:4px;
  background:rgba(24,23,18,.82); color:#F3EFDD;
  font-family:'Space Mono', monospace; font-size:.66rem; font-weight:700;
  padding:2px 6px; border-radius:6px; line-height:1.4;
}
.slot-badge{
  position:absolute; right:4px; top:4px;
  background:var(--gold); color:var(--seed);
  font-family:'Space Mono', monospace; font-size:.6rem; font-weight:700;
  padding:2px 5px; border-radius:5px; letter-spacing:.03em; line-height:1.4;
}
.slot-remove{
  position:absolute; top:4px; left:4px;
  width:20px; height:20px; border-radius:50%; border:none;
  background:rgba(24,23,18,.75); color:#F3EFDD; font-size:.85rem; line-height:1;
  cursor:pointer; display:none; align-items:center; justify-content:center;
}
.binder-slot:hover .slot-remove{display:flex;}

/* --- right panel --- */
.binder-side{display:flex; flex-direction:column; gap:20px;}
.binder-search input[type="text"], .binder-search input[type="url"]{
  width:100%; padding:10px 12px; border:1px solid #C9C2A4; border-radius:10px;
  font-family:'Work Sans'; font-size:.92rem; background:var(--cream);
}
.search-results{
  margin-top:10px; max-height:420px; overflow-y:auto;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; align-content:start;
}
.search-result-item{
  cursor:grab; border-radius:8px; overflow:hidden; border:1px solid #E4DFC8;
  background:var(--cream); padding:0;
}
.search-result-item img{width:100%; display:block;}
.search-result-label{
  padding:6px 8px 8px; display:flex; flex-direction:column; gap:2px;
}
.search-result-name{
  font-family:'Work Sans'; font-weight:700; font-size:.78rem; color:var(--charcoal);
  line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.search-result-sub{
  font-family:'Work Sans'; font-size:.7rem; color:#8a8877;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.search-load-more{
  grid-column:1 / -1; margin-top:2px; padding:9px 12px; border-radius:8px;
  border:1px solid #C9C2A4; background:var(--cream-panel); color:var(--green-deep);
  font-family:'Work Sans'; font-weight:700; font-size:.82rem; cursor:pointer;
  transition:background .15s;
}
.search-load-more:hover{background:var(--cream);}
.search-status{font-size:.82rem; color:#8a8877; margin-top:10px;}
.search-hint{font-size:.74rem; color:#8a8877; margin-top:6px; line-height:1.4;}

.link-btn{
  margin-top:10px; background:none; border:none; color:var(--green);
  font-size:.82rem; font-weight:600; text-decoration:underline; cursor:pointer; padding:0;
}
.url-add-row{display:flex; gap:8px; margin-top:8px;}
.url-add-row input{flex:1;}

.setting-block{margin-top:4px;}
.setting-label{
  font-family:'Space Mono', monospace; text-transform:uppercase; font-size:.7rem;
  letter-spacing:.08em; color:var(--green); font-weight:700; margin-bottom:8px;
}
.pill-group{display:flex; gap:6px; flex-wrap:wrap;}
.pill{
  padding:7px 14px; border-radius:999px; border:1px solid #C9C2A4; background:var(--cream-panel);
  font-size:.82rem; font-weight:600; cursor:pointer; color:var(--charcoal);
}
.pill.active{background:var(--gold); border-color:var(--gold); color:var(--seed);}
.toggle-row{display:flex; align-items:center; gap:8px; font-size:.85rem; margin-top:8px; font-weight:500;}
.toggle-row input{width:16px; height:16px;}

.binder-credit{font-size:.72rem; color:#8a8877; line-height:1.5; border-top:1px solid #E4DFC8; padding-top:14px;}

/* --- pages manager modal --- */
.pages-modal{
  position:fixed; inset:0; background:rgba(24,23,18,.55);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.pages-modal[hidden]{display:none;}
.pages-modal-inner{
  background:var(--cream-panel); border-radius:16px; max-width:420px; width:100%;
  max-height:70vh; display:flex; flex-direction:column; padding:20px;
}
.pages-modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.pages-modal-head h3{font-family:'Baloo 2'; color:var(--green-deep); font-size:1.2rem;}
.pages-list{overflow-y:auto;}
.pages-list-item{display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; cursor:pointer;}
.pages-list-item:hover{background:#EFE9D3;}
.pages-list-item.current{background:rgba(166,135,63,.15);}
.pages-list-item span.page-num{font-family:'Space Mono', monospace; font-size:.78rem; color:#8a8877; flex:none;}
.pages-list-item input{
  flex:1; border:1px solid transparent; background:none; font-size:.9rem;
  border-radius:6px; padding:4px 6px; font-family:'Work Sans';
}
.pages-list-item input:focus{border-color:#C9C2A4; background:var(--cream); outline:none;}
.pages-list-item .del-page-btn{
  background:none; border:none; color:var(--bad); cursor:pointer; font-size:.9rem; padding:4px 8px; flex:none;
}

@media (max-width:900px){
  .binder-app{grid-template-columns:1fr;}
  .binder-rail{
    flex-direction:row; width:auto; overflow-x:auto; padding:8px;
  }
}
@media (max-width:480px){
  .binder-grid{gap:8px;}
}