/* Step 1 — board pick. Tall single-column cards with hero photo + tagline +
   vibe sentence + Night Arc inline. The old BoardVibeModal content is now
   promoted onto the card itself — no modal click required. */

#board-panel .board-list {
  display:flex; flex-direction:column; gap:14px;
  margin-top:4px;
}
#board-panel .board-list.is-busy { pointer-events:none; opacity:0.6; }

#board-panel .board-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;
  text-align:left; padding:0;
  font-family:inherit; color:inherit;
}

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

#board-panel .board-card.is-selected {
  border-color:var(--coral);
  animation:boardPick 0.4s var(--ease-pick);
}
@keyframes boardPick {
  0%   { transform:scale(1); }
  50%  { transform:scale(1.02); }
  100% { transform:scale(1.01); }
}

#board-panel .board-hero {
  position:relative;
  width:100%; height:180px;
  background:var(--bg3) center/cover no-repeat;
}
#board-panel .board-hero.is-empty {
  background:linear-gradient(135deg, var(--bg2), var(--bg3));
}
#board-panel .board-hero::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%);
  pointer-events:none;
}

#board-panel .board-body {
  padding:16px 18px 20px;
}

#board-panel .board-name {
  font-family:var(--font-display); font-size:20px; font-weight:700;
  color:var(--white); letter-spacing:-0.3px;
  line-height:1.2;
  margin-bottom:4px;
}
#board-panel .board-card.is-selected .board-name { color:var(--coral); }

#board-panel .board-tagline {
  font-size:14px; font-style:italic; color:var(--muted);
  line-height:1.4;
  margin-bottom:10px;
}

#board-panel .board-vibe {
  font-family:var(--font-display); font-size:15px; font-weight:400;
  color:var(--white); line-height:1.55;
  margin-bottom:18px;
}

#board-panel .board-arc-label {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:10px;
}

#board-panel .board-arc-row {
  display:flex; align-items:flex-start; gap:14px;
  margin-bottom:10px; position:relative;
}
#board-panel .board-arc-row:last-child { margin-bottom:0; }
#board-panel .board-arc-row:not(:last-child)::after {
  content:''; position:absolute;
  left:18px; top:14px; bottom:-10px;
  width:1px; background:rgba(124, 92, 255,0.18);
}

#board-panel .board-arc-time {
  font-family:var(--font-mono); font-size:11px;
  color:var(--coral); letter-spacing:0.04em;
  min-width:42px; padding-top:1px; flex-shrink:0;
}

#board-panel .board-arc-venue {
  font-family:var(--font-display); font-size:14px; font-weight:600;
  color:var(--white); line-height:1.3;
}
#board-panel .board-arc-mood {
  font-size:12px; color:var(--muted); line-height:1.4;
  margin-top:1px;
}

@media (min-width:600px) {
  #board-panel .board-hero { height:200px; }
}