.sidebar-library {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.sidebar-library-chevron,
.sidebar-library-section-chevron {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  transform: rotate(-45deg);
  border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor;
  opacity: 0.68;
  transition: transform 140ms ease;
}

.sidebar-library-toggle[aria-expanded="true"] .sidebar-library-chevron,
.sidebar-library-section-toggle[aria-expanded="true"] .sidebar-library-section-chevron {
  transform: rotate(45deg) translate(-1px, -1px);
}

.sidebar-library-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding-top: 2px;
  max-height: 100vh;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: max-height 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-library-body.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sidebar-library-body[hidden],
.sidebar-library-list[hidden] { display: none; }

.sidebar-library-sections {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  /* When the set of workspace kinds is taller than the panel, scroll the
   * whole stack of headings. Expanded kinds retain their own contained list
   * scroller, so a long kind does not take the rest of the Library with it. */
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar-library-list.is-drag-scrolling,
.sidebar-library-sections.is-drag-scrolling {
  scroll-behavior: auto;
  overscroll-behavior: contain;
}

.sidebar-library-section {
  display: grid;
  min-height: 0;
  flex: 0 0 auto;
  grid-template-rows: auto minmax(0, 0fr);
  padding-bottom: 1px;
  transition: grid-template-rows 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Workspace switches remove only the Library navigation. This explicit rule
 * wins over the section's authored grid display as well as the UA hidden rule. */
.sidebar-library-section[data-workspace-hidden="true"] { display: none; }

/* Keep every kind one click away while the open kind uses only what it needs.
 * A long kind may shrink to the available space, at which point its list
 * scrolls; a short one never stretches to fill an empty panel. Search is
 * deliberately the exception: it is a cross-kind result stream, so it keeps
 * the familiar single scroller instead of nesting five tiny ones. */
.sidebar-library-section.is-expanded {
  flex: 0 1 auto;
  grid-template-rows: auto minmax(0, 1fr);
}

/* Once the fixed headings need the outer scroller, do not let flexbox take
 * the entire deficit from the one shrinkable section. This is its 42px
 * heading footprint plus one complete 39px list row and the bottom pixel. */
.sidebar-library-sections:not(.is-searching) > .sidebar-library-section.is-expanded {
  min-height: 82px;
}

.sidebar-library-sections.is-searching {
  overflow-x: hidden;
  overflow-y: auto;
}

.sidebar-library-sections.is-searching .sidebar-library-section { flex: 0 0 auto; }

.sidebar-library-section-heading {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  /* The label remains the full-row disclosure button. The two contextual
     actions sit over its reserved trailing space, leaving the disclosure
     chevron as the final, fixed landmark at the edge of every section. */
  grid-template-columns: minmax(0, 1fr) repeat(3, 26px);
  align-items: center;
  gap: 0;
  min-height: 35px;
  margin: 2px 2px 5px;
  padding: 0 4px;
  border-radius: 12px;
  transition: background 120ms ease, color 120ms ease;
}

.sidebar-library-section-heading:hover,
.sidebar-library-section-heading:focus-within {
  background: var(--bg-hover);
}

.sidebar-library-section-toggle {
  position: relative;
  display: grid;
  z-index: 0;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 34px;
  padding: 4px 82px 4px 5px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 540;
  text-align: left;
}

.sidebar-library-section-toggle:hover {
  color: var(--text-primary);
}

.sidebar-library-kind-icon {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: var(--text-tertiary);
}

.sidebar-library-kind-icon svg { width: 15px; height: 15px; }

.sidebar-library-section-toggle:hover .sidebar-library-kind-icon {
  color: var(--text-secondary);
}

.sidebar-library-count {
  position: absolute;
  top: 50%;
  right: 56px;
  display: none;
  min-width: 1.2rem;
  height: 1.2rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

html[data-library-counts] .sidebar-library-count { display: inline-flex; }
.sidebar-library-section-chevron {
  display: none;
  position: absolute;
  top: 50%;
  /* The rotated 5px glyph's painted box sits 3.5px left of its untransformed
     centre, so this half-pixel offset aligns it with the 26px action rhythm. */
  right: 10.5px;
  margin-top: -3px;
}

html[data-library-chevrons] .sidebar-library-section-chevron { display: block; }

.sidebar-library-new {
  --icon-button-glyph-size: 14px;
  display: grid;
  width: 26px;
  height: 26px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  opacity: 0;
  z-index: 1;
  grid-row: 1;
  transition: opacity 100ms ease, background 100ms ease;
}

.sidebar-library-section-heading:hover .sidebar-library-new,
.sidebar-library-section-heading:focus-within .sidebar-library-new,
.sidebar-library-new:focus-visible { opacity: 1; }

.sidebar-library-new:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.sidebar-library-new { grid-column: 3; }

.sidebar-library-list {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 5px;
  /* Leave one pixel above the first folder for its outer drag-target ring. */
  padding: 1px 2px 3px 25px;
  overflow: hidden;
  overscroll-behavior: contain;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  visibility: hidden;
  transition:
    opacity 130ms ease,
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 200ms;
}

.sidebar-library-section.is-expanded .sidebar-library-list {
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 1;
  pointer-events: auto;
  /* `none` releases fixed action menus from this scrolling containing block;
     translateY(0) looks identical but clips their viewport popout. */
  transform: none;
  visibility: visible;
  transition:
    opacity 150ms ease 45ms,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.sidebar-library-sections.is-searching .sidebar-library-list {
  overflow: visible;
}

/* Lesson folders wrap lesson rows in one group, so the list grid cannot place
 * the inter-card space itself inside that wrapper. */
.sidebar-library-folder-group .sidebar-library-row + .sidebar-library-row {
  margin-top: 5px;
}

.sidebar-library-row {
  position: relative;
  min-width: 0;
  border-radius: 9px;
}

.sidebar-library-record {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 35px;
  padding: 7px 60px 7px 10px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A disclosed menu spends one small button on the card, so give the title back
 * the room formerly reserved for four inline actions. */
.sidebar-library-row:has(.sidebar-library-row-menu-trigger) .sidebar-library-record {
  padding-right: 38px;
}

.sidebar-library-record:hover,
.sidebar-library-record:focus-visible,
.sidebar-library-row:hover .sidebar-library-record,
.sidebar-library-row:focus-within .sidebar-library-record {
  outline: 0;
  background: var(--bg-hover);
}

.sidebar-library-row.is-current .sidebar-library-record {
  background: var(--bg-tertiary);
}

.sidebar-library-record strong {
  display: block;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Every record is one line: the title. The detail each kind carries stays in
 * the markup for search to read, and out of the row. */
.sidebar-library-record > span { display: none; }

.sidebar-library-row-actions {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 4px;
  display: flex;
  gap: 4px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

.sidebar-library-row:hover .sidebar-library-row-actions,
.sidebar-library-row:focus-within .sidebar-library-row-actions,
.sidebar-library-row.has-open-menu .sidebar-library-row-actions {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-library-row-action {
  --icon-button-glyph-size: 14px;
  display: grid;
  width: 24px;
  height: 26px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  transition: background 100ms ease, color 100ms ease;
}

.sidebar-library-row-action:focus-visible,
.sidebar-library-row-menu-trigger[aria-expanded="true"] {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar-library-row-action.is-danger:focus-visible { color: #dc2626; }

@media (hover: hover) {
  .sidebar-library-row-action:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }

  .sidebar-library-row-action.is-danger:hover { color: #dc2626; }
}

/* Secondary actions read as one quiet disclosure on the card. The menu is
 * fixed to the viewport by its controller so it can turn upward at the foot of
 * the scrolling Library instead of being cut off by the section. */
.sidebar-library-row-menu {
  position: fixed;
  z-index: 80;
  min-width: 158px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  box-shadow: 0 12px 30px rgba(24, 24, 27, 0.16), 0 2px 8px rgba(24, 24, 27, 0.08);
  animation: sidebar-library-menu-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-library-row-menu[hidden] { display: none; }

.sidebar-library-row-menu-item {
  display: grid;
  width: 100%;
  min-height: 34px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: 520 0.75rem/1.2 var(--font-body);
  text-align: left;
}

.sidebar-library-row-menu-item[hidden] { display: none; }

.sidebar-library-row-menu-item > svg {
  width: 16px;
  height: 16px;
  margin: auto;
}

.sidebar-library-row-menu-item:hover,
.sidebar-library-row-menu-item:focus-visible {
  outline: 0;
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar-library-row-menu-item.is-danger:hover,
.sidebar-library-row-menu-item.is-danger:focus-visible {
  background: color-mix(in srgb, #dc2626 7%, var(--bg-secondary));
  color: #dc2626;
}

.sidebar-library-row-menu-item:disabled {
  background: transparent;
  color: var(--text-tertiary);
  cursor: default;
  opacity: 0.52;
}

@keyframes sidebar-library-menu-in {
  from { opacity: 0; transform: translateY(-3px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sidebar-library-row.is-renaming .sidebar-library-record,
.sidebar-library-row.is-renaming .sidebar-library-row-actions { display: none; }

.sidebar-library-rename-form {
  display: flex;
  min-height: 45px;
  align-items: center;
  padding: 3px;
}

.sidebar-library-rename-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 7px;
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  outline: 0;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: 520 0.75rem/1 var(--font-body);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.sidebar-library-empty {
  padding: 3px 8px 7px 9px;
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  line-height: 1.35;
}

.sidebar-library-resource-progress {
  margin: 1px 4px 7px 25px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: 0.625rem;
  line-height: 1.35;
}

.sidebar-library-resource-progress[hidden] { display: none; }

.sidebar-library button:disabled { cursor: default; opacity: 0.45; }

@media (hover: none) {
  .sidebar-library-new,
  .sidebar-library-row-actions { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-library-section,
  .sidebar-library-list,
  .sidebar-library-chevron,
  .sidebar-library-section-chevron,
  .sidebar-library-new,
  .sidebar-library-body { transition: none; }
  .sidebar-library-row-menu { animation: none; }
}