/* The pathway editor (P1): what the design's markup can't carry — selection on restriction spans, the Add item
   menu, the collapsed lint drawer, and the hover card's placement. Tokens only. */

/* A restriction span is selectable on the editor's canvas; selected, it takes the bars' selection ring. */
button.tl-span {
  cursor: pointer;
  text-align: left;
}

.tl-span.is-selected {
  box-shadow: var(--focus-ring);
}

/* The awaiting-anchor tray's chips are buttons too; selected, they take the same ring. */
.tl-item.is-awaiting.is-selected {
  box-shadow: var(--focus-ring);
}

/* Disclosure menus under a header or canvas button (Add item). */
.app-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 30;
  min-width: calc(var(--app-rail-w) + var(--space-8));
  display: flex;
  flex-direction: column;
  padding: var(--pad-1) 0;
  box-shadow: var(--shadow-3);
}

.app-menu-item {
  justify-content: flex-start;
  width: 100%;
  border-radius: 0;
}

.app-menu-item .small {
  margin-left: auto;
}

/* The lint drawer collapses to its toolbar (P17 draws it collapsed). */
.app-lint-drawer[data-collapsed="true"] {
  height: var(--app-toolbar-h) !important;
}

.app-lint-drawer[data-collapsed="true"] > :not(:first-child) {
  display: none !important; /* over the design markup's inline display */
}

.app-lint-drawer[data-collapsed="true"] .app-lint-collapse .ic {
  transform: rotate(180deg);
}

/* Collapsed, the toolbar says so instead of offering the grouping and Re-run (P17). */
.app-lint-drawer[data-collapsed="true"] .app-lint-when-open,
.app-lint-drawer:not([data-collapsed="true"]) .app-lint-when-collapsed {
  display: none !important; /* over the design markup's inline display */
}