@layer components {

.recording-review {
  --recording-video-max-width: min(100%, 24.5rem);
  --recording-video-max-height: min(78vh, 52rem);
  display: block;
}

.recording-review__chapters-band {
  margin-bottom: var(--space-5);
}

.recording-review__layout {
  display: grid;
  gap: var(--space-6);
}

.recording-review__video-column,
.recording-review__details-column {
  min-width: 0;
}

.recording-review__video-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.recording-review__player-wrap {
  display: flex;
  justify-content: center;
}

.recording-review .recording-video-player {
  width: min(100%, var(--recording-video-max-width));
}

.recording-review__details-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.recording-chapter-details {
  margin: 0;
}

.recording-chapter-details__eyebrow,
.recording-chapter-details__hint,
.recording-chapter-details__label,
.recording-chapter-details__empty,
.recording-chapter-details__fallback,
.recording-chapter-details__photo-caption {
  margin: 0;
  color: var(--color-text-muted);
}

.recording-chapter-details__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.recording-chapter-details__hint {
  font-size: var(--text-sm);
  line-height: 1.5;
}

.recording-chapter-details__summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recording-chapter-details__section {
  display: none;
}

.recording-chapter-details__section--active {
  display: block;
}

.recording-chapter-details__summary {
  display: block;
}

.recording-chapter-details__summary-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: left;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}

.recording-chapter-details__summary-card:hover,
.recording-chapter-details__summary-card:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
  box-shadow: var(--shadow-card);
  outline: none;
  transform: translateY(-1px);
}

.recording-chapter-details__summary-main {
  min-width: 0;
  padding: var(--space-4);
}

.recording-chapter-details__summary-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0;
  flex-wrap: wrap;
}

.recording-chapter-details__summary-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
}

.recording-chapter-details__summary-time {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.recording-chapter-details__summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.recording-chapter-details__summary-previews {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.recording-chapter-details__summary-preview {
  display: block;
  width: 3.75rem;
  height: 4.75rem;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-surface-subtle);
  box-shadow: var(--shadow-sm);
}

.recording-chapter-details__summary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-4);
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 65%, transparent);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.recording-chapter-details__chip--muted {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.recording-chapter-details__modal-content {
  width: min(90vw, 54rem);
}

.recording-chapter-details__modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.recording-chapter-details__meta {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.recording-chapter-details__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.recording-chapter-details__value {
  margin: var(--space-1) 0 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.recording-chapter-details__fallback {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.recording-chapter-details__block {
  margin-top: var(--space-4);
}

.recording-chapter-details__block-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.recording-chapter-details__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.recording-chapter-details__chip {
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
}

.recording-chapter-details__tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.recording-chapter-details__task {
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-text);
}

.recording-chapter-details__empty {
  font-size: var(--text-sm);
}

.recording-chapter-details__photos {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.recording-chapter-details__photo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.recording-chapter-details__photo-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-surface-subtle);
}

.recording-chapter-details__photo-caption {
  font-size: var(--text-xs);
  line-height: 1.45;
}

.recording-video-with-chapters--fullscreen {
  min-height: 100%;
  padding: var(--space-4);
  box-sizing: border-box;
  background: var(--color-nav-bg);
}

.recording-video-with-chapters--fullscreen .recording-review__layout {
  min-height: calc(100dvh - 2 * var(--space-4));
  align-items: stretch;
}

.recording-video-with-chapters--fullscreen .recording-review__details-column .recording-chapter-details,
.recording-video-with-chapters--fullscreen .recording-chapter-details__section {
  background: color-mix(in srgb, var(--color-nav-bg) 92%, transparent);
  color: var(--color-nav-text);
}

.recording-video-with-chapters--fullscreen .recording-chapter-details__toggle,
.recording-video-with-chapters--fullscreen .recording-chapter-details__value,
.recording-video-with-chapters--fullscreen .recording-chapter-details__task,
.recording-video-with-chapters--fullscreen .recording-chapter-details__block-title {
  color: var(--color-nav-text);
}

.recording-video-with-chapters--fullscreen .recording-chapter-details__task {
  background: color-mix(in srgb, var(--color-nav-bg) 78%, white 22%);
}

@media (min-width: 960px) {
  .recording-review__layout {
    grid-template-columns: minmax(21rem, 0.95fr) minmax(0, 1.65fr);
    align-items: start;
  }

  .recording-review__video-column {
    position: sticky;
    top: calc(var(--space-4) + 3.5rem);
  }

  .recording-review__chapters-band {
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 1200px) {
  .recording-review {
    --recording-video-max-width: min(100%, 26rem);
    --recording-video-max-height: min(78vh, 56rem);
  }
}

@media (max-width: 639px) {
  .recording-review {
    --recording-video-max-width: 100%;
    --recording-video-max-height: min(65vh, 34rem);
  }

  .recording-review__layout {
    gap: var(--space-4);
  }

  .recording-chapter-details__summary {
    display: block;
  }

  .recording-chapter-details__summary-card {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .recording-chapter-details__meta,
  .recording-chapter-details__photos {
    grid-template-columns: 1fr;
  }
}

}