/* Onboarding Step 2 — venue pick.
   Large photo-led cards, exactly 2 selections required, manual Continue. */

#venue-panel .venue-curation-hint {
  font-family:var(--font-mono); font-size:11px;
  color:var(--coral); letter-spacing:0.04em;
  margin-bottom:8px; line-height:1.4;
}

#venue-panel .venue-counter {
  font-size:14px; color:var(--muted); line-height:1.5;
  margin-bottom:24px;
}
#venue-panel .venue-counter.is-complete { color:var(--green); }

/* List shell ─ stacks the large cards vertically. */
#venue-panel .venue-list {
  display:flex; flex-direction:column; gap:12px;
  margin-top:4px;
}

/* While the POST is in-flight, freeze the list. */
#venue-panel .venue-list.is-busy { pointer-events:none; opacity:0.7; }

/* When 2 are picked, unselected cards drop to 0.4. */
#venue-panel .venue-list.is-locked .venue-card:not(.is-selected) {
  opacity:0.4;
  pointer-events:none;
}

/* ── CARD ──────────────────────────────────────────────────────────────── */
#venue-panel .venue-card {
  position:relative; display:block;
  width:100%;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:2px solid transparent;
  background:var(--card);
  cursor:pointer;
  transition:transform 0.2s var(--ease-out),
             border-color 0.15s ease,
             opacity 0.2s ease;
  text-align:left;
  padding:0;
  font-family:inherit; color:inherit;
}

#venue-panel .venue-card:focus-visible {
  outline:none;
  border-color:var(--coral);
  box-shadow:0 0 0 3px var(--coral-soft);
}

#venue-panel .venue-card.is-selected {
  border-color:var(--coral);
  animation:venuePick 0.4s var(--ease-pick);
}

@keyframes venuePick {
  0%   { transform:scale(1); }
  50%  { transform:scale(1.015); }
  100% { transform:scale(1.005); }
}

/* ── PHOTO ─────────────────────────────────────────────────────────────── */
#venue-panel .venue-photo {
  position:relative;
  width:100%; height:150px;
  background:var(--bg3) center/cover no-repeat;
  overflow:hidden;
}
#venue-panel .venue-photo.is-empty {
  background:linear-gradient(135deg, var(--bg2), var(--bg3));
}

/* Subtle scrim at top so check overlay reads cleanly even on bright photos. */
#venue-panel .venue-photo::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0) 35%
  );
  pointer-events:none;
}

/* ── CHECK OVERLAY ─────────────────────────────────────────────────────── */
#venue-panel .venue-check {
  position:absolute; top:12px; right:12px;
  width:28px; height:28px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.6);
  background:rgba(0,0,0,0.25);
  display:flex; align-items:center; justify-content:center;
  color:transparent;
  font-size:14px; font-weight:700;
  z-index:2;
  transition:background 0.15s, border-color 0.15s, color 0.15s, transform 0.2s var(--ease-pick);
}
#venue-panel .venue-card.is-selected .venue-check {
  background:var(--coral);
  border-color:var(--coral);
  color:#fff;
  transform:scale(1.05);
}

/* ── BODY ──────────────────────────────────────────────────────────────── */
#venue-panel .venue-body {
  padding:12px 14px 14px;
}

#venue-panel .venue-name {
  font-family:var(--font-display); font-size:16px; font-weight:700;
  color:var(--white); letter-spacing:-0.2px;
  line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

#venue-panel .venue-meta {
  margin-top:2px;
  font-size:12px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

#venue-panel .venue-tags {
  margin-top:8px;
  display:flex; flex-wrap:wrap; gap:6px;
}
#venue-panel .venue-tag {
  display:inline-block;
  padding:3px 9px;
  border-radius:99px;
  background:var(--coral-soft);
  color:var(--coral);
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.04em;
  line-height:1.4;
}

/* ── ERROR / EMPTY / LOADING ───────────────────────────────────────────── */
#venue-panel .venue-error { margin-top:14px; text-align:center; }
#venue-panel .venue-empty { display:none; }
#venue-panel .venue-empty.visible { display:block; }
#venue-panel .venue-loading {
  display:flex; justify-content:center; padding:40px 20px;
}
#venue-panel .venue-loading .spinner { width:24px; height:24px; }

/* ── SLIGHTLY LARGER PHOTO ON WIDER VIEWPORTS ──────────────────────────── */
@media (min-width:600px) {
  #venue-panel .venue-photo { height:170px; }
  #venue-panel .venue-name  { font-size:17px; }
}

/* ── DESKTOP (website): 2-column grid; mobile keeps the single-column stack.
   Scoped to #venue-panel so only Step 2 widens — the other steps stay in the
   480px column. The grid needs more room than 480px, so the container widens
   to ~820px at this breakpoint only. ──────────────────────────────────────── */
@media (min-width:768px) {
  #venue-panel .panel-inner { max-width:820px; }
  #venue-panel .venue-list {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
    align-items:start;
  }
  #venue-panel .venue-photo { height:190px; }
}