:root {
  --lisa:    #f97316;
  --lisa-lt: #fff7ed;
  --andi:    #8b5cf6;
  --andi-lt: #f5f3ff;
}

/* ─── Summary cards ────────────────────────────────────────────────── */
.sitter-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px 0 8px;
  flex-wrap: wrap;
}
.sitter-card {
  flex: 1;
  min-width: 260px;
  border-radius: var(--radius);
  padding: 24px;
  border: 2px solid transparent;
  box-shadow: var(--shadow);
}
.sitter-lisa { background: var(--lisa-lt); border-color: var(--lisa); }
.sitter-andi { background: var(--andi-lt); border-color: var(--andi); }

.sitter-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.sitter-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.dot-lisa { background: var(--lisa); }
.dot-andi { background: var(--andi); }

.sitter-name { font-weight: 700; font-size: 1.1rem; color: var(--gray-800); }
.sitter-dates { font-size: .82rem; color: var(--gray-600); margin-top: 2px; line-height: 1.4; }
.sitter-duration {
  font-size: 1.75rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin-bottom: 6px;
}
.sitter-lisa .sitter-duration { color: var(--lisa); }
.sitter-andi .sitter-duration { color: var(--andi); }
.sitter-note { font-size: .82rem; color: var(--gray-600); font-style: italic; }

.sitter-arrow {
  font-size: 1.5rem;
  color: var(--gray-400);
  flex-shrink: 0;
  align-self: center;
}

/* ─── Legend ───────────────────────────────────────────────────────── */
.sitter-legend {
  display: flex;
  align-items: center;
  font-size: .85rem;
  color: var(--gray-600);
  font-weight: 500;
}
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

/* ─── Calendar event colors ────────────────────────────────────────── */
.fc-event.cat-lisa   { background: var(--lisa) !important; border-color: var(--lisa) !important; }
.fc-event.cat-andi   { background: var(--andi) !important; border-color: var(--andi) !important; }

/* Background shading for multi-day spans */
.fc .fc-bg-event.bg-lisa { background: rgba(249,115,22,.15) !important; }
.fc .fc-bg-event.bg-andi { background: rgba(139,92,246,.15) !important; }

@media (max-width: 640px) {
  .sitter-arrow { display: none; }
  .sitter-summary { flex-direction: column; }
}