/* bands_designer.css — the band designer's own skin.

   It borrows the studio's tokens (--card, --line, --accent, the alpha ladder)
   and adds nothing to the palette, so it stays right in both themes and in
   both directions without a second set of rules. Everything is scoped under
   .bd-* : the settings panel it hooks into is untouched apart from the one
   button and the drawer that folds the JSON away. */

.bd-wrap{
  position:fixed; inset:0; z-index:1200; display:none;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  padding:24px; overflow:auto;
}
.bd-wrap.on{display:flex; align-items:flex-start; justify-content:center}
body.bd-open{overflow:hidden}

.bd-sheet{
  width:min(1180px,100%); max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-modal); overflow:hidden;
}
.bd-head{
  display:flex; align-items:center; gap:14px; padding:14px 18px;
  border-bottom:1px solid var(--line); background:var(--card2);
}
.bd-ttl{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.bd-ttl b{font-size:15px; color:var(--ink-hi)}
.bd-sub{font-size:12px; color:var(--dim)}
.bd-tabs{display:flex; gap:4px; background:var(--l2); padding:3px; border-radius:9px}
.bd-tab{
  border:0; background:transparent; color:var(--dim); cursor:pointer;
  padding:6px 14px; border-radius:7px; font:inherit; font-size:12.5px;
}
.bd-tab.on{background:var(--accent-w); color:var(--accent); font-weight:600}
.bd-x{
  border:0; background:transparent; color:var(--dim); cursor:pointer;
  font-size:15px; padding:4px 8px; border-radius:7px;
}
.bd-x:hover{background:var(--l3); color:var(--ink)}

.bd-body{display:flex; gap:0; flex:1; min-height:0}
.bd-controls{
  flex:0 0 42%; max-width:460px; overflow:auto; padding:16px 18px 24px;
  border-inline-end:1px solid var(--line);
}
.bd-preview{flex:1; min-width:0; overflow:auto; padding:16px 18px 24px; background:var(--well)}
.bd-controls h4,.bd-preview h4{
  margin:18px 0 8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); font-weight:700;
}
.bd-controls h4:first-child,.bd-preview h4:first-child{margin-top:0}

.bd-row{display:flex; align-items:center; gap:10px; margin:7px 0}
.bd-row label{flex:1; font-size:12.5px; color:var(--ink); min-width:0}
.bd-row select,.bd-row input[type=text],.bd-row input[type=number]{
  flex:0 0 46%; max-width:230px; background:var(--l1); color:var(--ink);
  border:1px solid var(--line2); border-radius:8px; padding:6px 8px;
  font:inherit; font-size:12.5px;
}
.bd-row input[type=number]{font-variant-numeric:tabular-nums; max-width:110px; flex:0 0 110px}
.bd-row.bd-sw{gap:8px}
.bd-hint{font-size:11.5px; color:var(--dim); margin:6px 0 10px; line-height:1.5}
.bd-err{font-size:12.5px; color:var(--bad); margin:8px 0}

.bd-tgl{
  width:38px; height:21px; border-radius:11px; border:1px solid var(--line2);
  background:var(--l2); position:relative; cursor:pointer; padding:0; flex:0 0 38px;
}
.bd-tgl i{
  position:absolute; top:2px; inset-inline-start:2px; width:15px; height:15px;
  border-radius:50%; background:var(--dim); transition:.15s;
}
.bd-tgl.on{background:var(--accent-w); border-color:var(--accent-l)}
.bd-tgl.on i{inset-inline-start:19px; background:var(--accent)}

/* the page a design makes — cropped to its HEAD, because that is the part
   being chosen; the whole leaf at thumbnail size shows a grey rectangle */
.bd-shot{
  display:block; width:100%; max-width:360px; height:104px; margin:8px 0 4px;
  object-fit:cover; object-position:top center;
  border:1px solid var(--line); border-radius:8px; background:#fff;
}
.bd-items{display:flex; flex-direction:column; gap:8px}
.bd-item{border:1px solid var(--line); border-radius:10px; background:var(--l1); padding:8px 10px}
.bd-itembar{display:flex; align-items:center; gap:6px}
.bd-itembar select{flex:1; background:var(--l2); color:var(--ink);
  border:1px solid var(--line2); border-radius:8px; padding:5px 8px; font:inherit; font-size:12.5px}
.bd-ib{
  border:1px solid var(--line2); background:transparent; color:var(--dim);
  width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:12px; padding:0;
}
.bd-ib:hover{background:var(--l3); color:var(--ink)}
.bd-rm:hover{color:var(--bad); border-color:var(--bad)}
.bd-fields{margin-top:6px; padding-top:6px; border-top:1px dashed var(--line)}
.bd-add{
  margin-top:10px; width:100%; border:1px dashed var(--line2); background:transparent;
  color:var(--accent); border-radius:9px; padding:8px; cursor:pointer; font:inherit; font-size:12.5px;
}
.bd-add:hover{background:var(--accent-w)}
.bd-rule{border:1px solid var(--line); border-radius:10px; padding:6px 10px; margin:8px 0; background:var(--l1)}

.bd-spread{display:flex; gap:2px; align-items:flex-start; justify-content:center}
.bd-leaf{flex:1 1 0; min-width:0; max-width:360px}
.bd-leaflab{font-size:11px; color:var(--dim); text-align:center; margin-bottom:5px}
.bd-canvas{
  display:block; width:100%; background:#fffdf7; border:1px solid var(--line);
  border-radius:3px; box-shadow:var(--shadow-s);
}
.bd-meta{margin-top:10px; font-size:11.5px; color:var(--dim); text-align:center}
.bd-why{
  margin-top:10px; font-size:12px; color:var(--ink); line-height:1.55;
  background:var(--l1); border:1px solid var(--line); border-radius:9px; padding:8px 10px;
}
.bd-why b{color:var(--accent); font-weight:700}

.bd-foot{
  display:flex; justify-content:flex-end; gap:8px; padding:12px 18px;
  border-top:1px solid var(--line); background:var(--card2);
}
.bd-btn{
  border:1px solid var(--line2); background:var(--l2); color:var(--ink);
  border-radius:9px; padding:8px 16px; cursor:pointer; font:inherit; font-size:12.5px;
}
.bd-btn:hover{background:var(--l3)}
.bd-ok{border-color:var(--accent-l); color:var(--accent)}
.bd-go{background:var(--accent-g); color:var(--on-accent); border-color:transparent; font-weight:600}

/* the way in, on the settings panel, and the drawer the JSON went into */
.bd-openbtn{
  margin-inline-start:8px; border:1px solid var(--accent-l); background:var(--accent-w);
  color:var(--accent); border-radius:7px; padding:2px 9px; cursor:pointer;
  font:inherit; font-size:11px;
}
.bd-openbtn:hover{background:var(--accent-l)}
.bd-adv{margin-top:6px}
.bd-adv>summary{
  cursor:pointer; font-size:11px; color:var(--dim); list-style:none;
  padding:3px 0; user-select:none;
}
.bd-adv>summary::before{content:'▸ '}
.bd-adv[open]>summary::before{content:'▾ '}
.bd-adv>summary:hover{color:var(--ink)}

@media (max-width:900px){
  .bd-body{flex-direction:column}
  .bd-controls{flex:none; max-width:none; border-inline-end:0; border-bottom:1px solid var(--line)}
}

/* the ornament, as it will be stretched — cut by the engine's slicer, so the
   picker shows the piece rather than the name of a file */
.bd-piece{flex:0 0 46%; max-width:230px; display:flex; flex-direction:column; gap:5px}
.bd-piece select{width:100%; background:var(--l1); color:var(--ink);
  border:1px solid var(--line2); border-radius:8px; padding:6px 8px; font:inherit; font-size:12.5px}
.bd-piecepic{width:100%; height:20px; object-fit:contain; background:#fffdf7;
  border:1px solid var(--line); border-radius:5px}
.bd-piecepic.hide{display:none}