/* My Simple Health — YouTube planned-workout modal polish */

/*
  Calendar month cells are an index of the day, not a content card.
  A connected YouTube workout participates in the existing Movement layer
  and is represented by Calendar's event indicator. The video thumbnail stays
  in the selected-day detail surface, where it can coexist with other events.
*/
.msh-calendar-day.has-youtube-workout {
  background-image: none !important;
}

.msh-calendar-day.has-youtube-workout::after {
  content: none !important;
}

[data-theme="dark"] .msh-calendar-day.has-youtube-workout {
  background-image: none !important;
}

#msh-youtube-workout-title {
  max-width: 24ch;
  margin-top: .45rem;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

#msh-youtube-workout-title + * {
  min-width: 0;
}

html.msh-native-embedded .msh-date-events .msh-youtube-workout-thumb {
  margin-top: 7px;
  margin-bottom: 3px;
}

html.msh-native-embedded .msh-date-events .msh-youtube-workout-thumb span {
  margin-top: 5px;
  color: var(--msh-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
  text-transform: none;
}

/*
  The planner is rendered as a fixed modal. On iOS/WKWebView the page itself
  can be wider than the visual viewport, so percentage widths can inherit that
  oversized layout width. Pin the planner to the visual viewport instead.
*/
.msh-youtube-modal {
  width: 100dvw !important;
  max-width: 100dvw !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.msh-youtube-modal .msh-youtube-card {
  width: min(760px, calc(100dvw - 36px)) !important;
  max-width: calc(100dvw - 36px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.msh-youtube-card,
.msh-youtube-card header,
.msh-youtube-card header > div,
.msh-youtube-card form,
.msh-youtube-card label,
.msh-youtube-card .msh-card-actions,
.msh-youtube-card .msh-youtube-grid,
.msh-youtube-card .msh-youtube-results,
.msh-youtube-card [data-youtube-account-panel],
.msh-youtube-card [data-youtube-saved-connection] {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.msh-youtube-card input,
.msh-youtube-card select,
.msh-youtube-card textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.msh-youtube-card p,
.msh-youtube-card small,
.msh-youtube-card strong,
.msh-youtube-card h2,
.msh-youtube-card h3 {
  max-width: 100% !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

.msh-youtube-card .msh-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.msh-youtube-card .msh-card-actions > * {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
}

@media (max-width: 680px) {
  #msh-youtube-workout-title {
    max-width: 20ch;
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.08;
  }

  .msh-youtube-modal {
    padding: 0 !important;
  }

  .msh-youtube-modal .msh-youtube-card {
    width: 100dvw !important;
    max-width: 100dvw !important;
    padding: 24px 20px !important;
    border-radius: 24px 24px 0 0 !important;
  }

  .msh-youtube-card header {
    gap: 10px !important;
  }

  .msh-youtube-card .msh-card-actions > button,
  .msh-youtube-card .msh-card-actions > a {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}