/* Shared pool-library picker — used on /site-planner and /survey-planner.
   Self-contained dark panel (both planners are dark-themed). A page opens it
   with PoolPicker.open() and receives the chosen footprint via the onPlace
   callback. Footprint data comes from /assets/pool-scale/library.json. */

.pp-backdrop {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(4, 8, 14, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
  display: flex; align-items: stretch; justify-content: flex-end;
  font-family: 'Montserrat', system-ui, sans-serif;
}
.pp-backdrop.open { opacity: 1; pointer-events: auto; }

.pp-panel {
  width: min(440px, 100%); height: 100%;
  background: #0d1620;
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -18px 0 60px rgba(0,0,0,0.55);
  display: flex; flex-direction: column;
  transform: translateX(24px);
  transition: transform .2s ease;
  color: #e8eef5;
}
.pp-backdrop.open .pp-panel { transform: translateX(0); }

.pp-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pp-head .pp-back {
  background: none; border: 0; color: #7fd0ff; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 6px;
  display: none;
}
.pp-head .pp-back:hover { background: rgba(127,208,255,0.12); }
.pp-head.sub .pp-back { display: inline-block; }
.pp-title { flex: 1; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pp-title small { display: block; font-size: 10px; font-weight: 500; opacity: 0.55; letter-spacing: 0.12em; margin-top: 2px; text-transform: none; }
.pp-close {
  background: none; border: 0; color: #b9c6d4; cursor: pointer;
  font-size: 24px; line-height: 1; padding: 2px 8px; border-radius: 6px;
}
.pp-close:hover { background: rgba(255,255,255,0.08); color: #fff; }

.pp-search { padding: 12px 18px 4px; }
.pp-search input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12); background: #0a121b; color: #e8eef5;
  font-family: inherit; font-size: 13px; outline: none;
}
.pp-search input:focus { border-color: #2f7fb8; }

.pp-body { flex: 1; overflow-y: auto; padding: 10px 14px 22px; }

.pp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.pp-card {
  background: #111d29; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px;
  padding: 10px; cursor: pointer; text-align: center;
  transition: border-color .12s ease, transform .08s ease, background .12s ease;
}
.pp-card:hover { border-color: #2f7fb8; background: #15212f; transform: translateY(-2px); }
.pp-card .pp-thumb {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 8px;
  background: #07101a center / contain no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.pp-card .pp-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pp-card .pp-name { font-size: 13px; font-weight: 700; margin-top: 8px; }
.pp-card .pp-meta { font-size: 11px; opacity: 0.55; margin-top: 2px; }

/* size list */
.pp-hero {
  display: flex; gap: 14px; align-items: center;
  background: #111d29; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px;
  padding: 12px; margin-bottom: 14px;
}
.pp-hero .pp-thumb { width: 120px; aspect-ratio: 4/3; flex: 0 0 auto; background: #07101a center / contain no-repeat; border-radius: 8px; }
.pp-hero .pp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pp-hero .pp-h-name { font-size: 16px; font-weight: 700; }
.pp-hero .pp-h-sub { font-size: 11px; opacity: 0.6; margin-top: 3px; }

.pp-sizes { display: flex; flex-direction: column; gap: 8px; }
.pp-size {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: #111d29; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px;
  padding: 11px 14px; cursor: pointer; color: inherit; font-family: inherit; text-align: left;
  transition: border-color .12s ease, background .12s ease;
}
.pp-size:hover { border-color: #2f7fb8; background: #15212f; }
.pp-size .pp-sz-label { font-size: 14px; font-weight: 700; min-width: 74px; }
.pp-size .pp-sz-dims { font-size: 12px; opacity: 0.62; flex: 1; }
.pp-size .pp-sz-go { font-size: 12px; color: #7fd0ff; font-weight: 600; }

.pp-empty { padding: 40px 18px; text-align: center; opacity: 0.5; font-size: 13px; }
.pp-loading { padding: 40px 18px; text-align: center; opacity: 0.6; font-size: 13px; }

@media (max-width: 520px) {
  .pp-panel { width: 100%; }
  .pp-grid { grid-template-columns: repeat(2, 1fr); }
}