/* Lesson editing rows (product builder + annual topic editor): tools always fit the narrow side panel.
   Loaded last; selectors are scoped to edit rows only. */

/* ---- product builder rows: tools in their own wrapping line under/above the lesson ---- */
body .tree-lesson-row.is-product-edit {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  min-width: 0; max-width: 100%; box-sizing: border-box; overflow: visible;
}
body .tree-lesson-row.is-product-edit > .tree-lesson { min-width: 0; width: 100%; box-sizing: border-box; }
body .tree-lesson-row.is-product-edit .product-lesson-tools {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 6px;
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0; padding: 0; position: static;
}
body .tree-lesson-row.is-product-edit .product-lesson-tools .pl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; min-height: 40px; height: auto; width: 100%; box-sizing: border-box;
  padding: 6px 4px; font-size: 13px; line-height: 1.1; white-space: nowrap; overflow: hidden;
}
body .tree-lesson-row.is-product-edit .product-lesson-tools .pl-btn > span[aria-hidden] { font-size: 16px; flex: none; }
body .tree-lesson-row.is-product-edit .product-lesson-tools .pl-handle {
  cursor: grab; touch-action: none; font-weight: 800; background: #eaf2ff; border-color: #9ab8e6;
}
body .tree-lesson-row.is-product-edit .product-lesson-tools .pl-handle:active { cursor: grabbing; }
/* very narrow panel: icons only, labels stay as aria-label */
@container (max-width: 300px) { body .tree-lesson-row.is-product-edit .pl-txt { display: none; } }
@media (max-width: 420px) { body .tree-lesson-row.is-product-edit .pl-txt { display: none; } }
body .lesson-tree.is-product-edit-tree { container-type: inline-size; }
body .tree-lesson-row.is-lesson-hidden > .tree-lesson { opacity: .72; border-style: dashed; }
.tree-lesson-badge.is-hidden-badge { background: #fff1d6; color: #7a4b00; }

/* ---- annual topic editor rows: grip | lesson, tools on a wrapping line ---- */
body.is-design-lab .tree-lesson-row[data-lesson-key],
body.is-lesson-edit .tree-lesson-row[data-lesson-key] {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "grip lesson" "tools tools";
  align-items: center; column-gap: 6px; row-gap: 6px; min-width: 0; max-width: 100%; box-sizing: border-box;
}
body.is-design-lab .tree-lesson-row[data-lesson-key] > .tree-lesson-grip,
body.is-lesson-edit .tree-lesson-row[data-lesson-key] > .tree-lesson-grip {
  grid-area: grip; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px;
  font-size: 22px; line-height: 1; border-radius: 10px; background: #eaf2ff; color: #003a7d; border: 1px solid #9ab8e6;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; opacity: 1; visibility: visible;
}
body.is-design-lab .tree-lesson-row[data-lesson-key] > .tree-lesson,
body.is-lesson-edit .tree-lesson-row[data-lesson-key] > .tree-lesson { grid-area: lesson; min-width: 0; width: 100%; }
body.is-design-lab .tree-lesson-row[data-lesson-key] > .lm-tools,
body.is-lesson-edit .tree-lesson-row[data-lesson-key] > .lm-tools {
  grid-area: tools; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0; position: static;
}
body.is-design-lab .tree-lesson-row[data-lesson-key] > .lm-tools button,
body.is-lesson-edit .tree-lesson-row[data-lesson-key] > .lm-tools button {
  min-width: 40px; min-height: 40px; flex: 0 0 auto; box-sizing: border-box;
}
body.is-design-lab .tree-lesson-row[data-lesson-key] > .lm-tools .lm-state,
body.is-lesson-edit .tree-lesson-row[data-lesson-key] > .lm-tools .lm-state { flex: 1 1 auto; min-width: 0; white-space: normal; }
.tree-lesson-row.is-dragging { opacity: .6; outline: 2px dashed #41d9f8; }

/* live status from the server policy, always visible while editing */
.tree-lesson .pa-badge { white-space: normal; }

/* pinned edit bar must not hide the search box or the first row */
body.is-product-builder .lesson-tree.is-product-edit-tree,
body.is-lesson-edit .lesson-tree { scroll-padding-top: 72px; }
body.is-product-builder [data-pl-row], body.is-lesson-edit .tree-lesson-row { scroll-margin-top: 80px; }

/* Root cause of tools clipped on the left: grid tracks sized to min-content (279px) inside a 250px panel with
   overflow hidden. Tracks may shrink to the panel; items may shrink below their content. */
.learn-side .lesson-tree,
.learn-side .tree-topics,
.learn-side .tree-lessons { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; box-sizing: border-box; }
.learn-side .lesson-tree > *,
.learn-side .tree-topics > *,
.learn-side .tree-lessons > *,
.learn-side .tree-domain,
.learn-side .tree-topic { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Edit rows: the lesson title must keep a readable width next to live badges (no letter-per-line). */
.learn-side .tree-lesson-row .tree-lesson-title { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.learn-side .tree-lesson-row .tree-lesson-title-text { min-width: 0; overflow-wrap: anywhere; }
.learn-side .tree-lesson-row .tree-lesson-end { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; min-width: 0; }
.learn-side .tree-lesson-row .pa-badge { white-space: nowrap; }