/* Unified month/week calendar (CalendarController#show): planned workouts and
   synced activity history. Kept out of the large application.css, alongside
   workouts.css. */

.calendar { max-width: 64rem; margin: 0 auto; }

.calendar__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: rgba(0, 0, 0, .10); border: 1px solid rgba(0, 0, 0, .10);
  border-radius: .5rem; overflow: hidden;
}
.calendar__dow {
  background: #f6f7f9; text-align: center; font-size: .72rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: #6b7280; padding: .45rem 0;
}
.calendar__cell {
  background: #fff; min-height: 5.5rem; padding: .35rem;
  display: flex; flex-direction: column; gap: .25rem; position: relative;
}
.calendar__cell.is-outside { background: #f6f6f7; }
.calendar__cell.is-outside .calendar__date { color: #b3b7bd; }
.calendar__cell.is-today { outline: 2px solid #2b6cb0; outline-offset: -2px; }
.calendar__date { font-size: .78rem; font-weight: 600; color: #374151; position: relative; z-index: 1; }

/* The full empty area of today/future cells opens the workout library with that
   date selected. Existing workout pills sit above this link, preserving their
   own click and drag interactions. */
.calendar__schedule {
  position: absolute; inset: 0; z-index: 0; border-radius: .35rem;
  color: inherit; text-decoration: none;
}
.calendar__schedule::after {
  content: "+"; position: absolute; top: .25rem; right: .35rem;
  display: grid; place-items: center; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: var(--color-brand-soft, #e6efe9); color: var(--color-brand, #1a5c45);
  font-size: .85rem; font-weight: 700; line-height: 1; opacity: 0;
  transition: opacity .12s ease;
}
.calendar__cell.is-schedulable:hover { background: #f3faf7; }
.calendar__cell.is-schedulable:hover .calendar__schedule::after,
.calendar__schedule:focus-visible::after { opacity: 1; }
.calendar__schedule:focus-visible { outline: 2px solid var(--color-brand, #1a5c45); outline-offset: -3px; }
.calendar__cell.is-schedulable .calendar__date { pointer-events: none; }
@media (hover: none) {
  .calendar__schedule::after { opacity: .65; }
}

.wpill {
  display: flex; align-items: center; justify-content: space-between; gap: .3rem;
  text-decoration: none; color: inherit; padding: .2rem .35rem; border-radius: .35rem;
  font-size: .72rem; background: #eef2f7; border-left: 3px solid #9aa4b2;
  position: relative; z-index: 1;
}
.wpill__sport { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpill--planned   { border-left-color: #2b6cb0; }
.wpill--completed { border-left-color: #2f855a; background: #f0fff4; }
.wpill--skipped   { border-left-color: #c05621; background: #fff8f1; opacity: .9; }

.calendar__legend { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .9rem; font-size: .72rem; }
.calendar__legend .wpill { flex: 0 0 auto; padding: .15rem .5rem; }
.calendar__legend-note { color: #6b7280; }

/* Synced activity chips share the day cell with workout pills. */
.calendar__cell .activity-chip {
  position: relative; z-index: 1;
  padding: .2rem .35rem; font-size: .72rem;
}

/* Mobile: keep the planning grid, and surface a readable stacked activity list. */
.calendar__activity-list { display: flex; margin-top: 1.25rem; }
.calendar__empty { margin-top: 1.25rem; }
.calendar__empty-actions {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .75rem;
}
@media (min-width: 720px) {
  .calendar__activity-list { display: none; }
}

/* Drag-to-reschedule (#95): grab affordance, ghost the dragged pill, highlight the
   day being hovered as a drop target. */
/* Draggable (non-completed) pills: grab affordance; touch-action:none lets a touch
   drag them without the page scrolling. is-dragging floats the pill above the grid
   while it follows the pointer (transform is set inline by the controller). */
.wpill[data-workout-id] { cursor: grab; touch-action: none; }
.wpill.is-dragging { opacity: .5; position: relative; z-index: 10; }
.calendar__cell.is-drop-target { background: #eaf2fb; outline: 2px dashed #2b6cb0; outline-offset: -2px; }

/* Subscribe feed for personal calendars (Apple / Google / Outlook).
   Matches Settings card surfaces (tokens from application.css :root). */
.calendar-subscribe {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-4);
}
.calendar-subscribe--compact {
  margin-top: 0;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
}
/* Nested inside a dialog panel: drop the card chrome so it doesn't double-box. */
.calendar-subscribe--in-modal {
  margin: 0;
  padding: 0;
  padding-right: 1.5rem; /* room for the close button */
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.calendar-subscribe__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--color-brand);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.calendar-subscribe__head h2 {
  margin: 0;
  font-size: var(--text-lg);
}
.calendar-subscribe__head p {
  margin: var(--space-2) 0 0;
  max-width: 64ch;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.calendar-subscribe .mcp-endpoint {
  margin: 0;
}
.calendar-subscribe__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.calendar-subscribe__how {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.calendar-subscribe__how li + li { margin-top: var(--space-1); }