/* BB-107: black and gold theme for the vendored library modal.
   Library colour variables are mapped here and scoped to the modal
   backdrop only, so nothing else on the page changes. */
.lp-modal-backdrop{
  --bg-2:var(--dk1);--surface:var(--dk2);
  --border:var(--bdr);
  --text:var(--txt);--text-2:var(--txt2);
  --brand:var(--gold);--brand-dark:#B4952F;
  --err:var(--red);--ok:var(--grn);
  --font-head:'DM Sans',system-ui,sans-serif;
  --tap:44px;--radius:10px;--radius-lg:14px;
  /* above toasts (#bbToast 10000) so a toast cannot cover the buttons; below the PIN gate (#bbGate 10100) */
  z-index:10050;
  font-family:'DM Sans',system-ui,sans-serif;
}
/* Mobile: full-width sheet from the bottom, scrolls inside if too tall */
.lp-modal-backdrop{align-items:flex-end}
.lp-modal-backdrop .lp-modal{
  max-height:100%;max-height:100dvh;
  border-top:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding-top:0;
}
.lp-modal-backdrop .lp-modal-title{font-size:1.1rem}
.lp-modal-backdrop .lp-modal-body{overflow-wrap:anywhere}
.lp-modal-backdrop .lp-modal-text{font-size:1rem;color:var(--text)}
.lp-modal-backdrop .lp-modal-foot{flex-wrap:wrap}
.lp-modal-backdrop .lp-modal-btn{font-size:1rem;min-height:44px;flex:1 1 40%;padding:0 14px}
.lp-modal-backdrop .lp-modal-btn:focus-visible,
.lp-modal-backdrop .lp-modal-x:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.lp-modal-backdrop .lp-modal-x{min-width:44px;min-height:44px}
.lp-modal-backdrop .lp-modal-btn-primary{color:var(--bg)}
.lp-modal-backdrop .lp-modal-btn-cancel{color:var(--brand);border-color:var(--border)}
@media (min-width:768px){
  .lp-modal-backdrop{align-items:center}
  .lp-modal-backdrop .lp-modal{border-radius:var(--radius-lg);max-height:90vh}
  .lp-modal-backdrop .lp-modal-btn{flex:0 0 auto}
}
/* Inline "please choose" message in the item modal (replaces alert) */
.bb-choice-err{margin-top:8px;font-size:1rem;font-weight:600;color:#E46E66;color:color-mix(in srgb,var(--red) 70%,white);outline:none}
@supports (color:color-mix(in srgb,red,blue)){.lp-modal-backdrop{--brand-dark:color-mix(in srgb,var(--gold) 85%,black)}}