/* Spruce Grove — popover dialog (WCAG 2.2 AAA, works with popover.js). */

.bbpop-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(7,11,15,.66); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 22px;
  overflow-y: auto;
}
.bbpop-overlay[hidden] { display: none; }

.bbpop {
  width: min(680px, 100%); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--BB-bg-elev, #121813), var(--BB-bg, #0E130F));
  border: 1px solid var(--BB-line-2, rgba(238,235,229,.18));
  border-radius: var(--BB-radius, 14px);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.9);
  color: var(--BB-t2, #D1CEC5);
  animation: bbpop-in .22s cubic-bezier(.22,1,.36,1);
}
@keyframes bbpop-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .bbpop { animation: none; } }

.bbpop-head {
  position: sticky; top: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px;
  padding: 18px 20px 14px; background: var(--BB-bg-elev, #121813);
  border-bottom: 1px solid var(--BB-line, rgba(238,235,229,.10));
}
.bbpop-k {
  flex: 0 0 100%; font-family: var(--BB-mono, monospace); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--BB-peri, #E4AA71);
}
.bbpop-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--BB-t1, #fff); flex: 1; min-width: 0; }

.bbpop-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.bbpop-btn {
  font-family: var(--BB-mono, monospace); font-size: 11.5px; padding: 7px 12px;
  border-radius: 8px; border: 1px solid var(--BB-line-2, rgba(238,235,229,.18));
  background: var(--BB-panel, #1B211C); color: var(--BB-t2, #D1CEC5); cursor: pointer;
}
.bbpop-btn:hover { border-color: var(--BB-peri, #E4AA71); color: var(--BB-peri, #E4AA71); }
.bbpop-btn.ghost { opacity: .9; }
.bbpop-x {
  width: 36px; height: 36px; display: grid; place-items: center; font-size: 22px; line-height: 1;
  border-radius: 8px; border: 1px solid var(--BB-line-2, rgba(238,235,229,.18));
  background: var(--BB-panel, #1B211C); color: var(--BB-t2, #D1CEC5); cursor: pointer;
}
.bbpop-x:hover { color: var(--BB-t1, #fff); border-color: var(--BB-peri, #E4AA71); }

.bbpop-body { padding: 20px; font-size: 14px; line-height: 1.7; color: var(--BB-t2, #D1CEC5); }
.bbpop-body p { margin: 0 0 12px; }
.bbpop-body code {
  font-family: var(--BB-mono, monospace); font-size: .9em;
  background: rgba(242,162,106,.10); color: var(--BB-cyan, #F2A26A);
  padding: 2px 6px; border-radius: 5px; overflow-wrap: anywhere;
}
.bbpop-body .mini-h {
  margin: 18px 0 8px; font-family: var(--BB-mono, monospace); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--BB-peri, #E4AA71);
}
.bbpop-body .kv {
  display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--BB-line, rgba(238,235,229,.10));
  font-size: 13px;
}
.bbpop-body .kv b { color: var(--BB-t1, #fff); font-family: var(--BB-mono, monospace); font-weight: 600; flex: 0 0 32%; overflow-wrap: anywhere; }
.bbpop-body .kv span { color: var(--BB-t3, #A5A699); flex: 1; }

/* focus */
.bbpop a:focus-visible, .bbpop button:focus-visible {
  outline: 2px solid var(--BB-focus, #E4AA71); outline-offset: 2px; border-radius: 6px;
}