/* ─────────────────────────────────────────────────────────────
   Bodiodi — Schedule (page-specific styles)
   Expectation: your global/site CSS is loaded BEFORE this file.
   We only define schedule layout & components and rely on brand vars.
   ───────────────────────────────────────────────────────────── */

:root{
  /* schedule-only variable (visual grid height per hour) */
  --hourHeight: 64px;
}

/* Layout wrapper (inherits global fonts/colors/background) */
.wrap,
.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 96px 16px 48px;
}

/* Page heading + controls */
.pagehead h1{ margin:0 0 6px }
.muted{ opacity:.7 }
.small{ font-size:12px }

.controls{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px
}

.seg{
  display:inline-flex;
  border:1px solid var(--ring, rgba(0,0,0,.08));
  background:rgba(255,255,255,.7);
  border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow, 0 2px 8px rgba(0,0,0,.06));
}

.seg-btn{
  padding:8px 12px; border:0; background:transparent;
  cursor:pointer; opacity:.8
}
.seg-btn.active{ background:#fff; opacity:1 }

/* ── Week grid ─────────────────────────────────────────────── */

.week-grid{
  display:grid;
  grid-template-columns: auto repeat(7, 1fr);
  gap:8px;
}

.week-colhdr{
  text-align:center; opacity:.85
}

.week-colhdr .tag{
  display:inline-block; padding:6px 8px; border-radius:10px;
  background:var(--pill, rgba(255,255,255,.5));
  border:1px solid var(--ring, rgba(0,0,0,.06));
}

.hourlbl{
  text-align:right; padding-right:8px; opacity:.6; padding-top:8px
}

.cell{
  min-height:var(--hourHeight);
  position:relative; border-radius:8px
}

.cell.today{
  background:rgba(255,255,255,.18)
}

/* ── Event card ───────────────────────────────────────────── */

.event{
  position:absolute; left:0; right:0;
  background:var(--cardbg, rgba(255,255,255,.85));
  border:1px solid var(--ring, rgba(0,0,0,.06));
  border-radius:14px;
  box-shadow:var(--shadow, 0 2px 8px rgba(0,0,0,.06));
  padding:10px 12px;

  /* motion */
  opacity:0; transform:translateY(8px);
  transition:opacity .6s ease-out, transform .6s ease-out, box-shadow .2s ease;
}
.event.in{ opacity:1; transform:translateY(0) }
.event:hover{
  box-shadow:var(--shadow2, 0 6px 18px rgba(0,0,0,.10));
  transform:translateY(-2px)
}

.event-title{ margin:0; font-weight:700 }
.event-title a{ color:inherit; text-decoration:none }
.event-title a:hover{ text-decoration:underline; text-underline-offset:2px }

.event-meta{ opacity:.75; margin-top:2px }

.chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px }
.chip{
  padding:4px 8px; border-radius:999px;
  background:var(--pill, rgba(255,255,255,.65));
  border:1px solid var(--ring, rgba(0,0,0,.06));
}

/* Actions (Reserve / Add to GCal) */
.actions{ display:flex; gap:8px; align-items:center; margin-left:auto }
.act{
  padding:6px 10px; border-radius:10px;
  border:1px solid var(--ring, rgba(0,0,0,.10));
  background:#fff; text-decoration:none;
  color:var(--ink, #2B2F2C);
  font-weight:600; font-size:11px; line-height:1;
}
.act.primary{ background:rgba(0,0,0,.88); color:#fff }
.act.primary:hover{ background:#000 }

/* ── Day view (mobile-friendly list) ───────────────────────── */

.day-view{ margin-top:18px; display:grid; gap:10px }

.day-card{
  background:var(--cardbg, rgba(255,255,255,.85));
  border:1px solid var(--ring, rgba(0,0,0,.06));
  border-radius:16px;
  box-shadow:var(--shadow, 0 2px 8px rgba(0,0,0,.06));
  padding:14px;
  display:flex; justify-content:space-between; gap:12px;

  /* motion */
  opacity:0; transform:translateY(10px);
  transition:opacity .6s ease-out, transform .6s ease-out, box-shadow .2s ease;
}
.day-card.in{ opacity:1; transform:translateY(0) }

/* ── Small helpers ────────────────────────────────────────── */
.status{ margin-top:12px; opacity:.75; font-size:13px }