/* Exercisable styles using standard CSS */

/* Edit mode: actions show only while a checked toggle is on the page. A page
   with no toggle at all — a view-only sharee's workout renders none — counts
   as edit mode off. */
body:not(:has(.edit-mode-toggle:checked)) .edit-action {
  display: none;
}

/* Smaller trash icon for nested exercises */
[data-parent-id] .trash-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Base exercisable styling */
.exercisable {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Text sizes for exercisables and block headers at root level. Fluid: the
   lower bound is what phones get, the upper bound holds from small-tablet
   widths (~560px) up — the same sizes as before. */
.exercisable .exercise-name {
  font-size: clamp(1.5rem, 4vw + 0.5rem, 1.875rem); /* 24px → 30px */
  line-height: 1.2;
  font-weight: 700;
}

.exercisable .exercise-mode {
  font-size: clamp(1.25rem, 3.2vw + 0.45rem, 1.5rem); /* 20px → 24px */
  line-height: 1.33;
  font-weight: 700;
}

/* Detect nested exercisables using parent container */
/* When inside a block container (has data-parent-id attribute) */
[data-parent-id] .exercisable .exercise-name {
  font-size: clamp(1.125rem, 2vw + 0.65rem, 1.25rem); /* 18px → 20px */
  line-height: 1.4;
}

[data-parent-id] .exercisable .exercise-mode {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.125rem); /* 16px → 18px */
  line-height: 1.55;
}

/* Add left border and padding for nested exercisables */
[data-parent-id] .exercisable {
  padding-left: 0.75rem; /* 12px */
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgb(229 231 235); /* gray-200 */
}

/* Dark mode border color */
.dark [data-parent-id] .exercisable,
[data-parent-id] .exercisable:where(.dark *) {
  border-left-color: rgb(55 65 81); /* gray-700 */
}

/* During drag operations - use the sortable classes to detect context */
/* When dragging INTO a block (sortable-drag class appears during drag) */
.sortable-drag.exercisable .exercise-name {
  /* Keep current size during drag based on destination */
  transition: font-size 0.2s ease;
}

.sortable-drag.exercisable .exercise-mode {
  transition: font-size 0.2s ease;
}

/* When ghost is inside a block container */
[data-parent-id] .sortable-ghost.exercisable .exercise-name {
  font-size: clamp(1.125rem, 2vw + 0.65rem, 1.25rem);
}

[data-parent-id] .sortable-ghost.exercisable .exercise-mode {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.125rem);
}