/* ============================================================
   The Repertoire Book — page-specific styles
   Loaded AFTER css/shared.css; only rules unique to this page.
   ============================================================ */

:root{
  --red-dim:rgba(201,124,92,.4);
}

/* ============ storage warning ============ */
#storage-warn{
  display:none; margin:0 0 22px;
  background:rgba(201,124,92,.1); border:1px solid var(--red-dim); border-radius:10px;
  padding:12px 16px; font-size:14px; color:var(--ink);
}
#storage-warn.show{display:block;}
#storage-warn .w-tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); margin-right:10px;
}

/* ============ piece cards ============ */
#shelf-list{margin:18px 0 8px;}
.piece{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px 14px; margin:14px 0;
}
.piece.going-rusty{border:1px dashed var(--red-dim);}
.piece-top{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.piece-title{font-family:'Fraunces',serif; font-size:21px; font-weight:600; flex:1; min-width:180px;}
.chip{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; padding:3px 10px; border-radius:20px; white-space:nowrap;
}
.chip.learning{color:var(--brass); border:1px solid var(--brass-dim); background:rgba(201,164,92,.08);}
.chip.solid{color:var(--sage); border:1px solid rgba(157,180,140,.4); background:rgba(157,180,140,.08);}
.chip.rusty{color:var(--red); border:1px solid var(--red-dim); background:rgba(201,124,92,.08);}
.chip.flag{color:var(--red); border:1px dashed var(--red-dim); background:none;}
.piece-meta{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--muted);
  margin:6px 0 2px; letter-spacing:.02em;
}
.piece-notes{color:var(--ink); font-size:14.5px; margin:8px 0 4px;}
.piece-days{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted);
  letter-spacing:.08em; margin:6px 0 10px;
}
.piece-days .overdue{color:var(--red);}
.piece-btns{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.piece-btns button{
  background:none; border:1px solid var(--line); color:var(--muted);
  font-family:'IBM Plex Mono',monospace; font-size:12px; padding:6px 12px;
  border-radius:6px; cursor:pointer;
}
.piece-btns button:hover{border-color:var(--brass-dim); color:var(--ink);}
.piece-btns button:focus-visible{outline:2px solid var(--pearl); outline-offset:2px;}
.piece-btns button.primary{background:var(--brass); border-color:var(--brass); color:var(--bg); font-weight:600;}
.piece-btns button.primary:hover{filter:brightness(1.1); color:var(--bg);}
.piece-btns button.danger:hover{border-color:var(--red-dim); color:var(--red);}

.empty-shelf{
  background:var(--panel); border:1px dashed var(--line); border-radius:12px;
  padding:26px 22px; margin:18px 0; text-align:center; color:var(--muted);
}
.empty-shelf strong{color:var(--ink);}

/* ============ starter shelf ============ */
details.starter{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  margin:22px 0; overflow:hidden;
}
details.starter summary{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass); padding:13px 18px; cursor:pointer;
  list-style:none;
}
details.starter summary::-webkit-details-marker{display:none;}
details.starter summary::before{content:'+ '; color:var(--muted);}
details.starter[open] summary::before{content:'\2212  ';}
details.starter summary:focus-visible{outline:2px solid var(--pearl); outline-offset:-2px;}
.starter-body{border-top:1px solid var(--line); padding:6px 18px 14px;}
.starter-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.starter-row:last-child{border-bottom:none;}
.starter-name{flex:1; min-width:200px; font-size:14.5px;}
.starter-name .s-src{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted);
}
.starter-row button{
  background:none; border:1px solid var(--brass-dim); color:var(--brass);
  font-family:'IBM Plex Mono',monospace; font-size:12px; padding:5px 14px;
  border-radius:6px; cursor:pointer; white-space:nowrap;
}
.starter-row button:hover{background:rgba(201,164,92,.1);}
.starter-row button:focus-visible{outline:2px solid var(--pearl); outline-offset:2px;}
.starter-row button:disabled{
  border-color:var(--line); color:var(--muted); cursor:default; background:none;
}

/* ============ add / edit form ============ */
form#piece-form{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:22px 22px 20px; margin:20px 0;
}
.f-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px;}
@media (max-width:560px){ .f-grid{grid-template-columns:1fr;} }
.f-field{display:flex; flex-direction:column; gap:6px;}
.f-field.wide{grid-column:1 / -1;}
.f-field label{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.f-field label .opt{color:var(--line); letter-spacing:.06em; text-transform:none;}
.f-field input, .f-field select, .f-field textarea{
  background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  color:var(--ink); font-family:'Public Sans',sans-serif; font-size:15px;
  padding:10px 12px;
}
.f-field textarea{min-height:96px; resize:vertical; line-height:1.5;}
.f-field input:focus-visible, .f-field select:focus-visible, .f-field textarea:focus-visible{
  outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass-dim);
}
.f-field select{cursor:pointer;}
.f-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; align-items:center;}
.f-actions button[type=submit]{
  background:var(--brass); color:var(--bg); border:none; border-radius:8px;
  font-family:'Public Sans',sans-serif; font-weight:700; font-size:14px;
  padding:11px 24px; cursor:pointer;
}
.f-actions button[type=submit]:hover{filter:brightness(1.1);}
.f-actions button[type=submit]:focus-visible{outline:2px solid var(--pearl); outline-offset:2px;}
#cancel-edit{
  display:none; background:none; border:1px solid var(--line); color:var(--muted);
  font-family:'IBM Plex Mono',monospace; font-size:12px; padding:9px 16px;
  border-radius:8px; cursor:pointer;
}
#cancel-edit.show{display:inline-block;}
#cancel-edit:hover{color:var(--ink); border-color:var(--brass-dim);}
#cancel-edit:focus-visible{outline:2px solid var(--pearl); outline-offset:2px;}
#form-msg{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--red);
}

/* ============ rotation slots ============ */
.slot{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; margin:12px 0; display:flex; gap:14px; align-items:baseline;
  flex-wrap:wrap;
}
.slot-num{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--brass);
  letter-spacing:.1em; white-space:nowrap;
}
.slot-body{flex:1; min-width:220px;}
.slot-title{font-family:'Fraunces',serif; font-size:18px; font-weight:600;}
.slot-why{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted);
  margin-top:3px; letter-spacing:.04em;
}
.slot.blank{border-style:dashed;}
.slot.blank .slot-title{color:var(--muted); font-family:'Public Sans',sans-serif; font-size:14.5px; font-weight:400;}

/* ============ backup corner ============ */
.backup-corner{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; margin:20px 0;
}
.backup-corner .bc-title{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass); margin-bottom:8px;
}
.backup-btns{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px;}
.backup-btns button{
  background:none; border:1px solid var(--brass-dim); color:var(--brass);
  font-family:'Public Sans',sans-serif; font-weight:700; font-size:13.5px;
  padding:9px 20px; border-radius:8px; cursor:pointer;
}
.backup-btns button:hover{background:rgba(201,164,92,.1);}
.backup-btns button:focus-visible{outline:2px solid var(--pearl); outline-offset:2px;}
#restore-file{display:none;}
#restore-msg{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--sage);
}