/* Agenda (Slimes Booking) preview — mirrors the hero calendar on agenda.slimes.com.br */
.bk-stage {
  --bk-ink: #14212b; --bk-ink-2: #4a5964; --bk-ink-3: #5f6c76;
  --bk-paper: #fff; --bk-paper-3: #ebe9e3;
  --bk-line: #e7e5df; --bk-line-strong: #d3d0c8;
  --bk-brand: #165a4a; --bk-brand-ink: #fff; --bk-brand-soft: #e3f0ec;
  --bk-now: #e9a23b;
  --bk-warn: #9a5b00; --bk-warn-soft: #fdf1dc;
  --bk-info: #24508f; --bk-info-soft: #e5eefa;
  --bk-shadow: 14, 59, 49;

  display: flex; justify-content: center; width: fit-content; margin-inline: auto;
  padding: 24px 28px 60px; border-radius: 28px;
  background:
    radial-gradient(55% 60% at 12% 18%, #d4f0e3 0, #0000 70%),
    radial-gradient(50% 55% at 88% 12%, #c7def3 0, #0000 70%),
    radial-gradient(55% 55% at 85% 80%, #f6dc9e 0, #0000 70%),
    radial-gradient(80% 55% at 25% 105%, #1f6b56 0, #0000 75%),
    linear-gradient(#e6f3ec, #a9d8c6);
}
[data-theme="dark"] .bk-stage {
  --bk-ink: #edf3f0; --bk-ink-2: #b9c6c0; --bk-ink-3: #8fa098;
  --bk-paper: #121a17; --bk-paper-3: #222d29;
  --bk-line: #24302b; --bk-line-strong: #36443e;
  --bk-brand: #3fd69a; --bk-brand-ink: #03160e; --bk-brand-soft: #0f3426;
  --bk-now: #f6b84e;
  --bk-warn: #f2bb5c; --bk-warn-soft: #33260f;
  --bk-info: #8fb8f5; --bk-info-soft: #16243a;
  background:
    radial-gradient(55% 60% at 12% 18%, #155a42 0, #0000 70%),
    radial-gradient(50% 55% at 88% 12%, #1c3550 0, #0000 70%),
    radial-gradient(55% 55% at 85% 80%, #5a4416 0, #0000 70%),
    radial-gradient(80% 55% at 25% 105%, #1fa877 0, #0000 75%),
    linear-gradient(#0d1d17, #0f3a2a);
}

.bk {
  position: relative; width: 560px;
  user-select: none; -webkit-user-select: none;
  font-family: "Onest", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11"; font-size: 16px; line-height: 1.5;
  color: var(--bk-ink); text-align: left;
}
.bk p { margin: 0; }
.bk img { display: block; border-radius: 50%; object-fit: cover; background: var(--bk-paper-3); flex-shrink: 0; }
.bk svg { display: block; }
.bk-tab { font-variant-numeric: tabular-nums; }

/* Hint pill */
.bk-hint-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.bk-hint {
  pointer-events: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  background: color-mix(in oklab, var(--bk-ink) 85%, transparent); color: var(--bk-paper);
  font-size: 15px; line-height: 1.45; font-weight: 500;
  box-shadow: 0 10px 24px -12px rgba(var(--bk-shadow), .7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
}
.bk.is-used .bk-hint { opacity: 0; transform: translateY(-4px); }
.bk-hint__icon { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.bk-hint__icon svg { position: relative; width: 16px; height: 16px; }
.bk-hint__ping {
  position: absolute; inset: 0; border-radius: 50%;
  background: color-mix(in oklab, var(--bk-paper) 30%, transparent);
  animation: bk-ping 1s cubic-bezier(0,0,.2,1) infinite;
}

/* Card */
.bk-card {
  overflow: hidden; border-radius: 22px; background: var(--bk-paper); color: var(--bk-ink);
  box-shadow: 0 30px 60px -30px rgba(var(--bk-shadow), .55);
}
.bk-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--bk-line); }
.bk-head img { width: 28px; height: 28px; }
.bk-shop { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; letter-spacing: -.025em; }
.bk-spacer { flex: 1; }
.bk-date { flex-shrink: 0; font-size: 15px; line-height: 1.45; white-space: nowrap; color: var(--bk-ink-2); }

.bk-grid { display: grid; grid-template-columns: 48px repeat(3, 1fr); }
.bk-pros { border-bottom: 1px solid var(--bk-line); font-size: 15px; line-height: 1.45; font-weight: 500; }
.bk-pro { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 8px; border-left: 1px solid var(--bk-line); }
.bk-pro img { width: 24px; height: 24px; box-shadow: 0 0 0 1px var(--bk-paper), 0 0 0 3px var(--ring); }

.bk-body { position: relative; height: 320px; }
.bk-times { position: relative; }
.bk-times span { position: absolute; right: 8px; font-size: 12px; line-height: 1.3; color: var(--bk-ink-3); font-variant-numeric: tabular-nums; }
.bk-col {
  position: relative; border-left: 1px solid var(--bk-line);
  background-image: repeating-linear-gradient(to bottom, transparent 0 79px, var(--bk-line) 79px 80px);
}

.bk-free {
  position: absolute; left: 4px; right: 4px; height: 36px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px dashed var(--bk-line-strong); border-radius: 8px; background: transparent;
  font: inherit; font-size: 13px; line-height: 1.35; color: var(--bk-ink-3); cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s;
}
.bk-free svg { width: 14px; height: 14px; }
.bk-free span { display: none; font-variant-numeric: tabular-nums; }
.bk-free:hover { border-color: var(--bk-brand); background: var(--bk-brand-soft); color: var(--bk-brand); }
.bk-free:hover span { display: inline; }

.bk-slot {
  position: absolute; left: 4px; right: 4px; overflow: hidden;
  padding: 4px 8px; border-radius: 8px; border-left: 3px solid;
  font-size: 13px; line-height: 1.25;
  transition: box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.bk-slot:hover { z-index: 10; box-shadow: 0 8px 20px -10px rgba(var(--bk-shadow), .6); }
.bk-slot__name { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.bk-slot__name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-slot__info { display: block; margin-top: 2px; opacity: .9; }
.bk-slot__info > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-warn { background: var(--bk-warn-soft); border-color: var(--bk-now); color: var(--bk-warn); }
.bk-brand { background: var(--bk-brand-soft); border-color: var(--bk-brand); color: var(--bk-brand); }
.bk-info { background: var(--bk-info-soft); border-color: var(--bk-info); color: var(--bk-info); }
.bk-new, .bk-new:hover { box-shadow: 0 0 0 1px var(--bk-paper), 0 0 0 3px var(--bk-now); }
.bk-badge { margin-left: auto; flex-shrink: 0; padding: 0 6px; border-radius: 999px; background: var(--bk-now); color: #14212b; font-size: 10px; }

.bk-now { pointer-events: none; position: absolute; left: 42px; right: 0; display: flex; align-items: center; }
.bk-now span:first-child { width: 10px; height: 10px; border-radius: 50%; background: var(--bk-now); }
.bk-now span:last-child { flex: 1; height: 2px; background: var(--bk-now); }

/* Toast */
.bk-toast {
  position: absolute; right: -40px; bottom: -48px; max-width: 300px;
  display: flex; align-items: flex-start; gap: 12px; padding: 14px;
  border-radius: 16px; background: var(--bk-paper); color: var(--bk-ink);
  box-shadow: 0 20px 40px -16px rgba(var(--bk-shadow), .5);
}
.bk-toast__avatar { position: relative; flex-shrink: 0; }
.bk-toast__avatar img, .bk-initials { width: 40px; height: 40px; }
.bk-initials { display: grid; place-items: center; border-radius: 50%; font-size: 15px; font-weight: 600; background: #eef0dc; color: #5a6014; }
[data-theme="dark"] .bk-initials { background: #2c2f15; color: #d2d88f; }
.bk-toast__bell {
  position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bk-paper);
  background: var(--bk-brand); color: var(--bk-brand-ink);
}
.bk-toast__bell svg { width: 10px; height: 10px; }
.bk-toast__text { font-size: 15px; line-height: 1.45; }
.bk-toast__text strong { display: block; font-weight: 600; }
.bk-toast__text span { color: var(--bk-ink-2); }

/* Entrance: plays once when the projects page first comes into view */
.bk-anim { opacity: 0; }
.bk.is-playing .bk-anim { animation: bk-slot-in .48s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--delay, 0s); }
@keyframes bk-slot-in { 0% { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bk-ping { 75%, to { opacity: 0; transform: scale(2); } }

/* Phone layout from the original: only Bruno's column */
@media (max-width: 639px) {
  .bk-grid { grid-template-columns: 46px 1fr; }
  .bk-pro:not(.bk-main), .bk-col:not(.bk-main) { display: none; }
  .bk-head { padding: 14px 16px; }
  .bk-now { left: 40px; }
  .bk-toast { right: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-anim, .bk.is-playing .bk-anim { animation: none; opacity: 1; }
  .bk-hint__ping { animation: none; }
}